Η τωρινή κατάσταση στο διαδίκτυο οδηγεί στην αύξηση της ποιότητας και της ποσότητας του περιεχομένου και έχει σαν γενικό κανόνα το “content is king”.
Ακόμα και αν έχεις το καλύτερο περιεχόμενο όμως, αν το site σου έχει αργή φόρτωση των ιστοσελίδων δύσκολα οι επισκέπτες θα μείνουν αρκετά για να το δουν.
Σύμφωνα με το Kissmetrics 40% των ανθρώπων εγκαταλείπουν ένα website που ξεπερνάει τα 3 δευτερόλεπτα φόρτωσης.
Βλέπουμε λοιπόν ότι κάθε δευτερόλεπτο μετράει!
Λίγα λόγια για τη βελτιστοποίηση εικόνων
Ένας σημαντικός λόγος που η ιστοσελίδα σου φορτώνει αργά αποτελεί ο όγκος που καταλαμβάνει. Είναι αρκετά πιθανό το μεγαλύτερο κομμάτι της σελίδας να συγκροτείται από εικόνες. Σύμφωνα με την έρευνα του The HTTP Archive, οι εικόνες καταλαμβάνουν κατά μέσο όρο το 50-60% του όγκου μιας ιστοσελίδας. Γι’αυτό και πρέπει να μάθεις να τις ρυθμίζεις με τον πιο αποδοτικό τρόπο.
Με την βελτίστοποίηση των εικόνων, μειώνεις το μέγεθος των εικόνων στο μέγιστο δυνατό βαθμό. Όταν την κάνεις σωστά, οι φωτογραφίες σου θα δείχνουν τέλειες και το site σου θα φορτώνει γρήγορα.
Πάμε να δούμε λοιπόν τους πιο βασικούς τρόπους βελτιστοποίησης!
Επιλογή κατάλληλης μορφής εικόνας
Ένα από τα πιο σημαντικά βήματα που χρειάζεται να γνωρίζεις κατά τη διαχείριση μιας ιστοσελίδας είναι ο τύπος εικόνων που θα χρησιμοποιήσεις πριν τις ανεβάσεις στην WordPress ιστοσελίδα σου. Καθορίζεις την τελική μορφή από το περιεχόμενο που θα προβάλλει η εικόνα καθώς και τον ρόλο που θα συμβάλλει σε μελλοντικές τροποποιήσεις. Η κάθε μορφή αρχείου προυποθέτει διαφορετικές προκλήσεις. Ας ρίξουμε μια ματιά στις πιο σημαντικές μορφές εικόνων:
1. JPEG (Joint Photographic Experts Group): Ο πιο δημοφιλής τύπος φωτογραφίας στο διαδίκτυο. Οι JPEG φωτογραφίες χρησιμοποιούν συμπίεση με απώλειες, που σημαίνει ότι για τη μείωση του μεγέθους του αρχείου, χάνονται πληροφορίες.
2. PNG (Portable Network Graphics): Είναι ιδανικό για εικόνες χωρίς background. Εδώ υπάρχει συμπίεση χωρίς απώλειες, επομένως η ποιότητα της εικόνας παραμένει ίδια. Ωστόσο, αυτό οδηγεί σε εικόνες με μεγαλύτερο μέγεθος αρχείου.
3. GIF (Graphics Interchange Format): Γνωστό για την εφαρμογή του σε animated εικόνες. Λόγω της περιορισμένης ευρείας χρωμάτων που χρησιμοποιεί, η συμπίεση δεν δημιουργεί απώλειες.
4. WebP: Αποτελεί έναν νεότερο τύπο εικόνας, ο οποίος προσφέρει την επιλογή συμπίεσης με ή χωρίς απώλειες και δημιουργεί εικόνες με σημαντικά μικρότερο μέγεθος από εικόνες τύπου JPEG ή PNG.
Στις περισσότερες ιστοσελίδες, γίνεται ανάμειξη εικόνων JPEG και PNG, είτε μιλάμε για είκονες είτε για εικονογραφήσεις και γραφήματα. Με την εισαγωγή νεότερων τύπων εικόνας όπως WebP ή AVIF, εκτελείς αποδοτική διαχείριση εικόνων στο site σου και αποτρέπεις την εμφάνιση παρόμοιων ζητημάτων.
Συμπίεση εικόνων
Η συμπίεση είναι μια διαδικασία που ελλατώνει τον όγκο των εικόνων σου, αφαιρώντας οποιαδήποτε πληροφορία θεωρείται περιττή. Είναι από τους πιο εύκολους και προσβάσιμους τρόπους για να μειώσεις το μέγεθος των δεδομένων, συμβάλλωντας στην ταχύτητα της ιστοσελίδας σου. Υπάρχουν δύο τύποι συμπίεσης:
- Συμπίεση με απώλειες: Αυτή η μέθοδος αφαιρεί κάποια από τα δεδομένα της εικόνας, όμως μειώνει δραματικά το μέγεθος της. Ωστόσο, στις περισσότερες εικόνες ο επισκέπτης δεν θα παρατηρήσει τη διαφορά. Εικόνες τύπου JPEG και WebP είναι μερικές από τις γνωστές δομές εικόνων που ακολουθούν αυτήν την μέθοδο.
- Συμπίεση χωρίς απώλειες: Συμπίεση που δεν αφαιρεί δεδομένα από την εικόνα. Με αυτόν τον τρόπο η ποιότητα της εικόνας παραμένει ίδια όμως υπάρχει μικρότερη μείωση στο μέγεθός της. Ο τύπος PNG χρησιμοποιεί συμπίεση χωρίς απώλειες.
Η συμπίεση των εικόνων σου μπορεί να πραγματοποιηθεί με την χρήση διάφορων εργαλείων, όπως Imagify ή Squeeze, που αποτελούν plugins του WordPress. Με λίγα μόνο κλικ μέσα από το εύχρηστο περιβάλλον τους, έχεις στη διάθεση σου όλες τις λειτουργίες συμπίεσης για μια σωστή διαχείριση εικόνων. Εναλλακτικά, υπάρχουν επιλογές χειρωνακτικής συμπίεσης όπως το Sqoosh, όπου μπορείς να βλέπεις το μέγεθος της εικόνας κατά τη συμπίεση.
CDN (Content Delivery Network)
Στην ιστοσελίδα σου ένα μεγάλο ποσοστό των επισκεπτών συνδέεται από περιοχές μακριά του server που φιλοξενείται. Άρα είναι αναμένομενη η εμφάνιση ζητημάτων αδράνειας ή αργής φόρτωσης της σελίδας.
Σε τέτοιες περιπτώσεις, είναι συνετό να χρησιμοποιήσεις Content Delivery Network (CDN). Συγκεκριμένα, το CDN αποθηκεύει αντίγραφα των φωτογραφιών σου σε servers που έχουν τις εγκαταστάσεις τους σε διάφορες τοποθεσίες στον πλανήτη και δημιουργεί cache. Επομένως, όταν ένας επισκέπτης από την άλλη μεριά του πλανήτη θελήσει να εισέλθει στην ιστοσελίδα σου, λαμβάνει δεδομένα από τον πλησιέστερο server στην περιοχή του. Έτσι, η ταχύτητα των εικόνων που φορτώνουν ανεβαίνει ραγδαία.
Οι πιο ιδανικές υπηρεσίες CDN που μπορείς να χρησιμοποιήσεις είναι η Cloudflare και η KeyCDN.
Σε περίπτωση που χειρίζεσαι Litespeed, τότε το QUIC.cloud είναι το κατάλληλο CDN για τις ανάγκες τις ιστοσελίδας σου.
Εκκαθάριση βιβλιοθήκης εικόνων
Όσο η σελίδα σου μεγαλώνει, ο χώρος των εικόνων ανεβαίνει ανάλογα. Η ύπαρξη ογκώδη αριθμού εικόνων μπορεί να οδηγήσει σε ζητήματα ταχύτητας στην ιστοσελίδα καθώς και να δημιουργήσει δυσκολίες κατά τη διαχείριση των πολυμέσων. Επιπλέον, υπάρχει ένας μεγάλος αριθμός περιττών εικόνων που δεν χρησιμοποιείται πλέον στην ιστοσελίδα σου, όπως παραδείγματος χάρη από posts που έχουν διαγραφεί.
Παρατηρούμε λοιπόν ότι η σωστή διαχείριση του χώρου προυποθέτει την κατάλληλη διαχείριση της βιβλιοθήκης πολυμέσων. Υπάρχουν δύο βασικές μέθοδοι για να απελευθερώσεις χώρο μέσω της εκκαθάρισης των εικόνων: διαγραφή μέσω του WordPress και διαγραφή με την χρήση κάποιου plugin.
Η αφαίρεση εικόνων μέσω του WordPress μπορεί να γίνει με την είσοδο στο Dashboard. Στην κατηγορία Media, επιλέγεις τις εικόνες που δεν χρειάζεσαι. Τέλος, με το κουμπί Delete Permanently ολοκληρώνεις την διαγραφή τους.
Η διαδικασία της εκκαθάρισης πετυχαίνει γρηγορότερα με την χρήση ενός plugin. Το plugin πραγματοποιεί scan σε όλη την βιβλιοθήκη πολυμέσων και εντοπίζει αυτόματα τις μη χρησιμοποιημένες εικόνες. Στη συνέχεια όλες οι επιλεγόμενες εικόνες καταλήγουν σε αυτόματη διαγραφή. To πιο δημοφιλές plugin για αυτήν την ενέργεια είναι το Media Cleaner. Η χρήση του είναι δωρεάν, και με ένα κλικ αδειάζει όλες τις περιττές εικόνες από τη βιβλιοθήκη σου.
Και στις δύο περιπτώσεις θα ήταν συνετό πριν οποιαδήποτε διαγραφή να δημιουργήσεις ένα backup διότι είναι πιθανό να προκύψουν λάθη και να χαθεί σημαντικό περιεχόμενο.
Με την βελτιστοποίηση των εικόνων, καταφέρνεις με απλά βήματα να οργανώσεις τις εικόνες σου με τέτοιο τρόπο ώστε να καλυτερεύσει η απόδοση της ιστοσελίδας σου και οι επισκέπτες σου να έχουν μόνο θετικές εμπειρίες. Αυτό θα οδηγήσει στην ανάπτυξη του site σου και ακολούθως στην έλξη ακόμη περισσότερων επισκεπτών.
