Dobierz odpowiedni rozmiar widocznego obszaru

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że zawartość strony nie mieści się poziomo w zdefiniowanym widocznym obszarze, co powoduje, że użytkownik musi przewijać stronę w poziomie, by zobaczyć całość.

Omówienie

Zarówno na komputerach, jak i urządzeniach przenośnych użytkownicy są przyzwyczajeni do przewijania stron – ale w pionie. Zmuszanie ich do przewijania w poziomie lub zmniejszania wielkości strony, by mogli zobaczyć całą stronę, nie robi dobrego wrażenia.

Opracowując witrynę na komórki z wykorzystaniem metatagu widocznego obszaru, łatwo przypadkowo utworzyć zawartość niemieszczącą się w określonym obszarze. Poziome przewijanie strony może na przykład wymusić grafika o szerokości większej niż widoczny obszar. Należy dostosować zawartość pod kątem rozmiaru widocznego obszaru, by użytkownik nie musiał przewijać strony w poziomie.

Zalecenia

Wymiary ekranów urządzeń bardzo się różnią między sobą (np. ekrany telefonów różnią się od ekranów tabletów, inne są także ekrany poszczególnych telefonów), powinieneś więc skonfigurować widoczny obszar, by strona poprawnie się renderowała na wielu urządzeniach. Ponieważ jednak szerokość (w pikselach CSS) widocznego obszaru może być różna, nie można ustalić pojedynczej szerokości, która sprawi, że strona będzie zawsze dobrze widoczna.

  • Unikaj ustawiania dużej bezwzględnej szerokości CSS dla elementów strony (np. div{width:360px;}), ponieważ takie elementy mogą być zbyt szerokie dla węższych urządzeń (w tym urządzeń o szerokości 320 pikseli CSS, takich jak iPhone). Zamiast tego spróbuj użyć wartości względnych (np. width:100%). Uważaj również na duże bezwzględne wartości pozycjonujące, które mogą sprawić, że niektóre elementy znajdą się poza widocznym obszarem na mniejszych ekranach.
  • W razie potrzeby możesz użyć zapytań o media CSS, by zastosować odmienne style dla małych i dużych ekranów. Artykuł w witrynie HTML5 Rocks zawiera kolejne zalecenia w tym temacie.
  • W przypadku grafiki polecamy ten artykuł, w którym znajdziesz wygodne zestawienie informacji o sposobach serwowania obrazów o wymiarach responsywnych bez konieczności przeformatowywania strony w trakcie renderowania.