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

1. WordPress šablony a rychlost načítání Martin Michálek @machal WordCamp Praha, 18. 2. 2017

2. Martin Michálek vzhurudolu.cz

3. Optimalizace rychlosti vrdl.cz/blog/58-rychlost-srovname-cz

4. fb.com/vzhurudolu vrdl.cz/martin Proč to chtít rychlé?

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

6. Podívejme se na nejprodávanější WordPress šablony. Jak si na tom stojí s rychlosti načtení?

7. fb.com/vzhurudolu vrdl.cz/martin Co když chci šablonu, která se načítá rychle?

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

9. fb.com/vzhurudolu vrdl.cz/martin Jak zjistit problémy? „Kukdokódu“ metoda

10. HTML kód skoro všech šablon je k analýze nepoužitelný. A samozřejmě chybí pořádná dokumentace.

11. fb.com/vzhurudolu vrdl.cz/martin Jak zjistit problémy? Chytré nástroje

12. Avada X Enfold https://developers.google.com/speed/pagespeed/insights/

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

14. fb.com/vzhurudolu vrdl.cz/martin Na co si dát bacha při výběru? Co opravit? ✘

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

17. Všechny moderní prohlížeče umí   Kromě IE, ale fallback na verzi 1. Viz Can I Use.  Nové vlastnosti  Binární; komprimace; multiplexing; Server Push. Viz Michal Špaček.  Frontend jinak  HTTPS, malé kousky, datová optimalizace ano. Viz Smashing Mag. HTTP/2 http://www.vzhurudolu.cz/prirucka/http-2

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

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

21. Rozdělení a prioritizace JS 1) Kritický <script>…</script>  Detekce, polyﬁlly 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).

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

24. CriticalCSS: generování CSS nad zlomem style.css vrdl.cz/blog/35-critical-css

26. <img src="image.jpg"> ✘ Velké obrázky

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

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

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

31. Webfonty: řízené servírování https://fontfaceobserver.com/

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

34. Díky! vzhurudolu.cz/kurzy @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz