Nếu bạn có các quy tắc kiểu CSS trong biểu định kiểu của mình mà không được sử dụng trên trang, thì bạn có “CSS không được sử dụng”
Người ta thường thấy khi biểu định kiểu phát triển, có những quy tắc không còn được sử dụng nữa
Ngay cả một biểu định kiểu mới cũng có thể bao gồm “CSS không sử dụng”, đặc biệt nếu bạn đang sử dụng khung CSS và không sử dụng tất cả các quy tắc
Lý do chúng tôi muốn xóa các quy tắc CSS không sử dụng này là vì chúng làm chậm hiệu suất
CSS không sử dụng làm chậm hiệu suất như thế nào?
Khi trình duyệt kết xuất, nó cần thêm từng phần tử một vào trang
Đối với mỗi phần tử, chẳng hạn như một nút, nó cần xem nên áp dụng kiểu nào
Bạn càng có nhiều kiểu trong biểu định kiểu thì quá trình này sẽ càng mất nhiều thời gian
Vì vậy, nếu bạn có 100 phần tử trên trang và 100 quy tắc thì nó sẽ phải chạy qua các kiểu 100 * 100
Danh sách các quy tắc này càng dài thì ảnh hưởng đến hiệu suất web của bạn càng lớn
Chúng tôi có thể tăng tốc độ hiển thị của trang bằng cách giảm các kiểu trong biểu định kiểu
Cái nào làm tăng hiệu suất web
Hãy xem cách bạn có thể biết liệu trang web của mình có CSS không được sử dụng hay không
Cách xác định CSS không sử dụng
Để tìm bất kỳ CSS không sử dụng nào trên trang của bạn, chúng tôi có thể sử dụng Công cụ dành cho nhà phát triển Chrome
Truy cập trang mà bạn muốn kiểm tra và nhấp chuột phải vào nền
Chọn tùy chọn “Kiểm tra” và tùy chọn này sẽ mở ra Công cụ dành cho nhà phát triển Chrome
Chúng ta cần mở công cụ “bảo hiểm” và có một số bước để mở công cụ này
Trước tiên, hãy đảm bảo rằng “ngăn kéo bảng điều khiển” đang mở bằng cách nhấn phím “Esc”
Khi bạn đã mở ngăn kéo, hãy tìm tab “Mức độ phù hợp”
Nếu nó bị thiếu, hãy nhấn vào menu ba chấm bên cạnh từ “Bảng điều khiển” và chọn “Mức độ phủ sóng”
Để bắt đầu ghi phạm vi phủ sóng, chúng ta cần nhấn nút ghi
Nhấn làm mới và bạn sẽ thấy các tệp CSS và JS của mình được tải trong cửa sổ
Nhấp vào tệp CSS của bạn và bạn sẽ thấy các thanh màu đỏ và xanh lục bên cạnh mỗi kiểu
Thanh màu xanh lá cây có nghĩa là kiểu này đang được trang sử dụng
Thanh màu đỏ cho biết quy tắc không được sử dụng
Bạn cũng có thể thấy trong bảng trên, tệp CSS có 97. 1% CSS không sử dụng
Vì vậy, bây giờ chúng tôi biết những gì đang được sử dụng và những gì không
Hãy xem xét việc loại bỏ nó
Xóa CSS không sử dụng
Một cách đơn giản là sử dụng một công cụ trực tuyến như UnCSS Online
Công cụ đơn giản này cho phép bạn nhập tệp CSS và tệp HTML
Sau đó, nó sẽ tìm ra quy tắc CSS nào đang được áp dụng và chỉ xuất ra CSS đã sử dụng
Khi bạn có đầu ra, bạn có thể sao chép lại tệp này vào tệp CSS và thêm nó vào trang
Công cụ này phù hợp với tác vụ một lần và có thể hữu ích cho các trang web tĩnh
Nếu bạn có nhà phát triển làm việc trên trang web của mình thì bạn cần tự động hóa quy trình này
Hãy xem xét một số đề xuất bạn có thể đưa ra cho nhóm phát triển
Tự động xóa CSS không sử dụng
Công cụ UnCSS trực tuyến ở trên sử dụng thư viện này https. //github. com/uncss/uncss hậu trường
Nếu chúng tôi cần thường xuyên sử dụng công cụ UnCSS, tốt hơn hết là sử dụng thư viện này như một phần của quy trình làm việc của nhà phát triển
Để làm điều đó, hãy cài đặt uncss bằng cách sử dụng nút
npm install -g uncss
Sau đó chúng ta có thể sử dụng nó trên dòng lệnh như thế này
Usage: uncss [options]
e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css
Options:
-h, --help output usage information
-V, --version output the version number
-i, --ignore Do not remove given selectors
-m, --media Process additional media queries
-C, --csspath Relative path where the CSS files are located
-s, --stylesheets Specify additional stylesheets to process
-S, --ignoreSheets Do not include specified stylesheets
-r, --raw Pass in a raw string of CSS
-t, --timeout Wait for JS evaluation
-H, --htmlroot Absolute paths' root location
-u, --uncssrc Load these options from
-n, --noBanner Disable banner
-a, --userAgent Use a custom user agent string
-I, --inject Path to javascript file to be executed before uncss runs
-o, --output Path to write resulting CSS to
CSS quan trọng
Có một cải tiến nữa mà chúng ta có thể thực hiện đối với CSS
Cũng như loại bỏ CSS không được trang sử dụng, chúng tôi có thể đặt CSS quan trọng trong dòng
Điều này có nghĩa là bất kỳ kiểu nào trong số các kiểu trong màn hình đầu tiên đều được đưa vào tệp HTML. Các kiểu này sau đó sẽ bị xóa khỏi biểu định kiểu CSS bên ngoài
Để làm điều này, chúng ta có thể sử dụng một công cụ dành cho nhà phát triển khác có tên là Critical
Thao tác này sẽ tự động lấy CSS trong màn hình đầu tiên và thêm nó vào bên trong thẻ trong của trang
Điều này sẽ cải thiện tốc độ “First Paint” của trang vì trình duyệt không phải yêu cầu tệp khác
CSS còn lại [dưới màn hình đầu tiên] trở thành một tệp riêng biệt. Sau đó, nó được thêm không đồng bộ vào trang bằng liên kết preload
Sử dụng CSS dưới màn hình đầu tiên này, sau đó chúng ta có thể sử dụng tác vụ UnCSS ở trên để làm cho tệp này nhỏ nhất có thể
Để chạy công cụ bằng cách sử dụng nút
npm i -D critical
Sau đó, bạn có thể sử dụng như một phần của nhiệm vụ Gulp
const critical = require['critical'];
critical.generate[{
inline: true,
base: 'test/',
src: 'index.html',
target: 'index-critical.html',
width: 1300,
height: 900
}];
Quan trọng cũng có thể thu nhỏ đầu ra CSS, điều mà tôi cũng muốn giới thiệu
GulpJS
Đề xuất cuối cùng bạn có thể thực hiện là sử dụng công cụ quy trình làm việc tự động hóa, chẳng hạn như GulpJS
GulpJS cho phép nhà phát triển tự động hóa quá trình thiết lập CSS quan trọng và sau đó xóa CSS không sử dụng
Tóm tắt, Cách xóa CSS không sử dụng
Chúng tôi đã xem xét cách xóa CSS không sử dụng
Chúng tôi cần xóa CSS không sử dụng vì bất kỳ CSS không sử dụng nào trên trang web của bạn sẽ khiến trang web chậm lại
Chúng tôi đã xem xét cách bạn có thể xác định CSS không sử dụng bằng Công cụ dành cho nhà phát triển Chrome. Sử dụng báo cáo Mức độ phù hợp để xem tỷ lệ phần trăm CSS không được sử dụng trên mỗi trang