Kursy pozycjonowania

Optymalizacja PageSpeed w pięciu łatwych krokach

Optymalizacja PageSpeed w pięciu łatwych krokach

PageSpeed, czyli szybkość ładowania się strony internetowej, to dla biznesu w sieci bardzo ważne zagadnienie. Od tego, jak szybko załaduje się strona, może zależeć to, czy odwiedzający zdecydują się na niej pozostać, czy raczej przeniosą się w jakiś inny, bardziej przyjazny użytkownikowi zakątek Internetu. 

Technologia Google PageSpeed Insight mierzy wydajność stron internetowych ładowanych w przeglądarkach na komputerach oraz urządzeniach mobilnych. Wynik prezentowany jest w zakresie od 0 do 100 punktów. Rezultat na poziomie 85 punktów jest dobrym wynikiem. Poniżej omówimy pokrótce najważniejsze kwestie, które wpływają na to, ile punktów otrzyma nasza strona.

Włączanie obsługi pamięci podręcznej przeglądarki

Pamięć podręczna przeglądarki to tak zwany cache. Pozwala ona zaoszczędzić cenne kilobajty, a tym samym poprawić PageSpeed naszej strony. Istota działania tego rozwiązania jest prosta. Chodzi o to, aby powtarzające się elementy, takie jak pliki graficzne szablonu czy biblioteki JavaScript na podstronach danego serwisu, nie musiały być ładowane od nowa za każdym razem, gdy użytkownik będzie poruszał się między zakładkami. Dzięki włączeniu obsługi pamięci podręcznej, dane te będą ładowane bezpośrednio z niej, co wpłynie na poprawę szybkości ładowania się strony.
Jak zatem włączyć obsługę pamięci podręcznej przeglądarki?
Do wykonania tej operacji niezbędny jest dostęp poprzez FTP do naszego katalogu ze stroną, która znajduje się na serwerze. Należy odszukać plik .htaccess i dopisać w nim poniższe linijki kodu, odpowiedzialnego za uruchomienie obsługi pamięci podręcznej przeglądarki.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>

Powyższy kod dla obrazków typu jpg, jpeg, gif, png, x-icon spowoduje, że pamięć przeglądarki będzie przetrzymywała je przez rok. Natomiast treści dynamiczne, takie jak css, html, pdf, javascript czy flash, będą pamiętane przez miesiąc.

Optymalizacja obrazów

Jeśli Google wykryje, że nasza strona posiada pliki graficzne, które można zoptymalizować bez widocznego pogorszenia ich jakości, wówczas ten parametr zostanie wskazany do poprawy. Należy zadbać o prawidłowy rozmiar i wagę plików: takie, aby nie spowalniały ładowania strony.
Wyróżnia się dwa rodzaje optymalizacji plików graficznych:

  • optymalizacja plików statycznych – są to wszystkie pliki graficzne szablonu strony oraz treści ładowane przez CMS. Google PageSpeed Insights umożliwia pobranie paczki ze zoptymalizowanymi plikami (zarówno graficznymi, jak i plikami CSS oraz JavaScript). U dołu wygenerowanej analizy strony wyświetla nam wówczas link o nazwie: “Pobierz zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla tej strony”.
  • optymalizacja plików dynamicznych – czyli takich, które generowane są dynamicznie przez stronę. Są to między innymi obrazki postów na stronie bloga, zdjęcia produktów w sklepach internetowych itp.

Istnieje możliwość doinstalowania modułu od Google, który będzie automatycznie optymalizował pliki graficzne. Warunkiem jest posiadanie uprawnień administracyjnych na serwerze strony. Instalacja oraz konfiguracja modułu dostępna jest tutaj.

Wyeliminowanie renderowania blokujących kodów JavaScript i CSS

Kod JavaScript oraz CSS może opóźniać ładowanie strony, jeżeli umieszczony został w sekcji <HEAD>, na górze strony. Język JavaScript działa po stronie przeglądarki, więc strona oczekuje pełnego załadowania pliku oraz wykonania szeregu funkcji, które ma zakodowane, a dopiero później wyświetla resztę strony.
Jak zatem sprawić, aby kod JavaScript i CSS nie spowalniały ładowania się strony?
Rozwiązanie tego problemu jest stosunkowo proste. Należy przenieść kody JavaScript i CSS na dół sekcji <BODY> przed jej zamknięciem. Innym rozwiązaniem jest zastosowanie asynchronicznego ładowania skryptów.

Włączenie kompresji strony WWW

Ten punkt wskazywany jest do poprawy, jeśli PageSpeed Insights wykryje, że nasza strona nie jest kompresowana z zastosowaniem kompresji HTTP.
Gzip to kompresja, która pozwala skompresować witrynę po stronie serwera. To rozwiązanie ma zarówno plusy, jak i minusy. Pozwala zmniejszyć transfer, ale kosztem większego użycia procesora. Jeśli nasza strona jest duża, to zwiększenie użycia procesora może stanowić problem dla jej funkcjonowania, dlatego należy rozważyć co, jest korzystniejsze dla naszej strony.
Istotny jest tutaj fakt, że wiele hostingów ma domyślnie włączoną kompresję Gzip, w związku z czym nie istnieje potrzeba ingerowania w dodatkowe ustawienia.

Skrócenie czasu odpowiedzi serwera

Czas odpowiedzi serwera to całkowity czas na zwrócenie kodu HTML niezbędnego do rozpoczęcia prawidłowego generowania strony z serwera. Zależy od kilku czynników. Jednym z nich jest rozmiar naszej strony. Im większy jest nasz serwis,  im więcej ma skryptów i obrazków, tym dłuższy czas odpowiedzi serwera. Nie powinien przekraczać 200 ms.
Jak zatem poprawić czas odpowiedzi serwera? Należy przeanalizować to, czy nasza strona internetowa działa prawidłowo i czy nie występują problemy ze skryptami lub bibliotekami JavaScript, które obciążają serwer. Skomplikowane zapytania do bazy danych również niekorzystnie wpływają na czas odpowiedzi serwera, więc należy im się przyjrzeć, a jeśli to możliwe, także dokonać ich optymalizacji.

Tomasz Czechowski Tomasz Czechowski
Wróć do listy

Dodaj komentarz