Ασύγχρονη έναντι τεμπέλης JavaScript. Ασύγχρονη φόρτωση JavaScript - επιτάχυνση της φόρτωσης της σελίδας

Chercher Εργαλείο, που θα σας βοηθήσει να επιταχύνετε τον ιστότοπό σας στο WordPress φορτώνοντας παράλληλα σενάρια.

Σε τι χρησιμεύει αυτό;

Είναι πολύ απλό. Ένας σύγχρονος ιστότοπος είναι μια συλλογή από μια μεγάλη ποικιλία σεναρίων, ετικετών, αποσπασμάτων, στυλ, γραμματοσειρών και οτιδήποτε άλλο. Όπως καταλαβαίνετε, όσο περισσότερα «καλά», τόσο περισσότερος χρόνος χρειάζεται για να φορτώσει ο ιστότοπός σας. Όσο για το JavaScript, αυτό είναι διαφορετικό θέμα. Έχετε παρατηρήσει ποτέ μια τέτοια εμπλοκή όταν η σελίδα φαίνεται να έχει φορτωθεί, αλλά η καρτέλα δείχνει ότι η σελίδα εξακολουθεί να φορτώνει; Αυτό συμβαίνει όταν ένα συγκεκριμένο σενάριο δεν έχει φορτωθεί μέχρι το τέλος. Θα ήταν εντάξει, μερικές φορές η σελίδα είναι εντελώς αδρανής μέχρι να φορτωθεί το ίδιο, φαινομενικά όχι πολύ σημαντικό σενάριο. Και οι χρήστες σας μπορεί απλώς να μην έχουν αρκετή υπομονή.

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

Ασύγχρονη κλήσητο σενάριο μοιάζει με αυτό:

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

Πώς να αυτοματοποιήσετε τη διαδικασία;

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

Βρείτε το ήδη γνωστό αρχείο functions.php του θέματός σας και εισαγάγετε τον ακόλουθο κώδικα εκεί (για παράδειγμα, στο τέλος):

// ασύγχρονη συνάρτηση javascript wcs_defer_javascripts ($url) ( if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async" ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Σύναψη

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

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

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

Τι να κάνετε για αυτό; Φυσικά, μπορείτε να ακολουθήσετε τον πιο απαιτητικό τρόπο εργασίας, αλλά με αποτελεσματικό τρόπο- περάστε από ολόκληρο τον κινητήρα του Joomla, κάντε αλλαγές σε επεκτάσεις και ούτω καθεξής. Αυτή η μέθοδος είναι πραγματικά καλή, αλλά για να είμαι ειλικρινής είναι τόσο εντατική που δεν υπάρχει καμία επιθυμία να την ανακατέψετε και για αρχάριους αυτή η μέθοδος δεν είναι καθόλου επιλογή.

Το πιο απλό και όχι λιγότερο τον σωστό τρόποεκμεταλλευτείτε αυτό ορισμένες επεκτάσεις, που θα κάνει όλη (ή σχεδόν όλη) τη δουλειά για εμάς. Μία από αυτές τις επεκτάσεις είναι η προσθήκη Javascript Async & Defer, με την οποία μπορείτε να εκτελείτε σενάρια ασύγχρονα ή να καθυστερήσετε την εκκίνησή τους, αλλά με την προϋπόθεση ότι αυτό δεν βλάπτει τη λειτουργία του ιστότοπου.

Πρώτα πρέπει να κατεβάσετε το πρόσθετο Javascript Async & Defer και στη συνέχεια να το εγκαταστήσετε. Αλλά η εγκατάσταση από μόνη της δεν θα είναι αρκετή, το κύριο πράγμα είναι να το ρυθμίσετε σωστά αυτή η επέκταση. Τώρα θα προσπαθήσω να εξηγήσω πώς να το κάνω αυτό.

Αφού εγκαταστήσετε το πρόσθετο, μπορείτε να ξεκινήσετε τη διαμόρφωσή του, επειδή δεν θα μπορεί να ρυθμιστεί μόνο του. Για να το κάνετε αυτό, στον πίνακα ελέγχου, μεταβείτε στη σελίδα "Plugin Manager: Plugins" (Επεκτάσεις -> Plugins). Βρίσκουμε την πρόσφατα εγκατεστημένη επέκταση με τη μορφή της προσθήκης "Javascript Async and Defer" (για αυτό είναι καλύτερο να χρησιμοποιήσετε μια αναζήτηση ή φίλτρο κατά αναγνωριστικό):

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

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

Αρχικά, ας μάθουμε τι και πώς να ρυθμίσετε εδώ, πώς να μάθετε ποια σενάρια ξεκινούν και πώς να τα καταχωρήσετε. Αρχικά, ας δούμε την ουσία κάθε ρύθμισης:

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

Σενάρια για τροποποίηση - πρέπει να εισαγάγετε σε αυτό το πεδίο κειμένου σχετική διαδρομήστα σενάρια που θα επεξεργαστούμε.

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

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

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

Τώρα μπορείτε να μεταβείτε στον ιστότοπο και να δείτε το αποτέλεσμα, θα πρέπει να λάβετε κάτι σαν αυτό:

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

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

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

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

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

25/12/2012 εργασία 18356

Ας μιλήσουμε λίγο για τη βελτιστοποίηση της φόρτωσης σελίδων στο Joomla. Για σήμερα θα είναι Σύνδεση JavaScript. Πρώτα απ 'όλα, θα επιστήσω την προσοχή των σχεδιαστών διάταξης στην ορθότητα της κατασκευής του προτύπου. Και στη συνέχεια θα εξετάσουμε την ικανότητα που είναι ενσωματωμένη στον κινητήρα να χρησιμοποιεί ασύγχρονη φόρτωση εξωτερικών σεναρίων. Δεν θα υπεισέλθω στο γιατί απαιτείται βελτιστοποίηση.

Κατασκευή προτύπου

Κατά κανόνα, οι σχεδιαστές του Joomla δεν δίνουν προσοχή στη σειρά φόρτωσης των στυλ και των σεναρίων, και αυτό σημαντική πτυχήβελτιστοποιήσεις για παραλληλοποίηση φόρτωσης. Τα αρχεία CSS θα πρέπει πάντα να περιλαμβάνονται πριν από τα αρχεία JavaScript.

Εάν στο πρότυπό σας η φόρτωση css και javascript μοιάζει με αυτό:

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

Δείτε πώς μπορείτε να συμπεριλάβετε σωστά τα αρχεία στην απόδοση:

Δεν δίνουμε σημασία στην εγκυρότητα του doctype και του html, το έγραψα εν συντομία για παράδειγμα.

Ασύγχρονη φόρτωση

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

Όπως αναφέρθηκε προηγουμένως στην απόδοση εγγράφων υπάρχει μια λειτουργία addScript();. Αλλά προφανώς μερικοί άνθρωποι δεν υποψιάζονται καν ότι έχει τέσσερις μεταβλητές - $url, $type, $αναβολή, $async.

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js"); $this->addScript($this->baseurl."/templates/beez_20/js/script.js");

Αλλά στην περίπτωσή μας, πρέπει να βάλουμε σε ουρά τη φόρτωση των σεναρίων από το πρόγραμμα περιήγησης για αυτό πρέπει να χρησιμοποιήσουμε το χαρακτηριστικό ασυγχρονισμόςκαι/ή αναβάλλω. Και τα δύο διαφέρουν μόνο σε αυτό αναβάλλωδιατηρεί τη σειρά με την οποία εκτελούνται τα σενάρια. Απαιτείται αναβολή εάν script.jsΧρησιμοποιείται το πλαίσιο jQuery, το οποίο θα αποτρέψει τη φόρτωσή του πριν από την ίδια τη βιβλιοθήκη και εάν είναι απαραίτητο να διατηρηθεί μια συγκεκριμένη ακολουθία.

Και έτσι για να ενεργοποιήσετε την ασύγχρονη φόρτωση πρέπει να χρησιμοποιήσετε όλες τις μεταβλητές

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript"); // ή $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, false); // Εκτυπώνει $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", true, false); // Εκτυπώνει $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, true); // Έξοδοι

Και μια ακόμη μικρή στιγμή. Κατ 'αρχήν, αυτά τα χαρακτηριστικά είναι στοιχεία HTML5, επομένως δεν έχει νόημα η χρήση της φόρμας async="async" και defer="defer", αρκούν το async και το defer αντίστοιχα.

Ας κάνουμε προσαρμογές στη βιβλιοθήκη του joomla. Ανοιγμα site.ru/libraries/joomla/document/html/renderer/head.php

Αναζητούμε (περίπου γραμμή 150):

// Δημιουργήστε συνδέσμους αρχείου σεναρίου foreach ($document->_scripts ως $strSrc => ". $lnEnd; )

αντικαταστήστε με:

// Δημιουργία συνδέσμων αρχείου σεναρίου για το foreach ($document->_scripts ως $strSrc => $strAttr) ( $buffer .= $tab . "" . $lnEnd; )

Αυτό είναι όλο το αλάτι. Όλοι οι χειρισμοί μου πραγματοποιήθηκαν στο Joomla 2.5, δεν είχα σκεφτεί πώς θα λειτουργούσε σε 1,5 xs και ήρθε η ώρα να το ξεχάσω))). Και η τεχνική που περιγράφεται παραπάνω δεν είναι καθόλου πανάκεια.

Σας ευχαριστώ για την προσοχή σας!

/ 26.01.2018

Με την αύξηση της ταχύτητας σύνδεσης στο Διαδίκτυο και την αύξηση της ισχύος όχι μόνο της επιφάνειας εργασίας, αλλά και φορητές συσκευέςΟι ιστοσελίδες γίνονται όλο και πιο βαριές. Ο αριθμός και το μέγεθος των συνδεδεμένων αρχείων αυξάνεται: αρχεία JavaScript, αρχεία css, εικόνες, γραφικά στοιχεία ιστότοπου τρίτων, iframes. Επί αυτή τη στιγμήΟι ιδιαιτερότητες του τρόπου λειτουργίας των προγραμμάτων περιήγησης είναι τέτοιες που κατά τη φόρτωση ενός αρχείου js, η απόδοση αποκλείεται μέχρι να εκτελεστεί το σενάριο. Σύγχρονα προγράμματα περιήγησης V φόντοθα αναλύσει το έγγραφο και θα κατεβάσει σενάρια και στυλ, αλλά η απόδοση θα αποκλειστεί. Σύγκριση παραμέτρους δικτύουΓια διαφορετικά προγράμματα περιήγησηςμπορείτε να το δείτε στο browserscope.org. Δεν μπορούμε να εξαλείψουμε εντελώς τον αποκλεισμό, αλλά μπορούμε να βελτιστοποιήσουμε τα τμήματα διακομιστή και πελάτη της εφαρμογής, έτσι ώστε ο αποκλεισμός απόδοσης να διαρκεί το συντομότερο χρονικό διάστημα.

Λύσεις από την πλευρά του διακομιστή:
— Μειώστε το μέγεθος μεταφερθέντα αρχεία
— Χρησιμοποιήστε το CDN
— Μετακινήστε στατικά αρχεία σε ξεχωριστό τομέα ή υποτομέα, αυξάνοντας έτσι τον αριθμό ταυτόχρονες συνδέσειςπρόγραμμα περιήγησης.
— Ενεργοποίηση συμπίεσης μεταφερόμενων αρχείων (gzip)

Λύσεις για την πλευρά του πελάτη:
— Μειώστε τον αριθμό των αιτημάτων.
- Αποθηκεύστε προσωρινά αρχεία στην πλευρά του πελάτη χρησιμοποιώντας Λήγει κεφαλίδεςκαι Etags.
— Χρησιμοποιήστε δημόσια διαθέσιμα CDN (Google CDN, Yandex CDN). Υπάρχει λοιπόν η πιθανότητα το αρχείο από το δημόσιο CDN να είναι ήδη αποθηκευμένο στην κρυφή μνήμη του προγράμματος περιήγησης.

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

Σενάριο ασύγχρονης φόρτωσης JavaScript:

(function() ( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'File URL'; document.getElementsByTagName('head') .appendChild(script);

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

if (window.addEventListener) ( window.addEventListener('load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load); )

JavaScript ασύγχρονη φόρτωση σεναρίου με βάση το συμβάν onload

(function() ( function async_load())( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'Διεύθυνση URL αρχείου'; έγγραφο. getElementsByTagName ('head').appendChild(script) if (window.addEventListener) (window.addEventListener('load', async_load, false); ) else if (window.attachEvent) (window.attachEvent('onload', async_load ) ))();

Αλλά αυτή είναι μια μεμονωμένη περίπτωση όταν απαιτείται λήψη ενός μόνο αρχείου. Συχνά στην πράξη συνδέονται πολλά αρχεία.

Περιλαμβάνεται σενάριο για ασύγχρονη φόρτωση πολλών αρχείων JavaScript

(function() ( function async_load())( [ 'URL_file_1.js', 'URL_file_2.js', 'URL_file_3.js' ].forEach(function(src) ( var s = document.createElement('script'); s .type = 'text/javascript'; s.async = true; attachEvent('onload', async_load) ))();

Αλλά υπάρχει ένα μείον σε αυτήν την υλοποίηση - τα σενάρια θα φορτωθούν με τυχαία σειρά και, κατά συνέπεια, θα εκτελεστούν τυχαία εγκαίρως. Αυτό το σενάριο ασύγχρονης φόρτωσης είναι ιδανικό εάν Εκτέλεση JavaScriptΤα αρχεία δεν εξαρτώνται το ένα από το άλλο και δεν εξαρτώνται από το DOM. Διαφορετικά, η χρήση του μπορεί να οδηγήσει σε σφάλματα στη σελίδα ή σε απροσδόκητα αποτελέσματα εκτέλεσης. Για διαδοχική εκτέλεση, αλλά ασύγχρονη λήψη, πρέπει να καθορίσετε async=false, τότε τα αρχεία θα ληφθούν με τυχαία σειρά, αλλά θα εκτελεστούν με τη σειρά.

Το πρότυπο HTML 5 υποστηρίζει ασύγχρονη φόρτωση JavaScript. Αυτό μπορεί να γίνει με την προσθήκη λέξη-κλειδίασυγχρονισμός ή αναβολή. Για παράδειγμα:

.jpg" type="text/javascript" defer>

Ένα σενάριο που συνδέεται με το χαρακτηριστικό defer θα εκτελεστεί χωρίς να διαταραχθεί η σειρά εκτέλεσης σε σχέση με άλλα σενάρια και η εκτέλεσή του θα πραγματοποιηθεί μετά την πλήρη φόρτωση και ανάλυση της σελίδας, αλλά πριν κληθεί το DOMContentLoaded.

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

Βιβλιοθήκες για ασύγχρονη φόρτωση JavaScript

Το RequireJS είναι μια λειτουργική μονάδα φόρτωσης JavaScript. Βελτιστοποιημένο για προγράμματα περιήγησης, αλλά μπορεί να χρησιμοποιηθεί σε άλλα περιβάλλοντα όπως το Node, το Rhino.

require(["script"], function(script) ( console.log("start after load script.js"); ));

Το extsrc.js είναι μια βιβλιοθήκη που εκτελεί σενάρια που θα εκτελεστούν μετά τη φόρτωση της σελίδας και την εμφάνιση της στον χρήστη. Λειτουργεί σωστά με το document.write.

.jpg">.jpg">

yepnope.js - επιτρέπει την ασύγχρονη φόρτωση αρχείων JavaScript και CSS.

yepnope([ 'script.js', 'style.css' ]);

Ένας εύκολος τρόπος για να φορτώσετε σενάρια JavaScript

Αποδεικνύεται ότι στην πράξη, η επίτευξη βέλτιστης φόρτωσης σεναρίων JavaScript μεταξύ των προγραμμάτων περιήγησης που δεν εμποδίζουν την εμφάνιση είναι δύσκολη και μερικές φορές αδύνατη..jpg"> στο τέλος του εγγράφου πριν από την ετικέτα κλεισίματος του σώματος. Λόγω περιορισμών διαφορετικά προγράμματα περιήγησηςκαι την ίδια την HTML, μια τέτοια επιλογή φόρτωσης που δεν εμποδίζει την εμφάνιση μπορεί να θεωρηθεί η απλούστερη.

Google PageSpeed: Στυλ CSS και Σενάρια JavaScriptαποκλεισμός φόρτωσης σελίδας στο WP

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

Εντάξει, τώρα τι είναι αυτή η ανάρτηση;

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

Παρατήρησα ότι αυτό το σημείο είναι από τα πιο δυσεπίλυτα (χρονοβόρο) και υπάρχει σχεδόν σε όλα τα site, ακόμα και σε πολύ γρήγορα.

Πώς να το διορθώσετε θεωρητικά:

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

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

Πώς λειτουργεί αυτό στην πράξη, και στη συγκεκριμένη περίπτωση - για ιστότοπους WordPress;

1. Ας εκμεταλλευτούμε την εξάρτηση άλλων σεναρίων από το jQuery

Σε σωστά κατασκευασμένο Θέμα WordPressόλα τα αρχεία CSS και JS συνδέονται μέσω των wp_head() και wp_footer() - δηλαδή στο και στο τέλος, αντίστοιχα.

Επίσης, τα αρχεία έχουν εξαρτήσεις, δηλαδή, για παράδειγμα, το πρόσθετο πρέπει να συνδεθεί μετά, πράγμα που σημαίνει ότι αν Βιβλιοθήκη jQueryβρίσκεται στο wp_footer(), τότε το FancyBox δεν μπορεί να μπει στο wp_head().

Μετακίνηση του jQuery στο υποσέλιδο του ιστότοπου

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

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

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

2. Συνδυασμός CSS στο WordPress

Εάν ο συνδυασμός όλων των JavaScript σε ένα αρχείο δεν είναι πάντα καλή ιδέα, τότε θα συνιστούσα να συνδυάσετε CSS όποτε είναι δυνατόν.

Θυμηθείτε το στιγμιότυπο οθόνης στην αρχή του άρθρου ( 10 αποκλεισμός πόρων CSS)? Από πού προέρχονται τόσα αρχεία στυλ, αφού ο προγραμματιστής θεμάτων πιθανότατα ήξερε τι έκανε;

Η απάντηση είναι από τα πρόσθετα.

Για παράδειγμα, το πρόσθετο "Επικοινωνία Φόρμα 7" περιλαμβάνει το δικό του φύλλο στυλ και, παρόλο που δεν είναι μεγάλο από μόνο του, είναι ακόμα καλύτερο να αποφύγετε περιττά αιτήματα HTTP.

Ας δούμε πώς βήμα προς βήμα.

Αντιγράψτε τα περιεχόμενα του φύλλου στυλ της προσθήκης και επικολλήστε το στο τέλος του κύριου αρχείου στυλ - .

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

Μεταβείτε στις ρυθμίσεις της προσθήκης και δείτε αν υπάρχει κάποια επιλογή να καταργήσετε την επιλογή του πλαισίου κάπου και να μην συμπεριλάβετε το CSS της προσθήκης. Δεν υπάρχει τέτοια επιλογή στη Φόρμα Επικοινωνίας 7, πράγμα που σημαίνει ότι προχωράμε στο επόμενο σημείο.

Κόβουμε αρχεία μέσω. Για στυλ Φόρμας Επικοινωνίας 7, ο κωδικός θα είναι ο ακόλουθος:

Επίσης, μερικές φορές χρησιμοποιώντας ετικέτες υπό όρους, τα αρχεία προσθηκών (τόσο CSS όσο και JS) απενεργοποιούνται μόνο από εκείνες τις σελίδες όπου δεν χρησιμοποιούνται.

Εντάξει, διευθετήσαμε τη Φόρμα Επικοινωνίας 7, αλλά πώς μπορείτε να μάθετε τα αναγνωριστικά των αρχείων CSS άλλων προσθηκών;

Είναι εύκολο, ας το ανοίξουμε πηγαίος κώδικαςσελίδα και βλέπουμε μια παρόμοια εικόνα εκεί:

Υπάρχει επίσης ένα πρόσθετο που θα σας επιτρέψει να συνδυάσετε αυτόματα CSS και JavaScript - JS & CSS Script Optimizer.

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

Πώς το πρόγραμμα περιήγησης φορτώνει τη σελίδα

Το πρόγραμμα περιήγησης φορτώνει τη σελίδα διαδοχικά. Αυτό ισχύει ιδιαίτερα για εξωτερικούς συνδέσμουςγια αρχεία - css και javascript. Ας πάρουμε για παράδειγμα ένα μπλοκ για τον ιστότοπο lesnoy.name.

Ιστολόγιο του Lesnoy Vladislav

Αυτός ο ιστότοπος φορτώνει μόνο τρία εξωτερικά αρχεία.

2 από αυτά - στυλ css, και το ένα είναι αρχείο js. Αλλά αυτό είναι ένα παράδειγμα ενός απλού ιστότοπου, που φορτώνονται δεκάδες φορές εξωτερικά αρχείακαι αυτό επηρεάζει σημαντικά την ταχύτητα φόρτωσης της σελίδας.

Επιτάχυνση εμφάνισης σελίδας στο πρόγραμμα περιήγησης

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

Δηλαδή, από το παραπάνω παράδειγμα είναι σαφές ότι το πρόγραμμα περιήγησης θα φορτώσει τον τίτλο του ιστότοπου (τίτλος) και στη συνέχεια θα συναντήσει έναν σύνδεσμο προς εξωτερικό cssαρχείο main.css και θα πάει να το φορτώσει. Μετά τη φόρτωση, το επεξεργάζεται και προχωρά - συναντά το δεύτερο αρχείο css, αναβάλλει ξανά την επεξεργασία της σελίδας για αργότερα και λειτουργεί με το prettify.css. Το ίδιο με το prettify.js. Και μόνο τότε αρχίζει να εμφανίζει την υπόλοιπη σελίδα, εφαρμόζοντας ήδη όλους τους προηγούμενους επεξεργασμένους κανόνες css από αρχεία cssκαι κώδικα js από αρχεία javascript.

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

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

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

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

async χαρακτηριστικό

Το χαρακτηριστικό script async κάνει τη φόρτωση αρχείων js ασύγχρονη. Όσοι ξέρουν να προγραμματίζουν σε JS ξέρουν ακριβώς πώς είναι - ασύγχρονα. Για όσους δεν ξέρουν πώς, θα σας πω: το πρόγραμμα περιήγησης συναντά έναν σύνδεσμο προς εξωτερική javascriptαρχείο (ετικέτα script με την παράμετρο src), ξεκινά τη φόρτωση και την επεξεργασία του, αλλά δεν σταματά τη φόρτωση και την επεξεργασία της κύριας σελίδας.

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

Μειονέκτημα του χαρακτηριστικού async

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

…

ΣΕ σε αυτό το παράδειγμαΔεν μπορώ να πω ακριβώς ποια θα είναι η ακολουθία εκτέλεσης αυτών των αρχείων js. Το μόνο που μπορώ να πω με βεβαιότητα είναι ότι το script4 θα φορτωθεί μετά το script3 λόγω της έλλειψης χαρακτηριστικού async. Αλλά δεν ξέρω ποιο αρχείο από τα script1.js, script2.js και script5.js θα φορτώσει πρώτα, γιατί φορτώνονται ασύγχρονα.

Εισαγωγή/επεξεργασία συνδέσμου

«Και τι διαφορά έχει για εμάς;» - ρωτάς. Αλλά φαίνεται αν η εκτέλεση ενός σεναρίου js εξαρτάται από ένα άλλο. Αυτό συμβαίνει συνεχώς τώρα, και το απλούστερο παράδειγμα τέτοιας εξάρτησης είναι το jQuery.

…

ΣΕ σε αυτή την περίπτωσηυπάρχει πολύ μεγάλη πιθανότητα λήψης Σφάλματα JavaScriptλόγω του γεγονότος ότι οποιαδήποτε από Πρόσθετα jQueryθα ξεκινήσει να εκτελείται πριν φορτώσει το ίδιο το jQuery.

Τι να κάνουμε;

defer χαρακτηριστικό

Εδώ έρχεται να μας σώσει ένα άλλο χαρακτηριστικό της ετικέτας script - defer.

…

Αναβάλλεται να μεταφερθεί από Αγγλική γλώσσαως «αναβαλλόμενη».

Αντίστοιχα καθυστερημένη φόρτωση javascript- Τεμπέλης φόρτωση javascript. Εάν το πρόγραμμα περιήγησης συναντήσει ένα χαρακτηριστικό defer σε έναν σύνδεσμο προς ένα εξωτερικό αρχείο js, αναβάλλει τη φόρτωση και την εκτέλεση αυτών των αρχείων έως ότου φορτωθεί και εμφανιστεί ολόκληρη η σελίδα. Ταυτόχρονα, εγγυάται την ίδια σειρά εκτέλεσης του σεναρίου, που είχε οριστεί αρχικά στον κώδικα html.

Αντίστοιχα, στο παράδειγμά μας με το jQuery και τα πρόσθετά του, το defer μας βοηθά εκτελώντας δύο εργασίες: ο χρόνος εμφάνισης της σελίδας μειώνεται σημαντικά (το πρόγραμμα περιήγησης δεν εμποδίζει την απόδοση της σελίδας για τη φόρτωση αρχείων js, αναβάλλει τη φόρτωση για αργότερα) και ταυτόχρονα ξεμπερδεύουμε πιθανά σφάλματαπου σχετίζεται με ασύγχρονη φόρτωση αμοιβαία εξαρτώμενων αρχείων js.

Στο παραπάνω παράδειγμα, το σενάριο other_script.js θα φορτωθεί ασύγχρονα, επειδή δεν εξαρτάται από κανένα άλλο αρχείο και το jQuery και οι προσθήκες του θα φορτωθούν αμέσως μετά την απόδοση της σελίδας με την ακόλουθη σειρά: πρώτα jquery.min.js, μετά με σειρά plugin1.jquery.js, plugin2.jquery.js, plugin3.jquery.

Ως αποτέλεσμα, με την έλευση του html5 και των χαρακτηριστικών defer και async, μπορούμε να ελέγξουμε τη σειρά φόρτωσης των εξωτερικών αρχείων js πολύ πιο ευέλικτα, αυξάνοντας έτσι την ταχύτητα απόδοσης ιστοσελίδων. Και, το πιο σημαντικό, ο χρήστης θα έχει την εντύπωση μιας σημαντικής αύξησης στην ταχύτητα φόρτωσης ολόκληρης της ιστοσελίδας στο σύνολό της, γιατί σε λίγα δευτερόλεπτα θα δει τι ήρθε στον ιστότοπο για - πληροφορίες.

Οι περισσότεροι (αν όχι όλοι) σύγχρονοι ιστότοποι χρησιμοποιούν Javascript. Κουμπιά κοινωνικά δίκτυα? Πρόσθετα; Ακόμα και πρότυπα! Το 99% του χρόνου αυτά τα στοιχεία θα χρησιμοποιούν Javascript. Αυτό σημαίνει ότι οι ιστότοποί σας χρησιμοποιούν σενάρια. Αλλά τα σενάρια επιβραδύνουν την ταχύτητα του ιστότοπου. Σήμερα θέλουμε να σας παρουσιάσουμε 2 πρόσθετα που θα επιλύσουν αυτό το πρόβλημα.

Ασύγχρονο και αναβαλλόμενο... τι;

Πριν ξεκινήσουμε, υπάρχουν τρία πράγματα που πρέπει να λάβετε υπόψη:

Ο αναλυτής είναι HTML στο στάδιο φόρτωσης

Το Net είναι ο χρόνος που χρειάζεται για να φορτώσει το σενάριό σας

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

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

Η τεμπέλης φόρτωση απλά σας επιτρέπει Κώδικας HTMLφόρτωση πριν αρχίσουν να εκτελούνται τα σενάρια. Το πλεονέκτημα εδώ είναι ότι ο ιστότοπος θα εμφανίζεται αμέσως στο παράθυρο του προγράμματος περιήγησης, σαν να δείχνει αστραπιαία απόδοση. Προσωπικά, συνιστώ τη χρήση τεμπέλης φόρτωσης εάν ορισμένοι από τους χρήστες σας χρησιμοποιούν προγράμματα περιήγησης που δεν υποστηρίζουν ασύγχρονη φόρτωση σεναρίων. Ας ρίξουμε μια ματιά στο πώς λειτουργεί το lazy loading:

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

• Σίγουρα συνιστώ να βελτιστοποιήσετε τα σενάρια σας χρησιμοποιώντας και τις δύο μεθόδους.

Όταν χρησιμοποιείτε αυτά τα χαρακτηριστικά, θα είναι διαθέσιμες 3 λειτουργίες. Εάν χρησιμοποιήσετε το χαρακτηριστικό async, το σενάριο θα εκτελεστεί ασύγχρονα το συντομότερο δυνατό. Εάν δεν χρησιμοποιείτε το χαρακτηριστικό async και χρησιμοποιείτε το defer, το σενάριο θα εκτελεστεί όταν ολοκληρωθεί η ανάλυση της σελίδας. Εάν δεν χρησιμοποιείτε κανένα από αυτά τα χαρακτηριστικά, το σενάριο θα φορτωθεί και θα εκτελεστεί αμέσως, πριν καν το πρόγραμμα περιήγησης αρχίσει να αναλύει τη σελίδα.

Από πού να ξεκινήσω;

Αν λοιπόν Ασύγχρονη javascriptείναι η καλύτερη επιλογή, επιτρέψτε μου να σας παρουσιάσω το καλύτερο πρόσθετο WordPressγια ασύγχρονη φόρτωση Javascript. Ποιος θα το φανταζόταν ότι ονομάστηκε!

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

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

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