6 mẹo cải thiện hiệu suất CSS tăng tốc độ tải trang
CSS hay cascading style sheet có thể biến các HTML document nhàm chán thành các trang web sống động, nhưng việc sử dụng CSS không đúng cách có thể làm tê liệt một trang web trước khi trang bắt đầu hiển thị. Hướng dẫn sau Bizfly Cloud sẽ đưa ra một số cách nhanh chóng và dễ dàng để cải thiện hiệu suất CSS trên trang của bạn và giúp trang cung cấp nội dung nhanh chóng hơn.
Hiệu suất CSS ảnh hưởng đến tốc độ tải trang như thế nào?
Khi đánh giá tốc độ của một trang web, có nhiều thước đo hiệu suất, tuy nhiên có hai số liệu nổi bật là:
- Time to first byte
- Time to start render
Time to first byte là thời gian để nhận được byte dữ liệu đầu tiên sau khi yêu cầu 1 URL.
Time to start render là thời điểm mà trình duyệt người dùng thực sự bắt đầu hiển thị nội dung. Time to first byte chủ yếu phụ thuộc vào thiết lập máy chủ của bạn, trong khi Time to start render phụ thuộc nhiều hơn vào cách bạn cấu trúc CSS.
Các trình duyệt sẽ không render cho đến khi chúng nhận được dữ liệu, do đó, time to first byte rõ ràng sẽ đẩy lùi thời gian để bắt đầu render xuống. Do đó, bạn nên ưu tiên giải quyết mọi sự cố tiềm ẩn có thể xảy ra với máy chủ trước khi nghĩ đến việc gặt hái toàn bộ lợi ích của việc tối ưu hóa hiệu suất CSS.
Hiệu suất CSS ảnh hưởng đến Time to start render như thế nào?
Trước khi một trình duyệt có thể bắt đầu đưa ra một nội dung trên trang web, trình duyệt cần các hướng dẫn dưới dạng HTML và CSS. Do đó, việc render không thể bắt đầu cho đến khi tất cả các external stylesheet đã được tải xuống và xử lý. Chu trình này càng dài, khách truy cập phải chờ đợi càng lâu hơn.
Sử dụng external CSS liên quan đến việc thực hiện một hoặc nhiều yêu cầu HTTP, vì vậy mục tiêu của bạn là giảm thiểu số lượng yêu cầu càng nhiều càng tốt. Ví dụ: đặt plugin, banner và kiểu liên kết bố cục vào một tệp .css có thể tăng tốc đáng kể thời gian bắt đầu render.
>>> Đọc thêm: 5 công cụ kiểm tra Website Speed Test miễn phí
Một số mẹo để cải thiện hiệu suất CSS
1. Sử dụng preload / HTTP/2 Push
Phần thông tin gợi ý về tài nguyên tải trước yêu cầu các trình duyệt "lấy" tài nguyên sớm hơn so với cách khác. Để giúp CSS của bạn bắt đầu, hãy đặt nó làm thẻ liên kết trong tài liệu HTML của bạn như sau:
Ngoài ra, bạn có thể đưa pre-load dưới dạng tiêu đề HTTP trong cấu hình máy chủ của mình:
Nếu máy chủ của bạn được cấu hình cho HTTP / 2 (cần phải có), preload sẽ được hiểu là một lần server push. Bizfly CDN cũng hỗ trợ HTTP/2, điều này sẽ giúp tăng tốc hơn nữa việc phân phối các tệp CSS có độ ưu tiên cao.
2. Đừng inline tất cả mọi thứ
Bạn không nên inline mọi thứ trong tệp HTML vì điều này sẽ khiến tài liệu HTML ban đầu tăng kích thước và do đó mất nhiều thời gian hơn cho TTFB.
3. Ghép và thu nhỏ CSS
Ghép các stylesheet của bạn vào một tệp và gửi một phiên bản rút gọn có thể làm giảm đáng kể kích thước CSS.
4. Giảm kích thước stylesheet
Các stylesheet của bạn càng nhỏ và càng ít bộ chọn, các trình duyệt sẽ chỉ phải thực hiện ít công việc hơn khi hiển thị website. Do đó, bạn nên cố gắng hết sức để loại bỏ các bộ chọn không cần thiết, tận dụng các lớp tiện ích và tránh mã CSS trùng lặp. Bạn có thể sử dụng một công cụ như uncss để đảm bảo stylesheet của bạn chỉ chứa mã CSS cần thiết.
5. Tránh các thuộc tính "tốn kém"
Một số thuộc tính CSS tốn tài nguyên hơn đáng kể so với các thuộc tính khác, vì vậy chúng nên được sử dụng một cách thận trọng. Đây là một vài thuộc tính cần chú ý:
- border-radius
- box-shadow
- filter
- :nth-child
- position: fixed;
- transform
Thỉnh thoảng, bạn vẫn có thể sử dụng các thuộc tính trên, nhưng nếu chúng xuất hiện hàng trăm lần trên mỗi trang, thì hiệu suất CSS tổng thể có thể bị ảnh hưởng.
6. Tránh @import
Không bao giờ sử dụng lệnh @import để để đưa vào các external stylesheet vì nó chặn tải xuống song song. Đây là một cách làm đã không còn phổ biến nữa. Thay vào đó, luôn luôn sử dụng thẻ liên kết hay link tag.
Cho dù website của bạn có lung linh hoàn hảo như thế nào sau khi tải xuống, mọi nỗ lực đều sẽ chỉ như "dã tràng se cát" nếu khách truy cập quay lưng trước khi họ nhìn thấy thành quả của bạn. Việc tích hợp các chiến lược trên khi code web sẽ cho phép bạn xây dựng các trang web hiển thị nhanh hơn và hoạt động ổn định hơn, điều này sẽ khuyến khích những vị khách mới tiếp tục quay lại.
Tại Việt Nam hiện nay, CDN do Bizfly Cloud cung cấp có tích hợp tính năng tự động tối ưu CSS và JS. Ngoài ra công nghệ còn sở hữu nhiều kỹ thuật truyền và nén dữ liệu, tự động chỉnh sửa kích cỡ hình ảnh, và nhiều tính năng tiên tiến khác, cho website khả năng bứt phá tốc độ ấn tượng - gấp 16 lần tốc độ tải trang hiện tại. Bizfly Cloud CDN đang phục vụ rất nhiều hệ thống lớn cho các doanh nghiệp hàng đầu trên thị trường như báo Tuổi trẻ, Dân trí, Topica, VTV...
Để giúp khách hàng có thể trải nghiệm và cảm nhận chất lượng dịch vụ chân thực và trực tiếp nhất, Bizfly Cloud hiện đang hỗ trợ MIỄN PHÍ CDN bản dùng thử 100GB trong 30 ngày. Khách hàng có thể truy cập và đăng ký tài khoản ngay hôm nay tại:
Tham khảo thêm về dịch vụ CDN từ Bizfly tại đây: https://bizflycloud.vn/cdn/
Theo Bizfly Cloud tổng hợp
>> Có thể bạn quan tâm: 4 bước tăng tốc website nhiều ảnh dung lượng lớn
