#perfmatters - Optimizing the Critical Rendering Path
•
1 gefällt mir•1,706 views
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.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (18)
Ähnlich wie #perfmatters - Optimizing the Critical Rendering Path
Ähnlich wie #perfmatters - Optimizing the Critical Rendering Path (20)
Mehr von Johannes Weber
Mehr von Johannes Weber (20)
#perfmatters - Optimizing the Critical Rendering Path
- 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. @jowe@jowe
- 5. @jowe
- 6. @jowe Wie mache ich meine Website schneller?
- 9. @jowe Die Auswirkung einer Sekunde im Web Aberdeen Group
- 10. @jowe Die Auswirkung einer Sekunde im Web Aberdeen Group
- 11. @jowe
- 12. @jowe Ausgabe in < 1Sekunde ?
- 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. @jowe
- 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. @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. @jowe
- 20. @jowe Lass mal (im Detail) sehen!
- 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. @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. @jowe
- 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. @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. @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. @jowe DOM + CSSOM = Render Bäume body Hello span world! root spanp DOMCSSOM p ● Match CSSOM + DOM nodes ● Der Screen ist weiterhin leer....
- 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. @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. @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. @jowe Moment! Was ist mit JavaScript?
- 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
- 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
- 38. @jowe Beispiel
- 39. @jowe
- 40. @jowe
- 41. @jowe Chunk #1 Chunk #2 die Ergebnisse
- 42. @jowe Beispiel
- 43. @jowe
- 44. @jowe
- 45. @jowe
- 46. @jowe
- 47. @jowe Wie messe ich den CRP? What you can’t measure, you can’t manage.
- 50. @jowe
- 52. @jowe Bilder, Videos Input: 67,8 KB Output: 26,7 KB Delta: -41,1 KB (-82.7%)
- 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. @jowe CSS Input: 418 bytes Output: 290 bytes Gzip: 194 bytes Delta: -224 bytes (-53.59%)
- 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. @jowe JavaScript Input: 351.43 KB Output: 84.43 KB Gzip: 29.76 KB Delta: -321.67 KB (-91.53%)
- 57. @jowe JavaScript minifizieren. Mehrere JavaScript Files konkatenieren. Asyncrones laden von externen JavaScript. DOM manipulierend? Prerendering! Inline JavaScript falls sinnig.
- 58. @jowe HTML Input: 5.67 KB Output: 5.67 KB Gzip: 4.03 KB Delta: -1.64 KB (-28.97%)
- 59. @jowe Nicht genutztes HTML entfernen. (<!-- // -->, <meta>) HTML minifizieren!
- 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. @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. @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. @jowe Es war mir ein Volksfest! @jowe Fragen? Gerne auch auf Twitter! #perfmatters .de