Przejdź do treści
Mera News

Poradnik dla wydawców, rozdział 2

Struktura strony na telefonie i komputerze

Ostatnia weryfikacja: listopad 2026

Czytelnik szybko decyduje, czy warto zostać na stronie z wiadomościami. Nagłówek powinien pojawić się szybko, strona powinna się nie ruszać, a każde dotknięcie powinno dostać odpowiedź. Google indeksuje też wersję mobilną Twoich stron, więc układ na telefonie jest wersją, która liczy się także w wyszukiwarce.

Wartości, do których warto dążyć

Core Web Vitals od Google dają trzy miary i jasny cel dla każdej z nich.

MetrykaCo mierzyDobry wynik
Largest Contentful Paint (LCP)Ładowanie2,5 sekundy lub mniej
Interaction to Next Paint (INP)Reakcję na działanie użytkownika200 milisekund lub mniej
Cumulative Layout Shift (CLS)Stabilność wizualną0,1 lub mniej

Mierz 75. percentyl wczytań stron, osobno dla telefonów i komputerów. Strona zalicza test, gdy wszystkie trzy metryki spełniają cel w tym percentylu.

Korzystaj z danych terenowych z prawdziwych wizyt: raportu Core Web Vitals w Search Console, PageSpeed Insights lub Chrome User Experience Report. Lighthouse jest przydatny w laboratorium, ale nie potrafi mierzyć INP i zamiast tego podaje Total Blocking Time.

Google twierdzi, że nie istnieje jeden sygnał jakości strony. Mówi jednak, że Core Web Vitals są używane przez jego systemy rankingowe, a inne aspekty jakości strony nie pomagają bezpośrednio w pozycjonowaniu serwisu, choć mogą sprawić, że korzysta się z niego wygodniej.

Jedna strona na oba ekrany

Google zaleca responsywny projekt jako najłatwiejszy do wdrożenia i utrzymania wzorzec. Ten sam HTML obsługuje każde urządzenie, więc treść i metadane zgadzają się bez dodatkowej pracy. Jeśli prowadzisz osobne strony mobilne, zadbaj, by te elementy były identyczne jak na komputerze:

  • Treść główna
  • Nagłówki
  • Dane strukturalne
  • Metatagi robots (przypadkowy noindex może wykluczyć stronę mobilną z indeksu)

Zacznij od tagu viewport, a potem sprawdź, czy strona zawija się przy szerokości 320 pikseli CSS bez przewijania w bok.

<meta name="viewport" content="width=device-width, initial-scale=1">

Na telefonie

  • Na początku umieść nagłówek, podpis autora i widoczną datę, a potem zdjęcie główne lub pierwszy akapit.
  • Trzymaj tekst artykułu w HTML. Przycisk „czytaj dalej”, który pobiera resztę po dotknięciu, może ukryć ten tekst przed Google, który nie klika, nie przesuwa ani nie wpisuje.
  • Rób cele dotykowe o rozmiarze co najmniej 24 na 24 piksele CSS, czyli minimum WCAG 2.2 AA. W menu i przyciskach zamykania celuj w 44 na 44, czyli poziom AAA.
  • Utrzymuj niski przypięty nagłówek i ustaw scroll-padding-top na jego wysokość, aby wybrany link nigdy nie chował się pod nim.

Na komputerze

  • Trzymaj tekst główny w granicach 80 znaków w wierszu lub mniej, a w chińskim, japońskim i koreańskim 40. To wytyczna WCAG AAA, która pomaga wszystkim czytelnikom.
  • Ustaw interlinię co najmniej 1,5 w obrębie akapitów.
  • Treści uzupełniające trzymaj w pasku bocznym, który nie przesuwa artykułu podczas ładowania.

Szybsze ładowanie

Największym elementem strony z wiadomościami jest często zdjęcie główne. Traktuj je jako najważniejsze żądanie na stronie.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Nigdy nie ładuj leniwie obrazu LCP.
  • Umieść go w początkowym HTML, aby przeglądarka znalazła go przed uruchomieniem jakiegokolwiek skryptu.
  • Używaj fetchpriority="high" najwyżej dla jednego lub dwóch obrazów. Więcej już nie pomaga.
  • Używaj loading="lazy" tylko dla obrazów i ramek iframe poza pierwszym widocznym obszarem.
  • Ogranicz przekierowania i zadbaj, by strona dawała się buforować. Unikalne parametry w adresie URL mogą kierować żądania do Twojego serwera źródłowego zamiast do CDN.

Strona, która się nie rusza

  • Ustaw width i height na każdym obrazie i filmie oraz zachowaj height: auto w CSS.
  • Używaj tych samych proporcji dla każdego obrazu w srcset.
  • Zarezerwuj miejsce na reklamy, osadzenia i ramki iframe, zanim się załadują. Rozdział o reklamach omawia rozmiary slotów.
  • Nakładaj powiadomienia o plikach cookie i prośby o zapis na newsletter albo zarezerwuj dla nich miejsce, aby nie spychały artykułu w dół.
  • Używaj font-display: optional lub czcionki zastępczej dopasowanej do metryk Twojej czcionki webowej.
  • Animuj za pomocą transform. Animowanie top lub left powoduje przesunięcia układu.

Szybka reakcja

Całkowity czas interakcji składa się z trzech części: oczekiwania przed uruchomieniem kodu, samego kodu i następującego po nim renderowania. Każde zadanie dłuższe niż 50 milisekund jest długim zadaniem.

  • Rób jak najmniej w wywołaniach zwrotnych zdarzeń. Najpierw zaktualizuj ekran, resztę odłóż.
  • Dziel długą pracę za pomocą scheduler.yield() i wracaj do setTimeout w przeglądarkach, które go nie obsługują.
  • Utrzymuj małe DOM. Długie listy artykułów mogą używać content-visibility, aby renderować elementy poza ekranem później.
  • Pamiętaj, że każda ramka iframe ma własny wątek główny, więc sprawdź, z której ramki pochodziła wolna interakcja.

Długie strony i nieskończone przewijanie

Jeśli strona działu przewija się bez końca, nadaj każdemu fragmentowi własny stały adres URL z bezwzględnym numerem strony, takim jak ?page=12, i połącz te strony linkami po kolei. Aktualizuj adres za pomocą History API, gdy czytelnik się przesuwa. Google nie przewija ani nie klika, więc leniwie ładowana treść musi się ładować, gdy wchodzi do widocznego obszaru, bez żadnego działania.

Lista kontrolna

  • Sprawdź LCP, INP i CLS w Search Console, osobno dla telefonów i komputerów.
  • Otwórz najpopularniejszy szablon artykułu na telefonie i upewnij się, że nagłówek i data są na pierwszym ekranie.
  • Upewnij się, że pełny tekst artykułu jest w HTML wysyłanym przez serwer.
  • Porównaj wersję mobilną i komputerową pod kątem zgodnej treści, nagłówków, danych strukturalnych i tagów robots.
  • Usuń loading="lazy" z obrazu głównego i dodaj fetchpriority="high".
  • Dodaj width i height do każdego obrazu i filmu.
  • Zarezerwuj miejsce na każdą reklamę, osadzenie i baner.
  • Ustaw scroll-padding-top zgodnie z przypiętym nagłówkiem.
  • Przetestuj stronę przy szerokości 320 pikseli CSS.
  • Nadaj każdemu fragmentowi strony z nieskończonym przewijaniem własny adres URL.

Źródła