Hogyan segíthetjük a böngészőt az erőforrások betöltésére való felkészülésben?
sobes.tech MI
Válasz az MI-től
Használja a preload direktívákat: preconnect, dns-prefetch, preload, prefetch, prerender.
| Direktíva | Leírás | Példa |
|---|---|---|
preconnect |
Előre létrehoz egy kapcsolatot (DNS-kérdés, TCP-kézfogás, TLS-megállapodás) egy másik adatforrással. | <link rel="preconnect" href="https://cdn.example.com"> |
dns-prefetch |
Előre végrehajtja a domain név feloldását. | <link rel="dns-prefetch" href="//api.example.com"> |
preload |
Erőforrásokat (JS, CSS, betűtípusok) magas prioritással kér előre, anélkül, hogy blokkolná a renderelést. | <link rel="preload" href="/styles.css" as="style"> |
prefetch |
Olyan erőforrásokat kér, amelyek valószínűleg a jövőben szükségesek lesznek (pl. a következő oldal). | <link rel="prefetch" href="/next_page.html"> |
prerender |
Előre rendereli a következő oldalt egy rejtett fülön. | <link rel="prerender" href="/upcoming_page.html"> |
Használja az async vagy defer attribútumot a <script>-nél, hogy szkripteket aszinkron módon töltse be és hajtsa végre, anélkül, hogy blokkolná a HTML elemzését:
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
Használja a loading="lazy" attribútumot képeknél és <iframe>-nál késleltetett betöltéshez, amikor azok a láthatósági területen belülre kerülnek:
<img src="image.jpg" loading="lazy" alt="Lazán betöltött kép">
Optimalizálja a képeket (tömörítés, modern formátumok, mint WebP), betűtípusokat (al-készletek, WOFF/WOFF2 formátumok) és egyéb erőforrásokat.
Minifikálja és tömörítse a CSS-t, JavaScriptet és HTML-t.
Használjon Service Worker-t az erőforrások cache-eléséhez és offline hozzáféréshez.
Szétszedheti a nagy JavaScript-kódot kisebb részekre (kód szétválasztás) és kérésre töltse be őket.
Használja az HTTP/2 és HTTP/3 protokollokat a hatékonyabb multiplexeléshez és fejléc tömörítéshez.
Állítson be megfelelő cache fejléceket (Cache-Control, Expires) a szerveren.
Használja a <link rel="modulepreload">-t az ES JavaScript modulok előtöltéséhez.
<link rel="modulepreload" href="/dist/module.js">