Minify Code Là Gì? Cách Rút Gọn HTML, CSS, JS Cho Website

Minify code là gì và rút gọn những gì trong tệp mã?

Minify code là việc bỏ khoảng trắng, xuống dòng, chú thích và những ký tự máy không cần khỏi tệp HTML, CSS, JavaScript, để tệp nhỏ lại mà trang vẫn chạy y như cũ. Phần trình bày đó chỉ người viết mã cần. Bản minify dùng cho website đang chạy, bản gốc giữ lại để sửa.

Theo tài liệu Lighthouse về minify CSS, với trình duyệt thì bản gốc và bản minify cho kết quả như nhau, bản minify chỉ dùng ít byte hơn.

Minify code đổi cách tệp được viết ra, không đổi việc tệp đó làm trên trang.

Minify code khác nén Gzip, Brotli ở điểm nào?

Minify code khác nén Gzip, Brotli ở chỗ nó sửa chính nội dung tệp trước khi đưa lên máy chủ. Gzip và Brotli thì mã hóa tệp lúc truyền đi, tới nơi trình duyệt giải ra đúng tệp ban đầu. Tài liệu web.dev của Google ghi minify không hẳn là một thuật toán nén. Website cần làm cả hai.

Phần giải thích về nén và minify cho tài nguyên dạng chữ nằm ở bài tối ưu mã hóa và dung lượng truyền của web.dev.

Minify trước, nén sau: tệp đã gọn rồi mới được nén khi truyền.

Minify code ảnh hưởng tới tốc độ tải trang ra sao?

Minify code làm tệp nhẹ hơn, nên trình duyệt tải ít byte hơn và đọc mã nhanh hơn. Tài liệu Lighthouse của Google ghi minify CSS có thể cải thiện hiệu suất tải trang, còn minify JavaScript giảm dung lượng tải và thời gian phân tích script. Mức lợi tùy tệp gốc viết thừa nhiều hay ít.

Hai tác dụng Google ghi trong tài liệu Lighthouse

• CSS: minify tệp CSS có thể cải thiện hiệu suất tải trang, vì tệp CSS thường lớn hơn mức cần.
• JavaScript: minify tệp JavaScript giảm dung lượng tải và thời gian trình duyệt phân tích script.

Minify là một việc trong nhóm việc tối ưu tốc độ. Ba chỉ số đo kết quả chung của nhóm đó là LCP, INP và CLS, giải thích ở bài Core Web Vitals và bài tối ưu LCP.

Minify bớt byte thừa của từng tệp. Ảnh nặng và máy chủ chậm là hai chỗ phải xử lý riêng.

Kiểm tra website đã minify code chưa bằng cách nào?

Kiểm tra website đã minify code chưa bằng báo cáo Lighthouse hoặc PageSpeed Insights. Lighthouse liệt kê từng tệp CSS, JavaScript chưa minify kèm số KiB có thể bớt. Con số đó là ước tính dè dặt, tính trên chú thích và khoảng trắng tìm thấy, nên công cụ minify thật thường bớt được nhiều hơn.

Ba bước kiểm minify code

1. Chạy báo cáo: mở PageSpeed Insights hoặc tab Lighthouse trong Chrome DevTools, nhập địa chỉ trang.
2. Đọc hai mục: tìm mục Minify CSS và Minify JavaScript trong phần hiệu suất, xem tên tệp và số KiB.
3. Mở tệp ra xem: tệp đã minify thường nằm trên một dòng liền, không thụt lề, không chú thích.

Cách đọc điểm và các mục của báo cáo có ở bài điểm PageSpeed, cách đo và kết luận đúng.

Báo cáo không còn nêu tệp nào ở hai mục Minify CSS và Minify JavaScript là trang đã qua bước này.

Minify HTML, CSS, JS bằng công cụ nào cho đúng?

Minify HTML, CSS, JS đúng cách là để một công cụ làm tự động mỗi lần đưa mã lên, giữ nguyên tệp gốc để sửa. Theo tài liệu Lighthouse, site nhỏ ít cập nhật có thể dán mã vào một dịch vụ minify trực tuyến, còn đội làm chuyên thì đặt bước minify trong công cụ build như Gulp hoặc Webpack.

Hướng dẫn gốc nằm ở tài liệu Lighthouse về minify CSS và minify JavaScript.

Chọn một cách chạy tự động, để mỗi lần cập nhật website là mã mới cũng được minify.

Sau khi bật minify code cần kiểm lại những gì?

Sau khi bật minify code cần kiểm lại ba thứ trên website thật: trang hiển thị đúng như trước, bảng console của trình duyệt không báo lỗi, các nút và form vẫn chạy. Kiểm ở trang chủ, một trang bài viết và trang có form liên hệ. Có lỗi thì tắt minify cho đúng tệp đang lỗi.

Ba thứ kiểm lại sau khi bật minify

• Hiển thị: so trang trước và sau khi bật, ở cả máy tính lẫn điện thoại.
• Console: mở Chrome DevTools, tab Console, tải lại trang và đọc các dòng báo lỗi.
• Tương tác: bấm thử menu, nút gọi, form liên hệ và ô tìm kiếm.

Minify xong mà một nút ngừng chạy thì trang nhẹ hơn nhưng mất khách, nên bước kiểm lại là bắt buộc.

Minify code nằm ở đâu trong bảng chuẩn SQA-200?

Minify code là mục P1.10 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt là mọi tệp mã ở bản chạy thật đã bỏ khoảng trắng, chú thích và định dạng thừa. Mục này đứng cạnh các mục về nén, CSS, cache và CDN.

Các mục đứng cạnh P1.10 trong trụ cột I

• P1.05 Gzip / Brotli Compression: bật nén Brotli hoặc Gzip trên máy chủ.
• P1.08 Critical CSS Inline: nhúng thẳng CSS của màn hình đầu vào trang.
• P1.09 Unused JS/CSS Elimination: gỡ hoặc hoãn tải CSS, JavaScript không dùng.
• P1.11 Browser Cache Headers: đặt Cache-Control max-age một năm cho tài nguyên tĩnh.
• P1.12 Edge CDN Integration: phân phối tài nguyên tĩnh qua CDN.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.10 Minify HTML/CSS/JS.

P1.10 đạt khi không tệp HTML, CSS, JavaScript nào của bản chạy thật còn ở dạng chưa rút gọn.

Người làm website hay hỏi gì về minify code?

Người làm website hay hỏi bốn câu về minify code: minify có làm đổi cách trang hiển thị không, đã bật Gzip hoặc Brotli thì có cần minify nữa không, tệp có đuôi .min nghĩa là gì, và có cần minify cả HTML không. Mỗi câu có một câu trả lời ngắn ở dưới.

Minify code có làm đổi cách trang hiển thị không?

Minify code đúng cách không làm đổi cách trang hiển thị. Tài liệu Lighthouse của Google ghi với trình duyệt, bản gốc và bản minify cho kết quả như nhau, bản minify chỉ dùng ít byte hơn. Trang hiển thị khác đi sau khi bật minify là dấu hiệu công cụ đang xử lý sai một tệp, cần kiểm lại tệp đó.

Đã bật Gzip hoặc Brotli thì có cần minify nữa không?

Vẫn cần. Gzip và Brotli nén tệp lúc truyền, còn minify bỏ ký tự thừa ngay trong tệp. Tài liệu web.dev của Google xếp minify là bước xử lý trước, không hẳn là một thuật toán nén. Tệp đã minify rồi mới nén thì nhẹ hơn tệp chỉ nén. Trong SQA-200, hai việc là hai mục riêng: P1.10 và P1.05.

Tệp có đuôi .min.js và .min.css nghĩa là gì?

Đuôi .min trong tên tệp là cách đặt tên quen dùng để báo tệp đó đã được minify, ví dụ app.min.js hay style.min.css. Tên tệp chỉ là quy ước của người làm. Muốn chắc tệp đã minify thật thì mở tệp ra xem, hoặc đọc hai mục Minify CSS và Minify JavaScript trong báo cáo Lighthouse.

Có cần minify cả HTML hay chỉ CSS và JavaScript?

Chuẩn P1.10 của SQA-200 tính cả ba loại tệp: HTML, CSS và JavaScript. Lighthouse có hai mục kiểm riêng cho CSS và JavaScript, nên hai loại này dễ đo hơn. HTML thường được minify bằng chính công cụ build hoặc plugin cache của website. Ưu tiên CSS và JavaScript trước, rồi tới HTML.

Bốn câu này đều quay về một ý: minify là bước rút gọn tệp, làm tự động và kiểm lại sau khi bật.