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. Pozycjonowanie stron bez optymalizacji mobile, może być bardzo nieefektywne. 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.
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 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.
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
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.
W zamierzchłych czasach niektóre urządzenia mobilne nie obsługiwały wszystkich tych elementów, więc twórcy stron mobilnych blokowali jeden lub wszystkie trzy typy. Obecnie GoogleBot chce widzieć i klasyfikować te same treści, które widzą użytkownicy. Więc nie ukrywaj CSS, JavaScript ani obrazów. Te elementy są również niezbędne, aby bot Google mógł zrozumieć, jaką wersję witryny mobilnej posiadasz.
Ze względu na ograniczoną przestrzeń ekranu wynik wyszukiwania z fragmentami rozszerzonymi jeszcze bardziej się wyróżnia niż na komputerze. Zastosowanie tego typu rozszerzeń pomaga wygenerować wyższy współczynnik klikalności CTR.
Jeśli Twoja firma ma odziały lokalne, pamiętaj o optymalizacji treści mobilnych na potrzeby wyszukiwania lokalnego. Obejmuje to standaryzację imienia i nazwiska, adresu i numeru telefonu, a także uwzględnienie nazwy miasta w metadanych witryny.
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 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.
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. Możemy przyspieszyć ładowanie stron, wymaga to byśmy ograniczyli rozmiar danych (znaczniki HTML, obrazy, CSS, JavaScript) które są generowane przed właściwymi treściami.
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. Powoduje to ponowne uruchomienie jednej lub kilku pętli i opóźnienie czasu pierwszego renderowania strony. Unikaj takich sytuacji i zdarzeń, w których blokujemy proces, przez generowanie kodu JavaScript, zwłaszcza zewnętrznych skryptów, które muszą zostać pobrane, zanim zostaną wykonane.
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.
Jest kilka podejść które możemy zastosować przy projektowaniu strony mobilnej
mobile-friendly approach:
W tym punkcie rekomenduję 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.
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).
Rekomenduję 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.
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.
Ważnym elementem optymalizacyjnym jest implementacja Accelerated Mobile Pages czyli w skrócie AMP. Ten typ stron dedykowany jest wynikom wyszukiwania w wersji mobile. Dzięki unifikacji i odchudzeniu stron do minimum strony te generują się bardzo szybko. Niestety odchudzenie technologii powoduje, że strony AMP mają też kilka ograniczeń.
źródło: https://developers.google.com/
Polecam szkolenia seo dla zaawansowanych i początkujących!
Artykuł uaktualniony 1 rok