Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.381 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

  1. 1. WordPress šablony a rychlost načítání Martin Michálek @machal WordCamp Praha, 18. 2. 2017
  2. 2. Martin Michálek vzhurudolu.cz
  3. 3. Optimalizace rychlosti vrdl.cz/blog/58-rychlost-srovname-cz
  4. 4. fb.com/vzhurudolu vrdl.cz/martin Proč to chtít rychlé?
  5. 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. 6. Podívejme se na nejprodávanější WordPress šablony. Jak si na tom stojí s rychlosti načtení?
  7. 7. fb.com/vzhurudolu vrdl.cz/martin Co když chci šablonu, která se načítá rychle?
  8. 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. 9. fb.com/vzhurudolu vrdl.cz/martin Jak zjistit problémy? „Kukdokódu“ metoda
  10. 10. HTML kód skoro všech šablon je k analýze nepoužitelný. A samozřejmě chybí pořádná dokumentace.
  11. 11. fb.com/vzhurudolu vrdl.cz/martin Jak zjistit problémy? Chytré nástroje
  12. 12. Avada X Enfold https://developers.google.com/speed/pagespeed/insights/
  13. 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. 14. fb.com/vzhurudolu vrdl.cz/martin Na co si dát bacha při výběru? Co opravit? ✘
  15. 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
  16. 16. 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. 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. 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
  19. 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. 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. 21. 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).
  22. 22. 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
  23. 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. 24. CriticalCSS: generování CSS nad zlomem style.css vrdl.cz/blog/35-critical-css
  25. 25. 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
  26. 26. <img src="image.jpg"> ✘ Velké obrázky
  27. 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. 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é.
  29. 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
  30. 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. 31. Webfonty: řízené servírování https://fontfaceobserver.com/
  32. 32. 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
  33. 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. 34. Díky! vzhurudolu.cz/kurzy @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz

×