Διορθώστε το Google PageSpeed ​​Αποκλείστε το JavaScript και το CSS από το κλείδωμα της εμφάνισης στο περιεχόμενο που βρίσκεται πιο ψηλά

Η δοκιμή Google PageSpeed ​​[1] Εξαλείψτε το JavaScript και το CSS κατά το κλείσιμο του JavaScript σας προτείνει να παραδώσετε τα αρχεία JS και CSS του ιστότοπού σας μετά την πλήρη φόρτωση του κώδικα HTML και συνεπώς να μην σταματήσετε τη φόρτωση HTML για να τα κατεβάσετε.


Επίλυση Javascript και CSS αποκλεισμού απόδοσης

Η δοκιμή  Google PageSpeed   ​​[1] Εξαλείψτε το JavaScript και το CSS κατά το κλείσιμο του JavaScript σας προτείνει να παραδώσετε τα αρχεία JS και CSS του ιστότοπού σας μετά την πλήρη φόρτωση του κώδικα HTML και συνεπώς να μην σταματήσετε τη φόρτωση HTML για να τα κατεβάσετε.

[1] - PageSpeed ​​Insights - developers.google.com
Ορισμός σεναρίου αποκλεισμού απόδοσης: Σενάρια που φορτώνονται πριν από την ανάλυση του πλήρους HTML DOM. Για παράδειγμα, σενάρια που περιλαμβάνονται στην κεφαλίδα ή στο περιεχόμενο, χωρίς συγκεκριμένες οδηγίες για τα προγράμματα περιήγησης να καθυστερήσουν τη φόρτωση σεναρίου μέχρι μετά τη βαφή HTML.

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

  1. Έχετε ένα εξωτερικό σύστημα να βελτιστοποιήσει τον ιστότοπό σας για εσάς
  2. Χρησιμοποιήστε ένα CDN που θα εκτελεί όλες τις πιθανές βελτιστοποιήσεις εκ μέρους σας, συμπεριλαμβανομένης της ακόλουθης βελτιστοποίησης που απαιτείται για την επίλυση των πόρων αποκλεισμού απόδοσης
  3. Φόρτωση αρχείων Javascript Defer
  4. Φόρτωση CSS μετά τη φόρτωση HTML
  5. Χρησιμοποιήστε μια προσθήκη WordPress

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

Δεν υπάρχει υπάρχουσα λύση για την εξάλειψη πόρων αποκλεισμού απόδοσης στον κώδικα htaccess, καθώς το ζήτημα σχετίζεται με το DOM, δηλαδή το περιεχόμενο του ιστότοπου και τη σειρά με την οποία φορτώνονται οι πόροι που περιλαμβάνονται, όπως Javascript και CSS, αλλά όχι μόνο. Αυτά δεν μπορούν να ενεργοποιηθούν στο Htaccess, αλλά μόνο στο περιεχόμενο HTML DOM.

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

Did you know that you can even have all these steps executed automatically for you by using an external Επιταχυντής ταχύτητας ιστότοπου technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Φόρτωση αρχείων Defer Javascript

Για να αναβάλλετε το φορτίο των αρχείων JS [2], μπορείτε είτε να προσθέσετε την εντολή async είτε να αναβάλλετε τις οδηγίες στις συνδέσεις σεναρίων. Η Async δεν εγγυάται ότι έχουν φορτωθεί με την ίδια σειρά - επομένως, αν έχετε πολλά scripts που θα πρέπει να τρέχουν το ένα μετά το άλλο, θα πρέπει να αναβληθεί η επιλογή της εγγύησης:

[2] - Κατάργηση JavaScript αποκλεισμού απόδοσης | PageSpeed ​​Insights | Καλοί προγραμματιστές - developers.google.com

Φόρτωση CSS μετά τη φόρτωση HTML

Για να φορτωθεί το CSS αφού μεταδοθεί η πλήρης HTML, η Google προτείνει [3] αυτό το κομμάτι κώδικα για προσθήκη στο τέλος της HTML, για παράδειγμα, μετά την ετικέτα κλεισίματος υποσημείωσης και πριν την ετικέτα κλεισίματος του σώματος:

[3] - Βελτιστοποίηση παράδοσης CSS | PageSpeed ​​Insights | Καλοί προγραμματιστές - developers.google.com

Για να βελτιστοποιήσετε τον ιστότοπό σας, είναι επίσης μια καλή ιδέα να αφαιρέσετε τον αχρησιμοποίητο κώδικα CSS, μια λειτουργία που μπορεί να είναι κουραστική αν δεν έχετε γνώση στο σχεδιασμό ιστοσελίδων. Εάν δεν έχετε δημιουργήσει τον εαυτό σας τον ιστότοπό σας, μπορεί να είναι πιο σοφό να χρησιμοποιήσετε ένα εξωτερικό σύστημα για να καταργήσετε τον κώδικα CSS που δεν χρησιμοποιούνται στις σελίδες σας για λογαριασμό σας, όπως το Ezoic Leap, για παράδειγμα, η νέα (και εντελώς δωρεάν) έκδοση του καταπληκτικού ιστότοπού τους Ταχύτητα επιταχυντή.

Περάστε τη δοκιμή ταχύτητας ιστότοπου Google!

Αυτό μου επέτρεψε να περάσω τη δοκιμή  Google PageSpeed   ​​[1] Εξαλείψτε το JavaScript και το CSS από το render blocking στο περιεχόμενο που βρίσκεται πάνω από το fold (μαζί με τη μνήμη browser caching [4]) σε έναν ιστότοπο, Σχήμα 1) έως 72 (Σχήμα 2), και πάνω από 59 (Σχήμα 3) έως 79 στην επιφάνεια εργασίας (Εικ. 4).

[4] - Επιδιόρθωση προσωρινής αποθήκευσης προγράμματος περιήγησης Google PageSpeed ​​στο htaccess - Yoann Bierling, Διεθνής Σύμβουλος SAP / Web - www.ybierling.com

Πώς να εξαλείψετε τους πόρους που αποκλείουν την απόδοση του WordPress

Για να εξαλείψετε τους πόρους που εμποδίζουν την απόδοση του WordPress, είναι απαραίτητο να εγκαταστήσετε ένα πρόσθετο όπως το JetPack.

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

Μάθετε SEO Basics: Εγγραφείτε σήμερα!

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

Ξεκινήστε να μαθαίνετε SEO

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

Αυτό θα εξαλείψει τους πόρους που αποκλείουν την απόδοση του WordPress και θα φορτώσει σελίδες γρηγορότερα επιτρέποντας στο JetPack να βελτιστοποιήσει τις εικόνες σας και να προβάλει τις εικόνες και τα στατικά αρχεία (όπως CSS και JavaScript) από το παγκόσμιο δίκτυο των διακομιστών τους.

Πώς να εξαλείψετε το JavaScript και το CSS στο WordPress

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

Lazy φόρτωση εικόνων: Οι εικόνες ιστότοπων ζητούνται μόνο στο διακομιστή όταν ο χρήστης μετακινηθείτε στην ιστοσελίδα και μπορεί να τις εμφανίσει

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

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy φόρτωση - Απόδοση ιστού - Δίκτυο προγραμματιστών Mozilla

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

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

Έχετε ένα εξωτερικό σύστημα να βελτιστοποιήσει τον ιστότοπό σας για εσάς

Γνωρίζετε ότι θα μπορούσατε πραγματικά να επιλύσετε όλα τα ζητήματα του  Google PageSpeed   ​​εκ μέρους σας, χωρίς πολλή προσπάθεια από τον ιστότοπό σας - εκτός από την εγγραφή σε μια δωρεάν δοκιμή και την αλλαγή του DNS σας;

Χρησιμοποιώντας την τεχνολογία πλατφόρμας Ezoic Site Speed ​​Accelerator, όλα τα συνηθισμένα ζητήματα του  Google PageSpeed   ​​θα επιλυθούν από το σύστημά τους, το οποίο θα είναι ο μεσάζων μεταξύ του ιστότοπού σας και των επισκεπτών. Θα βελτιστοποιήσουν την ιστοσελίδα για εσάς πριν την εμφανίσουν στον επισκέπτη σας.

Τον Απρίλιο 2021, ο επιταχυντής ταχύτητας του Ezoic Paid Site θα γίνει ελεύθερος Ezoic Leap και θα βοηθήσει ιστότοπους που φτάνουν στο Core Web Vitals Green Scores χωρίς χρέωση!

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

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

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

Πώς να εξαλείψετε το JavaScript και το CSS που αποκλείει την απόδοση και το CSS σε περιεχόμενο που υπερβαίνει;
Για να εξαλείψετε το JavaScript και το CSS για την αποκατάσταση του περιεχομένου, θα πρέπει να διασφαλίσετε ότι τα αρχεία JS και CSS του ιστότοπού σας φορτώνονται αφού το HTML είναι πλήρως φορτωμένο. Αυτό σημαίνει ότι δεν παύει τη διαδικασία φόρτωσης HTML για τη λήψη αυτών των αρχείων. Μπορείτε να αναβάλλετε τα αρχεία JavaScript με το χαρακτηριστικό ASYNC ή DEFER, και για το CSS, μπορείτε να χρησιμοποιήσετε συγκεκριμένο κωδικό για να το φορτώσετε μετά το HTML. Ένα εξωτερικό σύστημα βελτιστοποίησης όπως το Ezoic μπορεί επίσης να το χειριστεί αυτόματα.
Πώς μπορούν οι προγραμματιστές ιστού να αντιμετωπίσουν τη σύσταση της Google Pagespeed για την εξάλειψη του JavaScript και του CSS που αποκλείει την απόδοση;
Οι προγραμματιστές ιστού μπορούν να βελτιστοποιήσουν τον ιστότοπό τους με τα αρχεία JavaScript JavaScript και CSS, χρησιμοποιώντας ασύγχρονη φόρτωση για JavaScript, εισάγοντας κρίσιμα CSS απευθείας στο HTML και αναβάλλοντας τη φόρτωση μη κρίσιμων αρχείων CSS και JavaScript. Η εφαρμογή αυτών των στρατηγικών μπορεί να βελτιώσει σημαντικά τους χρόνους φόρτωσης και τις βαθμολογίες pagespeed.

Τέλεια βαθμολογία του Φάρου Chrome: Τι συμβαίνει;


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

Μάθετε SEO Basics: Εγγραφείτε σήμερα!

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

Ξεκινήστε να μαθαίνετε SEO

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




Σχόλια (8)

 2018-08-19 -  quranapk
Μου αρέσει πολύ να διαβάζω το περιεχόμενό σας. Μου βοήθησε να διορθώσω το CSS που αποκλείει την απόδοση
 2018-09-23 -  Monica
Έτσι λοιπόν το κάνουμε, είναι υπέροχο να γνωρίζουμε πώς να λύσουμε την εξάλειψη πόρων αποκλεισμού απόδοσης
 2018-09-25 -  Van
Υπέροχα, αυτό ακριβώς έψαχνα, τώρα είμαι έτοιμος να εξαλείψω πόρους αποκλεισμού απόδοσης σε κινητά
 2018-11-03 -  utumikaji0
Καταπληκτικό, τώρα ήρθε η ώρα να το δοκιμάσω και να διορθώσω τους πόρους που αποκλείουν την απόδοση!
 2019-01-12 -  Leo
Δεν ξέρω πώς να σας ευχαριστήσω, αλλά αυτό είναι καθαρή ιδιοφυΐα, ευχαριστώ - δούλεψε στο WordPress για να καταργήσει πόρους αποκλεισμού απόδοσης
 2019-04-21 -  Ludanulema
Γεια, είδα το άρθρο σας και με βοήθησε να λύσω το πρόβλημα με την εξάλειψη πόρων αποκλεισμού απόδοσης στο PHP, σας ευχαριστώ
 2019-06-12 -  animeg2Q
Θα το δοκιμάσω τώρα, ευχαριστώ που μοιραστήκατε αυτήν την επιδιόρθωση πόρων αποκλεισμού απόδοσης
 2019-07-02 -  Gasfackele
Δούλεψε καλά για μένα, δεν χρειάζεται να ψάξω περισσότερο για να εξαλείψω πόρους αποκλεισμού απόδοσης στον ιστότοπο HTML

Αφήστε ένα σχόλιο