WordPress šablony a rychlost načítání (WordCamp Praha 2017)

transcript

WordPress šablony a rychlost načítání

Martin Michálek @machal

WordCamp Praha, 18. 2. 2017

Martin Michálek

vzhurudolu.cz

Optimalizace rychlosti

vrdl.cz/blog/58-rychlost-srovname-cz

fb.com/vzhurudolu vrdl.cz/martin

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í?

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í.

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.

Jak zjistit problémy?

Chytré nástroje

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.

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í

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

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).

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

<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

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é.

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/

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ě.

Díky!

vzhurudolu.cz/kurzy

@machal www.vzhurudolu.cz

facebook.com/VzhuruDolu martin@vzhurudolu.cz

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

Technology