Optymalizacja kodu strony internetowej – na czym polega?

Optymalizacja kodu strony polega na uporządkowaniu i usprawnianiu całej warstwy technicznej witryny tak, aby działała szybciej, stabilniej, ale też była lepiej przygotowana na dalszy rozwój. Powinna obejmować nie tylko „czyszczenie” kodu HTML, ale również usprawnienia w stylach CSS, skryptach JavaScript, sposobie ładowania multimediów oraz konfiguracji serwera.

Dlaczego jest to takie ważne?

1. Szybsze ładowanie strony = lepsze doświadczenia użytkownika. Każda dodatkowa sekunda opóźnienia oznacza spadek współczynnika konwersji i to nawet o 20%, co pokazało badanie przeprowadzone przez Google i SOASTA. W tym samym raporcie przykuwa zresztą uwagę jeszcze jedna liczba – prawdopodobieństwo, że użytkownik opuści stronę (bounce rate) wzrasta o 32%, gdy czas ładowania wydłuża się z 1 sekundy do… „zaledwie” 3 sekund. A biorąc pod uwagę tendencje w zachowaniach użytkowników i fakt, że badanie pochodzi z 2017 roku, dziś te liczby byłyby zapewne jeszcze wyższe.
2. Algorytmy Google biorą pod uwagę wydajność strony przy ocenie jej jakości w ramach Core Web Vitals. Szybkość ładowania jest de facto jednym z najważniejszych czynników rankingowych, więc lepiej zoptymalizowany kod to większe szanse na wysokie pozycje w wynikach wyszukiwania.
3. Do tego dochodzi jeszcze kwestia… kosztów. Dobrze zoptymalizowane strony stanowią mniejsze obciążenie dla serwera, zużywają mniej zasobów i o wiele łatwiej będzie je w przyszłości skalować.

W skrócie, im szybciej zadbasz o optymalizację kodu strony WWW, tym mniej problemów Ci grozi.

Język HTML jest odpowiedzialny za tworzenie struktury strony internetowej. Umożliwia publikowanie tekstów, zdjęć, linków, grafik, tabel, nagłówków, plików audio i wideo. Optymalizacja kodu strony to przede wszystkim optymalizacja właśnie kodu HTML – bo to dzięki niemu również roboty indeksujące Google są w stanie zinterpretować treści zawarte na stronie.

Optymalizacja kodu strony obejmuje również CSS, który jest językiem odpowiedzialnym za prezentację witryny w wyszukiwarce. CSS umożliwia adaptację strony do różnego typu urządzeń i wyszukiwarek. Ustala wygląd strony oraz rozmieszczenie elementów. Layout, fonty, kolorystyka – za to wszystko odpowiada właśnie CSS.

Co można tu zrobić dla optymalizacji kodu?

• Minifikacja i łączenie plików – podobnie jak w przypadku kodu HTML, style CSS również warto „czyścić” ze zbędnych znaków. Dodatkowo dobrze też jest połączyć wszystkie pliki CSS w jeden. Jeśli strona korzysta z kilku osobnych plików CSS (np. dla frameworka, resetów, komponentów), przeglądarka musi dla każdego wygenerować osobne żądanie HTTP do serwera;
• unikanie inline styles – reguły CSS teoretycznie można umieszczać bezpośrednio w atrybutach HTML (np. <div style="color: red;">). Problem w tym, że przeglądarka nie może zapisać takiego stylu do cache, więc musi go przetwarzać za każdym razem od nowa. Do tego inline styles mogą łatwo powodować konflikty z innymi regułami. Dlatego lepiej jest umieścić większość kodu CSS w oddzielnym pliku;
• stosowanie critical CSS – wyjątkiem, który warto pozostawić w pliku HTML, będą te reguły, które są absolutnie niezbędne do wyświetlenia pierwszego widocznego ekranu strony (above the fold) – np. nagłówka, menu, sekcji hero. Dzięki takiemu rozwiązaniu przeglądarka może błyskawicznie wyrenderować pierwszy ekran, a resztę – gdy już pobierze główny arkusz z pozostałymi regułami CSS.

JavaScript odpowiada za wszystko, co interaktywne – formularze, animacje, rozwijane menu albo sklepowe wyszukiwarki. Problem w tym, że im więcej skryptów JS, tym większe ryzyko, że zaczną spowalniać stronę. Inna sprawa, że znaczna część kodu – według analizy milionów stron mobilnych przeprowadzonej przez HTTP Archive, aż 35%! – z reguły w ogóle nie jest wykorzystywana. A i tak przeglądarka musi ją pobrać i przetworzyć.

Jak można to rozwiązać?

• Minifikacja skryptów JS – podobnie jak w przypadku HTMLa i CSS. Kod JavaScipt można bez problemu „wyczyścić” przy pomocy darmowych narzędzi dla developerów (np. Terser albo UglifyJS)
• odroczone (defer) i asynchroniczne (async) ładowanie – domyślnie każda przeglądarka wstrzymuje renderowanie strony do momentu, aż pobierze i wykona wszystkie napotkane skrypty JavaScript, co w oczywisty sposób opóźnia ładowanie treści. Na szczęście można temu zapobiec, dodając do tagu <script> jeden z dwóch atrybutów:
  • defer – opóźnia wykonanie skryptu do momentu, aż cały HTML zostanie wczytany, ale zachowuje kolejność wykonywania skryptów,
  • async – ładuje i wykonuje skrypt natychmiast po pobraniu, niezależnie od kolejności i od stanu parsowania HTML.
• ograniczanie skryptów „z zewnątrz” – mowa o reklamach, skryptach chatów albo Meta Pixel; nawet jeśli będą ładowane asynchronicznie, wciąż jest to dodatkowe obciążenie dla przeglądarki. Dlatego lepiej jest je ograniczyć do niezbędnego minimum.

Na wielu witrynach to właśnie grafiki są głównym „winnym” wydłużających się czasów ładowania. Nic dziwnego, skoro mogą odpowiadać nawet za połowę całkowitej wagi strony. Dlatego ich optymalizacja to jeden z najszybszych sposobów na poprawę wydajności.

Pierwszym krokiem powinna być kompresja obrazów, czyli zmniejszenie ich rozmiaru bez znaczącego pogorszenia jakości. Można ją przeprowadzić w dwóch wariantach:

• bezstratnym (lossless), który usuwa zbędne metadane i optymalizuje kodowanie, zachowując oryginalny wygląd grafiki;
• stratnym (lossy), który pozwala uzyskać znacznie mniejsze pliki kosztem nieznacznej utraty jakości – co powinno być niezauważalne dla użytkownika.

Obie metody kompresji da się zautomatyzować przy pomocy narzędzi typu TinyPNG i Squoosh czy CMSowych wtyczek.

Kolejna kwestia to format, w jakim grafiki trafiają na przeglądarkę. Zamiast tradycyjnych JPEG/PNG, które potrafią ważyć sporo, lepiej stosować nowsze formaty. Na przykład WebP, który świetnie radzi sobie z kompresją obrazów (stratną i bezstratną), przy plikach nawet o 30% mniejszych niż tradycyjne JPEGi.

Na koniec lazy loading. Czyli technika, która sprawia, że grafiki ładowane są dopiero wtedy, gdy użytkownik przewinie stronę do tego miejsca, w którym dany obraz się znajduje. Lazy loading znacznie przyspiesza ładowanie pierwszego widoku above the fold, a do tego pomaga ograniczyć zużycie transferu (ważne na urządzeniach mobilnych).

Żeby to zrobić, wystarczy tylko dodać atrybut loading="lazy" do tagu <img> przy grafice w pliku HTML, tak jak niżej:

<img src="produkt.jpg" alt="Opis produktu" loading="lazy">

Oczywiście, nawet najlepiej napisany front-end dalej nie będzie zbyt wydajny, jeśli nie zadbasz też o optymalizację po stronie serwera. Technik jest sporo, my wybraliśmy dwie – stosunkowo proste.

Jedną z nich jest kompresja plików HTML, CSS oraz JavaScript metodą Gzip lub Brotli. Z tak „spakowanymi” plikami radzą sobie wszystkie przeglądarki. Działają one tak samo, jak nieskompresowane – ale są lżejsze o 70-80%. Apache, Nginx i LiteSpeed (oraz większość CDNów) pozwalają łatwo włączyć oba algorytmy do kompresji plików przez odpowiednią konfigurację nagłówków lub, po prostu, w panelu zarządzania.

Druga technika, a w zasadzie wskazówka – korzystaj z pamięci podręcznej (cache) przeglądarki. Jeśli dany zasób – np. logo, arkusz stylów czy czcionka – nie zmienia się między wizytami, nie ma potrzeby, by przeglądarka pobierała go za każdym razem od nowa. Browser cache można włączyć ustawiając nagłówki HTTP Cache-Control w plikach konfiguracyjnych serwera.

Po zakończeniu prac technicznych konieczne jest jeszcze wdrożenie działań, które utrwalą efekty optymalizacji i pomogą jak najlepiej je wykorzystać.