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

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

  • Cách CSS được sử dụng để 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

CSS có thể được sử dụng theo nhiều cách khác nhau bởi trang web 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 có nhiều cách thiết lập CSS khác nhau.

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

Một 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…

Lý do thiết lập CSS này là lý tưởng bởi vì nó sẽ tối thiểu hóa CSS chặn hiển thị và 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: https://varvy.com/tools/css-delivery/ để có được cái nhìn tổng quan về cách trang web của bạn 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 của bạn được sử 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="http://ten-mien-cua-ban.com/main.css" media="screen" title="style (screen)" />

Đây được gọi là “file” CSS của bạn và 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 HTML của bạn. Việc có các file CSS ngoài là cách thức thông thường để xử lý CSS của bạn và nó có lợi thế ở khía cạnh CSS có khả năng cache (ghi nhớ) bởi trình duyệt web. Vấn đề xảy ra khi bạn có nhiều tệp này. Thật không may, đây 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).

  • Để biết bạn có bao nhiêu file CSS ngoài trên trang của bạn, hãy sử dụng công cụ này: https://varvy.com/tools/css-delivery/
  • Để 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.

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, hãy vào đây: https://varvy.com/tools/css-delivery/
  • Để có được các hướng dẫn về cách nội tuyến CSS, hãy đọc bài viết kế tiếp của chúng tôi

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 mà 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, và nhiều người thiết kế vẫn sử dụng nên nó cần được kiểm tra.

  • Để xem nếu trang web của bạn sử dụng @import CSS để gọi, hãy vào công cụ này: https://varvy.com/tools/css-delivery/
  • Để 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à một 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 rất nhiều để 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. 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ó.

Khép lại

Như bạn có thể thấy có nhiều cách CSS được sử 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à 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 công cụ phân tích phân phối CSS: https://varvy.com/tools/css-delivery/

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

Leave a Comment