CSS cho Các chỉ số quan trọng về trang web

Các kỹ thuật liên quan đến CSS để tối ưu hoá Các chỉ số quan trọng về trang web

Katie Hempenius
Katie Hempenius
X
Una Kravets

Cách bạn viết kiểu và xây dựng bố cục có thể có tác động lớn đến Chỉ số quan trọng chính của trang web. Điều này đặc biệt đúng đối với Điểm số tổng hợp về mức thay đổi bố cục (CLS) và Thời gian hiển thị nội dung lớn nhất (LCP).

Bài viết này trình bày các kỹ thuật liên quan đến CSS để tối ưu hoá các chỉ số Web Vitals. Những hoạt động tối ưu hoá này được phân tích theo các khía cạnh khác nhau của một trang: bố cục, hình ảnh, phông chữ, ảnh động và quá trình tải. Ngoài ra, chúng ta sẽ tìm hiểu cách cải thiện một trang ví dụ:

Ảnh chụp màn hình trang web mẫu

Bố cục

Chèn nội dung vào DOM

Việc chèn nội dung vào một trang sau khi nội dung xung quanh đã tải sẽ đẩy mọi nội dung khác trên trang xuống. Điều này gây ra sự thay đổi bố cục.

Thông báo về cookie, đặc biệt là những thông báo được đặt ở đầu trang, là một ví dụ phổ biến về vấn đề này. Các phần tử trang khác thường gây ra kiểu thay đổi bố cục này khi tải, bao gồm cả quảng cáo và nội dung nhúng.

Xác định

Quy trình kiểm tra "Tránh các thay đổi lớn về bố cục" của Lighthouse sẽ xác định các phần tử trang đã thay đổi. Đối với bản minh hoạ này, kết quả sẽ có dạng như sau:

Bài kiểm tra "Tránh thay đổi lớn về bố cục" của Lighthouse

Thông báo về cookie không được liệt kê trong những phát hiện này vì chính thông báo về cookie không thay đổi khi tải. Thay vào đó, thao tác này sẽ khiến các mục bên dưới trên trang (tức là div.hero và article) dịch chuyển. Để biết thêm thông tin về cách xác định và khắc phục việc thay đổi bố cục, hãy xem phần Gỡ lỗi khi thay đổi bố cục.

Cách khắc phục

Đặt thông báo về cookie ở cuối trang bằng cách sử dụng vị trí tuyệt đối hoặc cố định.

Thông báo về cookie xuất hiện ở cuối trang

Trước:

.banner {
  position: sticky;
  top: 0;
}

Sau:

.banner {
  position: fixed;
  bottom: 0;
}

Một cách khác để khắc phục sự thay đổi bố cục này là dành không gian cho thông báo cookie ở đầu màn hình. Phương pháp này cũng hiệu quả như nhau. Để biết thêm thông tin, hãy xem Các phương pháp hay nhất về thông báo về cookie.

Hình ảnh

Hình ảnh và Thời gian hiển thị nội dung lớn nhất (LCP)

Hình ảnh thường là phần tử Nội dung lớn nhất hiển thị (LCP) trên một trang. Các phần tử trang khác có thể là phần tử LCP bao gồm các khối văn bản và hình ảnh áp phích video. Thời gian mà phần tử LCP tải sẽ xác định LCP.

Điều quan trọng cần lưu ý là phần tử LCP của một trang có thể khác nhau giữa các lượt tải trang, tuỳ thuộc vào nội dung mà người dùng nhìn thấy khi trang hiển thị lần đầu. Ví dụ: trong bản minh hoạ này, nền của thông báo về cookie, hình ảnh chính và văn bản bài viết là một số phần tử LCP tiềm năng.

Sơ đồ làm nổi bật phần tử LCP của trang trong nhiều trường hợp.

Trên trang web ví dụ, hình nền của thông báo cookie thực ra là hình ảnh lớn. Để cải thiện LCP, bạn có thể vẽ hiệu ứng chuyển màu trong CSS thay vì tải hình ảnh để tạo hiệu ứng.

Cách khắc phục

Thay đổi CSS .banner để sử dụng hiệu ứng chuyển màu CSS thay vì hình ảnh:

Trước:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

Sau:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Hình ảnh và thay đổi bố cục

Trình duyệt chỉ có thể xác định kích thước của hình ảnh sau khi hình ảnh tải xong. Nếu quá trình tải hình ảnh diễn ra sau khi trang hiển thị, nhưng chưa đặt trước không gian cho hình ảnh, thì sự thay đổi bố cục sẽ xảy ra khi hình ảnh xuất hiện. Trong bản minh hoạ, hình ảnh chính đang gây ra sự thay đổi bố cục khi tải.

Xác định

Để xác định hình ảnh không có width và height rõ ràng, hãy sử dụng quy trình kiểm tra "Các phần tử hình ảnh có chiều rộng và chiều cao rõ ràng" của Lighthouse.

Kiểm tra "Các phần tử hình ảnh có chiều rộng và chiều cao rõ ràng" của Lighthouse

Trong ví dụ này, cả hình ảnh chính và hình ảnh bài viết đều thiếu thuộc tính width và height.

Cách khắc phục

Đặt các thuộc tính width và height trên các hình ảnh này để tránh sự thay đổi về bố cục.

Trước:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

Sau:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Bây giờ, hình ảnh sẽ tải mà không làm thay đổi bố cục.

Phông chữ

Phông chữ có thể làm chậm quá trình hiển thị văn bản và gây ra sự thay đổi bố cục. Do đó, bạn cần phải phân phối phông chữ một cách nhanh chóng.

Hiển thị văn bản bị trễ

Theo mặc định, trình duyệt sẽ không hiển thị ngay một phần tử văn bản nếu phông chữ web liên kết của trình duyệt đó chưa tải. Việc này giúp ngăn hiện tượng "nhấp nháy văn bản chưa định kiểu" (FOUT). Trong nhiều trường hợp, việc này sẽ làm chậm Hiển thị nội dung đầu tiên (FCP). Trong một số trường hợp, điều này sẽ làm chậm Thời gian hiển thị nội dung lớn nhất (LCP).

Thay đổi bố cục

Tuy rất hiệu quả trong việc nhanh chóng hiển thị nội dung cho người dùng, nhưng hoán đổi phông chữ có khả năng gây ra thay đổi bố cục. Những thay đổi về bố cục này xảy ra khi phông chữ web và phông chữ dự phòng của phông chữ đó chiếm lượng không gian khác nhau trên trang. Việc sử dụng phông chữ có tỷ lệ tương tự sẽ giúp giảm thiểu kích thước của các lần thay đổi bố cục này.

Biểu đồ thể hiện sự thay đổi bố cục do hoán đổi phông chữ
Trong ví dụ này, việc hoán đổi phông chữ khiến các phần tử trang dịch chuyển lên trên 5 pixel.

Xác định

Để xem các phông chữ đang được tải trên một trang cụ thể, hãy mở thẻ Mạng trong Công cụ cho nhà phát triển và lọc theo Phông chữ. Phông chữ có thể là tệp lớn, vì vậy, việc chỉ sử dụng ít phông chữ hơn thường sẽ tốt hơn cho hiệu suất.

Ảnh chụp màn hình phông chữ hiển thị trong Công cụ cho nhà phát triển

Để xem thời gian cần thiết để yêu cầu phông chữ, hãy nhấp vào thẻ Timing. Bạn yêu cầu phông chữ càng sớm thì càng có thể tải và sử dụng sớm hơn.

Ảnh chụp màn hình thẻ &quot;Thời gian&quot; trong Công cụ cho nhà phát triển

Để xem chuỗi yêu cầu phông chữ, hãy nhấp vào thẻ Trình khởi tạo. Nói chung, chuỗi yêu cầu càng ngắn thì càng có thể yêu cầu phông chữ sớm hơn.

Ảnh chụp màn hình thẻ &quot;Trình khởi tạo&quot; trong DevTools

Cách khắc phục

Bản minh hoạ này sử dụng Google Fonts API. Google Fonts cung cấp tuỳ chọn tải phông chữ thông qua thẻ <link> hoặc câu lệnh @import. Đoạn mã <link> bao gồm một gợi ý về tài nguyên preconnect. Điều này sẽ giúp phân phối biểu định kiểu nhanh hơn so với sử dụng phiên bản @import.

Ở cấp cao, bạn có thể coi gợi ý tài nguyên là một cách để gợi ý cho trình duyệt rằng trình duyệt cần thiết lập một kết nối cụ thể hoặc tải một tài nguyên cụ thể xuống. Do đó, trình duyệt sẽ ưu tiên các thao tác này. Khi sử dụng gợi ý về tài nguyên, hãy nhớ rằng việc ưu tiên một thao tác cụ thể sẽ lấy đi tài nguyên của trình duyệt khỏi các thao tác khác. Do đó, bạn nên sử dụng gợi ý tài nguyên một cách thận trọng và không phải cho mọi thứ. Để biết thêm thông tin, hãy xem phần Thiết lập kết nối mạng sớm để cải thiện tốc độ trang.

Xoá câu lệnh @import sau đây khỏi tệp định kiểu:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

Thêm các thẻ <link> sau vào <head> của tài liệu:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Các thẻ liên kết này hướng dẫn trình duyệt thiết lập kết nối sớm với các nguồn gốc mà Google Fonts sử dụng và tải biểu định kiểu chứa nội dung khai báo phông chữ cho Montserrat và Roboto. Bạn nên đặt các thẻ <link> này trong <head> càng sớm càng tốt.

Ảnh động

Cách chính mà ảnh động ảnh hưởng đến Các chỉ số quan trọng của trang web là khi chúng gây ra sự thay đổi bố cục. Có 2 loại ảnh động bạn nên tránh sử dụng: ảnh động kích hoạt bố cục và hiệu ứng "giống ảnh động" di chuyển các phần tử của trang. Thông thường, bạn có thể thay thế các ảnh động này bằng các ảnh động tương đương có hiệu suất cao hơn bằng cách sử dụng các thuộc tính CSS như transform, opacity và filter. Để biết thêm thông tin, hãy xem bài viết Cách tạo ảnh động CSS hiệu suất cao.

Xác định

Kiểm tra "Tránh các ảnh động không được kết hợp" của Lighthouse có thể hữu ích khi xác định các ảnh động không hoạt động.

Kiểm tra &quot;Tránh dùng ảnh động không được kết hợp&quot; của Lighthouse

Cách khắc phục

Thay đổi chuỗi ảnh động slideIn để sử dụng transform: translateX() thay vì chuyển đổi thuộc tính margin-left.

Trước:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

Sau:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

CSS quan trọng

Trang tính kiểu chặn quá trình hiển thị. Điều này có nghĩa là khi gặp một tệp kiểu, trình duyệt sẽ ngừng tải các tài nguyên khác cho đến khi tải và phân tích cú pháp tệp kiểu đó. Điều này có thể làm chậm LCP. Để cải thiện hiệu suất, hãy cân nhắc xoá CSS không dùng đến, chèn CSS quan trọng vào cùng dòng và trì hoãn CSS không quan trọng.

Kết luận

Mặc dù vẫn còn khả năng cải tiến thêm (ví dụ: sử dụng tính năng nén hình ảnh để phân phối hình ảnh nhanh hơn), nhưng những thay đổi này đã cải thiện đáng kể các Chỉ số quan trọng về trang web của trang web này. Nếu đây là một trang web thực tế, bước tiếp theo sẽ là thu thập dữ liệu hiệu suất từ người dùng thực tế để đánh giá xem trang web có đạt các ngưỡng của các chỉ số quan trọng về trang web đối với hầu hết người dùng hay không. Để biết thêm thông tin về Web Vitals, hãy xem bài viết Tìm hiểu về Web Vitals.