Layout shift là gì?
Last updated: October 25, 2025 Xem trên toàn màn hình
Recommended for you
- 03 May 2019
Business Rule là gì? 1008 - 01 Feb 2023 Information Radiator là gì? 669
- 01 May 2022 Có thể xác định vị trí địa lý của địa chỉ IP với độ chính xác đến từng địa chỉ con phố? 446
- 29 May 2022 Templafy là gì? Tại sao nói Templafy là nền tảng tài liệu thế hệ mới? 346
- 01 May 2021 Unit Test là gì? 328
- 21 May 2024 Hiệu ứng chữ động (kinetic typography) là gì? 254
- 04 Sep 2023 Giải mã nhóm tính cách (ISTP - Nhà kỹ thuật) 230
- 07 Jan 2025 Phân biệt Proxy, HMA và VPN 225
- 16 Oct 2020 Thiết kế "mở" là gì? 187
- 28 Feb 2023 Đừng biến phần mềm thành công việc bàn giấy hay một "tờ sớ" dài vô tận 135
- 01 Apr 2023 [Hướng dẫn SEO] Khi nào cần chặn Googlebot crawl các trang phân trang (Pagination)? 85
- 30 Aug 2022 Kỹ thuật "Hollow" là gì? 67
- 02 Aug 2024 [Hướng dẫn SEO] Phân Trang (Pagination) Có Tốt Cho SEO Không? 66
- 01 Nov 2022 MVF (Minimum Viable Features): Tối ưu tính năng trong giới hạn nguồn lực 53
- 04 May 2025 Semantic SEO: Cách Tạo Bảng Thuật Ngữ Giúp Trang Lên Top Nhanh 46
- 16 Apr 2025 Thuật ngữ cơ bản và nâng cao trong thiết kế UI/UX 36
- 30 Apr 2024 Web3 là gì? Tại sao nói Web3 là nền tảng để Blockchain thay đổi Internet? 31
Layout shift (dịch là sự dịch chuyển bố cục) là hiện tượng khi nội dung trên trang web bị di chuyển đột ngột trong lúc người dùng đang xem, thường là do các phần tử (ảnh, quảng cáo, font, iframe, v.v.) tải chậm hoặc thay đổi kích thước sau khi trang đã hiển thị.
Hiện tượng này gây trải nghiệm khó chịu cho người dùng — ví dụ:
- Bạn đang định bấm vào nút “Xem thêm”, nhưng đúng lúc đó banner quảng cáo xuất hiện ở trên → bạn bấm nhầm vào quảng cáo.
- Một đoạn văn bản đang đọc thì bỗng bị trượt xuống vì hình ảnh phía trên vừa được tải xong.
Về mặt kỹ thuật:
Google gọi chỉ số này là Cumulative Layout Shift (CLS) — một phần trong Core Web Vitals, dùng để đo mức độ ổn định hình ảnh và bố cục của trang.
CLS = tổng của tất cả các lần bố cục bị dịch chuyển ngoài ý muốn trong suốt vòng đời của trang.
Điểm CLS lý tưởng ≤ 0.1 (theo chuẩn Google).
Nguyên nhân phổ biến:
- Ảnh hoặc video không có thuộc tính kích thước (width/height).
- Quảng cáo, iframe hoặc nội dung nhúng (embed) tải chậm.
- Font web tải muộn làm thay đổi kích thước chữ.
- JavaScript thêm phần tử mới vào DOM mà không giữ không gian sẵn.
Cách khắc phục:
- Đặt kích thước cố định (width & height) cho ảnh, video, iframe.
- Dự trữ không gian cho quảng cáo hoặc nội dung động.
- Sử dụng font-display: swap để tránh nhảy chữ khi tải font web.
- Tránh chèn nội dung mới lên phía trên vùng hiển thị (viewport).
- Kiểm tra bằng Lighthouse hoặc PageSpeed Insights để đo CLS.
Layout shift = nội dung bị nhảy, trượt, hoặc thay đổi vị trí sau khi tải trang → làm giảm trải nghiệm người dùng và điểm SEO (Core Web Vitals).
Khám phá thêm các chủ đề sau
Đọc thêm: Hướng dẫn hợp tác viết bài (guest blogging)
Các chủ đề được quan tâm nhiều nhất
CHIA SẺ BÀI VIẾT
Mới cập nhật
