Jakie są najczęstsze przyczyny że strona działa wolno i jak je wyeliminować?

Twoja strona internetowa zbyt wolno działa? Martwią Cię spadające wskaźniki konwersji? Potoczne „zamulanie” strony internetowej może mieć różne przyczyny, ale wszystkie będą wpływać na doświadczenie użytkownika oraz jej pozycję w wynikach wyszukiwania. Roboty Google promują serwisy oferujące błyskawiczny dostęp do treści, a według danych Think with Google wzrost czasu ładowania strony z 1 do 3 sekund zwiększa prawdopodobieństwo odrzuceń niemal o jedną trzecią. Nawet Amazon przyznał kiedyś, że polepszenie czasu ładowania strony o 100 milisekund może zwiększyć sprzedaż o 1%, co pokazuje, jakie znaczenie ma optymalizacja dla dużych serwisów. W jaki sposób możesz sprawdzić działanie strony internetowej i jak skrócić czas ładowania witryny web? Zapraszamy po kilka wskazówek od specjalistów HitMe.

Optymalizacja zdjęć i plików graficznych – kompresja plików a szybkość ładowania strony

Od czego zacząć? Pierwszym podejrzanym są obrazy o wysokiej rozdzielczości i o dużym rozmiarze plików, które mogą znacząco spowolnić ładowanie strony. Ich kompresja jest sprawdzoną metodą na przyśpieszenie, gdyż ma bezpośrednie przełożenie na czas ładowania podstron, zawierających na przykład galerię zdjęć. Możesz zastosować narzędzia do kompresji, jak TinyPNG albo postawić na inne niż JPEG czy PNG formaty, na przykład WebP. Jest to format opracowany przez Google, który oferuje lepszą kompresję przy jednoczesnym zachowaniu wysokiej jakości obrazu. WebP może zmniejszyć rozmiar plików o 25-35% w porównaniu do standardowego JPEG.

Zanim jednak wybierzesz metodę i zaczniesz poprawianie wydajności, najpierw zbadaj swojego WordPressa właśnie pod tym kątem, używając stworzonych do tego celu narzędzi. Pomocne będą Google PageSpeed Insights, GT Metrix lub Plugin Performance Profiler P3, który pobierzesz za darmo z katalogu wtyczek WordPressa. Ta ostatnia analizuje też wpływ zainstalowanych wtyczek na wydajność całej witryny.

Jeśli używasz WordPress poniżej wersji <5.8 by umożliwić obsługę formatu WebP dodaj poniższy kod do pliku functions.php. Umożliwi on wgrywanie formatów WebP do Biblioteki Mediów.

//WebP upload
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//WebP podgląd
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Pamiętaj jednak że powyższy kod jedynie pozwoli wgrywać do WordPress pliki w formacie WebP. Te musisz uprzednio przygotować na swoim komputerze.

Lepszym sposobem jest skorzystanie z odpowiedniej wtyczki, która przekonwertuje obecne i przyszłe pliki graficzne na format WebP. Cały proces wraz z wynikami Google Page Speed możesz prześledzić w poniższym poradniku.

Przeczytaj także:

WordPress Google PageSpeed 100/100? Jak to zrobić?

Poradnik opisujący jak wdrożyć obsługę formatu WebP w WordPress i zyskać lepszą ocenę GPSI.

W przypadku stron zarządzanych przez systemy CMS zbyt duża liczba wtyczek lub źle zoptymalizowane skrypty mogą również wydłużać czas ładowania. To samo zresztą powodują zbyt złożone lub nieoptymalne pliki CSS i JavaScript. Minifikacja, usuwanie zbędnych spacji, niepotrzebnych komentarzy i innych elementów oraz scalenie plików w celu zmniejszenia liczby żądań HTTP to kolejne ulepszenia, które przyniosą zauważalne rezultaty.

Łączenie plików JS, CSS, a także kompresja HTML jest dostępna we wtyczce LiteSpeed Cache dla WordPress. Umożliwia ona zarządzanie pamięcią w taki sposób, by zoptymalizować buforowanie danych przez wydłużenie czasu przechowywania ich w pamięci podręcznej. Zmniejsza obciążenie serwera i potrafi skalować jego zasoby adekwatnie do ilości zapytań. IsCache pozwala serwować z pamięci podręcznej również treści prywatne, na przykład tylko dla zalogowanych użytkowników. Wybierając hosting z LiteSpeed możesz liczyć nawet na siedmiokrotnie przyspieszenie działania strony internetowej w porównaniu do popularnego serwera www Apache.

Korzyści z zastosowania lazy loading – co możesz zyskać?

Kolejną techniką optymalizacji jest lazy loading. Polega to na opóźnieniu ładowania niektórych elementów, jak obrazy czy filmy. Do momentu, gdy są one rzeczywiście potrzebne użytkownikowi. Lazy loading zmniejsza obciążenie serwera. Nie wszystkie zasoby są pobierane natychmiastowo, więc dzięki temu serwer może wydajniej obsłużyć użytkowników bez objawów zadyszki. Zamiast wgrywać wszystkie elementy strony od razu po jej otwarciu, ładują się tylko te zasoby, które są widoczne w oknie przeglądarki. Pozostałe pojawiają się dopiero w momencie przewinięcia do odpowiedniej sekcji strony.

Przeczytaj także:

Jak jeszcze bardziej przyspieszyć WordPress?

Poradnik opisujący jak wdrożyć technikę lazyload i przyspieszyć stronę na WordPress.

Lazy loading jest powszechnie stosowany w sklepach e-commerce, ale również przez blogi zawierające duże ilości obrazów i klipów wideo. Na przykład strony o tematyce podróżniczej lub kulinarnej. To skraca czas renderowania strony, więc jest odczuwalne dla użytkowników. Zwłaszcza na urządzeniach mobilnych lub przy korzystaniu ze słabszych połączeń internetowych.

Wolna strona – to wina kodu czy TTFB serwera?

Optymalizacja TTFB (Time to First Byte) jest jednym z czynników wpływających na wydajność strony, jednak jego poprawa nie zawsze przekłada się na realne skrócenie czasu ładowania. Warto najpierw skupić się na optymalizacji innych elementów, które z reguły mają większy wpływ na doświadczenie użytkownika, takich jak:

• lazyloading,
• optymalizacja i zmniejszanie CSS,
• łączenie CSS/JS (tylko jeśli nie używasz HTTP/2),
• używaj nowych formatów plików graficznych (np. WebP),
• minimalizacja liczby zapytań HTTP,
• kompresja HTML,
• włączona kompresja plików (Gzip, Brotli),
• implementacja CDN (Content Delivery Network),
• optymalizacja renderowania strony,
• eliminacja zasobów blokujących renderowanie,
• caching na poziomie przeglądarki,
• aktywacja http/2

Dopiero po optymalizacji tych aspektów warto dokładnie przyjrzeć się TTFB.

Przeczytaj także:

TTFB (Time To First Byte) – jak podejść do optymalizacji.

Czym tak naprawdę jest parametr TTFB i jak podejść do tematu zmniejszenia jego wartości. Zacznij od optymalizacji strony internetowej.

Jeśli hosting strony ma ograniczoną przepustowość lub słaby serwer, Twoja strona może działać wolno, szczególnie podczas większego ruchu. HitMe oferuje hosting przygotowany specjalnie pod platformę WordPress, który zapewni również SuperCache, darmowe certyfikaty SSL oraz ochronę AntyDDos. Pamiętaj też, że strona, która nie jest dostosowana do urządzeń mobilnych, może działać wolniej na smartfonach i tabletach.

Responsywność strony internetowej i jej działanie z perspektywy UX

Responsywność witryn internetowych to fundamentalna sprawa, zwłaszcza w świecie zdominowanym przez przenośne urządzenia. Co musisz o tym wiedzieć? Lepsze pozycje w wynikach wyszukiwania oraz dostosowanie do wyświetlania na różnych urządzeniach to główne korzyści, które przynosi projektowanie responsywne.

Dzięki RWD zyskujesz również brak tzw. podwójnego contentu. Jeżeli Twoja witryna ma dwa warianty, to wówczas może być gorzej oceniana przez algorytmy wyszukiwarek. Będzie to objawiać się słabszym pozycjonowaniem. Czytelna nawigacja, intuicyjny design i ogólna przejrzystość Twojej strony znacząco zwiększą wskaźnik konwersji. Przecież to liczba użytkowników podejmujących określone działania, a to przecież najważniejsze, prawda?