Categories Tối ưu CSS

Tối ưu hóa phân phối CSS trong tăng tốc website

tối ưu phân phối css

Phân phối CSS là gì?

  • Cách dùng CSS để render (hiển thị) trang;
  • Bao gồm việc sử dụng file CSS ngoài (external), CSS nội bộ (internal) hoặc kết hợp cả hai.

Trang web có thể sử dụng CSS theo nhiều cách khác nhau và chúng đều hoạt động được bình thường. Vì nó có nhiều cách sử dụng nên cũng tồn tại nhiều cách thiết lập CSS khác nhau & một số cách sẽ tối ưu hơn cách khác.

Dù bạn có đang thiết lập CSS trên các trang web của bạn như thế nào đi nữa thì CSS cần phải giúp trang của bạn hiển thị (render) nhanh hơn chứ không nên làm chậm chúng đi.


Một số ví dụ về “tối ưu hóa phân phối CSS”

tối ưu hóa phân phối CSS

Thiết lập CSS lý tưởng sẽ là một cái gì đó trông giống như thế này này…

  • Không có CSS bên ngoài nào hoặc chỉ có một CSS ngoài có dung lượng hợp lý (ít hơn 75 KB);
  • Nội tuyến các đoạn CSS nhỏ vào trong HTML sử dụng thẻ style cho nội dung nằm trong màn hình đầu tiên;
  • Không thực hiện các lời gọi @import cho CSS;
  • Không có CSS trong các phần từ HTML như trong thẻ div hoặc h1 (CSS nằm trong phần tử/in element CSS).

Lý do thiết lập CSS trên là lý tưởng bởi vì nó sẽ tối thiểu hóa CSS chặn hiển thị và nhờ vậy trang sẽ tải nhanh hơn rất nhiều.

Nếu bạn đã quen thuộc với các dạng phân phối CSS khác nhau, thế thì bạn có thể sử dụng công cụ phân tích phân phối CSS để có được cái nhìn tổng quan về cách trang web của bạn đang sử dụng CSS.

Nếu bạn chưa quen thuộc, cũng đừng vì thế mà sợ, tôi sẽ giải thích chúng bên dưới (tôi hứa là nó sẽ dễ hiểu hơn).


File CSS bên ngoài

File CSS bên ngoài là cách thức chính CSS được sử dụng trên các trang web, và rất có khả năng đây cũng là cách CSS trên website của bạn được dùng. Trong phần đầu của tài liệu HTML bạn sẽ thấy một đoạn mã nào đó trông giống như thế này…

<link rel="stylesheet" type="text/css" href="https://kiencang.net/main.css" media="screen" title="style (screen)" />

Đây được gọi là “file” CSS của bạn và nhưng chúng được gọi là “bên ngoài” bởi vì các hướng dẫn CSS này nằm trong một file tách biệt với file HTML.

Việc có các file CSS ngoài là cách thức thông thường để xử lý CSS và nó đem lại lợi thế ở khía cạnh CSS có khả năng được cache (ghi nhớ) bởi trình duyệt web (ngoài ra là khả năng dùng chung CSS giữa các trang, giúp cho việc chỉnh sửa được áp dụng hàng loạt).

Vấn đề xảy ra khi bạn có nhiều tệp này. Thật không may, đây lại là trường hợp thường xảy ra trong WordPress và các kiểu giao diện khác.


Nếu bạn có nhiều hơn một file CSS, thế thì chúng cần phải được kết hợp lại để trở thành một file

kết hợp CSS

Khi mà bạn có nhiều file CSS bên ngoài, trình duyệt sẽ phải tải từng cái xuống trước khi nó có thể hiển thị trang web cho người dùng. Đây là nguyên nhân tạo ra nhiều vòng lặp để lấy file CSS và hệ quả là trang web của bạn tải chậm đi.

Điều này có thể được thay đổi dễ dàng bằng cách kết hợp tất cả file CSS thành một file duy nhất (trong WordPress, bạn có thể làm điều này dễ dàng bằng plugin Autoptimize, trong hầu hết các plugin cache trả phí bạn cũng làm được điều này rất dễ dàng).

  • Để biết bạn có bao nhiêu file CSS ngoài trên trang, bạn hãy sử dụng công cụ như pagespeed.web.dev.
  • Để nhận được hướng dẫn về cách kết hợp các file CSS bên ngoài, hãy đọc bài viết khác của chúng tôi.

Liên hệ với WordPress: việc chỉ có một file CSS duy nhất nhẹ nhàng trên trang WordPress ngày nay là rất khó, nhất là trên các trang có thiết kế phức tạp. Ngoài ra với sự nâng cấp lên http/2 việc tải song song CSS giảm tối thiểu nguy cơ chậm do có nhiều CSS ngoài. Ngày này một số người khuyên rằng trong nhiều trường hợp bạn không nên gộp toàn bộ CSS thành một file duy nhất. Điều này là hợp lý, vì nó sẽ giúp cải thiện thời gian tạo cache, tăng khả năng file CSS đó đã được cache từ trước trong trình duyệt của người dùng.


CSS nội tuyến

CSS nội tuyến

CSS nội tuyến là các chỉ dẫn CSS được bao gồm luôn trong chính tài liệu HTML. Lợi thế chính của phương pháp này là nó không cần lấy thêm file (bên ngoài) trước khi trang được hiển thị. Tuy nhiên điều này chỉ đúng khi mà các chỉ dẫn CSS là nhỏ gọn. Nếu CSS của bạn lớn, đây không phải là phương thức phù hợp đâu.

Định dạng nội tuyến được thực hiện bằng cách đặt các chỉ dẫn CSS vào bên trong thẻ <style> như hình bên dưới…

<style>
đặt CSS ở đây
</style>

Nội tuyến các đoạn CSS nhỏ có thể thực sự tăng tốc tải website trong trình duyệt.

  • Để xem trang web của bạn có sử dụng CSS nội tuyến hay không, bạn hãy vào xem mã của website.
  • Để có được các hướng dẫn về cách nội tuyến CSS, hãy đọc bài viết trong link vừa dẫn.

Liên hệ với WordPress: trong WordPress, CSS nội tuyến hay được áp dụng với Critical CSS, tức là các CSS quan trọng cho việc hiển thị nội dung trong màn hình đầu tiên.


Không sử dụng @import để gọi các file CSS

không sử dụng phương thức @import

Phương thức @import là cách thức khi file CSS ngoài được gọi bằng cách sử dụng lệnh @import chứ không phải là liên kết nó trực tiếp như được thảo luận ở bên trên.

Phương thức này là nguyên nhân làm cho các file CSS hoặc các file khác được gọi tải xuống chậm hơn so với phương thức liên kết vì chúng chỉ có thể tải xuống một lần vào một thời điểm [khi sử dụng phương thức này]. Trong đoạn mã của bạn, nó trông giống như dưới đây…

@import url("style.css")

Các lời gọi như thế này thực sự gây nguy hiểm cho tốc độ trang web, nhưng nhiều người làm thiết kế vẫn sử dụng nên nó cần được kiểm tra kỹ.

  • Để xem trang web của bạn có sử dụng @import để gọi CSS hay không, hãy sử dụng các công cụ phân tích tốc độ hoặc xem mã nguồn của trang
  • Để hiểu thêm về phương thức này hãy đón đọc bài kế tiếp của chúng tôi;

Đừng nội tuyến các thuộc tính CSS vào trong phần tử HTML

nội tuyến CSS vào trong phần tử HTML là điều không nên làm

Có một tình trạng rất phổ biến là nhiều người đưa các style CSS vào trong phần tử HTML, trong thực tế, tôi là người lúc nào cũng có xu hướng làm thế. Hướng dẫn tăng tốc độ web của Google ở phần hướng dẫn “tối ưu hóa phân phối CSS” nói rằng chúng ta không được phép làm vậy một chút nào.

Họ nói rằng điều này sẽ là nguyên nhân làm trình duyệt phản hồi chậm và sẽ không không khôn ngoan khi đưa các mã định dạng vào trong phần tử HTML bởi vì điều đó đi ngược lại Chính sách Bảo mật Nội dung của W3- cái là giao thức bảo mật có chức năng chặn mọi style cấp độ phần tử theo mặc định. Những style đó trông giống như sau…

<p style="float:left;"> hoặc <div style="color:#fff;">

Tôi có rất nhiều những đoạn mã như vậy trong code của mình, và tôi đã phải làm việc vất vả để hoàn toàn loại bỏ chúng. Để xem trang web của bạn có chứa những đoạn CSS như vậy hay không hãy vào công cụ mà chúng tôi đã nói ở trên.


Thiết kế web

Cách CSS được sử dụng trên trang web gần như được quyết định hoàn toàn bởi người thiết kế web, chứ không phải chủ trang web (hoặc người quản trị web). Vì thế người thiết kế web tạo ra các đoạn CSS dễ thương, được chú thích đầy đủ và đặt nó vào các file khác nhau để dễ hiểu hơn. Họ nghĩ, với tâm thế của người giúp đỡ, “Ta vừa mới thực hiện một công việc vô cùng tuyệt vời”. Đấy là những gì họ đã được dạy!

Thật không may, thực hành này và những cái khác cuối cùng lại giết chết hiệu năng của trang web. Nếu CSS ở dạng nhiều file, sẽ có nhiều yêu cầu được thực hiện trước khi trang có thể hiển thị trên trình duyệt, làm chậm tốc độ tải trang, đặc biệt là trên thiết bị di động. Tất cả CSS phải được đưa vào chỉ một file duy nhất để trang web có hiệu năng tốt nhất có thể.

Khi nhận ra điều này, bạn sẽ lưu ý những người thiết kế web cần bắt đầu tạo ra các đoạn mã giúp người dùng của họ (bằng cách tải nhanh nhất có thể), dầu vậy, ở thời điểm này…Bạn có thể đang có các đoạn mã CSS gây nguy hiểm cho website của bạn hơn là giúp đỡ nó.


Kết luận

Như bạn có thể thấy, CSS có nhiều cách dùng trên trang, nhưng nói tóm lại là chúng ta cần dọn dẹp sạch sẽ các đoạn mã và sử dụng các khuyến nghị về phân phối CSS để đảm bảo rằng các trang web của chúng ta được tải nhanh nhất có thể.

Các lời khuyên bao gồm:

  • Kết hợp các style CSS ngoài;
  • Nội tuyến CSS nhỏ trong thẻ style;
  • Không sử dụng @import để gọi CSS khi thích hợp;
  • Không đưa CSS vào trong các phần tử HTML như là trong các thẻ div hoặc thẻ h1 của bạn (nội tuyến CSS trong phần tử);
  • Tất cả những thứ trên có thể được kiểm tra với đa số các công cụ phân tích tốc độ trang.

(Được dịch từ bài viết: Optimize CSS delivery – Tác giả: Patrick Sexton – Website: Varvy)

Back to Top