Nadmierny rozmiar DOM
Silktide mierzy, z ilu elementów składa się Twoja strona i jak głęboko są one zagnieżdżone. Strony zbudowane ze zbyt wielu elementów ładują się wolniej, wolniej reagują i zużywają więcej pamięci na urządzeniach odwiedzających.
Każdy nagłówek, akapit, obraz i kontener na stronie jest elementem wewnętrznego modelu strony w przeglądarce, czyli . Przeglądarki bez problemu obsługują kilkaset elementów; strony z tysiącami elementów wyraźnie spowalniają każde obliczenie stylów, przebieg układu i aktualizację skryptu.
Dlaczego to jest ważne
Odwiedzający odczuwają zbyt dużą stronę jako powolną: strona pojawia się później, przewijanie się zacina, a interakcje, takie jak otwieranie menu, wyraźnie się opóźniają. Efekt jest najgorszy na urządzeniach o najmniejszej dostępnej mocy — niedrogich telefonach i starszych komputerach — więc odwiedzający ze słabszym sprzętem otrzymują najgorszą wersję Twojej witryny.
Zbyt duże strony zwykle nie są celowo tak projektowane. Narastają z czasem: kreatory stron, które otaczają wszystko warstwami kontenerów, ukryte warianty tej samej treści dla różnych rozmiarów ekranu oraz długie listy renderowane w całości, mimo że odwiedzający widzą tylko pierwszy ekran.
Jak to naprawić
- Znajdź, co powiększa stronę. Częstymi przyczynami są motywy kreatorów stron generujące głęboko zagnieżdżone otoczki, rozbudowane menu osadzające całą strukturę witryny na każdej stronie oraz długie tabele lub listy produktów renderowane w całości.
- Renderuj długie listy stopniowo: pokaż pierwsze elementy i wczytuj kolejne, gdy odwiedzający przewija stronę lub przechodzi między stronami, zamiast umieszczać od razu tysiące wierszy na stronie.
- Unikaj duplikowania treści dla różnych urządzeń. Ostyluj jedną kopię za pomocą , zamiast dostarczać osobne, ukryte wersje komputerowe i mobilne tej samej treści.
- Jeśli treść na to pozwala, podziel bardzo długie strony na kilka mniejszych.
Jak Silktide przeprowadza tę kontrolę
- Wczytaj stronę w prawdziwej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
- Policz elementy składające się na w pełni wczytaną stronę, w tym wszystkie dodane przez .
- Zmierz trzy statystyki i zidentyfikuj element odpowiedzialny za każdą z nich: łączną liczbę elementów, najgłębsze zagnieżdżenie elementów oraz największą liczbę elementów podrzędnych pod jednym elementem nadrzędnym.
- Oceń każdą statystykę. Wynik zaczyna się obniżać przy około 1 000 elementów łącznie, zagnieżdżeniu na około 24 poziomach głębokości lub jednym elemencie nadrzędnym z około 45 elementami podrzędnymi; około 1 500 elementów, 32 poziomy lub 60 elementów podrzędnych otrzymuje słabą ocenę.
Rozwiązywanie problemów
Strona nie wygląda na dużą
Liczba elementów dotyczy struktury, a nie widocznej treści. Wizualnie prosta strona może zawierać tysiące elementów, jeśli każdy widoczny element jest otoczony wieloma warstwami kontenerów lub jeśli treść dla innych rozmiarów ekranu jest obecna, ale ukryta. Elementy zgłoszone dla każdej statystyki pokazują, gdzie faktycznie znajduje się większość z nich.
Duża liczba elementów pochodzi z mojego motywu lub kreatora stron
To częste i zazwyczaj nie jest czymś, co mogą naprawić redaktorzy treści. Przekaż to osobie odpowiedzialnej za utrzymanie motywu lub szablonów witryny; wyłączenie nieużywanych funkcji kreatora stron lub uproszczenie szablonów często usuwa jednocześnie setki elementów.