Ή στο GTmetrix "Μειώστε τον αριθμό των στοιχείων DOM":
Τι είναι το DOM;
Όταν το πρόγραμμα περιήγησής σας λαμβάνει ένα έγγραφο HTML, πρέπει να μετατραπεί σε δομή δέντρου, η οποία χρησιμοποιείται για απόδοση και σχεδίαση με CSS και JavaScript.
Αυτή η δομή δέντρου ονομάζεται DOM ή μοντέλο αντικειμένου εγγράφου.
- Κόμβοι Όλα τα στοιχεία HTML στο DOM ονομάζονται κόμβοι. (γνωστός και ως «φύλλα» στο δέντρο).
- Βάθος – Το πόσο διαρκεί ένα «κλαδί» σε ένα δέντρο λέγεται βάθος. Για παράδειγμα, στο παραπάνω διάγραμμα, η ετικέτα img έχει βάθος 3. (HTML -> body -> div -> img).
- Παιδικά στοιχεία – όλοι οι θυγατρικοί κόμβοι ενός κόμβου (χωρίς περαιτέρω διακλάδωση) είναι παιδιά.
Το Lighthouse και το Google PageSpeed Insights αρχίζουν να επισημαίνουν σελίδες εάν πληρούται μία από τις ακόλουθες προϋποθέσεις:
- Σύνολο να έχει περισσότερους από 1500 κόμβους.
- Να έχει βάθος μεγαλύτερο από 32 κόμβους.
- Ο γονικός κόμβος έχει περισσότερους από 60 θυγατρικούς κόμβους.
Πώς το μέγεθος DOM επηρεάζει την απόδοση;
Το υπερβολικό μέγεθος DOM μπορεί να επηρεάσει την απόδοση με διάφορους τρόπους.
- Υψηλότερος χρόνος ανάλυσης και απόδοσης (FCP) . Ένα μεγάλο δέντρο DOM και πολύπλοκοι κανόνες στυλ κάνουν εξαιρετική δουλειά για το πρόγραμμα περιήγησης. Το πρόγραμμα περιήγησης πρέπει να αναλύσει το HTML, να δημιουργήσει το δέντρο απόδοσης, κ.λπ. Κάθε φορά που ο χρήστης αλληλεπιδρά ή κάτι στο HTML αλλάζει, το πρόγραμμα περιήγησης πρέπει να το υπολογίζει ξανά.
- Αυξάνει τη χρήση της μνήμης - Ο κώδικας JavaScript μπορεί να έχει λειτουργίες πρόσβασης σε στοιχεία DOM. Ένα μεγαλύτερο δέντρο DOM αναγκάζει τη JavaScript να χρησιμοποιεί περισσότερη μνήμη για την επεξεργασία τους. Ένα παράδειγμα θα ήταν ένας επιλογέας ερωτημάτων, στο
document.querySelectorAll('img')το οποίο παραθέτει όλες τις εικόνες που χρησιμοποιούνται συνήθως από βιβλιοθήκες που φορτώνουν τεμπέλης. - Αυξάνει το TTFB – Καθώς το μέγεθος του DOM αυξάνεται, το μέγεθος του εγγράφου HTML αυξάνεται (σε KB). Εφόσον χρειάζεται να μεταφερθούν περισσότερα δεδομένα μέσω του δικτύου, αυτό αυξάνει το TTFB.
Πώς να μειώσετε το μέγεθος DOM τεχνικά;
Για παράδειγμα, είναι τεχνικά εύκολο να μειώσετε το μέγεθος του DOM:
χρήση:
<ul id="navigation-main">etc..</ul>αντί:
<div id="navigation-main"><ul>etc..</ul></div>Βασικά, απαλλαγείτε από όλα τα πιθανά στοιχεία HTML. Μπορείτε επίσης να χρησιμοποιήσετε το Flexbox ή το Grid για περαιτέρω μείωση του μεγέθους DOM.
Αλλά επειδή χρησιμοποιείτε WordPress, αυτό δεν θα σας βοηθήσει πολύ!
Πώς να μειώσετε το μέγεθος DOM στο WordPress;
Χωρίστε τις μεγάλες σελίδες σε πολλές σελίδες
Έχετε μια σελίδα με τα πάντα στον ιστότοπο; Σας αρέσουν οι υπηρεσίες, οι φόρμες επικοινωνίας, τα προϊόντα, οι αναρτήσεις ιστολογίου, οι μαρτυρίες κ.λπ.;
Δοκιμάστε να τις χωρίσετε σε πολλές σελίδες και να τις συνδέσετε από την κεφαλίδα/γραμμή πλοήγησης.
Τεμπέλης φόρτωση και σελιδοποίηση παντός δυνατού
Τεμπέλης φόρτωση πάσης φύσεως στοιχείων. Ορίστε μερικά παραδείγματα:
- Τεμπελική φόρτωση βίντεο YouTube - Χρησιμοποιήστε το WP YouTube Lyte ή το Lazy Load by WP Rocket.
- Περιορίστε τον αριθμό αναρτήσεων/προϊόντων ιστολογίου ανά σελίδα – Συνήθως προσπαθώ να κρατάω το πολύ 10 αναρτήσεις ιστολογίου ανά σελίδα και να σελιδοποιώ τις υπόλοιπες.
- Τεμπέλης στη φόρτωση αναρτήσεων/προϊόντων ιστολογίου – Προσθέστε ένα κουμπί Load More ή άπειρη κύλιση για να φορτώσετε περισσότερες αναρτήσεις ιστολογίου ή προϊόντα.
- Τεμπέλης φόρτωση σχολίων - Χρησιμοποιώ τη φόρτωση υπό όρους του Disqus αφού χρησιμοποιώ το Disqus . Εάν χρησιμοποιείτε τα δικά σας σχόλια, χρησιμοποιήστε πρόσθετα όπως το Lazy Load for Comments .
- Σελιδοποίηση σχολίων - εάν έχετε εκατοντάδες σχόλια, αυτό μπορεί επίσης να επηρεάσει το μέγεθος DOM. Για σελιδοποίηση σχολίων, μεταβείτε στις Ρυθμίσεις -> Συζήτηση -> Σελιδοποίηση σχολίων.
- Περιορίστε τον αριθμό των σχετικών αναρτήσεων – Δοκιμάστε να περιορίσετε τον αριθμό των σχετικών αναρτήσεων σε 3 ή 4.
Σημείωση: Η αργή φόρτωση εικόνων δεν θα μειώσει το μέγεθος του DOM
Μην κρύβετε ανεπιθύμητα στοιχεία με το CSS
Μερικές φορές μπορεί να χρειαστεί να αφαιρέσετε στοιχεία που εισάγονται από ένα θέμα/σχεδιαστή. Για παράδειγμα, προσθέστε ένα κουμπί στο καλάθι στις σελίδες προϊόντων, ένα κουμπί τιμής, πληροφορίες συγγραφέα, ημερομηνία δημοσίευσης κ.λπ.
Μια γρήγορη λύση είναι να τα αποκρύψετε με CSS:
.cart-button {display:none;}Παρόλο που αυτή η λύση φαίνεται απλή, εκθέτετε τους χρήστες σε ανεπιθύμητο κώδικα (ο οποίος περιλαμβάνει τόσο τη σήμανση HTML όσο και το στυλ CSS).
Ελέγξτε τις ρυθμίσεις θέματος/προσθήκης για να δείτε αν υπάρχει επιλογή να το αφαιρέσετε. Διαφορετικά βρείτε τον σχετικό κώδικα PHP και αφαιρέστε/σχολιάστε τον.
Χρησιμοποιήστε καλογραμμένα θέματα και προγράμματα δημιουργίας σελίδων
Ένα καλό θέμα παίζει σημαντικό ρόλο στο μέγεθος DOM. Χρησιμοποιήστε καλογραμμένα θέματα όπωςGeneratePress ήAstra .
Τα προγράμματα δημιουργίας σελίδων εισάγουν επίσης πάρα πολλά div. Χρησιμοποιήστε κατασκευαστές όπωςοξυγόνο, τα οποία δεν εισάγουν ανεπιθύμητα μπλοκ div και έχουν περισσότερο έλεγχο στη δομή HTML.
Συμπέρασμα
Μπορεί να υπάρχουν περισσότερες προσθήκες ή ρυθμίσεις θέματος που εισάγουν πάρα πολλά div. Ένα παράδειγμα θα ήταν τα πρόσθετα "μέγα μενού", όπως το UberMenu.
Μερικές φορές είναι κρίσιμα για την εμπειρία χρήστη του ιστότοπού σας. Αλλά μερικές φορές δεν χρησιμοποιούνται ποτέ από τους χρήστες.
Ίσως δεν γίνεται ποτέ κλικ στους συνδέσμους υποσέλιδου, επειδή οι περισσότεροι επισκέπτες πραγματοποιούν κύλιση μόνο μέχρι το 75%.
Χρησιμοποιήστε εργαλεία όπως το HotJar ή το Google Analytics Events για να μάθετε τι χρησιμοποιούν πραγματικά οι επισκέπτες και τι δεν χρησιμοποιούν.Αναλύστε, μετρήστε και επαναλάβετε.
