Panduan Mobile Usability

TL;DR — Mobile usability adalah apakah Anda halaman adalah easy untuk gunakan pada sebuah phone: text Anda dapat baca tanpa pinching untuk zoom, buttons big cukup untuk tap tanpa hitting wrong satu, konten itu fits screen dengan Tidak sideways scrolling, dan Tidak penuh-screen popups blocking konten. Google digunakan untuk memiliki sebuah report itu flagged ini masalah untuk Anda — ini retired ini di December 2023 — tetapi hal ini diperiksa masih penting.

Apa mobile usability adalah

Mobile usability adalah persis apa ini sounds like: bagaimana usable Anda halaman adalah ketika seseorang opens ini pada sebuah phone. Tidak bagaimana fast ini memuat, tidak apakah Google indeks ini — hanya apakah sebuah nyata person pada sebuah kecil touchscreen dapat baca ini, tap ini, dan mendapatkan di mana mereka’re going tanpa fighting layout.

ada four hal itu membuat atau break ini:

1. Readable text. jika seseorang memiliki untuk zoom di untuk baca Anda paragraphs, text adalah too kecil.
2. Tappable buttons dan tautan. Fingers tidak sebagai precise sebagai sebuah mouse. Targets itu adalah tiny atau crammed together mendapatkan mis-tapped.
3. konten itu fits screen. Tidak horizontal scrolling — halaman seharusnya fit width dari phone.
4. Tidak pop-ups blocking konten. sebuah penuh-screen ad atau newsletter overlay itu covers halaman moment Anda arrive adalah sebuah usability masalah (dan dapat hurt Anda di penelusuran).

mengapa ini penting

sebagian besar orang penelusuran pada mereka phones, so sebuah halaman itu’s frustrating pada mobile adalah frustrating untuk sebagian besar dari Anda pengunjung. dan Google now membaca mobile versi dari Anda halaman untuk decide bagaimana Anda peringkat (itu’s sebuah terpisah idea called mobile-pertama pengindeksan — lebih pada perbedaan di sebuah kedua). So mobile experience tidak sebuah side concern anymore; ini adalah main satu.

”Tunggu, di mana melakukan itu Mobile Usability report go?” (terjemahan) “Tunggu, di mana melakukan Mobile Usability report go?”

«If you used to check mobile problems in Google Search Console, you’re not imagining things — that report is gone. Google retired the Search Console Mobile Usability report and its standalone Mobile-Friendly Test tool on December 1, 2023. That doesn’t mean mobile usability stopped mattering; Google said the opposite. It just means the dedicated report went away because better tools (like Lighthouse, built into Chrome) do the job now. So if a tutorial tells you to “open the Mobile Usability report,” it’s out of date.

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sebelas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

cara periksa ini now

easiest option: open Anda halaman di Chrome, right-click → Inspect, dan jalankan Lighthouse (atau gunakan PageSpeed Insights di pagespeed.web.dev). Keduanya flag kecil fonts, cramped tap targets, dan viewport masalah. Anda dapat juga hanya resize Anda browser atau gunakan Chrome’s phone-preview mode dan look di halaman pada sebuah kecil screen — sebuah lot dari usability masalah adalah obvious moment Anda melakukan.

jangan confuse ini dengan dua similar hal

• pengindeksan mobile-pertama — itu’s tentang yang versi dari Anda halaman Google membaca ( mobile satu). berbeda topic.
• Core Web Vitals — itu mengukur speed dan stability. Related, tetapi sebuah terpisah set dari angka.

ingin tepat thresholds (bagaimana big adalah “big cukup” (terjemahan) “big cukup” untuk sebuah tap target?), penuh retirement story, dan setiap cara untuk test mobile usability hari ini? Switch untuk Advanced tab.

TL;DR — Mobile usability = ease dari gunakan pada sebuah touch device, driven oleh four sinyal: legible text (Lighthouse melewati di 12px pada ≥60% dari text; 16px adalah practical body-copy baseline), tap targets (Lighthouse fails di bawah 48×48 CSS px atau ketika ≥25% dari target di dalam 48px dari center overlaps sebuah neighbor; ~8px spacing adalah sebuah starting poin — WCAG 2,2’s terpisah 24×24 CSS px minimum adalah sebuah accessibility floor, tidak sebuah Google peringkat aturan), konten sized untuk viewport (perlu sebuah proper viewport meta tag, tetapi tag alone tidak jaminan responsive layout; Tidak horizontal scroll), dan Tidak intrusive interstitials. Google retired Search Console Mobile Usability report, Mobile-Friendly Test alat, dan API pada December 1, 2023 (confirmed Dec 4) — tidak karena sinyal berhenti mattering, tetapi karena Lighthouse matured dan mobile-pertama pengindeksan adalah effectively menyelesaikan. periksa ini now dengan Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s masih-pengujian langsung, dan crawler. Distinct dari pengindeksan mobile-pertama (yang versi adalah terindeks) dan Core Web Vitals (memuat/interactivity/stability). ini adalah satu halaman-experience sinyal, tidak sebuah standalone heavily-weighted peringkat factor.

definition, precisely

Mobile usability adalah apakah sebuah halaman adalah easy untuk gunakan pada sebuah mobile/touch device. ini adalah sebuah pengguna-experience concept itu lives di dalam Google’s lebih luas pengalaman halaman model, dan ini muncul down untuk four concrete sinyal. rest dari ini bagian adalah setiap satu dengan -nya nyata threshold dan citation — karena spesifik angka adalah persis apa sebagian besar competing artikel skip.

Sinyal 1: legible text

jika orang memiliki untuk pinch-zoom untuk baca Anda body copy, font adalah too kecil. Di sana adalah dua angka worth mempertahankan straight, dan conflating them adalah sebuah umum mistake:

«- The audit-pass bar is 12px. Lighthouse’s Document uses legible font sizes audit says: “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” That’s the threshold to technically pass the automated check. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- The practical baseline is ~16px. 12px passing an audit doesn’t mean 12px is comfortable to read on a phone. 16px is the generally recommended floor for mobile body text, with headings larger. Don’t design to the audit’s minimum. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

So: 12px/60% adalah lulus line; 16px adalah apa Anda harus sebenarnya aim untuk pada body copy.

Sinyal 2: tap targets

«Fingers are blunt instruments. Lighthouse’s Tap targets are not sized appropriately audit fails a target on two conditions: when “the target is smaller than 48 px by 48 px,” and when “at least 25% the target area within 48 px of the center of the target overlaps with another target.” A few practical notes from the same doc: » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

• Targets sized 48×48 CSS px consistently lulus.
• tappable area adalah apa counts, tidak visual size — Anda dapat pertahankan sebuah kecil icon dan expand -nya hit area dengan padding untuk reach 48px. (ini kills myth itu setiap button harus look 48px.)
• ~8px antara targets adalah sebuah reasonable starting poin tetapi “adalah tidak selalu cukup spacing untuk lulus itu audit especially untuk very small targets.” (terjemahan) “adalah tidak selalu cukup spacing untuk lulus audit terutama untuk very kecil targets.”

Older Google guidance dibingkai ini sebagai roughly 7mm targets dengan ~5mm spacing; di typical mobile densities itu’s broadly consistent dengan 48px figure. Cite 48px/8px angka sebagai saat ini; mm ones adalah historical color.

ada sebuah kedua, terpisah angka worth knowing so Anda tidak conflate standards: WCAG 2,2’s Success Criterion 2.5.8 (Target Size Minimum, tingkat AA) sets sebuah 24×24 CSS px minimum (dengan spacing/inline/essential exceptions) — sebuah accessibility-conformance aturan dari W3C, tidak sebuah Google Search peringkat threshold. ini adalah lebih kecil daripada Lighthouse’s 48px audit bar karena dua come dari berbeda bodies measuring berbeda hal: memenuhi Lighthouse’s 48px figure clears WCAG’s 24px floor too, tetapi jangan cite either angka sebagai sebuah fixed, timeless “Google requires N px” (terjemahan) “Google memerlukan N px” aturan — Lighthouse’s adalah sebuah Chrome tooling audit threshold, WCAG’s adalah sebuah accessibility conformance criterion.

Sinyal 3: konten sized untuk viewport

konten seharusnya fit width dari phone — Tidak horizontal scrolling, Tidak halaman dirender di desktop width dan shrunk untuk unreadable. mechanism adalah viewport meta tag. Tanpa ini (atau misconfigured), mobile browser assume sebuah desktop-width canvas dan scale semuanya down. perbaiki adalah satu line di <head>:

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

Google’s guidance: “make sure your page content fits the width of the viewport, keeping in mind that not all mobile devices are the same width.” (terjemahan) “pastikan Anda halaman konten fits width dari viewport, mempertahankan di mind itu tidak semua mobile devices adalah yang sama width.” So jangan hard-code fixed pixel widths itu hanya fit satu phone.

tag adalah necessary tetapi tidak sufficient. ini aligns layout viewport dengan device width — ini tidak, oleh itself, membuat fixed-width konten responsive. sebuah halaman dapat ship sebuah correct viewport meta tag dan masih fail mobile usability jika individual elements (sebuah wide table, sebuah unbreakable panjang string, sebuah fixed-pixel container) adalah hard-coded wider daripada viewport. tag sets canvas; Anda CSS masih memiliki untuk sebenarnya fit ini.

Sinyal 4: Tidak intrusive interstitials

sebuah penuh-screen popup itu blocks Anda konten moment sebuah pengunjung arrives dari penelusuran adalah keduanya sebuah usability masalah dan sebuah penelusuran masalah. Google: “intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes,” (terjemahan) “intrusive interstitials dan dialogs adalah halaman elements itu obstruct pengguna’ view dari konten, biasanya untuk promotional purposes,” dan ini warns itu mereka “make it hard for Google and other search engines to understand your content, which may lead to poor search performance.” (terjemahan) “membuat ini hard untuk Google dan lainnya mesin pencari untuk memahami Anda konten, yang dapat lead untuk poor penelusuran performa.” guidance adalah blunt — “don’t obscure the entire page with interstitials” (terjemahan) “jangan obscure entire halaman dengan interstitials” — dan ini poin untuk kecil banners taking hanya sebuah fraction dari screen sebagai acceptable alternative. ( penuh treatment dari apa penalized vs. exempt lives di intrusive interstitials deep dive.)

Apa happened untuk Mobile Usability report?

ini adalah di mana sebagian besar guides — including beberapa published di terakhir tahun — adalah flatly wrong, so ini adalah worth getting timeline persis right.

«- April 2023 — announced. In The role of page experience in creating helpful content, Google said: “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” Its reasoning: “in the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.”

• December 1, 2023 — retired. The report, the Mobile-Friendly Test tool, and the API all went away. Google removed the corresponding mentions from its search help docs the same day. The old Mobile-Friendly Test URL (search.google.com/test/mobile-friendly) now redirects to Lighthouse documentation, and trying to open the Mobile Usability report in Search Console redirects to the GSC overview page.
• December 4, 2023 — confirmed. Google’s Search Console account confirmed the sunset publicly, thanking site owners “for working with us on this journey.”

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Mengapa now? Dua forces. pertama, pengindeksan mobile-pertama adalah effectively menyelesaikan — Google announced “the trek to Mobile First Indexing is now complete” (terjemahan) “ trek untuk Mobile pertama pengindeksan adalah now menyelesaikan” pada October 31, 2023 — so sebuah dedicated GSC report split out oleh device dibuat lebih sedikit sense. kedua, Lighthouse memiliki matured ke sebuah better, lebih actionable checker daripada old standalone alat. sinyal tidak berhenti mattering; dedicated report melakukan.

practical correction: berhenti telling orang untuk “check the Mobile Usability report” (terjemahan) “periksa Mobile Usability report” atau “run the Mobile-Friendly Test.” (terjemahan) “jalankan Mobile-Friendly Test.” Keduanya adalah hilang. (I’ll menjadi candid — my own Ahrefs guide, pengindeksan mobile-pertama Goes Mobile-hanya, terakhir diperbarui June 2024, masih poin readers untuk itu dua now-defunct destinations di satu spot; itu’s persis jenis dari stale advice ini artikel ada untuk perbaiki, dan ini adalah pada my list untuk correct di sana too.)

cara periksa mobile usability hari ini

Since ada Tidak single dedicated report anymore, Anda assemble ini dari sebuah sedikit alat:

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement. Berjalan legible-font, tap-target, dan viewport audits dan memberikan Anda spesifik failing elements.
• PageSpeed Insights (pagespeed.web.dev) — berjalan Lighthouse di cloud pada mobile profile; baik untuk sebuah quick shareable URL-tingkat periksa.
• Chrome DevTools device toolbar — emulate sebuah phone, eyeball horizontal scroll, tiny text, dan cramped controls di nyata dimensions.
• Bing’s Mobile Friendliness Test alat — sebuah genuine differentiator: Bing masih berjalan sebuah langsung mobile-friendliness test di Bing Webmaster alat, bahkan though Google’s adalah hilang. Bing’s own pitch: “making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” (terjemahan) “membuat halaman mobile-friendly increases pengguna engagement pada mobile devices. ini dapat juga help Anda peringkat better di Bing penelusuran hasil pada mobile devices.” Handy untuk sebuah kedua opinion pada rendering.
• ketiga-party crawler — Ahrefs situs Audit dan similar dapat crawl dengan sebuah mobile pengguna-agent dan surface mobile-spesifik issues di scale (connect PageSpeed Insights API untuk mobile memeriksa).
• sebuah nyata device. Tidak ada apa pun beats opening halaman pada sebuah sebenarnya phone.

Tidak single alat proves end-untuk-end usability pada -nya own — combine sebuah automated audit (Lighthouse atau PageSpeed Insights), sebuah emulated visual periksa (DevTools device toolbar), dan setidaknya satu nyata-device lulus sebelum calling sebuah halaman fixed.

Mobile usability vs. pengindeksan mobile-pertama vs. Core Web Vitals

ini three mendapatkan blurred together constantly. mereka’re related tetapi distinct:

sebuah situs dapat menjadi fully pada pengindeksan mobile-pertama dan masih memiliki terrible mobile usability (tiny text, cramped buttons), dan vice versa. pengindeksan mobile-pertama deep dive dan Core Web Vitals material cover itu dua di penuh — ini artikel adalah strictly usability layer.

melakukan mobile usability memengaruhi rankings?

Ya, tetapi pertahankan ini di proportion. Mobile usability contributes untuk pengalaman halaman, yang Google memperlakukan sebagai sebuah set dari sinyal di dalam lebih luas peringkat sistem — tidak sebuah single heavily-weighted factor dengan sebuah fixed score. Google’s own caution: situs owners “should not focus on only one or two aspects of page experience,” (terjemahan) “seharusnya tidak focus pada hanya satu atau dua aspects dari pengalaman halaman,” dan “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” (terjemahan) “Google Penelusuran selalu seeks untuk tampilkan paling relevant konten, bahkan jika pengalaman halaman adalah sub-par.” So perbaiki usability karena ini helps pengguna nyata (dan ini adalah right hal untuk melakukan) — tidak karena Anda expect sebuah magic peringkat bump. ini adalah sebuah contributor, tidak sebuah kingmaker.

Di mana ini sits di mobile-seo cluster

ini adalah satu piece dari wider mobile SEO picture. pengindeksan mobile-pertama covers yang versi Google membaca dan konten-parity aturan; mobile SEO checklist adalah jalankan-ini-down audit; interstitials, AMP, dan responsive-vs- dynamic-serving topics setiap mendapatkan mereka own treatment. ini artikel dengan sengaja tetap di -nya lane — usability sinyal — so ini complements itu alih-alih repeating them.

AI summary

sebuah condensed take pada Advanced versi:

«- Mobile usability = ease of use on a touch device. Four signals: legible text, tap targets, content sized to the viewport, no intrusive interstitials.

• Legible text: Lighthouse passes at 12px on ≥60% of text, but 16px is the practical body-copy baseline. Don’t design to the audit minimum.
• Tap targets: Lighthouse fails below 48×48 CSS px or when ≥25% of the area within 48px of center overlaps a neighbor. The tappable area (via padding) is what counts, not the visual size. ~8px spacing is a starting point. WCAG 2.2’s Target Size Minimum (SC 2.5.8, Level AA) sets a separate 24×24 CSS px accessibility floor — a W3C conformance rule, not a Google ranking threshold.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; content must fit the phone width with no horizontal scroll. The tag aligns the layout viewport with the device width but doesn’t by itself make fixed-width content responsive — individual elements can still overflow.
• Intrusive interstitials: full-page overlays on entry obstruct content and hurt search performance; small banners are the acceptable alternative.
• The report is gone. Google retired the Search Console Mobile Usability report, Mobile-Friendly Test tool, and API on Dec 1, 2023 (confirmed Dec 4) — because Lighthouse matured and mobile-first indexing was effectively complete (Oct 31, 2023), not because the signals stopped mattering. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Check it now with Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s still-live Mobile Friendliness Test, and third-party crawlers.
• Distinct from mobile-first indexing (which version is indexed) and Core Web Vitals (loading/interactivity/stability).
• Ranking: one page-experience signal within broader systems, not a standalone heavily-weighted factor. Google will still surface the most relevant content even with a sub-par experience. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh sembilan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Dokumentasi resmi

Utama-sumber documentation dari mesin pencari.

Google

• role dari pengalaman halaman di membuat helpful konten (Apr 2023) — announcement itu retired Mobile Usability report, Mobile-Friendly Test alat, dan API sebagai dari Dec 1, 2023, dan pointed untuk Lighthouse.
• Understanding Google pengalaman halaman — di mana mobile usability sits sebagai sebuah sinyal, self-assessment pertanyaan, dan “don’t over-index on one signal” (terjemahan) “jangan di atas-indeks pada satu sinyal” caution.
• hindari intrusive interstitials dan dialogs — interstitials definition dan kecil-banner alternative.
• pengindeksan mobile-pertama memiliki landed (Oct 2023) — “trek is now complete” (terjemahan) “trek adalah now menyelesaikan” milestone itu dibuat sebuah dedicated device-split report unnecessary.

Chrome / Lighthouse

• Document tidak gunakan legible font sizes — 12px/60%-dari-text audit threshold.
• Tap targets adalah tidak sized appropriately — 48×48 CSS px audit dan overlap/spacing aturan.

Bing / Microsoft

• Bing Mobile Friendliness Test alat — masih langsung, unlike Google’s; test apa pun URL untuk mobile-friendliness di Bing Webmaster alat.

W3C

• Target Size (Minimum) — WCAG 2,2 Understanding SC 2.5.8 — 24×24 CSS px accessibility-conformance floor, distinct dari Lighthouse’s 48px audit threshold.

Quotes dari sumber

pada—record statements dari Google, Chrome/Lighthouse, dan Bing. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage di mana sumber halaman mendukung ini.

Google — retiring report dan alat (Apr 2023 announcement)

• “Juga starting December 1, 2023, we’ll menjadi retiring Search Console’s ‘Mobile Usability’ report, itu Mobile-Friendly Test tool dan Mobile-Friendly Test API. Ini tidak berarti itu mobile usability tidak important untuk success dengan Google Search.” (terjemahan) “juga starting December 1, 2023, kami’ll menjadi retiring Search Console’s ‘Mobile Usability’ report, Mobile-Friendly Test alat dan Mobile-Friendly Test API. ini tidak berarti itu mobile usability tidak penting untuk success dengan Google Search.” — Google Search Central Blog. Baca post
• “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” (terjemahan) “di nearly ten tahun since kami initially launched ini report, banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” Baca post

Google — pengalaman halaman framing

• “Google Search selalu seeks untuk menunjukkan itu paling relevant konten, even jika itu halaman experience adalah sub-par.” (terjemahan) “Google Search selalu seeks untuk tampilkan paling relevant konten, bahkan jika pengalaman halaman adalah sub-par.” — Google Search Central docs. Jump untuk quote

Google — intrusive interstitials

• “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” (terjemahan) “Intrusive interstitials dan dialogs adalah halaman elements itu obstruct pengguna’ view dari konten, biasanya untuk promotional purposes.” — Google Search Central docs. Jump untuk quote

Google — pengindeksan mobile-pertama menyelesaikan (context)

• “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” (terjemahan) “kami’re delighted untuk announce itu trek untuk Mobile pertama pengindeksan adalah now menyelesaikan.” — Google Search Central Blog, Oct 31, 2023. Jump untuk quote

Chrome / Lighthouse — thresholds

«- “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” — Chrome for Developers / Lighthouse docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Tap targets fail when “48 px by 48 px” isn’t met, and when target areas overlap within 48px of center. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh satu, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Bing — masih-langsung alat

• “Making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” (terjemahan) “membuat halaman mobile-friendly increases pengguna engagement pada mobile devices. ini dapat juga help Anda peringkat better di Bing hasil pencarian pada mobile devices.” — Bing Webmaster alat, Mobile Friendliness Test. Open alat

report’s hilang — bagaimana melakukan I periksa mobile usability now?

old “just open the Mobile Usability report” (terjemahan) “hanya open Mobile Usability report” jawaban Tidak lebih lama berfungsi. Yang saat ini alat Anda reach untuk bergantung pada apa Anda’re trying untuk melakukan. Click melalui ini.

Mobile usability checklist

sebuah lulus di seluruh four sinyal, jalankan terhadap mobile rendering dari halaman (DevTools device mode atau sebuah nyata phone):

• Body text adalah legible tanpa zooming — ~16px baseline; di minimum melewati Lighthouse’s 12px-pada-≥60%-dari-text audit.
• Tap targets adalah 48×48 CSS px (atau sebuah lebih kecil icon dengan padding expanding tappable area untuk 48px).
• Tap targets tidak crowded — berdekatan targets jangan overlap di dalam 48px dari center; ~8px+ spacing, lebih untuk very kecil ones.
• Viewport meta tag present — <meta name="viewport" content="width=device-width, initial-scale=1">.
• Tidak horizontal scrolling — konten fits viewport width; Tidak fixed-pixel elements wider daripada screen.
• Tidak intrusive interstitial pada entry dari penelusuran — penuh-halaman overlays adalah out; kecil banners dan legally diperlukan gates adalah fine.
• CSS/JS tidak blocked di robots.txt — Googlebot perlu them untuk render mobile halaman dan judge usability.
• Audited dengan Lighthouse / PageSpeed Insights — tidak retired Mobile-Friendly Test atau GSC Mobile Usability report.
• Spot-diperiksa pada sebuah nyata device — beberapa issues hanya tampilkan up pada sebenarnya hardware.

mental models

1. Four sinyal, satu pertanyaan. Legible text, tap targets, viewport fit, Tidak intrusive interstitials. setiap mobile usability issue adalah satu dari itu four — diagnose oleh asking yang satu adalah failing sebelum Anda touch apa pun.

2. audit bar adalah tidak goal. Lighthouse melewati text di 12px dan tap targets di persis 48px. itu adalah floors, tidak targets. Aim untuk 16px body copy dan comfortably-spaced controls — passing audit dan menjadi pleasant untuk gunakan tidak yang sama hal.

3. Tappable area, tidak visual size. sebuah kecil icon dapat lulus tap-target audit jika padding expands -nya hit area untuk 48px. Design hit area, tidak hanya pixels Anda dapat see.

4. three “tidak itu sama sebagai.” (terjemahan) “tidak yang sama sebagai.”

• Mobile usability ≠ pengindeksan mobile-pertama (itu’s yang versi adalah terindeks).
• Mobile usability ≠ Core Web Vitals (itu’s memuat/interactivity/stability).
• Mobile usability ≠ sebuah single berat peringkat factor (ini adalah satu halaman-experience sinyal among several).

«5. The tooling moved — update your muscle memory. The dedicated GSC report and Mobile-Friendly Test are gone (Dec 2023). Reach for Lighthouse / PageSpeed Insights / DevTools / Bing’s test / a crawler instead. If a process doc still says “check the Mobile Usability report,” the process doc is the bug. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Mobile usability — cheat sheet

** four sinyal + thresholds**

** viewport satu-liner**

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

Dates untuk know

• Apr 2023 — Google announces retirement.
• Oct 31, 2023 — pengindeksan mobile-pertama declared menyelesaikan.
• Dec 1, 2023 — Mobile Usability report + Mobile-Friendly Test alat + API retired.
• Dec 4, 2023 — sunset confirmed publicly.

Di mana old alat went

• Mobile-Friendly Test URL → redirects untuk Lighthouse docs.
• GSC Mobile Usability report → redirects untuk GSC overview.

periksa ini now: Lighthouse · PageSpeed Insights · DevTools device mode · Bing Mobile Friendliness Test (masih langsung) · ketiga-party crawler · nyata device.

jangan confuse dengan: pengindeksan mobile-pertama (yang versi adalah terindeks) · Core Web Vitals (LCP/INP/CLS).

SOP: audit sebuah halaman’s mobile usability (post-report era)

sebuah repeatable procedure now itu ada Tidak satu-click report. ~10 minutes per halaman.

1. Open halaman di Chrome dan jalankan Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → periksa SEO dan performa → Analyze pemuatan halaman (choose Mobile device). Note apa pun legible font sizes atau tap targets failures — Lighthouse lists spesifik elements.
2. Konfirmasi viewport tag. di DevTools Elements, penelusuran <head> untuk name="viewport". ini seharusnya baca width=device-width, initial-scale=1. Tidak tag, atau sebuah fixed width=980-style nilai, adalah perbaiki.
3. Emulate sebuah phone dan look. Toggle device toolbar (⌘⇧M / Ctrl+Shift+M), pick sebuah kecil device (e.g. iPhone SE width). Scroll penuh halaman: apa pun horizontal scrollbar atau element bleeding off right edge adalah sebuah viewport-fit failure.
4. Test tap targets oleh hand. di device mode, try tapping berdekatan tautan/buttons. jika Anda’d realistically mis-tap, mereka’re too kecil atau too close — target 48px hit areas dengan ~8px+ spacing.
5. periksa untuk entry interstitials. muat URL fresh (incognito) sebagai jika arriving dari penelusuran. sebuah penuh-halaman overlay sebelum Anda dapat baca konten adalah sebuah masalah; kecil banners dan legal/consent gates adalah fine.
6. Cross-periksa dengan Bing’s pengujian langsung (opsional kedua opinion) di bing.com/webmaster/alat/mobile-friendliness, dan/atau PageSpeed Insights untuk sebuah shareable record.
7. Verify pada sebuah nyata device jika halaman penting. Emulation adalah close, tidak perfect.
8. File memperbaiki oleh sinyal — font size, tap sizing/spacing, viewport, interstitial — so devs mendapatkan sebuah actionable list, tidak “membuat it mobile-friendly.” (terjemahan) “membuat ini mobile-friendly.”

Mobile usability anti-patterns

recurring mistakes — several dari them baked ke stale advice itu’s masih circulating.

• “Check the GSC Mobile Usability report.” (terjemahan) “periksa GSC Mobile Usability report.” ini adalah retired December 1, 2023 dan URL now redirects untuk overview halaman. jika sebuah doc atau tutorial says ini, ini adalah out dari date — including, until ini adalah corrected, sebuah passage di my own Ahrefs guide.
• “Run Google’s Mobile-Friendly Test.” (terjemahan) “Jalankan Google’s Mobile-Friendly Test.” juga retired Dec 1, 2023; old URL redirects untuk Lighthouse docs. Multiple saat ini-langsung artikel masih deskripsikan ini alat sebagai berfungsi — ini tidak.
• Designing untuk 12px audit floor. Passing Lighthouse’s font-size audit di 12px tidak membuat text comfortable untuk baca pada sebuah phone. gunakan ~16px untuk body copy.
• Measuring terlihat icon, tidak tappable area. sebuah 24px icon dapat masih lulus tap-target audit jika padding expands -nya hit area untuk 48px. Shrinking hit area untuk match graphic adalah mistake.
• Omitting atau misconfiguring viewport meta tag. Tidak tag (atau sebuah fixed-width satu) membuat mobile browser render di desktop width dan shrink semuanya. ini adalah sebuah satu-line perbaiki itu’s easy untuk forget.
• Penuh-screen interstitials pada entry dari penelusuran. Newsletter/app-install/ad overlays itu block konten moment sebuah pengunjung arrives obstruct konten dan dapat hurt penelusuran performa. gunakan kecil banner alih-alih.
• Blocking CSS/JS di robots.txt. jika Googlebot dapat’t fetch assets, ini dapat’t render mobile halaman properly atau judge -nya usability.
• Treating mobile usability sebagai sebuah big standalone peringkat lever. ini adalah satu halaman-experience sinyal, dan Google akan masih surface paling relevant konten bahkan dengan sebuah sub-par experience. Perbaiki ini untuk pengguna, tidak untuk sebuah imagined peringkat jump.
• Conflating ini dengan pengindeksan mobile-pertama atau Core Web Vitals. berbeda masalah, berbeda memperbaiki, berbeda alat. pertahankan them terpisah.

Quick memeriksa Anda dapat jalankan yourself

Anda tidak perlu retired alat untuk spot umum failures. sebuah sedikit practical snippets.

periksa viewport meta tag dari command line

# Does the page ship a proper viewport meta tag?
curl -s https://example.com/ | grep -i 'name="viewport"'
# Expected: <meta name="viewport" content="width=device-width, initial-scale=1">
# No output = no viewport tag (a mobile-usability failure).

temukan elements causing horizontal scroll (DevTools console)

Paste ke Chrome DevTools console sementara emulating sebuah phone — ini lists apa pun element wider daripada viewport, biasa penyebab dari horizontal scrolling:

// Flag elements wider than the viewport
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > vw + 1)
  .forEach(el => console.log(Math.round(el.getBoundingClientRect().right), el));

temukan text lebih kecil daripada 16px (DevTools console)

// List text-bearing elements rendered below the 16px baseline
[...document.querySelectorAll('body *')]
  .filter(el => el.childNodes.length && [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()))
  .map(el => ({ px: parseFloat(getComputedStyle(el).fontSize), el }))
  .filter(x => x.px < 16)
  .forEach(x => console.log(x.px + 'px', x.el));

Bookmarklet: highlight kecil tap targets

Save sebagai sebuah bookmark, jalankan pada apa pun halaman di mobile emulation — ini outlines interactive elements milik siapa dirender box adalah di bawah 48×48 CSS px:

javascript:(()=>{document.querySelectorAll('a,button,input,select,textarea,[role=button]').forEach(el=>{const r=el.getBoundingClientRect();if(r.width<48||r.height<48){el.style.outline='2px solid red';}});})();

Remember caveat: tappable area (padding disertakan) adalah apa audit measures — sebuah element flagged di sini dapat masih menjadi fine jika padding expands -nya hit area untuk 48px.

alat untuk memeriksa mobile usability

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement untuk retired Mobile-Friendly Test. Berjalan legible-font, tap-target, dan viewport audits dan names failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse di cloud pada mobile profile; shareable URL-tingkat hasil.
• Chrome DevTools device toolbar — phone emulation untuk eyeballing horizontal scroll, tiny text, dan cramped controls di nyata dimensions.
• Bing Mobile Friendliness Test alat — masih langsung di Bing Webmaster alat; sebuah nyata kedua opinion now itu Google’s dedicated alat adalah hilang.
• Search Console pemeriksaan URL — see dirender mobile HTML dan screenshot Googlebot smartphone saw (tidak grade usability, tetapi mengonfirmasi apa renders).
• Ahrefs situs Audit — crawl dengan sebuah mobile pengguna-agent dan surface mobile-spesifik issues di seluruh setiap halaman (connect PageSpeed Insights API untuk mobile memeriksa).
• sebuah nyata phone — ground truth emulation approximates.

Mobile halaman looks fine di emulation tetapi fails pada sebuah phone

Symptom: Chrome’s device toolbar looks bersih, tetapi pengguna report clipped konten, overlapping controls, atau unusable dialogs. mungkin penyebab: emulation melakukan tidak reproduce phone’s browser chrome, safe-area insets, text scaling, atau operating-sistem keyboard. Perbaiki: reproduce task pada setidaknya satu physical iOS device dan satu physical Android device. Test orientation perubahan, increased text size, dan pada-screen keyboard, tidak hanya landing state.

halaman scrolls sideways

Symptom: sebuah sempit strip dari konten extends past right edge. mungkin penyebab: sebuah fixed-width element, unbroken string, table, image, atau 100vw container adalah wider daripada layout viewport. Perbaiki: gunakan DevTools untuk inspect widest element, membuat media responsive, izinkan panjang text untuk wrap, dan prefer width: 100% di dalam padded containers. melakukan tidak hide evidence dengan overflow-x: hidden until Anda memiliki fixed sumber.

Tap targets masih fail setelah increasing icon

Symptom: Lighthouse masih flags sebuah control setelah -nya terlihat icon mendapat lebih besar. mungkin penyebab: interactive box tetap kecil atau neighboring tautan overlap -nya usable space. Perbaiki: tambahkan padding untuk clickable element itself, space berdekatan targets, dan verify dirender hit box di DevTools. Enlarging hanya sebuah SVG di dalam sebuah tiny anchor melakukan tidak enlarge anchor.

Text becomes unreadable setelah muat

Symptom: awal HTML looks usable, lalu client-side code replaces ini dengan tiny text atau sebuah desktop layout. mungkin penyebab: responsive styles atau components muat late, fail di sebuah breakpoint, atau differ antara server dan client rendering. Perbaiki: test dirender state dengan JavaScript enabled, inspect failing breakpoint, dan pertahankan mobile layout di awal critical CSS di mana practical.

Prove sebuah mobile-usability perbaiki worked

Uji pemahaman Anda: Mobile Usability

Five quick pertanyaan pada mobile usability. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My writing

• pengindeksan mobile-pertama Goes Mobile-hanya (Ahrefs) — my deep dive pada pengindeksan mobile-pertama dan mobile design best practices. Fair warning: sebagai dari -nya June 2024 perbarui ini masih poin readers untuk retired GSC Mobile Usability report dan Mobile-Friendly Test — stale advice ini artikel corrects, dan sesuatu I plan untuk perbaiki di sana.
• Beginner’s Guide untuk SEO teknis (Ahrefs) — di mana mobile usability fits di dalam lebih luas teknis-SEO picture.
• Core Web Vitals: Apa mereka adalah & cara meningkatkan Yours (Ahrefs) — performa side dari mobile experience, yang orang routinely conflate dengan usability.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, including bagaimana Googlebot melakukan crawl sebagai sebuah smartphone. (Standing disclaimer: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

«From around the industry

• The role of page experience in creating helpful content (Google) — the April 2023 post that announced the report/tool retirement and pointed to Lighthouse.
• Google Officially Drops Mobile Usability Report, Mobile-Friendly Test Tool and API (Search Engine Land, Barry Schwartz) — the retirement, in plain language.
• Google Search Console’s Mobile Usability Report & Mobile-Friendly Tests Are Gone (Search Engine Roundtable, Barry Schwartz) — the Dec 4, 2023 sunset confirmation and where the old URLs now redirect.
• Document doesn’t use legible font sizes (Chrome / Lighthouse) — the 12px/60%-of-text audit threshold.
• Tap targets are not sized appropriately (Chrome / Lighthouse) — the 48×48 CSS px audit and spacing rules.
• Avoid intrusive interstitials and dialogs (Google) — the interstitials definition and the acceptable-banner alternative. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus enam puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Bing Mobile Friendliness Test Tool (Bing Webmaster Tools) — still live; test any URL for mobile-friendliness. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus enam puluh tujuh, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Stats worth citing

• Legible-font audit lulus bar: 12px pada ≥60% dari text — Lighthouse’s terdokumentasi threshold. Note ini adalah sebuah lulus floor, tidak recommended ~16px body-copy baseline. Sumber
• Tap-target audit fails di bawah 48×48 CSS px (dan pada ≥25% overlap di dalam 48px dari center) — Lighthouse. tappable area, tidak visual size, adalah apa diukur. Sumber
• WCAG 2,2 Target Size Minimum (SC 2.5.8, tingkat AA): 24×24 CSS px — sebuah terpisah accessibility-conformance aturan dari W3C, tidak sebuah Google Search peringkat threshold; lebih kecil daripada Lighthouse’s 48px audit bar karena ini measures sebuah berbeda hal. Sumber
• Retirement date: December 1, 2023 — Google retired Search Console Mobile Usability report, Mobile-Friendly Test alat, dan API pada ini date (confirmed publicly Dec 4, 2023). Sumber
• pengindeksan mobile-pertama declared menyelesaikan October 31, 2023 — milestone itu dibuat sebuah dedicated device-split usability report unnecessary. Sumber

Log perubahan