Hvordan fikse “Unngå en overdreven DOM-størrelse” Wa…

Har du noen gang jobbet med WordPress-siden din, og plutselig blir du truffet av en “Unngå en overdreven DOM-størrelse”-advarsel? Ja, det er litt av en hodepine. Denne advarselen dukker opp når nettsidens Document Object Model-størrelse (DOM) går utover det som er anbefalt.

Men ikke bekymre deg, du kan fikse dette ved å optimalisere WordPress-nettstedet ditt. Dette innebærer å redusere elementene på siden din og strukturere HTML-en din effektivt. Vær også forsiktig når du velger plugins og temaer, da de kan øke DOM-størrelsen din.

Dette blogginnlegget er her for å hjelpe. Den gir praktiske trinn for å fikse advarselen “Unngå en overdreven DOM-størrelse”. Mot slutten vil du være klar til å optimalisere WordPress-nettstedet ditt, øke hastigheten og forbedre brukeropplevelsen. La oss komme i gang!

Hva er “Unngå en overdreven DOM-størrelse”-advarselen?

Advarselen “Unngå en overdreven DOM-størrelse” er et ytelsesflagg fra revisjonsverktøy for nettsteder som Googles fyrtårn. Det indikerer at en nettsides Document Object Model (DOM) har for mange noder. Dette kan påvirke nettstedets ytelse negativt.

En DOM er en representasjon av en nettside som nettlesere bruker til å gjengi nettstedet. Den består av noder, som er HTML-elementer som tagger og tekst. Når en DOM har for mange noder, kalles det en “overdreven DOM-størrelse”.

For å opprettholde optimal ytelse, anbefales det generelt å ha færre enn 1500 DOM-noder på en side. Dybden av DOM bør minimeres til mindre enn 32 nestede nivåer. Dette reduserer kompleksiteten til DOM.

Det er også tilrådelig å unngå å ha foreldrenoder med mer enn 60 barn noder. Dette forhindrer at en enkelt node blir for kompleks. Disse fremgangsmåtene kan bidra til å unngå “Overdreven DOM-størrelse”-advarselen.

Hvordan påvirker en stor DOM nettstedshastighet og brukeropplevelse?

Nettstedets ytelse er avgjørende siden det direkte påvirker brukeropplevelsen.

Et nettsted med god ytelse lastes raskt inn, reagerer raskt på brukerinteraksjoner, og gir en jevn nettleseropplevelse. Dette er spesielt viktig i en tid der brukere har høye forventninger til digitale opplevelser.

På den annen side kan dårlig nettstedytelse føre til lengre lastetider og grensesnitt som ikke reagerer. Disse problemene kan resultere i frustrerende brukeropplevelser, som fører til høyere fluktfrekvens og lavere brukerengasjement.

Til syvende og sist kan dårlig ytelse føre til tap i konverteringer eller salg. Derfor er det avgjørende å opprettholde optimal ytelse på nettstedet, inkludert administrasjon av DOM-størrelse, for å lykkes med ethvert nettsted.

Hva er årsakene til for stor DOM-størrelse?

Nettsider kan bli trege og yte dårlig på grunn av en stor DOM-størrelse. Dette er et vanlig problem som er verdt å undersøke når du optimaliserer nettytelsen. La oss se på hovedårsakene til dette problemet:

1. For mange elementer på en side

Komplekse design eller overflødig kode kan føre til for mange elementer på en side. Hvis designet ikke er strømlinjeformet for ytelse, får du et rotete DOM-tre. Dette kan senke siden og påvirke brukeropplevelsen.

2. Dypt nestede strukturer

Dyp nesting i HTML kan forårsake ytelsesproblemer. Når det er mye innebygging, blir DOM-treet komplekst. Denne kompleksiteten kan gjøre det vanskeligere for nettlesere å gjengi siden effektivt, og redusere CSS- og JavaScript-behandlingen.

3. Uoptimaliserte temaer og plugins

Temaer og plugins kan legge til unødvendige elementer, JavaScript eller CSS. Temaer har ofte standardfunksjoner som blåser opp DOM, mens plugins kan legge til skript og stil som øker innlastingstiden, selv om disse funksjonene ikke brukes.

La oss se på noen få effektive verktøy og teknikker for å hjelpe deg med å diagnostisere dette problemet og veilede optimaliseringsarbeidet ditt.

1. Google Lighthouse

Google Lighthouse er et gratis verktøy med åpen kildekode som kan hjelpe deg med å diagnostisere en rekke problemer med nettstedets ytelse, inkludert overdreven DOM-størrelse. Slik bruker du det:

1. Åpne Chrome-nettleseren og naviger til nettsiden du vil analysere.
2. Høyreklikk på siden og velg Undersøke for å åpne Chromes utviklerverktøy.
3. Klikk på fyr fanen, og klikk deretter Analyser sideinnlasting.

2. Chrome DevTools

Chrome DevTools gir en detaljert oversikt over nettsidens DOM. Du kan bruke den til å telle DOM-noder og identifisere elementer som bidrar til en stor DOM-størrelse. Dette er hvordan:

1. Åpne nettsiden i Chrome.
2. Høyreklikk og velg Undersøke for å åpne DevTools.
3. I Elementer fanen, kan du se DOM-treet og telle nodene.

3. WebPageTest

WebPageTest er et nettbasert verktøy som gir en detaljert analyse av nettsidens ytelse. Den inkluderer en oversikt over sidens DOM-elementer. Slik bruker du det:

1. Gå til WebPageTest.org.
2. Skriv inn nettadressen til nettsiden du vil teste.
3. Klikk Start test.

Hvordan fikse advarselen “Unngå en overdreven DOM-størrelse”?

For å fikse “Unngå en overdreven DOM-størrelse”-advarselen, må du optimalisere nettsiden din for å redusere antall elementer i DOM-en. Slik kan du nærme deg dette ved å bruke følgende teknikker:

1. Strømlinjeform HTML-strukturen

For et WordPress-nettsted kan du strømlinjeforme HTML-strukturen ved å følge disse teknikkene;

• For WordPress-nettstedet ditt, velg et enkelt tema som Astra eller Elementor. Disse legger ikke til unødvendige elementer på sidene dine.
• Gå gjennom sidene og innleggene dine i WordPress-editoren. Fjern ubrukte kortkoder, ekstra div-tagger og tomme elementer.
• Høyreklikk på WordPress-siden din og velg Vis sidekilde.

• Se etter kodeseksjoner som gjentar seg selv, som flere div-tagger med samme klasse- eller stilattributter.

• Gå deretter til WordPress-dashbordet Utseende → Temaredigering. Her kan du se PHP-filene til temaet ditt.
• Fjern eventuelle unødvendige nestede strukturer.

• Etter å ha gjort endringer, lagre filen. Test alltid nettstedet ditt for å sikre at alt fortsatt fungerer som det skal.
• Høyreklikk på nettstedet og velg Inspiser. Gå til fyr fanen og klikk Analyser sideinnlasting å generere en rapport. Dette vil vise deg om det er en “Unngå en overdreven DOM-størrelse”-advarsel.

Her kan du ikke se noen slik “Unngå en overdreven DOM-størrelse”-advarsel.

2. Paginere eller uendelig rull for innholdstunge sider

Du kan legge til paginering til WordPress-temaet ditt ved å redigere funksjoner.php
fil med temaet ditt og muligens malfilen der du vil at pagineringen skal vises.

• Gå til WordPress Dashboard og naviger til Utseende → Temaredigering. Velg ditt aktive tema.
• Finn funksjoner.php fil og klikk på den for å redigere. Her kan du legge til en egendefinert funksjon for å lage pagineringslenker.
• Legg til følgende funksjon til din funksjoner.php fil:

function my_custom_pagination() { global $wp_query; $big = 999999999; echo paginate_links( array( ‘base’ => str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ), ‘format’ => ‘?paged=%#%’, ‘current’ => max( 1, get_query_var(‘paged’) ), ‘total’ => $wp_query->max_num_pages ) ); }

• Åpne malfilen der du vil ha pagineringen (f.eks. index.php). Legg til følgende kode der du vil ha pagineringslenkene:

• Hvis du oppretter en ny sløyfe med WP_Query, sørg for at den håndterer paginering. Du kan gjøre dette ved å legge til følgende kode:

$args = array( ‘posts_per_page’ => 10, ‘paged’ => get_query_var(‘paged’) ? get_query_var(‘paged’) : 1 ); $my_query = new WP_Query( $args );

• Etter å ha lagt til koden, lagre endringene i functions.php-filen og malfilen der du la til pagineringskallet.

3. Optimaliser eller fjern unødvendige skript og plugins

Ved å administrere skript og plugins kan du også fikse advarselsproblemet for overdreven DOM-størrelse.

Å gjøre det:

1. Se gjennom pluginene du har installert og deaktiver eller avinstaller alle som ikke er i bruk eller som legger til unødvendig oppblåsthet på sidene dine.
2. Bruk plugins som WP rakett eller Autooptimaliser for å forminske og kombinere skript, redusere forespørsler og DOM-elementer.

4. Utnytt gjengivelse på serversiden og lat belastning

For å fikse advarselen om DOM-størrelse kan du aktivere gjengivelse på serversiden og lat lasting på WordPress-nettstedet ditt.

1. Gjengivelse på tjenersiden (SSR)

SSR innebærer å behandle og gjengi den første HTML-en til nettsidene dine på serveren din i stedet for å stole på JavaScript på klientsiden.

Dette kan forbedre nettstedets lastetid og generelle ytelse betraktelig. For detaljerte trinn for å aktivere SSR på WordPress-nettstedet ditt, følg dette detaljert veiledning.

2. Lat lasting

Det er en annen effektiv teknikk for å optimalisere lastetider og løse problemet med DOM-størrelse. Det fungerer ved å bare laste inn nødvendig innhold når det er nødvendig, for eksempel bilder som kommer inn i visningsporten. Dette reduserer den første innlastingstiden for siden.

For å implementere lat belastning på WordPress-nettstedet ditt, følg denne detaljerte veiledningen. Vurder også å bruke en av de beste pluginene for lazy-loading for en jevnere implementering.

Beste praksis for å forhindre overdreven DOM-størrelse

Her er noen forebyggende tiltak for å unngå “Overdreven DOM-størrelse”-advarselen i WordPress:

1. Velg et enkelt tema: Velg et enkelt tema som ikke legger til unødvendige elementer på sidene dine. Temaer som Astra eller Elementor er gode valg.
2. Begrens bruk av plugins: Hver plugin kan legge til ekstra elementer til DOM. Bruk kun nødvendige plugins og gjennomgå og fjern regelmessig alle som ikke er i bruk.
3. Rydd opp på sidene dine: Gjennomgå sidene og innleggene dine regelmessig i WordPress-editoren. Fjern ubrukte kortkoder, ekstra div-tagger og tomme elementer.
4. Optimaliser bildene dine: Store bilder kan legges til DOM-størrelsen din. Bruk bildeoptimaliseringsprogramtillegg for å redusere størrelsen uten å miste kvalitet.
5. Implementer lat lasting: Lazy lasting kan redusere den opprinnelige DOM-størrelsen ved å bare laste inn elementer etter behov.
6. Bruk paginering: For innholdstunge sider bør du vurdere å bruke paginering eller uendelig rulling for å begrense antall elementer som lastes inn samtidig.
7. Reduser koden din: Bruk verktøy for å forminske HTML, CSS og JavaScript. Dette kan bidra til å redusere den totale DOM-størrelsen din.
8. Overvåk nettstedet ditt regelmessig: Bruk verktøy som Google Lighthouse for å overvåke nettstedets ytelse og oppdage eventuelle DOM-størrelsesproblemer tidlig.

Sammendrag

Så der har du det! Du har nettopp navigert inn og ut av å fikse advarselen “Unngå overdreven DOM-størrelse” i WordPress. Fra å forstå problemet til å implementere løsningene, har du tatt et betydelig skritt mot å optimalisere nettstedet og brukeropplevelsen din.

Husk at hvert skritt du tar mot optimalisering bidrar til en raskere, jevnere og mer brukervennlig nettside. Så hold disse tipsene tilgjengelige og fortsett reisen din innen webutvikling. Hvis du har spørsmål, vennligst skriv dem i kommentarfeltet.

×

Få vårt nyhetsbrev
Vær den første som får de siste oppdateringene og veiledningene.

Takk for at du abonnerer på oss!