Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Rychlejší web snadno a rychle:
nové technologie a nástroje
pro vývojáře
Martin Michálek
29. března 2023
Frontendisti Plzeň

V PageSpeed.cz pomáháme
pomocí rychlosti zlepšovat
konverze malým i velkým
klientům.

Vyvíjíme také tester rychlosti,
který nyní můžete používat
zdarma.

@machal
1. WebP, Avif
2. Priority Hints
3. aspect-ratio
4. size-adjust
5. BFcache
6. Prerender
7. INP
8. Web Vitals overlay
9. Perf. Insights
10. Trace.Cafe
nové technologie a nástroje
pro vývojáře

Tradiční obrázkové formáty mají své primární určení:
Gif pro animace, JPEG pro ztrátovou kompresi. PNG
pro poloprůhlednost. SVG pro vektory.

https://www.vzhurudolu.cz/prirucka/webp https://www.vzhurudolu.cz/prirucka/avif

Nové formáty WebP a AVIF
zvládnout ztrátovou i
bezztrátovou kompresi, animace
i poloprůhlednost.

Nové formáty obrázků: data

AVIF
WebP
Nové formáty obrázků: podpora

Priority Hints: preload
<link rel="preload" href="image.webp" as="image">
<link rel="preload" href="font-1.woff2"
as="font" type="font/woff2" crossorigin>
Preload se občas docela hodí
pro zvýšení priority načtení
konkrétního prvku, třeba fontů.
https://www.vzhurudolu.cz/prirucka/preload

Priority Hints: fetchpriority
<img fetchpriority="high" href="image-1.webp">
<img fetchpriority="low" href="image-2.webp">
https://www.vzhurudolu.cz/prirucka/priority-hints
Nový atribut fetchpriority umožní definovat
vyšší prioritu načtení na HTML prvku. Ale
také prioritu snížit.

Priority Hints: fetchpriority
<script>
fetch('https://example.com/', {priority: 'high'})
.then(data => {
// Spustíme fetch s vyšší prioritou
});
</script>
https://www.vzhurudolu.cz/prirucka/priority-hints
Velmi zajímavá je možnost zvýšit
prioritu stažení souboru fetchem.

Priority Hints: podpora
fetchpriority=""
<link rel="preload">

Malý smutný obrázek
<img src="image.webp"
alt="Image">

Malý, ale veselý obrázek
<img src="image.webp"
width="500" height="500"
alt="Image">
Obrázkům vždy definujte tyto atributy.
Slouží k nastavení rezervovaného
prostoru. Díky tomu se nestane layout
shift a nezhorší CLS.
https://www.vzhurudolu.cz/prirucka/img-pomer-stran

CLS a média: aspect-ratio
p {
aspect-ratio: 4/3;
}
CSS vlastnost aspect-ratio nastavuje
poměr stran u prvků, které nejsou
obrázky. Odstraňuje nutnost použití
„padding triku“.
https://www.vzhurudolu.cz/prirucka/css-aspect-ratio

CLS a média: podpora
aspect-ratio:
<img width/height>

@machal
1. WebP, Avif
2. Priority Hints
3. aspect-ratio
4. size-adjust
5. BFcache
6. Prerender
7. INP
8. Web Vitals overlay
9. Perf. Insights
10. Trace.Cafe
nové technologie a nástroje pro
vývojáře

Webfonty a CLS: problém
Častý problém u CLS je
jiná velikost
systémového písma a
vlastního fontu.

Webfonty a CLS: size-adjust
https://www.vzhurudolu.cz/prirucka/css-size-adjust

Webfonty a CLS: size-adjust
@font-face {
font-family: "Montserrat-fallback";
size-adjust: 113.56999999999995%;
src: local("Arial Bold"), local("Arial");
}
Zápis size-adjust upraví velikost
systémového písma k vlastnímu fontu a
minimalizuje shifty a zhoršení CLS
typografií.

Webfonty a CLS: podpora
size-adjust

BFcache v Chrome
Zrychlení webu s back/
forward cache je
viditelné na první
pohled.
https://www.youtube.com/watch?v=cuPsdRckkF0

BFcache: co nedělat?
• unload, beforeunload
• Cache-Control: no-store
• reference na window.opener
https://web.dev/bfcache/

BFcache: jak testovat?
https://web.dev/bfcache/

Prerender?
<link rel="prerender" href="/next-page/">
Tento starý způsob
předrenderování bude
z Chrome odstraněn.

Prerender
https://developer.chrome.com/blog/prerender-pages/
Také předrenderování má
velký vliv na uživatelský
prožitek.

Prerender!
https://developer.chrome.com/blog/prerender-pages/
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Chrome 108+
Nově se to v Chrome
bude definovat takto.

vzhurudolu.cz/prirucka/web-vitals
Core Web Vitals
Je to rychle načtené? Reaguje to rychle? Je to vizuálně stabilní?

Nová metrika INP nahradí FID
nejspíš v roce 2024.
https://www.vzhurudolu.cz/prirucka/metrika-inp

INP ⨉ FID
• FID
=
první interakce ⨉ INP
=
celý pobyt ve stránce.
• FID splňuje 95 % webů ⨉ INP jen 66 %.
• FID
=
první část reakce ⨉ INP
=
celá reakce.

FID → INP = Ach!
Metriku INP má nyní
„rozbitou“ docela dost
českých webů.

Tato lišta je pro lokální testování
výrazně lepší než Lighthouse.
Ukazuje správné metriky a správně
vypočítané.

Performance Insights je něco jako
záložka Performance, ale pro lidi.

V Insights Chrome ukazuje
konkrétní informace pro ladění
konkrétní metriky.

Velmi to například pomáhá pro
ladění layout shiftů a metriky CLS.

Trace.cafe vám umožní nasdílet
výstup z Trace (záložka
Performance) na konkrétním URL.
https://trace.cafe/

Díky za
pozornost!
@machal
pagespeed.cz
martin.michalek@pagespeed.cz

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Ähnlich wie Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře (20)

Mehr von Martin Michálek

Mehr von Martin Michálek (20)

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře