Cách cải thiện hiệu suất CSS

Kết hợp với sự phức tạp của các trang web hiện đại và cách trình duyệt xử lý CSS, ngay cả một lượng CSS vừa phải cũng có thể trở thành nút thắt cổ chai cho những người xử lý các thiết bị hạn chế, độ trễ mạng, băng thông hoặc giới hạn dữ liệu. Bởi vì hiệu suất là một phần quan trọng của trải nghiệm người dùng, điều cần thiết là đảm bảo bạn mang lại trải nghiệm chất lượng cao, nhất quán trên các thiết bị thuộc mọi hình dạng và kích thước và điều đó cũng yêu cầu tối ưu hóa CSS của bạn.

Bài đăng này sẽ đề cập đến các loại vấn đề về hiệu suất mà CSS có thể gây ra và các phương pháp hay nhất để tạo CSS không cản trở mọi người.

Mục lục
1. CSS hoạt động như thế nào?
2. Xem kích thước của CSS
3. Ưu tiên CSS quan trọng
4. Sử dụng hoạt ảnh CSS hiệu quả
5. Tối ưu hóa tải phông chữ với CSS
6. Đừng lo lắng về tốc độ của các bộ chọn CSS

CSS hoạt động như thế nào?

CSS khối hiển thị

Khi có sẵn CSS cho một trang, cho dù đó là nội tuyến hay biểu định kiểu bên ngoài, trình duyệt sẽ trì hoãn hiển thị cho đến khi CSS được phân tích cú pháp . Điều này là do các trang không có CSS ​​thường không sử dụng được. Nếu một trình duyệt hiển thị cho bạn một trang lộn xộn mà không có CSS, thì một lúc sau chuyển sang một trang được tạo kiểu, nội dung thay đổi và những thay đổi hình ảnh đột ngột sẽ tạo ra trải nghiệm người dùng hỗn loạn. Trải nghiệm người dùng kém đó có tên – Flash của Nội dung chưa được phân loại (FOUC):

CSS có thể chặn phân tích cú pháp HTML

Mặc dù trình duyệt sẽ không hiển thị nội dung cho đến khi phân tích xong CSS, nhưng nó sẽ hoạt động thông qua phần còn lại của HTML. Tuy nhiên, kịch bản chặn phân tích cú pháp, trừ khi họ được đánh dấu là Hoãn hoặc async . Một tập lệnh có thể thao túng trang và phần còn lại của mã, vì vậy trình duyệt phải cẩn thận về thời điểm tập lệnh đó thực thi.

Bởi vì tập lệnh có thể ảnh hưởng đến các kiểu áp dụng cho trang, nếu trình duyệt vẫn đang xử lý một số CSS, trình duyệt sẽ đợi cho đến khi hoàn tất trước khi chạy tập lệnh. Vì nó sẽ không tiếp tục phân tích cú pháp tài liệu cho đến khi tập lệnh chạy, điều đó có nghĩa là CSS không còn chặn hiển thị nữa — tùy thuộc vào thứ tự của bảng định kiểu bên ngoài và tập lệnh trong tài liệu cũng có thể ngừng phân tích cú pháp HTML.

Để tránh chặn phân tích cú pháp, hãy phân phối CSS càng sớm càng tốt và sắp xếp tài nguyên của bạn theo thứ tự tối ưu.

Xem kích thước của CSS

Nén và rút gọn CSS

Thiết lập kết nối để tải xuống biểu định kiểu bên ngoài chắc chắn gây ra độ trễ, nhưng bạn có thể tăng tốc tải xuống bằng cách giảm thiểu tổng số byte được truyền qua mạng.

Nén tệp có thể cải thiện đáng kể tốc độ và nhiều nền tảng lưu trữ và CDN mã hóa nội dung bằng tính năng nén theo mặc định (hoặc bạn có thể định cấu hình chúng dễ dàng). Định dạng nén được sử dụng rộng rãi nhất cho các tương tác giữa máy chủ và máy khách là Gzip . Ngoài ra còn có Brotli có thể cung cấp kết quả nén thậm chí còn tốt hơn, mặc dù nó không được hỗ trợ như Gzip .

Minification là quá trình loại bỏ khoảng trắng và bất kỳ mã nào không cần thiết. Đầu ra là một tệp mã nhỏ hơn nhưng hoàn toàn hợp lệ mà trình duyệt có thể phân tích cú pháp và điều đó sẽ giúp bạn tiết kiệm một số byte. Terser là một công cụ nén JavaScript phổ biến và nếu bạn sử dụng webpack, v4 bao gồm một plugin để tạo các tệp xây dựng được thu nhỏ .

Tinh chỉnh: Loại bỏ CSS không sử dụng

Khi sử dụng các khung công tác CSS, việc kết thúc với CSS không được sử dụng là tương đối phổ biến (trừ khi chúng tôi chỉ bao gồm các thành phần chúng tôi cần). Vấn đề tương tự cũng xuất hiện trong các cơ sở mã lớn hơn phát triển trong một thời gian dài.

Loại bỏ CSS không sử dụng thường là công việc thủ công. Thách thức chính là nó phức tạp như thế nào. Chúng tôi phải kiểm tra cẩn thận toàn bộ trang web, ở tất cả các trạng thái có thể, trên tất cả các thiết bị có thể có (để bao gồm các truy vấn phương tiện) và thực thi tất cả chức năng JavaScript có thể thay đổi kiểu. CSS không sử dụng  và  PurifyCSS  là những công cụ phổ biến có thể giúp xác định các kiểu không cần thiết, nhưng chúng ta nên ghép nối chúng với thử nghiệm hồi quy trực quan cẩn thận.

Đây là nơi mà việc sử dụng CSS-in-JS là một lợi thế đáng kể: các kiểu được hiển thị trong mỗi thành phần chỉ là CSS bắt buộc. Bí quyết để CSS-in-JS nhanh là nội tuyến CSS vào trang hoặc giải nén nó sang một tệp CSS bên ngoài. Việc vận chuyển CSS trong một tệp JavaScript sẽ khiến nó được phân tích cú pháp và đánh giá chậm.

Ưu tiên CSS quan trọng

CSS quan trọng là một kỹ thuật trích xuất và nội dòng CSS cho nội dung trong màn hình đầu tiên. Nội tuyến các kiểu được trích xuất trong <head> của tài liệu HTML giúp loại bỏ nhu cầu thực hiện thêm một yêu cầu để tìm nạp các kiểu này và tăng tốc độ hiển thị.

BẠN CÓ BIẾT KHÔNG?

Trong màn hình đầu tiên là tất cả nội dung mà người xem nhìn thấy khi tải trang trước khi cuộn. Không có chiều cao pixel được xác định chung cho những gì được coi là trong nội dung màn hình đầu tiên vì có nhiều thiết bị và kích thước màn hình.

Để giảm thiểu số vòng lặp để hiển thị lần đầu tiên, hãy giữ nội dung trong màn hình đầu tiên dưới 14 KB (được nén) .

Việc xác định CSS quan trọng không hoàn toàn chính xác vì bạn cần đưa ra các giả định về vị trí màn hình gập (điều này khác nhau giữa các kích thước màn hình thiết bị). Điều này có thể khó khăn đối với các trang web năng động cao. Ngay cả khi không chính xác, nó vẫn có thể cải thiện hiệu suất và chúng tôi có thể tự động hóa nó bằng các công cụ như Critical , CriticalCSS và Penthouse .

Tải CSS không đồng bộ

Phần còn lại của CSS (phần ít quan trọng hơn) tốt nhất nên được tải không đồng bộ . Cách để đạt được điều đó là đặt thuộc tính phương tiện liên kết để in :

<link rel=”stylesheet” href=”non-critical.css” media=”print” onload=”this.media=’all'”>

 

Loại phương tiện “In” xác định các quy tắc của biểu định kiểu khi người dùng cố gắng in trang và trình duyệt sẽ tải biểu định kiểu đó mà không làm chậm trễ việc hiển thị trang. Việc áp dụng biểu định kiểu đó cho tất cả phương tiện (cụ thể là màn hình chứ không chỉ in) sử dụng thuộc tính onload để đặt phương tiện thành tất cả khi biểu định kiểu tải xong.

Một tùy chọn khác là sử dụng <link rel = “preload”> (thay vì rel = “stylesheet” ) để đạt được một mẫu tương tự như trên và chuyển thuộc tính rel thành stylesheet khi tải sự kiện. Có những hạn chế cần xem xét khi sử dụng cách tiếp cận này.

• Hỗ trợ trình duyệt cho tải trước vẫn chưa tốt, vì vậy cần có polyfill (hoặc sử dụng thư viện như loadCSS) để áp dụng biểu định kiểu trên các trình duyệt.
• Tải trước tìm nạp các tệp rất sớm, ở mức ưu tiên cao nhất, có khả năng làm mất tác dụng của các bản tải xuống quan trọng khác.

Nếu bạn muốn tìm nạp có mức độ ưu tiên cao mà tải trước cung cấp (trong các trình duyệt hỗ trợ nó), những người tạo ra loadCSS khuyên bạn nên kết hợp nó với mẫu đầu tiên, như sau:

<link rel=”preload” href=”/path/to/my.css” as=”style”>

<link rel=”stylesheet” href=”/path/to/my.css” media=”print” onload=”this.media=’all'”>

Tránh @import trong tệp CSS

Sử dụng @import trong các tệp CSS làm chậm quá trình hiển thị. Đầu tiên, trình duyệt phải tải xuống tệp CSS để khám phá tài nguyên đã nhập và sau đó bắt đầu một yêu cầu khác để tải xuống trước khi hiển thị.

Nếu bạn có một biểu định kiểu có chứa url @import (import.css); thác nước mạng trông như thế này:

Sử dụng hoạt ảnh CSS hiệu quả

Khi bạn tạo hoạt ảnh cho các phần tử trên một trang, trình duyệt thường phải tính toán lại vị trí và kích thước của chúng trong tài liệu , điều này sẽ kích hoạt bố cục. Ví dụ: nếu bạn thay đổi chiều rộng của một phần tử, bất kỳ phần tử nào của phần tử đó cũng có thể bị ảnh hưởng và một phần lớn của bố cục trang có thể thay đổi. Bố cục hầu như luôn luôn được xác định phạm vi cho toàn bộ tài liệu, vì vậy cây bố cục càng lớn, nó thực hiện các phép tính bố cục càng lâu.

Khi tạo hoạt ảnh cho các phần tử, điều cần thiết là giảm thiểu bố cục và sửa chữa. Không phải tất cả các kỹ thuật hoạt hình CSS đều như nhau và các trình duyệt hiện đại có thể tạo hoạt ảnh hiệu quả nhất với vị trí , tỷ lệ , xoay và độ mờ :

• Thay vì thay đổi các thuộc tính chiều caovà chiều rộng , hãy sử dụng biến đổi: scale () .
• Để di chuyển các phần tử xung quanh, hãy tránh thay đổi các thuộc tính trên cùng, bên phải , bên dưới hoặc bên trái và thay vào đó hãy sử dụng biến đổi: translate () .
• Nếu bạn muốn làm mờ nền, hãy cân nhắc sử dụng hình ảnh làm mờ và thay đổi độ mờ của nó.

Tinh chỉnh: chứa thuộc tính

Các chứa thuộc tính CSS cho trình duyệt mà các yếu tố và hậu duệ của nó được coi là độc lập của cây tài liệu (càng nhiều càng tốt). Nó cách ly một cây con của một trang với phần còn lại. Sau đó, trình duyệt có thể tối ưu hóa kết xuất (kiểu, bố cục và thao tác sơn) của các phần độc lập của trang để cải thiện hiệu suất.

Các chứa tài sản là hữu ích trên các trang có chứa nhiều vật dụng độc lập . Chúng tôi có thể sử dụng nó để ngăn các thay đổi trong mỗi tiện ích con khỏi tác dụng phụ bên ngoài hộp giới hạn của tiện ích con. Một trang web chủ yếu là tĩnh sẽ nhận được ít lợi ích từ chiến lược này.

Tối ưu hóa tải phông chữ với CSS

Tránh văn bản ẩn trong quá trình tải phông chữ

Phông chữ thường là các tệp lớn, mất một lúc để tải. Một số trình duyệt ẩn văn bản cho đến khi tải phông chữ (gây ra hiện tượng “nhấp nháy văn bản ẩn” hoặc FOIT) để giải quyết vấn đề này. Khi tối ưu hóa tốc độ, bạn sẽ muốn tránh hiện tượng “nhấp nháy văn bản vô hình” và hiển thị nội dung cho mọi người ngay lập tức bằng cách sử dụng phông chữ hệ thống (phông chữ được cài đặt sẵn trên máy của họ). Khi tệp phông chữ đã được tải, nó sẽ thay thế phông chữ hệ thống được gọi là “flash của văn bản chưa được định kiểu” hoặc FOUT.

Một cách để đạt được điều này là sử dụng font-display —an API để chỉ định chiến lược hiển thị phông chữ. Sử dụng hiển thị phông chữ với hoán đổi giá trị cho trình duyệt biết rằng văn bản sử dụng phông chữ này sẽ được hiển thị ngay lập tức bằng phông chữ hệ thống.

Sử dụng phông chữ có thể thay đổi để giảm kích thước tệp

Các phông chữ có thể thay đổi cho phép nhiều biến thể khác nhau của một kiểu chữ được kết hợp vào một tệp duy nhất, thay vì có một tệp phông chữ riêng biệt cho mọi chiều rộng, trọng lượng hoặc kiểu. Chúng cho phép bạn truy cập tất cả các biến thể trong một tệp phông chữ nhất định với CSS và một tham chiếu @ font-face duy nhất .

Phông chữ có thể thay đổi có thể làm giảm đáng kể kích thước tệp khi bạn cần nhiều biến thể của một phông chữ. Thay vì tải các kiểu thông thường và in đậm cộng với các phiên bản nghiêng của chúng, bạn có thể tải một tệp duy nhất chứa tất cả thông tin.

Monotype đã chạy một thử nghiệm bằng cách kết hợp 12 phông chữ đầu vào để tạo ra tám trọng số, trên ba chiều rộng, trên cả kiểu in nghiêng và kiểu La Mã. Lưu trữ 48 phông chữ riêng lẻ trong một tệp phông chữ biến đổi duy nhất có nghĩa là giảm 88% kích thước tệp.

Đừng lo lắng về tốc độ của các bộ chọn CSS

Cách cấu trúc bộ chọn CSS ảnh hưởng đến tốc độ trình duyệt có thể khớp với chúng. Trình duyệt đọc bộ chọn từ phải sang trái, vì vậy khi bạn sử dụng bộ chọn con. Ví dụ: điều hướng a {} , trước tiên nó sẽ khớp với mọi phần tử <a> trên trang trước khi nhập vào phần tử bên trong điều hướng . Nếu bạn đã sử dụng một bộ chọn cụ thể hơn, ví dụ: .nav-link trên mỗi <a> bên trong phần tử điều hướng, thì sẽ không tốn thời gian cố gắng khớp mọi <a> trên trang.

Nếu bạn xem xét cách trình duyệt đối sánh các bộ chọn từ phải sang trái và một ví dụ như .container ul li a {} , bạn sẽ thấy lý do tại sao các bộ chọn con thường được gắn nhãn là “đắt tiền”.

Có vẻ như các bộ chọn như vậy sẽ là một vấn đề về tốc độ. Tuy nhiên, hiệu suất đối sánh bộ chọn diễn ra nhanh chóng. Các khai báo CSS rất thân thiện với các thuật toán nén nên nỗ lực cần thiết để tối ưu hóa bộ chọn CSS thường được dành tốt hơn để làm việc trên các phần khác của ứng dụng của bạn với lợi tức đầu tư lớn hơn.

CSS rất quan trọng để tải trang và trải nghiệm người dùng thú vị. Mặc dù chúng ta thường có thể ưu tiên các nội dung khác (chẳng hạn như tập lệnh hoặc hình ảnh) có tác động hơn, nhưng chúng ta không nên quên CSS. Với các chiến lược được mô tả ở trên, bạn sẽ có thể đảm bảo giao hàng và thực hiện nhanh chóng.

Nguồn: https://calibreapp.com/blog/css-performance