Κάντε καλύτερες προοδευτικές εικόνες Φόρτωση με AntiModerate

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

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

Με αυτόν τον τρόπο μπορεί να φορτωθεί ολόκληρη η σελίδα πρώτα με μικρές τοποθεσίες για εικόνες. Στη συνέχεια, οι επισκέπτες σας περιηγούνται φυσικά χωρίς να περιμένουν να φορτωθούν όλα τα στοιχεία - πάντα καλό από την οπτική γωνία του χρήστη!

Δείτε πώς λειτουργεί αυτό: προσθέτετε το plugin AntiModerate στη σελίδα σας μαζί με το σενάριο StackBlur.js.

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

Μόλις αυτές οι μικρότερες εικόνες είναι στη θέση τους, τότε το AntiModerate φορτώνει τις εικόνες πλήρους μεγέθους στο παρασκήνιο. Κάθε θολή φωτογραφία αντικαθίσταται με την κανονική φωτογραφία μόλις ολοκληρωθεί η λήψη. Εύκολος!

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

Μπορείτε να εγκαταστήσετε τη βιβλιοθήκη απευθείας με npm ή Bower, ή τραβώντας το σενάριο μέσω του GitHub.

Αυτό απαιτεί μόνο λίγες γραμμές JavaScript και είναι σίγουρο ότι θα σας βοηθήσει να βελτιώσετε τα φορτία της σελίδας σας. Ρίξτε μια ματιά στο repos GitHub και μετακινηθείτε προς τα κάτω στον οδηγό εγκατάστασης για να ξεκινήσετε.

Με μόνο λίγες γραμμές κώδικα, το AntiModerate θα πρέπει να είναι ένα μη-brainer να τρέχει σε οποιαδήποτε σελίδα.

Για να μην αναφέρουμε αυτό το τρέξιμο καθαρό JavaScript οπότε δεν απαιτεί εξαρτήσεις όπως το jQuery να δουλεύει.