Weitere ähnliche Inhalte Ähnlich wie 17 technických tipů ke zrychlení webů (18) Mehr von Martin Michálek (20) 17 technických tipů ke zrychlení webů3. Time To First Byte
První vykreslení
První smysluplné vykreslení
Load
Index rychlosti
Doba do
interaktivity
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" …>
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
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…
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>