Cách tối ưu hóa CSS để có hiệu suất trang web cao nhất

Ngay cả vào năm 2021, hiệu suất web vẫn là một vấn đề. Theo HTTP Archive, trang trung bình yêu cầu tải xuống 2 MB, thực hiện hơn 60 yêu cầu HTTP và có thể mất 18 giây để tải đầy đủ trên thiết bị di động. Biểu định kiểu chiếm 60 kB được chia thành bảy yêu cầu, vì vậy nó hiếm khi là ưu tiên hàng đầu khi cố gắng giải quyết các vấn đề về hiệu suất.

Tuy nhiên, CSS thực sự có ảnh hưởng, tuy nhiên nó có vẻ nhẹ. Khi bạn đã giải quyết JavaScript của mình, học cách tối ưu hóa CSS đúng cách sẽ là ưu tiên tiếp theo.

Hãy bắt đầu!

CSS ảnh hưởng đến hiệu suất trang như thế nào

CSS trông vô tội nhưng có thể yêu cầu một số xử lý nặng.

CSS đang chặn kết xuất

Khi trình duyệt của bạn gặp <link> , nó sẽ tạm dừng quá trình tải xuống và xử lý của trình duyệt khác trong khi tìm nạp và phân tích cú pháp tệp CSS.

JavaScript cũng có thể chặn hiển thị trình duyệt, nhưng xử lý không đồng bộ có thể xảy ra với:

1. Thuộc tính async để tải xuống các tập lệnh song song, được chạy ngay lập tức, chúng đã sẵn sàng.
2. Thuộc tính defer để tải xuống song song, sau đó chạy theo thứ tự khi DOM đã sẵn sàng.
3. Thuộc tính type="module" để tải một mô-đun ES (hoạt động giống như defer ).

Các nội dung như hình ảnh thường yêu cầu nhiều băng thông hơn, nhưng có sẵn các định dạng hiệu quả và chúng có thể được tải chậm (thuộc tính loading="lazy" ) mà không chặn hiển thị trình duyệt.

Không điều gì có thể thực hiện được với CSS. Tệp được lưu vào bộ nhớ đệm, vì vậy các lần tải trang tiếp theo sẽ nhanh hơn, nhưng quá trình chặn hiển thị vẫn còn.

Tệp CSS lớn Cần thời gian để xử lý

Biểu định kiểu của bạn càng lớn, càng mất nhiều thời gian để tải xuống và xử lý thành Mô hình đối tượng CSS (CSSOM), mà trình duyệt và các API JavaScript có thể sử dụng để hiển thị trang. Mặc dù các bảng định kiểu CSS nhỏ hơn hầu hết các tệp trang web khác, nhưng chúng không tránh khỏi quy tắc chung “nhỏ hơn là tốt hơn”.

Tệp CSS phát triển

Có thể khó xác định các kiểu không còn được sử dụng nữa và việc xóa các kiểu sai có thể tàn phá một trang web. Các nhà phát triển thường chọn cách tiếp cận “giữ lại mọi thứ” an toàn nhất. Các kiểu trang, thành phần và tiện ích con không còn được sử dụng tiếp tục tồn tại trong CSS. Kết quả? Kích thước tệp, độ phức tạp và nỗ lực bảo trì tăng theo cấp số nhân, khiến các nhà phát triển ngày càng ít có khả năng loại bỏ mã thừa.

Biểu định kiểu có thể tham chiếu các tài sản khác

CSS có thể tham chiếu các bảng định kiểu khác bằng cách sử dụng quy tắc @import. Những lần nhập này chặn việc xử lý biểu định kiểu hiện tại và tải thêm các tệp CSS khác theo chuỗi .

Các nội dung khác, chẳng hạn như phông chữ và hình ảnh, cũng có thể được tham chiếu. Trình duyệt sẽ cố gắng tối ưu hóa các lượt tải xuống, nhưng khi có nghi ngờ, trình duyệt sẽ tìm nạp chúng ngay lập tức. Các tệp được mã hóa base64 nội tuyến vẫn phải xử lý thêm.

Kết xuất hiệu ứng CSS

Các trình duyệt có ba giai đoạn kết xuất:

1. Pha bố cục (hoặc chỉnh lại) tính toán kích thước của từng phần tử và cách nó ảnh hưởng đến kích thước hoặc vị trí của các phần tử xung quanh nó.
2. Pha sơn vẽ các phần trực quan của mỗi phần tử lên các lớp riêng biệt: văn bản, màu sắc, hình ảnh, đường viền, bóng, v.v.
3. Kết hợp vẽ từng lớp lên trang theo thứ tự chính xác theo bối cảnh xếp chồng, vị trí, chỉ mục z, v.v.

Nếu bạn không cẩn thận, các thay đổi thuộc tính CSS và hoạt ảnh có thể khiến cả ba giai đoạn kết xuất lại. Một số thuộc tính, chẳng hạn như bóng đổ và độ dốc, cũng đắt hơn về mặt tính toán so với màu khối và lề.

Công cụ phân tích hiệu suất CSS

Thừa nhận rằng bạn có vấn đề về hiệu suất CSS là bước đầu tiên trên con đường khôi phục! Tìm và khắc phục các nguyên nhân là một vấn đề khác.

Các công cụ và dịch vụ sau (không được xếp theo bất kỳ thứ tự nào) có thể giúp bạn xác định các nút thắt tạo kiểu trong mã của bạn.

1. Bảng điều khiển mạng DevTools

Các chuyên gia về hiệu suất web dành thời gian đáng kể cho DevTools và bảng điều khiển Mạng nói riêng. DevTools có nguồn gốc từ hầu hết các trình duyệt hiện đại, mặc dù chúng tôi sẽ sử dụng Google Chrome trong các ví dụ của chúng tôi.

DevTools có thể được mở từ menu trình duyệt, thường tại Công cụ khác > Công cụ dành cho nhà phát triển hoặc thông qua phím tắt Ctrl | Cmd + Shift + I hoặc F12 .

Chuyển sang tab Mạng và đảm bảo Tắt bộ nhớ cache được chọn để ngăn các tệp đã lưu trong bộ nhớ cache ảnh hưởng đến báo cáo. Bạn cũng có thể thay đổi tùy chọn điều chỉnh để mô phỏng các mạng di động chậm hơn.

Làm mới trang để xem biểu đồ thác nước tải xuống và xử lý:

Bất kỳ thanh dài nào cũng là một nguyên nhân đáng lo ngại, nhưng bạn nên đặc biệt cảnh giác với các thanh dài bị chặn / bị đình trệ (được hiển thị bằng màu trắng). Trong ví dụ này, hàng được đánh dấu và tất cả các hàng tiếp theo không thể bắt đầu tải xuống cho đến khi các tệp CSS và JavaScript chặn hiển thị được xử lý ở đầu trang HTML.

Hộp Bộ lọc cho phép bạn hiển thị hoặc ẩn các nội dung cụ thể:

• larger-than: <S> : Giới hạn đối với các tệp lớn hơn <S> , được biểu thị bằng byte (10.000), Kilobyte (1.000 kB) hoặc megabyte (1 M)
• -larger-than:<S> : Giới hạn đối với các tệp nhỏ hơn <S>
• -domain:*<.yourdomain.com> : Hiển thị các yêu cầu của bên thứ ba không được tải từ miền chính của bạn. Đây là một đóng góp lớn cho các trang web chậm.

Một trang hiệu suất cao với CSS được tối ưu hóa thường có ít nội dung được tải hơn song song với các thanh ngắn bị chặn / bị đình trệ.

2. WebPageTest

WebPageTest cung cấp chế độ xem thác nước mạng tương tự, cũng như nhiều biểu đồ hiệu suất khác:

Dịch vụ sử dụng các thiết bị có trụ sở tại các địa điểm toàn cầu khác nhau để bạn có thể đánh giá hiệu suất trong thế giới thực và tối ưu hóa CSS.

3. Bảng điều khiển ngọn hải đăng trên Chrome DevTools

Bảng điều khiển DevTools Lighthouse được cung cấp trong các trình duyệt dựa trên Chromium như Chrome, Edge, Brave, Opera và Vivaldi. Bạn có thể tạo báo cáo Hiệu suất, Ứng dụng web tiến bộ, Các phương pháp hay nhất, Khả năng truy cập và Tối ưu hóa công cụ tìm kiếm cho các thiết bị di động và máy tính để bàn.

Công cụ này đưa ra các đề xuất cải tiến, bao gồm cả các cách để tối ưu hóa CSS. Không phải tất cả đều có thể thực tế hoặc khả thi, nhưng những chiến thắng nhanh chóng có lợi nhất được nêu bật.

4. Google PageSpeed Insights

PageSpeed Insights là phiên bản trực tuyến của Lighthouse. Nó có ít tính năng hơn nhưng có thể được sử dụng trong bất kỳ trình duyệt nào và cung cấp một số thông tin chi tiết thay thế.

Ví dụ: một biểu đồ dạng cây hiển thị nội dung JavaScript lớn nhất với chỉ số mức độ phù hợp, cho biết tỷ lệ mã nào được sử dụng và không được sử dụng:

CSS không được hiển thị, nhưng số lượng JavaScript sẽ ảnh hưởng đến hiệu quả của các kiểu.

Các công cụ kiểm tra tốc độ trang web tương tự bao gồm Kiểm tra tốc độ trang web Pingdom và GTmetrix.

5. Bảng điều khiển bao phủ Chrome DevTools

Bảng điều khiển DevTools Coverage trong các trình duyệt dựa trên Chromium giúp xác định vị trí mã CSS (và JavaScript) không được sử dụng. Chọn Mức độ phù hợp từ menu con Công cụ khác của DevTools, sau đó làm mới trang của bạn và duyệt qua trang web / ứng dụng của bạn:

Nội dung CSS và JavaScript được hiển thị trong bảng Mức độ phù hợp, với tỷ lệ mã không sử dụng có màu đỏ. Nhấp vào bất kỳ tệp nào để xem nguồn của nó với mã không sử dụng được đánh dấu màu đỏ trong rãnh số dòng.

Một số điều cần lưu ý:

• Chỉ số mức độ phù hợp được đặt lại nếu bạn làm mới hoặc điều hướng đến một trang mới, như thông thường trên trang WordPress. Chỉ số mã không sử dụng sẽ chỉ giảm nếu bạn đang duyệt một Ứng dụng trang đơn tải nội dung mà không làm mới trang.
• Công cụ chỉ có thể giải thích cho CSS được sử dụng cho đến một thời điểm cụ thể. Nó không thể xác định xem một tiện ích con chưa được xem hoặc có nhiều trạng thái ràng buộc JavaScript hay không.

6. Giám sát hiệu suất thời gian thực của Chrome DevTools

Các trình duyệt dựa trên Chromium có Màn hình hiệu suất thời gian thực. Một lần nữa, điều này có sẵn từ menu công cụ DevTools More . Các biểu đồ cập nhật khi bạn điều hướng các trang, cuộn và kích hoạt hoạt ảnh:

Các chỉ số sau được quan tâm đặc biệt để tối ưu hóa hiệu suất CSS (càng thấp, càng tốt):

• Sử dụng CPU: Hiệu suất sử dụng bộ xử lý từ 0% đến 100%.
• Bố cục / giây: Tốc độ trình duyệt phải bố trí lại trang.
• Định lại kiểu / giây: Tốc độ trình duyệt phải tính toán lại kiểu.

Các chỉ số khác cũng có thể hữu ích nếu CSS đang gặp khó khăn do các yếu tố bên ngoài (một lần nữa, giá trị thấp hơn cho thấy hiệu suất tốt hơn):

• Kích thước heap JS: Tổng bộ nhớ được sử dụng bởi các đối tượng JavaScript.
• Nút DOM: Số phần tử trong tài liệu HTML.
• Trình xử lý sự kiện JS: Số lượng trình xử lý sự kiện JavaScript đã đăng ký.
• Tài liệu: Số lượng tài nguyên, bao gồm trang, tệp CSS, mô-đun JavaScript, v.v.
• Khung tài liệu: Số lượng khung hình, khung nội tuyến và tập lệnh JavaScript worker.

7. Báo cáo hiệu suất DevTools

Bảng Hiệu suất DevTools cho phép bạn ghi lại các hoạt động của trang để phân tích thêm và giúp xác định các vấn đề về hiệu suất. Các báo cáo được tạo rất phức tạp và nhiều nhà phát triển tránh chúng, nhưng chúng cung cấp thông tin có giá trị.

Biểu tượng cài đặt của bảng Hiệu suất cho phép bạn đặt các tùy chọn khác nhau, chẳng hạn như làm chậm mạng và CPU. Bạn cũng có thể tắt các mẫu JavaScript để ngăn xếp cuộc gọi chi tiết không được ghi lại.

Để bắt đầu, hãy nhấp vào biểu tượng Bản ghi hình tròn, tải và / hoặc sử dụng trang của bạn, sau đó nhấp vào nút Dừng để xem báo cáo:

Gần như tất cả các chỉ số này sẽ được sử dụng cho các nhà phát triển JavaScript, nhưng các vấn đề về tối ưu hóa CSS có thể đặc biệt rõ ràng do:

• Thanh màu đỏ trên cùng: Điều này cho biết tốc độ khung hình đã giảm đáng kể, có thể gây ra các vấn đề về hiệu suất. Điều này được mong đợi khi bắt đầu tải trang, nhưng quá nhiều hoạt ảnh CSS cũng có thể là một vấn đề.
• Biểu đồ tóm tắt: Các chỉ số tải, hiển thị và vẽ cao có thể chỉ ra các vấn đề về CSS.

Sửa lỗi hiệu suất CSS gián tiếp

Các bản sửa lỗi sau đây sẽ không giải quyết trực tiếp các sự cố CSS, nhưng chúng có thể giúp bạn giải quyết một số vấn đề về hiệu suất với tương đối ít nỗ lực.

Sử dụng một máy chủ tốt

Sử dụng một máy chủ lưu trữ tốt với các máy chủ gần hơn với người dùng của bạn sẽ mang lại lợi ích về hiệu suất ngay lập tức. Các gói dịch vụ lưu trữ khác nhau, nhưng có ba loại chính:

1. Chia sẻ lưu trữ: Trang web của bạn được lưu trữ trên một máy chủ vật lý, có thể cùng với hàng trăm trang web khác. Dung lượng đĩa, RAM, thời gian CPU và băng thông được chia sẻ. Các kế hoạch thường không tốn kém, nhưng hiệu suất và tính khả dụng bị ảnh hưởng bởi các trang web khác. Có thể nâng cấp, nhưng trang web của bạn nói chung sẽ vẫn trên cùng một cơ sở hạ tầng.
2. Lưu trữ chuyên dụng: Trang web của bạn được lưu trữ trên một hoặc nhiều máy chủ vật lý mà bạn sở hữu. Phần cứng có thể được cấu hình và nâng cấp theo yêu cầu. Các kế hoạch thường đắt tiền và lỗi phần cứng vẫn là vấn đề.
3. Lưu trữ đám mây: Dịch vụ lưu trữ đám mây tóm tắt cơ sở hạ tầng phần cứng thành một tập hợp các dịch vụ có thể được truy cập theo yêu cầu. Trang web của bạn có thể được cung cấp trên nhiều loại thiết bị để dễ dàng nâng cấp.

Các gói và giá dịch vụ lưu trữ đám mây khác nhau rất nhiều. Bạn có thể xem xét:

1. Các tùy chọn nền tảng như một dịch vụ (PaaS), chẳng hạn như máy chủ web ảo và cơ sở dữ liệu, hoặc
2. Tùy chọn Phần mềm như một Dịch vụ (SaaS), cung cấp các ứng dụng được quản lý hoàn toàn như WordPress.

Chuyển đổi máy chủ có thể tăng hiệu suất. Nó không có khả năng giải quyết tất cả các vấn đề của bạn, nhưng đó là một giải pháp hiệu quả về chi phí cho các vấn đề về phụ trợ và băng thông.

Bạn cũng có thể cân nhắc sử dụng mạng phân phối nội dung (CDN) hoặc CDN hình ảnh và video chuyên nghiệp có thể phân phối tải trên nhiều vị trí gần hơn với người dùng về mặt địa lý.

Tận dụng các tính năng hiệu quả của trình duyệt và máy chủ

Khoảng 10% các trang web không kích hoạt nén gzip (hoặc tốt hơn), thường là tùy chọn máy chủ mặc định. Điều này làm giảm kích thước của CSS từ 60% trở lên bằng cách nén các tệp trước khi truyền. Nó sẽ không sửa chữa CSS kém hiệu quả, nhưng mã sẽ đến sớm hơn!

Bạn cũng nên kích hoạt HTTP / 2 (hoặc tốt hơn), tính năng này sẽ gửi dữ liệu ở định dạng nhị phân nhỏ hơn, nén tiêu đề và có thể gửi nhiều tệp trên cùng một kết nối TCP.

Cuối cùng, đảm bảo trình duyệt có thể cache CSS và các tệp khác một cách hiệu quả. Đây thường là vấn đề đặt các băm Expires, Last-Modified và / hoặc ETag trong tiêu đề HTTP.

Tối ưu hóa CMS của bạn

Hệ thống quản lý nội dung như WordPress có thể được mở rộng với các chủ đề và plugin phục vụ CSS của riêng chúng. Nếu có thể, bạn nên tăng tốc CMS của mình để:

1. Loại bỏ các plugin không sử dụng.
2. Sử dụng các chủ đề gọn gàng hơn
3. Bật bộ nhớ đệm để ngăn tái tạo trang quá nhiều.

Tối ưu hóa hình ảnh của bạn

Hình ảnh không có chi phí xử lý và hiển thị giống như HTML, CSS và JavaScript, nhưng chúng chiếm một tỷ lệ lớn về trọng lượng trang và băng thông có thể sử dụng. Xem xét:

1. Loại bỏ các hình ảnh không cần thiết.
2. Thay đổi kích thước hình ảnh lớn – có thể không quá 150% kích thước tối đa mà chúng có thể xuất hiện trên màn hình.
3. Sử dụng định dạng hình ảnh thích hợp – lý tưởng là tùy chọn được nén cao như WebP hoặc AVIF, nhưng có thể là SVG cho biểu trưng và biểu đồ.
4. Thay thế hình ảnh bằng CSS gradient hoặc các hiệu ứng khác.
5. Thêm thuộc tính chiều rộng và chiều cao vào thẻ HTML <img> hoặc sử dụng thuộc tính tỷ lệ khung hình CSS mới để đảm bảo không gian thích hợp được dành trên trang trước khi tải hình ảnh xuống.

CDN hình ảnh chuyên nghiệp có thể giải quyết một số công việc này cho bạn. Để biết thêm mẹo, hãy xem hướng dẫn của chúng tôi về cách tối ưu hóa hình ảnh cho web.

Xóa CSS không sử dụng

Các kiểu nhanh nhất là những kiểu bạn không bao giờ cần tải hoặc kết xuất! Cố gắng xóa / chỉnh sửa bất kỳ mã CSS nào mà bạn không cần nữa, chẳng hạn như mã cho các trang, tiện ích hoặc khung kế thừa. Điều này có thể khó khăn trên các trang web lớn hơn và không phải lúc nào cũng rõ ràng liệu một bộ kiểu cụ thể có cần thiết hay không.

Các công cụ sau đây phân tích việc sử dụng HTML và CSS tại thời điểm xây dựng hoặc bằng cách thu thập dữ liệu URL để xác định mã thừa. Điều này không phải lúc nào cũng đầy đủ, vì vậy có thể đặt các cấu hình bổ sung để đảm bảo các kiểu được kích hoạt bởi JavaScript và các tương tác của người dùng được phép liệt kê:

• UnCSS
• CSS không được sử dụng
• PurgeCSS
• Thanh lọcCSS

Có một lựa chọn tốt hơn: Chia CSS thành các tệp riêng biệt với mức độ trách nhiệm rõ ràng và tài liệu phù hợp. Việc loại bỏ các kiểu không cần thiết sau đó trở nên dễ dàng hơn đáng kể.

Tối ưu hóa hiệu suất tải CSS

Không phải tất cả CSS đều được tải như nhau. Thẻ <link> khiêm tốn có một số tùy chọn và các câu hỏi không phải lúc nào cũng hợp lý.

Tối ưu hóa việc sử dụng Phông chữ trên Web

Phông chữ Google và các xưởng đúc phông chữ tương tự đã cách mạng hóa phông chữ web, nhưng một vài dòng mã phông chữ có thể tiêu tốn hàng trăm kilobyte băng thông.

Dưới đây là các đề xuất tối ưu hóa của chúng tôi:

1. Chỉ tải phông chữ bạn cần: Xóa phông chữ bạn không sử dụng và kiểm tra xem phông chữ mới có cần thiết hay không.
2. Chỉ tải trọng lượng và kiểu bạn cần: Hầu hết các xưởng đúc phông chữ có thể giới hạn tải xuống đối với một số bộ ký tự nhất định (chẳng hạn như chỉ Latinh), trọng số (độ dày) và chữ nghiêng (xiên). Trình duyệt có thể tự động hiển thị các kiểu bị thiếu, mặc dù kết quả có thể kém.
3. Giới hạn các ký tự bắt buộc: Các phông chữ được sử dụng không thường xuyên có thể bị giới hạn ở các ký tự cụ thể. Ví dụ: tiêu đề “Hướng dẫn CSS” trong Open Sans có thể được xác định bằng cách thêm tham số &text= vào chuỗi truy vấn phông chữ của Google: fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
4. Xem xét các phông chữ có thể thay đổi: Các phông chữ biến đổi xác định nhiều kiểu, độ đậm và độ nghiêng bằng cách sử dụng phép nội suy vectơ. Tệp phông chữ lớn hơn một chút, nhưng bạn chỉ cần một tệp chứ không phải nhiều tệp. Phông chữ đệ quy thể hiện tính linh hoạt của phông chữ biến đổi.
5. Tải phông chữ từ máy chủ cục bộ của bạn: Phông chữ tự lưu trữ hiệu quả hơn sử dụng xưởng đúc. Yêu cầu ít tra cứu DNS hơn và bạn có thể hạn chế tải xuống WOFF2, mà tất cả các trình duyệt hiện đại đều hỗ trợ. Các trình duyệt cũ hơn (tôi đang xem bạn là IE) có thể trở lại phông chữ hệ điều hành.
6. Xem xét phông chữ hệ điều hành: Phông chữ web 500 kB đó có thể trông tuyệt vời, nhưng liệu có ai để ý nếu bạn chuyển sang sử dụng Helvetica, Arial, Georgia hoặc Verdana thường có sẵn không? Phông chữ an toàn cho hệ điều hành hoặc web là một cách dễ dàng để tăng hiệu suất.

Sử dụng một tùy chọn tải phông chữ thích hợp

Các phông chữ web có thể mất vài giây để tải xuống và xử lý. Trình duyệt sẽ:

1. Hiển thị Flash của Văn bản chưa được định kiểu (FOUT): Phông chữ dự phòng sẵn có đầu tiên được sử dụng ban đầu nhưng sẽ được thay thế sau khi phông chữ web đã sẵn sàng.
2. Show a Flash of Invisible Text (FOIT): Không có văn bản nào được hiển thị cho đến khi phông chữ web sẵn sàng. Đây là quy trình mặc định trong các trình duyệt hiện đại, thường đợi ba giây trước khi hoàn nguyên về phông chữ dự phòng.

Không phải là lý tưởng. Thuộc tính CSS font-display và tham số Google Font & display = có thể chọn một tùy chọn thay thế:

• auto: Hành vi mặc định của trình duyệt (thường là FOIT).
• khối: Có hiệu quả FOIT. Văn bản ẩn trong tối đa ba giây. Không có hoán đổi phông chữ, nhưng văn bản có thể mất thời gian để xuất hiện.
• hoán đổi: Có hiệu quả. Dự phòng đầu tiên được sử dụng cho đến khi có sẵn phông chữ web. Văn bản có thể đọc được ngay lập tức, nhưng hiệu ứng hoán đổi phông chữ có thể gây chói tai. Font Style Matcher có thể được sử dụng để xác định một dự phòng có kích thước tương tự.
• dự phòng: Sự thỏa hiệp giữa FOIT và FOUT. Văn bản ẩn trong một khoảng thời gian ngắn (thường là 100 mili giây), sau đó dự phòng đầu tiên được sử dụng cho đến khi có sẵn phông chữ web.
• tùy chọn: Tương tự như dự phòng, ngoại trừ việc hoán đổi phông chữ không xảy ra. Phông chữ web sẽ chỉ được sử dụng nếu nó có sẵn trong thời gian đầu. Lần xem trang đầu tiên của bạn có thể sẽ hiển thị phông chữ dự phòng, với các lần xem tiếp theo sử dụng phông chữ web đã tải xuống và được lưu vào bộ nhớ cache.

Sử dụng hoán đổi, dự phòng hoặc tùy chọn có thể giúp tăng hiệu suất theo nhận thức.

Tránh CSS @import

@Import at-rule cho phép các tệp CSS được bao gồm trong các tệp khác:

/* main.css */ @import url("reset.css"); @import url("grid.css"); @import url("widget.css");

Đây dường như là một cách hiệu quả để tải các thành phần và phông chữ nhỏ hơn. Thật không may, mỗi @import đang chặn hiển thị và mọi tệp phải được tải và phân tích cú pháp theo chuỗi.

Nhiều <link> trong HTML hiệu quả hơn và tải các tệp CSS song song:

<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="widget.css">

Điều đó nói rằng, tốt hơn là…

Nối và rút gọn CSS

Các công cụ xây dựng hiện đại, bộ xử lý trước CSS như Sass và plugin WordPress có thể kết hợp tất cả các phần tử thành một tệp CSS lớn. Sau đó, khoảng trắng, nhận xét và ký tự không cần thiết sẽ bị xóa để giảm kích thước tệp xuống mức tối thiểu.

Nhiều tệp ít gặp vấn đề về hiệu suất hơn với HTTP / 2 và cao hơn, nhưng một tệp chỉ yêu cầu một tiêu đề và có thể được giải nén và lưu vào bộ nhớ cache hiệu quả hơn.

Các tệp CSS riêng biệt chỉ thực tế khi bạn có một hoặc nhiều bảng định kiểu được thay đổi thường xuyên – có lẽ vài lần mỗi tuần. Ngay cả khi đó, hầu hết mã CSS tĩnh vẫn có thể được kết hợp thành một tệp.

Khách hàng của Kinsta có thể truy cập tính năng thu nhỏ mã trong bảng điều khiển MyKinsta của họ để trợ giúp việc này. Tính năng này cho phép khách hàng kích hoạt tính năng thu nhỏ CSS và JavaScript tự động chỉ với một cú nhấp chuột đơn giản. Điều này giúp tăng tốc một trang web mà không cần nỗ lực thủ công.

Tránh mã hóa Base64

Các công cụ có thể mã hóa hình ảnh thành chuỗi base64, mà bạn có thể sử dụng làm URI dữ liệu trong thẻ <img> HTML và nền CSS:

.background { background-image: url('data:image/jpg;base64,ABC123...'); }

Điều này làm giảm số lượng yêu cầu HTTP, nhưng nó gây hại cho hiệu suất CSS:

• chuỗi base64 có thể lớn hơn 30% so với chuỗi nhị phân tương đương của chúng.
• trình duyệt phải giải mã chuỗi trước khi có thể sử dụng hình ảnh và
• việc thay đổi một pixel hình ảnh sẽ làm mất hiệu lực của toàn bộ tệp CSS.

Chỉ xem xét mã hóa base64 nếu bạn đang sử dụng hình ảnh rất nhỏ, không thường xuyên thay đổi trong đó chuỗi kết quả không dài hơn đáng kể so với URL.

Điều đó nói rằng, bạn có thể mã hóa UTF8 các biểu tượng SVG có thể tái sử dụng, ví dụ:

.svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

Xóa CSS Hack và Dự phòng IE

Trừ khi bạn không may mắn và có tỷ lệ người dùng Internet Explorer cao, các bảng định kiểu và hack có điều kiện của IE có thể bị xóa khỏi CSS của bạn. Trong hầu hết các trường hợp, người dùng IE vẫn sẽ nhìn thấy thứ gì đó , đặc biệt nếu bạn sử dụng thiết kế ưu tiên thiết bị di động hiển thị chế độ xem tuyến tính đơn giản hơn theo mặc định. Kết quả có thể không đẹp và sẽ không hoàn hảo đến từng pixel, nhưng ngân sách phát triển của bạn nên được chi tiêu tốt hơn khi xem xét khả năng truy cập cho tất cả người dùng.

Tải trước tệp CSS

Thẻ <link> cung cấp thuộc tính tải trước tùy chọn có thể bắt đầu tải xuống ngay lập tức thay vì đợi tham chiếu thực trong HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My page</title> <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- lots more code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

Điều này đặc biệt có lợi trong WordPress và các CMS khác, nơi một plugin có thể thêm một biểu định kiểu xuống trang.

Sử dụng CSS nội tuyến quan trọng

Các công cụ phân tích có thể gợi ý cho bạn “CSS quan trọng nội tuyến” hoặc “giảm các biểu định kiểu chặn hiển thị”. Điều này cải thiện hiệu suất bằng cách:

1. Xác định các kiểu thiết yếu được sử dụng bởi các phần tử trong màn hình đầu tiên (những kiểu hiển thị khi tải trang)
2. Nội tuyến CSS quan trọng đó vào <style> trong <head> của bạn
3. Đang tải không đồng bộ CSS còn lại để tránh bị chặn hiển thị. Điều này có thể được thực hiện bằng cách tải biểu định kiểu theo kiểu “in” mà trình duyệt ưu tiên thấp hơn. Sau đó, JavaScript sẽ chuyển nó sang kiểu phương tiện “tất cả” khi trang đã tải xong ( <noscript> đảm bảo CSS hoạt động nhưng JavaScript không khả dụng):

<style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

Các công cụ như CSS quan trọng và quan trọng có thể giúp trích xuất các kiểu cho các phần tử trong chế độ xem.

Kỹ thuật này cải thiện đáng kể hiệu suất và tăng điểm đánh giá. Các trang web hoặc ứng dụng có giao diện nhất quán sẽ dễ triển khai hơn nhưng có thể khó hơn ở những nơi khác:

• Một công cụ xây dựng là cần thiết cho tất cả trừ các trang web đơn giản nhất.
• “Màn hình gập” khác nhau trên mọi thiết bị.
• Các trang web có thể có nhiều loại bố cục yêu cầu CSS quan trọng khác nhau.
• Các công cụ CSS quan trọng có thể gặp khó khăn với các khuôn khổ cụ thể, phía máy khách được tạo HTML và nội dung động.
• Kỹ thuật này chủ yếu mang lại lợi ích cho việc tải trang đầu tiên. CSS được lưu vào bộ nhớ đệm cho các trang tiếp theo, vì vậy các kiểu nội tuyến bổ sung sẽ làm tăng trọng lượng trang.

Sử dụng kết xuất truy vấn phương tiện

Một kết hợp và rút gọn duy nhất sẽ mang lại lợi ích cho hầu hết các trang web, nhưng các trang web yêu cầu số lượng lớn kiểu màn hình lớn hơn có thể chia nhỏ các tệp CSS và tải bằng cách sử dụng truy vấn phương tiện:

<!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

Ví dụ này giả định một phương pháp ưu tiên thiết bị di động. Thiết bị di động tải core.css nhưng có thể không cần tải xuống hoặc phân tích cú pháp các bảng định kiểu còn lại.

Sử dụng kết xuất lũy tiến

Kết xuất liên tục là một kỹ thuật xác định các biểu định kiểu riêng lẻ cho các trang hoặc thành phần riêng biệt. Nó có thể mang lại lợi ích cho các trang web rất lớn, nơi các trang riêng lẻ được xây dựng từ một loạt các thành phần.

Mỗi tệp CSS được tải ngay lập tức trước khi một thành phần được tham chiếu trong HTML:

<head> <!-- core styles --> <link rel="stylesheet" href="core.css" /> </head> <body> <!-- header --> <link rel="stylesheet" href="header.css" /> <header>...</header> <!-- primary content --> <link rel="stylesheet" href="main.css" /> <main> <!-- widget styling --> <link rel="stylesheet" href="widget.css" /> <div class="mywidget>...</div> </main> <!-- footer --> <link rel="stylesheet" href="footer.css" /> <footer>...</footer> </body>

Điều này hoạt động tốt trong hầu hết các trình duyệt. (Safari hiển thị một trang trống cho đến khi tất cả CSS được tải, nhưng nó sẽ không tệ hơn một biểu định kiểu lớn.)

Việc áp dụng Thành phần Web cũng khuyến khích việc sử dụng các kiểu phạm vi được tải khi phần tử tùy chỉnh được hiển thị.

Tối ưu hóa hiệu suất CSS

Các thuộc tính và kỹ thuật CSS đặt các dòng khác nhau lên trình duyệt, CPU, bộ nhớ, băng thông và các tài nguyên khác. Các mẹo sau đây có thể giúp bạn tránh các quá trình xử lý không cần thiết và hiệu suất chậm chạp.

Áp dụng các kỹ thuật bố cục hiện đại (Grid và Flexbox)

Các bố cục dựa trên float rất khó tạo, sử dụng nhiều thuộc tính, yêu cầu liên tục chỉnh sửa phần đệm và lề, phải được quản lý bằng cách sử dụng các truy vấn phương tiện và phải xử lý trình duyệt đáng kể. Chúng là phương pháp bố trí khả thi duy nhất trong nhiều năm, nhưng không còn cần thiết nữa. Sử dụng:

• CSS Flexbox dành cho các bố cục một chiều có thể chuyển sang hàng tiếp theo. Nó lý tưởng cho menu, phòng trưng bày hình ảnh, thẻ, v.v.
• CSS Grid cho bố cục hai chiều với các hàng và cột rõ ràng. Nó lý tưởng cho bố cục trang.

Cả hai đều đơn giản hơn để phát triển, sử dụng ít mã hơn, hiển thị nhanh hơn và thích ứng với bất kỳ kích thước màn hình nào mà không cần truy vấn phương tiện.

Các trình duyệt rất cũ sẽ không nhận ra các thuộc tính flexbox và lưới hiện đại, vì vậy mỗi phần tử sẽ trở thành một khối. Hiển thị chúng trong một bố cục tuyến tính giống như thiết bị di động đơn giản: không cần phải mô phỏng thiết kế với các dự phòng dựa trên float .

Thay thế hình ảnh bằng CSS Gradients and Effects

Nếu có thể, hãy chọn mã CSS thay vì hình ảnh. Thử nghiệm với gradient, đường viền, bán kính, bóng đổ, bộ lọc, chế độ hòa trộn, mặt nạ, cắt và hiệu ứng phần tử giả để sử dụng lại hoặc thay thế hình ảnh hiện có.

Các hiệu ứng CSS sử dụng ít băng thông hơn đáng kể, dễ sửa đổi hơn và thường có thể được làm động.

Tránh lạm dụng tài sản đắt tiền

Bạn có thể có mã khai báo ngắn gọn, nhưng một số CSS yêu cầu xử lý nhiều hơn các CSS khác. Các thuộc tính sau đây kích hoạt tính toán sơn có thể tốn kém khi được sử dụng quá mức:

• position: fixed
• border-radius
• box-shadow
• text-shadow
• opacity
• transform
• filter
• backdrop-filter
• background-blend-mode

Sử dụng chuyển tiếp CSS và hoạt ảnh khi có thể

Các hiệu ứng chuyển tiếp và hoạt ảnh CSS sẽ luôn mượt mà hơn các hiệu ứng do JavaScript hỗ trợ, vốn sẽ sửa đổi các thuộc tính tương tự. Chúng sẽ không được xử lý trong các trình duyệt quá cũ nhưng vì chúng có khả năng đang chạy trên các thiết bị có khả năng thấp hơn, đó là điều tốt nhất.

Tuy nhiên, tránh hoạt ảnh quá nhiều. Các hiệu ứng sẽ nâng cao trải nghiệm người dùng mà không ảnh hưởng xấu đến hiệu suất hoặc gây say tàu xe. Kiểm tra truy vấn phương tiện chuyển động giảm ưu tiên và tắt hoạt ảnh khi cần thiết.

Tránh các thuộc tính hoạt ảnh kích hoạt bố cục lại

Việc thay đổi kích thước của phần tử (chiều rộng, chiều cao, phần đệm, đường viền) hoặc vị trí (trên cùng, dưới cùng, trái, phải, lề) có thể khiến toàn bộ trang được bố trí lại trên mọi khung hoạt ảnh. Các thuộc tính hiệu quả nhất để tạo hoạt ảnh là:

• opacity
• filter : Làm mờ, tương phản, đổ bóng và các hiệu ứng khác
• transform : Để dịch (di chuyển), chia tỷ lệ hoặc xoay một phần tử

Các trình duyệt có thể sử dụng GPU tăng tốc phần cứng để hiển thị các hiệu ứng này trong lớp của riêng họ, do đó, chỉ giai đoạn tổng hợp bị ảnh hưởng.

Nếu bạn phải tạo hoạt ảnh cho các thuộc tính khác, bạn có thể cải thiện hiệu suất bằng cách lấy phần tử ra khỏi luồng trang với vị trí: tuyệt đối.

Theo dõi các bộ chọn phức tạp

Các trình duyệt sẽ nhanh chóng phân tích cú pháp các bộ chọn CSS phức tạp nhất, nhưng việc đơn giản hóa chúng sẽ làm giảm kích thước tệp và cải thiện hiệu suất. Các bộ chọn phức tạp thường được tạo ra khi bạn tạo các cấu trúc lồng nhau sâu trong các bộ tiền xử lý CSS như Sass.

Cho biết các yếu tố nào sẽ thay đổi

Thuộc tính CSS will-change cho phép bạn cảnh báo cách một phần tử sẽ bị thay đổi hoặc hoạt ảnh để trình duyệt có thể thực hiện tối ưu hóa trước:

.myelement { will-change: transform, opacity; }

Có thể xác định bất kỳ số lượng giá trị được phân tách bằng dấu phẩy nào, nhưng thuộc tính chỉ nên được sử dụng như một phương sách cuối cùng để khắc phục các vấn đề về hiệu suất đã biết. Bạn không nên áp dụng nó cho quá nhiều phần tử và hãy đảm bảo cho nó đủ thời gian để khởi tạo.

Cân nhắc CSS Containment

Containment là một tính năng CSS mới có thể cải thiện hiệu suất bằng cách cho phép bạn xác định các cây con riêng biệt của một trang. Trình duyệt có thể tối ưu hóa quá trình xử lý bằng cách kết xuất – hoặc không kết xuất – một khối nội dung DOM cụ thể.

Thuộc tính chứa chấp nhận một hoặc nhiều giá trị sau trong danh sách được phân tách bằng dấu cách:

• none : Không áp dụng biện pháp ngăn chặn
• layout : Bố cục của phần tử được tách biệt với phần còn lại của trang – nội dung của phần tử đó sẽ không ảnh hưởng đến các phần tử khác
• paint : Phần tử con không được hiển thị bên ngoài ranh giới của nó
• size : Kích thước của phần tử có thể được xác định mà không cần kiểm tra các phần tử con – các kích thước độc lập với nội dung

Hai giá trị đặc biệt cũng có sẵn:

• strict : Tất cả các quy tắc ngăn chặn (ngoại trừ không có) đều được áp dụng
• content : Áp dụng bố cục và sơn

Một trang có danh sách <ul> với contain: strict; đã áp dụng. Nếu bạn thay đổi nội dung của bất kỳ phần tử nào <li> , trình duyệt sẽ không tính toán lại kích thước hoặc vị trí của mục đó, các mục khác trong danh sách hoặc bất kỳ phần tử nào khác trên trang.

Tính năng ngăn CSS được hỗ trợ trong hầu hết các trình duyệt hiện đại. Không có hỗ trợ trong Safari hoặc các ứng dụng cũ hơn, nhưng tính năng ngăn chặn có thể được sử dụng một cách an toàn trong những ứng dụng này vì trình duyệt sẽ đơn giản bỏ qua thuộc tính.

Phản ứng với Tiêu đề Lưu dữ liệu

Save-Data là một tiêu đề yêu cầu HTTP cho biết người dùng đã yêu cầu giảm dữ liệu. Nó có thể được gắn nhãn chế độ “Lite” hoặc “Turbo” trong một số trình duyệt.

Khi được bật, tiêu đề Save-Data sẽ được gửi với mọi yêu cầu của trình duyệt:

GET /main.css HTTP/1.0 Host: site.com Save-Data: on

Máy chủ có thể phản hồi tương ứng khi Lưu dữ liệu được phát hiện. Trong trường hợp của CSS, nó có thể gửi một bố cục tuyến tính giống như thiết bị di động đơn giản hơn, sử dụng phông chữ OS, chuyển sang màu khối hoặc tải hình nền có độ phân giải thấp.

Lưu ý rằng máy chủ phải trả lại tiêu đề sau đối với các yêu cầu đã sửa đổi để đảm bảo nội dung tối thiểu không được lưu vào bộ nhớ cache và được sử dụng lại khi người dùng tắt chế độ Lite / Turbo:

Vary: Accept-Encoding, Save-Data

Tiêu đề cũng có thể được phát hiện bởi JavaScript phía máy khách. Đoạn mã sau thêm lớp bestUX vào phần tử <html> khi Lưu dữ liệu không được bật:

if ('connection' in navigator && !navigator.connection.saveData) { document.documentElement.classList.add('bestUX'); }

Sau đó, các biểu định kiểu có thể phản ứng tương ứng mà không cần bất kỳ thao tác nào của máy chủ:

/* no hero image by default */ header { background-color: #abc; background-image: none; } /* hero image when no Save-Data */ .bestUX header { background-image: url("hero.jpg"); }

Truy vấn phương tiện truyền thông dữ liệu được giảm thiểu ưu tiên cung cấp tùy chọn chỉ CSS như một lựa chọn thay thế, mặc dù tùy chọn này không được hỗ trợ trong bất kỳ trình duyệt nào tại thời điểm viết bài:

/* no hero image by default */ header { background-color: #abc; background-image: none; } /* hero image when no Save-Data */ @media (prefers-reduced-data: no-preference) { header { background-image: url("hero.jpg"); } }

Bản tóm tắt

Có nhiều tùy chọn để tối ưu hóa hiệu suất CSS, nhưng đối với các dự án mới, hãy xem xét các phương pháp sau:

1. Sử dụng phương pháp ưu tiên thiết bị di động: Trước tiên hãy viết mã bố cục di động đơn giản nhất, sau đó thêm các tính năng nâng cao khi không gian màn hình và bộ tính năng của trình duyệt tăng lên.
2. Chia CSS thành các tệp riêng biệt với các trách nhiệm có thể xác định: Trình xử lý trước CSS hoặc plugin CMS có thể kết hợp các phần tử CSS thành một tệp duy nhất.
3. Thêm bước xây dựng: Có sẵn các công cụ có thể tự động ghép mã, xác định sự cố, nối, thu nhỏ, giảm kích thước hình ảnh và hơn thế nữa. Tự động hóa làm cho cuộc sống dễ dàng hơn và bạn ít có khả năng quên một bước tối ưu hóa.
4. Tài liệu hóa các bảng định kiểu của bạn: Một hướng dẫn kiểu với các ví dụ được ghi lại sẽ giúp mã của bạn dễ lấy và duy trì hơn. Bạn sẽ có thể xác định và xóa CSS cũ mà không phải đổ mồ hôi.

Cuối cùng, hãy học CSS! Bạn càng biết nhiều, bạn càng cần viết ít mã và ứng dụng web của bạn sẽ trở nên nhanh hơn. Nó sẽ giúp bạn trở thành một nhà phát triển tốt hơn bất kể bạn sử dụng nền tảng và khuôn khổ nào.

Bạn có những mẹo nào khác để tối ưu hóa hiệu suất CSS? Hãy chia sẻ chúng trong phần bình luận!