Πώς να βελτιστοποιήσετε τις εικόνες στο WordPress (και για τα δύο Speed ​​+ SEO)

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


Υπάρχουν πραγματικά 20 διαφορετικοί τρόποι βελτιστοποίησης εικόνων (εάν συμπεριλαμβάνετε SEO και βελτιστοποίηση ταχύτητας). Αυτά θα σας δώσουν καλύτερες βαθμολογίες στο GTmetrix / Pingdom, πιθανώς θα σας κατατάξουν υψηλότερα στην αναζήτηση και θα κάνουν το περιεχόμενό σας να φορτώνει πολύ πιο γρήγορα. Κατάφερα να λάβω μια αναφορά GTmetrix 100% με χρόνους φόρτωσης .5s… η βελτιστοποίηση των εικόνων μου στο WordPress ήταν μεγάλο μέρος της.

Βελτιστοποιήστε τις εικόνες ΠΡΙΝ φορτώσετε – η χρήση ενός προγράμματος όπως το Photoshop για τη βελτιστοποίηση των εικόνων προτού τις ανεβάσετε μπορεί να εξοικονομήσει πολλή δουλειά. Μπορείτε να αλλάξετε το μέγεθος, να συμπιέσετε, να αφαιρέσετε δεδομένα EXIF, να αποθηκεύσετε σε σωστή μορφή (π.χ. PNG / JPEG) και να γράψετε ένα περιγραφικό όνομα αρχείου (το οποίο θα χρησιμοποιηθεί αυτόματα ως εναλλακτικό κείμενο εάν χρησιμοποιείτε το Αυτόματη προσθήκη χαρακτηριστικών Alt Image). Αυτές είναι 6 βελτιστοποιήσεις!

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

Κύρια εργαλεία που χρησιμοποιώ – Χρησιμοποιώ ΣΕΙΡΗΤΙ για αλλαγή μεγέθους / συμπίεση εικόνων (το πρόγραμμα επεξεργασίας εικόνων της επιλογής μου), Πύραυλος WP για την προσθήκη cache, Φανταστείτε για περαιτέρω συμπίεση χωρίς απώλεια + αφαίρεση δεδομένων EXIF, και τα δύο Cloudflare και StackPath CDN, Αυτόματη προσθήκη χαρακτηριστικών εικόνας ALT για να χρησιμοποιήσετε αυτόματα το όνομα του αρχείου εικόνας ως κείμενο alt, και Βέλτιστη προσωρινή μνήμη Gravatar να αποθηκεύσετε προσωρινά τα Gravatars στα σχόλια. χρησιμοποιώ WP Review Pro ως προσθήκη των πλούσιων αποσπασμάτων μου, Καλύτερη Αντικατάσταση Αναζήτησης για μαζική ενημέρωση εικόνων (πολύ βολικό) και GTmetrix ως εργαλείο δοκιμής ταχύτητας. Δείτε την πλήρη λίστα εργαλείων.

Contents

1. Βρείτε μη βελτιστοποιημένες εικόνες

Εκτελέστε τον ιστότοπό σας GTmetrix και θα δείτε αυτά τα στοιχεία στις καρτέλες Ταχύτητα σελίδας / YSlow. Τα πρώτα πέντε είναι συνήθως ειδικά για τη σελίδα, που σημαίνει ότι το GTmetrix θα εμφανίζει μόνο τις μη βελτιστοποιημένες εικόνες για τη σελίδα που δοκιμάζετε. Τα τελευταία 3 συνήθως εμφανίζονται σε ολόκληρο τον ιστότοπό σας. Φυσικά, αυτοί είναι μόνο 7 τρόποι βελτιστοποίησης εικόνων, αλλά μερικοί από τους πιο σημαντικούς, οπότε θα τα κάνουμε πρώτα.

  • Προβάλετε κλιμακωτές εικόνες: αλλαγή μεγέθους μεγάλων εικόνων για διόρθωση διαστάσεων (βήμα 2)
  • Καθορίστε τις διαστάσεις της εικόνας: καθορίστε ένα πλάτος / ύψος στο HTML ή CSS της εικόνας (βήμα 3)
  • Βελτιστοποίηση εικόνων – συμπίεση χωρίς απώλειες εικόνων (βήμα 4)
  • Συνδυάζοντας εικόνες χρησιμοποιώντας CSS sprites – συνδυάστε πολλές εικόνες σε 1 εικόνα (βήμα 5)
  • Αποφύγετε ανακατευθύνσεις URL – μην προβάλλετε εικόνες από λανθασμένη έκδοση www ή http (s) (βήμα 6)
  • Χρησιμοποιήστε ένα δίκτυο παράδοσης περιεχομένου – προβολή εικόνων / αρχείων από CDN (βήμα 7)
  • Αξιοποιήστε την προσωρινή αποθήκευση του προγράμματος περιήγησης – εικόνες / αρχεία προσωρινής μνήμης χρησιμοποιώντας την προσθήκη cache (βήμα 8)
  • Κάντε το favicon μικρό και προσωρινά αποθηκευμένο – χρησιμοποιήστε ένα favicon 16x16px και αποθηκεύστε το cache (βήμα 9)

Βελτιστοποιήσεις εικόνας στο GTmetrix

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

2. Προβολή κλιμακοποιημένων εικόνων

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

Σερβίρετε-Κλίμακα-Εικόνες

Μαζική αλλαγή μεγέθους εικόνων χρησιμοποιώντας ένα πρόσθετο – το πρόβλημα με αυτό, είναι ότι διαφορετικές εικόνες απαιτούν διαφορετικές διαστάσεις (widget, ρυθμιστικά, εικόνες πλήρους πλάτους). Ενώ τα περισσότερα πρόσθετα βελτιστοποίησης εικόνας έχουν την επιλογή να αλλάξουν το μέγεθος των εικόνων σε μία μονόκλινο συγκεκριμένο σύνολο διαστάσεων, θα πρέπει πραγματικά να περικόψετε / αλλάξετε το μέγεθος πριν ανεβάσετε. Εάν αλλάξετε το μέγεθος των εικόνων χρησιμοποιώντας μια προσθήκη, διατηρείτε αντίγραφα ασφαλείας των αρχικών εικόνων (και δοκιμάστε μόνο μερικές) σε περίπτωση που δεν είστε ικανοποιημένοι με τα αποτελέσματα.

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

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

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

Παράδειγμα:

  • Εικόνες ολισθητήρα: 1900 (w) x 400 (h)
  • Εικόνες καρουζέλ: 115 (h)
  • Εικόνες widget: 414 (w)
  • Εικόνες ανάρτησης ιστολογίου πλήρους πλάτους: 680 (w)
  • Προτεινόμενες εικόνες: 250 (w) x 250 (h)
  • Yoast Facebook OG εικόνα: 1200 (w) x 628 (h) – βήμα 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – βήμα 11

Ορθογώνιο πλάτους 680 pixel

3. Καθορίστε τις διαστάσεις εικόνας

Αυτό σημαίνει την προσθήκη πλάτους / ύψους στο HTML ή CSS της εικόνας. Ο Visual Editor το κάνει αυτό για εσάς (αλλά widgets, ορισμένοι δημιουργοί σελίδων και προσαρμοσμένο HTML μην). Δοκιμάστε μερικές σελίδες στο GTmetrix.

Το GTmetrix σας λέει τις διαστάσεις της εικόνας…

Ειδικές διαστάσεις εικόνας GTmetrix

Προσθέστε το πλάτος / ύψος στο HTML της εικόνας…

Καθορίστε τις διαστάσεις εικόνας

4. Συμπίεση Losslessly εικόνων

Αυτά είναι στοιχεία “βελτιστοποίησης εικόνων” στο GTmetrix. Πολλά προγράμματα (π.χ. Photoshop και Gimp) έχουν τη δυνατότητα συμπίεσης κατά την εξαγωγή. Αν και αυτό είναι μια καλή αρχή, τα πρόσθετα συμπίεσης εικόνας συνήθως έχουν ακόμη καλύτερα αποτελέσματα. προτιμώ Φανταστείτε, Κράκεν, ShortPixel, ή Σμίσε. Άλλες προσθήκες είναι γνωστό ότι μειώνουν οπτικά την ποιότητα της εικόνας και ενδέχεται να προκαλέσουν σφάλματα στις εικόνες σας.

Συμπίεση εικόνων με Imagify

  1. Εγγραφείτε Φανταστείτε
  2. Εγκαταστήστε το Προσθέστε το Imagify
  3. Θα σας ζητηθεί με τις παρακάτω οδηγίες:
  4. Εισαγάγετε το κλειδί API από τον λογαριασμό σας στο Imagify
  5. Ορίστε το επίπεδο συμπίεσης (κανονικό, επιθετικό, εξαιρετικά)
  6. Το Imagif’em all (φωτογραφία παρακάτω) μαζικά βελτιστοποιεί όλες τις εικόνες στον ιστότοπό σας
  7. Μόλις φτάσετε το όριό σας, πληρώστε 4,99 $ ή περιμένετε τον επόμενο μήνα για να επαναφέρετε το όριό σας

φανταστείτε

Δοκιμάστε πώς φαίνονται οι εικόνες με διαφορετικά επίπεδα συμπίεσης…

Σύγκριση συμπίεσης φαντασίας

Μόλις εγγραφείτε, βελτιστοποιήστε μαζικά όλες τις εικόνες στον ιστότοπό σας…

φανταστείτε-wordpress-image-βελτιστοποίηση

Ορίστε την επιλογή βελτιστοποίησης εικόνων κατά τη μεταφόρτωση…

Imagify Βελτιστοποίηση εικόνων κατά τη μεταφόρτωση

5. Συνδυάστε εικόνες σε CSS Sprites

Στην αρχική μου σελίδα, μπορεί να πιστεύετε ότι βλέπετε 21 εικονίδια, αλλά στην πραγματικότητα είναι 1 μεμονωμένη εικόνα. Αυτό είναι ένα CSS sprite, όπου συνδυάζετε πολλές εικόνες σε μία μόνο εικόνα. Αυτό μειώνει τον αριθμό των εικόνων (και των αιτημάτων) και αυτός είναι ο λόγος που η αρχική μου σελίδα έχει μόνο 10 αιτήματα. Αντί να φορτώνει 21 εικόνες, φορτώνει 1. Θα χρειαστείτε γνώσεις CSS για να το κάνετε αυτό ή να χρησιμοποιήσετε ένα Γεννήτρια CSS sprite.

CSS Sprites

GTmetrix CSS Sprites

Χρησιμοποιείτε μόνο CSS Sprites για διακοσμητικές εικόνες – χάνετε πολλές ετικέτες alt εικόνας όταν συνδυάζετε 21 εικόνες σε 1. ΜΗΝ συνδυάζετε σημαντικές εικόνες σε sprites CSS εάν περιγράφουν το περιεχόμενό σας. Όσο για μένα, η ταχύτητα της αρχικής μου σελίδας είναι πιο σημαντική από το SEO… Χρησιμοποιώ την αναφορά GTmetrix της αρχικής μου σελίδας σε πολλά μέρη (οπότε πρέπει να τη διατηρώ καθαρή) και η αρχική μου σελίδα, είτε το πιστεύω είτε όχι, δεν στοχεύει λέξη-κλειδί. Σκοπός μου είναι να περιγράψω τα σεμινάριά μου… και να φορτώσω γρήγορα.

6. Αποφύγετε τις ανακατευθύνσεις URL εικόνας

Εάν αλλάξατε σε HTTPS, εκδόσεις www ή ξεκινήσατε την προβολή εικόνων από CDN, θα πρέπει να ενημερώσετε μαζικά όλες τις εικόνες (και τους συνδέσμους) χρησιμοποιώντας Καλύτερη Αντικατάσταση Αναζήτησης οπότε εξυπηρετούν τη σωστή έκδοση. Διαφορετικά μπορεί να δείτε ελαχιστοποιήστε τις ανακατευθύνσεις ή χρησιμοποιήστε τομείς χωρίς cookie Σφάλματα.

Ελαχιστοποίηση ανακατευθύνσεων

Τομείς χωρίς cookie

Χρησιμοποιήστε την προσθήκη Better Search Replace για μαζική ενημέρωση διευθύνσεων URL εικόνας…

Καλύτερη αναζήτηση Αντικαταστήστε τις εκδόσεις WWW

Καλύτερη αναζήτηση Αντικαταστήστε HTTP έναντι HTTPS

7. Προβολή εικόνων από CDN

Αυτό απαιτεί την αλλαγή διευθύνσεων URL εικόνας για να συμπεριληφθούν οι δικές σας Διεύθυνση URL CDN

  • Διεύθυνση URL παλαιάς εικόνας (χωρίς CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Νέα διεύθυνση URL εικόνας (με CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare εναντίον StackPath – Χρησιμοποιώ και τα δύο Cloudflare και StackPath καθώς περισσότερα κέντρα δεδομένων = ταχύτερη παράδοση περιεχομένου. Το Cloudflare έχει 200+ κέντρα δεδομένων, Το StackPath έχει 34+ κέντρα δεδομένων που βρίσκονται σε μεγάλο βαθμό στις Ηνωμένες Πολιτείες (από όπου προέρχονται οι περισσότεροι επισκέπτες μου). Το Cloudflare δεν σας εκχωρεί μια διεύθυνση URL CDN οπότε θα χρησιμοποιήσουμε το CDN του StackPath για την προβολή εικόνων.

StackPath-Data-Centres

Βήμα 1: Επιλέξτε ένα CDN. χρησιμοποιώ StackPath (έχουν μια δοκιμή 30 ημερών).

Βήμα 2: Στον πίνακα ελέγχου, κάντε κλικ στην καρτέλα CDN και μετά δημιουργήστε έναν ιστότοπο StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Βήμα 3: Αντιγράψτε τη διεύθυνση URL του CDN και επικολλήστε την στην προσθήκη cache (παρακάτω είναι για το WP Rocket)…

WP-Rocket-CDN

Βήμα 4: Αντικαταστήστε τις διευθύνσεις URL εικόνας για να συμπεριλάβετε τη διεύθυνση URL του CDN σας (χρησιμοποιώντας Καλύτερη Αντικατάσταση Αναζήτησης).

Καλύτερη αναζήτηση Αντικαταστήστε τη διεύθυνση URL του CDN

Βήμα 5: Ελέγξτε για παλιές διευθύνσεις URL εικόνας χρησιμοποιώντας Chrome DevTools. Μερικές φορές, η προσθήκη cache ή Ενεργοποιητής CDN το φροντίζει, εκτός από συνδέσμους σε CSS και JavaScript που είναι σκληρά κωδικοποιημένοι. Για τους συνδέσμους που μένουν πίσω, συνήθως βρίσκονται αρχεία (όπως CSS ή Javascript) που χρειάζονται χειροκίνητο έλεγχο και αντικατάσταση. Το Chrome DevTools σας δείχνει όλους τους τομείς που χρησιμοποιούνται αυτήν τη στιγμή.

Βήμα 6: Εκτελέστε τον ιστότοπό σας στο GTmetrix και το “δίκτυο παράδοσης περιεχομένου” πρέπει να είναι πράσινο στο YSlow. Δεν θα πρέπει να έχετε κανένα σφάλμα στην “ελαχιστοποίηση ανακατευθύνσεων” ή στη “χρήση τομέων χωρίς cookie”.

CDN GTmetrix YSlow

8. Εικόνες Cache

Οι περισσότερες προσθήκες cache έχουν την επιλογή για προσωρινή αποθήκευση προγράμματος περιήγησης, που αποθηκεύει κρυφές εικόνες. Χρησιμοποιώ το WP Rocket που είχε βαθμολογηθεί με το # 1 cache plugin σε πολλές δημοσκοπήσεις στο Facebook και έχω εκπαιδευτικό για αυτό. Ταχεία απόδοση γενικά κατατάσσεται στην # 1 δωρεάν προσθήκη προσωρινής μνήμης (έχω και ένα σεμινάριο για αυτό).

Προσωρινή αποθήκευση προγράμματος περιήγησης

9. Κάντε το Favicon μικρό και προσωρινά αποθηκευμένο

Βεβαιωθείτε ότι το favicon σας είναι 16x16px, έχει μορφή favicon.ico και ότι αποθηκεύεται προσωρινά στην προσωρινή μνήμη.

10. Καταργήστε τα δεδομένα EXIF

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

Τα περισσότερα πρόσθετα βελτιστοποίησης εικόνας (συμπεριλαμβανομένων των Imagify, ShortPixel, Kraken, EWWW και Smush) έχουν την επιλογή να καταργούν αυτόματα τα δεδομένα EXIF. Εδώ είναι οι ρυθμίσεις για το Imagify…

Φανταστείτε Κατάργηση δεδομένων EXIF

11. Βελτιστοποίηση εικόνας Cloudflare

Το Cloudflare έχει επίσης μερικούς τρόπους βελτιστοποίησης εικόνων. Mirage και Polish βρίσκονται στο δικό σας Ρυθμίσεις ταχύτητας Cloudflare ενώ το Hotlink Protection βρίσκεται στο δικό σας Ρυθμίσεις Scrape Shield.

Cloudflare Mirage (Pro Feature) – μειώνει τα αιτήματα εικόνας, χαλαρά φορτώνει εικόνες και βελτιώνει τους χρόνους φόρτωσης εικόνας σε κινητές συσκευές με αργές συνδέσεις δικτύου. Εδώ είναι περισσότερες λεπτομέρειες…

  • Αλλάζει το μέγεθος των εικόνων με βάση τη συσκευή / τη σύνδεση ενός επισκέπτη. Ένας επισκέπτης με κακή σύνδεση θα πάρει μια μικρότερη έκδοση (χαμηλότερη ανάλυση) μέχρι να επιστρέψει σε υψηλότερο εύρος ζώνης.
  • Μειώνει τον αριθμό των αιτημάτων – αντί να στέλνει πολλαπλά αιτήματα για όλες τις εικόνες στον ιστότοπο, το Mirage το συγκεντρώνει σε ένα αίτημα, ώστε οι επισκέπτες να μπορούν να δουν εικόνες αμέσως.
  • Το Lazy φορτώνει εικόνες (τις φορτώνει μόνο όταν οι χρήστες κάνουν κύλιση προς τα κάτω και βλέπουν πραγματικά την εικόνα).

Cloudflare Image Mirage

Cloudflare Πολωνικά (Pro Feature) – αφαιρεί τα δεδομένα EXIF ​​και συμπιέζει τις εικόνες.

Cloudflare Εικόνα Πολωνικά

Cloudflare Hotlink Protection – εμποδίζει τους χρήστες να αντιγράψουν τις εικόνες σας και να τις επικολλήσουν στον δικό τους ιστότοπο, ο οποίος (δεδομένου ότι εξακολουθείτε να φιλοξενείτε αυτήν την εικόνα) θα απορροφήσει το εύρος ζώνης σας.

Cloudflare Hotlink Protection

12. Εικόνες Lazy Load

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

Μπορείτε να χρησιμοποιήσετε το Πρόσθετο Lazy Load, Προσθήκη Lazy Load For Videos, ή χρησιμοποιήστε το WP Rocket…

WP-Rocket-Lazy-Load

13. Αποθήκευση ως σωστή μορφή

PNG εναντίον JPEG – Το PNG δεν είναι συμπιεσμένο (μεγαλύτερο μέγεθος αρχείου) και πρέπει να χρησιμοποιείται σε απλές εικόνες χωρίς πολλά χρώματα. Το JPEG είναι ένα συμπιεσμένο (μικρότερο μέγεθος αρχείου) που μειώνει ελαφρώς την ποιότητα της εικόνας αλλά είναι μικρότερο σε μέγεθος και χρησιμοποιείται σε εικόνες με πολλά χρώματα. Το GIMP και άλλα προγράμματα επεξεργασίας εικόνων θα πρέπει να χρησιμοποιούν τη σωστή μορφή αυτόματα, αλλά αυτό είναι ακόμη καλό να το γνωρίζουμε.

jpg_vs_png

Εικόνα από Λάμπνολ

14. Ονόματα αρχείων εικόνας

Οι μηχανές αναζήτησης χρησιμοποιούν και τα δύο ονόματα αρχείων κειμένου και εικόνας, επομένως ονομάστε τα αρχεία σας προτού τα ανεβάσετε στο WordPress. Εάν χρησιμοποιείτε ένα πρόσθετο αυτό προσθέτει αυτόματα κείμενο alt με βάση το όνομα του αρχείου, το μόνο που πρέπει να κάνετε είναι να ονομάσετε τα αρχεία σας! Μην γεμίζετε λέξεις-κλειδιά, απλώς περιγράψτε την εικόνα.

Ονόματα αρχείων εικόνας ετικέτας

15. Alt Κείμενο

Αυτά θα πρέπει να είναι ίδια με το όνομα του αρχείου εικόνας σας. Μπορείτε να χρησιμοποιήσετε το Αυτόματη προσθήκη χαρακτηριστικών Alt Image για αυτόματη χρήση του ονόματος αρχείου ως εναλλακτικό κείμενο. Εφόσον χρησιμοποιείτε σχετικές εικόνες, ορισμένες από αυτές πρέπει φυσικά να περιλαμβάνουν (bits) της λέξης-κλειδιού σας… δεν υπάρχει απολύτως κανένας λόγος να προσθέσετε λέξεις-κλειδιά σε εικόνες, κάτι που διακινδυνεύει ποινή πλήρωσης λέξεων-κλειδιών.

Αυτόματη προσθήκη κειμένου Alt σε εικόνες – Χρησιμοποιήστε το Αυτόματη προσθήκη χαρακτηριστικών Alt Image. Τώρα όποτε προσθέτετε μια εικόνα, η προσθήκη θα προσθέτει alt κείμενο που είναι το ίδιο με το όνομα του αρχείου…

alt ="Πρόσθετο WP-Fastest-Cache-Plugin" πλάτος ="577" ύψος ="247" />

Εύρεση κειμένου Alt που λείπει – Το Screaming Frog είναι ένα δωρεάν εργαλείο που σας δείχνει όλες τις εικόνες που λείπουν alt text.

  • Κατεβάστε Screaming Frog SEO Αράχνη
  • Εισαγάγετε τον ιστότοπό σας και κάντε κλικ στο “Έναρξη” για ανίχνευση του ιστότοπου
  • Κάντε κλικ στην καρτέλα εικόνες
  • Μεταβείτε στην Επισκόπηση → Λείπει Alt Alt (Δες παρακάτω)
  • Εντοπίστε αυτές τις εικόνες στον ιστότοπό σας και προσθέστε εναλλακτικό κείμενο

Λείπει κείμενο Alt Image - Screaming Frog

16. Άνοιγμα γραφήματος (Facebook + Twitter)

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

Κοινή χρήση στο Facebook

Εάν χρησιμοποιείτε το Yoast, μεταβείτε στις ρυθμίσεις “Κοινωνικά” και ενεργοποιήστε το Open Graph και για το Facebook / το Twitter …

Yoast-Social-Meta-Data

Τώρα επεξεργαστείτε μια σελίδα / ανάρτηση και, στη συνέχεια, κάντε κλικ στο σύνδεσμο “κοινή χρήση” στο Yoast και θα δείτε επιλογές για μεταφόρτωση προσαρμοσμένων εικόνων για Facebook (1200 πλάτος x 628 ύψος) και Twitter (1024 πλάτος x 512 ύψος).

yoast-social-media-optimization

17. Εικόνες σε επιλεγμένα αποσπάσματα

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

3 τύποι επιλεγμένων αποσπασμάτων

  • Απαντήσεις
  • Πίνακες
  • Κονίστρα

Προτεινόμενα-Εικόνα-αποσπάσματα

Πώς να αποκτήσετε επιλεγμένα αποσπάσματα στο Google

  • Στοχεύστε μια λέξη-κλειδί όπου οι άνθρωποι θέλουν συνοπτικός απάντηση
  • Χρήση Εξερεύνηση λέξεων-κλειδιών Moz για τον προσδιορισμό λέξεων-κλειδιών ερωτήσεων
  • Χρησιμοποιήστε την απάντηση στο κοινό για να βρείτε ακόμη περισσότερες λέξεις-κλειδιά ερωτήσεων
  • Επιλέξτε αν η απάντηση θα πρέπει να είναι μια παράγραφος, μια λίστα ή έναν πίνακα
  • Σχεδιάστε ένα ωραίο γραφικό (ή τραβήξτε μια φωτογραφία) που περιγράφει τη λέξη-κλειδί
  • Χρησιμοποιήστε το βέλτιστο μήκος χαρακτήρων (δείτε την παρακάτω φωτογραφία Μόζ)
  • Δημιουργία περιεχομένου βάσει γεγονότων με ποιοτικές αναφορές (συνδέσεις, γραφικά κ.λπ.)
  • Στοχεύστε λέξεις-κλειδιά που έχουν ήδη ένα απόσπασμα που έχουν επιλεγεί αλλά δεν έχουν καλή δουλειά
  • Εάν στοχεύετε στο πλαίσιο απαντήσεων, στοχεύστε τη λέξη-κλειδί σας χρησιμοποιώντας μια ακριβή αντιστοίχιση
  • Βεβαιωθείτε ότι βρίσκεστε στην 1η σελίδα για τη λέξη-κλειδί, αν όχι, βελτιώστε το περιεχόμενο

Βέλτιστο μήκος επιλεγμένων αποσπασμάτων

18. Δομημένα δεδομένα

Οι εικόνες μπορούν να χρησιμοποιηθούν στο δομημένα δεδομένα (και εμβλήματα) για τους ακόλουθους τύπους περιεχομένου:

Πλούσιο απόσπασμα βίντεο

Συνταγή-πλούσια αποσπάσματα

Πλούσιο απόσπασμα προϊόντος

Τι πρόσθετο εμπλουτισμένων αποσπασμάτων πρέπει να χρησιμοποιώ?
χρησιμοποιώ WP Review Pro του MyThemeShop (εδώ είναι μια σελίδα στην οποία χρησιμοποιώ) που υποστηρίζει 14 τύπους δεδομένων, συμπεριλαμβανομένων συνταγών και αξιολογήσεων προϊόντων. Συνήθιζα να χρησιμοποιώ WP Rich Snippets, αλλά ο προγραμματιστής εγκατέλειψε την προσθήκη και δεν έχει ενημερωθεί για 2+ χρόνια και το Πρόσθετο All In One Schema είναι απλώς βαρετό (έχει έλλειψη επιλογών και στυλ). Το WP Review Pro είναι πολύ εύκολο στη χρήση.

19. Εικόνες στυλ

Μην ξεχάσετε να σχεδιάσετε τις εικόνες σας! Χρησιμοποιώ περιγράμματα στο μεγαλύτερο μέρος των δικών μου.

  • Τίτλοι εικόνας
  • Σύνδεσμοι εικόνας
  • Περίγραμμα εικόνας
  • Λεζάντες εικόνων

20. Αλλαγή μεγέθους GIF

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

Αλλαγή μεγέθους του GIF…

Αλλαγή μεγέθους GIF

Στη συνέχεια συμπιέστε το…

Συμπίεση GIF

Το αποτέλεσμα :-)

Βελτιστοποίηση GIF σκυλιών

21. Cache Gravatars

Εάν έχετε αναρτήσεις με πολλά σχόλια, Gravatars μπορεί να καταστρέψει εντελώς την αναφορά σας. Μπορείτε να τα απενεργοποιήσετε, να σπάσετε τα σχόλια για να εμφανίσετε μόνο έναν συγκεκριμένο αριθμό σχολίων ή να δοκιμάσετε μια προσθήκη Gravatar cache. Ίσως χρειαστεί να κάνετε λίγο έλεγχο, καθώς ορισμένα πρόσθετα δεν λειτουργούν σε ορισμένους ιστότοπους.

  • Cache Gravatars (Βέλτιστος, Ο Χάρι, ή CV Gravatar Cache)
  • Απενεργοποιήστε εντελώς το Gravatars
  • Ορίστε το προεπιλεγμένο Gravatar στο κενό
  • Διαγράψτε σχόλια που δεν προσθέτουν αξία
  • Ορίστε το προεπιλεγμένο Gravatar σε μια προσαρμοσμένη εικόνα στον διακομιστή σας
  • Περιορίστε τις εικόνες Gravatar σε μικρότερες διαστάσεις (π.χ. 32 εικονοστοιχεία)
  • Σχόλια σελιδοποίησης σε WP Απενεργοποίηση για εμφάνιση μόνο 20 σχολίων κάθε φορά
  • Εάν κανένα από αυτά δεν λειτουργεί, ρίξτε μια ματιά Εκπαιδευτικό πρόγραμμα Gravatars Caching WP Rocket

Cache-Gravatar-Εικόνες

22. Αποφύγετε την ενσωμάτωση εικόνων από εξωτερικούς ιστότοπους

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

23. Εργαλεία βελτιστοποίησης εικόνας

Αποφύγετε τη χρήση προσθηκών με διπλή λειτουργικότητα – Το Imagify, το ShortPixel, το Kraken, το EWWW και το Smush κάνουν βασικά το ίδιο πράγμα (συμπίεση χωρίς απώλειες, αφαίρεση δεδομένων EXIF, αλλαγή μεγέθους εικόνων). Το WP Rocket έχει επιλογές για τεμπέλης φόρτωση, προσωρινή αποθήκευση και CDN (και εκκαθάριση βάσης δεδομένων + φιλοξενία του Google Analytics τοπικά) που δεν κάνουν οι περισσότερες προσθήκες προσωρινής αποθήκευσης, εξοικονομώντας σας από τη χρήση επιπλέον προσθηκών.

  • Φοβερό στιγμιότυπο οθόνης – Επέκταση Chrome για λήψη στιγμιότυπων οθόνης.
  • Αυτόματα χαρακτηριστικά Alt Image – εισάγει αυτόματα κείμενο alt χρησιμοποιώντας το όνομα του αρχείου εικόνας.
  • Καλύτερη Αντικατάσταση Αναζήτησης – χρησιμοποιήστε το για μαζική ενημέρωση εικόνων.
  • Cloudflare – δωρεάν CDN με 200+ κέντρα δεδομένων, προστασία hotlink, αντικατοπτρισμός, στίλβωση.
  • Chrome DevTools – δείχνει τομείς που χρησιμοποιούνται εάν έχετε σφάλματα ανακατεύθυνσης GTmetrix.
  • Γεννήτρια CSS Sprite – δωρεάν εργαλείο για τον συνδυασμό πολλαπλών εικόνων σε 1 CSS sprite.
  • EWWW Image Optimizer – συμπίεση χωρίς απώλειες, αφαίρεση EXIF, αλλαγή μεγέθους.
  • GifGifs – αλλάζει το μέγεθος των GIF.
  • ΣΕΙΡΗΤΙ – δωρεάν λογισμικό επεξεργασίας εικόνων που χρησιμοποιώ.
  • GTmetrix – σας δείχνει ποιες εικόνες πρέπει να βελτιστοποιηθούν.
  • Φανταστείτε – συμπίεση χωρίς απώλειες, αφαίρεση EXIF, αλλαγή μεγέθους.
  • Ευκαμψία – αλλάζει το μέγεθος της μεγάλης εικόνας για να διορθώσει την “προβολή κλιμακωτών εικόνων” στο GTmetrix.
  • Κράκεν – συμπίεση χωρίς απώλειες, αφαίρεση EXIF, αλλαγή μεγέθους.
  • Οκνηρό φορτίο – προσθήκη που καθυστερεί τη φόρτωση των εικόνων έως ότου γίνουν ορατές.
  • Lazy Load για βίντεο – προσθήκη που καθυστερεί τη φόρτωση βίντεο έως ότου γίνουν ορατά.
  • Βέλτιστη προσωρινή μνήμη Gravatar – Caches Gravatars (ή δοκιμάστε Η Gravatar Cache του Χάρι).
  • Screaming Frog SEO Αράχνη – Βρείτε λείπει κείμενο alt, μετα-περιγραφές κ.λπ..
  • ShortPixel – συμπίεση χωρίς απώλειες, αφαίρεση EXIF, αλλαγή μεγέθους.
  • Σμίσε – συμπίεση χωρίς απώλειες, αφαίρεση EXIF, αλλαγή μεγέθους.
  • StackPath – CDN $ 10 / μήνα με 31 κέντρα δεδομένων.
  • Swift Performance Lite – # 1 δωρεάν προσθήκη cache στις περισσότερες δημοσκοπήσεις στο Facebook.
  • Αναθεώρηση WP – πλούσια προσθήκη αποσπασμάτων (βοηθά στην εμφάνιση εικόνων στα αποτελέσματα αναζήτησης).
  • Πύραυλος WP – # 1 προσθήκη cache στις περισσότερες δημοσκοπήσεις στο Facebook.
  • VA Κατάργηση Exif – αφαιρεί περιττά δεδομένα από εικόνες.
  • Ανίπταμαι διαγωνίως  -Επέκταση Chrome για τέλειο ζουμ κατά τη λήψη στιγμιότυπων οθόνης.
  • Ναι – επιτρέπει τα μετα-δεδομένα Facebook / Twitter, έτσι ώστε οι εικόνες να μορφοποιούνται σωστά όταν κοινοποιούνται.

Συχνές Ερωτήσεις

&# x2705; Πώς διορθώνετε τα σφάλματα Optimize Image στο GTmetrix?

Συμπιέζοντας τους χωρίς απώλειες χρησιμοποιώντας ένα πρόσθετο όπως ShortPixel, Imagify ή Smush. Χρησιμοποιώ το ShortPixel επειδή διορθώνει πάντα αυτό το σφάλμα στο GTmetrix.

&# x2705; Πώς μπορείτε να διορθώσετε τα σφάλματα Σερβίρετε κλίμακα εικόνας στο GTmetrix?

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

&# x2705; Πώς διορθώνετε τα σφάλματα Καθορισμός διαστάσεων εικόνας στο GTmetrix?

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

&# x2705; Οποιοσδήποτε άλλος τρόπος για να κάνετε τις εικόνες να φορτώνονται πιο γρήγορα?

Η κατάργηση των δεδομένων EXIF ​​και η χρήση ενός CDN για την προβολή των εικόνων σας θα κάνει τη μεγαλύτερη διαφορά εκτός των προτάσεων στο GTmetrix.

&# x2705; Ποια βελτιστοποίηση εικόνας είναι καλύτερη?

Χρησιμοποιώ το ShortPixel επειδή υπάρχει σχεδόν μηδενική απώλεια ποιότητας και διορθώνει το στοιχείο Optimize Images στο GTmetrix.

Τι νομίζετε?
Μήπως η αναφορά GTmetrix φαίνεται λίγο καλύτερη; Επιτρέψτε μου να μάθω στα σχόλια! Και αν θέλετε περισσότερες συμβουλές που θα σας προσφέρουν ακόμη καλύτερες βαθμολογίες / χρόνους φόρτωσης, ανατρέξτε στον πλήρη οδηγό ταχύτητας του WordPress.

Στην υγειά σας,
Κάποιος

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:

    วิธีเพิ่มประสิทธิภาพของรูปภาพใน WordPress (สำหรับทั้ง Speed ​​+ SEO)

    เมื่อพูดถึงการปรับภาพให้ดีที่สุดคุณอาจเคยได้ยินเกี่ยวกับข้อความแสดงแทนเพียงพอแล้ว.


    จริงๆแล้วมี 20 วิธีในการปรับภาพให้เหมาะสม (หากคุณรวมทั้ง SEO และการเพิ่มประสิทธิภาพความเร็ว) สิ่งเหล่านี้จะช่วยให้คุณได้คะแนนที่ดีขึ้นใน GTmetrix / Pingdom อาจจัดอันดับคุณสูงขึ้นในการค้นหาและทำให้เนื้อหาของคุณโหลดเร็วขึ้นมาก ฉันจัดการเพื่อรับรายงาน GTmetrix 100% พร้อมเวลาโหลด 0.5 วินาที … การเพิ่มประสิทธิภาพรูปภาพของฉันใน WordPress เป็นส่วนใหญ่.

    ปรับภาพให้เหมาะสมก่อนทำการอัพโหลด – การใช้โปรแกรมเช่น Photoshop เพื่อปรับภาพให้เหมาะสมก่อนที่จะอัพโหลดสามารถบันทึกงานได้มากมาย คุณสามารถปรับขนาดบีบอัดดึงข้อมูล EXIF ​​บันทึกในรูปแบบที่ถูกต้อง (เช่น PNG / JPEG) และเขียนชื่อไฟล์อธิบาย (ซึ่งจะใช้เป็นข้อความแทนโดยอัตโนมัติหากใช้ ปลั๊กอิน Alt Image อัตโนมัติ) นั่นคือการเพิ่มประสิทธิภาพ 6 อย่าง!

    หากคุณต้องการภาพความละเอียดสูง (เช่นเว็บไซต์ถ่ายภาพ) คุณอาจไม่ต้องการปรับขนาดและบีบอัด (ขั้นตอนที่ 3 และ 8) เนื่องจากเว็บไซต์เหล่านี้สามารถลดคุณภาพลงได้แม้ว่าจะเป็นเพียงเล็กน้อยก็ตาม.

    เครื่องมือหลักที่ฉันใช้ – ฉันใช้ GIMP เพื่อปรับขนาด / บีบอัดภาพ (ตัวแก้ไขรูปภาพที่ฉันเลือก), จรวด WP สำหรับปลั๊กอินแคชของฉัน, Imagify สำหรับการบีบอัดแบบไม่สูญเสียข้อมูลเพิ่มเติม + ลบข้อมูล EXIF ​​ทั้งคู่ Cloudflare และ StackPath CDN, ปลั๊กอิน ALT แอตทริบิวต์รูปภาพอัตโนมัติ เพื่อใช้ชื่อไฟล์รูปภาพโดยอัตโนมัติเป็นข้อความแสดงแทนและ แคช Gravatar ที่เหมาะสม เพื่อแคช Gravatars ในความคิดเห็น ฉันใช้ WP Review Pro เป็นปลั๊กอินตัวอย่างรวยของฉัน, การค้นหาที่ดีขึ้นแทนที่ เพื่ออัปเดตรูปภาพจำนวนมาก (มีประโยชน์มาก) และ GTmetrix เป็นเครื่องมือทดสอบความเร็วของฉัน ดูรายการเครื่องมือทั้งหมด.

    Contents

    1. ค้นหารูปภาพที่ไม่ได้เพิ่มประสิทธิภาพ

    เรียกใช้เว็บไซต์ของคุณผ่าน GTmetrix และคุณจะเห็นรายการเหล่านี้ในแท็บ Page Speed ​​/ YSlow. ห้ารายการแรกมักเป็นหน้าเฉพาะ, หมายความว่า GTmetrix จะแสดงเฉพาะภาพที่ไม่ได้เพิ่มประสิทธิภาพสำหรับหน้าเดียวที่คุณทดสอบ. 3 รายการสุดท้ายมักจะเกิดขึ้นกับทั้งไซต์ของคุณ. แน่นอนสิ่งเหล่านี้เป็นเพียง 7 วิธีในการปรับภาพให้เหมาะสม แต่ที่สำคัญที่สุดคือเราจะเริ่มทำสิ่งเหล่านี้ก่อน.

    • แสดงภาพที่ปรับขนาดแล้ว: ปรับขนาดภาพใหญ่เพื่อแก้ไขขนาด (ขั้นตอนที่ 2)
    • ระบุขนาดภาพ: ระบุความกว้าง / ความสูงใน HTML หรือ CSS ของภาพ (ขั้นตอนที่ 3)
    • ปรับภาพให้เหมาะสม – บีบอัดภาพแบบไม่สูญเสีย (ขั้นตอนที่ 4)
    • การรวมรูปภาพโดยใช้ CSS sprites – รวมภาพหลายภาพเป็น 1 ภาพ (ขั้นตอนที่ 5)
    • หลีกเลี่ยงการเปลี่ยนเส้นทาง URL – ไม่ต้องแสดงรูปภาพจาก www หรือ http ผิดรุ่น (ขั้นตอนที่ 6)
    • ใช้เครือข่ายการจัดส่งเนื้อหา – ให้บริการภาพ / ไฟล์จาก CDN (ขั้นตอนที่ 7)
    • ใช้ประโยชน์จากแคชเบราว์เซอร์ – ภาพแคช / ไฟล์โดยใช้ปลั๊กอินแคชของคุณ (ขั้นตอนที่ 8)
    • ทำให้ favicon เล็กและแคชได้ – ใช้ favicon ขนาด 16x16px และแคช (ขั้นตอนที่ 9)

    การปรับภาพให้ดีที่สุดใน GTmetrix

    เริ่มต้นด้วยการแก้ไขภาพที่ปรากฏในหลาย ๆ หน้า: โลโก้, ภาพด้านข้าง / ส่วนท้าย, ฯลฯ เริ่มต้นด้วยภาพที่ปรับขนาดตามที่คุณอาจต้องปรับขนาด / บรรจุใหม่ด้วยขนาดใหม่.

    2. แสดงรูปภาพที่ปรับขนาด

    ถ้าคุณเห็น ให้บริการภาพที่ปรับขนาด ข้อผิดพลาดใน GTmetrix หมายความว่าคุณมีภาพที่มีขนาดใหญ่เกินไปและจำเป็นต้องปรับขนาดให้เป็นขนาดที่ถูกต้อง (ซึ่ง GTmetrix ให้คุณด้วย) ตราบใดที่คุณทำตามสูตรโกงขนาดภาพ (ดูด้านล่าง) คุณจะไม่เห็นข้อผิดพลาดเหล่านี้ แต่หากคุณอัปโหลดภาพขนาดใหญ่แล้วคุณจะต้องปรับขนาดด้วยตนเองหรือใช้ปลั๊กอิน.

    เสิร์ฟ-สเกลแสดงสินค้า

    ปรับขนาดรูปภาพโดยใช้ปลั๊กอิน – ปัญหาเกี่ยวกับสิ่งนี้คือภาพที่แตกต่างกันเรียกร้องมิติที่แตกต่างกัน (วิดเจ็ตตัวเลื่อนภาพเต็มความกว้าง) ในขณะที่ปลั๊กอินเพิ่มประสิทธิภาพภาพส่วนใหญ่มีตัวเลือกในการปรับขนาดภาพเป็นหนึ่ง เดียว ชุดมิติข้อมูลเฉพาะคุณควรครอบตัด / ปรับขนาดก่อนอัปโหลด หากคุณปรับขนาดรูปภาพโดยใช้ปลั๊กอินให้สำรองข้อมูลรูปภาพดั้งเดิม (และทดสอบเพียงไม่กี่ครั้ง) ในกรณีที่คุณไม่พอใจกับผลลัพธ์.

    ปรับขนาดภาพใหญ่

    ปรับขนาดภาพด้วยตนเอง – รับขนาดที่ถูกต้องจาก GTmetrix และปรับขนาด / บรรจุซ้ำ โปรดจำไว้ว่า GTmetrix จะแสดงเฉพาะภาพที่ไม่ได้เพิ่มประสิทธิภาพสำหรับหน้าเดียวที่คุณทดสอบ.

    สร้าง Cheat Sheet ของมิติภาพในเว็บไซต์ของคุณ
    แถบเลื่อนของบล็อกแถบด้านข้างรูปภาพเด่นและเนื้อหาเนื้อหาบล็อกนั้นเรียกร้องมิติข้อมูลเฉพาะที่ควรปรับขนาดรูปภาพ สร้างแผ่นโกงเพื่อให้คุณสามารถปรับขนาดก่อนที่จะอัปโหลดไปยัง WordPress. สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณมีหลายพื้นที่ของเว็บไซต์ที่ต้องการขนาดภาพที่แตกต่างกันและหากคุณมีนักออกแบบ / บรรณาธิการหลายคน.

    ตัวอย่าง:

    • ภาพสไลเดอร์: 1900 (w) x 400 (h)
    • ภาพม้าหมุน: 115 (h)
    • ภาพวิดเจ็ต: 414 (w)
    • ภาพโพสต์บล็อกแบบเต็มความกว้าง: 680 (w)
    • ภาพเด่น: 250 (w) x 250 (h)
    • รูปภาพ OG ของ Yoast Facebook: 1200 (w) x 628 (h) – ขั้นตอนที่ 11
    • Yoast Twitter OG image 1024 (w) x 512 (h) – ขั้นตอนที่ 11

    สี่เหลี่ยมผืนผ้าความกว้าง 680 พิกเซล

    3. ระบุขนาดภาพ

    ซึ่งหมายถึงการเพิ่มความกว้าง / ความสูงให้กับ HTML หรือ CSS ของรูปภาพ Visual Editor ใช้สำหรับคุณ (ยกเว้นวิดเจ็ตผู้สร้างเพจบางรายและ HTML ที่กำหนดเอง อย่า). ทดสอบสองสามหน้าใน GTmetrix.

    GTmetrix บอกมิติของภาพให้คุณ …

    มิติข้อมูลจำเพาะของ GTmetrix

    เพิ่มความกว้าง / ความสูงให้กับ HTML ของภาพ …

    ระบุขนาดภาพ

    4. บีบอัดรูปภาพแบบ Losslessly

    นี่คือรายการ “ปรับภาพ” ใน GTmetrix หลายโปรแกรม (เช่น Photoshop และ Gimp) มีตัวเลือกในการบีบอัดเมื่อส่งออก ขณะนี้เป็นการเริ่มต้นที่ดีปลั๊กอินการบีบอัดภาพมักจะได้ผลลัพธ์ที่ดียิ่งขึ้น ฉันชอบ Imagify, คราเคน, ShortPixel, หรือ Smush. เป็นที่ทราบกันว่าปลั๊กอินอื่น ๆ ช่วยลดคุณภาพของภาพและอาจทำให้เกิดข้อผิดพลาดกับภาพของคุณ.

    การบีบอัดภาพด้วย Imagify

    1. สมัครสมาชิก Imagify
    2. ติดตั้ง ลองนึกภาพปลั๊กอิน
    3. คุณจะได้รับแจ้งพร้อมคำแนะนำด้านล่าง:
    4. ป้อนรหัส API จากบัญชี Imagify ของคุณ
    5. ตั้งค่าระดับการบีบอัดของคุณ (ปกติก้าวร้าวรุนแรงเป็นพิเศษ)
    6. ลองนึกภาพทั้งหมด (ภาพด้านล่าง) ด้วยการปรับภาพทั้งหมดเป็นจำนวนมากในเว็บไซต์ของคุณ
    7. เมื่อคุณถึงขีด จำกัด แล้วให้จ่าย $ 4.99 หรือรอเดือนถัดไปเพื่อรีเซ็ตขีด จำกัด ของคุณ

    imagify

    ทดสอบว่าภาพมีการบีบอัดในระดับต่างๆกันอย่างไร …

    ลองนึกภาพการเปรียบเทียบการบีบอัด

    เมื่อลงทะเบียนแล้วเพิ่มประสิทธิภาพของภาพทั้งหมดในเว็บไซต์ของคุณเป็นกลุ่ม …

    imagify-WordPress ภาพการเพิ่มประสิทธิภาพ

    ตั้งค่าตัวเลือกเพื่อปรับภาพให้เหมาะสมเมื่ออัพโหลด …

    จินตนาการการปรับภาพให้ดีที่สุดเมื่ออัพโหลด

    5. รวมรูปภาพเป็น CSS Sprites

    ในหน้าแรกของฉันคุณอาจคิดว่าคุณเห็นไอคอน 21 อัน แต่จริง ๆ แล้วพวกเขาเป็น 1 ภาพเดียว มันคือ CSS สไปรต์, โดยที่คุณรวมภาพหลาย ๆ ภาพไว้เป็นภาพเดียว 1 ภาพ สิ่งนี้จะลดจำนวนภาพ (และคำขอ) ซึ่งเป็นสาเหตุที่หน้าแรกของฉันมีเพียง 10 คำขอ แทนที่จะโหลด 21 ภาพมันโหลด 1 คุณจะต้องมีความรู้ CSS ในการทำเช่นนี้หรือใช้ เครื่องกำเนิด CSS.

    CSS Sprites

    GTmetrix CSS Sprites

    ใช้ CSS Sprite สำหรับตกแต่งรูปภาพเท่านั้น – คุณสูญเสียแท็ก alt รูปภาพจำนวนมากเมื่อคุณรวม 21 ภาพเป็น 1 อย่ารวมรูปภาพสำคัญเข้ากับสไปรต์ CSS หากพวกเขาอธิบายเนื้อหาของคุณ สำหรับฉันความเร็วของหน้าแรกของฉันสำคัญกว่าของ SEO … ฉันใช้รายงาน GTmetrix ของหน้าแรกในหลาย ๆ ที่ (ดังนั้นฉันต้องรักษาความสะอาด) และหน้าแรกของฉันเชื่อหรือไม่ไม่กำหนดเป้าหมาย คำสำคัญ. มีวัตถุประสงค์เพื่อจัดทำแบบฝึกหัดของฉัน … และโหลดเร็ว.

    6. หลีกเลี่ยงการเปลี่ยนเส้นทาง URL รูปภาพ

    หากคุณเปลี่ยนเป็น HTTPS เวอร์ชัน www หรือเริ่มแสดงรูปภาพจาก CDN คุณควรอัปเดตรูปภาพทั้งหมด (และลิงก์) จำนวนมากโดยใช้ การค้นหาที่ดีขึ้นแทนที่ ดังนั้นพวกเขาจึงให้บริการรุ่นที่ถูกต้อง มิฉะนั้นคุณอาจเห็น ลดการเปลี่ยนเส้นทาง หรือ ใช้โดเมนที่ไม่มีคุกกี้ ข้อผิดพลาด.

    ย่อการเปลี่ยนเส้นทาง

    คุกกี้ฟรีโดเมน

    ใช้ปลั๊กอิน Better Search Replace เพื่ออัปเดต URL รูปภาพจำนวนมาก …

    การค้นหาที่ดีขึ้นแทนที่รุ่น WWW

    การค้นหาที่ดีขึ้นแทนที่ HTTP กับ HTTPS

    7. แสดงรูปภาพจาก CDN

    ต้องเปลี่ยน URL รูปภาพเพื่อรวมของคุณ URL ของ CDN

    • URL รูปภาพเก่า (ไม่มี CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
    • URL รูปภาพใหม่ (พร้อม CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

    Cloudflare vs. StackPath – ฉันใช้ทั้งคู่ Cloudflare และ StackPath เนื่องจากศูนย์ข้อมูลเพิ่มเติม = ส่งเนื้อหาได้เร็วขึ้น Cloudflare มี ศูนย์ข้อมูล 200+ แห่ง, StackPath มี ศูนย์ข้อมูล 34+ แห่ง ซึ่งตั้งอยู่ในสหรัฐอเมริกา (ซึ่งเป็นที่ที่ผู้เยี่ยมชมของฉันมาจาก). Cloudflare ไม่ได้กำหนด CDN URL ให้คุณ ดังนั้นเราจะใช้ CDN ของ StackPath เพื่อแสดงรูปภาพ.

    StackPath-ข้อมูลศูนย์

    ขั้นตอนที่ 1: เลือก CDN ฉันใช้ StackPath (พวกเขามีการทดลองใช้ 30 วัน).

    ขั้นตอนที่ 2: ในแดชบอร์ดคลิกแท็บ CDN จากนั้น สร้างไซต์ CDN ของ StackPath

    StackPath-CDN แท็บ

    StackPath-CDN โดเมน

    CDN-URL-StackPath

    ขั้นตอนที่ 3: คัดลอก URL CDN ของคุณและวางลงในปลั๊กอินแคชของคุณ (ด้านล่างสำหรับ WP Rocket) …

    WP-Rocket-CDN

    ขั้นตอนที่ 4: แทนที่ URL รูปภาพเพื่อรวม URL CDN ของคุณ (โดยใช้ การค้นหาที่ดีขึ้นแทนที่).

    การค้นหาที่ดีขึ้นแทนที่ CDN URL

    ขั้นตอนที่ 5: ตรวจสอบ URL ภาพเก่าโดยใช้ Chrome DevTools. บางครั้งปลั๊กอินแคชของคุณหรือ CDN Enabler ดูแลสิ่งนี้ยกเว้นลิงก์ใน CSS และ JavaScript ที่กำหนดค่าตายตัว สำหรับลิงค์ที่ถูกทิ้งไว้เป็นปกติ ไฟล์ (เช่น CSS หรือ Javascript) ที่ต้องการการตรวจสอบและแทนที่ด้วยตนเอง Chrome DevTools แสดงโดเมนทั้งหมดที่กำลังใช้งานอยู่.

    ขั้นตอนที่ 6: เรียกใช้ไซต์ของคุณใน GTmetrix และ “เครือข่ายการส่งเนื้อหา” ควรเป็นสีเขียวใน YSlow คุณไม่ควรมีข้อผิดพลาดใน “ย่อการเปลี่ยนเส้นทาง” หรือ “ใช้โดเมนที่ไม่มีคุกกี้”.

    CDN GTmetrix YSlow

    8. รูปภาพแคช

    ปลั๊กอินแคชส่วนใหญ่มีตัวเลือกสำหรับ การแคชเบราว์เซอร์, ซึ่งแคชภาพ ฉันใช้ WP Rocket ซึ่งได้รับการจัดอันดับให้เป็นปลั๊กอินอันดับ 1 ในโพล Facebook และฉันมีการสอนเกี่ยวกับเรื่องนี้. ประสิทธิภาพการทำงานที่รวดเร็ว โดยทั่วไปแล้วอันดับที่ 1 ปลั๊กอินแคชฟรี (ฉันมีการสอนด้วยเช่นกัน).

    เบราว์เซอร์แคช

    9. ทำให้ Favicon เล็กและแคชได้

    ตรวจสอบให้แน่ใจว่า favicon ของคุณคือ 16x16px เป็นรูปแบบ favicon.ico และถูกแคชไว้โดยใช้ปลั๊กอินแคชของคุณ.

    10. ลบข้อมูล EXIF

    ข้อมูล Exif มีข้อมูลเช่นรูรับแสง, ความเร็วชัตเตอร์, ISO, ความยาวโฟกัส, รุ่นกล้อง, วันที่ถ่ายภาพและอื่น ๆ คุณไม่ต้องการสิ่งนี้สำหรับภาพในเว็บไซต์ของคุณ VA กำลังถอดปลั๊กอิน Exif ลบข้อมูล Exif โดยอัตโนมัติเมื่ออัพโหลดรูปภาพ.

    ปลั๊กอินการปรับภาพให้เหมาะสมส่วนใหญ่ (รวมถึง Imagify, ShortPixel, Kraken, EWWW และ Smush) มีตัวเลือกในการลบข้อมูล EXIF ​​โดยอัตโนมัติ นี่คือการตั้งค่าสำหรับ Imagify …

    ลองนึกภาพลบข้อมูล EXIF

    11. การปรับภาพ Cloudflare

    Cloudflare มีสองสามวิธีในการปรับภาพให้เหมาะสม Mirage และ Polish พบได้ในคุณ การตั้งค่าความเร็ว Cloudflare ในขณะที่การป้องกัน Hotlink พบได้ในของคุณ การตั้งค่า Scrape Shield.

    Cloudflare Mirage (ฟีเจอร์สำหรับโปร) – ลดการร้องขอรูปภาพ, โหลดภาพขี้เกียจ, และปรับปรุงเวลาในการโหลดรูปภาพบนอุปกรณ์พกพาที่มีการเชื่อมต่อเครือข่ายที่ช้า นี่คือรายละเอียดเพิ่มเติม …

    • ปรับขนาดรูปภาพตามอุปกรณ์ / การเชื่อมต่อของผู้เข้าชม ผู้เยี่ยมชมที่มีการเชื่อมต่อที่ไม่ดีจะได้รับเวอร์ชันที่เล็กกว่า (ความละเอียดต่ำกว่า) จนกว่าพวกเขาจะกลับมาใช้แบนด์วิดท์ที่สูงขึ้น.
    • ลดจำนวนคำขอ – แทนที่จะส่งหลายคำขอสำหรับรูปภาพทั้งหมดบนเว็บไซต์ Mirage ดึงคำขอนี้เป็นคำขอเดียวเพื่อให้ผู้เข้าชมสามารถดูภาพได้ทันที.
    • ขี้เกียจโหลดภาพ (โหลดเฉพาะเมื่อผู้ใช้เลื่อนลงและเห็นภาพจริง).

    Cloudflare Image Mirage

    โปแลนด์ Cloudflare (คุณสมบัติระดับโปร) – ตัดข้อมูล EXIF ​​และบีบอัดรูปภาพ.

    ภาพโปแลนด์ Cloudflare

    การป้องกัน Hotlink ของ Cloudflare – ป้องกันไม่ให้ผู้คนคัดลอกภาพของคุณและวางพวกเขาบนเว็บไซต์ของตนเองซึ่ง (เนื่องจากคุณยังคงโฮสต์ภาพนั้น) จะทำให้แบนด์วิดธ์ของคุณหมดไป.

    การป้องกัน Hotlink ของ Cloudflare

    12. รูปภาพโหลดขี้เกียจ

    การดำเนินการนี้จะชะลอการโหลดภาพจนกว่าผู้ใช้จะเลื่อนหน้าลงและเห็นภาพอย่างชัดเจน แม้ว่ามันจะช่วยเพิ่มเวลาในการโหลดครั้งแรก แต่การโหลดภาพอย่างต่อเนื่องในขณะที่คุณเลื่อนอาจทำให้เกิดความรำคาญ ฉันโหลดวิดีโอขี้เกียจเป็นการส่วนตัวเท่านั้นเนื่องจากวิดีโอเหล่านั้นใช้เวลาโหลดนานกว่าภาพมาก.

    คุณสามารถใช้ ปลั๊กอิน Lazy Load, ปลั๊กอิน Lazy Load สำหรับวิดีโอ, หรือใช้ WP Rocket …

    WP-Rocket-ขี้เกียจโหลด

    13. บันทึกเป็นรูปแบบที่ถูกต้อง

    PNG กับ JPEG – PNG ไม่มีการบีบอัด (ขนาดไฟล์ใหญ่) และควรใช้ในภาพอย่างง่ายโดยไม่ต้องใช้สีจำนวนมาก JPEG เป็นไฟล์บีบอัด (ขนาดไฟล์เล็ก) ซึ่งลดคุณภาพของภาพเล็กน้อย แต่มีขนาดเล็กกว่าและใช้ในภาพที่มีสีจำนวนมาก GIMP และโปรแกรมแก้ไขภาพอื่น ๆ ควรใช้รูปแบบที่ถูกต้องโดยอัตโนมัติ แต่สิ่งนี้ก็ยังดีที่จะรู้.

    jpg_vs_png

    ภาพประกอบโดย Labnol

    14. ชื่อไฟล์ภาพ

    เสิร์ชเอ็นจิ้นใช้ทั้งชื่อไฟล์ข้อความและรูปภาพแทนดังนั้นตั้งชื่อไฟล์ของคุณก่อนที่จะอัพโหลดไปยัง WordPress หากคุณกำลังใช้ปลั๊กอินอยู่ เพิ่มข้อความแทนโดยอัตโนมัติ ตามชื่อไฟล์การตั้งชื่อไฟล์ของคุณเป็นสิ่งที่คุณต้องทำ! อย่ายัดคำหลักลงไปเพียงอธิบายภาพ.

    ชื่อไฟล์ภาพป้ายกำกับ

    15. ข้อความแทน

    สิ่งเหล่านี้ควรเป็นชื่อไฟล์ภาพของคุณ คุณสามารถใช้ ปลั๊กอิน Alt Image อัตโนมัติ เพื่อใช้ชื่อไฟล์โดยอัตโนมัติเป็นข้อความแสดงแทน ตราบใดที่คุณใช้รูปภาพที่เกี่ยวข้องบางภาพก็ควรรวม (บิต) ของคำหลักของคุณ … ไม่มีเหตุผลใด ๆ ที่จะใช้คำสำคัญในภาพซึ่งมีความเสี่ยง การลงโทษการบรรจุคำหลัก.

    เพิ่ม Alt Text ให้กับรูปภาพโดยอัตโนมัติ – ใช้ ปลั๊กอิน Alt Image อัตโนมัติ. ตอนนี้เมื่อใดก็ตามที่คุณเพิ่มรูปภาพปลั๊กอินจะเพิ่มข้อความ alt ซึ่งเหมือนกับชื่อไฟล์ …

    alt ="WP-เร็วที่สุดแคชปลั๊กอิน" width ="577" height ="247" />

    ค้นหาข้อความ Alt ที่ขาดหายไป – Screaming Frog เป็นเครื่องมือฟรีที่แสดงรูปภาพทั้งหมดที่ไม่มีข้อความกำกับภาพ.

    • ดาวน์โหลด กรีดร้องแมงมุมกบ SEO
    • เข้าสู่เว็บไซต์ของคุณและคลิก“ เริ่ม” เพื่อรวบรวมข้อมูลเว็บไซต์
    • คลิกที่แท็บรูปภาพ
    • ไปที่ภาพรวม→ ไม่มีข้อความแสดงแทน (ดูด้านล่าง)
    • ค้นหาภาพเหล่านั้นบนเว็บไซต์ของคุณและเพิ่มข้อความแสดงแทน

    ข้อความแสดงรูปภาพ Alt - Screamsing Frog

    16. เปิดกราฟ (Facebook + Twitter)

    สิ่งนี้ทำให้รูปแบบเนื้อหาของคุณถูกต้องเมื่อแชร์บน Facebook / Twitter โดยเฉพาะภาพของคุณเนื่องจากทั้งสองเครือข่ายใช้มิติข้อมูลที่กำหนดเองเพื่อแสดงมิฉะนั้นจะดูตลก.

    Facebook หุ้น

    หากใช้ Yoast ให้ไปที่การตั้งค่า “สังคม” และเปิดใช้งานกราฟเปิดสำหรับทั้ง Facebook / Twitter …

    Yoast สังคม-Meta-ข้อมูล

    ตอนนี้แก้ไขหน้า / โพสต์จากนั้นคลิกที่ลิงค์ “แชร์” ใน Yoast และคุณจะเห็นตัวเลือกในการอัปโหลดภาพที่กำหนดเองสำหรับ Facebook (กว้าง 1200 x 628 สูง) และ Twitter (กว้าง 1024 x 512 สูง).

    Yoast สังคมสื่อการเพิ่มประสิทธิภาพ

    17. รูปภาพในตัวอย่างที่แนะนำ

    ตัวอย่างที่โดดเด่น คือเมื่อ Google แสดงบิตของเนื้อหาของคุณที่ด้านบนของผลการค้นหาและสามารถ (แต่ไม่รับประกัน) เพื่อรวมภาพ. Google จะดึงสิ่งเหล่านี้จากผลลัพธ์หน้าแรก ๆ, อย่างไรก็ตามมันขึ้นอยู่กับพวกเขาว่าพวกเขาจะแสดงตัวอย่างข้อมูลหรือรูปภาพ สิ่งเหล่านี้ยังทำให้ข้อมูลโค้ดของคุณปรากฏขึ้นสองครั้งและเป็นวิธีที่เหลือเชื่อในการรับปริมาณข้อมูลจำนวนมาก.

    ตัวอย่างประเภทเด่น 3 ประเภท

    • คำตอบ
    • ตาราง
    • รายการ

    แนะนำ-ภาพตัวอย่าง

    วิธีรับตัวอย่างข้อมูลเด่นใน Google

    • กำหนดเป้าหมายคำหลักที่ผู้คนต้องการ กระชับ ตอบ
    • ใช้ Moz Keyword Explorer เพื่อระบุคำหลักของคำถาม
    • ใช้คำตอบสาธารณะเพื่อค้นหาคำหลักของคำถามเพิ่มเติม
    • เลือกว่าคำตอบควรเป็นย่อหน้ารายการหรือตาราง
    • ออกแบบกราฟิกที่ดี (หรือถ่ายรูป) เพื่ออธิบายคำหลัก
    • ใช้ความยาวอักขระสูงสุด (ดูรูปถ่ายด้านล่างจาก Moz)
    • สร้างเนื้อหาตามข้อเท็จจริงพร้อมการอ้างอิงคุณภาพ (ลิงก์กราฟิก ฯลฯ )
    • กำหนดเป้าหมายคำหลักที่มีตัวอย่างข้อมูลเด่นอยู่แล้ว แต่ทำงานได้ไม่ดี
    • หากคุณต้องการเล็งไปที่กล่องคำตอบให้กำหนดเป้าหมายคำหลักของคุณโดยใช้การจับคู่แบบตรงทั้งหมด
    • ตรวจสอบให้แน่ใจว่าคุณอยู่ในหน้า 1 สำหรับคำหลักนั้นหากไม่ได้รับการปรับปรุงเนื้อหา

    ความยาวของตัวอย่างโฆษณาที่ดีที่สุด

    18. ข้อมูลที่มีโครงสร้าง

    สามารถใช้รูปภาพใน ข้อมูลที่มีโครงสร้าง (และ ป้าย) สำหรับประเภทเนื้อหาต่อไปนี้:

    ตัวอย่าง Rich Video

    สูตรรวยเกร็ดเล็กเกร็ดน้อย

    ตัวอย่างผลิตภัณฑ์ที่อุดมไปด้วย

    ฉันควรใช้ปลั๊กอิน Snippets อันใด?
    ฉันใช้ WP Review Pro ของ MyThemeShop (นี่คือหน้าเว็บที่ฉันใช้) ซึ่งรองรับ 14 ประเภทข้อมูลรวมถึงสูตรอาหารและรีวิวผลิตภัณฑ์ ฉันเคยใช้ WP Rich Snippets แต่นักพัฒนาซอฟต์แวร์ยกเลิกปลั๊กอินและไม่ได้อัปเดตเป็นเวลา 2 ปีและ ปลั๊กอิน In Schema ทั้งหมด มันน่าเบื่อ (มันไม่มีตัวเลือกและสไตล์) WP Review Pro ใช้งานง่ายมาก.

    19. รูปภาพสไตล์

    อย่าลืมจัดแต่งรูปภาพของคุณ! ฉันใช้เส้นขอบกับส่วนใหญ่ของฉัน.

    • Image ชื่อเรื่อง
    • ลิงค์รูปภาพ
    • เส้นขอบรูปภาพ
    • คำบรรยายภาพ

    20. ปรับขนาด GIF

    เช่นเดียวกับที่คุณปรับขนาดภาพให้เป็นขนาดที่ถูกต้องควรปรับขนาด GIF ด้วย (ใช้ GIF GIF).

    ปรับขนาด GIF …

    ปรับขนาด GIF

    จากนั้นบีบอัดมัน …

    บีบอัด GIF

    ผลลัพธ์ :-)

    ปรับแต่ง Dog GIF

    21. แคชราเวียร์

    หากคุณมีโพสต์ที่มีความคิดเห็นมากมาย, Gravatars สามารถทำลายรายงานของคุณได้อย่างสมบูรณ์ คุณสามารถปิดการใช้งานทำลายความคิดเห็นเพื่อแสดงความคิดเห็นในจำนวนที่กำหนดหรือลองใช้ปลั๊กอินแคชของ Gravatar คุณอาจต้องทำการทดสอบเล็กน้อยเนื่องจากปลั๊กอินบางตัวไม่ทำงานในบางเว็บไซต์.

    • แคช Gravatars (สูงสุด, แฮร์รี่, หรือ FV Gravatar Cache)
    • ปิดใช้งาน Gravatars อย่างสมบูรณ์
    • ตั้งค่า Gravatar เริ่มต้นเป็นค่าว่าง
    • ลบความคิดเห็นที่ไม่เพิ่มคุณค่า
    • ตั้งค่า Gravatar เริ่มต้นของคุณเป็นรูปภาพที่กำหนดเองบนเซิร์ฟเวอร์ของคุณ
    • จำกัด ภาพ Gravatar ของคุณให้มีขนาดเล็กลง (เช่น 32px)
    • แบ่งหน้าความคิดเห็นใน WP ปิดใช้งานเพื่อแสดงความคิดเห็น 20 ครั้งเท่านั้น
    • หากไม่มีงานใดให้ลองดู แบบฝึกหัดการแคช Gravatars ของ WP Rocket

    แคช Gravatar แสดงสินค้า

    22. หลีกเลี่ยงการฝังภาพจากเว็บไซต์ภายนอก

    อัปโหลดภาพไปยังเว็บไซต์ของคุณเสมออย่าคัดลอก / วาง มิฉะนั้นคุณจะจบลงด้วยคำขอพิเศษเนื่องจากรูปภาพไม่ได้โฮสต์บนเซิร์ฟเวอร์ของคุณดังนั้นจึงต้องดึงมาจากที่อื่น.

    23. เครื่องมือเพิ่มประสิทธิภาพภาพ

    หลีกเลี่ยงการใช้ปลั๊กอินด้วยฟังก์ชันการทำงานที่ซ้ำกัน – ลองนึกภาพ, ShortPixel, Kraken, EWWW และ Smush โดยทั่วไปแล้วจะทำสิ่งเดียวกัน (การบีบอัดแบบไม่สูญเสีย, การลบข้อมูล EXIF, ปรับขนาดภาพ) WP Rocket มีตัวเลือกสำหรับการโหลดที่ขี้เกียจการแคชและ CDN (และการล้างฐานข้อมูล + โฮสต์ Google Analytics ในเครื่อง) ซึ่งปลั๊กอินแคชส่วนใหญ่ทำไม่ได้ช่วยให้คุณประหยัดจากการใช้ปลั๊กอินเสริม.

    • ภาพหน้าจอที่ยอดเยี่ยม – ส่วนขยายของ Chrome สำหรับการจับภาพหน้าจอ.
    • คุณสมบัติ Alt ภาพอัตโนมัติ – แทรกข้อความ alt โดยอัตโนมัติโดยใช้ชื่อไฟล์รูปภาพ.
    • การค้นหาที่ดีขึ้นแทนที่ – ใช้เพื่ออัปเดตภาพจำนวนมาก.
    • Cloudflare – CDN ฟรีพร้อมศูนย์ข้อมูลมากกว่า 200 แห่ง, การป้องกันฮอตลิงค์, ภาพลวงตาขัด.
    • Chrome DevTools – แสดงโดเมนที่ใช้หากคุณมีข้อผิดพลาดในการเปลี่ยนเส้นทาง GTmetrix.
    • CSS Sprite Generator – เครื่องมือฟรีสำหรับการรวมภาพหลาย ๆ ภาพเป็น 1 CSS Sprite.
    • EWWW Image Optimizer – การบีบอัดแบบไม่สูญเสียการกำจัด EXIF ​​การปรับขนาด.
    • GifGifs – ปรับขนาด GIF.
    • GIMP – ซอฟต์แวร์แก้ไขภาพฟรีที่ฉันใช้.
    • GTmetrix – แสดงให้คุณเห็นว่าต้องปรับภาพใดให้เหมาะสม.
    • Imagify – การบีบอัดแบบไม่สูญเสียการกำจัด EXIF ​​การปรับขนาด.
    • Imsanity – ปรับขนาดภาพใหญ่เพื่อแก้ไข“ แสดงภาพที่ปรับขนาด” ใน GTmetrix.
    • คราเคน – การบีบอัดแบบไม่สูญเสียการกำจัด EXIF ​​การปรับขนาด.
    • โหลดขี้เกียจ – ปลั๊กอินที่ล่าช้าในการโหลดภาพจนกว่าจะปรากฏ.
    • โหลดขี้เกียจสำหรับวิดีโอ – ปลั๊กอินที่ล่าช้าในการโหลดวิดีโอจนกว่าจะปรากฏ.
    • แคช Gravatar ที่เหมาะสม – แคช Gravatars (หรือลอง Harry’s Gravatar Cache).
    • กรีดร้องแมงมุมกบ SEO – ค้นหาข้อความ alt ที่ขาดหายไปคำอธิบายเมตา ฯลฯ.
    • ShortPixel – การบีบอัดแบบไม่สูญเสียการกำจัด EXIF ​​การปรับขนาด.
    • Smush – การบีบอัดแบบไม่สูญเสียการกำจัด EXIF ​​การปรับขนาด.
    • StackPath – CDN $ 10 / เดือนพร้อมศูนย์ข้อมูล 31 แห่ง.
    • Swift Performance Lite – ปลั๊กอินแคชอันดับ 1 ในโพล Facebook ส่วนใหญ่.
    • รีวิว WP – ปลั๊กอินตัวอย่างรวย (ช่วยให้รูปภาพแสดงในผลการค้นหา).
    • จรวด WP – ปลั๊กอินแค # 1 ในการสำรวจ Facebook ส่วนใหญ่.
    • VA การลบ Exif – ตัดข้อมูลที่ไม่จำเป็นออกจากรูปภาพ.
    • ซูม  -ส่วนขยายของ Chrome สำหรับการซูมที่สมบูรณ์แบบในขณะที่จับภาพหน้าจอ.
    • Yoast – เปิดใช้งานข้อมูลเมตาของ Facebook / Twitter เพื่อจัดรูปแบบภาพอย่างเหมาะสมเมื่อแชร์.

    คำถามที่พบบ่อย

    &# x2705; คุณจะแก้ไขข้อผิดพลาด Optimize Image ใน GTmetrix ได้อย่างไร?

    โดยการบีบอัดอย่างไม่ย่อท้อโดยใช้ปลั๊กอินเช่น ShortPixel, Imagify หรือ Smush ฉันใช้ ShortPixel เพราะมันแก้ไขข้อผิดพลาดนี้ใน GTmetrix เสมอ.

    &# x2705; คุณจะแก้ไขข้อผิดพลาดของ Serve Scaled Image ใน GTmetrix ได้อย่างไร?

    ซึ่งหมายความว่าคุณต้องครอบตัด / ปรับขนาดภาพให้มีขนาดที่ถูกต้อง หากภาพมีขนาดใหญ่เกินไป GTmetrix จะแสดงข้อผิดพลาดของภาพที่ปรับขนาดแล้วบอกคุณว่าขนาดที่ถูกต้องพวกเขาควรจะปรับขนาด.

    &# x2705; คุณจะแก้ไขข้อผิดพลาด Specify Image Dimension ใน GTmetrix ได้อย่างไร?

    ดู HTML ของภาพและตรวจสอบเพื่อให้แน่ใจว่ามีความกว้างและความสูงที่ระบุดังที่แสดงในบทช่วยสอนนี้.

    &# x2705; วิธีอื่น ๆ ในการทำให้รูปภาพโหลดเร็วขึ้น?

    การลบข้อมูล EXIF ​​และการใช้ CDN เพื่อให้บริการภาพของคุณจะสร้างความแตกต่างมากที่สุดนอกเหนือจากคำแนะนำใน GTmetrix.

    &# x2705; การเพิ่มประสิทธิภาพของภาพใดดีที่สุด?

    ฉันใช้ ShortPixel เนื่องจากคุณภาพการสูญเสียเป็นศูนย์แทบไม่มีเลยและจะแก้ไขรายการปรับภาพใน GTmetrix.

    คุณคิดอย่างไร?
    รายงาน GTmetrix ของคุณดูดีขึ้นหรือไม่ แจ้งให้เราทราบในความคิดเห็น! และถ้าคุณต้องการคำแนะนำเพิ่มเติมที่จะทำให้คุณได้คะแนน / เวลาในการโหลดที่ดียิ่งขึ้นโปรดดูคู่มือการใช้ความเร็ว WordPress ของฉัน.

    ไชโย,
    ทอม

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map