Strona główna SEO Co spowalnia Twoją stronę? Analiza ładowania zawartości

Co spowalnia Twoją stronę? Analiza ładowania zawartości

 Przeczytasz w: 4 min.
0
0
Żółw

Szybkie ładowanie strony internetowej to przede wszystkim duża zaleta dla jej użytkownika. Strony ładujące się dłużej niż zaledwie 3 sekundy tracą na wartości.

Podstawowym narzędziem analitycznym i dla stron internetowych są dwa przedstawione poniżej:

  • Google PageSpeed Insights
  • GTmetrix

Kilkunastosekundowa analiza w PageSpeed Insights zwraca nam dwie podstawowe wartości: ocenę punktową dla urządzeń mobilnych oraz ocenę prędkości dla urządzeń desktopowych (laptop/PC).

Google-PageSpeedInsights

W przypadku większości stron internetowych, rezultat w skali od 0 do 100 będzie się różnił dla stron „na komórki” oraz „na komputery” z korzyścią dla desktopów.

Do najczęściej powtarzanych „wskazówek optymalizacji” w PSI, należy między innymi eliminowanie niepotrzebnych kodów JS oraz CSS. Powtarzalną wskazówką jest również lepsze wykorzystanie pamięci podręcznej przeglądarki. Niestety wykorzystywanie zewnętrznych narzędzi, które zawierają swoje skrypty zawarte w kodzie naszej strony, wpływa negatywnie na maksymalny rezultat, widać to w tym przykładzie:

Pamięć-podręczna-przeglądarki-PSI

Część z ww. skryptów może negatywnie wpływać na czas ładowania strony. Możemy to sprawdzić wykorzystując narzędzia dla deweloperów w przeglądarce Chrome (Ctrl + Shift + I).

Przechodzimy do zakładki „Network”, następnie klikamy PPM na którejkolwiek z zakładek i wybieramy opcję „Domain”. Świetnie, teraz możemy zobaczyć ile elementów spośród wszystkich to nasza domena, a ile z nich pochodzi z zewnątrz. Spójrzmy na wtyczkę Facebooka, z której korzystam na swojej stronie:

Chrove-dev-tools-facebook

Rozmiar plików ustawiłem od największego do najmniejszego, co od razu daje mi jasny wniosek – wtyczka zajmuje aż 6 razy więcej niż drugi w kolejności plik hostowany już przez mój serwer. Spójrzmy teraz na czas ładowania:

Ładowanie-Facebooka

Tym razem przesortowałem listę tak, aby wskazywała elementy ładujące się najdłużej na początku. Znów na pierwszym miejscu jest Facebook – czas ładowania to ponad 1 sekunda. Sam czas oczekiwania na pobranie zawartości stanowi mniej niż 40% całkowitego czasu pobierania, co nie jest akurat parametrem krytycznym, jednakże sam fakt przygniecenia swą szerokością w waterfallu wtyczką wszystkich innych elementów strony, jest jasny.

Możemy również przyjrzeć się temu zdjęciu:

pobieranie-Facebooka

Facebook to aż 44% całego transferu pobrania strony. Niestety wtyczki nie da się scache’ować co wpływa na prędkość pobierania całej zawartości do przeglądarki osoby po drugiej stronie ekranu.

Oczywistym jest, że plik, który hostujemy u swojego usługodawcy ładuje się znacznie szybciej, np. CSS:

zasysanie-CSS

Główny plik CSS ładuje się zaledwie 1/4 sekundy. Wszelkie efekty wizualne wprowadzone w CSSie są zatem niemal niezauważalne dla oka. Pamiętajmy jednak, że im więcej plików CSS ładuje jednocześnie, tym dłużej pobierać będzie się strona, a zdarza się również, że początkowy CSS najpierw ładuje tzw. „fallback” czyli domyślne ustawienia dla przeglądarki, a dopiero potem nasz customizowany wygląd, co jest po proste słabe.

W przypadku mojej strony, do wolno ładujących się elementów należą również skrypty Twittera – domyślnie wgrane do motywu. Jak widać na sympatycznym waterfallu GTmetrix, ostatni plik Twittera ładowany jest jako jeden z ostatnich:

waterfall-GTmetrix

Większość stron posiada skrypt monitorujących ruch na stronie od Google Analytics. Nie należy jednak obawiać się, że negatywnie wpływać będzie na szybkość ładowania się strony, gdyż zabiera mu to zaledwie ~20ms.

ładowanie-analytics

Elementem, który negatywnie wpływa na czas ładowania strony są fonty zasysane ze źródeł zewnętrznych, z takiego rozwiązania często korzystają bogato rozbudowane motywy:

ładowanie-fontów

W przypadku powyższej listy fonty w plikach .woff2 zajmują około 250KB co daje nam 10% całej zawartości.

Elementem, który bardzo mocno dociąża czas ładowania strony, są fotografie. Im więcej ich mamy przed sobą, tym dłużej poczekać musimy na pełne zassanie contentu z serwera. Warto je optymalizować pamiętając o tym, aby zachować kompromis waga/jakość.

Należy wiedzieć, że zdjęcia ładują się według kolejności w kodzie źródłowym strony, zatem jeżeli koniecznie chcemy zamieścić na statycznej stronie zdjęcia o większej wadze (tym samym zapewne również lepszej jakości), zróbmy to w polu below the fold, czyli w obszarze, który widać dopiero po scrollowaniu.

kolejność-ładowania-zasobów-HTML

Podsumowując:

Aby zredukować czas ładowania strony możemy:

  • ograniczyć liczbę skryptów zewnętrznych do minimum, uprzednio każdy z nich testując w Developer Tools oraz GTmetrix
  • wgrać czcionki na własny serwer, zamiast wysyłać żądanie ich ściągnięcia
  • ograniczyć wagę zdjęć
  • zmniejszyć liczbę plików JS oraz liczbę linijek kodu
  • zredukować liczbę plików CSS do minimum

Do standardowych praktyk, należy również wliczyć wybranie szybkiego dostawcy usług czy zwyczajne ograniczenie contentu na danym adresie URL. Jeżeli już chcemy zrobić prawdziwą encyklopedię, to powinniśmy skorzystać z analizy Wikipedii, która dzięki minimalistycznej szacie graficznej, świetnej optymalizacji czy spójności w fontach, stylach etc., jest jednym z liderów w tempie ładowania.

Analiza-porównawcza-w-GTmetrix
Powyższa analiza dokumentuje podstawowe wielkości związane z ładowaniem www. Zestawiłem stronę własnego bloga, główną stronę Wikipedii oraz polską stronę główną.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Załaduj więcej z działu SEO

Polecam

25 rozwiązań, które warto implementować w e-commerce

Sklepy internetowe to bardzo bogate źródło wszelakiej informacji na temat produktów. Ich m…