#perfmatters - optimizing the critical rendering path
Post on 10-Aug-2015
74 Views
Preview:
TRANSCRIPT
@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
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
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
<!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
<!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
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
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
Praktisches Beispielhttps://github.com/johannes-weber/critical-rendering-path-example
@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
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 minifizieren.
Mehrere JavaScript Files konkatenieren.
Asyncrones laden von externen JavaScript.
DOM manipulierend? Prerendering!
Inline JavaScript falls sinnig.
@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
top related