Πώς να κάνετε λιγότερα αιτήματα HTTP στο WordPress & GTmetrix YSlow

Πρέπει να υποβάλετε λιγότερα αιτήματα HTTP στον ιστότοπό σας στο WordPress?


Αυτό σημαίνει απλώς ότι πρέπει να μειώσετε πόσα στοιχεία (αιτήματα) φορτώνουν στον ιστότοπό σας.

Υποβολή λιγότερων αιτημάτων HTTP

Ο συνδυασμός αρχείων CSS και JavaScript μπορεί να βοηθήσει, αλλά υπάρχουν και άλλες βελτιστοποιήσεις που μπορούν να μειώσουν τα αιτήματα HTTP, όπως απενεργοποίηση επιλεκτικών προσθηκών που δεν χρειάζεται να φορτωθούν σε συγκεκριμένες σελίδες, απενεργοποίηση σεναρίων και στυλ WooCommerce σε σελίδες εκτός ηλεκτρονικού εμπορίου ή αποφυγή υψηλής CPU προσθήκες που δημιουργούν μεγάλο αριθμό αιτημάτων και επιβραδύνουν τον ιστότοπό σας.

Υποβολή λιγότερων αιτημάτων HTTP είναι μια πρόταση σε GTmetrix, Pingdom και άλλα εργαλεία δοκιμής ταχύτητας. Οι παρακάτω προτάσεις θα σας βοηθήσουν να μειώσετε τα αιτήματα και να κάνετε τον ιστότοπό σας πιο γρήγορο.

Contents

1. Συνδυάστε τα φύλλα στυλ CSS + JavaScript

Συνδυασμός φύλλων στυλ CSS + JavaScript σημαίνει ότι πρέπει να αντιγράψετε / επικολλήσετε όλα τα αρχεία CSS σε 1 μόνο αρχείο. Αυτό επιτρέπει στα προγράμματα περιήγησης να υποβάλλουν 1 μόνο αίτημα για ένα αρχείο CSS αντί για πολλαπλά αιτήματα. Οι περισσότερες προσθήκες cache έχουν την επιλογή να συνδυάζουν τα αρχεία CSS + JavaScript.

Βήμα 1: Στις ρυθμίσεις της προσθήκης cache, βρείτε την επιλογή συνδυασμού και ελαχιστοποίησης του CSS + JavaScript.

Βήμα 2: Ενεργοποιήστε κάθε ρύθμιση μία κάθε φορά και τα αποτελέσματα των δοκιμών στο GTmetrix.

Ελαχιστοποίηση συνδυασμού αρχείων CSS

Ελαχιστοποίηση συνδυασμού αρχείων JavaScript

Βήμα 3: Ελέγξτε για ορατά σφάλματα στον ιστότοπό σας. Εάν δείτε σφάλματα, προβάλετε τον πηγαίο κώδικα, βρείτε τα προβληματικά αρχεία και εξαιρέστε τα από τις ρυθμίσεις ελαχιστοποίησης CSS ή JavaScript. Για παράδειγμα, εάν το ρυθμιστικό σας εξαφανιστεί κατά την ενεργοποίηση μιας συγκεκριμένης ρύθμισης, ελέγξτε τα αρχεία ρυθμιστικού στον πηγαίο κώδικα και εξαιρέστε το προβληματικό αρχείο. Εάν δεν βλέπετε σφάλματα, δεν υπάρχει ανάγκη για αυτό.

Εναλλακτικά, μπορείτε να συνδυάσετε με μη αυτόματο τρόπο τα αρχεία CSS στο WordPress κάτω από το Appearance > Πρόγραμμα επεξεργασίας θεμάτων. Θα αντιγράψατε και θα επικολλήσετε απλώς τα περιεχόμενα σε όλα τα αρχεία σε 1 μόνο αρχείο CSS.

Αρχεία CSS WordPress

2. Απενεργοποιήστε επιλεκτικά τις προσθήκες

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

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

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

Βήμα 1: Εγκατάσταση Asset CleanUp ή Αρώματα (και οι δύο σάς επιτρέπουν να απενεργοποιήσετε επιλεκτικά τις προσθήκες).

Βήμα 2: Επεξεργαστείτε μια σελίδα ή ανάρτηση, μετακινηθείτε προς τα κάτω στην ενότητα Asset CleanUp και ελέγξτε ποια αρχεία CSS + JavaScript φορτώνουν στη σελίδα. Αυτά μπορεί να προέρχονται από προσθήκες, θέματα ή εξωτερικά σενάρια.

Απενεργοποιήστε τα εξωτερικά σενάρια του WordPress

Βήμα 3: Απενεργοποιήστε όλες τις προσθήκες και αιτήματα που δεν χρειάζεστε σε αυτήν τη σελίδα. Μπορείτε να τα απενεργοποιήσετε σε 1 μεμονωμένη σελίδα, σε ολόκληρο τον ιστότοπό σας, ανά τύπο δημοσίευσης ή να χρησιμοποιήσετε το RegEx (κανονικές εκφράσεις) για να τα απενεργοποιήσετε σε συγκεκριμένα μοτίβα διευθύνσεων URL. RegEx περιλαμβάνεται μόνο με Perfmatters ή Asset CleanUp Pro.

3. Απενεργοποιήστε το WooCommerce Scripts, Styles, Cart Fragments

Οι ιστότοποι WooCommerce δημιουργούν φυσικά περισσότερα αιτήματα HTTP.

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

Χρησιμοποιώντας Asset CleanUp ή Perfmatters, απενεργοποιήστε τα σε σελίδες όπου δεν χρειάζεται να φορτώσουν:

Asset CleanUp WooCommerce

Εναλλακτικά, το Perfmatters σας επιτρέπει να τα απενεργοποιήσετε με 1 κλικ:

βελτιστοποίηση woocommerce perfmatters

4. Αποφύγετε τις προσθήκες υψηλής CPU

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

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

Βήμα 1: Ελέγξτε για αργές προσθήκες στο GTmetrix Waterfall ή Παρακολούθηση ερωτημάτων.

Slow-WordPress-Plugin

Βήμα 2: Αποφύγετε γνωστά πρόσθετα υψηλής CPU.

  1. Πρόσθεσε αυτό
  2. Παρακολούθηση απάτης κλικ AdSense
  3. Ημερολόγιο εκδηλώσεων Όλα σε Ένα
  4. Εφεδρικός φίλος
  5. Κατασκευαστής Beaver
  6. Καλύτεροι χάρτες ιστότοπων Google XML WordPress
  7. Έλεγχος σπασμένων συνδέσμων (χρησιμοποιήστε το Dr. Link Check)
  8. Συνεχής επαφή για WordPress
  9. Φόρμα επικοινωνίας 7
  10. Προβολή και των 65 αργών προσθηκών

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

5. Αντικαταστήστε τις προσθήκες με κωδικό

Μπορείτε να αποφύγετε πολλά πρόσθετα αντικαθιστώντας τα με κωδικό.

Παραδείγματα:

  • Γραμματοσειρές Google: φιλοξενήστε τις γραμματοσειρές σας τοπικά
  • Κώδικας παρακολούθησης του Google Analytics: εισαγάγετε μη αυτόματα
  • Πίνακας περιεχομένων: σχεδιάστε το χειροκίνητα σε HTML + CSS
  • Ενσωματωμένα Tweets ή Χάρτες Google: τραβήξτε ένα στιγμιότυπο οθόνης
  • Ενσωματωμένο widget Facebook: αντικαταστήστε με το πραγματικό widget Facebook

Ενοποίηση προσθηκών βοηθά επίσης. Ένα κλασικό παράδειγμα είναι η χρήση του WP Rocket που συνοδεύεται από φιλοξενία γραμματοσειρών, αναλυτικών στοιχείων και Facebook Pixel τοπικά, τεμπέλης φόρτωσης εικόνων + βίντεο, εκκαθάρισης βάσης δεδομένων, προφόρτωσης, ελέγχου καρδιακών παλμών και ενσωμάτωσης τόσο του Cloudflare όσο και πολλών CDN. Με άλλες προσθήκες προσωρινής μνήμης (δεδομένου ότι τα περισσότερα από αυτά δεν διαθέτουν αυτές τις δυνατότητες), θα πρέπει να εγκαταστήσετε 6-7 επιπλέον προσθήκες για να λάβετε αυτές τις βελτιστοποιήσεις ταχύτητας, όταν είναι ενσωματωμένες στο WP Rocket.

6. Εξαλείψτε τα εξωτερικά σενάρια

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

Οι γραμματοσειρές Google μπορούν να συνδυαστούν σε 1 αρχείο. Τα βίντεο μπορεί να φορτωθούν αργά και το iframe αντικαθίσταται με μια εικόνα προεπισκόπησης. Πολλά σενάρια μπορούν να βελτιστοποιηθούν, άλλα δεν μπορούν. Ακολουθούν μερικά παραδείγματα.

  • Γραμματοσειρές Google: συνδυάστε γραμματοσειρές και φιλοξενήστε τις τοπικά χρησιμοποιώντας πρόσθετα όπως το WP Rocket, το Autoptimize, OMGF, το Self-Hosted Google Fonts και το Asset CleanUp.
  • Google Analytics: κωδικός παρακολούθησης κεντρικού υπολογιστή τοπικά στο WP Rocket / CAOS Analytics.
  • Google AdSense: φορτώστε ασύγχρονα και δοκιμάστε το Cloudflare Rocket Loader.
  • Χάρτες Google: τραβήξτε ένα στιγμιότυπο του Χάρτη Google και συμπεριλάβετε έναν σύνδεσμο για οδηγίες οδήγησης όταν οι άνθρωποι κάνουν κλικ στην εικόνα (αυτό φαίνεται τόσο καλό όσο ένας Χάρτης)!
  • Διαχειριστής ετικετών Google: συνήθως κάνει περισσότερο κακό παρά καλό όταν προσπαθείτε να συνδυάσετε πολλά σενάρια. Θα πρέπει να χρησιμοποιείται μόνο για μεγάλους, μη βελτιστοποιημένους ιστότοπους.
  • Ενσωματωμένα βίντεο: χρησιμοποιήστε το WP Rocket ή το WP YouTube Lyte για να χαλαρώσετε τα βίντεο και να αντικαταστήσετε το iframe με μια εικόνα προεπισκόπησης (τα βίντεο είναι ένα πολύ βαρύ στοιχείο).
  • Ενσωματωμένα Widgets + Αναρτήσεις: τραβήξτε στιγμιότυπα οθόνης αντί να τα ενσωματώσετε.
  • Facebook Pixel: Το WP Rocket μπορεί να προσθέσει προσωρινή αποθήκευση προγράμματος περιήγησης στο Facebook Pixel.
  • Gravatars: τίποτα δεν λειτούργησε για μένα εκτός από την απενεργοποίηση του Gravatars (το WP Rocket δεν τα χρησιμοποιεί ούτε στο blog τους). Όμως, μπορείτε να δοκιμάσετε τα Harrys, FV ή το Optimum Gravatar Cache ή να σπάσετε ή να αποκρύψετε επεκτάσιμα σχόλια.
  • Πρόσθετα κοινωνικής κοινοποίησης: δημιουργούν κακόβουλα αιτήματα από το Facebook, το Twitter και τα κοινωνικά δίκτυα για ανανέωση. Δοκιμάστε μια ταχύτερη προσθήκη Κοινωνικό πατημασιά, Mashsharer, Κοινωνικό SnapAddToAny, Κοινωνική κοινή χρήση WP, ή Εύκολη κοινωνική κοινή χρήση

7. Συνδυάστε τις Γραμματοσειρές Google

Οι γραμματοσειρές Google μπορούν να συνδυαστούν για τη δημιουργία 1 αιτήματος αντί για πολλαπλά αιτήματα.

Google-Γραμματοσειρές-GTmetrix

Οι ακόλουθες προσθήκες έχουν επιλογές βελτιστοποίησης γραμματοσειρών Google:

  • Πύραυλος WP
  • Καθαρισμός στοιχείων
  • Αυτόματη βελτιστοποίηση
  • OMGF

Η καλύτερη μέθοδος, ωστόσο, είναι να φιλοξενείτε τοπικά τις Γραμματοσειρές Google. Αυτό περιλαμβάνει τη λήψη των γραμματοσειρών σας απευθείας από τον ιστότοπο των Γραμματοσειρών Google, ενώ ταυτόχρονα είναι ελάχιστη με τον αριθμό των γραμματοσειρών και των βαρών γραμματοσειρών. Στη συνέχεια, χρησιμοποιήστε ένα εργαλείο όπως Μεταφορέας ή μετατρέψτε τις γραμματοσειρές σε αρχεία γραμματοσειρών ιστού. Στη συνέχεια, θα ανεβάσετε τα νέα αρχεία γραμματοσειρών ιστού στο φάκελο wp-content / uploads, θα προσθέσετε την προσαρμοσμένη γραμματοσειρά στο CSS και θα δοκιμάσετε τη γραμματοσειρά για να βεβαιωθείτε ότι λειτουργεί. Και πάλι, δείτε αυτόν τον σύνδεσμο για ένα πλήρες σεμινάριο.

Μετατροπή-Google-γραμματοσειρά-μετατροπή

7. Ελαχιστοποιήστε HTML, CSS, JavaScript

Η ελαχιστοποίηση αρχείων γίνεται συνήθως από την προσθήκη cache (βλ. Βήμα 1).

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

8. Βελτιστοποιήστε την παράδοση CSS

Αυτό θα πρέπει να διορθώσει το πόροι αποκλεισμού απόδοσης στοιχείο στο PageSpeed ​​Insights.

Το WP Rocket, το Autoptimize και άλλα παρόμοια πρόσθετα θα πρέπει να έχουν τη δυνατότητα βελτιστοποίησης της παράδοσης CSS. Απλώς μεταβείτε στις ρυθμίσεις σας και βεβαιωθείτε ότι το έχετε ενεργοποιήσει και θα πρέπει να το διορθώσετε.

Βελτιστοποίηση παράδοσης CSS

9. Αναβολή / φόρτωση συνδυασμένων αρχείων JavaScript ασύγχρονα

Η ασύγχρονη JavaScript σημαίνει ότι τα αρχεία φορτώνονται μετά η λήψη της σελίδας ολοκληρώθηκε.

Αυτό μπορεί να γίνει χρησιμοποιώντας WP Rocket ή Async JavaScript και πρέπει να διορθώσετε το αφαιρέστε το στοιχείο Javascript που αποκλείει την απόδοση. Το Async JavaScript σας δίνει τον πλήρη έλεγχο των σεναρίων για να προσθέσετε ένα χαρακτηριστικό «async» ή «defer», ενώ το WP Rocket αποτρέπει την JavaScript αυτόματα με 1 κλικ.

Αρχεία JavaScript

10. Lazy Load βίντεο

Τα ενσωματωμένα βίντεο είναι εξωτερικοί πόροι που δημιουργούν αιτήματα HTTP.

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

Έχετε δύο επιλογές εδώ: μπορείτε να χρησιμοποιήσετε το WP Rocket για να ενεργοποιήσετε την καθυστέρηση φόρτωσης και να αντικαταστήσετε το iframe του YouTube με την εικόνα προεπισκόπησης. Αλλά αν δεν έχετε WP Rocket, μπορείτε είτε να δοκιμάσετε το Πρόσθετο WP YouTube Lyte ή ακολουθήστε αυτό φροντιστήριο για τις ελαφριές ενσωματώσεις YouTube. Και τα δύο λειτουργούν καλά.

Ακολουθεί ένα παράδειγμα (και ένα υπέροχο βίντεο στο WordPress Speed):

11. Προσθέστε ένα CDN

Τα CDN μπορούν να σας βοηθήσουν να κάνετε λιγότερα αιτήματα HTTP.

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

Πολλαπλά CDN = περισσότερα κέντρα δεδομένων = ταχύτερη παράδοση περιεχομένου και περισσότερη εκφόρτωση πόρων. Πολλοί άνθρωποι ξεκινούν με το Cloudflare και στη συνέχεια εξετάζουν το StackPath όταν χρησιμοποιούν πολλά CDN (χρησιμοποιώ αυτήν τη στιγμή και τα δύο). Το KeyCDN είναι επίσης καλό. Αυτό ονομάζεται «αλυσίδα» CDN.

Ρύθμιση πολλαπλών CDN
Με το Cloudflare, σας εκχωρούν 2 διακομιστές ονομάτων που αλλάζετε στο μητρώο τομέα. Με άλλα CDN όπως το StackPath και το KeyCDN, σας εκχωρούν μια διεύθυνση URL CDN την οποία θα επικολλήσετε στο πεδίο της διεύθυνσης URL CDN στην προσθήκη προσωρινής μνήμης (τα περισσότερα από αυτά το έχουν) ή χρησιμοποιούν το CDN Enabler.

Πολλαπλά CDN

12. Ελαχιστοποιήστε τις ανακατευθύνσεις

Οι περιττές ανακατευθύνσεις μπορούν να προκαλέσουν επιπλέον αιτήματα HTTP.

Θα πρέπει να δείτε την αναφορά GTmetrix για να δείτε τι προκαλεί αυτό το σφάλμα. Δημιουργείται από εξωτερικό σενάριο ή προσθήκη στον ιστότοπό σας; Έχετε δοκιμάσει να βελτιστοποιήσετε αυτό το σενάριο ή αναζητάτε ένα πιο ελαφρύ πρόσθετο; Είναι επειδή αλλάξατε την έκδοση του τομέα σας σε μη WWW ή HTTPS, αλλά δεν έχετε ενημερώσει όλους τους συνδέσμους / εικόνες στον ιστότοπό σας για να αντικατοπτρίζει τη νέα έκδοση?

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

Συχνές αιτίες

  • Κακές προσθήκες
  • Εξωτερικά σενάρια
  • Άλλαξε σε WWW έναντι Non-WWW αλλά δεν έχουν ενημερώσει συνδέσμους
  • Άλλαξε σε HTTPS έναντι μη HTTPS αλλά δεν έχει ενημερώσει συνδέσμους

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

Για τη μείωση αιτημάτων HTTP που προκαλούνται από εικόνες, υπάρχουν 3 κύριοι τρόποι βελτιστοποίησης εικόνων:

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

Βελτιστοποίηση εικόνων (Συμπίεση χωρίς απώλειες): χρησιμοποιήστε ένα πρόσθετο όπως ShortPixel (συνιστάται), Smush ή Imagify για συμπίεση εικόνων. Παρόλο που αυτά τα πρόσθετα λένε χωρίς απώλειες, μπορεί μερικές φορές να παρατηρήσετε μια μικρή απώλεια ποιότητας. Γι ‘αυτό είναι καλύτερο να δημιουργείτε αντίγραφα ασφαλείας των εικόνων σας και να δοκιμάζετε μερικές από αυτές πριν από τη μαζική βελτιστοποίηση όλων των εικόνων στον ιστότοπό σας, για να βεβαιωθείτε ότι είστε ικανοποιημένοι με την ποιότητα.

Καθορίστε τις διαστάσεις εικόνας: προσθέστε πλάτος + ύψος στο HTML ή CSS της εικόνας. Αυτό γίνεται αυτόματα στο Visual Editor, αλλά όχι σε προσαρμοσμένο HTML, σε ορισμένους δημιουργούς σελίδων και πιθανώς σε άλλες περιοχές του ιστότοπού σας WordPress. Το GTmetrix θα σας δείξει ποιες εικόνες έχουν αυτά τα σφάλματα και σας παρέχει τις σωστές διαστάσεις τους. Για να διορθώσετε το σφάλμα, θα πρέπει να εντοπίσετε την εικόνα στον πίνακα ελέγχου του WordPress, να επεξεργαστείτε το HTML ή το CSS και, στη συνέχεια, να προσθέσετε το πλάτος + το ύψος.

Εξακολουθεί να χρειάζεται να κάνετε λιγότερα αιτήματα HTTP?

Εάν εξακολουθείτε να χρειάζεστε βοήθεια, αφήστε μου ένα σχόλιο. ο WordPress Speed ​​Up Facebook Group είναι επίσης χρήσιμο, ή μπορείτε να μας προσλάβετε για υπηρεσίες ταχύτητας WordPress με πριν + μετά το GTmetrix αναφορές.

WordPress Speed ​​Up Facebook Group

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

&# x1f680; Τι προκαλεί αιτήματα HTTP?

Τα αιτήματα HTTP είναι οτιδήποτε δημιουργεί ένα αίτημα στο διακομιστή (για παράδειγμα, μια μεμονωμένη εικόνα δημιουργεί 1 αίτημα). Η καρτέλα Καταρράκτης του GTmetrix σας ενημερώνει για όλα τα αιτήματα φόρτωσης σε μια σελίδα.

&# x1f680; Ποια είναι 5 πράγματα που μπορείτε να μειώσετε τα αιτήματα HTTP?

5 εύκολα πράγματα που μπορείτε να κάνετε είναι να συνδυάσετε αρχεία CSS + JavaScript, τεμπέλης φόρτωσης εικόνων και βίντεο, να αποφύγετε τη λίστα με τα πρόσθετα υψηλής CPU, απενεργοποιώντας επιλεκτικά τις προσθήκες από συγκεκριμένες σελίδες / αναρτήσεις με Perfmatters ή Asset CleanUp και βελτιστοποιήστε τις γραμματοσειρές σας.

&# x1f680; Θα βοηθήσει μια προσθήκη κρυφής μνήμης να μειώσει τα αιτήματα HTTP?

Ναι, μια καλή προσθήκη προσωρινής μνήμης θα βοηθήσει στην ελαχιστοποίηση και τον συνδυασμό αρχείων, καθώς και στη μείωση των αιτημάτων HTTP όταν ρυθμιστεί σωστά. Έχω μαθήματα για σχεδόν κάθε προσθήκη cache.

&# x1f680; Η διόρθωση άλλων στοιχείων GTmetrix θα μειώσει τα αιτήματα HTTP?

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

&# x1f680; Ποια προσθήκη προσωρινής μνήμης μειώνει τα αιτήματα HTTP περισσότερο και πώς να τη διαμορφώσετε?

Προτείνω το WP Rocket που είχε βαθμολογία # 1 στις περισσότερες δημοσκοπήσεις στο Facebook και έχει περισσότερες δυνατότητες βελτιστοποίησης ταχύτητας από τις περισσότερες προσθήκες cache, γι ‘αυτό συνήθως αποδίδει καλύτερα αποτελέσματα και χρόνους φόρτωσης στο GTmetrix. Δείτε το σεμινάριό μου σχετικά με τη διαμόρφωση των ρυθμίσεων WP Rocket.

Ευχαριστώ για την ανάγνωση :)

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

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

    วิธีการขอ HTTP ที่น้อยลงใน WordPress และ GTmetrix YSlow

    ต้องการคำขอ HTTP น้อยลงในไซต์ WordPress ของคุณ?


    นี่หมายถึงคุณต้องลดจำนวนองค์ประกอบ (คำร้องขอ) ที่โหลดบนไซต์ของคุณ.

    ทำการร้องขอ HTTP ที่น้อยลง

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

    ทำให้คำขอ HTTP น้อยลง เป็นข้อเสนอแนะใน GTmetrix, Pingdom และเครื่องมือทดสอบความเร็วอื่น ๆ คำแนะนำด้านล่างจะช่วยลดคำขอและทำให้ไซต์ของคุณเร็วขึ้น.

    Contents

    1. รวม CSS Stylesheets + JavaScript

    การรวม CSS Stylesheets กับ JavaScript หมายความว่าคุณต้องคัดลอก / วางทุกอย่างในไฟล์ CSS ของคุณเป็น 1 ไฟล์เดียว สิ่งนี้ทำให้เบราว์เซอร์ทำการร้องขอเพียงครั้งเดียวสำหรับไฟล์ CSS แทนที่จะเป็นการร้องขอหลายครั้ง ปลั๊กอินแคชส่วนใหญ่มีตัวเลือกในการรวมไฟล์ CSS + JavaScript ของคุณ.

    ขั้นตอนที่ 1: ในการตั้งค่าปลั๊กอินแคชค้นหาตัวเลือกเพื่อรวมและย่อขนาด CSS + JavaScript.

    ขั้นตอนที่ 2: เปิดใช้งานการตั้งค่าแต่ละรายการทีละรายการและทดสอบผลลัพธ์ใน GTmetrix.

    ย่อขนาดรวมไฟล์ CSS

    ย่อขนาดรวมไฟล์ JavaScript

    ขั้นตอนที่ 3: ตรวจสอบข้อผิดพลาดที่มองเห็นได้บนเว็บไซต์ของคุณ หากคุณพบข้อผิดพลาดให้ดูซอร์สโค้ดค้นหาไฟล์ที่มีปัญหาและแยกออกจากการตั้งค่าการลดขนาดของ CSS หรือ JavaScript ตัวอย่างเช่นหากตัวเลื่อนของคุณหายไปเมื่อเปิดใช้งานการตั้งค่าบางอย่างให้ตรวจสอบไฟล์ตัวเลื่อนของคุณในซอร์สโค้ดและยกเว้นไฟล์ที่มีปัญหา หากคุณไม่เห็นข้อผิดพลาดคุณไม่จำเป็นต้องทำสิ่งนี้.

    หรือคุณสามารถรวมไฟล์ CSS ของคุณลงใน WordPress ได้ด้วยตัวเอง > ตัวแก้ไขธีม. คุณเพียงแค่คัดลอกและวางเนื้อหาในไฟล์ทั้งหมดลงในไฟล์ CSS เดียว 1 ไฟล์.

    ไฟล์ CSS ของ WordPress

    2. เลือกปิดใช้งานปลั๊กอิน

    มีปลั๊กอินจำนวนมากที่ทำงานทั่วทั้งไซต์ของคุณแม้กระทั่งบนหน้าเว็บที่พวกเขาไม่ต้องการ.

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

    เมื่อปิดการใช้งานปลั๊กอินในหน้าเว็บที่ไม่จำเป็นต้องโหลดสิ่งนี้จะทำให้คำขอ HTTP น้อยลง ไม่ จำกัด เฉพาะปลั๊กอิน สคริปต์และรูปแบบสามารถปิดใช้งานในบางหน้า (เช่นสคริปต์ WooCommerce สไตล์รูปแบบชิ้นส่วนของรถเข็นสามารถปิดใช้งานได้ในหน้าที่ไม่ใช่อีคอมเมิร์ซ).

    ขั้นตอนที่ 1: ติดตั้งการล้างค่าสินทรัพย์หรือ Perfmatters (ทั้งสองอย่างให้คุณเลือกปิดการใช้งานปลั๊กอิน).

    ขั้นตอนที่ 2: แก้ไขหน้าหรือโพสต์เลื่อนลงไปที่ส่วนล้างข้อมูลสินทรัพย์และตรวจสอบไฟล์ CSS + JavaScript ที่โหลดบนหน้า สิ่งเหล่านี้อาจมาจากปลั๊กอินธีมหรือสคริปต์ภายนอก.

    ปิดใช้งานสคริปต์ภายนอกของ WordPress

    ขั้นตอนที่ 3: ปิดใช้งานปลั๊กอินและคำขอทั้งหมดที่คุณไม่ต้องการบนหน้านั้น คุณสามารถปิดการใช้งานพวกเขาใน 1 หน้าเดียวทั่วทั้งไซต์ของคุณตามประเภทโพสต์หรือใช้ RegEx (การแสดงออกปกติ) เพื่อปิดการใช้งานพวกเขาในรูปแบบ URL ที่เฉพาะเจาะจง. RegEx รวมอยู่ใน Perfmatters หรือ Asset CleanUp Pro เท่านั้น.

    3. ปิดการใช้งานสคริปต์ WooCommerce สไตล์รูปแบบของชิ้นส่วนรถเข็น

    ไซต์ WooCommerce สร้างคำขอ HTTP มากขึ้นตามธรรมชาติ.

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

    การใช้การล้างข้อมูลบนสินทรัพย์หรือตัวทำลายระบบปิดใช้งานสิ่งเหล่านี้ในหน้าเว็บที่ไม่จำเป็นต้องโหลด:

    Asset CleanUp WooCommerce

    อีกทางหนึ่ง Perfmatters ช่วยให้คุณปิดการใช้งานเหล่านี้ใน 1 คลิก:

    perfmatters การเพิ่มประสิทธิภาพ woocommerce

    4. หลีกเลี่ยงปลั๊กอินของ CPU สูง

    ปลั๊กอิน CPU สูงสามารถสร้างคำขอ HTTP จำนวนมาก.

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

    ขั้นตอนที่ 1: ตรวจสอบปลั๊กอินช้าใน GTmetrix Waterfall หรือ การตรวจสอบแบบสอบถาม.

    ช้าเวิร์ดเพรสปลั๊กอิน

    ขั้นตอนที่ 2: หลีกเลี่ยงปลั๊กอินซีพียูที่รู้จักกันดี.

    1. เพิ่มสิ่งนี้
    2. การตรวจสอบการโกงคลิกของ AdSense
    3. ปฏิทินกิจกรรม All-In-One
    4. สำรองเพื่อน
    5. Beaver Builder
    6. WordPress แผนผังเว็บไซต์ XML ของ Google ที่ดีขึ้น
    7. ตัวตรวจสอบลิงก์ที่ใช้งานไม่ได้ (ใช้ Dr. Link Check)
    8. ติดต่ออย่างต่อเนื่องสำหรับ WordPress
    9. แบบฟอร์มการติดต่อ 7
    10. ดูปลั๊กอินที่ทำงานช้าทั้งหมด 65 รายการ

    ขั้นตอนที่ 3: แทนที่ปลั๊กอินช้าด้วยปลั๊กอินที่เร็วและน้ำหนักเบา ต้องมีการวิจัยและทดสอบ.

    5. แทนที่ปลั๊กอินด้วยรหัส

    คุณสามารถหลีกเลี่ยงปลั๊กอินจำนวนมากโดยแทนที่ด้วยรหัส.

    ตัวอย่าง:

    • Google Fonts: โฮสต์ฟอนต์ของคุณในเครื่อง
    • รหัสติดตามของ Google Analytics: แทรกด้วยตนเอง
    • สารบัญ: ออกแบบด้วยตนเองใน HTML + CSS
    • ทวีตฝังตัวหรือ Google Maps: จับภาพหน้าจอแทน
    • วิดเจ็ต Facebook ในตัว: แทนที่ด้วยวิดเจ็ต Facebook จริง

    การรวมปลั๊กอิน ยังช่วย ตัวอย่างคลาสสิกอย่างหนึ่งคือการใช้ WP Rocket ซึ่งมาพร้อมกับโฮสติ้งแบบอักษรการวิเคราะห์และ Facebook Pixel แบบโลคอลการโหลดรูปภาพ + วิดีโอขี้เกียจการล้างฐานข้อมูลการโหลดล่วงหน้าการควบคุมการเต้นของหัวใจและการรวมทั้ง Cloudflare และ CDNs หลายตัว สำหรับปลั๊กอินแคชอื่น ๆ (เนื่องจากส่วนใหญ่ไม่มีคุณสมบัติเหล่านี้) คุณจะต้องติดตั้งปลั๊กอินเสริม 6-7 ชุดเพื่อรับการเพิ่มประสิทธิภาพความเร็วเหล่านั้นเมื่อติดตั้ง WP Rocket ในตัว.

    6. กำจัดสคริปต์ภายนอก

    สคริปต์ภายนอกเป็นสิ่งที่ดึงคำขอจากเว็บไซต์ภายนอก.

    Google Fonts สามารถรวมกันเป็น 1 ไฟล์ สามารถโหลดวิดีโอได้อย่างขี้เกียจและ iframe จะถูกแทนที่ด้วยภาพตัวอย่าง สคริปต์จำนวนมากสามารถเพิ่มประสิทธิภาพได้และสคริปต์อื่น ๆ ไม่สามารถทำได้ ด้านล่างเป็นตัวอย่างบางส่วน.

    • Google แบบอักษร: รวมฟอนต์และโฮสต์ด้วยโลคัลโดยใช้ปลั๊กอินเช่น WP Rocket, ลดขนาดอัตโนมัติ, OMGF, Google ฟอนต์ที่โฮสต์ในตัวและล้างค่าเนื้อหา.
    • Google Analytics: รหัสติดตามโฮสต์ในเครื่อง WP Rocket / CAOS Analytics.
    • Google AdSense: โหลดแบบอะซิงโครนัสและลองใช้ Cloudflare Rocket Loader.
    • Google Maps: ถ่ายรูป sceenshot ของ Google Map และใส่ลิงค์ไปยังเส้นทางการขับขี่เมื่อมีคนคลิกที่ภาพ (นี่ดูดีเหมือนแผนที่)!
    • Google Tag Manager: โดยปกติแล้วจะเป็นอันตรายมากกว่าดีเมื่อพยายามรวมสคริปต์หลาย ๆ ตัว ควรใช้สำหรับไซต์ขนาดใหญ่ที่ไม่ได้เพิ่มประสิทธิภาพเท่านั้น.
    • วิดีโอแบบฝัง: ใช้ WP Rocket หรือ WP YouTube Lyte เพื่อโหลดวิดีโอแบบขี้เกียจและแทนที่ iframe ด้วยภาพตัวอย่าง (วิดีโอเป็นองค์ประกอบที่หนักมาก).
    • วิดเจ็ตแบบฝัง + โพสต์: จับภาพหน้าจอแทนที่จะฝังไว้.
    • พิกเซล Facebook: WP Rocket สามารถเพิ่มการแคชของเบราว์เซอร์ใน Facebook Pixel.
    • Gravatars: ไม่มีอะไรที่เหมาะกับฉันนอกจากปิดการใช้งาน Gravatars (WP Rocket ไม่ใช้กับบล็อกของพวกเขา) แต่คุณสามารถลองใช้ Harrys, FV หรือ Optimum Gravatar Cache หรือลองทำลายหรือซ่อนความคิดเห็นที่ขยายได้.
    • ปลั๊กอินการแบ่งปันทางสังคม: สร้างคำขอจาก Facebook, Twitter และเครือข่ายสังคมออนไลน์เพื่อสร้างรายชื่อใหม่ ลองใช้ปลั๊กอินที่เร็วกว่าเช่น Social Pug, Mashsharer, Social SnapAddToAny, WP Social Sharing, หรือ แบ่งปันสังคมได้ง่าย

    7. รวม Google แบบอักษร

    Google Fonts สามารถรวมกันเพื่อสร้าง 1 คำขอแทนคำขอหลายรายการ.

    ของ Google Fonts-GTmetrix

    ปลั๊กอินต่อไปนี้มีตัวเลือกสำหรับการเพิ่มประสิทธิภาพ Google Fonts:

    • จรวด WP
    • การล้างข้อมูลสินทรัพย์
    • Autoptimize
    • OMGF

    อย่างไรก็ตามวิธีที่ดีที่สุดคือการโฮสต์ Google แบบอักษรในเครื่อง สิ่งนี้เกี่ยวข้องกับการดาวน์โหลดแบบอักษรของคุณโดยตรงจากเว็บไซต์ Google แบบอักษรขณะที่มีจำนวนแบบอักษรและน้ำหนักแบบอักษรน้อยที่สุด จากนั้นใช้เครื่องมือเช่น Transfonter หรือแปลงฟอนต์เป็นไฟล์ฟอนต์บนเว็บ จากนั้นคุณจะอัปโหลดไฟล์แบบอักษรเว็บใหม่ไปยังโฟลเดอร์ wp-content / uploads เพิ่มแบบอักษรที่กำหนดเองลงใน CSS และทดสอบแบบอักษรเพื่อให้แน่ใจว่ามันทำงานได้ดี อีกครั้งดูลิงค์นั้นสำหรับการสอนเต็มรูปแบบ.

    Transfonter จาก Google Font-แปลง

    7. ลด HTML, CSS, JavaScript

    โดยปกติแล้วการย่อขนาดไฟล์จะทำโดยปลั๊กอินแคชของคุณ (ดูขั้นตอนที่ 1).

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

    8. เพิ่มประสิทธิภาพการจัดส่ง CSS

    สิ่งนี้ควรแก้ไข ทรัพยากรการปิดกั้นการแสดงผล รายการใน PageSpeed ​​Insights.

    WP Rocket, Autoptimize และปลั๊กอินอื่น ๆ ที่คล้ายกันควรมีตัวเลือกในการเพิ่มประสิทธิภาพการส่ง CSS เพียงเข้าไปที่การตั้งค่าของคุณและตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานสิ่งนี้และควรแก้ไข.

    เพิ่มประสิทธิภาพการจัดส่ง CSS

    9. เลื่อน / โหลดไฟล์ JavaScript แบบรวมพร้อมกัน

    อะซิงโครนัส JavaScript หมายถึงโหลดไฟล์ หลังจาก หน้าดาวน์โหลดเสร็จแล้ว.

    สามารถทำได้โดยใช้ WP Rocket หรือ Async JavaScript และควรแก้ไข ลบรายการ Javascript ที่บล็อกการแสดงผล. Async JavaScript ช่วยให้คุณควบคุมได้อย่างเต็มที่ว่าสคริปต์ใดที่จะเพิ่มแอททริบิวต์ ‘async’ หรือ ‘defer’ ในขณะที่ WP Rocket defers JavaScript โดยอัตโนมัติด้วย 1 คลิก.

    ไฟล์ JavaScript

    10. วิดีโอโหลดขี้เกียจ

    วิดีโอที่ฝังเป็นทรัพยากรภายนอกที่สร้างคำขอ HTTP.

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

    คุณมีสองสามตัวเลือกที่นี่: คุณสามารถใช้ WP Rocket เพื่อเปิดใช้งานการโหลดแบบสันหลังยาวและแทนที่ iframe ของ YouTube ด้วยภาพตัวอย่าง แต่ถ้าคุณไม่มี WP Rocket คุณสามารถลอง ปลั๊กอิน WP YouTube Lyte หรือทำตามนี้ การสอนเกี่ยวกับ YouTube เบาฝัง. ทั้งทำงานได้ดี.

    นี่คือตัวอย่าง (และวิดีโอยอดเยี่ยมเกี่ยวกับ WordPress Speed):

    11. เพิ่ม CDN

    CDNs สามารถช่วยในการร้องขอ HTTP น้อยลง.

    แทนที่จะทำให้เซิร์ฟเวอร์ต้นทางของคุณตอบสนองต่อการร้องขอศูนย์ข้อมูลของ CDN จะถ่ายโอนแบนด์วิดท์ขณะที่ลดน้ำหนักของเซิร์ฟเวอร์ต้นทาง Cloudflare ให้บริการฟรีดังนั้นจึงเป็นเกมง่ายๆ.

    Multiple CDNs = ศูนย์ข้อมูลเพิ่มเติม = การส่งเนื้อหาที่เร็วขึ้นและการถ่ายทรัพยากรออกมากขึ้น หลายคนเริ่มต้นด้วย Cloudflare จากนั้นในที่สุดก็มองเป็น StackPath เมื่อใช้หลาย CDNs (ตอนนี้ฉันใช้ทั้งคู่) KeyCDN ก็ดีเช่นกัน สิ่งนี้เรียกว่า “เชน” ของ CDNs.

    การตั้งค่าหลาย CDNs
    ด้วย Cloudflare พวกเขาจะกำหนด 2 เนมเซิร์ฟเวอร์ที่คุณเปลี่ยนในการลงทะเบียนโดเมน ด้วย CDN อื่น ๆ เช่น StackPath และ KeyCDN พวกเขาจะกำหนด CDN URL ให้คุณซึ่งคุณจะวางลงในช่อง CDN URL ในปลั๊กอินแคชของคุณ (ส่วนใหญ่มี) หรือใช้ CDN Enabler.

    หลาย CDNs

    12. ลดการเปลี่ยนเส้นทาง

    การเปลี่ยนเส้นทางที่ไม่จำเป็นอาจทำให้เกิดคำขอ HTTP เพิ่มเติมได้.

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

    ลดข้อผิดพลาดการเปลี่ยนเส้นทาง

    สาเหตุที่พบบ่อย

    • ปลั๊กอินไม่ดี
    • สคริปต์ภายนอก
    • เปลี่ยนเป็น WWW เทียบกับไม่ใช่ WWW แต่ยังไม่มีลิงก์ที่อัปเดต
    • เปลี่ยนเป็น HTTPS เทียบกับที่ไม่ใช่ HTTPS แต่ยังไม่มีลิงก์ที่อัปเดต

    13. ปรับภาพให้เหมาะสม

    หากต้องการลดคำขอ HTTP ที่เกิดจากรูปภาพมีวิธีหลัก 3 วิธีในการปรับภาพให้เหมาะสมที่สุด:

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

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

    ระบุขนาดภาพ: เพิ่มความกว้าง + ความสูงลงใน HTML หรือ CSS ของรูปภาพ สิ่งนี้จะทำโดยอัตโนมัติใน Visual Editor แต่ไม่ใช่ HTML ที่กำหนดเองผู้สร้างหน้าบางคนและพื้นที่อื่น ๆ ของไซต์ WordPress ของคุณ GTmetrix จะแสดงให้คุณเห็นว่ารูปภาพใดมี errros เหล่านี้และให้มิติที่ถูกต้องแก่คุณ ในการแก้ไขข้อผิดพลาดคุณจะต้องค้นหาภาพในแผงควบคุม WordPress ของคุณแก้ไข HTML หรือ CSS จากนั้นเพิ่มความกว้าง + ความสูง.

    ยังคงต้องทำให้คำขอ HTTP น้อยลง?

    หากคุณยังต้องการความช่วยเหลือโปรดแสดงความคิดเห็น WordPress เร่งความเร็วกลุ่ม Facebook มีประโยชน์เช่นกันหรือคุณสามารถจ้างเราสำหรับบริการความเร็ว WordPress ด้วย + ก่อนหน้าหลังจากรายงาน GTmetrix.

    WordPress เร่งความเร็วกลุ่ม Facebook

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

    &# x1f680; สาเหตุของคำขอ HTTP คืออะไร?

    คำขอ HTTP คือสิ่งใดก็ตามที่สร้างคำขอไปยังเซิร์ฟเวอร์ (เช่นรูปภาพเดียวสร้าง 1 คำขอ) แท็บ Waterfall ของ GTmetrix จะบอกให้คุณทำการร้องขอทั้งหมดในหน้า.

    &# x1f680; คุณสามารถลดการร้องขอ HTTP ได้ 5 ประการ?

    5 สิ่งง่าย ๆ ที่คุณสามารถทำได้คือการรวมไฟล์ CSS + JavaScript, ภาพโหลดและวิดีโอที่ขี้เกียจ, หลีกเลี่ยงรายการปลั๊กอิน CPU สูงของเรา, เลือกปิดใช้งานปลั๊กอินจากบางหน้า / โพสต์ด้วย Perfmatters หรือ Asset CleanUp และเพิ่มประสิทธิภาพแบบอักษรของคุณ.

    &# x1f680; ปลั๊กอินแคชจะช่วยลดคำขอ HTTP หรือไม่?

    ใช่ปลั๊กอินแคชที่ดีควรช่วยย่อขนาดและรวมไฟล์รวมทั้งลดคำขอ HTTP เมื่อกำหนดค่าอย่างถูกต้อง ฉันมีบทเรียนสำหรับปลั๊กอินแคชเกือบทุกอัน.

    &# x1f680; การแก้ไขรายการ GTmetrix อื่น ๆ จะลดคำขอ HTTP?

    ใช่ในหลาย ๆ กรณีโดยเฉพาะอย่างยิ่งการลดขนาดและรวมไฟล์กำจัดข้อผิดพลาดในการเปลี่ยนเส้นทางและการใช้ CDN สามารถช่วยได้เช่นกัน.

    &# x1f680; ปลั๊กอินแคชใดที่ช่วยลดการร้องขอ HTTP ได้มากที่สุดและวิธีกำหนดค่า?

    ฉันแนะนำ WP Rocket ซึ่งได้รับการจัดอันดับ # 1 ในโพล Facebook ส่วนใหญ่และมีคุณสมบัติการเพิ่มประสิทธิภาพความเร็วมากกว่าปลั๊กอินแคชส่วนใหญ่ซึ่งเป็นสาเหตุที่มักให้คะแนนและเวลาในการโหลดที่ดีขึ้นใน GTmetrix ลองดูบทช่วยสอนของฉันเกี่ยวกับการกำหนดการตั้งค่า WP Rocket.

    ขอบคุณที่อ่าน :)

    ไชโย,
    ทอม

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