Πώς μπορούμε να βοηθήσουμε το πρόγραμμα περιήγησης να προετοιμαστεί για τη φόρτωση πόρων;

Χρησιμοποιήστε οδηγίες προφόρτωσης: preconnect, dns-prefetch, preload, prefetch, prerender.

Οδηγία	Περιγραφή	Παράδειγμα
preconnect	Δημιουργεί σύνδεση (DNS lookup, TCP handshake, TLS negotiation) με άλλη πηγή δεδομένων εκ των προτέρων.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Εκτελεί την επίλυση ονόματος τομέα εκ των προτέρων.	<link rel="dns-prefetch" href="//api.example.com">
preload	Ζητά πόρους (JS, CSS, γραμματοσειρές) με υψηλή προτεραιότητα εκ των προτέρων, χωρίς να μπλοκάρει την απόδοση.	<link rel="preload" href="/styles.css" as="style">
prefetch	Ζητά πόρους που πιθανόν θα χρειαστούν στο μέλλον (π.χ. στην επόμενη σελίδα).	<link rel="prefetch" href="/next_page.html">
prerender	Προ-αποδίδει την επόμενη σελίδα σε κρυφό καρτέλα.	<link rel="prerender" href="/upcoming_page.html">

Χρησιμοποιήστε το χαρακτηριστικό async ή defer στο <script> για να φορτώσετε και να εκτελέσετε scripts ασύγχρονα, χωρίς να μπλοκάρετε την ανάλυση HTML:

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

Χρησιμοποιήστε το χαρακτηριστικό loading="lazy" για εικόνες και <iframe> για καθυστερημένη φόρτωση όταν εισέρχονται στην περιοχή ορατότητας:

<img src="image.jpg" loading="lazy" alt="Lazy φορτωμένη εικόνα">

Βελτιστοποιήστε τις εικόνες (συμπίεση, χρήση σύγχρονων φορμάτ όπως WebP), τις γραμματοσειρές (υποσύνολα, φορμάτ WOFF/WOFF2) και άλλους πόρους.

Μινιμαρίστε και συμπιέστε CSS, JavaScript και HTML.

Χρησιμοποιήστε Service Worker για caching πόρων και offline πρόσβαση.

Διαίρεση μεγάλου κώδικα JavaScript σε μικρότερα τμήματα (code splitting) και φόρτωση κατά απαίτηση.

Χρησιμοποιήστε HTTP/2 και HTTP/3 για πιο αποδοτικό πολλαπλόχρησμο και συμπίεση επικεφαλίδων.

Ορίστε σωστά headers cache (Cache-Control, Expires) στον διακομιστή.

Χρησιμοποιήστε <link rel="modulepreload"> για προφόρτωση JavaScript modules ES.

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