Βελτιστοποίηση ταχύτητας για κινητά στο WordPress (Οδηγός 2020): Πώς να βελτιώσετε τον χρόνο φόρτωσης για κινητά και τους βαθμούς σελίδας ταχύτητας του ιστότοπού σας

Θέλετε να επιταχύνετε τον ιστότοπό σας για φορητές συσκευές WordPress?


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

Βελτιστοποίηση ταχύτητας για φορητές συσκευές WordPress

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

1. GTmetrix Mobile Test
Με δωρεάν λογαριασμός GTmetrix, μπορείτε να δοκιμάσετε τον ιστότοπό σας σε Android. Η καρτέλα PageSpeed ​​είναι μοναδική για κινητά, ενώ το YSlow είναι ίδιο με τον υπολογιστή. Η καρτέλα PageSpeed ​​εμφανίζει σφάλματα κλιμακωτής εικόνας εάν δεν χρησιμοποιείτε προσαρμοστικές εικόνες, καθώς και σφάλματα ανακατεύθυνσης και τον χρόνο φόρτωσης του κινητού σας.

2. Google PageSpeed ​​Insights
Το Google PageSpeed ​​Insights διαθέτει μια καρτέλα “για κινητά” που σας ενημερώνει για βελτιστοποιήσεις για κινητά. Ωστόσο, δεν πρέπει να χρησιμοποιείτε το PageSpeed ​​Insights ούτως ή άλλως δεδομένου ότι υπάρχει έμφαση στις βαθμολογίες (και όχι στους χρόνους φόρτωσης) τις οποίες δεν μετρά καν, οπότε χρησιμοποιήστε το GTmetrix ή άλλο εργαλείο.

3. Σκεφτείτε με το Google
Σκεφτείτε με το Google δεν είναι υπέροχο. Ακριβώς όπως το PageSpeed ​​Insights, οι προτάσεις είναι κάπως ευρείες (με το GTmetrix μπορείτε πραγματικά να επεκτείνετε τις προτάσεις για να δείτε ποιες προσθήκες, σενάρια και εικόνες επιβραδύνουν τον ιστότοπό σας). Σκεφτείτε ότι η Google δεν το κάνει αυτό.

Σκεφτείτε με το Google Mobile Speed

4. Google Analytics
Μπορείτε να δείτε καθέναν από τους χρόνους φόρτωσης για κινητά της σελίδας σας η ΣΥΜΠΕΡΙΦΟΡΑ > Ταχύτητα ιστότοπου Στη συνέχεια, προσθέστε ένα τμήμα για επισκεψιμότητα από κινητά και tablet. ο προτάσεις ταχύτητας καρτέλα μπορεί επίσης να είναι χρήσιμη, αλλά και πάλι, αναφέρεται σε προτάσεις του Google PageSpeed ​​Insights που δεν είναι καθόλου χρήσιμες.

Contents

1. Ενεργοποίηση προσωρινής αποθήκευσης μέσω κινητού

Οι περισσότερες προσθήκες cache όπως το WP Rocket και το Ταχύτερη προσωρινή μνήμη WP έχετε μια επιλογή για προσωρινή αποθήκευση μέσω κινητού.

Προσωρινή μνήμη για κινητά

Εάν η προσθήκη προσωρινής μνήμης δεν συνοδεύεται από προσωρινή αποθήκευση μέσω κινητού, μάθετε αν το υποστηρίζει τουλάχιστον. Εάν όχι, σκεφτείτε να χρησιμοποιήσετε μια προσθήκη προσωρινής μνήμης. Μερικοί έχουν επίσης την επιλογή να δημιουργήσουν ξεχωριστά αρχεία προσωρινής μνήμης για κινητές συσκευές το οποίο διασφαλίζει ότι τα στοιχεία για κινητά είναι προσωρινά αποθηκευμένα (κυρίως χρήσιμα εάν χρησιμοποιείτε μια προσθήκη για κινητά όπως το WP Touch, το WP Mobile Detect ή το θέμα του JetPack για κινητά).

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

Το WP Rocket λέει:

2. Χρησιμοποιήστε προσαρμοστικές εικόνες

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

«Προσαρμοστικές εικόνες εντοπίζει το μέγεθος της οθόνης του επισκέπτη σας και δημιουργεί αυτόματα, προσωρινά αποθηκεύει και παραδίδει κατάλληλες εκ νέου κλίμακες εκδόσεων των ενσωματωμένων εικόνων HTML της ιστοσελίδας σας. “

Βήμα 1: Δοκιμάστε τον ιστότοπό σας στο GTmetrix (Android) για να δείτε σφάλματα προβολής κλιμακωτής εικόνας σε κινητά.

Δοκιμή κινητού GTmetrix

Προβολή κλιμακωτών εικόνων σε κινητό

Βήμα 2: Βρείτε το προτεινόμενο πλάτος εικόνας στο GTmetrix.

Μέγιστο πλάτος φόντου

Βήμα 3: Εγκαταστήστε μια προσαρμοστική προσθήκη εικόνων από ShortPixel ή Προσαρμοστικές εικόνες.

Προσαρμοστικές εικόνες ShortPixel

Βήμα 3: Στις ρυθμίσεις προσθηκών σας, ορίστε το μέγιστο πλάτος φόντου στις διαστάσεις που παρέχονται από το GTmetrix (στην ενότητα “Κλιμακούμενες εικόνες προβολής”). Αποθήκευσε τις αλλαγές. Υπάρχουν μερικές άλλες ρυθμίσεις για υποστήριξη WebP, τεμπέλης φόρτωση εικόνων, έξυπνη περικοπή και αφαίρεση δεδομένων EXIF.

Μέγιστο πλάτος φόντου

Βήμα 4: Ελέγξτε ξανά τον ιστότοπό σας σε GTmetrix (Android) και προβάλλετε κλιμακωτές εικόνες που θα πρέπει να είναι 100%.

Δοκιμή κινητού GTmetrix

3. Ενεργοποιήστε το Cloudflare Mirage

Cloudflare λέει:

«Το Mirage σχεδιάστηκε για να κάνει τη φόρτωση εικόνων γρηγορότερη με δύο βασικούς τρόπους: 1) παράδοση μικρότερων εικόνων για συσκευές με μικρότερες οθόνες. και 2) εικόνες “τεμπέλης φόρτωσης” μόνο όταν εμφανίστηκαν στη θύρα προβολής. Και οι δύο αυτές βελτιστοποιήσεις σχεδιάστηκαν κυρίως για να επιταχύνουν την απόδοση του ιστού σε κινητές συσκευές. “

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

Cloudflare Mirage

4. Χρησιμοποιήστε αποκριτικά θέματα και προσθήκες

Αποκριτικά θέματα και προσθήκες προσαρμόζονται φυσικά σε φορητές συσκευές.

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

Χρησιμοποιώ προσωπικά το StudioPress και το Genesis Framework τους, το οποίο χρησιμοποιείται επίσης από το Yoast.

Ανταποκρίσιμος σχεδιασμός

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

5. Διορθώστε τις ανακατευθύνσεις για κινητά

Εάν δείτε σφάλματα “ελαχιστοποίηση ανακατεύθυνσης” στο GTmetrix, πιθανότατα προέρχεται από ένα από αυτά:

  • Αλλάξατε σε HTTPS ή WWW και δεν ενημερώσατε τους συνδέσμους
  • Ρυθμίζετε τους Κανόνες σελίδας στο Cloudflare με διευθύνσεις URL προώθησης
  • Οι προσθήκες με λανθασμένη κωδικοποίηση ή εσφαλμένη διαμόρφωση ανακατευθύνουν την επισκεψιμότητα του ιστότοπου
  • Οι επιλογές Cloudflare SSL δεν είναι συμβατές με τη διαμόρφωση του διακομιστή σας (βλ φροντιστήριο)

Εάν χρησιμοποιείτε το Cloudflare, μπορείτε να το χρησιμοποιήσετε επιλογή ανακατεύθυνσης για κινητά που λένε «ανακατευθύνει αυτόματα τους επισκέπτες της κινητής συσκευής σε έναν υποτομέα βελτιστοποιημένο για κινητά. Η ανακατεύθυνση πραγματοποιείται στην άκρη του δικτύου Cloudflare, βελτιώνοντας τον χρόνο φόρτωσης εξαλείφοντας μια επιστροφή στον διακομιστή προέλευσης – αυτό είναι ιδιαίτερα πολύτιμο σε δίκτυα κινητής τηλεφωνίας, το οποίο εξυπηρετεί περιεχόμενο πιο αργό από το wifi. “

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

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

6. Μειώστε το χρόνο απόκρισης διακομιστή

Ο διακομιστής σας (φιλοξενία) είναι ο # 1 παράγοντας στον οδηγό βελτιστοποίησης WordPress.

Εκτελέστε τον ιστότοπό σας μέσω του Google PageSpeed ​​Insights για να ελέγξετε το δικό σας χρόνος απόκρισης διακομιστή που θα έπρεπε να είναι <200ms όπως προτείνει η Google. GoDaddy και ΕΙΚ (Bluehost, HostGator, iPage, Site5) είναι διαβόητοι για αργούς διακομιστές. Αυτό είναι γνωστό στο Twitter και στο Facebook Groups. Γίνε μελος WordPress Φιλοξενία Facebook Group και κοιτάξτε τις δημοσκοπήσεις που πραγματοποιήθηκαν κατά τη φιλοξενία.

Μειώστε το χρόνο απόκρισης διακομιστή

SiteGround και Cloudways είναι συνήθως # 1 και # 2. Πολλά άτομα έχουν ήδη μεταναστεύσει και έχουν δημοσιεύσει τους νέους χρόνους φόρτωσής τους στο Twitter – η διαφορά μπορεί μερικές φορές να είναι έως και 8 δευτερόλεπτα. Τόσο το SiteGround (κοινόχρηστο) όσο και το Cloudways (cloud) είναι καλές επιλογές ανάλογα με τον προϋπολογισμό και τις ανάγκες σας, αλλά και οι δύο είναι καλύτεροι από τους GoDaddy και EIG. Και οι δύο θα σας μεταναστεύσουν δωρεάν.

Το SiteGround και το Cloudways θα σας μεταφέρουν δωρεάν.

Μετάβαση σε SiteGround

Μετεγκατάσταση χρόνου φόρτωσης SiteGround

Bluehost στο SiteGround GTmetrix

HostGator To SiteGround

SiteGround GTmetrix

SiteGround Google PageSpeed ​​Insights

100 τέλεια βαθμολογία στο SiteGround

HostGator To SiteGround Migration

Χρόνοι απόκρισης SiteGround στο Joomla

Μετάβαση σε SiteGround Hosting

SiteGround Rocket Imagify Combo

Joomla GTmetrix στο SiteGround

Ιστότοποι SiteGround PageSpeed

SiteGround On Joomla

Φιλοξενία Δημοσκόπησης 2019

2017-WordPress-Hosting-FB-Poll

Προτάσεις φιλοξενίας Elementor

Σύσταση φιλοξενίας Ιουλίου 2019

WordPress-Host-Poll-Αυγ-2018

Shared-Hosting-Poll-2017

2019-Φιλοξενία-Δημοσκόπηση

Go-To-Hosting-Company

WordPress-Hosting-Poll-2017

Διαχειριζόμενη-Φιλοξενία-Δημοσκόπηση

2016-WordPress-Hosting-FB-Δημοσκόπηση

Αγαπημένη φιλοξενία για Elementor

Προτάσεις φιλοξενίας 2018

Διαχείριση-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Φιλοξενία-Ψηφοφορία για ταχύτητα

WordPress-Hosting-Poll-Ιούνιος-1

SiteGround-Σύσταση

7. Μην χρησιμοποιείτε AMP

ΑΜΠΕΡΑΖ (επιταχυνόμενες σελίδες για κινητά) είναι ένα έργο Google που κάνει τις σελίδες για κινητές συσκευές να φορτώνουν γρηγορότερα, ενώ σας δίνει μια σφραγίδα AMP στα αποτελέσματα αναζήτησης για κινητά.

Ωστόσο, η AMP αλλάζει επίσης εντελώς τη σχεδίαση του κινητού σας.

Kinsta’s οι μετατροπές μειώθηκαν 58% κατά την προσθήκη AMP, και έκτοτε επέστρεψαν στις κανονικές τους σελίδες για κινητά. Έχω επίσης αποφασίσει εναντίον της AMP, καθώς ο σχεδιασμός δεν φαίνεται υπέροχος. Υπάρχουν πρόσθετα AMP που βοηθούν στη σχεδίαση, αλλά εξακολουθούν να είναι αρκετά περιορισμένα και μπορεί να είστε απογοητευμένοι με το αποτέλεσμα. Και αν αποφασίσατε να προσθέσετε AMP και μετά να το καταργήσετε, είναι επιπλέον δουλειά καθώς θα πρέπει να ρυθμίσετε ανακατευθύνσεις και να λάβετε άλλα μέτρα για να επιστρέψετε σε κανονικές σελίδες για κινητά.

Θυσιάζετε το σχεδιασμό και τις μετατροπές για ταχύτητα. Αξίζει το AMP; Δεν το χρησιμοποιώ.

AMP στο Google

Στο παρελθόν χρησιμοποιούσα AMP, αλλά έκτοτε το κατάργησα:

amp-σελίδες

Εάν αποφασίσετε να χρησιμοποιήσετε AMP, χρησιμοποιήστε το AMP για WP Plugin
Εάν πρόκειται να προσθέσετε AMP, πιθανότατα θα πρέπει να χρησιμοποιήσετε το AMP για προσθήκη WP. Έχει τις περισσότερες επιλογές προσαρμογής από οποιοδήποτε πρόσθετο AMP που έχω δει (ακόμη και το Πρόσθετο AMP υποστηρίζεται από την Google και την Automattic). Υπάρχει επίσης Κόλλα για Yoast & ΑΜΠΕΡΑΖ το οποίο έχει επίσης ελάχιστες επιλογές.

AMP για WP

Cloudflare AMP Real URL

Το Cloudflare λέει Πραγματικές διευθύνσεις URL AMP “Σημαίνει ότι μια σελίδα μπορεί να αποθηκευτεί σε μια προσωρινή μνήμη AMP και να προβληθεί γρήγορα από αυτήν, ενώ εμφανίζεται η αρχική διεύθυνση URL του ιστότοπου στη γραμμή πλοήγησης του προγράμματος περιήγησης.”

Μπορείτε να το βρείτε στις ρυθμίσεις ταχύτητας του Cloudflare:

Cloudflare AMP Real

8. Βελτιστοποιήσεις επιτραπέζιων υπολογιστών Μεταφέρονται στο κινητό

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

Μιλάω για:

  • Προσθήκη CDN
  • Βελτιστοποίηση εικόνων
  • Βελτιστοποίηση προσθηκών
  • Καθαρισμός της βάσης δεδομένων σας
  • Αναβάθμιση εκδόσεων PHP
  • Αναβάθμιση του διακομιστή / φιλοξενίας σας
  • Διαμόρφωση καλής προσθήκης προσωρινής μνήμης
  • Βελτιστοποίηση εξωτερικών σεναρίων (π.χ. Γραμματοσειρές Google)

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

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

9. Εκτελέστε PHP 7.3+

Αυτό είναι εξαιρετικά εύκολο και μπορεί να κάνει τον ιστότοπό σας 2-3x γρηγορότερα.

Σημεία αναφοράς PHP WordPress

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

Ενημέρωση PHP

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

10. Ρύθμιση CDN

Δεν υπάρχει απολύτως κανένας λόγος να μην το χρησιμοποιήσετε Το δωρεάν CDN του Cloudflare.

Έχουν 200+ κέντρα δεδομένων σε όλο τον κόσμο. Χρησιμοποιώντας αυτά τα κέντρα δεδομένων για τη φιλοξενία βαρέων αρχείων στον ιστότοπό σας, μειώνετε το γεωγραφική απόσταση μεταξύ του διακομιστή και των επισκεπτών σας (μια πρόταση στον οδηγό βελτιστοποίησης του WordPress). Επίσης, αποφορτώνετε την κατανάλωση εύρους ζώνης στο Cloudflare, η οποία μπορεί να εξοικονομήσει κατανάλωση CPU και χρήματα στο λογαριασμό φιλοξενίας σας.

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

Ρύθμιση πολλαπλών CDN
Πολλαπλά CDN = περισσότερα κέντρα δεδομένων = ταχύτερη παράδοση του περιεχομένου σας. Οι μικροί ιστότοποι πρέπει να είναι εντάξει με το Cloudflare, αλλά αν είστε σοβαροί για την ταχύτητα ή έχετε έναν μεγάλο ιστότοπο, μπορείτε να εξετάσετε ένα επιπλέον CDN από κάποιον όπως το StackPath ή το KeyCDN (χρησιμοποιώ το Cloudflare + StackPath). Ενώ το Cloudflare απαιτεί αλλαγή ονομάτων, άλλα CDN είναι πολύ πιο εύκολα. Θα σας εκχωρήσουν ένα URL CDN για το οποίο τα περισσότερα πρόσθετα cache έχουν πεδίο ή χρήση Ενεργοποίηση CDNρ.

Πολλαπλά CDN

11. Βελτιστοποιήστε τις εικόνες

Οι εικόνες μπορούν να βελτιστοποιηθούν με 3 τρόπους σύμφωνα με το GTmetrix:

  • Προβάλετε κλιμακωτές εικόνες: αλλαγή μεγέθους μεγάλων εικόνων ώστε να είναι μικρότερες
  • Βελτιστοποίηση εικόνων (συμπίεση χωρίς απώλειες): δοκιμάστε το ShortPixel, το Imagify ή το Smush
  • Καθορίστε τις διαστάσεις της εικόνας: προσθήκη πλάτους + ύψους στο HTML ή CSS της εικόνας

Το GTmetrix εμφανίζει σφάλματα μόνο για μία σελίδα. Γι ‘αυτό είναι καλύτερο να βελτιστοποιήσετε πρώτα τις εικόνες που εμφανίζονται σε πολλές σελίδες (λογότυπο, πλευρική γραμμή και εικόνες υποσέλιδου) και, στη συνέχεια, να επεξεργαστείτε τις πιο σημαντικές σελίδες σας. Είναι επίσης καλύτερο να ξεκινήσετε κλιμάκωση εικόνων καθώς αυτό απαιτεί περικοπή / αλλαγή μεγέθους εικόνων και επαναφόρτωση. Το GTmetrix θα σας πει τις σωστές διαστάσεις για εικόνες χωρίς κλίμακα και για αυτές που έχουν χωρίς καθορισμένο πλάτος + ύψος στο HTML ή CSS.

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

12. Βελτιστοποιήστε τις προσθήκες

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

Καθαρισμός στοιχείων είναι ιδανικό για την επιτάχυνση των προσθηκών. Σας επιτρέπει να δείτε ποιες προσθήκες, σενάρια και στυλ φορτώνονται σε συγκεκριμένες σελίδες και, στη συνέχεια, να τις απενεργοποιήσετε επιλεκτικά σε περιεχόμενο όπου δεν χρειάζεται να φορτωθούν. Εάν δεν το κάνετε ήδη, θα συνιστούσα 100% να χρησιμοποιήσετε το Asset CleanUp.

  • Αποφύγετε τις υψηλές προσθήκες CPU: αποφύγετε αυτήν τη λίστα αργών προσθηκών. Οι συνηθισμένες αργές προσθήκες περιλαμβάνουν κοινωνικά πρόσθετα κοινής χρήσης, χαρτοφυλάκια, ρυθμιστικό, στατιστικά, αντίγραφα ασφαλείας και άλλα.
  • Αντικαταστήστε τις προσθήκες υψηλής CPU με ταχύτερα πρόσθετα: Θα απαιτηθεί κάποια έρευνα, αλλά αντικαταστήστε οποιαδήποτε από τα υψηλά πρόσθετα CPU με ταχύτερα, πιο ελαφριά πρόσθετα.
  • Διαγράψτε τις προσθήκες που δεν χρειάζεστε: μπορείτε να αντικαταστήσετε τις προσθήκες με κώδικα (π.χ. να εισαγάγετε απευθείας τον κώδικα παρακολούθησης GA, να χρησιμοποιήσετε widget Facebook αντί για προσθήκες ή να δημιουργήσετε έναν πίνακα περιεχομένων σε HTML + CSS; Τυχόν προσθήκες που μπορείτε να αντικαταστήσετε με κώδικα, κάντε το.
  • Μην χρησιμοποιείτε το JetPack για μερικές ενότητες: πρώτα, απενεργοποιήστε όλες τις λειτουργικές μονάδες που δεν χρησιμοποιείτε αυτήν τη στιγμή στις ρυθμίσεις εντοπισμού σφαλμάτων. Στη συνέχεια, χρειάζεστε πραγματικά το JetPack εάν το χρησιμοποιείτε μόνο για δύο πράγματα; Είναι διαβόητο για την επιβράδυνση των ιστότοπων. Στοιχηματίζετε να βρείτε ένα μη φουσκωμένο πρόσθετο που κάνει μόνο την ίδια λειτουργικότητα.
  • Βρείτε τις πιο αργές προσθήκες σας: χρησιμοποιήστε την καρτέλα GTmetrix Waterfall ή το Query Monitor (η καρτέλα ερωτήματα κατά συστατικά) για να δείτε τις πιο αργές προσθήκες σας. Εάν μια προσθήκη εμφανίζεται πολλές φορές στην αναφορά PageSpeed ​​+ YSlow, αυτό μπορεί επίσης να είναι ένα indictor.

13. Βελτιστοποιήστε τα εξωτερικά σενάρια

Εξωτερικά σενάρια είναι οτιδήποτε τραβά αιτήματα από εξωτερικούς ιστότοπους.

Τα πιο συνηθισμένα εξωτερικά σενάρια είναι οι Γραμματοσειρές Google, το Google Analytics, ο Διαχειριστής ετικετών Google, το AdSense, οι Χάρτες, τα πρόσθετα κοινής χρήσης, τα ενσωματωμένα βίντεο, τα Gravatars και ακόμη και το Facebook Pixel.

Εξωτερικά σενάρια στο GTmetrix

Ορισμένα σενάρια τρίτων είναι εύκολο να βελτιστοποιηθούν:

  • Γραμματοσειρές Google μπορούν να συνδυαστούν και να φιλοξενηθούν τοπικά χρησιμοποιώντας WP Rocket, Autoptimize ή ακόμη και Asset CleanUp. Να είστε ελάχιστοι με γραμματοσειρές + βάρη!
  • Google Analytics μπορεί να βελτιστοποιηθεί χρησιμοποιώντας WP Rocket ή CAOS Analytics.
  • Ενσωματωμένα βίντεο μπορεί να φορτωθεί αργά και το iframe να αντικατασταθεί με μια εικόνα προεπισκόπησης χρησιμοποιώντας WP Rocket, WP YouTube Lyte ή χρήση ελαφρές ενσωματώσεις YouTube.
  • Προσθέστε προσωρινή μνήμη προγράμματος περιήγησης στο Facebook Pixel μπορεί να γίνει χρησιμοποιώντας το πρόσθετο του WP Rocket.
  • Πρόσθετα κοινής χρήσης πρέπει να ενημερώσετε “like counts” (τουλάχιστον πολλοί από αυτούς). Αυτό απαιτεί απλώς την εύρεση ελαφρών προσθηκών κοινής χρήσης και δοκιμών.
  • Αχρησιμοποίητες λειτουργικές μονάδες JetPack θα πρέπει να απενεργοποιηθεί (βρείτε αυτά στις ρυθμίσεις εντοπισμού σφαλμάτων).

Άλλα σενάρια τρίτων δεν είναι τόσο εύκολο:

  • Google AdSense μπορεί να φορτωθεί ασύγχρονα, τεμπέλης φορτωμένο, ή μπορείτε να δοκιμάσετε το Cloudflare SG Railgun που βοηθά στην επιτάχυνση του δυναμικού περιεχομένου. Ωστόσο, ενδέχεται να είναι δύσκολο να εφαρμοστούν και το AdSense μπορεί να σκοτώσει απολύτως τα αποτελέσματα GTmetrix και τους χρόνους φόρτωσης. Γι ‘αυτό προτείνω αντ’ αυτού το μάρκετινγκ συνεργατών.
  • Διαχειριστής ετικετών Google πρέπει να χρησιμοποιείται μόνο για μεγάλους, μη βελτιστοποιημένους ιστότοπους. Διαφορετικά, συνήθως κάνει περισσότερο κακό παρά καλό όταν πρόκειται για χρόνους φόρτωσης.

14. Preconnect και Prefetch

Η προ-σύνδεση και η προ-λήψη διευκολύνουν την πρόσβαση των προγραμμάτων περιήγησης πρόβλεψη αιτημάτων τρίτων (Γραμματοσειρές Google, Analytics, AdSense, ενσωματωμένα βίντεο και άλλους εξωτερικούς ιστότοπους).

Mozilla λέει:

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

Τρόπος προεκτύπωσης αιτημάτων DNS
Προ * συμβουλές πόρων για πάρτι έχει τις ακόλουθες δυνατότητες: DNS prefetch, prerender, preonnect, prefetch και preload (εδώ είναι τα δικά τους ορισμοί). Αυτά είναι χρήσιμα αν έχετε σενάρια τρίτων στον ιστότοπό σας (Γραμματοσειρές Google, Analytics, βίντεο YouTube, Gravatars κ.λπ.). Αντιγράψτε αυτήν τη λίστα του κοινοί εξωτερικοί τομείς (ή προσθέστε το δικό σας) και προσθέστε τα είτε στο Pre * Party είτε στο WP Rocket.

Prefetch-DNS-Requests

15. Χρησιμοποιήστε ένα πρόσθετο Better Cache

Δεν είναι όλα τα πρόσθετα cache ίδια.

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

Το αποτέλεσμα?

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

Οι δυνατότητες WP Rocket δεν περιλαμβάνονται στις περισσότερες προσθήκες Cache:

  • Εκκαθάριση βάσης δεδομένων: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε το WP-Optimize.
  • Τεμπέλης φόρτωση: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε το WP YouTube Lyte.
  • Έλεγχος καρδιακών παλμών: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε το Heartbeat Control.
  • Τοπικό Google Analytics: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε το CAOS Analytics.
  • Τοπικές γραμματοσειρές Google: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε είτε OMGF είτε SHGF.
  • Προεπισκόπηση αιτημάτων DNS: ενσωματωμένο στο WP Rocket ή χρησιμοποιήστε συμβουλές πόρων πριν από το πάρτι.
  • Προσωρινή αποθήκευση προγράμματος περιήγησης Pixel στο Facebook: ενσωματωμένο στο WP Rocket (κανένα άλλο πρόσθετο δεν το κάνει).
  • CDN: ενσωματωμένο στο WP Rocket (και τα δύο Cloudflare + πολλαπλά CDN) ή χρησιμοποιήστε το CDN Enabler.

Η καλύτερη δημοσκόπηση προσθηκών cache του 2016

Δημοσκόπηση προσθηκών cache 2019

Swift vs WP Rocket

Δημοσκόπηση προσθηκών cache 2016

Καλύτερες προσθήκες cache 2018 δημοσκόπηση

wp rocket εναντίον w3 totla cache

16. Καθαρίστε τη βάση δεδομένων σας

Ο τακτικός καθαρισμός της βάσης δεδομένων σας αποτρέπει τη φούσκωμα.

Μπορείς να χρησιμοποιήσεις WP-Βελτιστοποίηση ή WP Rocket για προγραμματισμό εβδομαδιαίων ή διμηνιαίων εκκαθαρίσεων βάσεων δεδομένων (αλλά συνιστάται η λήψη αντιγράφων ασφαλείας). Συνήθως, τα πάντα στις ρυθμίσεις θα πρέπει να διαγραφούν εκτός από μη εγκεκριμένα σχόλια. Οι πίνακες βάσης δεδομένων αφήνονται συχνά από προσθήκες που διαγράψατε, δημιουργείται μια αναθεώρηση ανάρτησης κάθε φορά που επεξεργάζεστε μια ανάρτηση, θα πρέπει να αδειάζετε τον φάκελο απορριμμάτων και ούτω καθεξής.

Βάση δεδομένων WP-Optimize Clean

Προτείνω επίσης τα Perfmatters ή Clearfy να περιορίσουν τις αναθεωρήσεις μετά από 2-3, να απενεργοποιήσουν τα αυτόματα πρόχειρα και να απενεργοποιήσουν τα pingbacks + trackbacks. Ονομάζω αυτές τις «διάφορες βελτιστοποιήσεις» και χρησιμοποιώ Perfmatters από την Kinsta που έχει τις ακόλουθες δυνατότητες (σας επιτρέπει επίσης να απενεργοποιήσετε επιλεκτικά πρόσθετα + σενάρια):

χαρακτηριστικά perfmatters

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

&# x1f680; Οι βελτιστοποιήσεις επιτραπέζιου υπολογιστή βελτιώνουν επίσης τους χρόνους φόρτωσης για κινητά?

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

&# x1f680; Ποιος είναι ο ευκολότερος τρόπος βελτίωσης της ταχύτητας του κινητού στο WordPress?

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

&# x1f680; Ποιες βελτιστοποιήσεις επιφάνειας εργασίας μεταφέρονται στο κινητό?

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

&# x1f680; Τι γίνεται με τις προτάσεις για κινητά από το Google PageSpeed ​​Insights?

Είστε πολύ καλύτερα να δώσετε προσοχή στην καρτέλα Waterfall του GTmetrix από το Google PageSpeed ​​Insights, καθώς αυτό σας λέει ακριβώς ποια στοιχεία χρειάζονται περισσότερο χρόνο για φόρτωση και οι προτάσεις είναι πιο συγκεκριμένες. Το μεγαλύτερο μέρος της κοινότητας του WordPress σας λέει να μην προσέχετε ούτε καν το Google PageSpeed ​​Insights και να επικεντρωθείτε στο GTmetrix.

&# x1f680; Ποιος είναι ο πιο ακριβής τρόπος για να δοκιμάσετε τους χρόνους φόρτωσης για κινητά?

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

Χρειάζεστε βοήθεια με την ταχύτητα του WordPress για κινητά?

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

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

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