Mobile SEO

Mobile SEO podstawowe rekomendacje

Zgodnie z informacjami płynącymi z samego Google jak również z publikacji specjalistów SEO wynika, że nasza uwaga powinna się skupić na optymalizacji stron mobilnych. W poprzednim wpisie na temat Mobile First Index podałem wiele danych statystycznych pokazujących znaczenie mobile w poszczególnych kategoriach. Niektóre kategorie przekroczyły już 50% udziału ruchu mobilnego. W innym artykule na temat głównych czynników wpływających na wyniki SEO wskazałem znaczący wzrost mobile w hierarchii parametrów rangujących w Google. Składając w całość przemyśleń chciałbym poniżej podsumować wszystkich listując jakie to elementy mają główny wpływ na ocenę naszych stron Mobilnych. Chciałbym zarekomendować kilka rozwiązań, które w znaczący sposób pomogą nam zwiększyć wiarygodność, użyteczność naszych stron.

Rekomandacje SEO Mobile

Włączenie kompresji danych (Enable compression)

Większość przeglądarek internetowych obsługuje kompresję GZIP w trakcie komunikacji z serwerami. Umożliwienie kompresji danych gzip może przyspieszyć transmisję danych nawet o 90% co ma niebagatelny wpływ na główny parametr czyli szybkość ładowania się strony. Ta poprawka ma wpływ również ostatecznie na UX naszego serwisu.

Minimalizacja kodów CSS, JavaScript i HTML (Minify CSS, JavaScript and HTML)

Minimalizacja kodu jest dobra praktyką. Główną zasadą jest pisanie kodu z jak najmniejszą ilością treści, tekstu. Jeśli możemy uniknąć w wersji końcowej komentarzy to nie umieszczajmy ich. Usuwamy kod, który nie jest używany, który jest niepotrzebny.

Minimalizacja przekierowań (Reduce redirects)

Unikamy niepotrzebnych przekierowań, szczególnie przekierowań cyklicznych. Przekierowania powinny być w najprostszej formie (HTTP request-response) zapytanie i odpowiedź serwera nie powinny generować dodatkowych zapytań. Im prostsza komunikacja tym lepiej. W przypadku stron responsywnych ten warunek jest spełniony z natury tego typu stron gdzie ilość przekierowań jest zminimalizowana. W przypadku rozwiązań pośrednich takich jak dedykowana strona mobilna sytuacja jest zgoła inna. Częstym błędem jest cykl przekierowań domena.pl -> www.domena.pl -> mobile.domena.pl

Optymalizacja przesyłu danych (Leverage browser caching)

Przesyłanie danych pomiędzy serwerem a przeglądarką wymaga wielu odwołań i transferu danych. W przypadku mojej strony w trakcie pobierania strony głównej przez przeglądarkę dochodzi do 46 zapytań serwera. Łączna waga transferowanych danych to 1,2 MB. Leverage browser caching zmniejsza ilość zapytań do tych, które ponownie nie mogą być wykorzystane.

Czas odpowiedzi serwera (Improve server response time)

Czas odpowiedzi serwera jest jednym z głównych czynników wpływających na ocenę naszej strony. Definiuje się go jako czas potrzebny do załadowania kodu HTML. Wpływ na ten parametr ma wiele czynników takich jak opóźnienia serwerów, czas ładowania kodu i plików.

Optymalizacja obrazów i grafik (Optimize images)

Optymalizacja obrazów ma na celu zmniejszenie ich rozmiaru tak by nie tracić na ich jakości. Dotyczy to obrazów umieszczanych jako grafiki jak również obrazów będących elementami składowymi szaty graficznej strony. Ten element może znacząco poprawić użyteczność naszej strony jak również ocenę wystawianą przez Google. W kilku projektach zmiana była znacząca. Optymalizacja obrazów poprawiła ocenę strony w PageSpeed Inside z 30 do 60. Taka zmiana ma realny wpływ na rangowanie naszej strony.

Minimalizacja kodu poprzedzającego właściwe treści (Reduce the size of the above-the-fold content)

Jeśli wymagana ilość przesyłanych danych przekracza “initial congestion window” (zazwyczaj skompresowane 14.6kB ), będzie wymagało dodatkowych połączeń pomiędzy między serwerem a przeglądarką użytkownika. Dla użytkowników w sieciach o małej przepustowości, takimi jak sieci komórkowe, może to powodować znaczne opóźnienia podczas ładowania strony. Aby przyspieszyć ładowanie stron, należy ograniczyć rozmiar danych (znaczniki HTML, obrazy, CSS, JavaScript) które są generowane przed właściwymi treściami

Remove Render-Blocking JavaScript

Zanim przeglądarka może wyświetlić stronę, musi wygenerować drzewo struktury HTML DOM. Podczas tego procesu, gdy analizator składni natrafi na skrypt, musi go zatrzymać proces i wykonać, zanim będzie mógł kontynuować analizowanie kodu HTML. W przypadku skryptu zewnętrznego analizator składni jest zmuszony czekać na pobranie zasobu, co może spowodować ponowne uruchomienie jednej lub kilku pętli i opóźnienie czasu pierwszego renderowania strony. Powinniśmy unikać takich sytuacji i unikać zdarzeń, w których blokujemy proces, przez generowanie kodu JavaScript, zwłaszcza zewnętrznych skryptów, które muszą zostać pobrane, zanim zostaną wykonane.

Optymalizacja CSS (Optimize CSS Delivery)

Zanim przeglądarka może wyrenderować treść, musi przetworzyć wszystkie style dla bieżącej strony. W rezultacie przeglądarka musi zablokować renderowanie, dopóki zewnętrzne arkusze stylów nie będą pobrane i przetworzone, co może wymagać wielu sprzężeń i w znaczący sposób opóźni czas ładowania. Jeśli zewnętrzny kod CSS jest mały, można go wstawić bezpośrednio do dokumentu HTML. Umieszczenie małego CSS w ten sposób pozwala przeglądarce na kontynuowanie renderowania strony bez wstrzymania procesu.

Przygotowanie strony przyjaznej Mobile (Adapted to various mobile devices)

Jest kilka podejść które możemy zastosować przy projektowaniu strony mobilnej

mobile-friendly approach:

  • Responsive web design (RWD) – To rozwiązanie pozwala generować identyczny kod HTML dla stron urządzeń mobilnych jak również desktop.  RWD jest rekomendowanym rozwiązaniem przez Google.
  • Dynamic serving – przypadku tego rozwiązania pod jednym adresem generowane są dwie różne wersje HTML dla mobile i dla desktop. Dzieje się to na poziomie zapytanie i odpowiedzi serwera, który rozpoznaje typ urządzenia i odpowiednio generuje właściwy HTML.
  • Oddzielny URL (mobile) – rozwiązanie, które wykorzystuje przekierowania w celu zaserwowania właściwej strona, która fizycznie jest dedykowana stroną mobilną. To rozwiązanie nie jest rekomendowane ze względu na zastosowane przekierowania.

Projektowanie skierowane na łatwość użytkowania (Design for touch)

W tym punkcie rekomendowane jest projektowanie przyjazne użytkownikowi. Jest to kluczowy element z punktu widzenia Google. Projekty powinny uwzględniać użyteczność dla użytkowników smartfonów i tabletów. Ważne jest by pamiętać o takich elementach jak wielkość przycisków, dostępność do wszystkich elementów nawigacyjnych, treści. Przyjmuje się, że optymalny rozmiar przycisku powinien oscylować wokół 44px x 44px), odległość pomiędzy przyciskami około 28x28px. Umożliwi to łatwy dostęp do przycisków. Istotne jest też to by nie przeładować jednej strony nadmiarem elementów klikalnych.

Łatwość czytania na małych ekranach (Easy reading on a small screen)

Tekst powinien być łatwy do czytania na małych ekranach jeśli tak nie będzie Google szybko obniża pozycje w wynikach organicznych stronom niespełniającym tego warunku. Elementy, które wpływają na czytelność to wielkość czcionka, jej rodzaj jak również hierarchizacja treści. Rekomendowana wielkość czcionki to 16 pikseli. Istotne jest by odnosić się do tej wartości jako do bazowej w przypadku zwiększania i zmieszczanienia rozmiarów(skalowania).

Manu nawigacyjne (Mobile navigation menu)

Rekomendowane jest ustawienie menu  na górze lub na dole ekranu. W zależności od rozłożenia treści i jej ilości menu powinno być dostępne a jednocześnie nie powinno zasłaniać kluczowych treści. W trakcie przewijania powinno być dostępne i nie utrudniać nawigacji. Skutecznym rozwiązaniem jest opcja częściowego ukrywającego się menu.

Prostota i czytelność treści (Simple, clean content)

Ostatnią uwagą dotyczącą mobile jest czystość i przejrzystość treści. Treść powinna uwzględniać rozmiar małych ekranów stąd najważniejsze elementy powinny znajdować się w górnej cześć dostępne w pierwszym widoku. Treść nie powinna wychodzić poza obszar ramki wymaganej danym rozmiarem wyświetlacza, nie powinna zmuszać do skrolowania horyzontalnego.

 

źródło: https://developers.google.com/