Các kỹ thuật liên quan đến CSS để tối ưu hoá Các chỉ số quan trọng về trang web
Cách bạn viết kiểu và bố cục bản dựng có thể có tác động lớn đến Các chỉ số quan trọng về trang web. Điều này đặc biệt đúng 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 đề cập đến các kỹ thuật liên quan đến CSS để tối ưu hoá Các chỉ số quan trọng về trang web. Những tính năng tối ưu hoá này được chia nhỏ theo nhiều khía cạnh của một trang: bố cục, hình ảnh, phông chữ, ảnh động và hoạt động tải. Đồng thời, chúng ta sẽ khám phá cách cải thiện 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 hiện tượng thay đổi bố cục.
Thông báo cookie, đặc biệt là các thông báo đặt ở đầu trang, là 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à quảng cáo nhúng.
Xác định
Quy trình kiểm tra Lighthouse "Tránh thay đổi bố cục lớn" 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ì bản thân thông báo về cookie sẽ không thay đổi khi tải. Thay vào đó, nó khiến các mục bên dưới nó trên trang (tức là div.hero và article) thay đổi. Để 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 bài viết Gỡ lỗi cho chế độ Chuyển đổi bố cục.
Khắc phục
Đặt thông báo cookie ở cuối trang bằ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 việc thay đổi bố cục này là đặt trước 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ả tương đương. Để biết thêm thông tin, hãy xem bài viết Các phương pháp hay nhất về thông báo 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ử Thời gian hiển thị nội dung lớn nhất (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 bạn cần lưu ý là phần tử LCP của một trang có thể thay đổi theo từng lần 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 tiên. 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.
Trên trang web ví dụ, 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.
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à bố cục thay đổi
Các trình duyệt chỉ có thể xác định kích thước của một hình ảnh sau khi hình ảnh đó tải. Nếu việc tải hình ảnh xảy ra sau khi kết xuất trang nhưng không có không gian nào được dành riêng 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 gây ra sự thay đổi bố cục khi tải.
Xác định
Để xác định những 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 thành phần 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 các thuộc tính width và height.
Khắc phục
Đặt thuộc tính width và height trên những hình ảnh này để tránh thay đổi 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ể trì hoãn việc hiển thị văn bản và làm thay đổi bố cục. Do đó, bạn cần phải phân phối phông 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 thành phần văn bản nếu phông chữ web liên kết chưa được tải. Việc này được thực hiện để ngăn chặn "flash văn bản chưa được định kiểu" (FOUT). Trong nhiều trường hợp, quá trình này làm chậm trễ Thời gian hiển thị nội dung đầu tiên (FCP). Trong một số trường hợp, điều này làm chậm trễ Thời gian hiển thị nội dung lớn nhất (LCP).
Thay đổi bố cục
Mặc dù việc hoán đổi phông chữ là cách hiệu quả để nhanh chóng hiển thị nội dung cho người dùng, nhưng việc hoán đổi phông chữ có nguy cơ gây ra những thay đổi về 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 những khoả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ảm thiểu kích thước của những thay đổi về 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à các 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 cần để 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 hơn.
Để xem chuỗi yêu cầu cho một 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ì phông chữ có thể được yêu cầu càng sớm.
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> có một gợi ý về tài nguyên preconnect. Điều này sẽ dẫn đến việc phân phối biểu định kiểu nhanh hơn so với việc sử dụng phiên bản @import.
Ở cấp độ rất cao, bạn có thể xem các gợi ý về tài nguyên là một cách để gợi ý cho trình duyệt rằng trình duyệt sẽ 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, xin lưu ý 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 từ các thao tác khác. Do đó, bạn nên sử dụng các gợi ý về tài nguyên một cách cẩn thận chứ không phải cho mọi trường hợp. Để biết thêm thông tin, hãy xem bài viết Thiết lập sớm kết nối mạng để cải thiện tốc độ trang cảm nhận được.
Xoá câu lệnh @import sau khỏi biểu định kiểu của bạn:
@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 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.
Hoạt ảnh
Cách chính mà ảnh động ảnh hưởng đến Các chỉ số quan trọng về trang web là khi chúng gây ra sự thay đổi về 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ử 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 tương đương 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 phần Cách tạo ảnh động CSS hiệu suất cao.
Xác định
Quá trình kiểm tra Lighthouse "Tránh các ảnh động không được kết hợp" có thể hữu ích cho việc xác định các ảnh động không mang lại hiệu quả.
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
Biểu định kiểu đang chặn hiển thị. Điều này có nghĩa là trình duyệt gặp một biểu định kiểu, trình duyệt sẽ ngừng tải các tài nguyên khác xuống cho đến khi trình duyệt đã tải xuống và phân tích cú pháp biểu định kiểu. Việc 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à Hoãn CSS không quan trọng.
Kết luận
Mặc dù vẫn còn nhiều điểm cần cải thiện (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 sự, bước tiếp theo là thu thập dữ liệu về hiệu suất từ người dùng thực để đánh giá xem trang đó có đáp ứng 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ề Các chỉ số quan trọng về trang web, hãy xem bài viết Tìm hiểu Các chỉ số quan trọng về trang web.