Categories Tối ưu CSS

Nội tuyến (inline) các CSS nhỏ giúp tăng tốc website

nội tuyến CSS nhỏ

CSS nội tuyến là gì?

  • CSS nội tuyến (inline) đề cập đến các CSS được đặt trong file HTML;
  • Nó được đặt trong phần đầu của tài liệu, nằm giữa các thẻ style;
  • Nội tuyến CSS đơn giản là đặt CSS của bạn vào trong file HTML thay vì để nó ở file CSS bên ngoài (external – dạng .css).

Tại sao bạn sử dụng biện pháp này?

Nội tuyến CSS làm giảm số lượng file mà trình duyệt phải tải xuống trước để hiển thị trang web của bạn. Nếu bạn sử dụng một file CSS ngoài, trình duyệt trước tiên phải tải file HTML, sau đó mới tải file CSS của bạn.

Sau khi bạn nội tuyến CSS, trình duyệt chỉ phải tải file HTML mà thôi. Tải một file thì nhanh hơn so với tải hai file. Khi được làm đúng, nó đóng góp vai trò quan trọng trong giải pháp tổng thể của việc tối ưu hóa phân phối CSS.


Nội tuyến CSS như thế nào

Bạn chỉ việc copy nội dung của file CSS ngoài và paste nó vào giữa thẻ style trong phần đầu (head) của file HTML.

Nó trông giống như thế này:

<style>
   CSS nội tuyến được đặt ở đây.
</style>

Điều quan trọng cần nhớ là đặt thông tin này vào trong phần đầu của HTML. Bạn phải sử dụng thẻ style HTML chính xác. Copy và paste nội dung của file CSS ngoài để đưa vào trong giữa thẻ style, ví dụ:

<style>
body{margin:0;padding:0;background:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#555;}
h1, h2, h3{margin:0;padding:0;font-weight:normal;color:#555;}
h1{font-size:3.5em;}
h2{font-size:2.4em;}
h3{font-size:1.6em;}
p, ul, ol{margin-top:0;line-height:180%;}
a{text-decoration:underline;color:#FF2929;}
</style>

Cái này có tác dụng gì?

Đặt CSS của bạn vào trong phần đầu của HTML sẽ giúp trình duyệt web giảm số vòng lặp khứ hồi (round trip) đến máy chủ, vì bạn không cần phải tải file CSS riêng rẽ nằm ngoài thì trình duyệt mới thấy được CSS, nó thấy được CSS ngay khi tải HTML rồi.

Nó cho phép giảm CSS chặn hiển thịđẩy nhanh tốc độ tải trang web.


Lợi và Hại

Trong khi nó giảm số vòng lặp khứ hồi đến máy chủ (cái lợi) thì điều này cũng khiến cho việc file CSS của bạn sẽ không được lưu vào bộ nhớ đệm của trình duyệt (cái hại).

Khi bạn sử dụng file CSS ngoài, toàn bộ file sẽ được cache (ghi nhớ) bởi trình duyệt vì thế nó sẽ không phải mất công tốn sức thực hiện các bước tải lặp lại khi người dùng ghé thăm trang khác trên cùng website của bạn.

Khi bạn nội tuyến CSS, cache CSS sẽ không tồn tại, và CSS được đọc và tải lại từ đầu khi người dùng ghé thăm trang khác trên website. Điều này sẽ không thành vấn đề nếu CSS của bạn nhỏ và đơn giản. Nếu CSS của bạn lớn và phức tạp, thì bạn nên cân nhắc việc để chúng thành file CSS tách riêng để tận dụng được lợi thế cache, đấy sẽ là lựa chọn tốt hơn.

Nhiều người nội tuyến CSS vào trong trang chủ hoặc trang landing pages của họ để trang có thể tải siêu nhanh, với các trang còn lại trên website thì họ sử dụng CSS ngoài.

Google khuyến nghị nội tuyến các CSS chặn hiển thị…

“Để có hiệu suất tốt nhất, bạn có thể cân nhắc nội tuyến các CSS quan trọng trực tiếp vào tài liệu HTML.

Điều này giúp loại bỏ các vòng lặp bổ sung vào trong tuyến hiển thị quan trọng và nếu làm chính xác có thể được sử dụng để phân phối đường dẫn quan trọng có độ dài “một vòng lặp” nơi mà chỉ HTML là tài nguyên chặn hiển thị“.

Bạn có thể sử dụng các công cụ phân tích phân phối CSS, để biết cách CSS được sử dụng như thế nào trên trang web nào đó.

(Dịch từ bài viết: Inline small CSS – Tác giả: Patrick Sexton – Website: Varvy)

Back to Top