Εάν ο ιστότοπός σας WordPress χρησιμοποιεί ένα επί πληρωμή θέμα WordPress ή ένα δημοφιλές από το επίσημο αποθετήριο θεμάτων WordPress, είναι πιθανό το θέμα να αναπτυχθεί για διάφορες περιπτώσεις χρήσης. Και μπορεί να χρησιμοποιείτε μόνο ένα μικρό σύνολο όλων των δυνατοτήτων που είναι διαθέσιμες στο θέμα.
Σε αυτήν την περίπτωση, ο ιστότοπός σας φορτώνει πολλά αχρησιμοποίητα CSS που δεν απαιτούνται για το στυλ των σελίδων του ιστότοπού σας. Για παράδειγμα, το θέμα WordPress που χρησιμοποιείτε μπορεί να έχει στυλ και για σελίδες WooCommerce, αλλά εάν εκτελείτε μόνο ένα ιστολόγιο στον ιστότοπό σας στο WordPress, τότε δεν χρησιμοποιείτε το CSS που περιλαμβάνεται για τις σελίδες WooCommerce στον ιστότοπό σας και επομένως δεν χρησιμοποιείται CSS στους χρήστες.
Εάν έχετε δοκιμάσει τον ιστότοπό σας στο εργαλείο Google Pagespeed, πιθανότατα γνωρίζετε ήδη ότι ο ιστότοπός σας έχει αχρησιμοποίητα προβλήματα CSS. Σε αυτόν τον οδηγό, θα σας δείξουμε πώς να ελέγξετε για αχρησιμοποίητο CSS πρώτα και μετά να χρησιμοποιήσετε ένα δωρεάν εργαλείο για να αφαιρέσετε το αχρησιμοποίητο CSS από τον ιστότοπό σας στο WordPress.
Πώς να ελέγξετε το μη χρησιμοποιημένο CSS
Το Google Chrome DevTools (αυτό που βλέπετε όταν κάνετε κλικ στην επιλογή "Επιθεώρηση" στο μενού περιβάλλοντος) έχει μια λειτουργία Κάλυψη στην καρτέλα Πηγές. Μπορείτε να χρησιμοποιήσετε την επιλογή Κάλυψη για να βρείτε αχρησιμοποίητα CSS και JS που φορτώνει ο ιστότοπός σας.
- Ανοίξτε τον ιστότοπό σας στο Chrome στην επιφάνεια εργασίας.
- Κάντε δεξί κλικ σε ένα κενό λευκό χώρο στον ιστότοπό σας και επιλέξτε Επιθεωρώ από το μενού περιβάλλοντος.
- Κάνε κλικ στο Πηγές καρτέλα, πατήστε Ctrl + Shift + P για να ανοίξετε ένα παράθυρο εντολών και, στη συνέχεια, πληκτρολογήστε κάλυψη και επιλέξτε Ξεκινήστε την κάλυψη με όργανα και φορτώστε ξανά τη σελίδα από τις διαθέσιμες εντολές.
- Κάτω από την καρτέλα Κάλυψη, κάντε κλικ στο Φίλτρο URL και εισαγάγετε τον ριζικό τομέα του ιστότοπού σας εδώ για να εμφανίζονται μόνο εσωτερικά αρχεία CSS/JS.
└ Ελέγξτε το Αχρησιμοποίητα byte στήλη για να δείτε το ποσοστό των δεδομένων που φορτώνονται σε ένα αρχείο CSS/JS από το θέμα σας.
- Κάντε κλικ σε ένα αρχείο CSS για να προβάλετε το αχρησιμοποίητο CSS (με κόκκινες γραμμές) που έχει φορτωθεί από τον ιστότοπό σας. Το CSS που χρησιμοποιείται στην τρέχουσα σελίδα θα εμφανίζεται με πράσινες γραμμές.
Αφού αναλύσετε όλα τα αχρησιμοποίητα CSS που φορτώνονται στον ιστότοπό σας, ήρθε η ώρα να το αφαιρέσετε. Υπάρχουν πολλά δωρεάν εργαλεία διαθέσιμα για την αφαίρεση αχρησιμοποίητων CSS από ιστοσελίδες. Παρακάτω είναι ένα από τα δημοφιλή εργαλεία που έχω δοκιμάσει και χρησιμοποιήσει σε δικά μου έργα.
Χρησιμοποιήστε το PurifyCSS Online για να αφαιρέσετε το αχρησιμοποίητο CSS
Συνήθως, μπορείτε να βρείτε ένα πρόσθετο για σχεδόν τα πάντα στο WordPress. Αλλά για την κατάργηση του αχρησιμοποίητου CSS, δυστυχώς, δεν υπάρχει ούτε ένα πρόσθετο διαθέσιμο. Επομένως, θα χρησιμοποιήσουμε μη αυτόματα εργαλεία που δεν αφορούν το wordpress για να αφαιρέσουμε το αχρησιμοποίητο CSS από τον ιστότοπό σας.
Το PurifyCSS είναι το πιο φιλικό εργαλείο μη προγραμματιστή μπορείτε να βρείτε να ασχοληθείτε με αχρησιμοποίητο CSS. Το εργαλείο διαθέτει μια απλή διεπαφή χρήστη που επιτρέπει στους χρήστες να παρέχουν είτε τη διεύθυνση URL του ιστότοπου Ή τον κώδικα HTML και CSS. Για το WordPress, θα χρησιμοποιήσουμε την επιλογή URL και θα παρέχουμε συνδέσμους προς όλα τα είδη σελίδων στον ιστότοπό σας για να επιτρέψουμε στο εργαλείο να αρπάξει το CSS από όλα και να βελτιστοποιήσει για αχρησιμοποίητο CSS.
Ακολουθεί μια γρήγορη λίστα σελίδων που πρέπει να τοποθετήσετε στο εργαλείο:
- URL αρχικής σελίδας
- Πολλαπλές διευθύνσεις URL σελίδων ανάρτησης από κάθε κατηγορία στον ιστότοπό σας
└ Αυτό γίνεται για να διασφαλιστεί ότι το CSS περιλαμβάνεται για όλα τα στοιχεία ανάρτησης.
- Επικοινωνία, Πληροφορίες, Απόρρητο και κάθε είδους διαφορετικές σελίδες που μπορεί να έχετε στον ιστότοπό σας.
- Σελίδα αρχείου, σελίδα αναζήτησης, σελίδες συγγραφέα
- Προσαρμοσμένες σελίδες τύπου ανάρτησης
Hot Tip: Δημιουργήστε μια ανάρτηση/σελίδα «χαρακτηριστικών» με όλα τα θεματικά στοιχεία που χρησιμοποιείτε ή μπορεί να χρησιμοποιήσετε στο μέλλον, όπως πίνακα, Συλλογή εικόνων, Κώδικας, Προ, Λίστες Παραγγελίας, Λίστες χωρίς σειρά, Φόρμες, Καρτέλες, Ακορντεόν, Μπλοκ Gutenberg που χρησιμοποιείτε γενικά , και τα λοιπά.
Χρησιμοποιήστε αυτό το URL ανάρτησης «χαρακτηριστικών» στο εργαλείο PurifyCSS Online για να βεβαιωθείτε ότι περιλαμβάνεται το CSS για τα στοιχεία που χρησιμοποιούνται συνήθως.
Χτύπα το Εκκαθάριση CSS κουμπί μόλις προσθέσετε όλους τους σχετικούς τύπους URL από τον ιστότοπό σας στο εργαλείο PurifyCSS Online.
Αντιγράψτε το νέο CSS που δημιουργήθηκε από το εργαλείο και χρησιμοποιήστε το στον ιστότοπό σας. Βεβαιωθείτε ότι δημιουργήστε αντίγραφο ασφαλείας του αρχικού στυλ.css και άλλα αρχεία CSS στο θέμα σας πριν αντικαταστήσετε το νέο CSS που δημιουργήθηκε από το PurifyCSS.
Υπόδειξη: Μπορείτε είτε να χρησιμοποιήσετε τον ενσωματωμένο επεξεργαστή θεμάτων WordPress για να επεξεργαστείτε τα αρχεία CSS του θέματός σας ή να χρησιμοποιήσετε ένα πρόγραμμα FTP/SFTP για να συνδεθείτε στον διακομιστή και να επεξεργαστείτε άνετα αρχεία χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας Σημειωματάριου.