Above-the-Fold Content
Nội dung nằm trong vùng hiển thị ban đầu mà người dùng thấy ngay khi tải trang.
Above-the-Fold Content là gì?
Above-the-Fold Content (nội dung trên nếp gấp) là phần nội dung người dùng nhìn thấy ngay khi trang web vừa tải xong — không cần cuộn xuống. Đây không phải khái niệm cố định theo pixel, mà phụ thuộc vào kích thước màn hình, thiết bị và trình duyệt của người dùng. Ví dụ: trên điện thoại 360px chiều cao màn hình, vùng above-the-fold thường nằm trong khoảng 500–700px tính từ đầu trang; trên laptop 14 inch, vùng này có thể rộng hơn, khoảng 800–1000px.
Tại sao quan trọng trong SEO?
Google không xếp hạng trực tiếp dựa trên vị trí 'above-the-fold', nhưng yếu tố này ảnh hưởng mạnh đến các tín hiệu xếp hạng gián tiếp:
- Tỷ lệ thoát (bounce rate): Nếu phần hiển thị đầu tiên thiếu thông tin rõ ràng hoặc chậm tải, người dùng rời đi ngay — làm tăng bounce rate, một trong những tín hiệu tiêu cực với thuật toán.
- Thời gian tương tác (dwell time): Nội dung hấp dẫn, dễ tiếp cận ở đầu trang giúp người dùng ở lại lâu hơn — điều Google coi là dấu hiệu chất lượng.
- Các chỉ số Core Web Vitals: Above-the-fold thường chứa các thành phần quan trọng như tiêu đề, hình ảnh chính, nút CTA… Nếu chúng tải chậm hoặc gây dịch chuyển bố cục (CLS), sẽ làm giảm điểm LCP và CLS — hai chỉ số bắt buộc để đạt trạng thái 'Good' trong báo cáo PageSpeed Insights.
- Tối ưu cho thiết bị di động: Từ năm 2019, Google áp dụng Mobile-First Indexing. Trên thiết bị nhỏ, vùng above-the-fold chiếm tỷ lệ lớn hơn so với toàn trang — việc tối ưu nó giúp cải thiện trải nghiệm người dùng và khả năng giữ chân.
Cách hoạt động
Trình duyệt tải trang theo thứ tự HTML từ trên xuống dưới. Nội dung nằm trong đoạn mã xuất hiện trước thẻ <!-- end of fold --> (không phải thẻ thật, chỉ mang tính minh hoạ) sẽ được render sớm nhất. Tuy nhiên, thực tế không có thẻ HTML nào đánh dấu 'nếp gấp' — vị trí này do trình duyệt xác định dựa trên kích thước viewport và layout ban đầu.
Quan trọng: Nếu phần above-the-fold phụ thuộc vào JavaScript để hiển thị (ví dụ: banner tải bằng React sau khi JS chạy xong), trình duyệt sẽ hiển thị trắng hoặc placeholder — gây chậm LCP và tăng nguy cơ xếp hạng thấp.
Hướng dẫn thực hiện
- Xác định vùng above-the-fold thực tế: Dùng công cụ DevTools (Chrome) → chọn tab Rendering → bật Emulate mobile view, sau đó dùng Toggle device toolbar để kiểm tra nhiều kích thước. Ghi lại chiều cao viewport tại từng thiết bị phổ biến.
- Ưu tiên nội dung thiết yếu: Đặt tiêu đề chính (H1), mô tả ngắn gọn, nút hành động rõ ràng (CTA), và hình ảnh đại diện có độ phân giải phù hợp — tất cả trong phạm vi 1000px đầu tiên của HTML.
- Tối ưu tài nguyên chặn render: Đảm bảo CSS nội tuyến (inline CSS) cho phần above-the-fold đủ để hiển thị đúng layout ngay lập tức. Tránh gọi CSS ngoài (external CSS) quá lớn trước thẻ
<head>. - Sử dụng lazy-loading có chọn lọc: Áp dụng
loading="lazy"cho ảnh và iframe dưới nếp gấp. Với ảnh trên nếp gấp, không dùng lazy-loading — thay vào đó dùng định dạng hiện đại (WebP/AVIF), nén đúng kích thước và thêm thuộc tínhdecoding="async"để tránh chặn render. - Giảm thiểu JavaScript chặn hiển thị: Không chèn script không cần thiết (như analytics, chat widget) trong
<head>hoặc đầu<body>. Nếu bắt buộc, dùngdeferhoặcasync.
Lỗi thường gặp
| Lỗi | Hệ quả | Cách khắc phục |
|---|---|---|
| Ảnh trên nếp gấp tải chậm hoặc bị lazy-load sai cách | Làm chậm LCP, gây trắng màn hình tạm thời | Dùng <img src="..." width="..." height="..." decoding="async">; không thêm loading="lazy" |
| Chèn quá nhiều font chữ hoặc font không tối ưu | Gây FOIT/FOUT, làm nội dung nhảy hoặc mất chữ trong vài giây | Chỉ dùng 1–2 font chính; preload font quan trọng; đặt font-display: swap |
| Đặt quảng cáo hoặc widget nặng ngay trên nếp gấp | Tăng CLS, làm layout dịch chuyển khi tải xong | Không đặt quảng cáo trong 1000px đầu; nếu bắt buộc, đặt chiều cao cố định và dùng aspect-ratio CSS |
Ví dụ thực tế
Một trang giới thiệu sản phẩm công nghệ điển hình:
- Phần above-the-fold: Tiêu đề H1 “Máy tính xách tay siêu nhẹ 2024”, mô tả ngắn “Pin 18 tiếng • Trọng lượng chỉ 1,1kg • Bảo hành 3 năm”, nút “Xem giá ngay”, và ảnh sản phẩm 600x400px (định dạng WebP, đã nén còn 45KB).
- Phần dưới nếp gấp: Bảng thông số kỹ thuật, video demo, đánh giá khách hàng, bài viết liên quan — tất cả đều được lazy-load hoặc tải sau khi tương tác.
- Kết quả đo lường: LCP giảm từ 4,2s xuống còn 1,3s; CLS từ 0,25 xuống 0,05; tỷ lệ thoát giảm 22% sau 3 tuần triển khai.
Câu hỏi thường gặp
Above-the-Fold có giống với 'viewport' không?
Không hoàn toàn. Viewport là khu vực hiển thị của trình duyệt (tính bằng CSS pixels), còn above-the-fold là phần nội dung thực tế người dùng thấy trong viewport đó. Một số phần trong viewport có thể bị che bởi header cố định hoặc overlay — nên không tính vào above-the-fold.
Có nên đặt nội dung SEO (từ khóa, meta description) trong vùng này không?
Có, nhưng chỉ nếu nội dung đó phục vụ người dùng. Google không yêu cầu từ khóa phải nằm trên nếp gấp, nhưng việc lặp từ khóa một cách gượng ép ở đây sẽ làm giảm chất lượng trải nghiệm — điều ngược lại với mục tiêu SEO. Tập trung vào sự rõ ràng và hữu ích.
Chiều cao above-the-fold có thay đổi theo thời gian không?
Có thể thay đổi. Khi thiết bị mới ra mắt (ví dụ: điện thoại có màn hình 20:9 hoặc tablet 12 inch), kích thước viewport phổ biến thay đổi → vùng above-the-fold cũng thay đổi theo. Việc kiểm tra định kỳ (6 tháng/lần) là cần thiết, đặc biệt với website có lượng truy cập đa thiết bị.
