Giảm thiểu CSS

Demián Renzulli
Demián Renzulli
Twitter GitHub Sự cố

Tệp CSS có thể chứa các ký tự không cần thiết, chẳng hạn như nhận xét, khoảng trắng và thụt lề. Trong phiên bản chính thức, bạn có thể xoá các ký tự này một cách an toàn để giảm kích thước tệp mà không ảnh hưởng đến cách trình duyệt xử lý các kiểu. Kỹ thuật này được gọi là rút gọn.

Đang tải CSS không được giảm thiểu

Hãy xem khối CSS sau:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Nội dung này dễ đọc nhưng chi phí tạo tệp lớn hơn mức cần thiết:

  • Phương thức này sử dụng khoảng trắng cho mục đích thụt lề và chứa các nhận xét mà trình duyệt sẽ bỏ qua, do đó có thể xoá chúng.
  • Các phần tử <h1> và <h2> có cùng kiểu: thay vì khai báo riêng biệt: "h1 {...} h2 {...}", bạn có thể biểu thị các phần tử này dưới dạng "h1, h2{...}".
  • background-color, #000000 có thể được biểu thị dưới dạng #000.

Sau khi thực hiện các thay đổi này, bạn sẽ có được phiên bản thu gọn hơn của cùng một kiểu:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Có thể bạn không muốn viết CSS như vậy. Thay vào đó, bạn có thể viết CSS như bình thường và thêm bước giảm kích thước vào quy trình xây dựng. Trong hướng dẫn này, bạn sẽ tìm hiểu cách thực hiện việc này bằng một công cụ xây dựng phổ biến: webpack.

Đo

Bạn sẽ áp dụng tính năng giảm kích thước CSS cho một trang web đã được sử dụng trong các hướng dẫn khác: Fav Kitties. Phiên bản này của trang web sử dụng thư viện CSS thú vị: animate.css, để tạo ảnh động cho các phần tử trang khác nhau khi người dùng bỏ phiếu cho một chú mèo 😺.

Bước đầu tiên, bạn cần hiểu cơ hội sau khi rút gọn tệp này:

  1. Mở trang đo lường.
  2. Nhập URL: https://fav-kitties-animated.glitch.me rồi nhấp vào Chạy kiểm tra.
  3. Nhấp vào Xem báo cáo.
  4. Nhấp vào Hiệu suất và chuyển đến phần Cơ hội.

Báo cáo kết quả cho thấy rằng bạn có thể lưu tối đa 16 KB từ tệp animate.css:

Lighthouse: Giảm thiểu cơ hội CSS.

Bây giờ, hãy kiểm tra nội dung của CSS:

  1. Mở trang web Mèo yêu thích trong Chrome. (Có thể mất một chút thời gian để máy chủ Nhiễu máy chủ phản hồi lần đầu tiên.)
  2. Nhấn tổ hợp phím `Control+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở Công cụ cho nhà phát triển.
  3. Nhấp vào thẻ Mạng.
  4. Nhấp vào bộ lọc CSS.
  5. Chọn hộp kiểm Tắt bộ nhớ đệm.
  6. Tải lại ứng dụng.

Dấu vết chưa được tối ưu hoá cho Dịch vụ so sánh giá (CSS) trong Công cụ cho nhà phát triển

Trang này đang yêu cầu 2 tệp CSS, lần lượt là 1,9KB và 76,2KB.

  1. Nhấp vào animate.css.
  2. Nhấp vào thẻ Phản hồi để xem nội dung tệp.

Lưu ý rằng biểu định kiểu chứa các ký tự cho khoảng trắng và thụt lề:

Phản hồi chưa được tối ưu hoá cho Dịch vụ so sánh giá (CSS) của Công cụ cho nhà phát triển

Tiếp theo, bạn sẽ thêm một số trình bổ trợ webpack vào quy trình xây dựng để giảm kích thước các tệp này.

Rút gọn CSS bằng gói web

Trước khi chuyển sang các hoạt động tối ưu hoá, hãy dành chút thời gian tìm hiểu cách hoạt động của quy trình xây dựng trang web Fav Kitties:

Theo mặc định, gói JS mà gói web tạo ra sẽ chứa nội dung của các tệp CSS cùng dòng. Vì muốn duy trì các tệp CSS riêng biệt, chúng tôi sẽ sử dụng hai trình bổ trợ bổ sung:

  • mini-css-extract-plugin sẽ trích xuất từng biểu định kiểu vào tệp riêng, như một trong các bước của quy trình xây dựng.
  • webpack-fix-style-only-entries được dùng để khắc phục sự cố trong Wepback 4 nhằm tránh việc tạo thêm tệp JS cho mỗi tệp CSS được liệt kê trong webpack-config.js.

Bây giờ, bạn sẽ thực hiện một số thay đổi trong dự án:

  1. Mở dự án Fav Kitties trong Glitch.
  2. Để xem nguồn, hãy nhấn vào Xem nguồn.
  3. Nhấp vào Remix to Edit (Phối lại để chỉnh sửa) để chỉnh sửa dự án.
  4. Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy chọn Toàn màn hình).

Để giảm kích thước CSS thu được, bạn sẽ sử dụng optimize-css-assets-webpack-plugin:

  1. Trong bảng điều khiển Glitch, hãy chạy npm install --save-dev optimize-css-assets-webpack-plugin.
  2. Chạy refresh để các thay đổi được đồng bộ hoá với trình chỉnh sửa Glitch.

Tiếp theo, quay lại trình chỉnh sửa Glitch, mở tệp webpack.config.js và thực hiện các sửa đổi sau:

Tải mô-đun ở đầu tệp: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Sau đó, chuyển một bản sao của trình bổ trợ này vào mảng plugin: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Sau khi thực hiện các thay đổi, bản dựng lại của dự án sẽ được kích hoạt. Kết quả webpack.config.js sẽ có dạng như sau:

Tiếp theo, bạn sẽ kiểm tra kết quả của quá trình tối ưu hoá này bằng các công cụ hiệu suất.

Xác minh

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng, sau đó nhấn vào Toàn màn hình toàn màn hình.

Nếu bị mất phương hướng trong bất kỳ bước nào trước đó, bạn có thể nhấp vào đây để mở một phiên bản được tối ưu hoá của trang web.

Cách kiểm tra kích thước và nội dung của các tệp:

  1. Nhấn tổ hợp phím `Control+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Mạng.
  3. Nhấp vào bộ lọc CSS.
  4. Chọn hộp kiểm Tắt bộ nhớ đệm nếu chưa tắt.
  5. Tải lại ứng dụng.

Phản hồi chưa được tối ưu hoá cho Dịch vụ so sánh giá (CSS) của Công cụ cho nhà phát triển

Bạn có thể kiểm tra các tệp này và thấy rằng các phiên bản mới không chứa bất kỳ khoảng trắng nào. Cả hai tệp đều nhỏ hơn nhiều, cụ thể là animate.css đã giảm xuống ~26%, tiết kiệm ~20KB!

Bước cuối cùng:

  1. Mở trang đo lường.
  2. Nhập URL của trang web được tối ưu hoá.
  3. Nhấp vào Xem báo cáo.
  4. Nhấp vào Hiệu suất và tìm mục Cơ hội.

Báo cáo không còn hiển thị "Rút gọn CSS" dưới dạng "Cơ hội" nữa và hiện đã chuyển sang phần "Kiểm tra đã vượt qua":

Lighthouse đã vượt qua các bước kiểm tra cho trang được tối ưu hoá.

Vì tệp CSS là tài nguyên chặn hiển thị, nên nếu áp dụng tính năng giảm thiểu trên các trang web sử dụng tệp CSS lớn, bạn có thể thấy sự cải thiện về các chỉ số như Thời gian hiển thị nội dung đầu tiên.

Các bước tiếp theo và tài nguyên

Trong hướng dẫn này, chúng tôi đã đề cập đến tính năng Rút gọn CSS bằng gói web. Tuy nhiên, bạn cũng có thể áp dụng phương pháp tương tự với các công cụ xây dựng khác, chẳng hạn như gulp-clean-css đối với Gulp hoặc grunt-contrib-cssmin đối với Grunt.

Bạn cũng có thể áp dụng tính năng giảm thiểu cho các loại tệp khác. Xem Hướng dẫn rút gọn và nén tải trọng mạng để tìm hiểu thêm về các công cụ giúp giảm thiểu JS và một số kỹ thuật bổ sung, chẳng hạn như nén.