Chuyển đến nội dung
Mera News

Cẩm nang nhà xuất bản, chương 2

Cấu trúc trang trên di động và máy tính

Xem lại lần cuối vào tháng 11 năm 2026

Người đọc quyết định rất nhanh xem một trang tin có đáng ở lại hay không. Tiêu đề nên hiện ra nhanh, trang nên đứng yên, và mỗi lần chạm đều phải có phản hồi. Google cũng lập chỉ mục phiên bản di động của các trang, nên bố cục trên điện thoại cũng là phiên bản được tính cho Tìm kiếm.

Các con số nên hướng tới

Core Web Vitals của Google đưa ra ba thước đo, mỗi thước đo có một mục tiêu rõ ràng.

Chỉ sốĐo lườngĐạt chuẩn
Largest Contentful Paint (LCP)Tải trang2,5 giây trở xuống
Interaction to Next Paint (INP)Phản hồi với thao tác nhập200 mili giây trở xuống
Cumulative Layout Shift (CLS)Độ ổn định hình ảnh0,1 trở xuống

Hãy đo ở phân vị thứ 75 của các lượt tải trang, tính riêng di động và máy tính. Một trang đạt chuẩn khi cả ba chỉ số đều đạt mục tiêu ở phân vị đó.

Hãy dùng dữ liệu thực tế từ các lượt truy cập thật: báo cáo Core Web Vitals trong Search Console, PageSpeed Insights hoặc Chrome User Experience Report. Lighthouse hữu ích trong môi trường thử nghiệm, nhưng không đo được INP và báo cáo Total Blocking Time thay thế.

Google cho biết không có một tín hiệu trải nghiệm trang duy nhất. Google cũng cho biết các hệ thống xếp hạng có dùng Core Web Vitals, còn các khía cạnh khác của trải nghiệm trang không trực tiếp giúp trang web xếp hạng cao hơn, dù vẫn có thể khiến trang dễ dùng hơn.

Một trang cho cả hai màn hình

Google khuyên dùng thiết kế đáp ứng (responsive) vì đây là mẫu dễ triển khai và bảo trì nhất. Cùng một HTML phục vụ mọi thiết bị, nên nội dung và siêu dữ liệu khớp nhau mà không cần làm thêm. Nếu bạn chạy các trang di động riêng, hãy giữ những phần sau giống hệt bản máy tính:

  • Nội dung chính
  • Các tiêu đề
  • Dữ liệu có cấu trúc
  • Thẻ meta robots (một thẻ noindex lạc chỗ có thể khiến trang di động bị loại khỏi chỉ mục)

Hãy bắt đầu bằng thẻ viewport, rồi kiểm tra xem trang có tự sắp xếp lại ở chiều rộng 320 pixel CSS mà không phải cuộn ngang hay không.

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

Trên di động

  • Đặt tiêu đề, tên tác giả và ngày đăng hiển thị lên đầu, rồi đến ảnh chính hoặc đoạn mở đầu.
  • Giữ nội dung bài viết trong HTML. Nút "đọc tiếp" tải phần còn lại khi chạm có thể khiến Google không thấy văn bản đó, vì Google không nhấp, vuốt hay gõ.
  • Làm vùng chạm tối thiểu 24 x 24 pixel CSS, mức tối thiểu của WCAG 2.2 AA. Với menu và nút đóng, hãy hướng tới 44 x 44, mức AAA.
  • Giữ phần đầu trang cố định thật thấp, và đặt scroll-padding-top bằng chiều cao của nó để liên kết đang được chọn không bao giờ bị che khuất.

Trên máy tính

  • Giữ văn bản chính tối đa 80 ký tự mỗi dòng, hoặc 40 với tiếng Trung, Nhật và Hàn. Đây là hướng dẫn mức AAA của WCAG, và nó giúp ích cho mọi người đọc.
  • Đặt khoảng cách dòng ít nhất 1,5 trong đoạn văn.
  • Đặt nội dung bổ trợ ở thanh bên, sao cho khi tải xong nó không làm bài viết dịch chuyển.

Tải nhanh hơn

Phần tử lớn nhất trên một trang tin thường là ảnh chính. Hãy coi đó là yêu cầu quan trọng nhất của trang.

<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">
  • Không bao giờ tải lười (lazy-load) ảnh LCP.
  • Đặt nó trong HTML ban đầu, để trình duyệt tìm thấy trước khi bất kỳ tập lệnh nào chạy.
  • Chỉ dùng fetchpriority="high" cho tối đa một hoặc hai ảnh. Nhiều hơn thì không còn tác dụng.
  • Chỉ dùng loading="lazy" cho ảnh và iframe nằm ngoài khung nhìn đầu tiên.
  • Giảm chuyển hướng, và giữ cho trang có thể lưu đệm. Các tham số URL không lặp lại có thể đưa yêu cầu về máy chủ gốc thay vì CDN.

Một trang đứng yên

  • Đặt width và height cho mọi ảnh và video, và giữ height: auto trong CSS.
  • Dùng cùng một tỷ lệ khung hình cho mọi ảnh trong srcset.
  • Dành sẵn chỗ cho quảng cáo, nội dung nhúng và iframe trước khi chúng tải. Chương về quảng cáo nói về kích thước vị trí đặt quảng cáo.
  • Hiển thị thông báo cookie và lời mời đăng ký dạng lớp phủ, hoặc dành sẵn chỗ cho chúng, để chúng không đẩy bài viết xuống.
  • Dùng font-display: optional, hoặc một phông dự phòng được chỉnh cho khớp số đo của phông web.
  • Tạo hiệu ứng bằng transform. Làm động top hoặc left sẽ gây dịch chuyển bố cục.

Phản hồi nhanh

Tổng thời gian tương tác gồm ba phần: thời gian chờ trước khi mã của bạn chạy, chính mã đó, và lần vẽ lại sau đó. Mọi tác vụ dài hơn 50 mili giây đều là tác vụ dài.

  • Làm càng ít càng tốt trong các hàm xử lý sự kiện. Cập nhật màn hình trước, rồi hoãn phần còn lại.
  • Chia nhỏ công việc dài bằng scheduler.yield(), và dùng setTimeout thay thế ở các trình duyệt không hỗ trợ.
  • Giữ DOM nhỏ gọn. Các danh sách bài viết dài có thể dùng content-visibility để vẽ các mục ngoài màn hình sau.
  • Hãy nhớ rằng mỗi iframe có luồng chính riêng, nên hãy kiểm tra xem một thao tác chậm đến từ khung nào.

Trang dài và cuộn vô hạn

Nếu một trang chuyên mục cuộn không có điểm dừng, hãy cho mỗi đoạn một URL cố định riêng với số trang tuyệt đối như ?page=12, và liên kết các trang đó theo thứ tự. Cập nhật địa chỉ bằng History API khi người đọc di chuyển. Google không cuộn hay nhấp, nên nội dung tải lười phải tải ngay khi vào khung nhìn, không cần thao tác nào.

Danh sách kiểm tra

  • Kiểm tra LCP, INP và CLS trong Search Console, tính riêng di động và máy tính.
  • Mở mẫu bài viết có nhiều lượt xem nhất trên điện thoại và xác nhận tiêu đề và ngày đăng nằm ở màn hình đầu tiên.
  • Xác nhận toàn bộ nội dung bài viết nằm trong HTML mà máy chủ gửi.
  • So sánh di động và máy tính về nội dung, tiêu đề, dữ liệu có cấu trúc và thẻ robots có khớp nhau.
  • Bỏ loading="lazy" khỏi ảnh chính và thêm fetchpriority="high".
  • Thêm width và height cho mọi ảnh và video.
  • Dành sẵn chỗ cho mọi quảng cáo, nội dung nhúng và biểu ngữ.
  • Đặt scroll-padding-top khớp với phần đầu trang cố định.
  • Kiểm tra trang ở chiều rộng 320 pixel CSS.
  • Cho mỗi đoạn của trang cuộn vô hạn một URL riêng.

Nguồn