WordPress šablony a rychlost načítání (WordCamp Praha 2017)
38
WordPress šablony a rychlost na č ítání Martin Michálek @machal WordCamp Praha, 18. 2. 2017
-
Upload
martin-michalek -
Category
Technology
-
view
673 -
download
3
Transcript of WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání
Martin Michálek @machal
WordCamp Praha, 18. 2. 2017
Optimalizace rychlosti
vrdl.cz/blog/58-rychlost-srovname-cz
fb.com/vzhurudolu vrdl.cz/martin
Proč to chtít rychlé?
Proč to chtít rychlé?
https://wpostats.com/
DoubleClick: 53 % mobilních webů je opuštěno po 3 vteřinách.
AutoAnything: Zmenšili čas nutný k načtení na polovinu a prodeje se zvýšily o 12 %.
DoubleClick: Stránky co se načtou za 5 vteřin mají dvojnásobné příjmy z reklamy oproti stránkám načteným na 19 vteřin.
Podívejme se na nejprodávanější WordPress šablony. Jak si na tom stojí s rychlosti načtení?
fb.com/vzhurudolu vrdl.cz/martin
Co když chci šablonu, která se
načítá rychle?
„Tohle prosím vás není pytel. Tohle je zajíc! Kupte si ho, ale hlavně se nedívejte dovnitř.“ — Ano, přesně takhle se zmíněné WordPress prodávají.
fb.com/vzhurudolu vrdl.cz/martin
Jak zjistit problémy?
„Kukdokódu“ metoda
HTML kód skoro všech šablon je k analýze nepoužitelný. A samozřejmě chybí pořádná dokumentace.
fb.com/vzhurudolu vrdl.cz/martin
Jak zjistit problémy?
Chytré nástroje
Avada
X
Enfold
https://developers.google.com/speed/pagespeed/insights/
Nástroje lecco zjistí. Problém ale zůstává: v kódu je balast z nastavovacích lištiček a pluginů, které třeba nakonec nevyužijete. Prostě to moc nejde testovat.
fb.com/vzhurudolu vrdl.cz/martin
Na co si dát bacha při výběru? Co opravit?✘
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
Všechny moderní prohlížeče umí Kromě IE, ale fallback na verzi 1. Viz Can I Use.
Nové vlastnostiBinární; komprimace; multiplexing; Server Push. Viz Michal Špaček.
Frontend jinakHTTPS, malé kousky, datová optimalizace ano. Viz Smashing Mag.
HTTP/2
http://www.vzhurudolu.cz/prirucka/http-2
HTTP/1.1
Prvky stránky se řadí do fronty.
HTTP/2
Prvky stránky přicházejí najednou.
HTTP/2: konec fronty na banány
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
Javascript blokující parsování
Tohle, když si dáte do <head>, prohlížeč rozbolí hlava. Děsně moc blokujících JS souborů. Dejte je do jednoho a přidejte async parametr.
Rozdělení a prioritizace JS
1) Kritický <script>…</script> Detekce, polyfilly atd.
2) Blokující <script src="…">
Sdílené komponenty, které neumí žít bez JS.
3) Asynchronní <script src="…" async>
Všechno ostatní sem.
4) Odložený <script src="…" defer>
Málo důležité prvky (Disqus komentáře, FB like).
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
Blokující CSS
Když už načte JS a udělá DOM, musí prohlížeč s vykreslením počkat ještě na poslední stažené CSS.
CriticalCSS: generování CSS nad zlomem
style.css
vrdl.cz/blog/35-critical-css
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
<img src="image.jpg"> ✘
Velké obrázky
<img alt="Obrázek" src="image_small.jpg"
srcset="image_small.jpg 600w, image_medium.jpg 800w, image_large.jpg 2000w"
sizes="(min-width: 768px) 20vw, (min-width: 400px) 40vw, 80vw">
http://www.vzhurudolu.cz/prirucka/srcset-sizes
Velké obrázky
Velké obrázky
Používejte SVG a WebP formáty všude kde to jde. kraken.io je placená služba, která vám ale umí zkomprimovat obrázky daleko lépe než neplacené.
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
FOIT s timeoutem (Chrome, Firefox, Opera)
FOIT bez timeoutu (Safari)
FOUT (Edge, Explorer)
fallback font webfont
webfont
webfontfallback font
Webfonty: Flash Of Invisible Text vs. Flash Of Unstyled Text
Každý prohlížeč postupuje při načítání a vykreslování webfontů jinak. To je potřeba sjednotit.
Webfonty: řízené servírování
https://fontfaceobserver.com/
1. Množství dotazů 2. Blokující JS 3. Blokující CSS 4. Velké obrázky 5. Neošetřené webfonty 6. „Chytrá“ indikace načítání
fb.com/vzhurudolu vrdl.cz/martin
http://www.webpagetest.org/video/compare.php?tests=170217_1F_8WV-r:1-c:0
Z průzkumů vyplývá, že uživatelé odmítají čekat u bílé obrazovky nebo indikátoru načítání. Daleko lepší je vykreslovat stránku postupně.
