Tìm hiểu về Dịch chuyển bố cục tích lũy (CLS): nó là gì, nó xảy ra như thế nào, cách đo lường nó và tại sao nó là một phần của chỉ số Core Web Vitals.
Sự thay đổi bố cục tích lũy (CLS) là chỉ số của Google đo lường sự kiện trải nghiệm người dùng và trở thành một yếu tố xếp hạng vào năm 2021.
Điều đó có nghĩa là điều quan trọng là phải hiểu CLS là gì và cách tối ưu hóa cho nó.
Định nghĩa về sự thay đổi bố cục tích lũy
Dịch chuyển bố cục tích lũy là gì?
CLS là sự thay đổi bất ngờ của các phần tử trang web trong khi trang vẫn đang tải xuống. Các loại yếu tố có xu hướng gây ra sự thay đổi là phông chữ, hình ảnh, video, biểu mẫu liên hệ, nút và các loại nội dung khác.
Giảm thiểu CLS rất quan trọng vì các trang thay đổi nhiều có thể gây ra trải nghiệm người dùng kém.
Điểm CLS kém là dấu hiệu của các vấn đề mã hóa có thể được giải quyết.
Tại sao CLS Xảy ra
Theo Google, có năm lý do tại sao Sự thay đổi Bố cục Tích lũy xảy ra:
- Hình ảnh không có kích thước.
- Quảng cáo, nhúng và iframe không có thứ nguyên.
- Nội dung được tiêm động.
- Phông chữ Web gây ra FOIT / FOUT.
- Các hành động chờ phản hồi của mạng trước khi cập nhật DOM.
Hình ảnh và video cần có kích thước chiều cao và chiều rộng được khai báo trong HTML. Đối với hình ảnh đáp ứng, hãy đảm bảo rằng các kích thước hình ảnh khác nhau cho các chế độ xem khác nhau sử dụng cùng một tỷ lệ khung hình.
Google khuyên bạn nên sử dụng AspectRatioCalculator.com để tính toán tỷ lệ khung hình. Đó là một nguồn tốt.
Quảng cáo có thể gây ra CLS
Điều này là một chút khó khăn để đối phó. Một cách để đối phó với các quảng cáo gây ra CLS là tạo kiểu cho phần tử nơi quảng cáo sẽ hiển thị.
Ví dụ: nếu bạn tạo kiểu cho div có chiều cao và chiều rộng cụ thể thì quảng cáo sẽ bị hạn chế ở những thứ đó.
Có hai giải pháp nếu thiếu khoảng không quảng cáo và quảng cáo không hiển thị.
Nếu phần tử chứa quảng cáo không hiển thị quảng cáo, bạn có thể đặt phần tử đó để quảng cáo biểu ngữ thay thế hoặc hình ảnh trình giữ chỗ được sử dụng để lấp đầy không gian.
Ngoài ra, đối với một số bố cục trong đó quảng cáo lấp đầy toàn bộ một hàng trên đầu có lẽ một cột ở rãnh bên phải hoặc bên trái của trang web, nếu trang không hiển thị thì sẽ không có sự thay đổi. Nó sẽ không tạo ra sự khác biệt trên thiết bị di động hay máy tính để bàn. Nhưng điều đó phụ thuộc vào bố cục chủ đề.
Bạn sẽ phải kiểm tra xem khoảng không quảng cáo có phải là vấn đề hay không.
Nội dung được tiêm động
Đây là nội dung được đưa vào trang web.
Ví dụ: trong WordPress, bạn có thể liên kết đến video YouTube hoặc Tweet và WordPress sẽ hiển thị video hoặc tweet dưới dạng một đối tượng được nhúng.
Phông chữ dựa trên web
Phông chữ web đã tải xuống có thể gây ra hiện tượng được gọi là Flash của văn bản ẩn (FOIT) và Flash của văn bản chưa được định kiểu (FOUT).
Một cách để ngăn chặn điều đó là sử dụng rel = ”preload” trong liên kết để tải xuống phông chữ web đó.
Lighthouse có thể giúp bạn chẩn đoán điều gì đang gây ra CLS.
CLS có thể lẻn vào trong quá trình phát triển
Sự thay đổi bố cục tích lũy có thể trượt qua trong giai đoạn phát triển. Điều có thể xảy ra là nhiều nội dung cần thiết để hiển thị trang được tải vào bộ nhớ cache của trình duyệt.
Lần tiếp theo nhà phát triển hoặc nhà xuất bản truy cập trang đang được phát triển, họ sẽ không nhận thấy sự thay đổi bố cục vì các phần tử trang đã được tải xuống.
Đó là lý do tại sao việc đo lường trong phòng thí nghiệm hoặc ngoài thực địa rất hữu ích.
Cách tính toán dịch chuyển bố cục tích lũy
Việc tính toán liên quan đến hai số liệu / sự kiện. Đầu tiên được gọi là Phân số tác động.
Phần tác động
Phân số tác động là phép đo lượng không gian mà một phần tử không ổn định chiếm trong khung nhìn.
Chế độ xem là những gì bạn nhìn thấy trên màn hình điện thoại di động.
Khi một phần tử tải xuống và sau đó thay đổi, tổng không gian mà phần tử đã chiếm, từ vị trí mà phần tử đó đã chiếm trong chế độ xem khi lần đầu tiên được hiển thị đến vị trí cuối cùng khi trang được hiển thị.
Ví dụ mà Google sử dụng là một phần tử chiếm 50% khung nhìn và sau đó giảm xuống 25% khác.
Khi được cộng lại với nhau, giá trị 75% được gọi là Phần tác động và nó được biểu thị bằng điểm 0,75.
Phân số khoảng cách
Phép đo thứ hai được gọi là Phân số Khoảng cách. Phần khoảng cách là khoảng không gian mà phần tử trang đã di chuyển từ vị trí ban đầu đến vị trí cuối cùng.
Trong ví dụ trên, phần tử trang đã di chuyển 25%.
Vì vậy, bây giờ Điểm bố cục tích lũy được tính bằng cách nhân Phần ảnh hưởng với Phần khoảng cách:
- 0,75 x 0,25 = 0,1875
Có một số phép toán khác và các cân nhắc khác được đưa vào tính toán. Điều quan trọng cần rút ra từ điều này là điểm số là một cách để đo lường yếu tố trải nghiệm người dùng quan trọng.
Cách đo CLS
Có hai cách để đo CLS. Google gọi cách đầu tiên trong Phòng thí nghiệm. Cách thứ hai được gọi là trong Field.
Trong phòng thí nghiệm có nghĩa là mô phỏng một người dùng thực sự tải xuống một trang web. Google sử dụng Moto G4 mô phỏng để tạo điểm CLS trong môi trường phòng thí nghiệm.
Các công cụ phòng thí nghiệm là cách tốt nhất để hiểu cách một bố cục có thể hoạt động trước khi đưa nó vào hoạt động cho người dùng. Nó cung cấp cho các nhà xuất bản cơ hội để kiểm tra bố cục cho các vấn đề.
Các công cụ phòng thí nghiệm bao gồm Công cụ dành cho nhà phát triển Chrome và Lighthouse.
Hiểu sự thay đổi bố cục tích lũy
Điều quan trọng là phải hiểu Dịch chuyển bố cục tích lũy. Không cần thiết phải hiểu cách tự thực hiện các phép tính.
Nhưng hiểu được ý nghĩa và cách thức hoạt động của nó là điều quan trọng vì điều này hiện đã trở thành một phần của yếu tố xếp hạng Core Web Vitals.
