Jak sprawdzić czy witryna jest dostosowana do komórek?

Dziś smartfony towarzyszą nam od świtu do nocy. Nasza aktywność na urządzeniach mobilnych wzrasta stopniowo - od wczesnych godzin porannych, aż do wieczora, gdzie między godziną 20 a 21 osiąga szczyt (źródło: Gemius Współczesny konsument – przed tv z telefonem w ręku).

Najczęściej na urządzeniach mobilnych korzystamy z aplikacji społecznościowych. Kontaktujemy się ze znajomymi za pomocą Facebooka, publikujemy zdjęcia na Instagramie. Często gramy w gry i coraz częściej dokonujemy zakupów online.

W związku ze zmianą zachowań młodego pokolenia Z i millenialsów, marka Google wprowadziła na początku 2018 r. zmianę w algorytmie o nazwie Mobile First Index, który wyżej ocenia strony dostosowane do urządzeń przenośnych.

Przedstawiamy 5 darmowych narzędzi od Google, które pozwalają sprawdzić w jakim stopniu strona jest zoptymalizowana i przyjazna dla użytkownika i wyszukiwarki.

Dlaczego szybkość ładowania strony jest istotna

Warto zadbać o szybkość ładowania strony ze względu na Odbiorców, którzy z powodu wolno ładującej się strony mogą ją opuścić i przejść do innego serwisu zanim zapoznają się z ofertą czy też dokonają kluczowych dla naszego biznesu interakcji (połączenie telefoniczne, wysłanie zapytania, zakup produktu). Szybkość ładowania zdjęć, filmów i innych multimediów ma też wpływ na widoczność serwisu w wyszukiwarce Google i na pozycjonowanie stron a więc osiąganie wysokich pozycji w TOP10.

1. Nowe narzędzie od Google Test My Site do sprawdzania szybkości strony

W tym roku narzędzie Test My Site zostało zaktualizowane przez Google. Dzięki niemu programiści, webmasterzy jak również przedsiębiorcy mogą sprawdzić jak szybko strona ładuje się na urządzeniach mobilnych. Narzędzie dostępne jest pod linkiem: https://testmysite.withgoogle.com/intl/pl-pl. Strona testowana jest przy użyciu technologii 3G w związku z tym, że 70% komórkowych połączeń internetowych na świecie, do 2020 roku będzie nawiązywanych właśnie przy tej prędkości lub z niższej.

Na pierwszym ekranie otrzymujemy informacje, jak szybko ładowała się nasza strona na urządzeniach mobilnych, jak również szacunkową ilość osób, które możemy utracić z powodu zbyt niskiej prędkości ładowania strony. Scrollując stronę w dół znajdziemy benchmarking, analizę konkurencji, a więc porównanie jak nasza strona wypada na tym tle z innymi stronami z branży. W ostatniej zakładce możemy pobrać raport na maila z wskazówkami optymalizacyjnymi.

2. PageSpeed Insights narzędzie do sprawdzania działania strony na komórkach i komputerach

PageSpeed Insights Jest to najbardziej zaawansowane narzędzie do sprawdzania stopnia optymalizacji strony zarówno wersji mobilnej jak i desktop. Bierze pod uwagę takie czynniki strony jak:

  • konfiguracja serwera,
  • struktura kodu HTML,
  • wykorzystanie zasobów zewnętrznych (zdjęcia, pliki itp).

Wynik PageSpeed mieści się w zakresie od 0 do 100 punktów. Wynik na poziomie co najmniej 85 punktów oznacza, że strona działa dobrze. Narzędzie PageSpeed Insights jest nieustannie usprawnianie, więc wynik może się zmieniać, dlatego analizy warto dokonywać przynajmniej 2 razy w roku.

Sugestie i informacje zawarte w raporcie Google Page Speed Insights pomagają przyspieszyć ładowanie strony.

3. Test AMP - Jak wdrożyć standard AMP. Przykład strony

AMP to nowy standard tworzenia szybko wczytujących się stron na urządzeniach mobilnych. Strony w tej technologii muszą być zgodne ze specyfikacją AMP HTML. Jeżeli planujesz wdrożyć tę technologię, a nie do końca wiesz jak - skontaktuj się z nami.

4. Google Search Console - główne narzędzie pracy dla specjalistów SEO

Google Search Console to podstawowe narzędzie pracy specjalistów SEO. Stosując się do ogólnych wskazówek w nim zawartych ułatwisz Google znalezienie i zindeksowanie witryny oraz ustalenie jej pozycji.

Warto zapoznać się z Raportem dotyczącym obsługi na urządzeniach mobilnych.

Błędy, jakie mogą się pojawić:

  • Wykorzystanie zawartości Flash – większość przeglądarek komórkowych nie renderuje zawartości Flash.
  • Nieskonfigurowany widoczny obszar – twoje strony powinny zawierać okno robocze korzystające z tagu "meta viewport". Ten tag informuje przeglądarki o sposobie regulacji rozmiaru strony oraz jej skalowaniu pod kątem dopasowania do urządzenia.
  • Okno robocze o stałej szerokości – ten raport pokazuje strony z oknem roboczym o stałej szerokości – aby naprawić ten błąd, należy przyjąć podejście elastycznego projektowania stron witryny i ustawić okno robocze tak, by pasowało do szerokości urządzenia i odpowiednio się skalowało. Konfiguracja okna roboczego jest szczegółowo opisana w przewodniku Podstawy pracy w sieci.
  • Rozmiar zawartości niedopasowany do widocznego obszaru – ten raport wskazuje strony wymagające przewijania poziomego w celu wyświetlenia znajdującego się na nich tekstu i obrazów. Aby rozwiązać ten problem, upewnij się, że strony korzystają z wartości względnych szerokości i pozycji elementów CSS i dopilnuj, by obrazy również się skalowały.
  • Mały rozmiar czcionki – ten raport wskazuje strony, na których zbyt mała czcionka jest po prostu nieczytelna i wymaga powiększania widoku strony w celu przeczytania jej treści.
  • Elementy dotykowe są zbyt blisko siebie – ten raport wskazuje adresy URL witryn, których elementy dotykowe, takie jak przyciski i linki nawigacyjne, znajdują się tak blisko siebie, że użytkownik urządzenia przenośnego ma trudności z dotknięciem palcem wybranego elementu bez dotknięcia elementu sąsiadującego.

5. Google Analytics - narzędzie do badania zachowań użytkowników

Korzystając z Raportu odbiorców w Google AnalyticsRuch mobilny ogółem i z podziałem na urządzenia – przeanalizujesz zachowanie użytkowników.

Zobaczysz między innymi, z jakich urządzeń korzystają użytkownicy oraz jaki jest współczynnik odrzuceń według kategorii urządzeń.

Jak przyspieszyć szybkość ładowania strony i zmniejszyć CSS, HTML, Javascript, obrazki i filmy.

Najlepsze porady i wskazówki jak przyspieszyć szybkość działania strony:

  • Unikaj oprogramowania, które nie występuje powszechnie na urządzeniach mobilnych, takiego jak Flash.
  • Upewnij się, że tekst jest czytelny bez powiększania.
  • Ilość treści jest dostosowana do rozmiaru ekranu, aby użytkownicy nie musieli przewijać tekstu poziomo, ani powiększać go czy pomniejszać.
  • Linki znajdują się na tyle daleko od siebie, że można łatwo dotknąć właściwego.
  • Włącz kompresję gzip na serwerze
  • Skompresuj obrazki i dopilnuj, by skalowały się do różnych rozdzielczości ekranów
  • Usuń z kodu HTML, JavaScript, CSS zbędne elementy: spacje, komentarze, znaczniki itp.
  • Używaj jak najmniej wtyczek i dodatkowych modułów
  • Cachowanie zawartości – wykorzystaj pamięć podręczną

Podsumowanie

Niezależnie od tego, czy twoja strona mobilna jest responsywna (automatycznie dopasowująca się do rozmiaru naszego wyświetlacza), czy umieszczona jest na osobnej podstronie (np. m.domena.pl) – o każdą z nich warto zadbać! Mamy nadzieję, że narzędzia, które wymieniliśmy okażą się pomocne. Jeżeli masz pytania – skontaktuj się z nami.

FB Behance twitter Instagram