Ένας από τους παράγοντες που μπορεί να επιβραδύνει τον ιστότοπό σας είναι η χρήση μεγάλων φωτογραφιών που δεν είναι βελτιστοποιημένες για τον ιστό.
Μερικές φορές, όταν οι άνθρωποι προσπαθούν να δημοσιεύσουν κάτι γρήγορα, ανεβάζουν φωτογραφίες απευθείας από τις φωτογραφικές μηχανές τους, σε πολύ υψηλή ανάλυση, εικόνες που ζυγίζουν έως και 4-5 MB.
Μια βελτιστοποιημένη εικόνα έχει λιγότερα kilobyte χωρίς ορατή απώλεια ποιότητας και θα πρέπει πάντα να βελτιστοποιείτε τις εικόνες χωρίς απώλεια ποιότητας πριν ή κατά τη μεταφόρτωσή τους στον ιστότοπό σας.
Ανεξάρτητα από το αν ο ιστότοπός σας είναι WordPress ή άλλη πλατφόρμα, μπορείτε να βελτιστοποιήσετε τις εικόνες για τον ιστό και να κάνετε τον ιστότοπό σας να φορτώνει πιο γρήγορα.
Ένα πλεονέκτημα της χρήσης του WordPress είναι ότι έχετε προσθήκες που μπορούν να βελτιστοποιήσουν τις εικόνες καθώς τις ανεβάζετε στον ιστότοπό σας και επίσης να βελτιστοποιούν μαζικά τις υπάρχουσες εικόνες.
Λοιπόν, ποιες είναι οι βέλτιστες πρακτικές σχετικά με τις φωτογραφίες;
Μην χάνετε ποιότητα
Ακολουθήστε τους στόχους του ιστότοπού σας. Μην βελτιστοποιείτε τυφλά μόνο και μόνο επειδή κάποιο εργαλείο σας έδωσε κακή βαθμολογία. Τα εργαλεία δεν γνωρίζουν τους στόχους του ιστότοπού σας.
Αν είχα ένα blog μόδας ή ένα κατάστημα, θα έδειχνα όμορφες εικόνες. Δεν με νοιάζει τι με βαθμολόγησε το YSlow ή το Pagespeed Insights.
Μην κολλάτε σε βαθμούς και βαθμολογίες, κάντε ό,τι καλύτερο για εσάς και τους επισκέπτες σας. Είναι καλύτερο να ξοδεύετε περισσότερα στο CDN για να προβάλλετε μεγαλύτερες, καλύτερες εικόνες, παρά να βελτιστοποιείτε υπερβολικά τις εικόνες και να έχετε έναν άσχημο ιστότοπο.
Μπορεί να σας κοστίσει επισκέπτες και χρήματα.
Μην ανεβάζετε εικόνες μεγαλύτερες από αυτές που χρειάζεστε
Εάν το πλάτος του περιεχομένου σας είναι 620 εικονοστοιχεία, τότε θα πρέπει να αλλάξετε το μέγεθος των εικόνων σας σε πλάτος 620 εικονοστοιχείων πριν τις ανεβάσετε στον ιστότοπό σας.
Εάν θέλετε οι επισκέπτες να βλέπουν μια μεγαλύτερη εικόνα όταν κάνουν κλικ σε αυτήν, τότε μπορείτε να χρησιμοποιήσετε ένα πλάτος 1024 px. Ορίστε μια από τις μικρογραφίες του WordPress σε πλάτος 620 pixel και χρησιμοποιήστε αυτήν τη μικρογραφία στη σελίδα σας και συνδέστε τη με τη μεγαλύτερη εικόνα.
Πιθανότατα δεν χρειάζεστε εικόνες υψηλότερες από 1024 px (αυτό θα πρέπει να είναι αρκετό για τα περισσότερα ιστολόγια), αλλά τι γίνεται αν το κάνετε;
Σε αυτήν την περίπτωση, μπορείτε να εξετάσετε το ενδεχόμενο να ανεβάσετε εικόνες σε μεγαλύτερη ανάλυση και να χρησιμοποιήσετε ένα CDN.
Θα μάθουμε περισσότερες λεπτομέρειες σχετικά με το CDN σε ένα λεπτό.
Βελτιστοποιήστε τις εικόνες πριν ανεβάσετε
Μπορείτε να βελτιστοποιήσετε τις εικόνες σας στον υπολογιστή σας με το Photoshop. Μερικοί άνθρωποι συνιστούν να κάνετε την εικόνα σας λίγο πιο ευκρινή με Smart Sharpen, Unsharp Mask, High Pass Filter ή οποιοδήποτε εργαλείο θέλετε. Το Photoshop έχει πολλές επιλογές.
Δεν έχω δει μεγάλη διαφορά (σε KB) μετά την ευκρίνεια, αλλά δεν είμαι κύριος του Photoshop.
Αλλάξτε το μέγεθος της φωτογραφίας στην ανάλυση που χρειάζεστε στον ιστότοπό σας, χρησιμοποιήστε την Αποθήκευση για τον Ιστό, επιλέξτε JPG, Ποιότητα μεταξύ 60-80%, επιλέξτε Προοδευτική και μετά Αποθήκευση.
Σας συνιστώ να χρησιμοποιείτε JPG εκτός εάν χρειάζεστε διαφάνεια και χρειάζεται να χρησιμοποιήσετε PNG.
Εάν δεν έχετε Photoshop, μπορείτε να χρησιμοποιήσετε αυτά τα εργαλεία για βελτιστοποίηση:
- Riot (Windows)
- Imageoptim (Mac)
- Jpegmini (διαδικτυακό, Mac & Windows)
- Kraken (διαδικτυακός)
- Compressor.io (διαδικτυακό)
Εγώ ο ίδιος χρησιμοποιώ το Jpegmini. Μπορώ ακόμα να ξυρίσω άλλο 5-10% ακόμα και μετά τη βελτιστοποίηση με το Photoshop πρώτα.
Ή βελτιστοποιήστε κατά τη μεταφόρτωση
Δεν πιστεύω ότι υπάρχει ένας τρόπος που είναι ο καλύτερος τρόπος για τη βελτιστοποίηση των εικόνων. Εάν δεν θέλετε να αφιερώσετε χρόνο για να βελτιστοποιήσετε τις φωτογραφίες σας στον υπολογιστή σας πριν τις ανεβάσετε, μπορείτε να επιλέξετε να αφήσετε μια προσθήκη WordPress να κάνει όλη τη δουλειά για σένα.
Υπάρχουν πολλά πρόσθετα WordPress που μπορείτε να χρησιμοποιήσετε:
- WP Smush – Βελτιστοποίηση εικόνας
- ShortPixel Image Optimizer
- Kraken.io Image Optimizer
- Optimus- WordPress Image Optimizer
- EWWW Image Optimizer Cloud
- Imagify Image Optimizer
Με αυτά τα πρόσθετα, μπορείτε να βελτιστοποιήσετε τις εικόνες κατά τη μεταφόρτωση, αλλά και να βελτιστοποιήσετε αυτές που έχετε ήδη ανεβάσει.
Δεν τα έχω χρησιμοποιήσει όλα, μόνο τα WP Smush και ShortPixel, και βρήκα το ShortPixel εξαιρετικό. Μπορεί να ξυρίσει μερικά KB ακόμα και για εικόνες που είχαν βελτιστοποιηθεί προηγουμένως με Photoshop και Jpegmini.
Ένα άλλο χρήσιμο πρόσθετο είναι το Imsanity .
Εάν έχετε έναν ιστότοπο με πολλούς συγγραφείς, τότε πρέπει να ελέγχετε ποιες εικόνες ανεβάζουν οι χρήστες. Ορίστε ένα μέγιστο πλάτος, ύψος και ποιότητα. Όταν ένας χρήστης ανεβάζει μια εικόνα που είναι μεγαλύτερη, η προσθήκη θα τη μειώσει αυτόματα στο διαμορφωμένο μέγεθος.
Το WP Smush Pro το κάνει επίσης.
Εμφάνιση εικόνων
Τώρα που έχετε βελτιστοποιημένες εικόνες, μπορείτε επίσης να βελτιώσετε τον τρόπο που παρουσιάζετε αυτές τις εικόνες στον ιστότοπό σας.
Εάν έχετε πολλές φωτογραφίες σε μια σελίδα, όπως σε ένα blog μόδας, για παράδειγμα, μπορείτε να επωφεληθείτε από το lazy loading.
Αυτό σημαίνει ότι οι εικόνες σας θα φορτωθούν μόνο όταν είναι ορατές, καθώς ο επισκέπτης κάνει κύλιση προς τα κάτω.
Μπορείτε να χρησιμοποιήσετε ένα από τα παρακάτω πρόσθετα WordPress για αυτό:
Δεν μπορώ να σας πω ποιο πρόσθετο είναι καλύτερο. Πρέπει να κάνετε δοκιμή γιατί ενδέχεται να υπάρχουν ασυμβατότητες με το θέμα σας. Για παράδειγμα, η αργή φόρτωση δεν λειτουργεί για επιλεγμένες εικόνες εάν έχετε θέμα Genesis Framework.
Επίσης, καθώς δοκίμαζα το lazy loading, μου φαινόταν περίεργο στο κινητό. Υπήρχαν κενά κενά στα οποία θα έπρεπε να βρίσκονται οι φωτογραφίες επειδή οι εικόνες δεν φορτώνονταν τόσο γρήγορα όσο στην προβολή επιφάνειας εργασίας.
Ένα άλλο πράγμα που μπορείτε να κάνετε για να επιταχύνετε το χρόνο φόρτωσης είναι να προβάλλετε εικόνες από έναν υποτομέα, όπως το images.domain.com.
Πρέπει να δημιουργήσετε έναν υποτομέα από το cPanel ή οποιονδήποτε πίνακα ελέγχου προσφέρει η εταιρεία φιλοξενίας σας και, στη συνέχεια, να ρυθμίσετε το WordPress ώστε να φορτώνει πολυμέσα από αυτόν τον υποτομέα χρησιμοποιώντας την WP Original Media Path .
Μπορώ να γράψω μια λεπτομερή ανάρτηση ιστολογίου για άτομα που θέλουν να το κάνουν (αν το ζητήσει κάποιος), αλλά η σύστασή μου είναι να χρησιμοποιήσετε ένα CDN. Είναι μια πολύ πιο απλή λύση.
Χρησιμοποιήστε ένα CDN
Το Cloudflare είναι εξαιρετικά εύκολο και δωρεάν. Απλώς αλλάζετε τους διακομιστές ονομάτων τομέα σας σε Cloudflare και ενεργοποιείτε (ελέγξτε το πορτοκαλί σύννεφο για καταχωρίσεις DNS) και αυτό είναι όλο. Τα στατικά σας αρχεία (εικόνες, CSS, JS) θα φορτωθούν από το CDN του Cloudflare.
Υπάρχουν άλλες εταιρείες CDN που μπορείτε να χρησιμοποιήσετε, οι οποίες αναφέρονται παρακάτω. Αλλά νομίζω ότι το Cloudflare είναι το πιο εύκολο στην εφαρμογή:
Καθαρίστε τον εαυτό σας
Κάθε φορά που αλλάζετε θέματα, αφήνετε πίσω σας ένα ίχνος αχρησιμοποίητων μικρογραφιών και εγγραφών βάσης δεδομένων που σχετίζονται με αυτές τις εικόνες.
Όταν αλλάζετε θέματα, μπορείτε να χρησιμοποιήσετε την AJAX Thumbnail Rebuild για να δημιουργήσετε ξανά μικρογραφίες ώστε να ταιριάζουν στο νέο σας θέμα.
Οι παλιές μικρογραφίες μπορούν να διαγραφούν από τον διακομιστή χρησιμοποιώντας μία από τις ακόλουθες προσθήκες:
Προτείνω το Thumbnail Cleaner γιατί είναι γρήγορο. Αλλά αφαιρεί όλες τις μικρογραφίες σας, όχι μόνο τις αχρησιμοποίητες. Αφού διαγραφεί, πρέπει να χρησιμοποιήσετε την AJAX Thumbnail Rebuild για να δημιουργήσετε ξανά τις μικρογραφίες που χρειάζεστε.
Οι μικρογραφίες που δεν χρησιμοποιούνται δεν επηρεάζουν την απόδοση του ιστότοπού σας. Απλώς καταλαμβάνουν χώρο στον διακομιστή σας. Ωστόσο, υπάρχουν καταχωρήσεις βάσης δεδομένων που σχετίζονται με αυτές τις μικρογραφίες και είναι καλή πρακτική να διατηρείτε τη βάση δεδομένων σας όσο το δυνατόν πιο καθαρή.
Αυτό θα κάνουμε στο επόμενο βήμα – εκκαθάριση της βάσης δεδομένων του WordPress.
Αφήστε μια