Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών του Chrome

5
Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών του Chrome
Εργαλεία προγραμματιστών Chrome Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών Chrome Vizion Interactive

Κατά τη διάρκεια του διαδικτυακού σεμιναρίου Semrush στις 2 Ιουνίουnd, παρείχα μερικές συμβουλές σχετικά με τον τρόπο αναγνώρισης μη χρησιμοποιημένων CSS και JavaScript χρησιμοποιώντας τα εργαλεία προγραμματιστών του Chrome. Σε περίπτωση που το έχασες, ελέγξτε το εδώ. Σκέφτηκα να αναλύσω λίγο περισσότερο αυτό το θέμα, καθώς εμφανίζεται σχεδόν πάντα κατά την εξέταση της ταχύτητας του ιστότοπου ως μέρος ενός ελέγχου SEO.

Ιστορικό

Όλοι γνωρίζουμε τώρα ότι ένας γρήγορος ιστότοπος είναι καλός για τους χρήστες, είναι αναμενόμενο αυτές τις μέρες, αλλά σύντομα θα παίξει μεγαλύτερο ρόλο στο πόση οργανική επισκεψιμότητα θα δημιουργήσει ο ιστότοπός σας. Τα Core Web Vitals της Google θα συμπεριληφθούν ως παράγοντες κατάταξης σε μια μελλοντική ενημέρωση αλγορίθμου που θα μετατοπίσει τις ταξινομήσεις για ορισμένους ιστότοπους. Δεν ξέρουμε ακόμη πόσο, αλλά από ό,τι καταλαβαίνουμε δεν θα είναι πιο σημαντικό από τη συνάφεια και πιθανότατα θα είναι περισσότερο ένας διαχωρισμός μεταξύ ανταγωνιστικών τοποθεσιών ή σελίδων στα αποτελέσματα. Μπορείτε να διαβάσετε περισσότερα σχετικά με τη σημασία του Core Web Vitals.

Προσδιορισμός μη χρησιμοποιημένων CSS και JavaScript με χρήση των εργαλείων προγραμματιστή του Chrome

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

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

  1. Για να δείτε το αχρησιμοποίητο CSS ή JavaScript, μεταβείτε στη σελίδα που θέλετε να επιθεωρήσετε και, στη συνέχεια, ανοίξτε τα εργαλεία προγραμματιστή του Chrome πατώντας Control + Shift + I ή πατώντας F12.
  2. Μεταβείτε στην καρτέλα ΠηγέςΕργαλεία προγραμματιστών Chrome Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών Chrome Vizion Interactive
  3. Εκτελέστε μια εντολή πατώντας Control + Shift + P
  4. Πληκτρολογήστε „Κάλυψη“ και επιλέξτε „Εμφάνιση κάλυψης“ στις προτάσεις αναζήτησηςΕργαλεία προγραμματιστών Chrome Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών Chrome Vizion Interactive
  5. Στο νέο παράθυρο, κάντε κλικ στο κουμπί επαναφόρτωση

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

Εργαλεία προγραμματιστών Chrome Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών Chrome Vizion Interactive

Σε αυτό το παράδειγμα για την αρχική σελίδα του Google.com, μπορείτε να δείτε ότι χρησιμοποιούνται μόνο τα μισά περίπου από τα σενάρια και το πρώτο αρχείο JavaScript είναι το μεγαλύτερο.

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

Εργαλεία προγραμματιστών Chrome Πώς να βρείτε αχρησιμοποίητα CSS και JavaScript στα Εργαλεία προγραμματιστών Chrome Vizion Interactive

Μπορείτε να δείτε σε αυτό το αρχείο JavaScript, οι γραμμές 3-10 και οι γραμμές 14 και 15 δεν χρησιμοποιούνται.

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

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

Διεκδικήστε τη δωρεάν συμβουλευτική σας SEO

Στη Vizion Interactive, έχουμε την τεχνογνωσία, την εμπειρία και τον ενθουσιασμό για να έχουμε αποτελέσματα και να κρατάμε τους πελάτες ευχαριστημένους! Μάθετε περισσότερα σχετικά με το πώς οι Έλεγχοι SEO, η Διαχείριση Τοπικής Καταχώρισης, η Συμβουλευτική για τον επανασχεδιασμό ιστοτόπων και οι υπηρεσίες ψηφιακού μάρκετινγκ B2B μπορούν να αυξήσουν τις πωλήσεις και να ενισχύσουν την απόδοση επένδυσης (ROI). Αλλά μην δεχθείτε απλώς το λόγο μας, ελέγξτε τι έχουν να πουν οι πελάτες μας, μαζί με τις περιπτωσιολογικές μας μελέτες.

παρόμοιες αναρτήσεις

Schreibe einen Kommentar