Các kỹ thuật liên quan đến CSS để tối ưu hoá các chỉ số Web Vitals
Cách bạn viết kiểu và tạo bố cục có thể ảnh hưởng lớn đến Chỉ số quan trọng của web. Điều này đặc biệt đúng đối với Mức thay đổi bố cục tích luỹ (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. Các biện pháp tối ưu hoá này được chia theo nhiều khía cạnh của trang: bố cục, hình ảnh, phông chữ, ảnh động và tải. Trong quá trình này, chúng ta sẽ tìm hiểu cách cải thiện một trang ví dụ:
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 xong 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à thông báo đặ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 loại thay đổi bố cục này khi tải bao gồm 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:
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 nó 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 sự cố thay đổi bố cục, hãy xem phần Gỡ lỗi sự cố 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.
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 về cookie ở đầu màn hình. Phương pháp này cũng hiệu quả không kém. Để 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à thành phần Thời gian hiển thị nội dung lớn nhất (LCP) trên 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 tải phần tử LCP 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.
Trong trang web mẫu, hình nền của thông báo về cookie thực sự là một 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 xảy ra sau khi trang được hiển thị nhưng không có không gian nào được dành riêng cho hình ảnh, thì sẽ có sự thay đổi bố cục 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.
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">
Phông chữ
Phông chữ có thể làm chậm quá trình kết xuất 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ì hoãn
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 phần tử đó chưa tải. Việc này được thực hiện để ngăn "hiện thoáng văn bản không theo 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
Mặc dù rất phù hợp để hiển thị nội dung cho người dùng một cách nhanh chóng, nhưng việc hoán đổi phông chữ có thể gây ra sự 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 chiếm nhiều không gian trên trang. Việc sử dụng phông chữ có tỷ lệ tương tự sẽ giảm thiểu kích thước của các thay đổi bố cục này.
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.
Để xem thời gian yêu cầu phông chữ, hãy nhấp vào thẻ Timing (Thời gian). Phông chữ được yêu cầu càng sớm thì càng có thể tải và sử dụng sớm.
Để xem chuỗi yêu cầu cho một phông chữ, hãy nhấp vào thẻ Initiator (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.
Cách khắc phục
Bản minh hoạ này sử dụng API Phông chữ Google. 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 ý tài nguyên preconnect. Điều này sẽ giúp phân phối nhanh hơn bảng định kiểu so với việc 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 ý tài nguyên, hãy lưu ý rằng việc ưu tiên một hành động cụ thể sẽ lấy đi tài nguyên trình duyệt khỏi các hành động 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 tệp 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 càng sớm càng tốt trong <head>.
Ảnh động
Cách chính mà ảnh động ảnh hưởng đến các chỉ số Web Vitals là khi ảnh động gây ra sự thay đổi bố cục. Bạn nên tránh sử dụng hai loại ảnh độ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ử trên 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
Quy trình kiểm tra "Tránh dùng các ảnh động không được ghép" của Lighthouse có thể hữu ích trong việc xác định các ảnh động không hiệu quả.
Cách khắc phục
Thay đổi trình tự ả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 chỗ để cải thiệ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ố về Vitals 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.