Hướng dẫn về Mobile Usability

Tóm tắt — Mobile usability là liệu của bạn trang là easy để sử dụng on phone: text Bạn có thể đọc không có pinching để zoom, buttons big đủ để tap không có hitting sai một, nội dung đó fits screen với không sideways scrolling, và không đầy đủ-screen popups blocking nội dung. Google được sử dụng để có báo cáo đó flagged những điều này các vấn đề cho bạn — nó retired nó trong December 2023 — nhưng điều nó checked vẫn quan trọng.

Điều gì mobile usability là

Mobile usability là chính xác Điều gì nó sounds như: Cách usable của bạn trang là Khi ai đó opens nó on phone. không Cách fast nó loads, không liệu Google indexes nó — chỉ liệu thực person on nhỏ touchscreen có thể đọc nó, tap nó, và nhận nơi họ’re going không có fighting layout.

có four điều đó làm hoặc break nó:

1. Readable text. nếu ai đó có để zoom trong để đọc của bạn paragraphs, text là cũng nhỏ.
2. Tappable buttons và links. Fingers không phải as precise as mouse. Targets đó là tiny hoặc crammed together nhận mis-tapped.
3. nội dung đó fits screen. Không horizontal scrolling — trang nên fit width của phone.
4. Không pop-ups blocking nội dung. đầy đủ-screen quảng cáo hoặc newsletter overlay đó covers trang moment bạn arrive là usability vấn đề (và có thể hurt bạn trong tìm kiếm).

Vì sao điều này quan trọng

phần lớn mọi người tìm kiếm on của họ phones, so trang đó frustrating on mobile là frustrating cho phần lớn của bạn khách truy cập. và Google hiện tại đọc mobile version của bạn trang để quyết định Cách bạn xếp hạng (đó tách biệt ý tưởng được gọi là mobile-đầu tiên lập chỉ mục — nhiều hơn on khác biệt trong thứ hai). So mobile experience không phải side concern anymore; nó main một.

”Wait, where did the Mobile Usability report go?” (bản dịch) «Chờ, nơi đã làm đó Mobile Usability báo cáo go?»

Nếu bạn được dùng để kiểm tra mobile các vấn đề trong Google Search Console, bạn là không imagining điều — đó báo cáo là đã biến mất. Google retired đó Search Console Mobile Usability báo cáo và của nó standalone Mobile-Friendly Kiểm thử tool on December 1, 2023. Đó không có nghĩa là mobile usability đã dừng mattering; Google đã nói đó opposite. Điều này chỉ có nghĩa là đó dedicated báo cáo went away vì tốt hơn tools (như Lighthouse, được xây dựng vào Chrome) làm đó job hiện tại. So nếu một tutorial tells bạn để “open the Mobile Usability report,” (bản dịch) «open đó Mobile Usability báo cáo,» đây là out of date.

Cách kiểm tra nó hiện tại

easiest option: open của bạn trang trong Chrome, right-nhấp → Inspect, và chạy Lighthouse (hoặc sử dụng PageSpeed Insights tại pagespeed.web.dev). Cả hai flag nhỏ fonts, cramped tap targets, và viewport các vấn đề. Bạn có thể cũng chỉ resize của bạn trình duyệt hoặc sử dụng Chrome phone-preview chế độ và look tại trang on nhỏ screen — lot của usability các vấn đề là obvious moment bạn làm.

không confuse nó với hai similar điều

• Mobile-đầu tiên lập chỉ mục — đó về mà version của bạn trang Google đọc ( mobile một). khác topic.
• Core Web Vitals — những điều đó đo lường speed và stability. Related, nhưng tách biệt đặt của numbers.

Muốn chính xác thresholds (Cách big là “big đủ” cho tap đích?), đầy đủ retirement story, và mỗi way để kiểm thử mobile usability hôm nay? Chuyển để Nâng cao tab.

Tóm tắt — Mobile usability = ease của sử dụng on touch device, driven by four các tín hiệu: legible text (Lighthouse truyền tại 12px on ≥60% của text; 16px là practical thân phản hồi-copy baseline), tap targets (Lighthouse fails dưới 48×48 CSS px hoặc Khi ≥25% của đích trong 48px của center overlaps neighbor; ~8px spacing là starting point — WCAG 2,2’s tách biệt 24×24 CSS px minimum là accessibility floor, không Google xếp hạng rule), nội dung sized để viewport (cần proper viewport meta tag, nhưng tag alone không bảo đảm responsive layout; không horizontal scroll), và không intrusive interstitials. Google retired Search Console Mobile Usability báo cáo, Mobile-Friendly Kiểm thử tool, và API on December 1, 2023 (confirmed Dec 4) — không vì các tín hiệu đã dừng mattering, nhưng vì Lighthouse matured và mobile-đầu tiên lập chỉ mục là effectively hoàn tất. kiểm tra nó hiện tại với Lighthouse, PageSpeed Insights, DevTools device emulation, Bing vẫn-trực tiếp kiểm thử, và các crawler. Distinct từ mobile-đầu tiên lập chỉ mục (mà version là được lập chỉ mục) và Cốt lõi Web Chỉ số quan trọng (loading/interactivity/stability). nó một trang-experience tín hiệu, không standalone heavily-weighted xếp hạng factor.

definition, precisely

Mobile usability là liệu trang là easy để sử dụng on mobile/touch device. nó người dùng-experience concept đó lives bên trong Google rộng hơn trang experience model, và nó xuất hiện xuống để four concrete các tín hiệu. rest của điều này section là mỗi một với của nó thực ngưỡng và citation — vì cụ thể numbers là chính xác Điều gì phần lớn competing các bài viết skip.

Tín hiệu 1: legible text

nếu mọi người có để pinch-zoom để đọc của bạn thân phản hồi copy, font là cũng nhỏ. Ở đó là hai numbers worth giữ straight, và conflating them là phổ biến mistake:

• Đó audit-truyền bar là 12px. Lighthouse Document dùng 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.” (bản dịch) «Aim để có một font size of ít nhất 12 px on ít nhất 60% of đó text on trang của bạn.» đó là đó ngưỡng để technically truyền đó automated kiểm tra.
• Đó practical baseline là ~16px. 12px passing an audit không có nghĩa là 12px là comfortable để đọc on một phone. 16px là đó generally được khuyến nghị floor cho mobile thân phản hồi text, với headings lớn hơn. không design để đó audit minimum.

So: 12px/60% là truyền line; 16px là Điều gì bạn nên thực ra aim cho on thân phản hồi copy.

Tín hiệu 2: tap targets

Fingers là blunt instruments. Lighthouse Tap targets không phải sized appropriately audit fails một đích on hai conditions: khi “the target is smaller than 48 px by 48 px,” (bản dịch) «đó đích là nhỏ hơn 48 px by 48 px,» và khi “at least 25% the target area within 48 px of the center of the target overlaps with another target.” (bản dịch) «ít nhất 25% đó đích area trong 48 px of đó center of đó đích overlaps với một sản phẩm khác đích.» Vài practical notes từ đó giống nhau doc:

• Targets sized 48×48 CSS px consistently truyền.
• Đó tappable area là điều gì được tính, không đó visual size — bạn có thể giữ một nhỏ icon và expand của nó hit area với padding để reach 48px. (Này kills đó myth đó mỗi button phải look 48px.)
• ~8px giữa targets là một reasonable starting point nhưng “is not always enough spacing to pass the audit especially for very small targets.” (bản dịch) «không phải luôn đủ spacing để truyền đó audit especially cho very nhỏ targets.»

Older Google hướng dẫn được diễn đạt điều này as khoảng 7mm targets với ~5mm spacing; tại typical mobile densities đó broadly consistent với 48px hình. Cite 48px/8px numbers as hiện tại; mm ones là lịch sử color.

có một second, tách biệt number worth knowing so bạn không conflate các tiêu chuẩn: WCAG 2,2’s Success Criterion 2.5.8 (Đích Size Minimum, Cấp độ AA) sets một 24×24 CSS px minimum (với spacing/inline/essential exceptions) — an accessibility-conformance rule từ đó W3C, không một Google Search xếp hạng ngưỡng. đây là nhỏ hơn Lighthouse 48px audit bar vì đó hai come từ khác nhau các thân phản hồi measuring khác nhau điều: đáp ứng Lighthouse 48px hình clears WCAG 24px floor cũng, nhưng không cite either number as một fixed, timeless “Google requires N px” (bản dịch) «Google requires N px» rule — Lighthouse là một Chrome tooling audit ngưỡng, WCAG là an accessibility conformance criterion.

Tín hiệu 3: nội dung sized để viewport

nội dung nên fit width của phone — không horizontal scrolling, không trang được kết xuất tại desktop width và shrunk để unreadable. mechanism là viewport meta tag. không có nó (hoặc misconfigured), mobile các trình duyệt assume desktop-width canvas và quy mô mọi thứ xuống. khắc phục là một line trong <head>:

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

Google hướng dẫn: “make sure your page content fits the width of the viewport, keeping in mind that not all mobile devices are the same width.” (bản dịch) «hãy bảo đảm trang của bạn nội dung fits đó width of đó viewport, giữ trong mind đó không all mobile devices là đó giống nhau width.» So không hard-code fixed pixel widths đó chỉ fit một phone.

tag là cần thiết nhưng chư đủ. nó aligns layout viewport với device width — nó không, by itself, làm fixed-width nội dung responsive. trang có thể ship đúng viewport meta tag và vẫn fail mobile usability nếu riêng lẻ elements ( wide bảng, unbreakable dài string, fixed-pixel container) là hard-coded wider hơn viewport. tag sets canvas; của bạn CSS vẫn có để thực ra fit nó.

Tín hiệu 4: không intrusive interstitials

MỘT đầy đủ-screen popup đó chặn nội dung của bạn đó moment một khách truy cập arrives từ tìm kiếm là cả hai một usability vấn đề và một tìm kiếm vấn đề. Google: “intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes,” (bản dịch) «intrusive interstitials và dialogs là trang elements đó obstruct người dùng’ view of đó nội dung, thường cho promotional purposes,» và điều này warns đó they “make it hard for Google and other search engines to understand your content, which may lead to poor search performance.” (bản dịch) «làm điều này hard cho Google và other các công cụ tìm kiếm để understand nội dung của bạn, mà có thể lead để poor tìm kiếm performance.» Đó hướng dẫn là blunt — “don’t obscure the entire page with interstitials” (bản dịch) «không obscure đó entire trang với interstitials» — và điều này points để nhỏ banners taking chỉ một fraction of đó screen as đó acceptable alternative. (Đó đầy đủ treatment of điều gì là penalized so với. exempt lives trong đó intrusive interstitials deep dive.)

Điều gì happened để Mobile Usability báo cáo?

Đây là nơi phần lớn các hướng dẫn — including some published trong cuối cùng năm — là flatly sai, so nó worth getting timeline chính xác right.

• April 2023 — announced. Trong Đó role of trang experience trong creating helpful nội dung, Google đã nói: “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.” (bản dịch) «Kể từ ngày 1 tháng 12 năm 2023, chúng tôi cũng sẽ ngừng cung cấp báo cáo “Khả năng sử dụng trên thiết bị di động” của Search Console, công cụ Kiểm tra tính thân thiện với thiết bị di động và API của công cụ này. Điều đó không có nghĩa là khả năng sử dụng trên thiết bị di động không còn quan trọng đối với thành công trên Google Tìm kiếm.» Của nó 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.” (bản dịch) «trong đó nearly ten năm since we initially launched này báo cáo, nhiều other robust các tài nguyên cho evaluating mobile usability có emerged, including Lighthouse từ Chrome.»
• December 1, 2023 — retired. Đó báo cáo, đó Mobile-Friendly Kiểm thử tool, và đó API all went away. Google đã xóa đó corresponding mentions từ của nó tìm kiếm help tài liệu đó giống nhau day. Đó old Mobile-Friendly Kiểm thử URL (search.google.com/test/mobile-friendly) hiện tại các chuyển hướng để Lighthouse tài liệu, và trying để open đó Mobile Usability báo cáo trong Search Console các chuyển hướng để đó GSC overview trang.
• December 4, 2023 — confirmed. Google Search Console account confirmed đó sunset publicly, thanking chủ trang web “for working with us on this journey.” (bản dịch) «cho hoạt động với us on này journey.»

Vì sao hiện tại? Hai forces. Đầu tiên, mobile-đầu tiên lập chỉ mục đã là effectively hoàn tất — Google announced “the trek to Mobile First Indexing is now complete” (bản dịch) «đó trek để Mobile Đầu tiên Lập chỉ mục là hiện tại hoàn tất» on October 31, 2023 — so một dedicated GSC báo cáo split out by device đã làm ít hơn hợp lý. Second, Lighthouse đã có matured vào một tốt hơn, hơn actionable checker hơn đó old standalone tool. Đó các tín hiệu đã không dừng mattering; đó dedicated báo cáo đã làm.

Đó practical correction: dừng telling mọi người để “check the Mobile Usability report” (bản dịch) «kiểm tra đó Mobile Usability báo cáo» hoặc “run the Mobile-Friendly Test.” (bản dịch) «chạy đó Mobile-Friendly Kiểm thử.» Cả hai là đã biến mất. (I’ll là candid — my own Ahrefs hướng dẫn, Mobile-Đầu tiên Lập chỉ mục Goes Mobile-Chỉ, cuối cùng đã cập nhật June 2024, vẫn points readers để những hai hiện tại-defunct destinations trong một spot; đó là chính xác đó kind of stale advice này bài viết tồn tại để cách sửa, và đây là on my list để correct ở đó cũng.)

Cách kiểm tra mobile usability hôm nay

Since có không single dedicated báo cáo anymore, bạn assemble nó từ một vài tools:

• Chrome Lighthouse (DevTools → Lighthouse) — đó trực tiếp replacement. Chạy đó legible-font, tap-đích, và viewport audits và cho bạn đó cụ thể failing elements.
• PageSpeed Insights (pagespeed.web.dev) — chạy Lighthouse trong đó cloud on đó mobile profile; good cho một nhanh shareable URL-cấp độ kiểm tra.
• Chrome DevTools device toolbar — emulate một phone, eyeball horizontal scroll, tiny text, và cramped controls tại real dimensions.
• Bing Mobile Friendliness Kiểm thử Tool — một genuine differentiator: Bing vẫn chạy một trực tiếp mobile-friendliness kiểm thử trong Bing Quản trị viên web Tools, mặc dù Google là đã biến mất. Bing 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.” (bản dịch) «Việc làm cho trang thân thiện với thiết bị di động giúp tăng mức độ tương tác của người dùng trên các thiết bị này. Nó cũng có thể giúp bạn xếp hạng tốt hơn trong kết quả tìm kiếm Bing trên thiết bị di động.» Handy cho một second opinion on kết xuất.
• Bên thứ ba các crawler — Ahrefs Site Audit và similar có thể crawl với một mobile người dùng-agent và surface mobile-cụ thể các vấn đề tại quy mô (connect đó PageSpeed Insights API cho đó mobile kiểm tra).
• MỘT real device. Không có gì beats opening đó trang on an thực tế phone.

Không single tool proves end-để-end usability on của nó own — combine automated audit (Lighthouse hoặc PageSpeed Insights), emulated visual kiểm tra (DevTools device toolbar), và ít nhất một thực-device truyền trước khi calling trang fixed.

Mobile usability so với. mobile-đầu tiên lập chỉ mục so với. Core Web Vitals

những điều này three nhận blurred together constantly. họ’re related nhưng distinct:

trang web có thể là fully on mobile-đầu tiên lập chỉ mục và vẫn có terrible mobile usability (tiny text, cramped buttons), và vice versa. mobile-đầu tiên lập chỉ mục deep dive và Core Web Vitals material cover những điều đó hai trong đầy đủ — điều này bài viết là strictly usability layer.

Làm mobile usability ảnh hưởng thứ hạng?

Có, nhưng giữ điều này trong proportion. Mobile usability contributes để trang experience, mà Google xử lý as một set of các tín hiệu trong rộng hơn xếp hạng các hệ thống — không một single heavily-weighted factor với một fixed score. Google own caution: chủ trang web “should not focus on only one or two aspects of page experience,” (bản dịch) «không nên focus on chỉ một hoặc hai aspects of trang experience,» và “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” (bản dịch) «Google Search luôn seeks để cho thấy đó hầu hết relevant nội dung, ngay cả khi đó trang experience là sub-par.» So cách sửa usability vì điều này helps real người dùng (và đây là đó right điều để làm) — không vì bạn expect một magic xếp hạng bump. đây là một contributor, không một kingmaker.

nơi điều này sits trong mobile-seo cluster

Đây là một piece của wider mobile SEO picture. Mobile-đầu tiên lập chỉ mục covers mà version Google đọc và nội dung-parity rule; mobile SEO checklist là chạy-nó-xuống audit; interstitials, AMP, và responsive-so với- dynamic-serving topics mỗi nhận của họ own treatment. điều này bài viết có chủ ý vẫn giữ trong của nó lane — usability các tín hiệu — so nó complements những điều đó thay vì repeating them.

AI summary

condensed take on Nâng cao version:

• Mobile usability = ease của sử dụng on touch device. Four các tín hiệu: legible text, tap targets, nội dung sized để viewport, không intrusive interstitials.
• Legible text: Lighthouse truyền tại 12px on ≥60% của text, nhưng 16px là practical thân phản hồi-copy baseline. không design để audit minimum.
• Tap targets: Lighthouse fails dưới 48×48 CSS px hoặc Khi ≥25% của area trong 48px của center overlaps neighbor. tappable area (qua padding) là Điều gì được tính, không visual size. ~8px spacing là starting point. WCAG 2,2’s Đích Size Minimum (SC 2.5.8, Cấp độ AA) sets tách biệt 24×24 CSS px accessibility floor — W3C conformance rule, không Google xếp hạng ngưỡng.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; nội dung phải fit phone width với không horizontal scroll. tag aligns layout viewport với device width nhưng không by itself làm fixed-width nội dung responsive — riêng lẻ elements có thể vẫn overflow.
• Intrusive interstitials: đầy đủ-trang overlays on entry obstruct nội dung và hurt tìm kiếm performance; nhỏ banners là acceptable alternative.
• ** báo cáo là đã biến mất.** Google retired Search Console Mobile Usability báo cáo, Mobile-Friendly Kiểm thử tool, và API on Dec 1, 2023 (confirmed Dec 4) — vì Lighthouse matured và mobile-đầu tiên lập chỉ mục là effectively hoàn tất (Oct 31, 2023), không vì các tín hiệu đã dừng mattering.
• kiểm tra nó hiện tại với Lighthouse, PageSpeed Insights, DevTools device emulation, Bing vẫn-trực tiếp Mobile Friendliness Kiểm thử, và thứ ba-party các crawler.
• Distinct từ mobile-đầu tiên lập chỉ mục (mà version là được lập chỉ mục) và Cốt lõi Web Chỉ số quan trọng (loading/interactivity/stability).
• Xếp hạng: một trang-experience tín hiệu trong rộng hơn các hệ thống, không standalone heavily-weighted factor. Google sẽ vẫn surface phần lớn relevant nội dung ngay cả với sub-par experience.

Tài liệu chính thức

Chính-nguồn tài liệu từ các công cụ tìm kiếm.

Google

• Đó role of trang experience trong creating helpful nội dung (Apr 2023) — đó announcement đó retired đó Mobile Usability báo cáo, Mobile-Friendly Kiểm thử tool, và API as of Dec 1, 2023, và pointed để Lighthouse.
• Understanding Google trang experience — nơi mobile usability sits as một tín hiệu, đó self-assessment các câu hỏi, và đó “don’t over-index on one signal” (bản dịch) «không over-chỉ mục on một tín hiệu» caution.
• Tránh intrusive interstitials và dialogs — đó interstitials definition và đó nhỏ-banner alternative.
• Mobile-đầu tiên lập chỉ mục có landed (Oct 2023) — đó “trek is now complete” (bản dịch) «trek là hiện tại hoàn tất» milestone đó đã làm một dedicated device-split báo cáo unnecessary.

Chrome / Lighthouse

• Document không sử dụng legible font sizes — 12px/60%-của-text audit ngưỡng.
• Tap targets không phải sized appropriately — 48×48 CSS px audit và overlap/spacing rules.

Bing / Microsoft

• Bing Mobile Friendliness Kiểm thử Tool — vẫn trực tiếp, unlike Google; kiểm thử bất kỳ URL cho mobile-friendliness trong Bing Quản trị viên web Tools.

W3C

• Đích Size (Minimum) — WCAG 2,2 Understanding SC 2.5.8 — 24×24 CSS px accessibility-conformance floor, distinct từ Lighthouse 48px audit ngưỡng.

Quotes từ nguồn

On—record statements từ Google, Chrome/Lighthouse, và Bing. mỗi link là deep link đó jumps để quoted passage nơi nguồn trang hỗ trợ nó.

Google — retiring báo cáo và tools (Apr 2023 announcement)

• “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.” (bản dịch) «Google cho biết từ ngày 1 tháng 12 năm 2023, họ sẽ dừng báo cáo “Khả năng sử dụng trên thiết bị di động” trong Search Console, công cụ Kiểm tra tính thân thiện với thiết bị di động và API tương ứng; tuy vậy, khả năng sử dụng trên thiết bị di động vẫn quan trọng đối với hiệu quả trên Google Tìm kiếm.» — Google Search Central Blog. Đọc đó 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.” (bản dịch) «Trong đó nearly ten năm since we initially launched này báo cáo, nhiều other robust các tài nguyên cho evaluating mobile usability có emerged, including Lighthouse từ Chrome.» Đọc đó post

Google — trang experience cách diễn đạt

• “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” (bản dịch) «Google Search luôn seeks để cho thấy đó hầu hết relevant nội dung, ngay cả khi đó trang experience là sub-par.» — Google Search Central tài liệu. Nhảy đến trích dẫn

Google — intrusive interstitials

• “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” (bản dịch) «Intrusive interstitials và dialogs là trang elements đó obstruct người dùng’ view of đó nội dung, thường cho promotional purposes.» — Google Search Central tài liệu. Nhảy đến trích dẫn

Google — mobile-đầu tiên lập chỉ mục hoàn tất (context)

• “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” (bản dịch) «chúng ta là delighted để announce đó trek để Mobile Đầu tiên Lập chỉ mục là hiện tại hoàn tất.» — Google Search Central Blog, Oct 31, 2023. Nhảy đến trích dẫn

Chrome / Lighthouse — thresholds

• “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” (bản dịch) «Aim để có một font size of ít nhất 12 px on ít nhất 60% of đó text on trang của bạn.» — Chrome cho Nhà phát triển / Lighthouse tài liệu. Nhảy đến trích dẫn
• Tap targets fail khi “48 px by 48 px” không met, và khi đích areas overlap trong 48px of center. Nhảy đến trích dẫn

Bing — vẫn-trực tiếp tool

• “Making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” (bản dịch) «Theo Bing, trang thân thiện với thiết bị di động có thể cải thiện tương tác của người dùng trên điện thoại và đồng thời hỗ trợ thứ hạng tốt hơn trong kết quả tìm kiếm Bing dành cho thiết bị di động.» — Bing Quản trị viên web Tools, Mobile Friendliness Kiểm thử. Open đó tool

báo cáo đã biến mất — Cách làm I kiểm tra mobile usability hiện tại?

Đó old “just open the Mobile Usability report” (bản dịch) «chỉ open đó Mobile Usability báo cáo» câu trả lời không lâu hơn hoạt động. Mà hiện tại tool bạn reach cho phụ thuộc vào điều gì bạn là trying để làm. Nhấp qua điều này.

Mobile usability checklist

truyền trên four các tín hiệu, chạy so với mobile kết xuất của trang (DevTools device chế độ hoặc thực phone):

• thân phản hồi text là legible không có zooming — ~16px baseline; tại minimum truyền Lighthouse 12px-on-≥60%-của-text audit.
• Tap targets là 48×48 CSS px (hoặc nhỏ hơn icon với padding expanding tappable area để 48px).
• Tap targets không phải crowded — liền kề targets không overlap trong 48px của center; ~8px+ spacing, nhiều hơn cho rất nhỏ ones.
• Viewport meta tag present — <meta name="viewport" content="width=device-width, initial-scale=1">.
• Không horizontal scrolling — nội dung fits viewport width; không fixed-pixel elements wider hơn screen.
• Không intrusive interstitial on entry từ tìm kiếm — đầy đủ-trang overlays là out; nhỏ banners và legally bắt buộc gates là fine.
• CSS/JS không blocked trong robots.txt — Googlebot cần them để render mobile trang và judge usability.
• Audited với Lighthouse / PageSpeed Insights — không retired Mobile-Friendly Kiểm thử hoặc GSC Mobile Usability báo cáo.
• Spot-checked on thực device — some các vấn đề chỉ hiển thị lên on thực tế hardware.

mental models

1. Four các tín hiệu, một câu hỏi. Legible text, tap targets, viewport fit, không intrusive interstitials. mỗi mobile usability vấn đề là một của những điều đó four — diagnose by asking mà một là failing trước khi bạn touch bất cứ điều gì.

2. audit bar không phải goal. Lighthouse truyền text tại 12px và tap targets tại chính xác 48px. những điều đó là floors, không targets. Aim cho 16px thân phản hồi copy và comfortably-spaced controls — passing audit và là pleasant để sử dụng không phải giống nhau điều.

3. Tappable area, không visual size. nhỏ icon có thể truyền tap-đích audit nếu padding expands của nó hit area để 48px. Design hit area, không chỉ pixels Bạn có thể see.

4. Đó three “not the same as.” (bản dịch) «không đó giống nhau as.»

• Mobile usability ≠ mobile-đầu tiên lập chỉ mục (đó là mà version là được lập chỉ mục).
• Mobile usability ≠ Core Web Vitals (đó là loading/interactivity/stability).
• Mobile usability ≠ một single nặng xếp hạng factor (đây là một trang-experience tín hiệu among several).

5. Đó tooling moved — cập nhật của bạn muscle memory. Đó dedicated GSC báo cáo và Mobile-Friendly Kiểm thử là đã biến mất (Dec 2023). Reach cho Lighthouse / PageSpeed Insights / DevTools / Bing kiểm thử / một crawler thay vì. Nếu một xử lý doc vẫn says “check the Mobile Usability report,” (bản dịch) «kiểm tra đó Mobile Usability báo cáo,» đó xử lý doc là đó bug.

Mobile usability — bảng tra nhanh

** four các tín hiệu + thresholds**

** viewport một-liner**

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

Dates để know

• Apr 2023 — Google announces retirement.
• Oct 31, 2023 — mobile-đầu tiên lập chỉ mục declared hoàn tất.
• Dec 1, 2023 — Mobile Usability báo cáo + Mobile-Friendly Kiểm thử tool + API retired.
• Dec 4, 2023 — sunset confirmed publicly.

nơi old tools went

• Mobile-Friendly Kiểm thử URL → các chuyển hướng để Lighthouse tài liệu.
• GSC Mobile Usability báo cáo → các chuyển hướng để GSC overview.

kiểm tra nó hiện tại: Lighthouse · PageSpeed Insights · DevTools device chế độ · Bing Mobile Friendliness Kiểm thử (vẫn trực tiếp) · thứ ba-party crawler · thực device.

không confuse với: mobile-đầu tiên lập chỉ mục (mà version là được lập chỉ mục) · Cốt lõi Web Chỉ số quan trọng (LCP/INP/CLS).

SOP: audit trang mobile usability (post-báo cáo era)

repeatable procedure hiện tại đó có không một-nhấp báo cáo. ~10 minutes theo trang.

1. Open đó trang trong Chrome và chạy Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → kiểm tra SEO và Performance → Analyze trang load (chọn đó Mobile device). Note bất kỳ legible font sizes hoặc tap targets failures — Lighthouse lists đó cụ thể elements.
2. Xác nhận đó viewport tag. Trong DevTools Elements, tìm kiếm đó <head> cho name="viewport". Điều này nên đọc width=device-width, initial-scale=1. Không tag, hoặc một fixed width=980-style giá trị, là đó cách sửa.
3. Emulate một phone và look. Toggle đó device toolbar (⌘⇧M / Ctrl+Shift+M), pick một nhỏ device (e.g. iPhone SE width). Scroll đó đầy đủ trang: bất kỳ horizontal scrollbar hoặc element bleeding off đó right edge là một viewport-fit failure.
4. Kiểm thử tap targets by hand. Trong device chế độ, try tapping liền kề links/buttons. Nếu bạn’d realistically mis-tap, họ là cũng nhỏ hoặc cũng close — đích 48px hit areas với ~8px+ spacing.
5. Kiểm tra cho entry interstitials. Load đó URL fresh (incognito) as nếu arriving từ tìm kiếm. MỘT đầy đủ-trang overlay trước khi bạn có thể đọc đó nội dung là một vấn đề; nhỏ banners và legal/consent gates là fine.
6. Cross-kiểm tra với Bing trực tiếp kiểm thử (tùy chọn second opinion) tại bing.com/quản trị viên web/tools/mobile-friendliness, và/hoặc PageSpeed Insights cho một shareable record.
7. Verify on một real device nếu đó trang matters. Emulation là close, không perfect.
8. File các cách sửa by tín hiệu — font size, tap sizing/spacing, viewport, interstitial — so devs nhận an actionable list, không “make it mobile-friendly.” (bản dịch) «làm điều này mobile-friendly.»

Mobile usability anti-patterns

recurring mistakes — several của them baked vào stale advice đó vẫn circulating.

• “Check the GSC Mobile Usability report.” (bản dịch) «Kiểm tra đó GSC Mobile Usability báo cáo.» Điều này đã là retired December 1, 2023 và đó URL hiện tại các chuyển hướng để đó overview trang. Nếu một doc hoặc tutorial says này, đây là out of date — including, until đây là corrected, một passage trong my own Ahrefs hướng dẫn.
• “Run Google’s Mobile-Friendly Test.” (bản dịch) «Chạy Google Mobile-Friendly Kiểm thử.» Cũng retired Dec 1, 2023; đó old URL các chuyển hướng để Lighthouse tài liệu. Multiple hiện tại-trực tiếp các bài viết vẫn mô tả này tool as hoạt động — điều này không.
• Designing để đó 12px audit floor. Passing Lighthouse font-size audit tại 12px không làm text comfortable để đọc on một phone. Dùng ~16px cho thân phản hồi copy.
• Measuring đó visible icon, không đó tappable area. MỘT 24px icon có thể vẫn truyền đó tap-đích audit nếu padding expands của nó hit area để 48px. Shrinking đó hit area để match đó graphic là đó mistake.
• Omitting hoặc misconfiguring đó viewport meta tag. Không tag (hoặc một fixed-width một) làm mobile các trình duyệt render tại desktop width và shrink mọi thứ. đây là một một-line cách sửa đó là easy để forget.
• Đầy đủ-screen interstitials on entry từ tìm kiếm. Newsletter/app-install/quảng cáo overlays đó block nội dung đó moment một khách truy cập arrives obstruct đó nội dung và có thể hurt tìm kiếm performance. Dùng một nhỏ banner thay vì.
• Blocking CSS/JS trong robots.txt. Nếu Googlebot không thể fetch đó assets, điều này không thể render đó mobile trang properly hoặc judge của nó usability.
• Treating mobile usability as một big standalone xếp hạng lever. đây là một trang-experience tín hiệu, và Google sẽ vẫn surface đó hầu hết relevant nội dung ngay cả với một sub-par experience. Cách sửa điều này cho người dùng, không cho an imagined xếp hạng jump.
• Conflating điều này với mobile-đầu tiên lập chỉ mục hoặc Core Web Vitals. Khác nhau các vấn đề, khác nhau các cách sửa, khác nhau tools. Giữ them tách biệt.

Nhanh kiểm tra Bạn có thể chạy yourself

bạn không cần retired tools để spot phổ biến failures. một vài practical snippets.

kiểm tra viewport meta tag từ 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).

tìm elements causing horizontal scroll (DevTools console)

Paste vào Chrome DevTools console trong khi emulating phone — nó lists bất kỳ element wider hơn viewport, thông thường nguyên nhân của 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));

tìm text nhỏ hơn 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 nhỏ tap targets

Save as bookmark, chạy on bất kỳ trang trong mobile emulation — nó outlines interactive elements whose được kết xuất box là dưới 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 được bao gồm) là Điều gì audit measures — element flagged ở đây có thể vẫn là fine nếu padding expands của nó hit area để 48px.

Tools cho kiểm tra mobile usability

• Chrome Lighthouse (DevTools → Lighthouse) — trực tiếp replacement cho retired Mobile-Friendly Kiểm thử. Chạy legible-font, tap-đích, và viewport audits và names failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse trong cloud on mobile profile; shareable URL-cấp độ kết quả.
• Chrome DevTools device toolbar — phone emulation cho eyeballing horizontal scroll, tiny text, và cramped controls tại thực dimensions.
• Bing Mobile Friendliness Kiểm thử Tool — vẫn trực tiếp trong Bing Quản trị viên web Tools; thực thứ hai opinion hiện tại đó Google dedicated tool là đã biến mất.
• Search Console URL Inspection — see được kết xuất mobile HTML và screenshot Googlebot smartphone saw (không grade usability, nhưng xác nhận Điều gì renders).
• Ahrefs trang web Audit — crawl với mobile người dùng-agent và surface mobile-cụ thể các vấn đề trên mỗi trang (connect PageSpeed Insights API cho mobile kiểm tra).
• ** thực phone** — ground truth emulation approximates.

Mobile trang looks fine trong emulation nhưng fails on phone

Symptom: Chrome device toolbar looks sạch, nhưng người dùng báo cáo clipped nội dung, overlapping controls, hoặc unusable dialogs. có khả năng nguyên nhân: emulation đã làm không reproduce phone trình duyệt chrome, safe-area insets, text scaling, hoặc operating-hệ thống keyboard. khắc phục: reproduce task on ít nhất một physical iOS device và một physical Android device. Kiểm thử orientation thay đổi, increased text size, và on-screen keyboard, không chỉ landing state.

trang scrolls sideways

Symptom: hẹp strip của nội dung extends past right edge. có khả năng nguyên nhân: fixed-width element, unbroken string, bảng, image, hoặc 100vw container là wider hơn layout viewport. khắc phục: sử dụng DevTools để inspect widest element, làm media responsive, cho phép dài text để wrap, và ưu tiên width: 100% bên trong padded containers. không hide evidence với overflow-x: hidden cho đến khi bạn có fixed nguồn.

Tap targets vẫn fail sau khi increasing icon

Symptom: Lighthouse vẫn flags control sau khi của nó visible icon đã nhận lớn hơn. có khả năng nguyên nhân: interactive box vẫn nhỏ hoặc neighboring links overlap của nó usable space. khắc phục: thêm padding để clickable element itself, space liền kề targets, và verify được kết xuất hit box trong DevTools. Enlarging chỉ SVG bên trong tiny anchor không enlarge anchor.

Text becomes unreadable sau khi load

Symptom: ban đầu HTML looks usable, sau đó client-side code replaces nó với tiny text hoặc desktop layout. có khả năng nguyên nhân: responsive styles hoặc components load muộn, fail tại breakpoint, hoặc differ giữa máy chủ và client kết xuất. khắc phục: kiểm thử được kết xuất state với JavaScript enabled, inspect failing breakpoint, và giữ mobile layout trong ban đầu cốt yếu CSS nơi practical.

Prove mobile-usability khắc phục worked

Tự kiểm tra: Mobile Usability

Five nhanh các câu hỏi on mobile usability. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My writing

• Mobile-đầu tiên lập chỉ mục Goes Mobile-chỉ (Ahrefs) — my deep dive on mobile-đầu tiên lập chỉ mục và mobile design thực hành tốt nhất. Fair warning: as của nó June 2024 cập nhật nó vẫn points readers để retired GSC Mobile Usability báo cáo và Mobile-Friendly Kiểm thử — stale advice điều này bài viết corrects, và điều gì đó I plan để khắc phục ở đó.
• Người mới bắt đầu Hướng dẫn để kỹ thuật SEO (Ahrefs) — nơi mobile usability fits bên trong rộng hơn kỹ thuật-SEO picture.
• Core Web Vitals: Điều gì họ là & Cách Improve Yours (Ahrefs) — performance side của mobile experience, mà mọi người routinely conflate với usability.

My speaking

• Cách Tìm kiếm Hoạt động (SlideShare) — my walkthrough of crawling, kết xuất, lập chỉ mục, và xếp hạng, including cách Googlebot crawl as một smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.” (bản dịch) «Này là my understanding of các hệ thống… không going để là 100% hoàn tất hoặc chính xác.»)

từ khoảng ngành

• role của trang experience trong creating helpful nội dung (Google) — April 2023 post đó announced báo cáo/tool retirement và pointed để Lighthouse.
• Google Officially Drops Mobile Usability Báo cáo, Mobile-Friendly Kiểm thử Tool và API (công cụ tìm kiếm Land, Barry Schwartz) — retirement, trong đơn giản language.
• Google Search Console’s Mobile Usability Báo cáo & Mobile-Friendly Các kiểm thử là Đã biến mất (công cụ tìm kiếm Roundtable, Barry Schwartz) — Dec 4, 2023 sunset xác nhận và nơi old các URL hiện tại chuyển hướng.
• Document không sử dụng legible font sizes (Chrome / Lighthouse) — 12px/60%-của-text audit ngưỡng.
• Tap targets không phải sized appropriately (Chrome / Lighthouse) — 48×48 CSS px audit và spacing rules.
• tránh intrusive interstitials và dialogs (Google) — interstitials definition và acceptable-banner alternative.
• Bing Mobile Friendliness Kiểm thử Tool (Bing Quản trị viên web Tools) — vẫn trực tiếp; kiểm thử bất kỳ URL cho mobile-friendliness.

Số liệu worth citing

• Legible-font audit truyền bar: 12px on ≥60% của text — Lighthouse được ghi lại ngưỡng. Note nó truyền floor, không được khuyến nghị ~16px thân phản hồi-copy baseline. Nguồn
• Tap-đích audit fails dưới 48×48 CSS px (và on ≥25% overlap trong 48px của center) — Lighthouse. tappable area, không visual size, là Điều gì measured. Nguồn
• WCAG 2,2 Đích Size Minimum (SC 2.5.8, Cấp độ AA): 24×24 CSS px — tách biệt accessibility-conformance rule từ W3C, không Google Search xếp hạng ngưỡng; nhỏ hơn Lighthouse 48px audit bar vì nó measures khác điều. Nguồn
• Retirement date: December 1, 2023 — Google retired Search Console Mobile Usability báo cáo, Mobile-Friendly Kiểm thử tool, và API on điều này date (confirmed publicly Dec 4, 2023). Nguồn
• Mobile-đầu tiên lập chỉ mục declared hoàn tất October 31, 2023 — milestone đó đã làm dedicated device-split usability báo cáo unnecessary. Nguồn

Nhật ký thay đổi