Τι είναι η προοδευτική απόδοση;

Ο προοδευτικός αποδότης είναι μια τεχνική βελτίωσης της απόδοσης των ιστοσελίδων, όπου το περιεχόμενο φορτώνεται και εμφανίζεται σταδιακά, και όχι όλα μαζί. Αυτό βελτιώνει την αντιληπτή απόδοση και την αλληλεπίδραση, επιτρέποντας στον χρήστη να δει και να αλληλεπιδράσει με ένα μέρος της σελίδας πριν φορτώσουν πλήρως όλοι οι πόροι.

Κύριες προσεγγίσεις:

Lazy Loading (Αργή φόρτωση): Φόρτωση εικόνων, βίντεο ή άλλων πόρων που καταναλώνουν πολλούς πόρους μόνο όταν γίνουν ορατά στο viewport του χρήστη.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Περιγραφή εικόνας">
```
Streaming Rendering: Αποστολή HTML κώδικα σε τμήματα, επιτρέποντας στο πρόγραμμα περιήγησης να ξεκινήσει το parsing και το rendering πριν λάβει ολόκληρη τη σελίδα.
Rendering στην πλευρά του διακομιστή (SSR) ή Hydration: Δημιουργία αρχικού HTML στον διακομιστή για γρήγορη εμφάνιση του περιεχομένου, και στη συνέχεια "ζωντάνεμα" της στατικής δομής στον πελάτη με JavaScript για διαδραστικότητα.
```
// Παράδειγμα της έννοιας της hydration
// Στον πελάτη
const appElement = document.getElementById('app');
// Τοποθέτηση της εφαρμογής Vue/React κ.λπ. στη υπάρχουσα δομή DOM
Vue.createApp(App).mount(appElement);
// ή React.hydrate(<App />, appElement);
```
Προτεραιότητα ορατού περιεχομένου (Above-the-fold rendering): Φόρτωση και rendering του ορατού περιεχομένου στο πρώτο μέρος της σελίδας (χωρίς κύλιση), με καθυστερημένη φόρτωση του υπόλοιπου.

Η εφαρμογή προοδευτικού rendering βελτιώνει τις βασικές μετρήσεις Web Vitals:

Largest Contentful Paint (LCP): Επιταχύνει την εμφάνιση του μεγαλύτερου στοιχείου.
First Contentful Paint (FCP): Μειώνει το χρόνο μέχρι την εμφάνιση του πρώτου περιεχομένου.
Cumulative Layout Shift (CLS): Αν και δεν είναι άμεσα, η σωστή χρήση placeholders και lazy loading μπορεί να βοηθήσει στη μείωση απρόβλεπτων μετακινήσεων περιεχομένου.