Το DOM (Document Object Model) είναι μια προγραμματιστική διεπαφή για έγγραφα HTML και XML και το όνομα που δίνεται στη δομή ενός εγγράφου HTML, που αποτελείται από διακλαδώσεις και κόμβους που περιέχουν αντικείμενα.
Η ιστορία του Μοντέλου Αντικειμένου Εγγράφου χρονολογείται από τους λεγόμενους"πολέμους των φυλλομετρητών" στα τέλη της δεκαετίας του 1990 μεταξύ του Netscape Navigator και του Microsoft Internet Explorer, καθώς και της JavaScript και της JScript, των πρώτων γλωσσών σεναρίων που εφαρμόστηκαν ευρέως στις μηχανές JavaScript των φυλλομετρητών ιστού.
Δομή DOM στο WordPress: δέντρο, κλαδιά και κόμβοι
Το DOM στο WordPress δεν διαφέρει πολύ από οποιονδήποτε άλλο ιστότοπο.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Δέντρο: Ολόκληρη η σελίδα αναπαρίσταται ως δέντρο με έναν κόμβο-ρίζα
(<html>)και τα στοιχεία-παιδιά του. - Κλάδοι: Κάθε στοιχείο μέσα σε ένα
<div>,<header>,<footer>κ.λπ. αντιπροσωπεύει έναν κλάδο του δέντρου. - Κόμβοι: Όλα τα στοιχεία HTML, όπως
<p>,<img>ή<a>,είναι κόμβοι που κρέμονται από κλαδιά. Αυτοί οι κόμβοι μπορεί να είναι εσωτερικοί (που περιέχουν άλλους κόμβους) ή εξωτερικοί (τα "φύλλα" του δέντρου που δεν έχουν άλλα παιδιά).
Έτσι, η πυκνότητα των κλάδων εξαρτάται από το είδος και τον αριθμό των στοιχείων που τον αποτελούν. Για παράδειγμα, ένα σύνθετο μενού πλοήγησης στο WordPress μπορεί να δημιουργήσει πολλά επίπεδα διακλαδώσεων και δεκάδες κόμβους λόγω του αριθμού των συνδέσμων και των υπομενού.
Μπορείτε να θεωρήσετε τους κόμβους ως όλα τα στοιχεία HTML σε μια σελίδα. Όσο περισσότερα στοιχεία έχετε, συνήθως τόσο περισσότερο χρόνο χρειάζεται, γεγονός που οδηγεί σε υψηλότερο συνολικό χρόνο μπλοκαρίσματος(Total Block Time- TBT).
Αυτό μπορεί να είναι ένα δύσκολο θέμα βελτιστοποίησης στο WordPress, καθώς δεν μπορείτε απλά να αφαιρέσετε τα στοιχεία DOM που συνθέτουν τη δομή μιας σελίδας. Ωστόσο, μπορούμε να εμφανίσουμε επιλεκτικά αυτά τα στοιχεία και να φορτώσουμε μια σειρά αντικειμένων κάτω από το fold, μειώνοντας έτσι το συνολικό μέγεθος του DOM.
Γιατί να μειώσετε το μέγεθος του DOM;
Ένα ογκώδες δέντρο DOM μπορεί να επιβραδύνει το χρόνο φόρτωσης του ιστότοπού σας με διάφορους τρόπους, αυξάνοντας τη χρήση μνήμης προκαλώντας μεγαλύτερους και πιο αργούς υπολογισμούς στυλ, καθώς και δαπανώντας περιττά κόστη δεδομένων για τους χρήστες.
Αυτά τα διαφορετικά σενάρια μπορεί να περιλαμβάνουν την άσκοπη φόρτωση κόμβων που δεν είναι ορατοί όταν ο χρήστης φορτώνει για πρώτη φορά τη σελίδα, την επανάληψη υπολογισμών θέσης και στυλ κόμβων σε συνεχή βάση και την αποθήκευση υπερβολικού αριθμού αναφορών σε κόμβους που υπερφορτώνουν τη μνήμη των συσκευών των χρηστών.
Τα βραχυπρόθεσμα και μακροπρόθεσμα οφέλη της βελτιστοποίησης της ταχύτητας φόρτωσης της σελίδας έχουν ήδη εξηγηθεί σε χίλια και ένα άρθρα. Εν ολίγοις, βραχυπρόθεσμα αποφεύγετε ότι οι χρήστες θα εγκαταλείψουν τον ιστότοπό σας βαριεστημένα περιμένοντας και πιθανότατα θα περάσουν περισσότερο χρόνο σε αυτόν. Η ταχύτητα φόρτωσης είναι ένας από τους παράγοντες που αναγνωρίζει η Google για την τοποθέτηση στο SEO και απ' ό,τι καταλαβαίνω είναι και για τις υπόλοιπες μηχανές αναζήτησης, οπότε μακροπρόθεσμα θα αυξηθεί η πολύτιμη οργανική επισκεψιμότητα.
Τι προκαλεί την αύξηση του μεγέθους του DOM;
Το τελικό μέγεθος του DOM επηρεάζεται από πολλούς παράγοντες, όπως το ίδιο το πρότυπο, τι προσθέτουν τα διάφορα πρόσθετα που χρησιμοποιείτε και το είδος του περιεχομένου που προσθέτετε, όπως πολύπλοκα μπλοκ ή τα κακόβουλα "sliders" εικόνων, κλπ. . Επίσης ο κώδικας που παράγεται για παράδειγμα από τους λεγόμενους "Builders".
Για παράδειγμα, μέχρι το 2022, χρονιά κατά την οποία εγκατέλειψα το Elementor επειδή αντιστεκόταν στη βελτιστοποίηση και ήταν σπάνιο να μην χαλάσει κάτι σχεδόν σε κάθε ενημέρωση, συν μια-δυο κακές εμπειρίες με την τεχνική υποστήριξή του, αυτός ο οικοδόμος μετέτρεψε τον κώδικα ιστού σε μια πραγματική αλφαβητική σούπα και έναν εφιάλτη με χιλιάδες
Τον Απρίλιο του ίδιου έτους, το Elementor ενσωμάτωσε το "Container" του Flexbox ως μια πολύ νέα και επαναστατική καινοτομία, όταν το container αποτελούσε ήδη τη βάση του GenerateBlocks για χρόνια.
Πώς να μετρήσετε το DOM;
Για τη μέτρηση επέλεξα μια ανάρτηση που δεν έχει βελτιστοποιηθεί ακόμα, είναι λίγο μεγάλη και με διαφορετικούς τύπους στοιχείων.
Ας ξεκινήσουμε με το πιο γνωστό και δημοφιλές: PageSpeed Insights . Η Google επισημαίνει εκεί ως προειδοποίηση(με πορτοκαλί χρώμα) όταν το στοιχείο body έχει περισσότερους από 800 κόμβους και ως προειδοποίηση σφάλματος(με κόκκινο χρώμα) όταν το στοιχείο body έχει περισσότερους από 1.400 κόμβους και ένα μήνυμα με την εξής σύσταση:"Αποφύγετε το υπερβολικό μέγεθος του DOM".
Ανάλογα με το περιεχόμενο και τη δομή κάθε σελίδας που αναλύετε, θα βρείτε περισσότερες ή λιγότερες ενδείξεις για το ποια στοιχεία μπορείτε να επιτεθείτε. Το πλεονέκτημα είναι ότι συνήθως εμφανίζεται μια εικόνα που δείχνει το εν λόγω στοιχείο.
Για άλλη μια φορά, θα ήθελα να σας υπενθυμίσω ότι όλες αυτές οι ειδοποιήσεις είναι μόνο συστάσεις και ότι δεν πρέπει να πανικοβληθείτε ή να αποκτήσετε εμμονή με αυτές τις μετρήσεις. Υπάρχουν σελίδες που προσφέρουν καλή εμπειρία χρήσης και καλή αντιληπτή ταχύτητα με χαμηλές βαθμολογίες PageSpeed.
Με το GTmetrix θα έχουμε γενικά τα ίδια αποτελέσματα στο DOM.
Ωστόσο, εδώ το γράφημα "καταρράκτη" των αιτήσεων είναι πολύ χρήσιμο για να επιθεωρήσετε με μια ματιά όλα τα στοιχεία ταξινομημένα ανά τύπο και ανά χρόνο φόρτωσης.
Αλλά ο ευκολότερος και ταχύτερος τρόπος είναι μέσω οποιουδήποτε προγράμματος περιήγησης. Ανοίξτε τη σελίδα που θέλετε να αναλύσετε και κάντε δεξί κλικ / "inspect" και στην καρτέλα "Network" θα βρείτε έναν πολύ πιο λεπτομερή καταρράκτη , διότι μπορείτε να τον συμπληρώσετε με κύλιση της σελίδας και θα προστεθούν όλα τα αρχεία που περιέχει. Στη συνέχεια, μπορείτε να τα ταξινομήσετε κατά βάρος, τύπο, χρόνο κ.λπ.
Κάτω από αυτό το παράθυρο θα βρείτε μια σύνοψη των αποτελεσμάτων. Στα αριστερά, ο αριθμός των αιτήσεων. Δεξιά, με μπλε χρώμα, ο χρόνος του συμβάντος DOMContentLoaded και με κόκκινο χρώμα ο χρόνος φόρτωσης της συγκεκριμένης σελίδας.
Μειώστε το μέγεθος του DOM με τα "Lazy Elements" του Perfmatters.
Το Perfmatters, αυτό το απαραίτητο πρόσθετο που δεν κουράζομαι ποτέ να συστήνω, πρόσθεσε στην έκδοση 2.3.3 της 28ης Αυγούστου 2024 μια επιλογή που ονομάζεται Lazy Elements και η οποία, αν και βρίσκεται ακόμα σε Beta, λειτουργεί πολύ καλά για να διευκολύνει το έργο της ελάφρυνσης του DOM.
Αυτή η συνάρτηση επιτρέπει την προσθήκη της κακώς ονομαζόμενης"Lazy Load" σε συγκεκριμένα στοιχεία και τους απογόνους τους (παιδιά) προσθέτοντας οποιοδήποτε τμήμα μιας συμβολοσειράς χαρακτηριστικών (class="example") ενός γονικού περιέκτη.
Στην τεκμηρίωση που παρέχεται από το Perfmatters σχετικά με αυτή τη νέα λειτουργία, μας προειδοποιεί να μην προσπαθήσουμε να εφαρμόσουμε το "Lazy Load" σε στοιχεία που βρίσκονται πάνω από το fold. Δηλαδή, αυτό που φορτώνει στην οθόνη και είναι το πρώτο πράγμα που βλέπει ο χρήστης χωρίς να κάνει κύλιση προς τα κάτω.
Σημειώνεται επίσης ότι αν δείτε ότι κάτι είναι οπτικά σπασμένο, βεβαιωθείτε ότι έχετε χρησιμοποιήσει μια μοναδική συμβολοσειρά στη σελίδα που δεν είναι κοινή με άλλα στοιχεία.
Όπως και με τις εικόνες αργής φόρτωσης, το περιεχόμενο τοποθετείται μέσα σε ένα . Αυτό σημαίνει ότι οτιδήποτε φορτώνει αργά εξακολουθεί να είναι τεχνικά ανιχνεύσιμο και ευρετηρίασιμο από την Google. Ωστόσο, δεν μπορούν να πουν με σιγουριά πώς θα αντιμετωπίσει η Google τα στοιχεία με Lazy Load σε μια συμβολοσειρά. Έτσι, συνιστούν, όσον αφορά το SEO, να δοκιμάζετε πρώτα.
Προειδοποιεί επίσης να μην προσπαθήσετε να εφαρμόσετε Lazy Load σε στοιχεία που περιέχουν εικόνες που ξεκινούν ένα "lightbox". Και έτσι είναι, μπόρεσα να επαληθεύσω ότι η εγγενής λειτουργία lightbox του WordPress σταματά να λειτουργεί όταν η κλάση ενός στοιχείου που την υλοποιεί προστίθεται στη λίστα.
Διαφορετικά, το "Lazy Elements" λειτουργεί τέλεια. Χάρη σε αυτό το χαρακτηριστικό, έχω εξοικονομήσει πολύ χρόνο για να αραιώσω το DOM με καλά αποτελέσματα. Ελπίζω ότι το Perfmatters θα συνεχίσει την ανάπτυξή του για να βελτιώσει και να επεκτείνει τις επιλογές του.
