Πώς να αυξήσετε την ταχύτητα φόρτωσης του WordPress. Υπηρεσία Google PageSpeed ​​Insights

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

Καταργήστε τον κώδικα JavaScript και CSS που εμποδίζει την απόδοση του επάνω μέρους της σελίδας. Τι σημαίνει αυτό

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

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

Θα πω αμέσως - δεν είμαι καλός στον προγραμματισμό και στα δικά μου WordPress blogΠροτιμώ τα σενάρια από τη μη αυτόματη τροποποίηση κώδικα αρχεία συστήματος. Αναρωτιόμουν πώς να το κάνω αυτή τη σύστασηκαι βρήκα διέξοδο.

Η προσθήκη Autoptimize διορθώνει αυτό το πρόβλημα

1) Εγκαταστήστε την προσθήκη Autoptimize.

2) Ρυθμίστε ακριβώς όπως περιέγραψα στο .

3) Εάν το PageSpeed ​​Tools εξακολουθεί να εμφανίζει σφάλμα, δείτε σε ποια σενάρια αντιδρά και αφαιρέστε τα από τη γραμμή στις ρυθμίσεις της προσθήκης Autoptimize (Επιλογές JavaScript - Εξαίρεση σεναρίων από το Autoptimize). Αυτό σημαίνει ότι θα βελτιστοποιηθούν.

4) Να χαίρεσαι! Το PageSpeed ​​Tools δεν παραπονιέται πλέον.

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

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

Προστέθηκε 17/05/2017:

Αφαίρεσα το Webvisor από το Yandex (καθώς επιβραδύνει πολύ την ταχύτητα φόρτωσης) και άλλαξα τον κώδικα Metrics στον ιστότοπο. Τώρα έχω 98%.

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

Φυσικά, η αξιολόγηση της ταχύτητας της ιστοσελίδας σας μπορεί να φαίνεται λίγο δύσκολη. Υπάρχουν πολλοί παράγοντες που μπορούν να επηρεάσουν το αποτέλεσμα - ταχύτητα σύνδεσης στο Διαδίκτυο, γεωγραφική θέση κ.λπ. Ωστόσο, μην ανησυχείτε, τα PageSpeed ​​Insights της Google μπορούν να σας βοηθήσουν σε αυτό το δύσκολο έργο. Αυτό δωρεάν υπηρεσίααπό την Google, η οποία βαθμολογεί έναν ιστότοπο με βάση την ταχύτητα φόρτωσης. Στην ιδανική περίπτωση, θα πρέπει να προσπαθήσετε να λάβετε την υψηλότερη βαθμολογία PageSpeed. Και αν το έχετε ήδη χρησιμοποιήσει αυτό διαδικτυακό εργαλείο, πράγμα που σημαίνει ότι μπορεί να έχετε συναντήσει μια αρκετά γνωστή σύσταση για τη βελτιστοποίηση της ταχύτητας φόρτωσης του ιστότοπου.

Τι σημαίνει Κατάργηση JavaScript και CSS που μπλοκάρει το επάνω μέρος της σελίδας

Για να μάθουμε λίγα περισσότερα σχετικά με αυτήν την πρόταση, πρέπει να ρίξουμε μια ματιά στα κριτήρια με τα οποία η Google εκδίδει βαθμολογίες στο PageSpeed ​​Insights. Υπάρχουν 10 κανόνες ταχύτητας που ορίζονται από την Google και η μη τήρηση ενός από αυτούς θα έχει ως αποτέλεσμα τη μείωση της βαθμολογίας.

Καταργήστε τον κώδικα JavaScript και CSS που εμποδίζει την απόδοση ενός από αυτούς τους κανόνες στο επάνω μέρος της σελίδας. Τυπικά η φόρτωση σεναρίων JS και CSS προκαλεί το πρόγραμμα περιήγησης να καθυστερήσει τη φόρτωση σελίδες HTML. Φυσικά αυτό δεν είναι πρόβλημα. Ακόμη περισσότερο, αυτό είναι που θέλετε, κανείς δεν θα θέλει να κοιτάξει τον ιστότοπο χωρίς τον κατάλληλο σχεδιασμό.

Ωστόσο, η Κατάργηση κώδικα JavaScript και CSS αναφέρεται σε εκείνα τα σενάρια που επηρεάζουν την απόκριση της σελίδας αλλά δεν χρησιμοποιούνται στο περιεχόμενο της κορυφής της σελίδας (ATF). Το περιεχόμενο ATF είναι το τμήμα της σελίδας που είναι ορατό στον χρήστη όταν φορτώνεται η σελίδα. Οποιοδήποτε τμήμα μιας σελίδας που απαιτεί από εσάς να κάνετε κύλιση προς τα κάτω για προβολή δεν είναι ATF. Επομένως, η Google, με αυτή τη σύσταση, σας λέει ότι έχετε σενάρια JS και CSS στη σελίδα σας, τα οποία επιβραδύνουν άσκοπα τη φόρτωση του ιστότοπου, καθώς το τμήμα της σελίδας που επηρεάζουν δεν είναι ακόμα ορατό στον χρήστη.

Τι να κάνετε αν Σελίδα GoogleΤαχύτηταβρέθηκε JavaScript και κώδικας CSS που εμποδίζουν την απόδοση του επάνω μέρους της σελίδας. Ας μάθουμε ποια είναι η ουσία των ισχυρισμών της Google για τον ιστότοπό σας:

Όταν ένας χρήστης ανοίγει έναν ιστότοπο, το πρόγραμμα περιήγησης στέλνει ένα αίτημα στον διακομιστή, λαμβάνει το αποτέλεσμα και το παρουσιάζει. Όλα γίνονται τόσο απλά με ιστότοπους χωρίς ρυθμιστικά, δυναμικά στοιχείακαι στυλ. Ένα αίτημα - μία απάντηση. Εάν ο ιστότοπός σας έχει διαδραστικό περιεχόμενο, το σχήμα γίνεται πιο περίπλοκο: επιπλέον αρχεία(.css, .js, κ.λπ.)

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

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

Αφαιρέστε JavaScript και CSS από την κορυφή της σελίδας

Για να διασφαλίσετε ότι ο ιστότοπός σας πληροί αυτήν την απαίτηση βελτιστοποίησης:

• αφαιρέστε τον κώδικα JS από την ετικέτα (πάνω μέρος της σελίδας). Παρακαλούμε βεβαιωθείτε ότι τυχόν αιτήματα σε εξωτερικούς πόρουςβρίσκεται όσο το δυνατόν πιο κοντά στο τέλος του αρχείου html. Το αίτημα JavaScript θα πρέπει να τοποθετηθεί πριν από την ετικέτα κλεισίματος.

Η εξαίρεση είναι το CSS: συνιστάται η φόρτωση στυλ σε μια ετικέτα, προ-κολλημένη και ελαχιστοποιημένη. Διαβάστε σχετικά με τη βελτιστοποίηση κώδικα CSS.

• χρήση ασύγχρονης φόρτωση javascript. Η ασύγχρονη φόρτωση θα επιτρέψει στο πρόγραμμα περιήγησης να μην σταματήσει ενώ περιμένει μια απάντηση από εξωτερικό διακομιστήκαι συνεχίστε την επεξεργασία του κύριου εγγράφου html. Για να προσθέσετε ασύγχρονη φόρτωση, χρησιμοποιήστε το χαρακτηριστικό async.

Παρακαλώ σημειώστε

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

Μπορείτε να αφαιρέσετε αυτόματα JavaScript και κώδικα CSS από την κορυφή της σελίδας χρησιμοποιώντας ειδικά πρόσθετα CMS.

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

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

Η ουσία του προβλήματος

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

Πώς να αφαιρέσετε JavaScript που εμποδίζει την εμφάνιση του επάνω μέρους της σελίδας

•   Αρχικά, πρέπει να βεβαιωθούμε ότι η JavaScript δεν εμπλέκεται στη διαδικασία απόδοσης σελίδας.
•   Σενάρια μικρό μέγεθοςτοποθετείται στο περιεχόμενο HTMLσελίδες. Για παράδειγμα:
•  
•   Ελέγχουμε τα σενάρια για εξαρτήσεις και σειρά φόρτωσης. Εάν δεν είναι διαθέσιμο ούτε το ένα ούτε το άλλο, προσθέστε το χαρακτηριστικό "async" σε αυτά:
•  
•   Χάρη σε αυτό το χαρακτηριστικό, τέτοια σενάρια θα φορτώνονται ασύγχρονα.

Αυτές οι οδηγίες δεν μπορούν να εφαρμοστούν σε Βιβλιοθήκη jQuery, το οποίο χρησιμοποιείται στη συντριπτική πλειοψηφία των τοποθεσιών. Στη συνέχεια, ας δούμε τη σωστή λύση για το JQuery.

Εάν τοποθετήσετε το jquery.js πριν από την ετικέτα κλεισίματος ή προσπαθήσετε να το φορτώσετε ασύγχρονα, τότε τα εξαρτημένα σενάρια απλώς θα σταματήσουν να λειτουργούν και πολλές λειτουργίες του ιστότοπου θα πέσουν. Η σωστή απόφαση V σε αυτή την περίπτωσηΗ χρήση του συμβάντος onload μπορεί να βοηθήσει:

συνάρτηση asyncjs() (
 … 
}

Επί δημοφιλή cmsΤα πρόσθετα χρησιμοποιούνται για την επίλυση τέτοιων προβλημάτων. Η αρχή τους είναι κάπως διαφορετική από αυτή που περιγράφηκε παραπάνω. Ας δούμε το παράδειγμα του Autoptimize για Wordpress:

•   Το πρόσθετο συνδυάζει όλα τα *.js και τα ενσωματωμένα σενάρια σε ένα αρχείο. Σε αυτή την περίπτωση, διατηρείται η σειρά φόρτωσης.
•   Ένα μεμονωμένο αρχείο περιλαμβάνεται στο υποσέλιδο της σελίδας με το χαρακτηριστικό async.

Μπορείτε επίσης να χρησιμοποιήσετε αυτή τη μέθοδογια αυτογραφείς τοποθεσίες cms ή καθαρής HTML:

Αποκλεισμός css - λύσεις

Επί αυτή τη στιγμήΟ νεότερος τρόπος επίλυσης αυτού του προβλήματος είναι να χρησιμοποιήσετε την τυποποιημένη οδηγία προφόρτωσης. Επιτρέπει στα προγράμματα περιήγησης να ανακτούν το style.css χωρίς να εμποδίζουν την απόδοση.

Ανακάλυψε αυτή τη μέθοδο Σκοτ Τζελ, σχεδιαστής και προγραμματιστής στο The Filament Group.

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

Επομένως, δεν θα συζητήσουμε αυτή τη μέθοδο με περισσότερες λεπτομέρειες τώρα, αλλά θα εξετάσουμε μια συντηρητική μέθοδο.

Το θέμα αυτής της μεθόδου είναι να τοποθετηθούν στο head section τα πιο σημαντικά κομμάτια στυλ (critical css), τα οποία είναι απαραίτητα για την αρχική απόδοση της σελίδας. Με τη σειρά τους, τα κύρια αρχεία css θα φορτωθούν μετά τη φόρτωση του περιεχομένου. Οι περισσότεροι αρχάριοι κάνουν ένα σοβαρό λάθος σε αυτό το στάδιο και εισάγουν όλα τα διαθέσιμα στυλ στο έγγραφο. Αυτό όχι μόνο δεν λύνει την κατάσταση, αλλά και την επιδεινώνει.

Σωστή λύση:



/*Κρίσιμο css*/
h1 (στοίχιση κειμένου: κέντρο, χρώμα: #ccc )



Περιεχόμενο σελίδας
...



$(document).ready(function() (
$("head").append("");
});

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

Εν κατακλείδι, θα ήθελα να προσθέσω ότι το Google PageSpeed ​​είναι καλό εργαλείογια να εντοπίσετε προβληματικές περιοχές στον ιστότοπό σας. Αλλά όταν αναλύεται δεν το λαμβάνει υπόψη ατομικά χαρακτηριστικά. Ως εκ τούτου, η πιο σημαντική συμβουλή: ακολουθήστε μια προσεκτική προσέγγιση για την εφαρμογή των συστάσεων του!

Συνεχίζω, τώρα έχω ένα ακόμη σημείο μπροστά μου που μου πρότεινε η Google: Αφαιρέστε τον κώδικα JavaScript και CSS από την κορυφή της σελίδας που μπλοκάρει την εμφάνιση. Τώρα θα προσπαθήσω να καταλάβω τι είναι περιττό εκεί και πώς να αφαιρέσω τα περιττά JavaScript και CSS;

Επιτρέψτε μου να σας υπενθυμίσω ότι πραγματοποιώ δοκιμές με αυτήν την υπηρεσία: όπου μου δόθηκαν συγκεκριμένες συμβουλές σχετικά με το JavaScript και το CSS:

Όπως μπορείτε να δείτε, αυτό είναι το μεγαλύτερο πρόβλημα που έχω, φορτώνονται 8 σενάρια ταυτόχρονα και γι' αυτό, η πρώτη οθόνη δεν φορτώνει όσο γρήγορα θα ήθελα. Υπάρχουν επίσης 10 αρχεία css που επίσης δεν είναι βελτιστοποιημένα. Λοιπόν, ας λύσουμε το πρόβλημα!

Οι ισχυρισμοί για αυτό το θέμα είναι κάπως έτσι:

Καταργήστε τον κώδικα JavaScript που εμποδίζει την εμφάνιση:

• https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
• https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
• https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
• https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
• https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

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

συνάρτηση jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_uritemplate'/)_ js/jquery.easing.1.3.js', array('jquery')) ;

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

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

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

Προς έκπληξή μου, βρήκα μια άλλη, πολύ απλή λύση σε αυτό το ζήτημα - εγκατέστησα το πρόσθετο Asynchronous Javascript. Μετά την εγκατάσταση έλαβα το εξής αποτέλεσμα:

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

Έτσι λύνεται εύκολα το πρώτο σημείο, αλλά όπως μπορείτε να δείτε, αυτό εξακολουθεί να μην είναι αρκετό, πρέπει να βελτιστοποιήσετε το css, πώς να το κάνετε αυτό;

Πώς να βελτιστοποιήσετε Εργασία CSS?

Επιτρέψτε μου να σας υπενθυμίσω τη λίστα με τα παράπονα:

Βελτιστοποιήστε το CSS σας στους ακόλουθους πόρους:

• https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
• https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
• https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css

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

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

Πώς να βελτιστοποιήσετε τα πάντα ταυτόχρονα;

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

Μετά από αυτό, το Google Page Speed ​​εμφανίζει αυτό:

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

Στην αρχή νόμιζα ότι αυτό το πρόσθετο δεν θα έλυνε εντελώς τα προβλήματά μου, αλλά όπως αποδείχτηκε, αυτό έγινε επειδή δεν το ρύθμισα πλήρως! Αφού τσέκαρα τα κουτάκια στη σωστή θέση, πήρα ένα ΥΠΕΡΟΧΟ αποτέλεσμα! ΟΛΑ ΤΑ ΠΡΟΒΛΗΜΑΤΑ ΕΦΥΓΑΝ!

Για να το κάνετε αυτό, πρέπει να κάνετε κλικ στο κουμπί Εμφάνιση στο επάνω μέρος προηγμένες ρυθμίσειςκαι μετά θα εμφανιστούν πρόσθετες ρυθμίσεις. Πρέπει να σημειωθούν τα ακόλουθα στοιχεία:

Βελτιστοποίηση κώδικα HTML;

Βελτιστοποίηση κώδικα JavaScript;

Ψάξτε για σενάρια μόνο στο ? (καταργήθηκε)

Βελτιστοποιήστε τον κώδικα CSS σας;

Ενσωματωμένα όλα τα CSS;

Αποθηκεύστε συγκεντρωτικά σενάρια/css ως στατικά αρχεία

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

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

Ένα άλλο παρόμοιο πρόσθετο είναι το WP Minify Fix, κάνει το ίδιο πράγμα, αλλά μου άρεσε λιγότερο ή ίσως απλώς δεν το κατάλαβα πλήρως.

Καταλαβαίνω ότι είναι ιδανικό να τα κάνετε όλα αυτά χωρίς πρόσθετα, χειροκίνητα, αλλά είναι πολύ μεγάλο και κουραστικό και πραγματικά δεν αξίζει τον κόπο, γιατί ακόμα κι αν πετύχετε βαθμολογία 100, δεν θα φέρετε τον ιστότοπό σας στην κορυφή - φόρτωση ιστότοπου Η ταχύτητα είναι μόνο ΕΝΑΣ από εκατοντάδες παράγοντες κατάταξης, διαδρομή και αρκετά σημαντικός. Πρέπει όμως να κάνεις ό,τι μπορείς!

Αφαίρεση JavaScript και CSS Google PageSpeed ​​​​Code

ΣΥΜΒΟΥΛΕΣ WEBMASTER: Η ικανότητα να κερδίσετε χρήματα στο Διαδίκτυο είναι μόνο η μισή μάχη, η άλλη μισή είναι η ικανότητα να εξαργυρώνετε ΚΕΡΔΟΦΟΡΑ από ηλεκτρονικό χρήμα. Ακολουθεί μια λίστα με υπεράκτιες τραπεζικές κάρτες στις οποίες μπορείτε να κάνετε ανάληψη χρημάτων και στη συνέχεια να αποσύρετε ευκρινείς λογαριασμούς από αυτές:

1. Payoneer - Το πιο δημοφιλές σύστημα πληρωμών στον κόσμο για ελεύθερους επαγγελματίες. Κάρτες εκδόσεων, που βρίσκονται στις Η.Π.Α.

2. EpayService - Αμερικανικό σύστημα πληρωμών, πολύ δημοφιλές σε πολλές χώρες, δίνει δωρεάν Κάρτα MasterCardστον ΕΒΡΟ για κατοίκους ΚΑΚ και Ευρώπης.

3. Skrill - Το μόνο σύστημα πληρωμών που λειτουργεί με κρυπτονομίσματα και ταυτόχρονα εκδίδει δωρεάν τραπεζικές κάρτες MasterCard.

4. AdvCash - Υπεράκτια τράπεζα που βρίσκεται στο Μπελίζ, μπορείτε να ανοίξετε λογαριασμό σε δολάρια, ευρώ, λίρες και ρούβλια.

5. Payeer - Η έδρα αυτού σύστημα πληρωμώνβρίσκεται στη Γεωργία, μπορείτε επίσης να ανοίξετε λογαριασμό σε δολάρια, ευρώ και ρούβλια.

Τομέας RU - 99 RUR Τομέας RF - 99 RUR