POZYCJONOWANIE W GOOGLE: Optymalizacja stron WWW – Reguły PageSpeed Insights

Jeśli chcesz poprawić pozycję swojej strony WWW w wyszukiwarce google:

• zrób test prędkości ładowania strony WWW https://developers.google.com/speed/pagespeed/insights/;
• zapoznaj się z raportem i regułami wyznaczonymi przez Google PageSpeed Insight, których nie spełnia twoja strona WWW;
• popraw rzeczy o których mowa w raporcie, szczególnie te które oznaczone są jako „należy poprawić”

Jeżeli jeszcze nie wiesz co to Google PageSpeed Insights, wejdź i zapoznaj z się z tym narzędziem BLOG

Dotychczas Google ustaliło 10 reguł dla stron WWW w wersji na komputery:

• unikaj przekierowań stron docelowych
• włącz kompresję
• wykorzystaj pamięć podręczną
• skróć czas odpowiedzi na serwer
• zmniejsz CSS
• zmniejsz HTML
• zmniejsz JavaScript
• wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie
• zoptymalizuj obrazy
• nadaj priorytet widocznej treści

oraz dodatkowe 6 dla urządzeń mobilnych.

• unikaj reklam pełnoekranowych zasłaniający treść, które zachęcają do instalowania aplikacji
• unikaj stosowania wtyczek
• konfiguracja okna roboczego
• dopasowanie rozmiaru do okna roboczego
• dobierz odpowiedni rozmiar elementów dotykowych
• używaj czytelnych rozmiarów czcionek

Poniżej kilka porad i rozwiązań by osiągnąć zadowalający wynik testu, tj minimum 85pkt /100. Chciałbym zaznaczyć że niektóre reguły wymagają wiedzy programistycznej, dlatego warto skorzystać z pomocy osoby zajmującej się daną stroną WWW lub zlecić to profesjonalnej firmie.

Unikaj przekierowań stron docelowych - Twoja strona zawiera przekierowania. Powodują one dodatkowe opóźnienia podczas wczytywania strony.

Problem pojawia gdy po wejściu na stronę, wystąpi więcej niż jedno przekierowanie. Każde przekierowanie to dodatkowe operacje, które wymagają czasochłonnych transferów danych.

Przykłady przekierowań :

• domena.com – witryna responsywna, brak przekierowań                          DOBRZE
• domena.com -> m.domena.com -> przekierowanie na wersje mobilną    OK
• domena.com -> www.domena.com – dla wersji responsywnej                  OK
• www.domena.com -> domena.com – dla wersji responsywnej                  OK
• domena.com -> www.domena.com -> m.domena.com                              Źle

Włącz kompresję - Kompresja zasobów przy użyciu algorytmu gzip lub deflate może zmniejszyć liczbę bajtów przesyłanych przez sieć

Reguła wyświetla się w momencie gdy nasze zasoby przesyłane są bez zastosowaniem algorytmów kompresujących. Kompresja Gzip zmniejszy transfer, ale przy naprawdę obszernych stronach WWW może spowodować nadmierne obciążenie procesora. Trzeba więc oszacować, które rozwiązanie jest lepsze. Większość firm hostingowych ma domyślnie włączoną kompresję Gzip, jednak znajdą się też takie które togo nie udostępniają.

Dla serwerów opartych o apache, wykorzystuje się moduł “mod_deflate” dla Nginx “HttpGzipModule”. Dla przykładu wystarczy dodać do pliku .htaccess kilka lini:

lub

Niestety może się zdarzyć iż konfiguracja serwera nie pozwoli nam na zastosowanie niektórych modułów. Na to niestety nie mamy wpływu.

Wykorzystaj pamięć podręczną przeglądarki - Ustawienie daty wygaśnięcia lub maksymalnego wieku zasobów statycznych w nagłówkach HTTP powoduje, że przeglądarka wczytuje z lokalnego dysku twardego zasoby pobrane wcześniej, zamiast ponownie pobierać je z sieci.

Takie wykorzystanie pamięci przeglądarki znacznie zaoszczędzi ilość pobieranych kilobajtów podczas ładowania strony WWW i przechodzenia na kolejne podstrony. Efektem jest szybsze otwieranie się witryny.

Włączenie takiego modułu oraz ustawienia czasu przechowywania danych polega na dodaniu kilku linii w pliku .htaccess

Lub

Po zastosowaniu jednego z powyższych kodów, reguła powinna zniknąć z testu. Jeśli jednak strona korzysta z plików znajdujących się na innych serwerach to niestety reguła będzie się nadal wyświetlała. Przykładem jest korzystanie ze skryptu Google Analytics.

Skróć czas odpowiedzi serwera - W naszym teście czas odpowiedzi serwera wyniósł X sekundy.

Reguła zostaje wyświetlona gdy czas odpowiedzi przez serwer przekracza 200ms a dokładnie mówiąc to czas wczytania kodu HTML niezbędnego do rozpoczęcia renderowania strony WWW z serwera.

Spowolnienie odpowiedzi może być spowodowane przez wiele czynników:

• mało wydajne algorytmy aplikacji
• zasobożerne zapytania do bazy danych
• powolny routing
• architekturę strony WWW
• duże biblioteki
• nadmierne wykorzystanie zasobów obliczeniowych procesora bądź pamięci. 

Niestety pozbycie się tego problemu nie zawsze jest proste. Najpierw trzeba odkryć co tak naprawdę spowalnia czas odpowiedzi serwera a następnie poszukać odpowiednich wskazówek jak to naprawić.

Podpowiedzią może być wyświetlona reguła w raporcie „Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie”

Zmniejsz CSS, Zmniejsz HTML, Zmniejsz JavaScript - Kompaktowanie kodu HTML, a także wszelkiego wbudowanego kodu JavaScript i arkuszy CSS, pozwala zaoszczędzić wiele bajtów danych. Kod będzie szybciej pobierany i analizowany.

Kompaktowanie zwane inaczej minifikacją nie ma nic wspólnego z kompresją. W plikach zostają usunietę niepotrzebne komentarze oraz znaki końca linii. Takie działanie zmniejsza wagę pliku.

Istnieją różne sposoby na wykonanie minifikacji. Ręczna, po przez aplikacje czy moduły ale google ułatwia nam sprawę. Po wykonanym teście wystarczy pobrać paczkę z odpowiednio skompaktowanymi plikami  znajdującą się na samym dole raportu "Pobierz zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla tej strony." i podmienić je z plikami na serwerze.

! Pamiętaj o kopi zapasowej oryginalnych plików. 

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie - Strona zawiera blokujące skrypty i blokujące zasoby CSS. Powoduje to opóźnienia w renderowaniu strony.

Jest to reguła która sprawia chyba najwięcej kłopotów i mówi nam o tym że kod JavaScript lub/oraz CSS opóźnia ładowanie strony. Przyczyną jest umieszczenie tych kodów w sekcji co wymusza pobranie dodatkowych zasobów przed renderowaniem.

Rozwiązania są indywidualne do zaistniałych problemów, gdyż opóźnienie ładowania niektórych skryptów i stylów może spowodować nieprawidłowe działanie strony.

! Czasami optymalizacja (zmniejszenie) plików CSS i JavaScript może pomóc.

Zoptymalizuj obrazy - Właściwe sformatowanie i skompresowanie obrazów pozwala zaoszczędzić wiele bajtów danych.

Jeden z łatwiejszych do usunięcia problem.  Istnieją dwa komunikaty:

• zmiana rozdzielczości
• kompresja bezstratna

Komunikat pierwszy mówi nam o tym iż obraz wyświetlany jest w mniejszej rozdzielczości niż jest w rzeczywistości. Wystarczy zmniejszyć rozdzielczość obrazu do wymaganej wielkości.

Drugi komunikat mówi o zmniejszeniu wagi pliku bez zmniejszenia rozdzielczości i jakości obrazu. Istnieje wile programów do takiej właśnie kompresji, lecz google ułatwia nam sprawę i udostępnia nam na końcu raportu paczkę z odpowiednio już skompresowanymi obrazami "Pobierz zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla tej strony.". Wystarczy tylko podmienić obrazy na serwerze.

! Pamiętaj o kopi zapasowej oryginalnych plików.

Nadaj priorytet widocznej treści - Część strony widoczna na ekranie ma odpowiedni priorytet.

Google zaleca żeby podczas ładowania strony WWW w sekcji znajdowały się tylko najważniejsze  style odpowiadające za wygląd tej części strony WWW, która jest widoczna w oknie przeglądarki zaraz po załadowaniu.

Niestety wykonanie takiego zalecenia może spowodować złe wyświetlanie się strony do momentu pełnego załadowania.

Często jest tak że po zmniejszeniu plików CSS oraz JavaScript, ta reguła zniknie z testu.

Unikaj reklam pełnoekranowych zasłaniający treść, które zachęcają do instalowania aplikacji – ze względu na ograniczone miejsce na ekranach urządzeń mobilny nie zaleca się stosowania pełnoekranowych reklam, które utrudniają użytkownikowi przeglądanie witryny.

Unikaj stosowania wtyczek - Na większości urządzeń mobilnych nie ma obsługi Flash Silverlight czy Java i taka treść nie może zostać odtworzona przez użytkownika. Większość materiałów tego typu można otworzyć za pomocą natywnych technologii internetowych.

Dopasowanie rozmiaru do okna roboczego - Zawartość strony jest zbyt szeroka w stosunku do okna, co zmusza do przewijania jej w poziomie. Dopasuj zawartość strony do rozmiarów okna, aby ułatwić korzystanie z niej.

Mowa tutaj między innymi o responsywności strony, czyli przystosowaniu strony do urządzeń mobilnych. Odpowiednie ustawienie szerokości okna nie będzie wymagało przewijania strony w poziomie.

Konfiguracja okna roboczego - Twoja strona nie ma zdefiniowanego okna roboczego. Z tego powodu urządzenia mobilne renderują ją tak, jakby była wyświetlana w przeglądarce komputerowej, zmniejszając ją pod kątem rozmiaru ekranu urządzenia mobilnego. Skonfiguruj okno robocze, aby umożliwić poprawne renderowanie Twojej strony na wszystkich urządzeniach.

Wymagane jest przebudowanie strony, by mogła zmieniać szerokość w zależności urządzenia na którym jest wyświetlana.

Dobierz odpowiedni rozmiar elementów dotykowych - Niektóre linki/przyciski na stronie są prawdopodobnie zbyt małe, aby można z nich było wygodnie skorzystać na ekranie dotykowym. Zastanów się nad powiększeniem tych elementów w celu ułatwienia ich obsługi.

Tak jak mówi podpowiedź. Ważne jest by linki i przyciski była na tyle duże by łatwo w nie trafić na małych ekranach dotykowych.

Używaj czytelnych rozmiarów czcionek - Po wyrenderowaniu, poniższy tekst na Twojej stronie może być nieczytelny dla niektórych gości. Użyj czytelnych rozmiarów czcionek, by zwiększyć wygodę użytkowników.

Ważna jest wielkość czcionki wyświetlana na urządzeniach mobilnych. Odpowiednio duża czcionka pozwoli na swobodne czytanie bez konieczności przybliżania.