WordPress šablony a rychlost načítání (WordCamp Praha 2017)
Feb. 19, 2017•0 likes
2 likes
Be the first to like this
Show More
•1,769 views
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í.
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í?
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.
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
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).
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.