Τι είναι resource hints όπως preload, prefetch και preconnect;

Question

IT Interview Practice · Accepted Answer

**Resource hints** είναι `` tags που λένε στο browser να ανακτήσει ή να συνδεθεί σε resources νωris, βελτιστοποιώντας την απόδοση φόρτωσης. Το καθένα εξυπηρετεί μια διαφορετική ανάγκη χρονισμού/προτεραιότητας. ```html ``` ## Τι κάνει το καθένα - **`preload`** — "Χρειάζομαι αυτό **για την τρέχουσα σελίδα**, ανακτήστε το τώρα σε υψηλή προτεραιότητα." Για critical resources που το parser ανακαλύπτει αργά: fonts, hero images, CSS-referenced assets. Απαιτεί `as` ώστε το browser να θέσει σωστή προτεραιότητα/headers. - **`preconnect`** — "Θα συνδεθώ σε αυτήν την **origin** σύντομα; κάντε την DNS αναζήτηση + TCP + TLS handshake τώρα." Εξοικονομεί τα round-trips πριν το πρώτο request σε ένα third-party (API, font host, CDN). Χρησιμοποιήστε για λίγες critical origins. - **`dns-prefetch`** — μια ελαφρύτερη έκδοση του preconnect: μόνο η DNS resolution. Καλή fallback / για πολλές origins. - **`prefetch`** — "Θα **πιθανώς** χρειαστώ αυτό για την **επόμενη** πλοήγηση; ανακτήστε το σε χαμηλή προτεραιότητα όταν είναι idle." Για πιθανές επόμενες σελίδες/assets. Cached για το μέλλον, όχι για την τρέχουσα σελίδα. ## Ένα συνηθισμένο πραγματικό παράδειγμα: fonts ```html ``` Τα fonts ανακαλύπτονται αργά (το browser πρέπει πρώτα να αναλύσει το CSS), οπότε το preloading τους αποφεύγει τις καθυστερήσεις invisible-text. ## Προσοχή: μην κάνετε over-hint Το preloading όλων αποσκοπεί το σκοπό — ανταγωνίζεται τα genuinely critical resources για bandwidth. Κάντε hint μόνο τα λίγα που σημαίνουν περισσότερο. ## Γιατί αυτό είναι σημαντικό Τα resource hints αποκόπτουν latency από το critical path: `preconnect` αφαιρεί handshake delay για third parties, `preload` δίνει προτεραιότητα σε late-discovered critical assets (fonts, LCP image), και `prefetch` κάνει την *επόμενη* πλοήγηση να αισθάνεται στιγμιαία. Χρησιμοποιημένα χειρουργικά, βελτιώνουν σημαντικά τα Core Web Vitals.

Τι κάνει το καθένα

Ένα συνηθισμένο πραγματικό παράδειγμα: fonts

Προσοχή: μην κάνετε over-hint

Γιατί αυτό είναι σημαντικό

Σχετικές ερωτήσεις