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

Click here to load reader

  • date post

    12-Apr-2017
  • Category

    Technology

  • view

    671
  • download

    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