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.

1. 17 technických tipů
ke zrychlení webů
6. května 2019
Frontendisti Ostrava

2. vrdl.cz/martin
Martin Michálek: frontend designér, poradce
Martin Michálek

3. Time To First Byte
První vykreslení
První smysluplné vykreslení
Load
Index rychlosti
Doba do
interaktivity

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. developers.google.com
2) Kešování CSS, JS atd. – Opravit max-age

6. developers.google.com
2) Kešování CSS, JS atd. – Opravit max-age
Cache-Control: max-age=31536000

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. vrdl.cz/p/ttfb
4) Komprese – Zkontrolovat gzip

9. vrdl.cz/p/ttfb
4) Komprese – Zkontrolovat gzip

10. web.dev
5) Komprese – Zkusit Brotli

11. 6) Kritické zdroje na vlastní doménu
Hlavně CSS, JS,
webfonty,
obrázky nutné
pro první
vykreslení.

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. 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. 8) CSS: Posílat po komponentách
css.chobits.ch

15. 9) JS: Odblokovat vykreslování
❌

16. 9) JS: Odblokovat vykreslování
vrdl.cz/p/js-priority

17. 10) JS: Lazy loadovat co není kritické

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. 11) Webfonty: font-display
font-display.glitch.me

20. 12) Webfonty: preload
<link rel="preload"
href="hlavni-pismo.woff2"
as="font"
type="font/woff2">

21. 13) Ikony: Nepoužívat ikonfonty
vrdl.cz/p/ikonfonty-vs-svg

22. 13) Ikony: Nepoužívat ikonfonty
vrdl.cz/p/ikonfonty-vs-svg

23. 14) Obrázky: Lazy loading
vrdl.cz/p/lazy-loading

24. 14) Obrázky: Lazy loading
vrdl.cz/p/lazy-loading

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. 16) Malý DOM

27. 17) UI: Držet prostor komponentám

28. Děkuji!
vrdl.cz/kurzy
Martin Michálek
@machal