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

12/01/2019

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

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

CSS có thể được sử dụng theo nhiều cách bởi một trang web và mà hoạt động bình thường vì thế có nhiều cách để thiết lập CSS khác nhau.

Bất kể nó được thiết lập như thế nào trên các trang của bạn, CSS của bạn sẽ giúp các trang web của bạn hiển thị nhanh hơn chứng không làm ảnh hưởng đến tốc độ website.

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

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

Thiết lập CSS thông thường sẽ như thế này:

  • Có một tập tin CSS bên ngoài (dưới 75k hoặc hơn)
  • Trong thẻ HTML sẽ có đoạn mã để kết nối với CSS bên ngoài
  • Không có bất cứ CSS ​​trong HTML.

Ưu điểm của thiết lập CSS này vì nó sẽ giảm thiểu kết xuất chặn CSS và trang sẽ tải rất nhanh.

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

Tệp CSS bên ngoài

Các tệp CSS bên ngoài là kỹ thuật CSS đang được sử dụng trong rất nhiều các trang web,cách để nhận biết là hãy xem trong phần header của HTML có đoạn code này:

<link rel=”stylesheet” type=”text/css” href=”http://yoursite.com/main.css” media=”screen” title=”style (screen)” />

Đoạn mã này gọi tệp CSS của bạn và chúng được gọi là External CSS vì chúng là tệp riêng biệt so với HTML của bạn.

Nếu bạn có nhiều tệp CSS, hãy kết hợp chúng là một

kết hợp css

Khi bạn có nhiều CSS bên ngoài trình duyệt phải tải xuống từng tệp trước khi nó có thể hiển thị trang của bạn điều này khiến website bạn bị chậm. Điều này có thể dễ dàng thay đổi bằng cách kết hợp tất cả các tệp CSS thành một tệp.

CSS nội tuyến

css nội tuyến

CSS nội tuyến là các CSS được khi báo ở bên trong HTML. Ưu điểm chính của phương pháp này là không phải lấy thêm tệp (bên ngoài) trước khi trang web được hiển thị điều này sẽ khiến web bạn nhanh hơn nếu CSS nhỏ nếu CSS của bạn lớn thì đây không phải là một phương pháp tốt cho bạn.

Kiểu nội tuyến được thực hiện bằng cách khai báo ngay trên tập tin HTML …

<style> 
CSS xuất hiện ở đây 
</ style>

Inline small CSS thực sự có thể tăng tốc độ tải trang trong trình duyệt web.

Không thêm thuộc tính CSS nội tuyến trong các phần tử của HTML

trong phần tử css

Điều rất phổ biến và hướng dẫn ở Google Insight ở mục  “Tối ưu hóa phân phối CSS” cho biết rằng chúng ta không nên làm điều này nữa. Họ nói rằng điều này sẽ khiến trình duyệt phản hồi chậm hơn

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

Tôi có rất nhiều thứ này trong mã của mình và tôi sẽ phải làm nhiều việc để loại bỏ tất cả chúng.

Kết

Có rất nhiều cách để tối ưu phân phối CSS.chúng ta cần phải lựa chọn phương pháp phù hợp nhất để tăng tốc tối đa tốc độ load trang.

Các khuyến nghị là:

  • Kết hợp tất cả CSS bên ngoài với nhau
  • Inline small CSS
  • Không sử dụng @import gọi CSS
  • Không sử dụng CSS ​​trong HTML những thứ như div của bạn hoặc h1 của bạn (trong CSS phần tử)
  • Hãy kiểm tra bằng CSS bằng công cụ phân phối CSS
DỊCH VỤ SEO WEBSITE liên quan
Hãy liên hệ với chúng tôi để được tư vấn miễn phí các dịch vụ
LIÊN HỆ