Jak samodzielnie zwiększyć szybkość ładowania strony? [PORADNIK]

SEO i pozycjonowanie stron od dłuższego czasu jest silnie powiązane z UX, czyli użytecznością strony dla odwiedzających, potencjalnych klientów i klientów. Optymalna szybkość ładowania strony internetowej jest jednym z podstawowych i elementarnych udogodnień dla użytkowników. Przyspieszając własną witrynę możesz uzyskać cenny bonus od wyszukiwarki Google w postaci lepszej widoczności strony w organicznych wynikach wyszukiwania. Szybka strona jest równie ważna podczas robienia płatnych kampanii reklamowych. Budując kampanie SEO / SEM walczymy o większą sprzedaż i wyższe pozycje słów kluczowych. Jednak najlepsze słowa kluczowe i pierwsze pozycje w Google nie pomogą zdobyć klienta z Internetu, jeżeli Twoja strona będzie się ładować w nieskończoność. W dzisiejszym poradniku przekonasz się, jak prostymi środkami poprawić wydajność strony dla potencjalnych klientów. Nagrałem kilka przydatnych wideo poradników, dzięki którym samodzielnie przyspieszysz własną stronę.

Dlaczego warto zoptymalizować szybkość ładowania strony?

Szybkość ładowania strony jest ważna z punktu widzenia użytkownika i wyszukiwarki Google. W efekcie następuje silne powiązanie między UX a SEO, które będzie decydowało o sukcesie bądź porażce kampanii SEO / SEM.

Użytkownik

Jeżeli chodzi o użytkownika, to sprawa jest prosta.

Szybko działający serwis jest gwarantem, że użytkownik:

• zrealizuje więcej zakupów i wykona więcej interakcji ze stroną, zatem wzrośnie współczynnik konwersji.
• wykona więcej interakcji ze stroną, zagłębi się wewnątrz serwisu (być może dokona zakupu).
• zapamięta nazwę strony, jeżeli prezentowane treści na stronie okażą się wyjątkowo cenne.
• wygeneruje inne pozytywne reakcje, np: udostępnienie strony w social media.

Wyszukiwarka Google

Według mojej opinii szybkość ładowania strony będzie jednym z istotnych czynników oddziałujących na pozycjonowanie stron w Google. Skoro linki tracą na znaczeniu w pozycjonowaniu, to na pewno inne sygnały mogą przybierać na sile. SEO jest powiązane z UX, a nad wszystkim czuwa algorytm sztucznej inteligencji.

W ostatnich tygodniach dowiedzieliśmy się, że wpływ na pozycjonowanie stron ma CTR (klikalność strony). Zatem jest to bardzo cenna informacja, która pozwala zrozumieć szybkość działania strony internetowej w znacznie szerszym kontekście niż tylko wytyczna Google dla webmasterów.

Otóż klikalność strony można w jakiś sposób manipulować, dlatego zachowanie użytkowników po wejściu na stronę może być kluczowe w ocenie strony przez algorytm Google.

Jeżeli strona:

• prezentuje ciekawą, oryginalną i dobrze zoptymalizowaną treść
• ładuje treści dla użytkownika w czasie 1-5 sekund
• zagłębia w sobie użytkowników, którzy odwiedzają kolejne podstrony serwisu
• wywołuje zainteresowanie odwiedzających, którzy przebywają średnio 3 minuty na stronie
• generuje udostępniania w social media
• powiększa ilość wizyt bezpośrednich

… to mogą być jasne sygnały dla Google, że strona jest wartościowa i pasuje do zapytania użytkownika.

Pozytywny obraz strony w oczach algorytmu Google może zostać wymazany przez powolne ładowanie strony dla użytkownika. Im dłużej będzie się ładować strona dla użytkownika, tym wyższy współczynnik odrzuceń i wyjść ze strony. W efekcie nawet wysoki CTR niewiele pomoże w pozycjonowaniu strony, gdy wynikiem końcowym będzie duży współczynnik odrzuceń.

Jak widzisz SEO, to znacznie szerszy proces niż optymalizacja treści czy meta tagów. Optymalizacja strony pod SEO to także optymalizacja szybkości ładowania strony internetowej.

Ranking 5 najlepszych narzędzi do testowania szybkości strony www

Znasz już korzyści płynące z funkcjonowania szybkiej strony, dlatego teraz chciałbym zaprezentować poradniki jak skutecznie przyspieszyć własną witrynę.

W pierwszej kolejności należy wykryć, co spowalnia czas ładowania strony? Jakie elementy, które pliki i wtyczki zwiększają rozmiar serwisu? Ile zapytań do serwera generuje Twoja strona podczas wczytywania dowolnego adresu URL w przeglądarce internetowej?

Poznaj narzędzia SEO do zmierzenia szybkości ładowania strony www:

• Google Page Speed.
• Test my site with Google.
• GTmetrics.
• Pingdom Tools.
• WebPageTest.

Zobacz wideo poradnik

Instrukcja obsługi narzędzi do sprawdzania szybkości ładowania stron internetowych oraz wskazówki dla webmasterów.

Szybka strona w WordPress krok po kroku – Poradnik

Zanim przejdziemy do procesu optymalizacji szybkości ładowania strony, to w pierwszej kolejności warto wykonać testy początkowe.

Test początkowy

Strona, gdzie zostanie zwiększona szybkość ładowania strony:

• https://punktmeblowy.pl – strona w technologii WordPress.

Pierwotna szybkość ładowania strony według narzędzia Google Page Speed:

• 59/100 na komórki – lampka czerwona.
• 59/100 na komputery – lampka czerwona.

Kopia bazy danych i kopia plików serwera

Zanim przejdziemy do praktycznych porad związanych z optymalizacją szybkości ładowania, to warto wykonać kopię zapasową strony. Pobierz bazę danych oraz wszystkie pliki serwera na dysk własnego komputera. Będziesz miał spokój podczas modyfikacji plików .htaccess czy nadpisywania grafik na serwerze.

Zobacz wideo poradnik

Jak zrobić kopię bazy danych i plików FTP w systemie WordPress?

Wybierz dobry, szybki i sprawdzony hosting

W internecie znajdziesz wiele prawdziwych i fałszywych opinii na temat firm hostingowych, dlatego znalezienie odpowiedniej firmy może być dla Ciebie loterią. Chciałbym się podzielić z Tobą moją strategią odnośnie doboru serwera w kontekście szybkiej strony. Być może już posiadasz własną stronę, ale czy Twoja strona działa szybko? Przyczyną spowolnienia strony może być słaby serwer.

Zobacz wideo poradnik

Dobry serwer kluczem szybkiego ładowania strony www.

Dla klientów, których obsługujemy w Projekt Marketing polecamy zazwyczaj 3 firmy hostingowe:

• Zenbox.pl
• Lh.pl
• Dhosting.pl

Ważna informacja: Kliknięcie w powyższe linki nic Cię nie kosztuje, ale mi pomoże rozwijać firmę. Jeżeli zdecydujesz się założyć konto hostingowe w jednym z powyższych linków, to zarobię na tym niewielką prowizję partnerską. Promuję serwery, które przetestowałem osobiście i okazały się dla mnie pomocne. Uważam, że serwery, które promuję mogą się też przydać Tobie. Podejmij racjonalną decyzję. Prosiłbym, abyś nie wybierał serwera do którego nie jesteś przekonany w 100%.

Hostingi są szybkie, stabilne i posiadają dobre wsparcie techniczne.

Strona PunktMeblowy.pl stoi na serwerze Zenbox i na podstawie tej firmy hostingowej zaprezentuję funkcje, jakie powinien posiadać dobry serwer w kontekście szybkiego ładowania strony. Jeżeli jesteś zielony, nietechniczny w sprawach związanych z obsługą migracji, pracownicy Zenbox całkowicie za darmo dokonają migracji strony z Twojego poprzedniego hostingu na serwer Zenbox.

Wystarczy, że opłacisz usługę hostingową i napiszesz maila z prośbą o dokonanie migracji: kontakt@zenbox.pl.

Za chwilę przekonasz się, dlaczego wybór odpowiedniej firmy hostingowej jest tak ważny w kontekście szybko działającej strony.

6 pytań do firmy hostingowej, które warto zadać przed dokonaniem migracji strony na nowy, szybszy serwer:

• Czy serwer działa na dyskach SSD?
• Czy hosting obsługuje kompresję GZIP?
• Czy serwer obsługuje PHP 7.0 lub wyżej?
• Czy hosting umożliwia obsługę darmowego certyfikatu SSL z Cloudflare?
• Czy serwer obsługuje technologię wydajnościową HTTP / 2?
• Czy hosting obsługuje .htaccess?

Na zakończenie warto dodać, że Cloudflare dodaje protokół HTTP / 2 (https://www.cloudflare.com/website-optimization/http2/) niezależnie od tego czy firma hostingowa obsługuje HTTP / 2.

Tanie serwery zazwyczaj nie obsługują Cloudflare oraz nie implementują technologii wydajnościowej HTTP / 2.

Kompresja GZIP

GZIP określany jako bezstratna kompresja danych, które są przesyłane na linii: serwer – komputer użytkownika odwiedzającego stronę www. Dobry serwer powinien obsługiwać kompresję GZIP, która pomniejsza pliki strony na hostingu przed przesłaniem ich do użytkownika. Skompresowane pliki strony www są dekompresowane na komputerze osoby odwiedzającej dany serwis.

Aktywowanie certyfikatu SSL może wydłużyć proces szyfrowania danych i spowolnić szybkość działania strony. Aktywacja kompresji pozwoli uniknąć tego rodzaju problemów.

Czy Twoja strona internetowa obsługuje GZIP? Sprawdź, wykonując bezpłatny test w narzędziu: https://checkgzipcompression.com

Zobacz wideo poradnik

Jak włączyć kompresję GZIP na serwerze? Test szybkości ładowania strony przed i po włączeniu kompresji.

Wiele tanich serwerów niestety nie obsługuje kompresji GZIP.

W przypadku serwera Zenbox, gdzie hostujemy PunktMeblowy.pl – kompresja GZIP jest automatycznie włączona, więc nic nie trzeba robić.

Na przykład serwer LH do aktywacji kompresji GZIP wymaga wklejenia poniższego kodu do pliku .htaccess.

Dla serwera Apache kod będzie następujący:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>

Unikaj tzw. „podwójnej kompresji”. Jeżeli serwer, gdzie hostujesz własną stronę automatycznie posiada włączoną kompresję GZIP, wówczas nic nie musisz robić.

Poprawne uruchomienie kompresji GZIP pozwala przyspieszyć ładowanie plików HTML, CSS, Javascript z których jest zbudowana strona internetowa.

Włączenie najwyższej wersji PHP na serwerze

Kolejny ważny czynnik, to wersja PHP obsługiwana przez dostawcę usług hostingowych. Im wyższa wersja PHP, tym serwer będzie szybszy, zapewni większe bezpieczeństwo oraz lepszą ochronę przez potencjalnymi atakami.

Strony zaatakowane przez hakerów zazwyczaj otrzymują karę od Google, co skutkuje obniżeniem widoczności strony w organicznych wynikach wyszukiwania. Jak wyjść z filtra za włam hakerski? Sprawdź: https://projektmarketing.pl/jak-wyjsc-z-filtra-google-za-wlam-hakerski/.

Jak sprawdzić wersję PHP na serwerze?

Wystarczy prosta linijka kodu.

W dowolnym pliku szablonu strony wklej następujący kod PHP:

<?php phpinfo(); ?>

Na hostingach zazwyczaj jest ustawiona niższa wersja PHP od aktualnej, ale można ją zazwyczaj aktywować bezpośrednio w panelu hostingu lub pliku .htaccess.

Do pliku htaccess wklej następujący kod, który uruchomi wersję PHP 7.2:

AddHandler application/x-httpd-php72 .php

Już wersja PHP 7.0 pozwala 2-krotnie przyspieszyć swoje działanie w porównaniu do starszych wersji PHP.

Zobacz wideo poradnik

Aktywacja najnowszego PHP na hostingu.

Aktualnie na polecanym serwerze Zenbox dostępny jest najnowszy PHP 7.2.

Najpopularniejsza technologia WordPress obsługuje najnowszą wersję PHP 7.0. Należy jednak pamiętać, aby po włączeniu najnowszej wersji PHP sprawdzić czy strona funkcjonuje poprawnie z włączonymi wtyczkami WordPress.

Może się zdarzyć, że technologia wykorzystana do stworzenia strony nie obsługuje PHP 7.0 i może nie działać w pełni poprawnie. W takim przypadku należy przywrócić pierwotne ustawienia lub poprosić firmę o poprawienie skryptu zgodnie z najnowszą wersją PHP, co najprawdopodobniej będzie wiązało się z dodatkowymi kosztami.

Optymalizacja rozmiarów grafik i kompresja

Każda grafika udostępniona za pośrednictwem strony internetowej jest załadowana na serwer. Idąc dalej…

Im większe wymiary grafiki, tym większa waga plików (kilobajty, megabajty).

Z kolei im więcej waży plik graficzny, tym większe obciążenie serwera, które prowadzi do spowolnienia strony www.

Bardzo popularnym błędem wśród właścicieli sklepów i stron firmowych jest ładowanie grafik o zbyt dużych rozmiarach.

Przykład:

Szablon Twojej strony obsługuje ikony wpisu o wymiarach 625px x 320px, a Ty za każdym razem ładujesz grafiki o wymiarach 1920px x 860px. W efekcie grafika o większych wymiarach więcej waży, wywołuje większe obciążenie serwera i powoduje wolniejsze ładowanie strony.

Rozwiązanie:

Najlepiej załadować grafiki o wymiarach, które będą odpowiadać zadeklarowanym wymiarom grafik w szablonie. W efekcie grafika będzie idealnie dopasowana do szablonu strony. Warto skorzystać także z narzędzia https://tinyjpg.com, które umożliwia kompresję grafiki.

Czym jest kompresja grafiki?

To pomniejszenie wagi pliku graficznego bez utraty jakości lub z utratą jakości. Korzystając z narzędzi do kompresji grafik możemy zmniejszyć wagę pliku graficznego nawet o ponad 50%. Wykorzystując kompresję grafik przyspieszamy stronę, redukujemy obciążenie serwera i poprawiamy komfort użytkowania strony, także na urządzeniach mobilnych.

Przypominam o wejściu w życie mobile-first index, tutaj odsyłam do artykułu o mobilnym SEO: https://projektmarketing.pl/mobilne-seo/

W filmie poniżej mówię, że kompresja najczęstszych formatów plików jpg i png może się odbywać bez utraty jakości widocznej dla ludzkiego oka. Przed nadpisaniem skompresowanych obrazów na serwerze warto na wszelki wypadek wykonać kopię zapasową wszystkich plików graficznych.

Zobacz wideo poradnik

Jak zoptymalizować wymiary i wagę grafik na stronie www?

Warto zaznaczyć, że kompresja powinna dotyczyć wszystkich grafik na serwerze. Pozwoli to zoptymalizować szybkość ładowania strony głównej i wszystkich podstron serwisu, gdzie ładowane są pliki graficzne.

Wykorzystaj pamięć podręczną przeglądarki

Pamięć podręczna przeglądarki jest pomocna szczególnie dla urządzeń mobilnych. Proces ustawia nagłówki HTTP dla plików (Expires), które powinny zostać trzymane w pamięci podręcznej przeglądarki na wybrany okres czasu.

Poniższy kod umieść w pliku .htaccess na swoim serwerze:

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

  # Web fonts
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

Zobacz wideo poradnik

Jak wykorzystać pamięć podręczną przeglądarki?

Wdrożenie nagłówków Expires do pliku htaccess powinno zwiększyć szybkość ładowania strony w narzędziu Google Page Speed. Testy wykonuj przynajmniej co 30 sekund.

Nadpisywanie skompresowanych grafik na serwerze

Popularnym błędem jest testowanie szybkości ładowania strony wyłącznie dla strony głównej. Zapominamy o podstronach i grafikach tam osadzonych. W tym materiale pokażę Ci, jak skompresować wszystkie grafiki strony i załadować bezpiecznie na serwer.

Jeżeli chodzi o WordPress, grafiki do skompresowania znajdziesz na serwerze dostępne w katalogach:

• uploads – pobieramy grafiki ładowane do wpisów, stron i produktów.
• themes – pobieramy grafiki z aktywnego szablonu WordPress.
• plugins – pobieramy grafiki, które wykorzystują wtyczki WordPress.

Zobacz wideo poradnik

Jak krok po kroku skompresować wszystkie grafiki strony i załadować na hosting?

Wyeliminuj blokujący renderowanie kod JavaScript i CSS

Każda strona internetowa, którą miałem przyjemność optymalizować w narzędziu PageSpeed Insights pokazuje trudny do zrozumienia komunikat:

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie.

Jak to powinna rozumieć osoba początkująca?

Praktycznie każda strona internetowa składa się z plików CSS i plików JavaScript. Ich duża ilość może powodować opóźnienia w pojawianiu się fragmentów treści pod przeglądarką internetową. Zanim załaduje się strona www, przeglądarka oczekuje aż zasoby plików z rozszerzeniem .css i .js zostaną załadowane. I tak proces pełnego załadowania strony wydłuża się w czasie.

Przeglądarki zazwyczaj ładują wszystkie elementy na stronie, zanim wszystko pokażą użytkownikowi.

Posiadanie załadowanych zasobów w części strony widocznej na ekranie jest kluczowe, ponieważ jest to część strony, która ładuje się jako pierwsza i jest natychmiast widoczna dla użytkowników przed przewinięciem strony. Pierwsze wrażenie i kontakt użytkownika ze stroną zadecydują czy zostanie Twoim klientem.

Nie pozwólmy, aby skrypty i pliki napisane przez programistów spowolniły ładowanie strony!

Jedynym słusznym rozwiązaniem jest minifikacja kodu JavaScript i CSS. Dobrą opcją jest wykorzystanie potencjału wtyczki W3 Total Cache – kombajnu przyspieszającego ładowanie stron w technologii WordPress.

Zobacz wideo poradnik

Jak wyeliminować blokujące renderowanie pliki .js i .css? Konfiguracja W3 Total Cache i minifikacja.

Zobacz wideo poradnik

Jak wyeliminować blokujące renderowanie czcionek Google Fonts osadzonych na WordPressie?

Mam też do Ciebie ogromną prośbę. Jeżeli uznasz, że poradnik na temat optymalizacji szybkości ładowania strony okazał się wartościowy i pomocny, to udostępnij go swoim znajomym lub podlinkuj. Gdziekolwiek… Niech inni ludzie też na tym skorzystają.