Kuidas saame aidata brauseril valmistuda ressursside laadimiseks?

Kasutage eellaadimise juhiseid: preconnect, dns-prefetch, preload, prefetch, prerender.

Juhis	Kirjeldus	Näide
preconnect	Loob ühenduse (DNS päring, TCP kättesaamine, TLS läbirääkimised) teise andmeallikaga ette.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Lahendab domeeninime ette.	<link rel="dns-prefetch" href="//api.example.com">
preload	Nõuab ressurssi (JS, CSS, fondid) ette kõrge prioriteediga, ilma renderdamist takistamata.	<link rel="preload" href="/styles.css" as="style">
prefetch	Nõuab ressurssi, mis tõenäoliselt on tulevikus vajalik (näiteks järgmise lehe jaoks).	<link rel="prefetch" href="/next_page.html">
prerender	Renderdab järgmise lehe eelnevalt varjatud vahekaardil.	<link rel="prerender" href="/upcoming_page.html">

Kasuta async või defer atribuute <script>-i jaoks asünkroonseks laadimiseks ja täitmiseks, HTML-i analüüsi takistamata:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Kasuta loading="lazy" atribuuti piltidele ja <iframe>-idele nende hilinenud laadimiseks, kui need satuvad nähtavuspiirkonda:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Optimeeri pilte (suruge, kasuta kaasaegseid formaate nagu WebP), fonte (alampikkused, WOFF/WOFF2 formaadid) ja muid ressursse.

Minimeeri ja suru CSS, JavaScript ja HTML.

Kasuta Service Workerit ressursside vahemälu ja offline-juurdepääsu tagamiseks.

Jaga suur JavaScript-kood väiksemateks osadeks (code splitting) ja laadi neid nõudmisel.

Kasuta HTTP/2 ja HTTP/3 tõhusamaks mitmekesistamiseks ja päiste surumiseks.

Sea õiged vahemälupealkirjad (Cache-Control, Expires) serveris.

Kasuta <link rel="modulepreload"> JavaScript ES moodulite eellaadimiseks.

<link rel="modulepreload" href="/dist/module.js">