Responsywna strona internetowa — czym jest i dlaczego Google ją nagradza?

Jest taki test, który robię każdemu klientowi, gdy przychodzi z pytaniem o nową stronę: wyciągam telefon i odwiedzam jego obecną stronę. Nie żeby zepsuć mu humor na początku rozmowy — ale żeby zobaczyć, z czym tak naprawdę pracujemy. W mniej więcej co trzecim przypadku efekt jest taki sam: tekst za mały do czytania, przyciski za małe do klikania, poziome paski przewijania, obrazki wyjeżdżające poza ekran.

Taką stronę Google traktuje jak obywatela drugiej kategorii. I ma rację.

Co to znaczy, że strona jest responsywna?

Responsywna strona internetowa to taka, która automatycznie dostosowuje swój układ, rozmiar tekstu i rozmieszczenie elementów do rozdzielczości i rozmiaru ekranu, na którym jest wyświetlana. Na dużym monitorze pokazuje się inaczej niż na tablecie, a na telefonie inaczej niż na obu poprzednich — ale zawsze czytelnie i użytecznie.

Nie chodzi tylko o to, żeby "zmieściła się" na mniejszym ekranie. Chodzi o to, żeby na każdym urządzeniu użytkownik mógł zrobić to, po co przyszedł: przeczytać informację, znaleźć numer telefonu, wysłać formularz, zrobić zakup.

Dlaczego Google preferuje strony mobile-first?

Google od 2019 roku stosuje indeksowanie mobile-first. Oznacza to, że przy ocenie strony bierze pod uwagę przede wszystkim jej wersję mobilną — nie desktopową. Jeśli wersja mobilna jest słaba, pozycja w wynikach wyszukiwania cierpi niezależnie od tego, jak dobra jest wersja na komputery.

• Ponad 60% ruchu internetowego w Polsce pochodzi z urządzeń mobilnych
• Google indeksuje stronę głównie przez robota mobilnego
• Strony z problemami mobilnymi dostają niższe oceny w Core Web Vitals
• Użytkownicy opuszczają stronę mobilną, która ładuje się powyżej 3 sekund — to bezpośrednio wpływa na współczynnik odrzuceń i sygnały rankingowe

Core Web Vitals — co to jest i dlaczego ważne?

Core Web Vitals to zestaw wskaźników technicznych, które Google używa jako sygnał rankingowy. Mierzą trzy rzeczy: jak szybko strona wyświetla główną treść, jak szybko reaguje na pierwsze działanie użytkownika i czy elementy na stronie nie przeskakują podczas ładowania.

• LCP (Largest Contentful Paint) — czas do wyświetlenia największego elementu widocznego na ekranie. Powinien być poniżej 2,5 sekundy
• INP (Interaction to Next Paint) — czas reakcji strony na kliknięcie lub dotknięcie. Powinien być poniżej 200 ms
• CLS (Cumulative Layout Shift) — miara stabilności wizualnej. Elementy nie powinny "skakać" podczas ładowania

Najczęstsze błędy responsywności na polskich stronach firmowych

• Tekst za mały na telefonach — minimalny rozmiar to 16px dla treści głównej
• Przyciski i linki za blisko siebie — Google wymaga minimalnego obszaru dotyku 48×48px
• Obrazy bez atrybutu alt i bez określonych wymiarów — powodują skoki układu (CLS)
• Poziomy scroll na telefonach — efekt źle ustawionych szerokości elementów
• Formularze nieoptymalizowane pod dotyk — pola za małe, klawiatura nie przełącza się na numeryczną przy polach telefonu
• Wyskakujące okna przesłaniające treść na telefonie — Google penalizuje interstitials na mobile

Jak sprawdzić, czy moja strona jest responsywna?

• Google PageSpeed Insights (pagespeed.web.dev) — darmowe narzędzie, które ocenia stronę i pokazuje konkretne problemy do naprawy
• Google Search Console → Użyteczność strony na urządzeniach mobilnych — lista błędów z Twojej strony
• Test przyjazności dla urządzeń mobilnych — wpisz adres strony w Google i kliknij "Więcej narzędzi" lub użyj narzędzia w Search Console
• Po prostu telefon — otwórz stronę na smartfonie i sprawdź, czy czytasz bez przybliżania, klikasz bez trafiania w zły element i nie ma poziomego scrolla

Najczęstsze pytania o responsywność stron