Suche senden
Hochladen
Performance-Optimierung für WordPress-Websites
•
1 gefällt mir
•
1,095 views
André Goldmann
Folgen
Meine Folien vom Affiliate-Stammtisch in Leipzig 2016
Weniger lesen
Mehr lesen
Präsentationen & Vorträge
Melden
Teilen
Melden
Teilen
1 von 68
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016
André Goldmann
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
André Goldmann
Bilder für das Web optimieren
Bilder für das Web optimieren
André Goldmann
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
André Goldmann
Die 10 häufigsten Fehler in Relaunch-Projekten
Die 10 häufigsten Fehler in Relaunch-Projekten
André Goldmann
Mobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
André Goldmann
Empfohlen
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016
André Goldmann
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
André Goldmann
Bilder für das Web optimieren
Bilder für das Web optimieren
André Goldmann
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
André Goldmann
Die 10 häufigsten Fehler in Relaunch-Projekten
Die 10 häufigsten Fehler in Relaunch-Projekten
André Goldmann
Mobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
André Goldmann
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
André Goldmann
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
André Goldmann
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
André Goldmann
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
André Goldmann
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
André Goldmann
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
André Goldmann
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
André Goldmann
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
André Goldmann
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
André Goldmann
Nedim sabic Million SEO Campixx2014
Nedim sabic Million SEO Campixx2014
Spirofrog & Cleantech Europe - Jobs & Career
Getting started with woo commerce
Getting started with woo commerce
Merrill Mayer
Theme customization
Theme customization
Merrill Mayer
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
Darius Erdt
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
121WATT GmbH
The transition to digital adulthood
The transition to digital adulthood
Ebiquity
SEO: Crawl Budget Optimierung & Onsite SEO
SEO: Crawl Budget Optimierung & Onsite SEO
Philipp Klöckner
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
Philipp Klöckner
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
Lisa Myers
Ephata 611
Ephata 611
Vu Mai JMV
Visual Resume of Fabrice L Broyld
Visual Resume of Fabrice L Broyld
Fabrice Louis-Broyld
Back To School Night 2014
Back To School Night 2014
mbstein
Weitere ähnliche Inhalte
Was ist angesagt?
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
André Goldmann
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
André Goldmann
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
André Goldmann
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
André Goldmann
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
André Goldmann
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
André Goldmann
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
André Goldmann
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
André Goldmann
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
André Goldmann
Was ist angesagt?
(10)
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
Andere mochten auch
Nedim sabic Million SEO Campixx2014
Nedim sabic Million SEO Campixx2014
Spirofrog & Cleantech Europe - Jobs & Career
Getting started with woo commerce
Getting started with woo commerce
Merrill Mayer
Theme customization
Theme customization
Merrill Mayer
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
Darius Erdt
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
121WATT GmbH
The transition to digital adulthood
The transition to digital adulthood
Ebiquity
SEO: Crawl Budget Optimierung & Onsite SEO
SEO: Crawl Budget Optimierung & Onsite SEO
Philipp Klöckner
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
Philipp Klöckner
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
Lisa Myers
Ephata 611
Ephata 611
Vu Mai JMV
Visual Resume of Fabrice L Broyld
Visual Resume of Fabrice L Broyld
Fabrice Louis-Broyld
Back To School Night 2014
Back To School Night 2014
mbstein
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Akce Dobrého webu
Ivan Oplesnin
Ivan Oplesnin
Maria Lipina
Now Hear This! Putting Voice, Video, and Text into Ruby on Rails
Now Hear This! Putting Voice, Video, and Text into Ruby on Rails
Mojo Lingo
"Школа дошколят" МБОУ «ЦО №23»
"Школа дошколят" МБОУ «ЦО №23»
shlyop
Shaun Resume
Shaun Resume
SHAUN HOLT
Andere mochten auch
(17)
Nedim sabic Million SEO Campixx2014
Nedim sabic Million SEO Campixx2014
Getting started with woo commerce
Getting started with woo commerce
Theme customization
Theme customization
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
SEO Campixx 2014: Einfach Geld verdienen mit Affiliate-Projekten - Sind die Z...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
The transition to digital adulthood
The transition to digital adulthood
SEO: Crawl Budget Optimierung & Onsite SEO
SEO: Crawl Budget Optimierung & Onsite SEO
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
Ephata 611
Ephata 611
Visual Resume of Fabrice L Broyld
Visual Resume of Fabrice L Broyld
Back To School Night 2014
Back To School Night 2014
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Ivan Oplesnin
Ivan Oplesnin
Now Hear This! Putting Voice, Video, and Text into Ruby on Rails
Now Hear This! Putting Voice, Video, and Text into Ruby on Rails
"Школа дошколят" МБОУ «ЦО №23»
"Школа дошколят" МБОУ «ЦО №23»
Shaun Resume
Shaun Resume
Ähnlich wie Performance-Optimierung für WordPress-Websites
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
Responsive Images
Responsive Images
Sven Wolfermann
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
André Krämer
Online / Offline
Online / Offline
Peter Rozek
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Jakob
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Jakob
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
PatrickHillert
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Sven Wolfermann
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
e-dialog GmbH
Client-side Performance Optimizations
Client-side Performance Optimizations
Jakob
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Jakob
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Connected-Blog
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
Johannes Weber
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Alexander Merkel
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
Ähnlich wie Performance-Optimierung für WordPress-Websites
(20)
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Responsive Images
Responsive Images
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
Online / Offline
Online / Offline
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Client-side Performance Optimizations
Client-side Performance Optimizations
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Performance-Optimierung für WordPress-Websites
1.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Performance-Optimierung für WordPress-Websites
2.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wie kriegen wir unsere Daten schnell durch die Leitung?
3.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 3 Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales Google hat errechnet, dass eine 4/10 Sekunde täglich Acht Mio. weniger Suchen bedeuten würde Quelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience
4.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wie schwer ist eigentlich eine [mobile] Website?
5.
© 121WATT -
André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder • 802,3 kb Script • 290,6 kb Diverses • 54,1 kb HTML • 28,6 kb CSS Page Size: 2.6 MB 5 http://www.posterxxl.de/ Wie schwer ist eine [mobile] Website?
6.
© 121WATT -
André Goldmann Was bedeutet das für mobile? Ladezeit für 2,6 MB: • GPRS: 56 kbit/sec 2,6 MB = 46 Sekunden • EDGE: 220 kbit/sec 2,6 MB = 12 Sekunden • UMTS (3G): 376 kbit/sec 2,6 MB = 7 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 2,6 MB = 0,3 Sekunden • LTE (4G): 100 Mbit/sec 2,6 MB = 0,02 Sekunden 6
7.
© 121WATT -
André Goldmann Beispiel m.zalando.de: Requests: 129 • 507,3 kb Script • 243,9 kb Bilder • 35,7 kb CSS • 26,1 kb Diverses • 21,8 kb HTML Page Size: 834,9 kb 7 m.zalando.de Wie schwer ist eine [mobile] Website?
8.
© 121WATT -
André Goldmann Was bedeutet das für mobile? Ladezeit für 834,9 kb: • GPRS: 56 kbit/sec 834,9 kb = 15 Sekunden • EDGE: 220 kbit/sec 834,9 kb = 4 Sekunden • UMTS (3G): 376 kbit/sec 834,9 kb = 2 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 834,9 kb = 0,1 Sekunden • LTE (4G): 100 Mbit/sec 834,9 kb = 0,008 Sekunden 8
9.
© 121WATT -
André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder • 147,6 kb Script • 84,3 kb Diverses • 18,7 kb CSS • 13 kb HTML Page Size: 584.7 kb 9 http://www.121watt.de Wie schwer ist eine [mobile] Website?
10.
© 121WATT -
André Goldmann Was bedeutet das für mobile? Ladezeit für 584,7 kb: • GPRS: 56 kbit/sec 584,7 kb = 10 Sekunden • EDGE: 220 kbit/sec 584,7 kb = 3 Sekunden • UMTS (3G): 376 kbit/sec 584,7 kb = 2 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 584,7 kb = 0,08 Sekunden • LTE (4G): 100 Mbit/sec 584,7 kb = 0,005 Sekunden 10
11.
© 121WATT -
André Goldmann 11 http://tools.pingdom.com/fpt/ Pingdom Website Speed Test
12.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16
13.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16
14.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Checklisten für den Einstieg in die Optimierung
15.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung am Server/Hosting
16.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren 16 http://wp-rocket.me/de/ Ladezeit-Optimierung am Server
17.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren 17 https://de.wordpress.org/plugins/wp-super-cache/ Ladezeit-Optimierung am Server
18.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen 18 https://de.wordpress.org/plugins/redirection/ Ladezeit-Optimierung am Server
19.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 19 http://www.mysql.com/products/workbench/ Ladezeit-Optimierung am Server
20.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 20 https://de.wordpress.org/plugins/wp-optimize/ Ladezeit-Optimierung am Server
21.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 21 https://infinitewp.com/ Ladezeit-Optimierung am Server
22.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren Verwendung eines Content-Delivery-Networks 22 https://deliciousbrains.com/wp-offload-s3/ Ladezeit-Optimierung am Server
23.
© 121WATT -
André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren Verwendung eines Content-Delivery-Networks Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen 23 http://www.elegantthemes.com/plugins/monarch/ Ladezeit-Optimierung am Server
24.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung im HTML-Code
25.
© 121WATT -
André Goldmann 25 http://wp-rocket.me/de/ Ladezeit-Optimierung im HTML-Code HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
26.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung für Bilder und Grafiken
27.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) 27 Ladezeit-Optimierung für Bilder und Grafiken
28.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren 28 http://optimus.io/ Ladezeit-Optimierung für Bilder und Grafiken
29.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren 29 https://kraken.io/ Ladezeit-Optimierung für Bilder und Grafiken
30.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden 30 https://deliciousbrains.com/wp-offload-s3/ Ladezeit-Optimierung für Bilder und Grafiken
31.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) 31 https://icomoon.io/ Ladezeit-Optimierung für Bilder und Grafiken
32.
© 121WATT -
André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) Einsatz des HTML5 <picture>-Elements 32 https://de.wordpress.org/plugins/picturefillwp/ Ladezeit-Optimierung für Bilder und Grafiken
33.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 <picture> Responsive Bilder für unterschiedliche Anwendungsfälle
34.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Probleme bei skalierten Bildern 34 • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer • deutlicher Qualitätsverlust • weniger Datenvolumen beim Nutzer
35.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Lösung: <picture>-Element 35 Bildquelle: http://www.apple.com/de/ Bildquelle: http://www.apple.com/de/ Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus. <picture> <source media="(min-width: 650px)"srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)“ srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> </picture>
36.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 36
37.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Beispiel: Zalando auf dem Desktop 37
38.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Beispiel: Zalando auf dem Smartphone 38
39.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 39
40.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Pixel-Dichten-basierte Bildauswahl (Pixeldensity) Für den Nutzer sichtbar: Bild 100x100 Pixel für 2fache Pixel-Dichte (iPhone & Co.): Bild 200x200 Pixel für 1,5fache Pixeldichte: Bild 150x150 Pixel Das Bild selbst wird jedoch immer in 100x100 Pixeln per CSS ausgegeben 40
41.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 41
42.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Viewport-basierte Bildauswahl 42 Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
43.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wann sollten wir welche Auswahl definieren? • Art-Direction-basierte Bildauswahl (Bildausschnitt enorm wichtig, CTA muss sichtbar sein) • Pixel-Dichten-basierte Bildauswahl (Zielgruppe ist im High-Resolution Bereich) • Viewport-basierte Bildauswahl (User-Generated Content, Performance, automatische Prozesse) 43
44.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Meine ❤ Performance-Plugins für WordPress WP Rocket (Caching, Komprimierung, CDN & HTTP-Request-Reduzierung) OptimusHQ (Bildoptimierung bereits beim Upload) WP Offload™ S3 (automatischer Upload ins CDN) Redirection (für Weiterleitungen) - Alternativ „Yoast SEO Premium“ 44
45.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wie optimiert man für den individuellen Nutzer?
46.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Was ist Contextual-Content? oder: Was ist personalisierter Content?
47.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Unterschiedliche Zielgruppen – personalisierter Content 47
48.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Kontext: Der Nutzer selbst Nutzerdaten verwenden, um Inhalte auszuspielen: • Verbindung zu Social Networks nutzen • Daten in Cookies speichern oder „nach Login“ Personalisierte Inhalte des Nutzers Registrierungsoptionen ein/ausblenden Sortierung der Inhalte 48
49.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Kontext: Der Ort des Nutzers Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS) 49
50.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wozu kann man die Geolocation nutzen? Navigation zu einem Geschäft (festgelegte Adresse) Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.) Lokale Werbung Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.) Berechnung von Liefergebühren, Preisen etc. Vorausgefüllte Formularfelder 50
51.
© 121WATT -
André Goldmann 51 http://html5demos.com/geo Geolocation nutzen!
52.
© 121WATT -
André Goldmann 52 http://caniuse.com/#search=Geolocation Can I use Geolocation?
53.
© 121WATT -
André Goldmann 53 https://www.maxmind.com/de/geoip2-services-and-databases Fragen ist nett. Einfach machen ist besser.
54.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Kontext: Das eigentliche Gerät Responsive-Design: Angepasste Inhaltsmengen, Bedienlogiken & die Darstellung der Website. Darstellung/Funktion der Website auf Basis des Geräts/der Geräteart Umleitung zur App-Installation 54
55.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Kontext: Uhrzeit des Nutzers Anpassung der Inhalte je nach Tageszeit bzw. größeren Zeitabschnitten, wie wochentags & Wochenende oder der aktuellen Jahreszeit. Kontaktmöglichkeiten oder Anreise-Informationen am Tag eines Events Layout zur Weihnachtszeit etc. automatisch angepasst Abends eher gedeckte Farben als am Tag 55
56.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Kontext: Haltung oder Befinden des Nutzers Sitzt der Nutzer auf dem Sofa? Befindet er sich gestresst und beengt auf dem Markt oder in der Bahn? Hinweis auf sensible Daten vorab geben Geräteausrichtung nutzen, um Inhalte besser darzustellen 56
57.
© 121WATT -
André Goldmann 57 https://dan.exposure.co/tbd-fest Beispiel: exposure.co https://dan.exposure.co/tbd-fest?slow=1
58.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Umsetzung von „Contextual-Content“: 58 Kontext X, dann Inhalt Y Ich brauche: Informationen über den Kontext Ich brauche: Zusatz-Informationen für meinen Inhalt
59.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 Wie kann man das alles umsetzen? …mit Tools natürlich.
60.
© 121WATT -
André Goldmann 60 http://www.monetate.com/ Monetate
61.
© 121WATT -
André Goldmann 61 http://www.gravity.com/ Gravity
62.
© 121WATT -
André Goldmann 62 http://www.apptus.com/ APPTUS
63.
© 121WATT -
André Goldmann 63 https://www.onespot.com/ OneSpot
64.
© 121WATT -
André Goldmann 64 http://www.monoloop.com/ Monoloop
65.
© 121WATT -
André Goldmann 65 https://www.optimizely.com/ Optimizely
66.
© 121WATT -
André Goldmann 66 http://www.webpower.eu/de/ Webpower
67.
© 121WATT -
André Goldmann 67 https://vwo.com/ Visual Website Optimizer
68.
© 121WATT -
André Goldmann@fuchsfaktor10 #asl16 André Goldmann 68 • Seit 1996 Front-End Entwickler & Optimierer aus Leidenschaft • Chief Operating Officer bei der 121WATT CEO bei Pixeldreher CEO bei Fuchsfaktor10 – Virtual-Reality-Studio für 360°-Videos • Seminare bei der 121WATT: Mobile SEO & User Experience Seminar Technical SEO & OnPage SEO Basis-Seminar WordPress Intensiv-Seminar Instagram-Marketing Seminar • Twitter: @fuchsfaktor10 E-Mail: andre.goldmann@121watt.de
Jetzt herunterladen