Podczas pracy z systemami zarządzania treścią sporym problemem może okazać się optymalizacja wydajności strony – szczególnie jeśli chcemy osiągnąć wynik powyżej 90 na 100 punktów w teście narzędziem Lighthouse od Google.

Niedawno pisaliśmy dlaczego szybkość stron www ma znaczenie. Tym razem, bez wnikania w szczegóły techniczne, przedstawimy kilka metod, z których korzystamy, by tworzone przez nas strony osiągnęły wynik 100/100. Lub przynajmniej 99/100. 😉

1. Tworzymy własne szablony

Dzięki pisaniu szablonu strony internetowej od podstaw mamy pewność, że znajdzie się w nim w nim jedynie faktycznie używany kod (html, css, js i php). Dzięki temu na stronie nie są ładowane setki czy tysiące linii kodu, który nigdy nie zostanie wykorzystany.

2. Używamy minimum wtyczek

Używamy najmniejszej liczby wtyczek, jak to możliwe, co również ogranicza liczbę ładowanych linii kodu. Ponadto niektóre wtyczki mogą negatywnie wpłynąć na bezpieczeństwo strony internetowej.

Na większości stron www, zwłaszcza tych bazujących na płatnych szablonach, domyślnie zainstalowano wiele wtyczek, a część z nich nie jest nawet używana.

3. Usuwamy nieużywany kod

Mowa tutaj głównie o stylach CSS (np. emoji) i o jQuery, który w dużej liczbie przypadków nie jest wykorzystywany na stronach www lub jest wykorzystywany w minimalnym stopniu i można go bez problemu zastąpić kilkoma liniami kodu JS. W celu usunięcia nieużywanego kodu dodajemy filtry w pliku functions.php. Oto przykładowy kod, który można dostosować do swoich potrzeb:

add_filter( 'wp_enqueue_scripts', 'remove_code', PHP_INT_MAX );

function remove_code() {
    wp_dequeue_script('jquery');
    wp_deregister_script('jquery');
    wp_dequeue_style('wp-block-library');
    // remove plugin styles
    wp_dequeue_style( 'contact-form-7' );
}

add_action('init', function() {
    remove_action('rest_api_init', 'wp_oembed_register_route');
    remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('admin_print_styles', 'print_emoji_styles');
}, PHP_INT_MAX - 1 );

4. Optymalizujemy kod CSS, HTML i JS

Pozostaje nam jeszcze kod, którego używamy i którego usunąć nie możemy. Możemy go jednak zminifikować, czyli usunąć z niego wszystkie niepotrzebne znaki, by zajmował mniej miejsca i tym samym szybciej ładował się na stronie www. Robimy to przed umieszczeniem kodu na serwerze, więc nie ma potrzeby instalowania w WordPressie dodatkowych wtyczek, które za to odpowiadają.

5. Nie blokujemy renderowania strony

Zoptymalizowany kod CSS i JS szybciej się wczytuje, ale nadal opóźnia ładowanie strony www. W pełni załaduje się ona dopiero po wczytaniu takiego kodu. W tym wypadku możemy zrobić coś więcej: wczytywać kod JS asynchronicznie (async) lub z opóźnieniem (defer) dopiero po załadowaniu strony, a kod CSS podzielić na dwie części. Pierwszą część, niezbędną do poprawnego wyświetlania górnej części strony, widocznej od razu po jej wyświetleniu, umieszczamy w pliku html, a resztę wczytujemy z oddzielnego pliku dopiero po załadowaniu strony.

5. Optymalizujemy ładowanie czcionek

Podobną technikę jak z ładowaniem kodu CSS stosujemy do ładowania czcionek. Ponadto używamy tutaj opcji swap, by domyślnie od razu na stronie www była dostępna jedna ze standardowych czcionek systemowych, podmieniana na docelową gdy ta będzie już załadowana. W przeciwnym razie przez ułamek sekundy tekst na stronie może nie być widoczny.

6. Optymalizujemy grafikę

Wszystkie grafiki na stronie www, które nie są zdjęciami, to znaczy logo, ikony czy ilustracje, powinny być zapisane w formacie SVG (najprostsze z nich możemy stworzyć także za pomocą kodu CSS). Dzięki temu zajmują mniej miejsca, więc szybciej się ładują, a przy okazji są skalowalne, czyli będą dobrze wyglądać na każdym ekranie, niezależnie od ich rozmiaru. Natomiast wszystkie zdjęcia powinny zostać zapisane w formacie WebP oraz w kilku wymiarach (rozdzielczościach), tak by np. na małym ekranie telefonu (do tego często z ograniczoną liczbą transferu internetu) nie wyświetlać dużych zdjęć, które i tak zostaną przeskalowane w dół.
Na koniec możemy jeszcze opóźnić wczytywanie się grafiki znajdującej się w dolnej, początkowo niewidocznej części strony www – jest to tzw. lazy loading.
Więcej na temat formatów grafiki na stronach www można przeczytać tutaj: pliki graficzne na stronie www.

7. Wybieramy odpowiedni hosting

Na koniec: dobrze korzystać z szybkiego hostingu, najlepiej z dyskiem SSD, obsługą Redis i HTTP/3. To także przełoży się na zwiększenie wydajności strony www.