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

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

Βασικές τεχνικές:

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

  // Παράδειγμα lazy loading εικόνων με το API Intersection Observer
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  
  images.forEach(image => {
    observer.observe(image);
  });
  

• Server-Side Rendering (SSR): Απόδοση αρχικού HTML στον διακομιστή πριν από την αποστολή στον πελάτη. Επιτρέπει στον χρήστη να δει το περιεχόμενο πιο γρήγορα, ενώ ο περιηγητής φορτώνει και αναλύει το JavaScript. Παραδείγματα πλαισίων: Next.js, Nuxt.js.

• Rendering με προτεραιότητα Critical CSS: Εξαγωγή και ενσωμάτωση CSS που απαιτείται για την εμφάνιση του πάνω μέρους της σελίδας (above-the-fold content), ώστε ο περιηγητής να μπορεί να αποδώσει γρήγορα την αρχική εικόνα. Όλο το υπόλοιπο CSS φορτώνεται ασύγχρονα.

  <!-- Παράδειγμα inline Critical CSS -->
  <style>
    /* Critical CSS για το πάνω μέρος της σελίδας */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Code Splitting: Διαχωρισμός του JavaScript bundle σε μικρότερα τμήματα που φορτώνονται ανάλογα με την ανάγκη. Αυτό μειώνει το μέγεθος της αρχικής φόρτωσης. Δημοφιλές σε SPA frameworks όπως React, Vue, Angular.

Πλεονεκτήματα του προοδευτικού rendering:

• Βελτίωση της αντιληπτής απόδοσης: Ο χρήστης βλέπει το περιεχόμενο πιο γρήγορα, δημιουργώντας την εντύπωση ταχύτερης φόρτωσης.
• Μείωση του First Contentful Paint (FCP) και του Largest Contentful Paint (LCP): Μετρήσεις που αντικατοπτρίζουν την ταχύτητα φόρτωσης του ορατού περιεχομένου.
• Βελτίωση του SEO: Οι μηχανές αναζήτησης μπορούν να ευρετηριάσουν το περιεχόμενο πιο γρήγορα.
• Εξοικονόμηση δεδομένων: Ιδιαίτερα με lazy loading.

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