Jak przyśpieszyć stronę internetową w 5 prostych krokach?

Szybkość ładowania strony ma jest niezwykle ważna. Żyjemy w ciągłych pośpiechu i każdy oczekuje szybkich wyników. Użytkownik nie powinien długo czekać na wczytanie witryny, ponieważ szybko może zrezygnować. Jeżeli Twoja strona ładuje się dłużej niż 3-4 sekundy, to średnio 40% użytkowników zrezygnuje z jej odwiedzenia. W przypadku prowadzenia biznesu wydajność strony WWW jest priorytetowa. Zbyt długo wczytująca się witryna przyniesie spadek sprzedaży produktów oraz może przyczynić się do upadku firmy. Należy zatem odpowiednio zoptymalizować stronę i dostosować do wymagań wyszukiwarki Google.

Jak sprawdzić speed page?

W tym celu możemy użyć oferowanego przez Google narzędzia PageSpeed Insights.

Narzędzie pozwala w łatwy i szybki sposób przeanalizować każdą stronę, zarówno na komputerach, jak i smartfonach. Wystarczy wprowadzić w polu adres URL i kliknąć przycisk „analizuj”. Otrzymamy zwrotne informacje w postaci raportu zawierającego elementy niekorzystnie wpływające na wydajność naszej strony.

Od 2021 roku na ranking w wynikach wyszukiwania będzie miał znaczenie Core Web Vitals. Są to czynniki wyższej wadze, skoncentrowane na wydajności i zadowoleniu użytkowników. Inne czynniki aktualnie są mniej ważne.

• Largest Contentful Paint (LCP) - mierzy czas renderowania obrazu lub bloku tekstu. Właściciele witryn powinni dążyć do tego, aby LCP ładowała w ciągu 2,5 sekundy.
• Cumulative Layout Shift (CLS) - określa czas przesunięcia wizualne elementów podczas ładowania strony. Wynik CLS powinien być mniejszy niż 0,1.

Jak przyśpieszyć stronę internetową w kilku krokach?

1. Optymalizacja obrazów

To zwykle jedna z najważniejszych rzeczy. Zmiana rozdzielczości zdjęć na mniejszą sprawia, że grafika jest lekka i strona szybciej wczyta się. Nie ma potrzeby dodawania obrazów o rozdzielczości większej niż 1920×1080 (FullHD). Można nawet pokusić się o zmniejszenie do 1600 pikseli szerokości. Rozmiar grafiki i jej format również ma znaczenie. Zapisanie pliku w popularnym formacie .jpg. pozwala uzyskać dobrej jakości obraz i niewielki rozmiar. Grafiki najlepiej powinny mieć poniżej 100 KB rozmiaru.

Kompresję zdjęć możemy uzyskać także dzięki narzędziu compressjpeg.com. Po dodaniu obrazu za pomocą suwaka możemy dostosować jakość oraz rozmiar pliku.

2. Wideo

Filmy umieszczone na stronie hostowane na tym samym serwerze mogą znacznie opóźnić wyświetlanie witryny lub spowodować przerwy w odtwarzaniu. W szczególności, gdy hosting ma ograniczoną przepustowość. Co należy zrobić? Najlepszym rozwiązaniem jest umieszczenie wideo na zewnętrznej platformie np. YouTube. Serwery są rozmieszczone na całym świecie. YouTube sam zajmie się dostosowaniem jakości filmu do łącza internetowego użytkownika. Udostępnienie filmu za pomocą tego serwisu pozytywnie wpłynie na wyświetlanie strony. Dodatkowo zaoszczędzi miejsce na Twoim hostingu oraz skróci czas ładowania witryny oraz wideo.

3. Optymalizacja kodu HTML, CSS i JavaScript

Przeglądarki lubią czysty, zrozumiały kod, w którym nie ma błędów. To pozwala również szybciej ładować stronę. Optymalizacja kodu dotyczy usunięcie niepotrzebnych linii kodu, komentarzy, białych znaków, które są nie potrzebne. Należy jednak zrobić to umiejętnie, aby kod nie stracił na poprawności semantycznej. Istnieją również także narzędzia usuwające bałagan w kodzie, zachowując przy tym pełną funkcjonalność kodu. Zminimalizowany kod jest lżejszy w wyniku czego strona załaduje się szybciej.

W przypadku WordPressa można skorzystać z wtyczki WP Fastest Cache.

4. Lazy loading

Zastanawiasz się czym jest? To zabieg, który wczytuje obrazy na stronie, wtedy gdy są one potrzebne. Gdy przewijając stronę, natrafimy na grafikę to właśnie w tym momencie zostanie załadowana. Cały mechanizm sprawi, że strona od samego początku będzie się wczytywać szybciej.

Funkcja jest dostępna w WordPressie za pomocą wtyczki A3 Lazy Load. Jeśli posiadasz stronę napisaną w HTML, możesz dodać opóźnienie ładowania grafik do znacznika img atrybut loading = ”lazy”.

5. Zmiana wersji PHP

Czy zmieniać wersję, skoro wszystko działa? Naszym zdaniem tak. Warto przeanalizować każdą wersję dla swojej strony. Najnowsze wersje 7.x są wydajniejsze niż 5.x. Dodanie funkcji preload w PHP 7.4 spowodowało szybsze ładowanie żądanych skryptów, które są kompilowane i przechowywane w pamięci podręcznej. Dla porównania podobna opcja była dostępna w wersji 5.5 i nazwa się opcode cache (np. Zend Opcache). Tutaj pliki są kompilowane raz i przechowywane we współdzielonej pamięci. Za każdym razem jest sprawdzana spójność w pamięci kodu. Przyglądając się działaniu obu rozszerzeń, preload zwiększa szybkość wczytywania plików. Wzrost wydajności programów opartych na wersji 7.4 może wynosić kilkadziesiąt procent. W szczególności należy zadbać o dobrze zaprojektowaną stronę pod względem optymalizacji kodu oraz ilości fragmentów.

Bardzo łatwo można porównać szybkość strony dzięki narzędziu tools.pingdom.com. W okienku wpisujemy adres witryny, a następnie wyświetla się wynik testu. W naszym porównaniu poddaliśmy bloga opartego na WordPressie na hostingu cal.pl. Warto dodać, iż mamy do czynienia z naprawdę szybkim hostingiem od cal.pl wyposażonym w dyski SSD oraz serwer Litespeed. Wzięliśmy pod uwagę wersje PHP od 5.6 do najnowszej 7.4. Różnica między nimi wynosi 0.258 ms.

Jak wykazuje wykres z każdą wersją spada czas oczekiwania na witrynę. Test wykonywaliśmy kilkakrotnie i została wyciągnięta średnia z wyników. Analiza potwierdza naszą tezę. Włączając najnowszą wersję PHP Ty i Twoi klienci mogą zyskać cenny czas.

Mamy nadzieję, że dzięki kilku prostym krokom Twoja strona będzie szybsza. Wydajność jest bardzo ważna w przypadku serwisu obsługującego duży ruch. Stosując się do powyższych rad, zauważysz spadek czasu ładowania strony oraz poprawisz wynik wyświetlania Twojej strony w Google.