Διορθώστε το Google PageSpeed Αποκλείστε το JavaScript και το CSS από το κλείδωμα της εμφάνισης στο περιεχόμενο που βρίσκεται πιο ψηλά
- Επίλυση Javascript και CSS αποκλεισμού απόδοσης
- Εξαλείψτε το JavaScript και το CSS που αποκλείουν την απόδοση σε περιεχόμενο στο πάνω μέρος: δείξτε πώς να το διορθώσετε
- Φόρτωση αρχείων Defer Javascript
- Φόρτωση CSS μετά τη φόρτωση HTML
- Περάστε τη δοκιμή ταχύτητας ιστότοπου Google!
- Πώς να εξαλείψετε τους πόρους που αποκλείουν την απόδοση του WordPress
- Έχετε ένα εξωτερικό σύστημα να βελτιστοποιήσει τον ιστότοπό σας για εσάς
- Συχνές Ερωτήσεις
- Τέλεια βαθμολογία του Φάρου Chrome: Τι συμβαίνει; - video
- Σχόλια (8)
Επίλυση Javascript και CSS αποκλεισμού απόδοσης
Η δοκιμή Google PageSpeed [1] Εξαλείψτε το JavaScript και το CSS κατά το κλείσιμο του JavaScript σας προτείνει να παραδώσετε τα αρχεία JS και CSS του ιστότοπού σας μετά την πλήρη φόρτωση του κώδικα HTML και συνεπώς να μην σταματήσετε τη φόρτωση HTML για να τα κατεβάσετε.
[1] - PageSpeed Insights - developers.google.comΟρισμός σεναρίου αποκλεισμού απόδοσης: Σενάρια που φορτώνονται πριν από την ανάλυση του πλήρους HTML DOM. Για παράδειγμα, σενάρια που περιλαμβάνονται στην κεφαλίδα ή στο περιεχόμενο, χωρίς συγκεκριμένες οδηγίες για τα προγράμματα περιήγησης να καθυστερήσουν τη φόρτωση σεναρίου μέχρι μετά τη βαφή HTML.
Εξαλείψτε το JavaScript και το CSS που αποκλείουν την απόδοση σε περιεχόμενο στο πάνω μέρος: δείξτε πώς να το διορθώσετε
- Έχετε ένα εξωτερικό σύστημα να βελτιστοποιήσει τον ιστότοπό σας για εσάς
- Χρησιμοποιήστε ένα CDN που θα εκτελεί όλες τις πιθανές βελτιστοποιήσεις εκ μέρους σας, συμπεριλαμβανομένης της ακόλουθης βελτιστοποίησης που απαιτείται για την επίλυση των πόρων αποκλεισμού απόδοσης
- Φόρτωση αρχείων Javascript Defer
- Φόρτωση CSS μετά τη φόρτωση HTML
- Χρησιμοποιήστε μια προσθήκη 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Αυτό θα εξαλείψει τους πόρους που αποκλείουν την απόδοση του WordPress και θα φορτώσει σελίδες γρηγορότερα επιτρέποντας στο JetPack να βελτιστοποιήσει τις εικόνες σας και να προβάλει τις εικόνες και τα στατικά αρχεία (όπως CSS και JavaScript) από το παγκόσμιο δίκτυο των διακομιστών τους.
Πώς να εξαλείψετε το JavaScript και το CSS στο WordPressΕπίσης, μην ξεχάσετε να αναβάλλετε τη φόρτωση εικόνων εκτός οθόνης χρησιμοποιώντας μια τεμπέλης λειτουργία φορτίου. Ενώ ήταν δύσκολη και απαιτούσε μια εξωτερική βιβλιοθήκη να αναβάλει τη φόρτωση εικόνων εκτός οθόνης, είναι πλέον δυνατόν γενέθλια στο HTML5!
Για να εφαρμόσετε τεμπέλωση των εικόνων στις ιστοσελίδες σας, απλώς προσθέστε τις τιμές τεμπέλης στα χαρακτηριστικά φόρτωσης των εικόνων του ιστοτόπου σας και τα πρόσφατα προγράμματα περιήγησης θα καταλάβουν ότι αυτές οι εικόνες θα πρέπει να ζητούνται και να φορτωθούν μόνο εάν εμφανίζονται, που σημαίνει ότι ο χρήστης μετακινείται προς τα κάτω Οι κάτοχοι κράτησης εικόνων.
<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 θα επιλυθούν από το σύστημά τους, το οποίο θα είναι ο μεσάζων μεταξύ του ιστότοπού σας και των επισκεπτών. Θα βελτιστοποιήσουν την ιστοσελίδα για εσάς πριν την εμφανίσουν στον επισκέπτη σας.
Γίνετε πράσινοι κάνοντας απλώς εγγραφή σε μια δωρεάν δοκιμή στην πλατφόρμα 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 είναι επαγγελματίας διαδικτυακής δημοσίευσης και ψηφιακής συμβουλευτικής, κάνοντας παγκόσμιο αντίκτυπο μέσω εμπειρογνωμοσύνης και καινοτομίας στις τεχνολογίες. Παθιασμένος με την ενδυνάμωση των ατόμων και των οργανώσεων να ευδοκιμήσουν στην ψηφιακή εποχή, οδηγείται να προσφέρει εξαιρετικά αποτελέσματα και να προωθήσει την ανάπτυξη μέσω της δημιουργίας εκπαιδευτικού περιεχομένου.
Μάθετε SEO Basics: Εγγραφείτε σήμερα!
Ενισχύστε την ορατότητα και την κυκλοφορία του ιστότοπού σας, κυριαρχώντας τις βασικές αρχές του SEO με το εύκολο στη διαδρομή μας.
Ξεκινήστε να μαθαίνετε SEO