WordPress šablony a rychlost načítání (WordCamp Praha 2017)
date post
12-Apr-2017Category
Technology
view
671download
3
Embed Size (px)
Transcript of WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress ablony a rychlost natn
Martin Michlek @machal
WordCamp Praha, 18. 2. 2017
Martin Michlek
vzhurudolu.cz
http://vrdl.cz/martin
Optimalizace rychlosti
vrdl.cz/blog/58-rychlost-srovname-cz
http://www.vzhurudolu.cz/blog/58-rychlost-srovname-czhttp://vrdl.cz/martin
fb.com/vzhurudolu vrdl.cz/martin
Pro to chtt rychl?
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Pro to chtt rychl?
https://wpostats.com/
DoubleClick: 53 % mobilnch web je oputno po 3 vteinch.
AutoAnything: Zmenili as nutn k naten na polovinu a prodeje se zvily o 12 %.
DoubleClick: Strnky co se natou za 5 vtein maj dvojnsobn pjmy z reklamy oproti strnkm natenm na 19 vtein.
Podvejme se na nejprodvanj WordPress ablony. Jak si na tom stoj s rychlosti naten?
fb.com/vzhurudolu vrdl.cz/martin
Co kdy chci ablonu, kter se
nat rychle?
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Tohle prosm vs nen pytel. Tohle je zajc! Kupte si ho, ale hlavn se nedvejte dovnit. Ano, pesn takhle se zmnn WordPress prodvaj.
fb.com/vzhurudolu vrdl.cz/martin
Jak zjistit problmy?
Kukdokdu metoda
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
HTML kd skoro vech ablon je k analze nepouiteln. A samozejm chyb podn dokumentace.
fb.com/vzhurudolu vrdl.cz/martin
Jak zjistit problmy?
Chytr nstroje
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Avada
X
Enfold
https://developers.google.com/speed/pagespeed/insights/
Nstroje lecco zjist. Problm ale zstv: v kdu je balast z nastavovacch litiek a plugin, kter teba nakonec nevyuijete. Prost to moc nejde testovat.
fb.com/vzhurudolu vrdl.cz/martin
Na co si dt bacha pi vbru? Co opravit?
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Vechny modern prohlee um Krom IE, ale fallback na verzi 1. Viz Can I Use.
Nov vlastnostiBinrn; komprimace; multiplexing; Server Push. Viz Michal paek.
Frontend jinakHTTPS, mal kousky, datov optimalizace ano. Viz Smashing Mag.
HTTP/2
http://www.vzhurudolu.cz/prirucka/http-2
http://caniuse.com/#search=http%2F2https://www.michalspacek.cz/prednasky/http2-develczhttps://www.smashingmagazine.com/2016/02/getting-ready-for-http2/http://www.vzhurudolu.cz/prirucka/http-2
HTTP/1.1
Prvky strnky se ad do fronty.
HTTP/2
Prvky strnky pichzej najednou.
HTTP/2: konec fronty na banny
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Javascript blokujc parsovn
Tohle, kdy si dte do , prohle rozbol hlava. Dsn moc blokujcch JS soubor. Dejte je do jednoho a pidejte async parametr.
Rozdlen a prioritizace JS
1) Kritick Detekce, polyfilly atd.
2) Blokujc
Sdlen komponenty, kter neum t bez JS.
3) Asynchronn
Vechno ostatn sem.
4) Odloen
Mlo dleit prvky (Disqus komente, FB like).
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Blokujc CSS
Kdy u nate JS a udl DOM, mus prohle s vykreslenm pokat jet na posledn staen CSS.
CriticalCSS: generovn CSS nad zlomem
style.css
vrdl.cz/blog/35-critical-css
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
Velk obrzky
http://www.vzhurudolu.cz/prirucka/srcset-sizes
Velk obrzky
http://www.vzhurudolu.cz/prirucka/srcset-sizes
Velk obrzky
Pouvejte SVG a WebP formty vude kde to jde. kraken.io je placen sluba, kter vm ale um zkomprimovat obrzky daleko lpe ne neplacen.
http://kraken.io
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.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
Kad prohle postupuje pi natn a vykreslovn webfont jinak. To je poteba sjednotit.
Webfonty: zen servrovn
https://fontfaceobserver.com/
1. Mnostv dotaz 2. Blokujc JS 3. Blokujc CSS 4. Velk obrzky 5. Neoeten webfonty 6. Chytr indikace natn
fb.com/vzhurudolu vrdl.cz/martin
http://facebook.com/vzhurudoluhttp://www.vzhurudolu.cz/martin
http://www.webpagetest.org/video/compare.php?tests=170217_1F_8WV-r:1-c:0
Z przkum vyplv, e uivatel odmtaj ekat u bl obrazovky nebo indiktoru natn. Daleko lep je vykreslovat strnku postupn.
Dky!
vzhurudolu.cz/kurzy
@machal www.vzhurudolu.cz
facebook.com/VzhuruDolu martin@vzhurudolu.cz
http://vzhurudolu.cz/kurzyhttp://twitter.com/machalhttp://www.vzhurudolu.czhttps://www.facebook.com/VzhuruDolumailto:martin@vzhurudolu.cz
