Ρυθμίσεις πρόσθετου W3 Total Cache Minify: Πώς να επιλέξετε τον τύπο ενσωμάτωσης; Η εμπειρία μου στην αντιμετώπιση προβλημάτων και οι συμβουλές που σώζουν ζωές

Δυσκολεύεστε να επιλέξετε τον σωστό τύπο ενσωμάτωσης για το W3 Total Cache Minify; Αυτό το άρθρο μοιράζεται την πραγματική εμπειρία ενός webmaster και παρέχει έναν οδηγό βήμα προς βήμα για την ακριβή επιλογή του σωστού τύπου ενσωμάτωσης Minify, αποφεύγοντας ασυνέπειες στο στυλ του ιστότοπου και σφάλματα φόρτωσης. Περιλαμβάνει επίσης μια αλάνθαστη λύση εγκατάστασης που μπορούν εύκολα να εφαρμόσουν ακόμη και οι αρχάριοι.WordPress Επιταχύνετε χωρίς να τρακάρετε!

Βελτιστοποιούσα έναν ιστότοπο και όταν άνοιξα τις ρυθμίσεις Minify στο W3 Total Cache, έμεινα εντελώς άναυδος. Το αναπτυσσόμενο μενού για τον ενσωματωμένο τύπο είχε τέσσερις επιλογές: Προεπιλογή (Αποκλεισμός), Χρήση JS για μη αποκλεισμό, Χρήση "Ασύγχρονου" για μη αποκλεισμό και Χρήση "Καθυστέρησης" για μη αποκλεισμό.

Το σκέφτηκα για μια στιγμή, τι είναι όλο αυτό;

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

Τι ακριβώς είναι αυτοί οι τέσσερις τύποι ενσωμάτωσης;

Ας μιλήσουμε πρώτα για το είδος του χαρακτήρα που αποτελούν αυτές οι τέσσερις επιλογές.

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

Χρήση JS για μη αποκλεισμόΑυτό είναι αρκετά ενδιαφέρον. Αντί να γράφει απευθείας ετικέτες `<script>` στη σελίδα, πρώτα εξάγει ένα μικρό σενάριο και στη συνέχεια εισάγει δυναμικά τα σενάρια που πρέπει να φορτωθούν στη σελίδα μέσω JavaScript μετά την εκτέλεση της σελίδας. Με αυτόν τον τρόπο, η σελίδα μπορεί να αποδοθεί πρώτα και τα σενάρια μπορούν να φορτωθούν σταδιακά. Ακούγεται υπέροχο, σωστά; Ωστόσο, το πρόβλημα είναι ότι αυτή η διαδικασία δυναμικής εισαγωγής μπορεί να διαταράξει την αρχική σειρά εκτέλεσης των σεναρίων. Εάν ορισμένα σενάρια στη σελίδα σας εξαρτώνται σε μεγάλο βαθμό από τη σειρά εκτέλεσης, ενδέχεται να προκύψουν προβλήματα.

Χρησιμοποιήστε "ασύγχρονο" για μη αποκλεισμόΑυτό περιλαμβάνει την προσθήκη του χαρακτηριστικού `async` στην ετικέτα `<script>`. Το σενάριο θα ληφθεί ασύγχρονα στο παρασκήνιο και θα εκτελεστεί αμέσως μετά τη λήψη, χωρίς η σελίδα να το περιμένει. Ωστόσο, το μειονέκτημα είναι ότι η σειρά εκτέλεσης είναι εντελώς ανεξέλεγκτη. Όποιο σενάριο ολοκληρώσει πρώτο τη λήψη του, εκτελείται πρώτο, ανεξάρτητα από τη σειρά που καθορίσατε στον κώδικα.

Χρήση της «καθυστέρησης» για μη αποκλεισμόΑυτό σημαίνει η προσθήκη του χαρακτηριστικού `defer`. Το σενάριο θα περιμένει μέχρι να αναλυθεί ολόκληρη η σελίδα πριν εκτελεστεί και, το σημαντικότερο, θα διατηρήσει την αρχική σειρά με την οποία το γράψατε. Αυτό είναι αρκετά φιλικό προς το χρήστη, καθώς ούτε μπλοκάρει την πρώτη οθόνη ούτε διαταράσσει τη σειρά.

Ποιο να διαλέξω;

Με απλά λόγια, αυτές οι τέσσερις επιλογές είναι σαν μια ερώτηση πολλαπλής επιλογής:Θέλεις ταχύτητα ή τάξη;

Η πρότασή μου είναι η εξής:

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

Αν θέλετε να βελτιώσετε την ταχύτητα της πρώτης οθόνης και τα σενάρια σας δεν έχουν ισχυρές εξαρτήσεις όπως "Το Α πρέπει να εκτελεστεί πριν από το Β", δώστε προτεραιότητα...Χρήση της «καθυστέρησης» για μη αποκλεισμό(αναβολή). Αυτή είναι σχεδόν η πιο ιδανική λύση προς το παρόν, καθώς ούτε εμποδίζει την απόδοση ούτε διαταράσσει την τάξη.

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

Χρησιμοποιήστε "ασύγχρονο" για μη αποκλεισμόΗ επιλογή (async) είναι η επιλογή που συνιστώ λιγότερο. Επειδή η σειρά εκτέλεσης είναι εντελώς προβληματική, είναι εύκολο να καταρρεύσει, εκτός αν είστε απολύτως βέβαιοι ότι τα σενάρια σας εκτελούνται ανεξάρτητα.

Δύο μεγάλες παγίδες στις οποίες έπεσα

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

Η πρώτη παγίδα: Τα προσαρμοσμένα θέματα WordPress δεν μπορούν να προβληθούν σε πραγματικό χρόνο.

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

Μετά από κάποια έρευνα, ανακάλυψα ότι η συνάρτηση συμπίεσης του Minify ήταν η αιτία. Η λύση είναι απλή:

Αποκτήστε πρόσβαση στο πρόσθετο W3 Total Cache常规设置,εμφανίζομαι"συμπίεση"Καταργήστε την επιλογή αυτής της επιλογής. Στη συνέχεια, κάντε κλικ στο μικρό βέλος κάτω από την επιλογή "Αποθήκευση ρυθμίσεων" στην επάνω δεξιά γωνία και επιλέξτε "..."Αποθήκευση ρυθμίσεων και εκκαθάριση της προσωρινής μνήμηςΑυτό το βήμα είναι κρίσιμο. Εάν δεν καθαρίσετε την προσωρινή μνήμη, θα εξακολουθείτε να βλέπετε την παλιά έκδοση.

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

Το δεύτερο πρόβλημα: Το πλαίσιο αναζήτησης του θέματος Astra δεν αποκρίνεται όταν κάνετε κλικ σε αυτό.

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

Η λύση έχει ως εξής:

Μεταβείτε στο W3 Total Cache → General Settings → Advanced Compression Settings → JS → Minify Engine Settings → Locale Settings και αλλάξτε τον τύπο ενσωμάτωσης σε έναν από αυτούς τους δύο:

1. Προηγουμένως, η μη αποκλεισμός επιτυγχανόταν χρησιμοποιώντας JavaScript.
2. Μετά, χρησιμοποιήστε JS για μη αποκλεισμό

Ομοίως, η εκκαθάριση της προσωρινής μνήμης και η ανανέωση της σελίδας θα επιτρέψει στο πλαίσιο αναζήτησης να λειτουργήσει σωστά.

Όσο για το γιατί επιλέχθηκαν αυτές οι δύο επιλογές αντί για άλλες, έκανα κάποια έρευνα. Με απλά λόγια, τα στοιχεία front-end του θέματος Astra είναι αρκετά ευαίσθητα στο χρονισμό εκτέλεσης του σεναρίου και ορισμένες μέθοδοι μη αποκλεισμού μπορούν να προκαλέσουν την αποτυχία σύνδεσης συμβάντων. Η χρήση της λειτουργίας "μη αποκλεισμός με JS" διασφαλίζει ότι το σενάριο εκτελείται μόνο μετά την ολοκλήρωση της φόρτωσης της σελίδας, αποφεύγοντας παράλληλα την ακανόνιστη εκτέλεση που παρατηρείται με το async.

Λίστα με μέρη που πρέπει να επισκεφθείτε

Τέλος, ακολουθεί μια λίστα ελέγχου που μπορείτε να ακολουθήσετε απευθείας:

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

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

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

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

Γράψτε στο τέλος

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

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

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

Σας ευχαριστώ που διαβάσατε το άρθρο μου. Τα λέμε την επόμενη φορά.