WordPress šablony a rychlost načítání (WordCamp Praha 2017)
•
2 gostaram•1,773 visualizações
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (11)
Semelhante a WordPress šablony a rychlost načítání (WordCamp Praha 2017)
Semelhante a WordPress šablony a rychlost načítání (WordCamp Praha 2017) (20)
Mais de Martin Michálek
Mais de Martin Michálek (20)
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
- 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í?
- 10. fb.com/vzhurudolu vrdl.cz/martin Co když chci šablonu, která se načítá rychle?
- 11. „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í.
- 13. HTML kód skoro všech šablon je k analýze nepoužitelný. A samozřejmě chybí pořádná dokumentace.
- 17. 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.
- 18. fb.com/vzhurudolu vrdl.cz/martin Na co si dát bacha při výběru? Co opravit? ✘
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. 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.
- 25. 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).
- 26. 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
- 27. 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.
- 28. CriticalCSS: generování CSS nad zlomem style.css vrdl.cz/blog/35-critical-css
- 29. 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
- 31. <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
- 32. 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é.
- 33. 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
- 34. 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.
- 36. 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
- 37. 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ě.