För stor DOM-storlek

Silktide mäter hur många element som bygger upp din sida och hur djupt de är nästlade. Sidor som byggs upp av för många element läses in långsammare, reagerar långsammare och använder mer minne på besökarnas enheter.

Varje rubrik, stycke, bild och behållare på en sida är ett element i webbläsarens interna modell av sidan, . Webbläsare hanterar några hundra element utan problem, men sidor med tusentals element gör varje stilberäkning, layoutomgång och skriptuppdatering mätbart långsammare.

Varför detta är viktigt

Besökare upplever en överdimensionerad sida som trög: det tar längre tid innan sidan visas, rullningen hackar och interaktioner som att öppna en meny får märkbara fördröjningar. Effekten är värst på enheter med minst kraft i reserv – enklare telefoner och äldre datorer – så besökare med den långsammaste hårdvaran får den sämsta versionen av din webbplats.

Överdimensionerade sidor är vanligtvis inte utformade så medvetet. De växer fram gradvis: sidbyggare som kapslar in allt i lager av behållare, dolda varianter av samma innehåll för olika skärmstorlekar och långa listor som renderas i sin helhet trots att besökarna bara ser den första skärmen.

Så åtgärdar du problemet

Ta reda på vad som gör sidan större. Vanliga orsaker är teman för sidbyggare som skapar djupt nästlade omslutande element, megamenyer som bäddar in hela webbplatsens struktur på varje sida samt långa tabeller eller produktlistor som renderas i sin helhet.
Rendera långa listor stegvis: visa de första objekten och läs in fler när besökaren rullar eller bläddrar vidare, i stället för att lägga in tusentals rader på sidan samtidigt.
Undvik att duplicera innehåll för olika enheter. Använd för att formge en enda kopia i stället för att leverera separata dolda dator- och mobilversioner av samma innehåll.
Dela upp mycket långa sidor i flera mindre sidor när innehållet tillåter det.

Så testar Silktide detta

Läs in sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Räkna elementen som bygger upp den fullständigt inlästa sidan, inklusive allt som läggs till av .
Mät tre statistiska värden och identifiera elementet som orsakar varje värde: det totala antalet element, den djupaste nästlingen av element och det största antalet underordnade element under en och samma överordnade element.
Bedöm varje statistiskt värde. Ungefär 1 000 element totalt, en nästling på cirka 24 nivåer eller ett överordnat element med cirka 45 underordnade element börjar sänka bedömningen. Omkring 1 500 element, 32 nivåer eller 60 underordnade element bedöms som dåligt.

Felsökning

Sidan ser inte stor ut

Antalet element handlar om struktur, inte synligt innehåll. En visuellt enkel sida kan innehålla tusentals element om varje synligt objekt är inbäddat i många lager av behållare eller om innehåll för andra skärmstorlekar finns på sidan men är dolt. Elementen som rapporteras för varje statistiskt värde visar var huvuddelen faktiskt finns.

Det stora antalet element kommer från mitt tema eller min sidbyggare

Det är vanligt och vanligtvis inget som innehållsredaktörer kan åtgärda. Skicka resultatet till den som underhåller webbplatsens tema eller mallar. Att stänga av oanvända funktioner i sidbyggaren eller förenkla mallarna tar ofta bort hundratals element på en gång.