Ποια μέθοδο μπορείτε να χρησιμοποιήσετε για να επιταχύνετε τη φόρτωση μιας ιστοσελίδας;

Ελαχιστοποίηση και ομαδοποίηση αρχείων CSS και JavaScript. Συμπίεση εικόνων και χρήση σύγχρονων μορφών όπως WebP. Χρήση lazy loading για εικόνες και βίντεο. Προσωρινή αποθήκευση πόρων στην πλευρά του πελάτη και του διακομιστή. Συμπίεση GZIP για κειμενικούς πόρους. Ελαχιστοποίηση των αιτημάτων HTTP. Χρήση CDN (Content Delivery Network). Βελτιστοποίηση της κρίσιμης διαδρομής απόδοσης. Αφαίρεση μη χρησιμοποιούμενου κώδικα. Χρήση Service Workers για offline πρόσβαση και caching.

// Παράδειγμα lazy loading εικόνας
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

Σύγκριση μορφών εικόνων:

Μορφή	Χρήση	Χαρακτηριστικά
JPEG	Φωτογραφίες	Χαμένη συμπίεση, ευρύ φάσμα χρωμάτων
PNG	Γραφικά με διαφάνεια, λογότυπα	Χωρίς απώλειες συμπίεση, υποστήριξη διαφάνειας
GIF	Κινούμενες εικόνες	Χωρίς απώλειες συμπίεση, υποστήριξη animation
WebP	Φωτογραφίες και γραφικά	Πιο αποδοτική συμπίεση (με και χωρίς απώλειες), υποστήριξη διαφάνειας και animation

/* Παράδειγμα ομαδοποίησης και ελαχιστοποίησης CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Απενεργοποιημένος κώδικας αφαιρέθηκε */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Παράδειγμα συμπίεσης GZIP στο Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;