Critical Rendering Path SEO Campixx 2015

download Critical Rendering Path SEO Campixx 2015

of 50

  • date post

    18-Jul-2015
  • Category

    Internet

  • view

    1.037
  • download

    3

Embed Size (px)

Transcript of Critical Rendering Path SEO Campixx 2015

  • Critical Rendering PathDas 0,5s Pagespeed Projekt

  • Zu mir

    25 Jahre

    Halle(Saale)

    Presales, Kundenprojekte, Schulungen

    Lieblingsthema: Ladezeiten

  • Gliederung1. 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?

  • Fr den Nutzer ist wichtig wann er mit einer Seite agieren

    kann -> Pagespeed = Wie schnell ldt 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 jhrigen erwarten eine Ladezeit von 2s und weniger

  • Was bedeutet das wirtschaftlich?

    Amazons Rechnung:1s lngere Ladezeit = $1,6Mrd. weniger Verkufe/Jahr

    Googles Rechnung: 0,4s lngere Ladezeit = 8Mil. weniger Searches/Tag

  • Delay User Reaction

    0-100ms Instant

    100-300ms Leicht sprbare Verzgerung

    300-1000ms Fokus, sprbare Verzgerung

    1s+ Gedankliches Abschweifen

    10s+ Das wird wohl nix

  • Was bedeutet das fr 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?

  • Hallo Welt!

    Nochmal HALLO WELT!

    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 Vollstndigen CSS-Datei kann an das Rendern bergeben werden

    Nochmal

  • CSS & JS werden abgefragt sobald sie im HTML auftauchen

    Vor der vollstndigen Abfrage der externen Files kann keine Darstellung geschehen

    CSS & JS knnen sich auch noch untereinander blockieren

    alles auf Kosten des Nutzers

  • 3. Wie optimiert man den Rendering Path?

  • Manahmen

    CSS & JS in jeweils eine Datei zusammenfassen

    CSS & JS an das Ende des versetzen

    Fr den sichtbaren Bereich bentigtes CSS & JS inline im header integrieren

  • Hallo Welt! p { font-weight: bold; }

    span { display: none; } Nochmal HALLO WELT!

    Mehr Tolle Sachen

  • Network HTML DOM

    Rendern

    Layout

    Paint

    Nochmal

    CSS CSSOM

    Rendern

    Layout

    PaintMehr Tolle

    Sachen

  • der sichtbare Bereich wird angezeigt bevor das externe CSS-File berhaupt abgefragt wird

    keine zustzlichen http-request bevor der sichtbare Bereich dargestellt werden kann

    User knnen mit der Seite interagieren, lange bevor diese berhaupt fertig geladen ist

  • Zuhrer

    Du kannst da ja toll drber reden und erzhlen, aber wenn es leicht zu erreichen wre, wrde das ja Jeder machen!

  • 4. Selbstversuch

  • gzip aktivieren

  • Browser Caching aktivieren

  • Erik Euphorie

    88/100? Das hrt 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 mssen 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 Dateigre ohne Qualittsverlust

    Beide Dateitypen werden auf dem Server abgelegt und je nach Browser ausgegeben

  • Vielen Dank fr Eure Aufmerksamkeit

    https://www.facebook.com/daniel.gerlach.35

    https://www.seo-hochschule.de