@jowe
#perfmatters
The Critical Rendering Path
@jowe
Johannes Weber
@jowe
@jowe
Critical Rendering Path?
● [ˈkriːtɪʃ]
“(...) so, dass man genau prüft und streng beurteilt”
● [rẹndern]
“(...) beze...
@jowe@jowe
@jowe
@jowe
Wie mache ich meine
Website schneller?
@jowe
HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetzwerk
Critical rendering path
@jowe
Warum Geschwindigkeit
wichtig ist
@jowe
Die Auswirkung einer Sekunde im Web
Aberdeen Group
@jowe
Die Auswirkung einer Sekunde im Web
Aberdeen Group
@jowe
@jowe
Ausgabe in < 1Sekunde ?
@jowe
1000 ms ist die
Herausforderung
Verzögerung Reaktion des Users
0 - 100 ms Instant
100 - 300 ms Leicht spürbare Verzö...
@jowe
@jowe
HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetzwerk
Critical rendering path
@jowe
Netzwerk-
latenz
auf mobilen Geräten
@jowe
Generation Netzwerklatenz
LTE 40-100 ms
HSPA+ 50-250 ms
HSPA 150-500 ms
EDGE 600-750 ms
GPRS 700-1000 ms
@jowe
DNS Lookup TCP Connection
HTTP Request
and Response
Server
Response Time
Client-Side Rendering
Netzwerk
verarbeiten ...
@jowe
@jowe
Lass mal (im Detail) sehen!
@jowe
<!doctype html>
<meta charset=utf-8>
<title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <s...
@jowe
<!doctype html>
<meta charset=utf-8>
<title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <s...
@jowe
@jowe
<!doctype html>
<meta charset=utf-8>
<title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <s...
@jowe
<!doctype html>
<meta charset=utf-8>
<title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <s...
@jowe
<!doctype html>
<meta charset=utf-8>
<title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <s...
@jowe
DOM + CSSOM = Render Bäume
body
Hello
span
world!
root
spanp
DOMCSSOM
p ● Match CSSOM + DOM nodes
● Der Screen ist w...
@jowe
body
Hello
span
world!
root
spanp
DOMCSSOM
p
● <span> ist kein Teil des Render Baumes
○ "display: none"
body
Hello
p...
@jowe
HTML
CSS
DOM
CSSOM
Render
Tree
Layout PaintNetwork
Critical rendering path
Hello
● Sobald der Render Baum erstellt w...
@jowe
Zu beachtende Regeln
1. HTML wird inkrementell geparst
a. Nicht auf das ganze HTML warten - flush early and often
2....
@jowe
Moment!
Was ist mit JavaScript?
@jowe
HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Welche Rolle spielt JavaScript?
@jowe
DOM
CSSOM
JavaScript element.style.color = "#FF0000"
JS kann auf das DOM und
das CSSOM zugreifen!
Welche Rolle spiel...
@jowe
HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetzwerk
Critical rendering path
@jowe
Zu beachtende Regeln
1. HTML wird inkrementell geparst
a. Nicht auf das ganze HTML warten - flush early and often
2....
@jowe
Gefühlte Geschwindigkeit
@jowe
ohne CRP
Optimierung
Optimierter
CRP
votum.de
votum.de
@jowe
Beispiel
@jowe
@jowe
@jowe
Chunk #1
Chunk #2
die Ergebnisse
@jowe
Beispiel
@jowe
@jowe
@jowe
@jowe
@jowe
Wie messe ich den CRP?
What you can’t measure, you can’t manage.
@jowe
Chrome
DevTools
Time
@jowe
Praktisches Beispiel
https://github.com/johannes-weber/critical-rendering-path-example
@jowe
@jowe
Performance Regeln
@jowe
Bilder, Videos
Input: 67,8 KB
Output: 26,7 KB
Delta: -41,1 KB (-82.7%)
@jowe
Bilder komprimieren.
Passt die Auflösung?
Gibt es effektivere Typen? (jpg, png, gif)
Interlacing verwenden.
Mehrere ...
@jowe
CSS
Input: 418 bytes
Output: 290 bytes
Gzip: 194 bytes
Delta: -224 bytes (-53.59%)
@jowe
Media Queries in eigene <link> Elemente packen.
Komprimieren des CSS
Unused Styles? - Weg damit!
CSS Optimieren (sho...
@jowe
JavaScript
Input: 351.43 KB
Output: 84.43 KB
Gzip: 29.76 KB
Delta: -321.67 KB (-91.53%)
@jowe
JavaScript minifizieren.
Mehrere JavaScript Files konkatenieren.
Asyncrones laden von externen JavaScript.
DOM manip...
@jowe
HTML
Input: 5.67 KB
Output: 5.67 KB
Gzip: 4.03 KB
Delta: -1.64 KB (-28.97%)
@jowe
Nicht genutztes HTML entfernen. (<!-- // -->, <meta>)
HTML minifizieren!
@jowe
Performance Rules
● Minify, Compress, Cache
○ HTML, CSS, Javascript, Images
● Minimize use of render blocking resour...
@jowe
Links: Tooling
Share .har Files (HTTP Archive Format) Reports http://pcapperf.appspot.com/
HAR Storage solution http...
@jowe
Links: #perfmatters im Detail
High Performance Browser Networking http://goo.gl/lt4H02
Latest DevTool Updates https:...
@jowe
Es war mir ein Volksfest!
@jowe
Fragen?
Gerne auch auf Twitter!
#perfmatters
.de
Nächste SlideShare
Wird geladen in …5
×

#perfmatters - Optimizing the Critical Rendering Path

552 Aufrufe

Veröffentlicht am

Für eine bessere Performance unserer Website ist die Optimierung unseres HTML, CSS und JavaScript nicht alleine ausreichend. Neben diesem ist die Verbeserung des kritischen Rendering-Pfads entscheidend. Er behandelt den Vorgang zwischen dem Empfang der Daten und deren Verarbeitung zur Darstellung im Browser. Unser Ziel ist es, Inhalte zu priorisieren um damit das erste Rendering erheblich zu verkürzen. Es hinterlässt eine veränderte Vorstellung von Gewschindigkeit bei den Nutzern.
Als Entwickler schreiben wir das Markup und unsere Seite erscheint im Browser. Doch wie genau wird unser HTML, CSS und JavaScript vom Browser verarbeitet um dargestellt zu werden? Welche Möglichkeiten und Tools gibt es um den Prozess zu optimieren? Wie sieht das in der Praxis aus? Neben diesen Fragen beschäftigt sich der Talk mit der Analyse bereits optimierter Websiten sowie einem praktischen Beispiel in dem die Schritte von der Analyse zur Optimierung veranschaulicht werden.

Der Talk fand am 16. Juni 2015 auf der Developer Week 2015 (#DWX15) in Nürnbert statt.
Die original Slides sind auf Google Drive unter https://goo.gl/UnW7YN zu finden.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
552
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

#perfmatters - Optimizing the Critical Rendering Path

  1. 1. @jowe #perfmatters The Critical Rendering Path
  2. 2. @jowe Johannes Weber @jowe
  3. 3. @jowe Critical Rendering Path? ● [ˈkriːtɪʃ] “(...) so, dass man genau prüft und streng beurteilt” ● [rẹndern] “(...) bezeichnet die Erstellung einer Grafik aus einer Skizze oder einem Modell” ● [Pfa̲d]“(...) schmaler Weg”
  4. 4. @jowe@jowe
  5. 5. @jowe
  6. 6. @jowe Wie mache ich meine Website schneller?
  7. 7. @jowe HTML CSS DOM CSSOM JavaScript Render Tree Layout PaintNetzwerk Critical rendering path
  8. 8. @jowe Warum Geschwindigkeit wichtig ist
  9. 9. @jowe Die Auswirkung einer Sekunde im Web Aberdeen Group
  10. 10. @jowe Die Auswirkung einer Sekunde im Web Aberdeen Group
  11. 11. @jowe
  12. 12. @jowe Ausgabe in < 1Sekunde ?
  13. 13. @jowe 1000 ms ist die Herausforderung Verzögerung Reaktion des Users 0 - 100 ms Instant 100 - 300 ms Leicht spürbare Verzögerung 300 - 1000 ms Fokus, spürbare Verzögerung 1 s+ Gedankliches Abschweifen 10 s+ Ich geh dann mal wieder...
  14. 14. @jowe
  15. 15. @jowe HTML CSS DOM CSSOM JavaScript Render Tree Layout PaintNetzwerk Critical rendering path
  16. 16. @jowe Netzwerk- latenz auf mobilen Geräten
  17. 17. @jowe Generation Netzwerklatenz LTE 40-100 ms HSPA+ 50-250 ms HSPA 150-500 ms EDGE 600-750 ms GPRS 700-1000 ms
  18. 18. @jowe DNS Lookup TCP Connection HTTP Request and Response Server Response Time Client-Side Rendering Netzwerk verarbeiten und rendern der Seite 100ms 150ms 150ms 200ms 400ms Eine Sekunde auf mobilen Geräten
  19. 19. @jowe
  20. 20. @jowe Lass mal (im Detail) sehen!
  21. 21. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <link href=styles.css rel=stylesheet /> <p>Hello <span>world!</span></p> p { font-weight: bold; } span { display: none; } index.html styles.css Einfach, oder? Eine einfache HTML Seite mit externen CSS...
  22. 22. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <link href=styles.css rel=stylesheet /> <p>Hello <span>world!</span></p> ● Bytes der index.html kommen an ● kein CSS bisher geladen p { font-weight: bold; } span { display: none; } index.html styles.css CSS DOM CSSOM Render Tree Network HTML Die Antworten kommen paketweise. Chunk for Chunk Die ersten HTML Pakete kommen an
  23. 23. @jowe
  24. 24. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <link href=styles.css rel=stylesheet /> <p>Hello <span>world!</span></p> p { font-weight: bold; } span { display: none; } index.html styles.css CSS DOM CSSOM Render Tree Network HTML DOM ● <link> entdeckt, Anfrage gesendet ● DOM Konstruktion fertig! DOM Konstruktion fertig. Warten auf CSS Screen weiß. Das CSS blockt das Rendering.
  25. 25. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <link href=styles.css rel=stylesheet /> <p>Hello <span>world!</span></p> p { font-weight: bold; } span { display: none; } index.html styles.css DOM CSSOM Render Tree Network HTML DOM ● Die ersten Bytes vom CSS kommen an ● Wir warten weiter auf das komplette CSS! CSS Erste CSS bytes kommen an. Warten auf CSS! Im Gegensatz zu HTML ist das Laden von CSS nicht inkrementell
  26. 26. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <link href=styles.css rel=stylesheet /> <p>Hello <span>world!</span></p> p { font-weight: bold; } span { display: none; } index.html styles.css DOM CSSOM Render Tree Network HTML DOM ● CSS fertig geladen ● Nun kann das CSSOM konstruiert werden CSS CSSOM Screen noch immer weiß? Schließlich wird das CSSOM konstruiert!
  27. 27. @jowe DOM + CSSOM = Render Bäume body Hello span world! root spanp DOMCSSOM p ● Match CSSOM + DOM nodes ● Der Screen ist weiterhin leer....
  28. 28. @jowe body Hello span world! root spanp DOMCSSOM p ● <span> ist kein Teil des Render Baumes ○ "display: none" body Hello p Render Tree DOM + CSSOM = Render Bäume
  29. 29. @jowe HTML CSS DOM CSSOM Render Tree Layout PaintNetwork Critical rendering path Hello ● Sobald der Render Baum erstellt wurde, geschieht dies auch mit dem Layout der Seite (DOM + CSSOM) ○ Dimensionen, Farben etc. ● Sobald das Layout erstellt ist: ○ Rendern der Pixel (CPU) ○ Bitmaps werden übertragen (GPU) ○ Anzeigen der Seite Dafür sollte man ca. 100 ms einplanen.
  30. 30. @jowe Zu beachtende Regeln 1. HTML wird inkrementell geparst a. Nicht auf das ganze HTML warten - flush early and often 2. CSS blockiert das Rendering a. CSS schnellstmöglich auf den Client bringen
  31. 31. @jowe Moment! Was ist mit JavaScript?
  32. 32. @jowe HTML CSS DOM CSSOM JavaScript Render Tree Welche Rolle spielt JavaScript?
  33. 33. @jowe DOM CSSOM JavaScript element.style.color = "#FF0000" JS kann auf das DOM und das CSSOM zugreifen! Welche Rolle spielt nun JavaScript? ● JavaScript blockiert die DOM Konstruktion ● JavaScript blockiert das Laden von CSS
  34. 34. @jowe HTML CSS DOM CSSOM JavaScript Render Tree Layout PaintNetzwerk Critical rendering path
  35. 35. @jowe Zu beachtende Regeln 1. HTML wird inkrementell geparst a. Nicht auf das ganze HTML warten - flush early and often 2. CSS blockiert das Rendering! a. CSS schnellstmöglich auf den Client bringen 3. JavaScript blockiert die DOM Konstruktion und CSS a. Inline kritisches JS, async loading
  36. 36. @jowe Gefühlte Geschwindigkeit
  37. 37. @jowe ohne CRP Optimierung Optimierter CRP votum.de votum.de
  38. 38. @jowe Beispiel
  39. 39. @jowe
  40. 40. @jowe
  41. 41. @jowe Chunk #1 Chunk #2 die Ergebnisse
  42. 42. @jowe Beispiel
  43. 43. @jowe
  44. 44. @jowe
  45. 45. @jowe
  46. 46. @jowe
  47. 47. @jowe Wie messe ich den CRP? What you can’t measure, you can’t manage.
  48. 48. @jowe Chrome DevTools Time
  49. 49. @jowe Praktisches Beispiel https://github.com/johannes-weber/critical-rendering-path-example
  50. 50. @jowe
  51. 51. @jowe Performance Regeln
  52. 52. @jowe Bilder, Videos Input: 67,8 KB Output: 26,7 KB Delta: -41,1 KB (-82.7%)
  53. 53. @jowe Bilder komprimieren. Passt die Auflösung? Gibt es effektivere Typen? (jpg, png, gif) Interlacing verwenden. Mehrere Bilder in Sprites kombinieren. Achtung bei Responsive!
  54. 54. @jowe CSS Input: 418 bytes Output: 290 bytes Gzip: 194 bytes Delta: -224 bytes (-53.59%)
  55. 55. @jowe Media Queries in eigene <link> Elemente packen. Komprimieren des CSS Unused Styles? - Weg damit! CSS Optimieren (short definition) Above the Fold CSS -> inline CSS Mehrere CSS Files konkatenieren Effektive Selektoren
  56. 56. @jowe JavaScript Input: 351.43 KB Output: 84.43 KB Gzip: 29.76 KB Delta: -321.67 KB (-91.53%)
  57. 57. @jowe JavaScript minifizieren. Mehrere JavaScript Files konkatenieren. Asyncrones laden von externen JavaScript. DOM manipulierend? Prerendering! Inline JavaScript falls sinnig.
  58. 58. @jowe HTML Input: 5.67 KB Output: 5.67 KB Gzip: 4.03 KB Delta: -1.64 KB (-28.97%)
  59. 59. @jowe Nicht genutztes HTML entfernen. (<!-- // -->, <meta>) HTML minifizieren!
  60. 60. @jowe Performance Rules ● Minify, Compress, Cache ○ HTML, CSS, Javascript, Images ● Minimize use of render blocking resources ○ Use media queries on <link> to unblock rendering ○ Inline above the fold CSS ● Minimize use of parser blocking resources ○ Defer Javascript execution ○ Use async or defer attribute on <script> 3. JavaScript 2. CSS 1. reduzieren, komprimieren
  61. 61. @jowe Links: Tooling Share .har Files (HTTP Archive Format) Reports http://pcapperf.appspot.com/ HAR Storage solution https://code.google.com/p/harstorage/ Chrome Benchmarking Extension https://goo.gl/r1Wfok Find CRP and extract it (npm Package) https://goo.gl/Z14ybn Extract & Inline Critical-path CSS in HTML pages https://github.com/addyosmani/critical Div. Gulp/Grunt/Broccoli packages gulp-concat, gulp-uglify, gulp-image- optimization, gulp-minify-html DevTools Timeline in Detail http://goo.gl/Bycaa2
  62. 62. @jowe Links: #perfmatters im Detail High Performance Browser Networking http://goo.gl/lt4H02 Latest DevTool Updates https://goo.gl/oXfas2 Optimizing Content Efficiency https://goo.gl/okS1Kx Rendering Performance https://goo.gl/vGkNBJ Critical Rendering Path in Detail https://goo.gl/7KXrDN GZIP is not enough! https://goo.gl/Ip7eJk
  63. 63. @jowe Es war mir ein Volksfest! @jowe Fragen? Gerne auch auf Twitter! #perfmatters .de

×