Πώς να αφαιρέσετε τα αχρησιμοποίητα CSS και JS στο WordPress (Πολύ εύκολο)

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

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

Αυτό οφείλεται σε ένα καταπληκτικό πρόσθετο γνωστό ως Asset CleanUp: Ενίσχυση ταχύτητας σελίδας. Με αυτό το πρόσθετο, η αφαίρεση του αχρησιμοποίητου CSS είναι τόσο εύκολη όσο το να κάνετε κλικ σε μερικά κουμπιά. Εναλλακτικά, αν δεν σας πειράζει να ξοδεύετε λίγα δολάρια το χρόνο, με WP Rocket, υπάρχει ένα καταργημένο κουμπί CSS που δεν χρησιμοποιείται, απλώς ενεργοποιήστε το και η προσθήκη θα αφαιρέσει αυτόματα όλα τα αχρησιμοποίητα CSS.

Ταμείο: Κορυφαία 7 Διαχειριζόμενη Φιλοξενία Google Cloud WordPress

Τι είναι το αχρησιμοποίητο CSS;

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

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

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

Εκτός από προσθήκες, οι προγραμματιστές θεμάτων γράφουν πολλά πράγματα στο style.css που ως επί το πλείστον δεν χρειάζονται. Αλλά είτε χρειάζονται είτε όχι, φορτώνουν κάθε φορά που φορτώνεται ο ιστότοπός σας!

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

Ταμείο: Τα 10 πιο γρήγορα και καλύτερα θέματα WordPress 

Πώς να αναγνωρίσετε το αχρησιμοποίητο CSS

Η εύρεση αχρησιμοποίητων CSS και JS είναι πολύ εύκολη. Υπάρχουν δύο προσεγγίσεις που θα προτείνω.

Το ένα είναι να αναλύσετε τον ιστότοπό σας μέσω του Google PageSpeed ​​Insight. Ελέγξτε εάν ο ιστότοπός σας έχει πρόβλημα κατάργησης αχρησιμοποίητου CSS. Κάντε κλικ σε αυτό και θα μπορείτε να προσδιορίσετε το στοιχείο του ιστότοπού σας που είναι υπεύθυνο για αυτό.

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

Η δεύτερη επιλογή είναι να λάβετε μια πιο λεπτομερή ανάλυση. Μπορείτε να το πετύχετε χρησιμοποιώντας τα εργαλεία του Chrome Dev.

Στο πρόγραμμα περιήγησης chrome, ανοίξτε τα εργαλεία Chrome Dev και μετά μεταβείτε στην κάλυψη. Στη συνέχεια, κάντε κλικ στο κουμπί επαναφόρτωσης εντός της περιοχής κάλυψης. Μπορείτε να βρείτε ένα ολοκληρωμένος οδηγός για το πώς να το κάνετε αυτό στο εργαλείο Google Developers.

Η άλλη επιλογή είναι να χρησιμοποιήσετε jitbit για σάρωση για αχρησιμοποίητους επιλογείς CSS. Μπορείτε επίσης να χρησιμοποιήσετε PurifyCSS για να βρείτε αχρησιμοποίητο CSS

Πώς να αφαιρέσετε το αχρησιμοποίητο CSS

Ακολουθήστε αυτά τα βήματα για να αφαιρέσετε το αχρησιμοποίητο CSS από το WordPress:

1. Εγκαταστήστε το Asset CleanUp

Μεταβείτε στην προσθήκη και στη συνέχεια Προσθήκη νέου. Στη συνέχεια, πληκτρολογήστε «Εκκαθάριση στοιχείων» στο πλαίσιο αναζήτησης της σελίδας Προσθήκη νέας προσθήκης. Εγκαταστήστε και ενεργοποιήστε το πρόσθετο.

2. Μεταβείτε στις ρυθμίσεις της προσθήκης

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

3. Ξεφορτώστε τα ανεπιθύμητα CSS και JS

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

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

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

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

Καταργήστε τα αχρησιμοποίητα πρόσθετα CSS WordPress

Ακολουθούν ορισμένα πρόσθετα που μπορείτε να χρησιμοποιήσετε για να αφαιρέσετε το αχρησιμοποίητο CSS στο WordpPress:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Ενίσχυση ταχύτητας σελίδας καθιστά εύκολη την αφαίρεση αχρησιμοποίητων CSS και JSin WordPress ακόμη και για αρχάριους. Το μόνο που έχετε να κάνετε είναι να απενεργοποιήσετε ένα συγκεκριμένο CSS που δεν χρειάζεται για μια συγκεκριμένη σελίδα.

Μπορείτε επίσης να απενεργοποιήσετε μόνο μεμονωμένες αναρτήσεις. Με την έκδοση premium, μπορείτε να απενεργοποιήσετε τα αχρησιμοποίητα CSS/JS από πρόσθετα.

Αυτό το πρόσθετο είναι ένα πλήρες πρόσθετο απόδοσης με πολλές άλλες επιλογές για την επιτάχυνση του WordPress. Η κατάργηση των αχρησιμοποίητων CSS/JS είναι μόνο μέρος της.

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

2. WP Rocket

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

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

Εγκαταστήστε την προσθήκη μέσω Πίνακα ελέγχου>προσθήκες>Προσθήκη νέου>Μεταφόρτωση.

Απλώς μεταβείτε στις ρυθμίσεις WP Rocket και, στη συνέχεια, κάντε κλικ στην καρτέλα «Βελτιστοποίηση αρχείων». Στη συνέχεια, μετακινηθείτε προς τα κάτω και θα δείτε "Κατάργηση αχρησιμοποίητου CSS", επιλέξτε το πλαίσιο, αποθηκεύστε και διαγράψτε την προσωρινή μνήμη.

3. Perfmatters

Perfmatters είναι ένα premium plugin που αναπτύχθηκε από τον Brian Jackson και τον αδερφό του, Brett Jackson. Αυτό το πρόσθετο μπορεί να σας βοηθήσει να αφαιρέσετε το αχρησιμοποίητο CSS πολύ εύκολα.

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

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

Αυτό το πρόσθετο είναι ένα πρόσθετο απόδοσης, έρχεται με πολλές άλλες επιλογές για την επιτάχυνση του WordPress. Η κατάργηση των αχρησιμοποίητων CSS/JS είναι μέρος της.

4. CSS JS Manager

CSS JS Manager μπορεί να αφαιρέσει συγκεκριμένα CSS ή JS από Κινητό ή Επιτραπέζιο υπολογιστή. Ανάλογα με το τι θέλεις να πετύχεις.

Αυτή η προσθήκη μπορεί επίσης να αναβάλει τη φόρτωση αρχείων CSS ή JS.

Συμπέρασμα

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

Μπορεί να είναι αδύνατο να αφαιρέσετε όλα τα αχρησιμοποίητα CSS, αλλά μπορείτε να τα ελαχιστοποιήσετε. Χρησιμοποιώ το Asset CleanUp για να αφαιρέσω το αχρησιμοποίητο CSS για TargetTrend.

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

Διαβάστε επίσης:

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

Πώς να φτιάξετε το WordPress πολύ γρήγορα

Πώς να αυξήσετε την επισκεψιμότητα στο ιστολόγιό σας