SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Downloaden Sie, um offline zu lesen
Critical Rendering Path
Das 0,5s Pagespeed Projekt
Zu mir
• 25 Jahre
• Halle(Saale)
• Presales, Kundenprojekte, Schulungen
• Lieblingsthema: Ladezeiten
Gliederung
1. Warum 0,5 Sekunden?
2. Was ist der Critical Rendering Path?
3. Wie optimiert man den Rendering Path?
4. Der Selbstversuch
5. Fazit
Wie genau definieren wir
Pagespeed?
Für den Nutzer ist
wichtig wann er mit
einer Seite agieren
kann -> 

Pagespeed = Wie
schnell lädt der
sichtbare Bereich 

(above the fold)
1. Warum 0,5 Sekunden?
Allgemeine Daten zum Pagespeed
• 57% brechen den Besuch einer Website ab, wenn diese nicht in 3s
geladen ist
• 65% der 18-24 jährigen erwarten eine Ladezeit von 2s und weniger
Was bedeutet das wirtschaftlich?
• Amazons Rechnung:

1s längere Ladezeit = $1,6Mrd. weniger Verkäufe/Jahr
• Googles Rechnung:

0,4s längere Ladezeit = 8Mil. weniger Searches/Tag
Delay User Reaction
0-100ms Instant
100-300ms Leicht spürbare Verzögerung
300-1000ms Fokus, spürbare Verzögerung
1s+ Gedankliches Abschweifen
10s+ Das wird wohl nix…
Was bedeutet das für uns?
• 1 Sekunde Zeit um die volle Aufmerksamkeit des Nutzers
beizubehalten
• Im besten Fall werden Teile der Seite bereits innerhalb von 100ms
ausgeliefert
• Die Conversion bei langsamen Webseiten geht deutlich in den
Keller
Ok, das begrenzt das Ganze auf 1s,
warum also

0,5s-Projekt?
Wie viel Zeit kostet uns das mobile Surfen?
LTE HSPA+ HSPA EDGE GPRS
AT&T Netwerk
Latenz
in ms
40-50 50-200 150-400 600-750 600-750
Was bleibt übrig?
ca. 50% gehen durch Netzwerklatenz verloren

RTT, DNS, TCP, TLS, HTTP

Uns bleiben 500ms zum Laden der eigentlichen Seite!
2. Was ist der Critical Rendering
Path?
Standardoptimierungen
• Bilder komprimieren
• Antwortzeit des Servers reduzieren
• CSS und JS minimieren/optimieren
• Gzip/Deflate Komprimierung aktivieren
• Browser-Caching aktivieren
Wie baut sich eine Seite auf?
<!doctype html>
<meta charset=utf-8>
<title>Hallo Welt!</title>
<link href=styles.css rel=stylesheet />
<p> Nochmal <span> HALLO WELT!</span></p>
index.html
p { font-weight: bold; }
span { display: none; }
styles.css
• Critical Rendering Path ist der Weg, den der Browser gehen muss,
bevor er den sichtbaren Bereich ausgeben kann
• Das CSS-File muss abgefragt werden, 

bevor etwas angezeigt werden kann
• erst nach Laden der Vollständigen CSS-Datei 

kann an das Rendern übergeben werden
Nochmal
• CSS & JS werden abgefragt sobald sie im HTML auftauchen
• Vor der vollständigen Abfrage der externen Files kann keine
Darstellung geschehen
• CSS & JS können sich auch noch untereinander blockieren
• alles auf Kosten des Nutzers
3. Wie optimiert man den
Rendering Path?
Maßnahmen
• CSS & JS in jeweils eine Datei zusammenfassen
• CSS & JS an das Ende des <body> versetzen
• Für den sichtbaren Bereich benötigtes CSS & JS inline im header
integrieren
<!doctype html>
<meta charset=utf-8>
<title>Hallo Welt!</title>
<style type=‚text/css‘> p { font-weight: bold; }
span { display: none; } </style>
<p> Nochmal <span> HALLO WELT!</span></p>
<p>Mehr Tolle Sachen</p>
<link href=styles.css rel=stylesheet />
Network HTML DOM
Rendern
Layout
Paint
Nochmal
CSS CSSOM
Rendern
Layout
Paint
Mehr
Tolle
Sachen
• der sichtbare Bereich wird angezeigt bevor das externe CSS-File
überhaupt abgefragt wird
• keine zusätzlichen http-request bevor der sichtbare Bereich
dargestellt werden kann
• User können mit der Seite interagieren, lange bevor diese überhaupt
fertig geladen ist
–Zuhörer
„Du kannst da ja toll drüber reden und erzählen, aber wenn es
leicht zu erreichen wäre, würde das ja Jeder machen!“
4. Selbstversuch
• gzip aktivieren
• Browser Caching aktivieren
–Erik Euphorie
„88/100? Das hört sich doch gut an, da sind wir bestimmt schon
unter einer Sekunde.“
webpagetest.org
Chrome Browser
1,4s ist noch weit von unserem Ziel entfernt
• Wie viel müssen wir im Critical Rendering Path einsparen?
• 1,41s - 0,5s = 0,91s
• 1 - 0,5s / 1,41s = 64,5%
Wie bekomme ich heraus was
das Critical CSS ist?
http://jonassebastianohlsson.com/criticalpathcssgenerator/
Und wie schnell ist die Seite
nun!?
webpagetest.org
Chrome Browser
Die Zahlen
• 1,41s - 0,3s = 1,1s schneller!
• 1 - 0,306 / 1,41s = 78,3% Zeitersparnis!!
Trotz 257 Request!
5. Fazit
• Der Critical Rendering Path ist kein Hexenwerk und sollte besonders
im E-Commerce Bereich genutzt werden
• In unserem Beispiel haben wir eine Zeitersparnis von 78,3% erreicht
Webp
• Kann sowohl JPG, PNG, als auch GIF abbilden
• Spart 30% bis 65% der Dateigröße ohne
Qualitätsverlust
• Beide Dateitypen werden auf dem Server 

abgelegt und je nach Browser ausgegeben
Vielen Dank für Eure Aufmerksamkeit
• https://www.facebook.com/daniel.gerlach.35
• https://www.seo-hochschule.de

Weitere ähnliche Inhalte

Andere mochten auch

Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Walter Andreas Pucko
 
Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...
 Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk... Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...
Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...Seokratie
 
Penguin AB Test Folien **zensiert** SEO Campixx 2015
Penguin AB Test Folien **zensiert** SEO Campixx 2015Penguin AB Test Folien **zensiert** SEO Campixx 2015
Penguin AB Test Folien **zensiert** SEO Campixx 2015PenaltyChecker
 
Content Kannibalismus & Relevanzprobleme
Content Kannibalismus & RelevanzproblemeContent Kannibalismus & Relevanzprobleme
Content Kannibalismus & RelevanzproblemeSören Bendig
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersJan Berens
 
Daten statt Raten - Affiliate Methoden für Experten
Daten statt Raten - Affiliate Methoden für ExpertenDaten statt Raten - Affiliate Methoden für Experten
Daten statt Raten - Affiliate Methoden für ExpertenMaximilian Schirmer
 
Campixx 2015 - Marketing für eine Ferienwohnung
Campixx 2015 - Marketing für eine FerienwohnungCampixx 2015 - Marketing für eine Ferienwohnung
Campixx 2015 - Marketing für eine FerienwohnungHeiko Hoehn
 
Durch puren Inhalt dem Wettbewerb Traffic klauen
Durch puren Inhalt dem Wettbewerb Traffic klauenDurch puren Inhalt dem Wettbewerb Traffic klauen
Durch puren Inhalt dem Wettbewerb Traffic klauenEffektX
 

Andere mochten auch (8)

Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015
 
Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...
 Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk... Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...
Was machst Du 2020? Probleme und Chancen im SEO Bereich in Gegenwart und Zuk...
 
Penguin AB Test Folien **zensiert** SEO Campixx 2015
Penguin AB Test Folien **zensiert** SEO Campixx 2015Penguin AB Test Folien **zensiert** SEO Campixx 2015
Penguin AB Test Folien **zensiert** SEO Campixx 2015
 
Content Kannibalismus & Relevanzprobleme
Content Kannibalismus & RelevanzproblemeContent Kannibalismus & Relevanzprobleme
Content Kannibalismus & Relevanzprobleme
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
Daten statt Raten - Affiliate Methoden für Experten
Daten statt Raten - Affiliate Methoden für ExpertenDaten statt Raten - Affiliate Methoden für Experten
Daten statt Raten - Affiliate Methoden für Experten
 
Campixx 2015 - Marketing für eine Ferienwohnung
Campixx 2015 - Marketing für eine FerienwohnungCampixx 2015 - Marketing für eine Ferienwohnung
Campixx 2015 - Marketing für eine Ferienwohnung
 
Durch puren Inhalt dem Wettbewerb Traffic klauen
Durch puren Inhalt dem Wettbewerb Traffic klauenDurch puren Inhalt dem Wettbewerb Traffic klauen
Durch puren Inhalt dem Wettbewerb Traffic klauen
 

Ähnlich wie Critical Rendering Path SEO Campixx 2015

Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...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
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Bastian Grimm
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 
Google Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-ZertifizierungGoogle Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-ZertifizierungRichard Joos
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenDavid Schneider
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der WebentwicklungSebastian Springer
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 
ShareConf 2014: 10 Gründe warum der SharePoint langsam ist
ShareConf 2014: 10 Gründe warum der SharePoint langsam istShareConf 2014: 10 Gründe warum der SharePoint langsam ist
ShareConf 2014: 10 Gründe warum der SharePoint langsam istDavid Schneider
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformanceNico Steiner
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveBokowsky + Laymann GmbH
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011formaremedia
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016André Scharf
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartJakob
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingThom. Poole
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Bokowsky + Laymann GmbH
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 

Ähnlich wie Critical Rendering Path SEO Campixx 2015 (20)

Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
Google Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-ZertifizierungGoogle Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-Zertifizierung
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
ShareConf 2014: 10 Gründe warum der SharePoint langsam ist
ShareConf 2014: 10 Gründe warum der SharePoint langsam istShareConf 2014: 10 Gründe warum der SharePoint langsam ist
ShareConf 2014: 10 Gründe warum der SharePoint langsam ist
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep Dive
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen Marketing
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.
 
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-StrategieAMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 

Critical Rendering Path SEO Campixx 2015

  • 1. Critical Rendering Path Das 0,5s Pagespeed Projekt
  • 2. Zu mir • 25 Jahre • Halle(Saale) • Presales, Kundenprojekte, Schulungen • Lieblingsthema: Ladezeiten
  • 3. Gliederung 1. Warum 0,5 Sekunden? 2. Was ist der Critical Rendering Path? 3. Wie optimiert man den Rendering Path? 4. Der Selbstversuch 5. Fazit
  • 4. Wie genau definieren wir Pagespeed?
  • 5. Für den Nutzer ist wichtig wann er mit einer Seite agieren kann -> 
 Pagespeed = Wie schnell lädt der sichtbare Bereich 
 (above the fold)
  • 6. 1. Warum 0,5 Sekunden?
  • 7. Allgemeine Daten zum Pagespeed • 57% brechen den Besuch einer Website ab, wenn diese nicht in 3s geladen ist • 65% der 18-24 jährigen erwarten eine Ladezeit von 2s und weniger
  • 8. Was bedeutet das wirtschaftlich? • Amazons Rechnung:
 1s längere Ladezeit = $1,6Mrd. weniger Verkäufe/Jahr • Googles Rechnung:
 0,4s längere Ladezeit = 8Mil. weniger Searches/Tag
  • 9. Delay User Reaction 0-100ms Instant 100-300ms Leicht spürbare Verzögerung 300-1000ms Fokus, spürbare Verzögerung 1s+ Gedankliches Abschweifen 10s+ Das wird wohl nix…
  • 10. Was bedeutet das für uns? • 1 Sekunde Zeit um die volle Aufmerksamkeit des Nutzers beizubehalten • Im besten Fall werden Teile der Seite bereits innerhalb von 100ms ausgeliefert • Die Conversion bei langsamen Webseiten geht deutlich in den Keller
  • 11. Ok, das begrenzt das Ganze auf 1s, warum also
 0,5s-Projekt?
  • 12.
  • 13. Wie viel Zeit kostet uns das mobile Surfen? LTE HSPA+ HSPA EDGE GPRS AT&T Netwerk Latenz in ms 40-50 50-200 150-400 600-750 600-750
  • 14. Was bleibt übrig? ca. 50% gehen durch Netzwerklatenz verloren
 RTT, DNS, TCP, TLS, HTTP
 Uns bleiben 500ms zum Laden der eigentlichen Seite!
  • 15. 2. Was ist der Critical Rendering Path?
  • 16. Standardoptimierungen • Bilder komprimieren • Antwortzeit des Servers reduzieren • CSS und JS minimieren/optimieren • Gzip/Deflate Komprimierung aktivieren • Browser-Caching aktivieren
  • 17. Wie baut sich eine Seite auf?
  • 18. <!doctype html> <meta charset=utf-8> <title>Hallo Welt!</title> <link href=styles.css rel=stylesheet /> <p> Nochmal <span> HALLO WELT!</span></p> index.html p { font-weight: bold; } span { display: none; } styles.css
  • 19. • Critical Rendering Path ist der Weg, den der Browser gehen muss, bevor er den sichtbaren Bereich ausgeben kann
  • 20. • Das CSS-File muss abgefragt werden, 
 bevor etwas angezeigt werden kann • erst nach Laden der Vollständigen CSS-Datei 
 kann an das Rendern übergeben werden Nochmal
  • 21. • CSS & JS werden abgefragt sobald sie im HTML auftauchen • Vor der vollständigen Abfrage der externen Files kann keine Darstellung geschehen • CSS & JS können sich auch noch untereinander blockieren • alles auf Kosten des Nutzers
  • 22. 3. Wie optimiert man den Rendering Path?
  • 23.
  • 24. Maßnahmen • CSS & JS in jeweils eine Datei zusammenfassen • CSS & JS an das Ende des <body> versetzen • Für den sichtbaren Bereich benötigtes CSS & JS inline im header integrieren
  • 25. <!doctype html> <meta charset=utf-8> <title>Hallo Welt!</title> <style type=‚text/css‘> p { font-weight: bold; } span { display: none; } </style> <p> Nochmal <span> HALLO WELT!</span></p> <p>Mehr Tolle Sachen</p> <link href=styles.css rel=stylesheet />
  • 26. Network HTML DOM Rendern Layout Paint Nochmal CSS CSSOM Rendern Layout Paint Mehr Tolle Sachen
  • 27. • der sichtbare Bereich wird angezeigt bevor das externe CSS-File überhaupt abgefragt wird • keine zusätzlichen http-request bevor der sichtbare Bereich dargestellt werden kann • User können mit der Seite interagieren, lange bevor diese überhaupt fertig geladen ist
  • 28. –Zuhörer „Du kannst da ja toll drüber reden und erzählen, aber wenn es leicht zu erreichen wäre, würde das ja Jeder machen!“
  • 30.
  • 31.
  • 32.
  • 33.
  • 35. • Browser Caching aktivieren
  • 36. –Erik Euphorie „88/100? Das hört sich doch gut an, da sind wir bestimmt schon unter einer Sekunde.“
  • 38. 1,4s ist noch weit von unserem Ziel entfernt • Wie viel müssen wir im Critical Rendering Path einsparen? • 1,41s - 0,5s = 0,91s • 1 - 0,5s / 1,41s = 64,5%
  • 39. Wie bekomme ich heraus was das Critical CSS ist?
  • 41.
  • 42.
  • 43.
  • 44. Und wie schnell ist die Seite nun!?
  • 46. Die Zahlen • 1,41s - 0,3s = 1,1s schneller! • 1 - 0,306 / 1,41s = 78,3% Zeitersparnis!! Trotz 257 Request!
  • 47. 5. Fazit • Der Critical Rendering Path ist kein Hexenwerk und sollte besonders im E-Commerce Bereich genutzt werden • In unserem Beispiel haben wir eine Zeitersparnis von 78,3% erreicht
  • 48.
  • 49. Webp • Kann sowohl JPG, PNG, als auch GIF abbilden • Spart 30% bis 65% der Dateigröße ohne Qualitätsverlust • Beide Dateitypen werden auf dem Server 
 abgelegt und je nach Browser ausgegeben
  • 50. Vielen Dank für Eure Aufmerksamkeit • https://www.facebook.com/daniel.gerlach.35 • https://www.seo-hochschule.de