Atur Ukuran Konten Sesuai Dengan Area Pandang

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa konten laman tidak pas secara horizontal dalam ukuran area pandang yang ditentukan, sehingga memaksa pengguna untuk menggeser secara horizontal guna melihat semua konten.

Ikhtisar

Pada perangkat desktop dan seluler, pengguna terbiasa menggulir situs web secara vertikal dan bukan horizontal, dan memaksa pengguna untuk menggulir secara horizontal atau memperkecil untuk melihat semua laman menyebabkan pengalaman pengguna yang buruk.

Saat mengembangkan situs seluler dengan tag area pandang meta, sangatlah mudah untuk membuat konten laman yang tidak pas dengan tidak sengaja dalam area pandang yang ditentukan. Misalnya, gambar yang ditampilkan dalam lebar yang melebihi area pandang dapat menyebabkan area pandang bergulir secara horizontal. Anda perlu menyesuaikan konten ini agar pas dengan lebar area pandang, sehingga pengguna tidak perlu menggulir secara horizontal.

Saran

Karena dimensi layar bervariasi antar-perangkat (misalnya antara ponsel dan tablet, serta antar-ponsel yang berbeda sekalipun), sebaiknya konfigurasikan area pandang agar laman Anda dirender dengan benar pada banyak perangkat berbeda. Namun, karena lebar (dalam piksel CSS) area pandang dapat bervariasi, konten laman Anda sebaiknya tidak bergantung pada lebar area pandang tertentu agar dapat dirender dangan baik.

  • Hindari menyetel lebar CSS mutlak yang besar untuk elemen laman (misalnya div{width:360px;}), karena hal ini dapat menyebabkan elemen menjadi terlalu lebar bagi area pandang pada perangkat yang lebih kecil (misalnya perangkat dengan lebar 320 piksel CSS, seperti iPhone). Sebagai gantinya, pertimbangkan menggunakan nilai lebar relatif, misalnya width:100%. Selain itu, hati-hati saat menggunakan nilai pemosisian mutlak besar yang dapat menyebabkan elemen jatuh di luar area pandang pada layar kecil.
  • Jika diperlukan, kueri media CSS dapat digunakan untuk menerapkan gaya yang berbeda bagi layar kecil dan besar. Artikel HTML5 Rocks ini menyajikan saran lebih lanjut tentang cara menangani hal ini.
  • Untuk gambar, artikel ini memberikan ikhtisar yang baik tentang cara menyajikan gambar dengan ukuran yang responsif tanpa menimbulkan penyusunan ulang laman yang tidak diperlukan selama perenderan.