Struktur halaman di ponsel dan desktop

Terakhir ditinjau November 2026

Pembaca cepat memutuskan apakah sebuah halaman berita layak dipertahankan. Judul harus muncul cepat, halaman harus diam di tempatnya, dan setiap ketukan harus mendapat respons. Google juga mengindeks versi seluler halaman Anda, jadi tata letak di ponsel adalah versi yang menentukan bagi Pencarian juga.

Angka yang perlu dituju

Core Web Vitals dari Google memberi Anda tiga ukuran dan target yang jelas untuk masing-masing.

Ukur persentil ke-75 dari pemuatan halaman, dengan seluler dan desktop dihitung terpisah. Sebuah halaman lulus jika ketiga metrik memenuhi target pada persentil itu.

Gunakan data lapangan dari kunjungan nyata: laporan Core Web Vitals di Search Console, PageSpeed Insights, atau Chrome User Experience Report. Lighthouse berguna di laboratorium, tetapi tidak bisa mengukur INP dan melaporkan Total Blocking Time sebagai gantinya.

Google menyatakan tidak ada satu sinyal pengalaman halaman tunggal. Google memang mengatakan Core Web Vitals dipakai oleh sistem peringkatnya, dan aspek pengalaman halaman lainnya tidak secara langsung membantu peringkat situs, meskipun tetap bisa membuat situs lebih nyaman dipakai.

Satu halaman untuk kedua layar

Google merekomendasikan desain responsif sebagai pola yang paling mudah diterapkan dan dirawat. HTML yang sama melayani semua perangkat, sehingga konten dan metadata selalu sama tanpa kerja tambahan. Jika Anda menjalankan halaman seluler terpisah, samakan hal berikut dengan desktop:

• Konten utama
• Judul bagian
• Data terstruktur
• Tag meta robots (noindex yang terselip bisa membuat halaman seluler keluar dari indeks)

Mulailah dengan tag viewport, lalu periksa bahwa halaman menyusun ulang pada lebar 320 piksel CSS tanpa gulir ke samping.

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

Di ponsel

• Tempatkan judul, nama penulis, dan tanggal yang terlihat lebih dulu, lalu gambar utama atau paragraf pembuka.
• Biarkan teks artikel tetap ada di HTML. Tombol "lanjut membaca" yang mengambil sisanya saat diketuk bisa menyembunyikan teks itu dari Google, yang tidak mengeklik, menggeser, atau mengetik.
• Buat target sentuh minimal 24 kali 24 piksel CSS, batas minimum WCAG 2.2 AA. Untuk menu dan tombol tutup, usahakan 44 kali 44, tingkat AAA.
• Jaga header yang menempel tetap pendek, dan atur scroll-padding-top sesuai tingginya agar tautan yang difokuskan tidak pernah tertutup.

Di desktop

• Batasi teks isi hingga 80 karakter per baris atau kurang, atau 40 untuk bahasa Tionghoa, Jepang, dan Korea. Ini pedoman WCAG AAA, dan membantu semua pembaca.
• Atur jarak baris minimal 1.5 di dalam paragraf.
• Taruh konten pendukung di bilah samping yang tidak menggeser artikel saat dimuat.

Pemuatan lebih cepat

Elemen terbesar di halaman berita sering kali gambar utama. Perlakukan sebagai permintaan terpenting di halaman.

<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">

• Jangan pernah memuat gambar LCP secara lazy.
• Letakkan di HTML awal, agar browser menemukannya sebelum skrip apa pun berjalan.
• Pakai fetchpriority="high" pada satu atau dua gambar saja. Lebih dari itu tidak lagi membantu.
• Pakai loading="lazy" hanya untuk gambar dan iframe di luar viewport pertama.
• Kurangi pengalihan, dan jaga agar halaman bisa di-cache. Parameter URL yang unik bisa mengirim permintaan kembali ke server asal Anda, bukan ke CDN.

Halaman yang diam di tempatnya

• Atur width dan height pada setiap gambar dan video, dan pertahankan height: auto di CSS.
• Pakai rasio aspek yang sama untuk setiap gambar dalam srcset.
• Sediakan ruang untuk iklan, embed, dan iframe sebelum dimuat. Bab tentang iklan membahas ukuran slot.
• Tumpuk pemberitahuan cookie dan ajakan mendaftar di atas halaman, atau sediakan ruang untuknya, agar artikel tidak terdorong ke bawah.
• Pakai font-display: optional, atau font cadangan yang disesuaikan dengan metrik font web Anda.
• Animasikan dengan transform. Menganimasikan top atau left menyebabkan pergeseran tata letak.

Respons cepat

Total waktu interaksi terdiri dari tiga bagian: waktu tunggu sebelum kode Anda berjalan, kode Anda, dan render yang menyusul. Setiap tugas yang lebih dari 50 milidetik adalah tugas panjang.

• Lakukan sesedikit mungkin di callback event. Perbarui layar lebih dulu, lalu tunda sisanya.
• Pecah pekerjaan panjang dengan scheduler.yield(), dan gunakan setTimeout di browser yang belum mendukungnya.
• Jaga DOM tetap kecil. Daftar artikel yang panjang bisa memakai content-visibility untuk merender item di luar layar belakangan.
• Ingat bahwa setiap iframe punya thread utamanya sendiri, jadi periksa frame mana asal interaksi yang lambat.

Halaman panjang dan gulir tanpa akhir

Jika halaman bagian terus bergulir tanpa akhir, beri setiap potongan URL permanennya sendiri dengan nomor halaman absolut seperti ?page=12, dan tautkan halaman-halaman itu secara berurutan. Perbarui alamat dengan History API saat pembaca bergerak. Google tidak menggulir atau mengeklik, jadi konten yang dimuat secara lazy harus dimuat begitu masuk ke viewport, tanpa tindakan apa pun.

Daftar periksa

• Periksa LCP, INP, dan CLS di Search Console, untuk seluler dan desktop secara terpisah.
• Buka templat artikel tersibuk Anda di ponsel dan pastikan judul dan tanggal ada di layar pertama.
• Pastikan teks artikel lengkap ada di HTML yang dikirim server.
• Bandingkan seluler dan desktop untuk konten, judul bagian, data terstruktur, dan tag robots yang sama.
• Hapus loading="lazy" dari gambar utama dan tambahkan fetchpriority="high".
• Tambahkan width dan height ke setiap gambar dan video.
• Sediakan ruang untuk setiap iklan, embed, dan banner.
• Atur scroll-padding-top sesuai header menempel Anda.
• Uji halaman pada lebar 320 piksel CSS.
• Beri setiap potongan halaman gulir tanpa akhir URL-nya sendiri.

Sumber

• Understanding Google Page Experience, Google Search Central
• Understanding Core Web Vitals and Google search results, Google Search Central
• Mobile-first Indexing Best Practices, Google Search Central
• Fix Lazy-Loaded Website Content, Google Search Central
• Web Vitals, web.dev
• Optimize Largest Contentful Paint, web.dev
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Optimize long tasks, web.dev
• Browser-level image lazy loading for the web, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C
• Understanding Target Size (Enhanced), W3C WAI
• Understanding Visual Presentation, W3C WAI