Το lazy-loading αναβάλλει το κατέβασμα κάτι μέχρι να χρειαστεί πραγματικά — συνήθως όταν πρόκειται να εμφανιστεί με scroll. Αυτό συρρικνώνει το αρχικό payload ώστε το ορατό μέρος της σελίδας να φορτώνει πιο γρήγορα.
Ο browser το κάνει εγγενώς με ένα attribute:
Να διατηρείτε πάντα το width/height ώστε ο browser να δεσμεύει χώρο (αποφεύγει το layout shift). Ποτέ μην κάνετε lazy-load την εικόνα LCP σας — καθυστερεί το ίδιο το πράγμα που μετριέται.
Χωρίστε βαρύ ή σπάνια χρησιμοποιούμενο UI (modals, charts) σε ένα ξεχωριστό chunk που φορτώνεται on demand:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Το δυναμικό import() λέει στον bundler να δημιουργήσει ένα ξεχωριστό αρχείο που κατεβαίνει μόνο όταν το <Chart> κάνει render για πρώτη φορά.
Το lazy-loading είναι η πιο απλή, υψηλότερης μόχλευσης νίκη για μια βαριά σελίδα: λιγότερα προς κατέβασμα εξαρχής σημαίνει γρηγορότερο LCP και λιγότερο JS για parse. Οι συνεντευξιαστές θέλουν να δουν ότι δεν κάνετε lazy-load την εικόνα hero — ένα κλασικό λάθος που βλάπτει τη μετρική που προσπαθείτε να βοηθήσετε.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά