5 βήματα για να επιταχύνετε την ιστοσελίδα σας – image heavy website

epexergasia eikonas

 Οι εικόνες αποτελούν βασικό στοιχείο κάθε ιστοτόπου. Σύμφωνα με τα αρχεία του αρχείου HTTP, οι εικόνες δημιουργούν περισσότερο από το 60% των δεδομένων που έχουν φορτωθεί σε ιστοσελίδες. Όντας ένα τόσο σημαντικό συστατικό σχεδόν όλων των ιστότοπων, είτε πρόκειται για ηλεκτρονικό εμπόριο, ειδήσεις, ιστοσελίδες μόδας, blogs ή ταξιδιωτικές πύλες, η βελτιστοποίηση εικόνας είναι σημαντική και ίσως η χαμηλότερη κρέμασμα φρούτων, .

Η βελτιστοποίηση των εικόνων στον ιστότοπό σας μπορεί να χωριστεί ευρέως σε 3 κατηγορίες – ελαφρύτερο φορτίο, μικρότερο φορτίο και γρηγορότερο φορτίο. Οι 5 τεχνικές που συζητάμε σε αυτό το άρθρο ή άλλες τεχνικές που συναντάμε πιθανότατα θα πέσουν σε καθεμία από αυτές τις 3 κατηγορίες.

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

1. Αλλαγή μεγέθους των εικόνων σας
1. Resize your images

Αυτό πρέπει να έχει. Αλλαγή μεγέθους των εικόνων σας σε ακριβώς αυτό που απαιτείται στον ιστότοπό σας. Και όχι, δεν μιλάω για αλλαγή μεγέθους χρησιμοποιώντας το CSS ή στο HTML. Μιλώ για την αλλαγή μεγέθους της εικόνας στο διακομιστή και στη συνέχεια την αποστολή του στο πρόγραμμα περιήγησης.

Για παράδειγμα, έχετε μια εικόνα 4000x3000px για ένα προϊόν που θέλετε να καταχωρίσετε στον ιστότοπό σας ηλεκτρονικού εμπορίου. Ωστόσο, στον ιστότοπό σας, πρέπει να παρουσιάσετε μια πολύ μικρότερη εικόνα αυτού του προϊόντος. Θα μπορούσε να είναι μια εικόνα 200x300px στη σελίδα καταλόγου προϊόντων και μια εικόνα 800x1000px στη σελίδα λεπτομερειών του προϊόντος. Βεβαιωθείτε ότι έχετε μειώσει την αρχική εικόνα σε αυτές τις διαστάσεις ΠΡΙΝ την αποστείλετε στο πρόγραμμα περιήγησης. Οι εικόνες με μεγέθυνση είναι πολύ μικρότερες από την αρχική και θα φορτωθούν πολύ γρηγορότερα από την αρχική εικόνα.

Κατά τη γνώμη μου, η λανθασμένη αλλαγή μεγέθους των εικόνων είναι ο μεγαλύτερος τομέας βελτιστοποίησης στις περισσότερες ιστοσελίδες. Και συχνά, εμείς ως προγραμματιστές, τείνουμε να το παραβλέψουμε. Σκεφτείτε το ακόλουθο σενάριο: Αρχίζετε με εικόνες τέλεια μεγέθους για τη νέα σας ιστοσελίδα. Κατά τους προσεχείς μήνες, η διάταξη του ιστότοπού σας αλλάζει και οι απαιτήσεις σας για τις διαστάσεις της εικόνας. Ωστόσο, αντί να δημιουργήσετε νέες εικόνες για να ικανοποιήσετε αυτές τις νέες απαιτήσεις διάστασης, κάτι που είναι από μόνο του καθήκον, μπορείτε να το κάνετε με μια στενή εναλλακτική λύση. Για παράδειγμα, χρησιμοποιείτε μια εικόνα 300x200px όπου μια εικόνα 200x200px θα είχε δουλέψει. Υποθέτω ότι αυτό θα συνέβαινε με όλους.

compress image

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

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

Υπάρχουν πολλές εφαρμογές ανοιχτού κώδικα και διακομιστή που μπορείτε να υλοποιήσετε μόνοι σας. Το ImageKit είναι μία τέτοια υπηρεσία τρίτου μέρους, η οποία, εκτός από όλα τα άλλα χαρακτηριστικά, παρέχει σε πραγματικό χρόνο αλλαγή μεγέθους και περικοπής βάσει URL. Και μπορείτε να το χρησιμοποιήσετε σε όλες τις υπάρχουσες εικόνες σας και σε λίγα λεπτά της εγκατάστασης.

2. Βελτιστοποιήστε τις εικόνες σας
2. Optimize your images

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

Τα JPG, PNG και GIF είναι οι πιο συνηθισμένες μορφές εικόνας που χρησιμοποιούνται επί του παρόντος στο διαδίκτυο και είναι κατάλληλες για διαφορετικές περιπτώσεις χρήσης. Υπάρχει ένας άλλος σχετικά νέος τύπος εικόνας που ονομάζεται WebP που συνδυάζει τα καλύτερα από αυτά τα φορμά εικόνας, έχει 30% μικρότερο μέγεθος και υποστηρίζεται σχεδόν στο 75% των σύγχρονων προγραμμάτων περιήγησης.

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

resize images

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

Διαφορετικές μέθοδοι συμπίεσης εικόνων εκμεταλλεύονται τους περιορισμούς του ανθρώπινου ματιού για να διακρίνουν μικρές αλλαγές στις πληροφορίες χρώματος για συμπίεση εικόνων. Ως στάνταρ, ένα επίπεδο ποιότητας 80 έως 90 (σε κλίμακα 100) είναι συνήθως ένα καλό εμπόριο μεταξύ μεγέθους εικόνας και ποιότητας.

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

Ένας απλός τρόπος να κάνετε την επίτευξη της μορφής και της βελτιστοποίησης της ποιότητας είναι να χρησιμοποιήσετε το ImageKit για να παραδώσετε τις εικόνες σας. Μετατρέπει αυτόματα μια εικόνα στο WebP όπου είναι δυνατόν και βελτιστοποιεί επίσης την ποιότητα της εικόνας σε πραγματικό χρόνο.

3. Κατασκευήγια κινητά
3. Build for mobile

Στον σημερινό κόσμο, αν είστε σοβαροί για την εκτέλεση ενός ιστοτόπου, η παραβίαση των χρηστών των κινητών είναι αμαρτία. Τα δεδομένα δείχνουν ότι σχεδόν το 60% της παγκόσμιας κίνησης προέρχεται από κινητές συσκευές. Και ναι, ενώ τα κινητά τηλέφωνα έχουν πάρει ισχυρά και τα δίκτυα κινητής τηλεφωνίας έχουν γίνει καλύτερα, τα δεδομένα δείχνουν ότι οι ταχύτητες κινητών δεδομένων εξακολουθούν να είναι πολύ πιο αργές από τις ευρυζωνικές ταχύτητες. Υπάρχουν χώρες ή περιοχές εντός των χωρών όπου η σύνδεση δεδομένων κινητής τηλεφωνίας είναι αστραφτερή. Επομένως, είναι σημαντικό να είστε ιδιαίτερα προσεκτικοί κατά το σχεδιασμό εμπειριών web για κινητά.

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

επεξεργασία εικόνας

Το χαρακτηριστικό `sizes` δίνει πληροφορίες για τη διάταξη εικόνας, το χαρακτηριστικό` srcset` δίνει τη λίστα εικόνων με το πραγματικό πλάτος που καθορίζεται για κάθε διεύθυνση URL.

Ένας άλλος παράγοντας που έρχεται σε εικόνα με κινητές συσκευές είναι ο λόγος συσκευής Pixel ή η τιμή DPR. Τα σύγχρονα κινητά τηλέφωνα έχουν οθόνες υψηλής πυκνότητας που συσκευάζουν περισσότερα pixel στην ίδια τετραγωνική ίντσα.

Μια εικόνα που φαίνεται ωραία σε κανονικές συσκευές, θα φαινόταν ελαφρά θολή σε μια οθόνη υψηλής πυκνότητας. Μια λύση σε αυτό είναι να φορτώσετε μια εικόνα μεγέθους 2x σε οθόνες με DPR 2, μια εικόνα 3x σε οθόνες με DPR 3 και την εικόνα μεγέθους κανονικής εικόνας 1x σε άλλες συσκευές. Και αυτό μπορεί να επιτευχθεί χρησιμοποιώντας την ετικέτα απόκρισης εικόνας όπως φαίνεται παρακάτω.

Μια σύγχρονη προδιαγραφή που ονομάζεται Σύμβουλοι Πελάτη, καθιστά απλό να ξεκινήσετε με εικόνες που ανταποκρίνονται και καθιστά τον κώδικα πολύ πιο καθαρό σε σύγκριση με τη μέθοδο χαρακτηριστικών `srcset` και` sizes`. Ο τρόπος με τον οποίο λειτουργούν οι υπαινιγμοί του πελάτη είναι ένα τεράστιο θέμα από μόνο του ότι είναι εκτός πεδίου για αυτή τη θέση και έχει αναλυθεί εδώ.

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

4. Φορτώστε λιγότερους πόρους
4. Load fewer resources

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

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

Η άλλη πιο σημαντική τεχνική που μπορείτε να χρησιμοποιήσετε είναι τεμπέλης φόρτωση για τις εικόνες σας. Λανθασμένη φόρτωση σημαίνει ουσιαστικά ότι αναβάλλουμε τη φόρτωση εικόνων που δεν απαιτούνται αμέσως. Τυπικά, οποιαδήποτε εικόνα που δεν είναι ορατή από τον χρήστη στην οθόνη του ή στο παράθυρο προβολής, μπορεί να φορτωθεί αργότερα, δηλ. Όταν η εικόνα εισέλθει ή πρόκειται να εισέλθει στο παράθυρο προβολής.

μετατροπή εικόνων

Εξετάστε μια περίπτωση όπου έχετε 100 προϊόντα στην ιστοσελίδα σας. Εάν ζητήσετε όλες τις 100 εικόνες προϊόντων την ίδια στιγμή και από την αρχή, θα επιβραδύνει το χρόνο φόρτωσης. Οι εικόνες θα ανταγωνίζονται για το εύρος ζώνης δικτύου και τους πόρους CPU με άλλα κρίσιμα στοιχεία στη σελίδα, όπως το CSS και το JS.

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

Ξεκινώντας με τεμπέληνη φόρτωση είναι πολύ απλή με JS βιβλιοθήκες όπως jQuery Lazy. Μπορείτε επίσης να χρησιμοποιήσετε το τελευταίο API IntersectionObserver το οποίο είναι πολύ πιο αποδοτικό από τις διαθέσιμες βιβλιοθήκες JS για τεμπέληση φόρτωσης.

5. Χρησιμοποιήστε ένα καλό CDN για την παράδοση εικόνων
5. Use a good CDN for image delivery

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

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

Ας υποθέσουμε ότι ο διακομιστής ιστότοπού σας βρίσκεται στις Η.Π.Α. Ένα δίκτυο παροχής περιεχομένου αποθηκεύει τις εικόνες σας στο παγκόσμιο κατανεμημένο δίκτυο διακομιστών (είναι πιο πολύπλοκο από αυτό, αλλά για λόγους απλότητας, ας υποθέσουμε αυτό). Στη συνέχεια, εάν ένας χρήστης από τη Βραζιλία ζητήσει μια εικόνα από τον ιστότοπό σας, αντί να πάρει την εικόνα από τον διακομιστή σας στις ΗΠΑ, το CDN το παραδίδει από έναν κόμβο που βρίσκεται πιο κοντά στον συγκεκριμένο χρήστη στη Βραζιλία. Αυτό μειώνει τον χρόνο γύρου ταξιδιού που απαιτείται για τη φόρτωση μιας εικόνας. Ορισμένα από τα αξιοσημείωτα CDN παρατίθενται στη σελίδα αυτής της Wikipedia.

image maker

Όταν επιλέγετε ένα CDN, βεβαιωθείτε ότι το CDN υποστηρίζει το HTTP / 2. Το HTTP / 2 είναι ένα νέο πρωτόκολλο για την παροχή περιεχομένου στον ιστό που μπορεί να συμβάλει σημαντικά στην ταχύτερη δυνατή φόρτωση του χρόνου φόρτωσης. Χρησιμοποιεί τεχνικές όπως η πολυπλεξία, η συμπίεση κεφαλίδων και η ώθηση διακομιστή για τη μείωση του χρόνου φόρτωσης σελίδας. Το HTTP / 2 υποστηρίζεται τώρα από τα ακόλουθα CDNs. Αυτή η δοκιμαστική σελίδα κάνει καλή δουλειά στην οπτική εξήγηση της διαφοράς απόδοσης μεταξύ του HTTP / 2 και του παλαιότερου πρωτοκόλλου HTTP / 1.1.

image resize

Το ImageKit σας παρέχει ένα CDN που είναι ενεργοποιημένο από HTTP / 2. Χωρίς επιπλέον προσπάθεια, μπορείτε να χρησιμοποιήσετε το ImageKit για την καλύτερη απόδοση στην κατηγορία σας για τις εικόνες σας (ακόμα και για άλλα στατικά αρχεία).

Πώς μπορώ να δοκιμάσω τον ιστότοπό μου για προβλήματα σχετικά με την εικόνα;

Λοιπόν υπάρχουν αρκετά εργαλεία που μπορείτε να χρησιμοποιήσετε για να δοκιμάσετε έναν ιστότοπο ειδικά για θέματα που σχετίζονται με την εικόνα. Ένας τρόπος είναι να χρησιμοποιήσετε αυτόν τον αναλυτή ιστότοπου από το ImageKit. Απλώς πληκτρολογήστε μια διεύθυνση URL σελίδας και μέσα σε λίγα δευτερόλεπτα θα σας έδινε προτάσεις σχετικά με την αλλαγή μεγέθους, την καλύτερη μορφή, την τεμπέληνη φόρτωση και το HTTP / 2. Η Google έχει επίσης εργαστεί σε ένα εργαλείο ανοιχτού κώδικα που ονομάζεται Φάρος. Αυτό το εργαλείο είναι ενσωματωμένο στις τελευταίες εκδόσεις του Chrome και μπορεί να κάνει μια λεπτομερή ανάλυση όχι μόνο των εικόνων στον ιστότοπό σας αλλά και άλλων ζητημάτων που ενδέχεται να επηρεάζουν την απόδοση. Οι πληροφορίες για το Google PageSpeed ​​επισημαίνουν επίσης αν φορτώνετε μη εξειδικευμένες εικόνες στον ιστότοπό σας εκτός από άλλες συστάσεις.

συμπέρασμα
Έχουμε καλύψει όλες τις βασικές τεχνικές βελτιστοποίησης εικόνας και βελτίωσης της απόδοσης. Με αυτές τις πληροφορίες, μπορείτε να λύσετε το 90% των προβλημάτων που σχετίζονται με την εικόνα σας, αν όχι περισσότερο, τα οποία θα σας βοηθήσουν να έχετε ταχύτερους χρόνους φόρτωσης σελίδων και να κατατάσσονται υψηλότερα στα αποτελέσματα αναζήτησης. Να θυμάστε πάντα, για τις εικόνες στον ιστότοπό σας – να φορτώσετε ελαφρύτερα, να φορτώσετε λιγότερα και να φορτώσετε πιο γρήγορα.

Αν ενδιαφέρεστε για μία ωραία και λειτουργική ιστοσελίδα πατήστε εδώ.