Unused CSS, JavaScript Là Gì? Cách Gỡ Mã Không Dùng

Unused CSS, JavaScript là gì và từ đâu mà có?

Unused CSS, JavaScript là luật CSS và đoạn script có trong tệp trang tải về nhưng không được dùng trên trang đó. Nó thường tới từ theme, plugin và thư viện tải nguyên gói cho mọi trang, trong khi mỗi trang chỉ cần một phần. Tài liệu Lighthouse nhắc riêng trường hợp plugin WordPress tải mã không dùng.

Mã thừa là mã đúng, chỉ là trang đang xem không cần tới nó.

Mã không dùng làm trang chậm đi như thế nào?

Mã không dùng làm trang chậm theo hai đường. CSS thừa vẫn nằm trong stylesheet mà trình duyệt phải tải và xử lý xong mới hiện được nội dung, đồng thời làm việc dựng cây hiển thị lâu hơn. JavaScript thừa thì tốn thời gian tải, phân tích, biên dịch và giành băng thông với tài nguyên khác.

Tác động theo tài liệu Lighthouse

• CSS thừa: trình duyệt phải xét từng luật CSS cho từng nút của trang, càng nhiều luật thừa càng tốn thời gian tính kiểu.
• JavaScript chặn hiển thị: trình duyệt phải tải, phân tích, biên dịch và chạy xong script rồi mới làm tiếp việc hiển thị.
• JavaScript bất đồng bộ: không chặn hiển thị nhưng vẫn giành băng thông lúc đang tải, và tốn dữ liệu di động của người dùng.

Theo web.dev, bớt JavaScript phải tải lúc khởi động góp phần cải thiện INP, vì luồng chính rảnh hơn để phản hồi thao tác của người dùng.

Bớt mã thừa là bớt cả byte phải tải lẫn việc trình duyệt phải làm.

Tìm CSS, JavaScript không dùng bằng công cụ nào?

Tìm CSS, JavaScript không dùng bằng tab Coverage của Chrome DevTools và báo cáo Lighthouse. Tab Coverage cho biết từng tệp có bao nhiêu phần trăm mã được dùng khi tải trang, chi tiết tới từng dòng. Lighthouse thì nêu sẵn những tệp vượt ngưỡng kèm số KiB có thể bớt.

Bốn bước dùng tab Coverage

1. Mở Command Menu: trong Chrome DevTools, bấm Control+Shift+P, hoặc Command+Shift+P trên Mac.
2. Chọn Show Coverage: gõ Coverage rồi chọn lệnh này.
3. Bấm Reload: trang tải lại, bảng hiện từng tệp CSS, JavaScript kèm phần mã chưa dùng.
4. Đọc theo URL: URL của tệp cho biết theme, plugin hay thư viện nào đang tải mã đó.

Phần mã tab Coverage báo chưa dùng là theo lần tải trang đó. Mã của menu di động, cửa sổ bật lên hay form chỉ chạy khi người dùng thao tác, nên cần bấm thử các thành phần đó trước khi kết luận.

Đọc theo từng tệp và từng nguồn tải, không đọc theo một con số tổng.

Gỡ hoặc hoãn mã không dùng bằng những cách nào?

Gỡ hoặc hoãn mã không dùng có ba hướng: bỏ hẳn nguồn tải mã thừa, tách mã để mỗi trang chỉ tải phần nó cần, và hoãn phần chưa cần ngay. Với JavaScript, web.dev gọi việc tách gói là code splitting. Các công cụ đóng gói như webpack, Parcel và Rollup làm việc này bằng dynamic import.

Cách nhúng phần CSS quan trọng nằm ở bài Critical CSS. Hướng dẫn tách gói JavaScript ở bài code splitting của web.dev. Phần riêng cho WordPress ở bài SEO WordPress #15: hình ảnh và code.

Với WordPress, việc đầu tiên là xem plugin nào tải mã mà trang không dùng.

Unused CSS, JavaScript nằm ở đâu trong bảng SQA-200?

Gỡ CSS, JavaScript không dùng là mục P1.09 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 của mục này: gỡ hoặc hoãn tải CSS, JavaScript không dùng bằng code splitting và tree shaking. Mục này đứng ngay trước mục minify.

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

• P1.07 Native Lazy Loading: đặt loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu.
• P1.08 Critical CSS Inline: nhúng thẳng CSS của màn hình đầu vào trang để không chặn hiển thị.
• P1.10 Minify HTML/CSS/JS: rút gọn 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.
• P1.11 Browser Cache Headers: đặt Cache-Control max-age một năm cho tài nguyên tĩnh.

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.09 Unused JS/CSS Elimination.

P1.09 đạt khi báo cáo Lighthouse không còn nêu tệp nào ở hai mục Remove unused CSS và Remove unused JavaScript.

Người làm website hay hỏi gì về mã không dùng?

Người làm website hay hỏi ba câu về mã không dùng: gỡ mã thừa khác minify ở đâu, tab Coverage báo đỏ có phải cứ xóa là được không, và tree shaking nghĩa là gì. Ba câu trả lời dưới đây lấy từ tài liệu Lighthouse và web.dev của Google.

Gỡ mã không dùng khác minify code ở điểm nào?

Minify giữ nguyên mọi dòng mã, chỉ bỏ khoảng trắng, chú thích và ký tự thừa. Gỡ mã không dùng thì bỏ hẳn những luật CSS và đoạn script trang không cần. Tài liệu Lighthouse nhắc cả hai trong cùng một chuỗi việc: gỡ thứ không dùng, hoãn thứ chưa cần, rồi minify phần còn lại.

Tab Coverage báo đỏ thì có xóa ngay được không?

Chưa nên. Tab Coverage đo theo một lần tải trang, nên mã của những thành phần chỉ chạy khi người dùng thao tác cũng hiện màu đỏ. Mã đó vẫn cần, chỉ là chưa cần lúc trang vừa mở. Cách xử lý đúng với nhóm này là hoãn tải, hoặc chỉ tải ở những trang có dùng thành phần đó.

Tree shaking nghĩa là gì?

Tree shaking là việc công cụ đóng gói tự bỏ những phần mã được khai báo nhưng không nơi nào dùng tới ra khỏi gói JavaScript cuối cùng. Chuẩn P1.09 của SQA-200 nêu tree shaking cùng với code splitting. Tài liệu Lighthouse dẫn sang các bài kiểm của Tooling.Report để xem công cụ đóng gói nào hỗ trợ việc này.

Gỡ thứ không dùng, hoãn thứ chưa cần, rồi mới minify phần còn lại.