Trang chủ Kinh doanhKiến thức kinh doanh Cách tối ưu chỉ số Cumulative Layout Shift (CLS) cho website

Cách tối ưu chỉ số Cumulative Layout Shift (CLS) cho website

Tác giả: tranthang
Đã khi nào bạn đang đọc một bài báo và giật mình một nội dung khác giật mình Open đẩy nội dung bạn đang đọc xuống. Việc những thành phần của trang đổi khác trong khi người dùng đang cố gắng nỗ lực tương tác với trang là một thưởng thức kém. Thông thường, những thưởng thức như vậy chỉ gây không dễ chịu, nhưng trong một số ít trường hợp, chúng hoàn toàn có thể gây ra thiệt hại thực sự như lệch giá. Trong bài này, tôi sẽ trình làng với những bạn về số liệu Dịch chuyển bố cục tổng quan tích góp ( CLS ), một chỉ số giúp bạn đo lường và thống kê và đưa ra báo cáo giải trình đúng mực về những yếu tố về biến hóa bố cục tổng quan trên website. Từ đó bạn biết được nguyên do cốt lõi gây ra yếu tố này và đi vào giải quyết và xử lý chúng .

Chỉ số CLS là gì ?

Cumulative Layout Shift là một chỉ số quan trọng đo độ không thay đổi và mức đổi khác bố cục tổng quan giật mình của nội dung trang hiển thị trong suốt quy trình tải .
imageCách tính điểm CLS

Trang web có trải nghiệm người dùng tốt là trang web có điểm CLS dưới 0,1. Nếu ít nhất 75 % các trang của một website đáp ứng ngưỡng CLS tốt, thì trang web đó được phân loại hiệu suất CLS tốt.

Lưu ý rằng biến hóa bố cục tổng quan chỉ xảy ra khi những thành phần đổi khác vị trí mở màn của chúng. Nếu một thành phần mới được thêm vào DOM hoặc việc một phần đổi khác kích cỡ nhưng không dẫn đến những thành phần khác đổi khác vị trí, thì nó không được tính là sự biến hóa bố cục tổng quan .
Dưới đây là ví dụ :
Một đoạn video minh họa sự bất ổn của bố cục có thể ảnh hưởng tiêu cực đến người dùng như thế nào.
Những sự biến hóa không mong ước của nội dung trang thường xảy ra do tài nguyên được tải không đồng điệu, hoặc những thành phần DOM được thêm động ( dynamic ) vào trang phía trên nội dung hiện có. Nguyên nhân hoàn toàn có thể là hình ảnh hoặc video có size không xác lập, phông chữ hiển thị lớn hơn hoặc nhỏ hơn so với dự trù hoặc quảng cáo hoặc tiện ích của bên thứ ba tự động hóa đổi khác size .

Cách kiểm tra sự thay đổi bố cục

Cách thứ nhất

Di chuyển đến tab Performance trong Chrome DevTool. Sau đó nhấp vào “Start Profiling and Reload Page”. Nó sẽ làm mới trang và cung cấp cho bạn một báo cáo về hiệu suất của trang web. Tiếp theo bạn nhấn vào “Experience”, trong đó, bạn chọn “Layout Shift” để xem các phần tử gây ra vấn đề này, hoặc bạn có thể tìm kiếm cụm từ “Layout Shift” để dễ thấy kết quả hơn.

image 8image 6 Kiểm tra phần tử Layout Shift bằng Chrome DevTool

Cách thứ hai

Di chuyển đến Lighthouse tab, sau đó nhấn Generate report

image 2Kiểm tra phần tử Layout Shift bằng Lighthouse

Sau khi báo cáo được tạo, bạn tìm đến phần Avoid large layout shifts trong mục Diagnostics, ở đây chỉ ra các phần tử gây ra vấn đề CLS.

image 2 1Kết quả kiểm tra Layout Shift bằng Lighthouse

Hoặc mục Image elements do not have explicit width and height ( hình ảnh không có height và width cụ thể)

image 3Hình ảnh không có thuộc tính height và width cụ thể

Các nguyên nhân phổ biến nhất dẫn đến chỉ số CLS kém

Để website của bạn hoàn toàn có thể đạt chỉ số CLS cao, thứ nhất bạn cần biết được những nguyên do cốt lõi gây ra yếu tố này. Những nguyên do phổ cập tôi sẽ liệt kê cho bạn như sau :

  • Hình ảnh không có kích thước
  • Mã nhúng và iframe không có kích thước
  • Cách load phông chữ gây ra vấn đề về FOIT / FOUT
  • Các nội dụng động
  • Tốc độ trang web
  • Animations

Các cách xử lý giúp cải thiện điểm số CLS

Hình ảnh không có kích thước

Nguyên nhân

Hình ảnh không có size là những hình ảnh không có thông số kỹ thuật kỹ thuật về chiều rộng và chiều cao. Khi bạn truy vấn một website mà những hình ảnh không có size như vậy, trình duyệt sẽ không dành bất kể khoảng chừng khoảng trống nào cho những hình ảnh đó. Vì hình ảnh có size lớn hơn HTML và CSS nên chúng được tải sau. Và một khi hình ảnh được tải, chúng sẽ đẩy nội dung dưới nó khỏi vị trí bắt đầu gây ra sự biến hóa bố cục tổng quan .

Giải pháp

Vì vậy giải pháp cho bạn là định nghĩa giá trị các thuộc tính widthheight trên các phần tử hình ảnh và video. Cách tiếp cận này đảm bảo rằng trình duyệt có thể phân bổ không gian chính xác cho các phần tử trước khi hình ảnh được tải.

Để xác định các ảnh thiếu kích thước bạn dùng công cụ Lighthouse (cách đo tôi đã nói phía trên).

Hình ảnh không có thuộc tính height và width cụ thể

Tiếp theo bạn tìm các hình ảnh đó trong source code và thêm thuộc tính widthheight cho ảnh.

Puppy with balloons

Ở đây width với height tương ứng với chiều rộng và chiều cao của ảnh. Khi phong cách thiết kế ảnh thì nên chọn xuất ảnh theo một trong hai tỉ lệ khung hình thông dụng là ( 16 : 9 hoặc 4 : 3 ). Trong ví dụ trên, 640 : 360 tương ứng với tỉ lệ ảnh 16 : 9 .

Style mặc định của browser sẽ tính toán aspect-ratio (tỉ lệ khung hình của ảnh) dựa vào thuộc tính widthheight. Điều này giúp tạo một placeholder (một khoảng không gian có kích thước xác định) trong quá trình tải ảnh. Đoạn code sau có sẵn trong đa số các trình duyệt, bạn không cần thêm:

img {  
  aspect-ratio: attr(width) / attr(height);
}

Nếu hình ảnh của bạn nằm trong một container. Bạn có thể sử dụng CSS width: 100%; để thay đổi kích thước hình ảnh theo chiều rộng của container chứa nó. Đặt giá trị height: auto; để tránh chiều cao hình ảnh là một giá trị cố định (ví dụ: 360px). Như vậy, hình ảnh responsive trên mọi màn hình mà vẫn giữ đúng tỉ lệ, không bị méo.

img {
  height: auto;
  width: 100%;
}

Hiểu cách trình duyệt xác định trước kích thước của hình ảnh

Ví dụ, khi ảnh của bạn nằm trong một container full-width trên thiết bị có độ rộng 768 px. Trong quy trình tải, trình duyệt sẽ thống kê giám sát placeholder cho ảnh đó như sau :
Tỉ lệ ảnh là 640 : 360 tương tự tỉ lệ 16 : 9 .

Ảnh được style width:100%, vậy chiều rộng là 375px.

Chiều cao tính bằng công thức 768 * ( 9 / 16 ) = 432 .

Từ đó trình duyệt tạo một placeholder có kích thước 768 x 432 (px), để tránh sự thay đổi bố cục đột ngột.

Các vấn đề FOUT/FOIT của font (phông chữ)

Nguyên nhân

Không quá kinh ngạc, font là một trong những nguyên do số 1 gây ra những yếu tố về vận tốc trang, gồm có cả điểm CLS .
Hầu như toàn bộ những website thời nay đều sử dụng tối thiểu một phông chữ custom ( phông chữ từ Google Fonts hoặc những nguồn khác ). Và vì những phông chữ đó có size và khoảng cách khác với phông chữ trình duyệt mặc định, khi phông chữ custom được tải xong, nó sẽ gây ra sự biến hóa bố cục tổng quan trên hàng loạt website .
Quá trình tải và hiển thị hoàn toàn có thể gây ra yếu tố CLS theo hai cách sau :

  • Trong quá trình tải, văn vản sẽ hiển thị theo phông chữ mặc định của trình duyệt và đổi lại thành phông chữ custom khi tải xong, gây ra hiện tượng FOUT – flash of unstyled text
  • Chữ bị ẩn đi cho đến khi font chữ custom được tải xong, gây ra hiện tượng FOIT – flash of invisible text

Giải pháp

Nếu các tập tin fonts được host trực tiếp trên server, bạn có thể tải trước font sử dụng thuộc tính rel="preload".

Trong báo cáo Lighthouse, tìm đến mục Maximum critical path latency

image 3Chuỗi request quan trọngTại đây tập tin Pacifico-Bold. woff2 nằm ở đầu cuối trong chuỗi request quan trọng, nên nó cần được tải trước như sau :

 

Lưu ý : Nếu tệp Pacifico. woff2 không được sử dụng để style trong khung hình tiên phong thì không cần tải trước tập tin này .
Ngoài ra, để giúp quy trình tải font nhanh hơn bạn hoàn toàn có thể sử dụng CDN để host những tệp font hoàn toàn có thể giúp người truy vấn của bạn tải font từ sever trung gian gần nhất .

Trường hợp sử dụng font từ bên thứ ba như Google Font:

Đầu tiên bạn sử dụng thuộc tính preconnect để thiết lập kết nối đến fonts.gstatic.com, sau đó dùng preload để ưu tiên tải trước tập tin.






Mã nhúng và iFrames

Nguyên nhân

Mã nhúng được cho phép bạn hiển thị nội dung web từ nơi khác trên trang của bạn – ví dụ : video YouTube, Google Maps, bài đăng trên Instagram, v.v. Tuy nhiên, có một yếu tố là hầu hết những tiện ích không gồm có trước size đúng mực của nội dung được nhúng .

Giải pháp

Giải pháp để bạn hoàn toàn có thể vừa giúp trình duyệt xác lập trước kích cỡ của mã nhúng, vừa giữ được tỉ lệ khung hình khi resonsive là :

.keep-aspect {
   position: relative;
   height: 0;
   padding-top: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ở đây chúng ta đặt giá trị paddding-top = height / width * 100% = 315 / 560 * 100% = 56.25%, kết quả này cho ra chiều cao của mã nhúng, và nó responsive trên mọi thiết bị.

Dynamic contents (Nội dung động)

Nguyên nhân

Có thể bạn đã gặp phải sự đổi khác bố cục tổng quan do giao diện người dùng, khi những thành phần giật mình hiện lên ở đầu hoặc cuối khung hình trên website .
Nội dung động có khá nhiều loại, ví dụ như : — related contents ( nội dung tương quan ), newsletter signup forms ( biểu mẫu đăng kí ), hoặc sticky notification bars ( những thanh thông tin )
video cho thấy nội dung động hiển thị làm thay đổi bố cục
Cách đơn thuần nhất là chèn nội dung động bên dưới nội dung hiện có. Trừ trường hợp khi bạn phải hiển thị một nội dung động ở trên để phản hồi lại tương tác của người dùng .

Giải pháp

Nếu bắt buộc phải chèn nội dung động bên trên nội dung hiện có, bạn cần xác lập trước khoảng chừng khoảng trống cho nội dung động đó ( ví dụ như tạo placeholder hoặc skeleton UI ), với mục tiêu bảo toàn bố cục tổng quan website khi tải .

Tốc độ trang web

Bất kỳ sự đổi khác nào về bố cục tổng quan để phản hồi với tương tác của người dùng đều là những sự biến hóa tốt. Tuy nhiên, website của bạn phải tải bất kể thứ gì nó cần tải trong vòng 0,5 giây ( 500 mili giây ) kể từ lần tương tác sau cuối của người dùng để không bị tính vào điểm CLS. Vì vậy, về cơ bản, việc tối ưu hóa trang web của bạn để tăng những chỉ số về speed ( vận tốc ) và responsiveness ( sự phản hồi ) thực sự quan trọng so với điểm CLS của website .

Animations (Hiệu ứng chuyển động)

Nguyên nhân

Animations chắc chắn có thể nâng cao trải nghiệm người dùng chỉ khi bạn tích hợp vào trang web một cách chính xác. Nếu một hiệu ứng chuyển động gây ra sự thay đổi về kích thước như width và height của một phần tử, nó sẽ dẫn đến sự thay đổi vị trí, hậu quả dẫn đến vấn đề CLS.

Giải pháp

  • Thay vì biến đổi thuộc tính heightwidth của một phần tử, hãy sử dụng transform: scale().
  • Để dịch chuyển một phần tử, tránh thay đổi các thuộc tính top, right, bottom, left, và thay vào đó là transform: translate().
  • Chắc chắn rằng các hiệu ứng chuyển động kéo dài dưới 500ms. Bạn nên sử dụng linear animation, có tốc độ không đổi, thay vì “ease”, tăng tốc độ tại thời điểm đầu và chậm lại ở cuối chuyển động và có thời gian thực thi lâu hơn.
  • Để tìm hiểu thêm các thuộc tính CSS nào gây thay đổi bố cục trang web, bạn tham khảo thêm CSS Triggers và High-performance animations.

Kết luận

Việc tối ưu hóa điểm CLS là một quy trình dài và gồm nhiều quy trình. Mặc dù nó hoàn toàn có thể không có tác động ảnh hưởng đáng kể đến xếp hạng công cụ tìm kiếm tại thời gian hiện tại so với những chỉ số Core Web Vitals khác, nhưng vì Google ngày càng tích lũy nhiều thêm tài liệu trường tương quan đến điểm CLS, đây sẽ trở thành một số liệu quan trọng trong thời hạn tới .
Ngoài ra, bằng cách vô hiệu hoặc giảm những đổi khác về bố cục tổng quan, bạn sẽ cải tổ thưởng thức người dùng trên website của mình, do đó hoàn toàn có thể dẫn đến sự ngày càng tăng quy đổi và tỷ suất quy đổi ( CTR ). Bất kể bạn nhìn vào nó như thế nào, tối ưu hóa điểm CLS luôn đem lại những quyền lợi đáng kể .

Bài viết liên quan

Tham gia bình luận