Embed Size (px)
Citation preview
@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”
● [rendern]“(...) bezeichnet die Erstellung einer Grafik aus einer Skizze oder einem Modell”
● [Pfa d]“(...) schmaler Weg”
@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ögerung
300 - 1000 ms Fokus, spürbare Verzögerung
1 s+ Gedankliches Abschweifen
10 s+ Ich geh dann mal wieder...
@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 und rendern der Seite
100ms 150ms 150ms 200ms 400ms
Eine Sekunde auf mobilen Geräten
@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 <span>world!</span></p>
p { font-weight: bold; } span { display: none; }
index.html
styles.css
Einfach, oder?
Eine einfache HTML Seite mit externen CSS...
@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.cssCSS
DOM
CSSOM
Render TreeNetwork
HTML
Die Antworten kommen
paketweise. Chunk for Chunk
Die ersten HTML Pakete kommen an
@jowe
@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.cssCSS
DOM
CSSOM
Render TreeNetwork
HTML DOM
● <link> entdeckt, Anfrage gesendet● DOM Konstruktion fertig!
DOM Konstruktion fertig. Warten auf CSS
Screen weiß. Das CSS blockt
das Rendering.
@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 TreeNetwork
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
@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 TreeNetwork
HTML DOM
● CSS fertig geladen● Nun kann das CSSOM konstruiert werden
CSS CSSOM
Screen noch immer weiß?
Schließlich wird das CSSOM konstruiert!
@jowe
DOM + CSSOM = Render Bäume
body
Hello
span
world!
root
spanp
DO
MCS
SOM
p ● Match CSSOM + DOM nodes● Der Screen ist weiterhin leer....
@jowe
body
Hello
span
world!
root
spanp
DO
MCS
SOM
p
● <span> ist kein Teil des Render Baumes○ "display: none"
body
Hello
p
Render Tree
DOM + CSSOM = Render Bäume
@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.
@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
@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 spielt nun JavaScript?
● JavaScript blockiert die DOM Konstruktion
● JavaScript blockiert das Laden von CSS
@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. 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
@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 Beispielhttps://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 Bilder in Sprites kombinieren.
Achtung bei
Responsive!
@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 (short definition)
Above the Fold CSS -> inline CSS
Mehrere CSS Files konkatenieren
Effektive Selektoren
@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 manipulierend? Prerendering!
Inline JavaScript falls sinnig.
@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 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
@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
@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
@jowe
Es war mir ein Volksfest!
@jowe
Fragen?
Gerne auch auf Twitter!
#perfmatters
.de
![: Kitwood Demenz(7) [Druck-PDF]/14.04 ... · 3.2.1 Path ologie vom Alzheimer-Typus 53 3.2.2 Path ologie vom vaskulären Typus 54 3.2.3 Path ologie vom «gemischten» Typus 54 3.3](https://img.pdfslide.org/doc/110x75/5f0ca6487e708231d436747c/-kitwood-demenz7-druck-pdf1404-321-path-ologie-vom-alzheimer-typus.jpg)
