Advertisement
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
Feb. 19, 2017•0 likes•1,769 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
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í.
Martin MichálekFollow
Front-end trainer and mentor at FreelanceAdvertisement
Advertisement
Advertisement
Recommended
Nejčastejší problémy WordPress webůVladimír Smitka
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Jak zlepšit zabezpečení čtvrtiny celého webuMichal Špaček
Slasti a pasti prototypování v HTMLMartin Michálek
WordPress - základy bezpečnostiVladimír Smitka
Vyhledávače a JavaScriptTaste Medio
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
- 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é?
- 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é 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
- 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ě.
- Díky! vzhurudolu.cz/kurzy @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz
Advertisement