Downloaden Sie, um offline zu lesen
![@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”](https://image.slidesharecdn.com/criticalrenderingpathperfmatters-150617064154-lva1-app6891/75/perfmatters-Optimizing-the-Critical-Rendering-Path-3-2048.jpg)
Hochgeladen vonJohannes Weber
#perfmatters - Optimizing the Critical Rendering Path
Das Dokument behandelt den kritischen Rendering-Pfad zur Optimierung der Ladegeschwindigkeit von Webseiten. Es erläutert die Bedeutung von HTML, CSS und JavaScript für die Rendering-Geschwindigkeit und gibt Tipps zur Reduzierung von Ladezeiten durch Minifizierung, Komprimierung und das Vermeiden von render-blockierenden Ressourcen. Zudem werden Techniken zur Messung und Verbesserung der Performance vorgestellt.
![Graficas y estadistcas [Berni y paula]](https://cdn.slidesharecdn.com/ss_thumbnails/graficasyestadistcasberniypaula-140528140518-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
#perfmatters - Optimizing the Critical Rendering Path
- 1.
- 2.
- 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.
- 5.
- 6. @jowe Wie mache ichmeine Website schneller?
- 7.
- 8.
- 9. @jowe Die Auswirkung einerSekunde im Web Aberdeen Group
- 10. @jowe Die Auswirkung einerSekunde im Web Aberdeen Group
- 11.
- 12. @jowe Ausgabe in <1Sekunde ?
- 13. @jowe 1000 ms istdie 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.
- 15.
- 16.
- 17. @jowe Generation Netzwerklatenz LTE 40-100ms HSPA+ 50-250 ms HSPA 150-500 ms EDGE 600-750 ms GPRS 700-1000 ms
- 18. @jowe DNS Lookup TCPConnection 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.
- 20. @jowe Lass mal (imDetail) sehen!
- 21. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <linkhref=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> <linkhref=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.
- 24. @jowe <!doctype html> <meta charset=utf-8> <title>Performance!</title> <linkhref=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> <linkhref=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> <linkhref=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> istkein 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 renderingpath 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 mitJavaScript?
- 32.
- 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.
- 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.
- 37.
- 38.
- 39.
- 40.
- 41. @jowe Chunk #1 Chunk #2 dieErgebnisse
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. @jowe Wie messe ichden CRP? What you can’t measure, you can’t manage.
- 48.
- 49.
- 50.
- 51.
- 52. @jowe Bilder, Videos Input: 67,8KB Output: 26,7 KB Delta: -41,1 KB (-82.7%)
- 53. @jowe Bilder komprimieren. Passt dieAuflö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 ineigene <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 JavaScriptFiles 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 HTMLentfernen. (<!-- // -->, <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 .harFiles (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 imDetail 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 mirein Volksfest! @jowe Fragen? Gerne auch auf Twitter! #perfmatters .de