Αυξήστε την ταχύτητα του Blog χρησιμοποιώντας το LAZY LOAD script.

Όλοι μας θέλουμε ένα blog το οποίο να φορτώνει αρκετά γρήγορα ώστε να μην φεύγει ο επισκέπτης. Το lazy load script κάνει ακριβώς αυτό: βοηθάει να αυξήσουμε την ταχύτητα φόρτωσης του site μας

Τι κάνει το Lazy Load script

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

Όταν όμως η εικόνα αρχίζει να μπαίνει στο οπτικό πεδίο του χρήστη, φορτώνει αστραπιαία. Σκεφτείτε όταν έχουμε το widget δημοφιλών αναρτήσεων και το widget με τα παρόμοια άρθρα, τα οποία θα έχουν και 10–15 εικόνες συν τις εικόνες της ανάρτησης — όσο γρήγορο internet και να έχει ο χρήστης, το blog θα «σέρνεται» μέχρι να φορτώσει.

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

Πώς βάζω το Lazy Load script στο Blogger

Πρώτα πρώτα θα πρέπει να κοιτάξουμε να υπάρχει το Lazy Load plugin στο θέμα μας. Πάμε λοιπόν στο Θέμα → Επεξεργασία HTML και με Control+F κάνουμε αναζήτηση τη λεξούλα “Lazy load”.

Αν δούμε πως υπάρχει, τότε είμαστε οκ και δεν χρειάζεται να κάνουμε κάποια άλλη κίνηση. Όμως, αν δεν τη βρούμε, τότε πρέπει να βρούμε το </body> και ακριβώς από πάνω του να κάνουμε επικόλληση τον κώδικα που ακολουθεί.

Lazy Load Script (native + IntersectionObserver)

<script>
/*
  Native Lazy Loading για Blogger (εικόνες + iframes)
  - Δεν πειράζει την 1η εικόνα του άρθρου (LCP)
  - Χωρίς jQuery, με IntersectionObserver
  - Υποστήριξη data-lazy="off" για εξαιρέσεις
*/
(function () {
  function setDims(img) {
    if (!img.getAttribute('width') || !img.getAttribute('height')) {
      const w = img.naturalWidth || img.width;
      const h = img.naturalHeight || img.height;
      if (w && h) { img.setAttribute('width', w); img.setAttribute('height', h); }
    }
  }
  function prepImage(img) {
    if (img.dataset.lazy === 'off') return;
    const isFirstInPost = img.closest('.post-body') && !img.previousElementSibling;
    if (isFirstInPost) return;
    setDims(img);
    img.setAttribute('loading', 'lazy');
    img.setAttribute('decoding', 'async');
    if (!img.dataset.src) {
      img.dataset.src = img.src;
      img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
      img.style.filter = 'blur(8px)';
      img.style.transition = 'filter .3s ease';
    }
  }
  function reveal(img) {
    const real = img.dataset.src;
    if (real) {
      img.src = real;
      img.onload = function () { img.style.filter = 'none'; img.removeAttribute('data-src'); };
    }
  }
  const imgs = document.querySelectorAll('.post-body img, .PopularPosts img, .related-posts img, .post img');
  imgs.forEach(prepImage);
  if ('IntersectionObserver' in window) {
    const io = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        reveal(entry.target);
        obs.unobserve(entry.target);
      });
    }, { rootMargin: '200px 0px 200px 0px' });
    document.querySelectorAll('img[data-src]').forEach(el => io.observe(el));
  } else {
    document.querySelectorAll('img[data-src]').forEach(reveal);
  }
  document.querySelectorAll('.post-body iframe').forEach(f => {
    if (f.dataset.lazy === 'off') return;
    f.setAttribute('loading', 'lazy');
    f.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
  });
})();
</script>

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

Πρόσθετα tips για ακόμη καλύτερο αποτέλεσμα

Μη κάνετε lazy την πρώτη εικόνα (LCP) του άρθρου: αφήστε την κανονικά να φορτώσει και δώστε της width/height για μηδενικό CLS.
Native lazy-loading: όπου γίνεται, προσθέστε στα images loading="lazy" και decoding="async" (λειτουργεί στους σύγχρονους browsers).
Σωστά μεγέθη thumbnails στο Blogger: προσαρμόστε τα suffix (s400, w600-h338 κ.λπ.) ώστε να ταιριάζουν στο πραγματικό display size.
Lazy και στα iframes (YouTube κ.λπ.) με loading="lazy" για να μειωθεί το αρχικό φορτίο.
Έλεγχος Core Web Vitals: μετρήστε LCP, CLS, INP στο Lighthouse/PageSpeed για να δείτε τη διαφορά πριν/μετά.

Αυξήστε την ταχύτητα του Blog χρησιμοποιώντας το LAZY LOAD script.

Τι κάνει το Lazy Load script

Πώς βάζω το Lazy Load script στο Blogger

Πρόσθετα tips για ακόμη καλύτερο αποτέλεσμα

Δημοσίευση σχολίου