Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

17 technických tipů ke zrychlení webů

700 views

Published on

V posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.

Published in: Technology
  • Be the first to comment

17 technických tipů ke zrychlení webů

  1. 1. 17 technických tipů ke zrychlení webů 6. května 2019
 Frontendisti Ostrava
  2. 2. vrdl.cz/martin Martin Michálek: frontend designér, poradce Martin Michálek
  3. 3. Time To First Byte První vykreslení První smysluplné vykreslení Load Index rychlosti Doba do interaktivity
  4. 4. vrdl.cz/p/http-2 1) HTTP/2 HTTP/1.1 Prvky stránky se řadí do fronty. HTTP/2 Prvky stránky přicházejí najednou.
  5. 5. developers.google.com 2) Kešování CSS, JS atd. – Opravit max-age
  6. 6. developers.google.com 2) Kešování CSS, JS atd. – Opravit max-age Cache-Control: max-age=31536000
  7. 7. css-tricks.com 3) Kešování – Opravit invalidaci <link href="style.css?v=DatumSestavení" …> <link href="style.css?v=DatumZměny" …> <link href="style.vDatumZměny.css" …>
  8. 8. vrdl.cz/p/ttfb 4) Komprese – Zkontrolovat gzip
  9. 9. vrdl.cz/p/ttfb 4) Komprese – Zkontrolovat gzip
  10. 10. web.dev 5) Komprese – Zkusit Brotli
  11. 11. 6) Kritické zdroje na vlastní doménu Hlavně CSS, JS, webfonty, obrázky nutné pro první vykreslení.
  12. 12. 7) CSS a JS: rozdělit do malých souborů <-- Vše: --> <link href="main.123.css" …> <link href="lib.456.css" …> <link href="components.489.css" …> <-- Nákupní košík: --> <link href="lib-cart.123.css" …> <link href="components-cart.456.css" …>
  13. 13. 8) CSS: Posílat po komponentách <link href="components/table.v1.css" rel="stylesheet"> <table class="table"> … </table> <link href="components/form.v2.css" rel="stylesheet"> <form class="form"> … </form> css.chobits.ch
  14. 14. 8) CSS: Posílat po komponentách css.chobits.ch
  15. 15. 9) JS: Odblokovat vykreslování ❌
  16. 16. 9) JS: Odblokovat vykreslování vrdl.cz/p/js-priority
  17. 17. 10) JS: Lazy loadovat co není kritické
  18. 18. 10) JS: Lazy loadovat co není kritické — Lightbox — Chat — Vkládaný obsah (YouTube, Mapy…) — Foxentry, našeptávače… — Ovládání mega-menu…
  19. 19. 11) Webfonty: font-display font-display.glitch.me
  20. 20. 12) Webfonty: preload <link rel="preload" href="hlavni-pismo.woff2" 
 as="font" type="font/woff2">
  21. 21. 13) Ikony: Nepoužívat ikonfonty vrdl.cz/p/ikonfonty-vs-svg
  22. 22. 13) Ikony: Nepoužívat ikonfonty vrdl.cz/p/ikonfonty-vs-svg
  23. 23. 14) Obrázky: Lazy loading vrdl.cz/p/lazy-loading
  24. 24. 14) Obrázky: Lazy loading vrdl.cz/p/lazy-loading
  25. 25. 15) Obrázky: WebP vrdl.cz/p/webp - 30 % datového objemu úvodní stránky
 - 25 % čas pro Page Load <picture> <source type="image/webp" srcset="img.webp"> <img src="logo.jpg" alt="…"> </picture>
  26. 26. 16) Malý DOM
  27. 27. 17) UI: Držet prostor komponentám
  28. 28. Děkuji! vrdl.cz/kurzy Martin Michálek @machal

×