Πώς να κάνετε τις εικόνες να φορτώνονται πιο γρήγορα στον ιστότοπό σας στο WordPress

04.06.2020
نکات و ترفندهای سرعت وردپرس 'Πώς να κάνετε τις εικόνες να φορτώνονται πιο γρήγορα στον ιστότοπό σας στο WordPress
0 50 мин.

Έτσι θέλετε οι εικόνες σας να φορτώνονται γρηγορότερα?


Λοιπόν, δεν θα κάνω dilly. Ας βουτήξουμε κατευθείαν στα καλά πράγματα!

Υπάρχουν τρεις τρόποι για την ταχύτερη φόρτωση των εικόνων στο WordPress:

  • Αλλαγή μεγέθους
  • Συμπιέζω
  • Οκνηρό φορτίο

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

Αυτή η πρώτη τεχνική είναι εξαιρετικά απλή αλλά συχνά παραβλέπεται από τους αρχάριους του WordPress.

Πώς να βελτιστοποιήσετε τις εικόνες στο WordPress

Αλλαγή μεγέθους των εικόνων σας

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

Τι αλλάζει το μέγεθος?

Όταν λέω “αλλαγή μεγέθους” εννοώ να αλλάξω τις διαστάσεις μιας εικόνας και σε αυτήν την περίπτωση, θέλετε να μειώσετε τις διαστάσεις των υπερβολικά μεγάλων εικόνων.

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

Το πλάτος της ενότητας ανάρτησης στον ιστότοπό σας πιθανώς δεν είναι μεγαλύτερο από 800 εικονοστοιχεία. Το κείμενο που διαβάζετε αυτήν τη στιγμή εκτείνεται μόνο περίπου 700 εικονοστοιχεία σε ολόκληρη τη σελίδα, οπότε φανταστείτε να προσθέσετε μια εικόνα πλάτους 5.000 εικονοστοιχείων εδώ. Θα ήταν πολύ μεγαλύτερο από ό, τι χρειάζεται και ενώ θα ήταν χαμηλότερη για να χωρέσει στη σελίδα, το αρχείο εικόνας που φορτώθηκε είναι ακόμα τεράστιο και εξαιρετικά σπατάλη. Και αυτό γιατί…

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

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

Ας επιστρέψουμε στο παράδειγμά μου και ας υποθέσουμε ότι η εικόνα έχει πλάτος 5.000 εικονοστοιχεία και ύψος. Εάν το μειώσατε από 5.000 εικονοστοιχεία σε μόλις 700 εικονοστοιχεία, η εικόνα θα χρησιμοποιούσε πραγματικά 99% λιγότερα εικονοστοιχεία. Με άλλα λόγια, το μέγεθος του αρχείου θα μειωνόταν κατά περίπου 99%. Εάν η εικόνα ήταν 5mb, θα κατέληγε μόλις 50kb και θα φορτώσει 99% πιο γρήγορα στον ιστότοπό σας.

Αλλαγή μεγέθους εικόνων

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

Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να αλλάξετε το μέγεθος των εικόνων σας ώστε να ταιριάζει απόλυτα στον ιστότοπο.

Αλλάξτε το μέγεθος των εικόνων σας με μη αυτόματο τρόπο

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

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

Ακόμα κι αν πρόκειται να χρησιμοποιήσετε την εικόνα σε lightbox ή ρυθμιστικό, συνήθως δεν υπάρχει λόγος να είναι ευρύτερη από 2.000 εικονοστοιχεία. Εάν η εικόνα πρόκειται να βρίσκεται σε μια περιοχή περιεχομένου ανάρτησης ή σελίδας, πιθανότατα μπορείτε να τα πάρετε καλά με την εικόνα να έχει πλάτος 800 εικονοστοιχεία.

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

Χρησιμοποιήστε μικρότερα μεγέθη

Όταν ανεβάζετε μια εικόνα στη βιβλιοθήκη πολυμέσων σας, το WordPress δημιουργεί έως και 3 επιπλέον εκδόσεις: Μικρογραφία, Μεσαίο και Μεγάλο.

Εάν επισκεφθείτε τη σελίδα ρυθμίσεων πολυμέσων, θα δείτε ότι μπορείτε να επιλέξετε αυτά τα μεγέθη εδώ:

Ρυθμίσεις πολυμέσων WordPress

Ενώ μπορείτε να τροποποιήσετε τις ρυθμίσεις, το προεπιλεγμένο μεγάλο μέγεθος είναι 1024 εικονοστοιχεία το οποίο είναι αρκετά μεγάλο για χρήση για αναρτήσεις χωρίς να είναι πολύ σπατάλη. Μπορείτε να χρησιμοποιήσετε αυτό το μέγεθος για όλες τις εικόνες που συμπεριλαμβάνετε στις αναρτήσεις σας.

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

Αλλαγή μεγέθους εικόνας WordPress

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

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

Αυτόματη αλλαγή μεγέθους με προσθήκη

Αντί να αλλάξετε το μέγεθος των εικόνων μόνοι σας, μπορείτε να αφήσετε μια προσθήκη να το κάνει αυτόματα για εσάς. Όταν πρόκειται για αυτόματη αλλαγή μεγέθους εικόνας, τίποτα δεν ξεπερνά το Optimole συνδέω.

Optimole Image Optimizer

Δεν λειτουργεί όπως θα περιμένατε.

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

Επιπλέον, δεν χρειάζεται να δώσετε στο Optimole ένα μέγεθος για χρήση στις εικόνες σας. Αντίθετα, παίρνει το μέγεθος της οθόνης του επισκέπτη και δημιουργεί μια βέλτιστη έκδοση κάθε εικόνας εν κινήσει. Αυτό σημαίνει ότι κάποιος σε κινητή συσκευή μπορεί να φορτώσει μια εικόνα 400px μιας εικόνας, ενώ ένας άλλος επισκέπτης σε φορητό υπολογιστή λαμβάνει μια έκδοση 700px της ίδιας εικόνας.

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

Αν θέλετε να μάθετε πώς να χρησιμοποιείτε το Optimole, μπορείτε να ακολουθήσετε το πλήρες βίντεο που θα βρείτε:

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

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

Συμπίεση των εικόνων σας

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

Υπάρχουν δύο τύποι συμπίεσης εικόνας.

Ο πρώτος τύπος συμπίεσης εικόνας ονομάζεται συμπίεση χωρίς απώλειες.

Συμπίεση χωρίς απώλειες

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

Δεδομένου ότι αυτά τα δεδομένα είναι συνήθως αρκετά περιορισμένα, η βελτιστοποίηση χωρίς απώλειες μπορεί να μειώσει μόνο το μέγεθος της εικόνας σας κατά 1-5%, αλλά πραγματικά δεν υπάρχει λόγος να μην τα χρησιμοποιήσετε, επειδή δεν επηρεάζεται η ποιότητα της εικόνας.

Τα πραγματικά κέρδη προέρχονται από απώλεια βελτιστοποίησης.

Απώλεια συμπίεσης

Όπως θα περίμενε κανείς, η απώλεια συμπίεσης βελτιστοποιεί την ίδια την εικόνα και οδηγεί σε υποβάθμιση της ποιότητας. Αλλά εδώ είναι το πράγμα …

Οι αλγόριθμοι συμπίεσης είναι τόσο καλοί αυτές τις μέρες που συχνά μπορείτε να μειώσετε το μέγεθος του αρχείου της εικόνας κατά 50-70% χωρίς καμία διακριτή διαφορά. Εάν δεν είστε επαγγελματίας φωτογράφος και δεν χρειάζεστε τις εικόνες σας να είναι απόλυτα ευκρινείς σε οθόνες 4k, δεν θα παρατηρήσετε καν την απώλεια ποιότητας.

Πώς να συμπιέσετε τις εικόνες σας

Μπορείτε να συμπιέσετε με μη αυτόματο τρόπο τις εικόνες σας με ένα εργαλείο όπως TinyPNG προτού τα ανεβάσετε ή χρησιμοποιήστε μια προσθήκη για να αυτοματοποιήσετε τα πράγματα.

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

shortpixel

Συνιστούσα το Optimole για αλλαγή μεγέθους εικόνας και συμπιέζει επίσης τις εικόνες πολύ αποτελεσματικά. Για άλλη μια φορά, δεν βελτιστοποιεί τα πρωτότυπα που είναι αποθηκευμένα στη βιβλιοθήκη πολυμέσων σας, αλλά συμπιέζει τα αντίγραφα που εξυπηρετεί στους επισκέπτες σας.

Μπορείτε να βρείτε μερικά ακόμη πρόσθετα βελτιστοποίησης εικόνας εδώ.

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

Εφαρμογή τεμπέλης φόρτωσης

Η αργή φόρτωση είναι ένας πολύ έξυπνος τρόπος για περαιτέρω βελτιστοποίηση των εικόνων σας.

Ας υποθέσουμε ότι έχετε μια ανάρτηση ιστολογίου με 12 εικόνες σε αυτήν. Όταν κάποιος επισκέπτεται τον ιστότοπό σας, δεν θα είναι ορατές όλες αυτές οι εικόνες αμέσως στην οθόνη του. Θα πρέπει να μετακινηθούν προς τα κάτω για να εμφανιστούν οι περισσότεροι. Γιατί λοιπόν να φορτώσετε και τα 12 αμέσως?

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

Αυτό το βίντεο έχει οπτικοποίηση που το εξηγεί καλύτερα αν θέλετε μια σαφέστερη εικόνα για το πώς λειτουργεί η τεμπέλης φόρτωση:

Τώρα που πουλάτε στην ιδέα, δείτε πώς μπορείτε να εφαρμόσετε τεμπέλης φόρτωση στον ιστότοπό σας.

Τρόπος χρήσης τεμπέλης φόρτωσης

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

Αν ψάχνετε για μια δωρεάν επιλογή, δοκιμάστε το Optimole ή a3 Lazy Load.

Με το Optimole, η τεμπέλης φόρτωση ενεργοποιείται αυτόματα και το πρόσθετο a3 είναι εύκολο να διαμορφωθεί.

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

Για να ενεργοποιήσετε την αργή φόρτωση με το WP Rocket, το μόνο που έχετε να κάνετε είναι να γυρίσετε αυτόν τον διακόπτη:

WP Rocket Media

Δεν θα μπορούσε να είναι ευκολότερο!

Απολαύστε τις γρηγορότερες εικόνες φόρτωσης

Για να συνοψίσουμε ό, τι μόλις μάθατε…

Οι υπερμεγέθης εικόνες που ανεβάζετε στον ιστότοπό σας είναι εξαιρετικά αργές. Μόνο μία από αυτές τις εικόνες μπορεί να σταματήσει τον ιστότοπό σας.

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

Στη συνέχεια, οι αλγόριθμοι συμπίεσης εικόνας έχουν προχωρήσει πολύ και αυτές τις μέρες, μπορείτε να μειώσετε το μέγεθος του αρχείου μιας εικόνας κατά 50-70% χωρίς να επηρεάσετε την ποιότητα με αξιοσημείωτο τρόπο. Αυτό δεν είναι μυαλό. Χρησιμοποιήστε το ShortPixel ή το Optimole για να συμπιέσετε κάθε εικόνα στον ιστότοπό σας.

Τέλος, η αργή φόρτωση είναι ένας πολύ καλός τρόπος για να φορτώσετε επιλεκτικά εικόνες. Μπορείτε να χρησιμοποιήσετε το Optimole, a3 Lazy Load ή WP Rocket για να εφαρμόσετε άμεσα την τεμπέλης φόρτωση στον ιστότοπό σας.

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

Έχετε απορίες σχετικά με τις έννοιες και τις τεχνικές σε αυτήν την ανάρτηση; Έχετε άλλη συμβουλή για κοινή χρήση; Δημοσίευση στην παρακάτω ενότητα σχολίων!

μπορεί να σου αρέσει επίσης,

Πώς να διορθώσετε έναν αργό ιστότοπο WordPress και έναν πίνακα διαχείρισης (Μόνιμα)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector