Ngôn ngữ lập trình JavaScript giúp trang web hiển thị nội dung động. Trên WordPress, ví dụ, JavaScript dùng nhúng audio/video. Cũng dùng hiển thị gallery ảnh, menu tương tác, bộ đếm ngược, và hơn nữa.
File JavaScript dùng đuôi .js và trên WordPress điển hình, file JS được chèn vào trang bởi theme và plugin kích hoạt. Ví dụ: slider trang chủ theme cần slider.js, trang liên hệ cần form.js.
Tôi tin JavaScript thiết yếu cho WordPress hiện đại. Rất tiếc, nó cũng làm web chậm nếu không tối ưu đúng.
Trong các phiên bản đầu HTTP, JavaScript làm chậm web vì mỗi file JS phải tải và thực thi theo thứ tự để trang hiển thị đúng. Kỹ thuật tối ưu phổ biến: kết hợp nhiều file JavaScript để giảm số HTTP request trình duyệt phải làm. Kỹ thuật đôi khi gọi là JavaScript aggregation.
Trong bài này, tôi giải thích tại sao nhiều chủ web kết hợp JavaScript bên ngoài trong WordPress và chia sẻ plugin hữu ích thực hiện việc này. Cũng nói về tại sao kết hợp file JS bên ngoài không còn cần thiết cho hầu hết chủ web.
Tại sao kết hợp file JavaScript bên ngoài trong WordPress?
Mặc dù hàm JavaScript có thể thêm trực tiếp vào HTML bằng thẻ SCRIPT, thực hành phổ biến là lưu code JS trong file bên ngoài. Thực tế hơn vì tách code và cho phép hàm JS được gọi bởi nhiều trang.
Mỗi file JS trang web cần phải được trình duyệt tải trong quá trình render trang.
| Render trang (Page Rendering) | Khi ai đó xem trang, trình duyệt xây dựng trang bằng cách xử lý từng dòng code theo thứ tự. Quá trình này gọi là render trang. |
| HTTP Request | Yêu cầu truy cập file trên server gọi là HTTP request. Trình duyệt do đó phải làm HTTP request cho mỗi file JS trang cần. |
Khi file tải theo thứ tự tuần tự, số lượng HTTP request lớn làm tăng thời gian tải trang. Vì vậy, kết hợp file JavaScript bên ngoài trong WordPress giúp giảm đáng kể số HTTP request trong quá trình render trang.
Một số công cụ tìm kiếm khuyến nghị gộp JavaScript bên ngoài thành 2 file.
| Hàm JavaScript Quan trọng (File 1) | File JS đầu chứa hàm quan trọng cần render đúng first paint ban đầu. |
| Hàm JavaScript Không quan trọng (File 2) | File JS hai chứa hàm ít quan trọng, gọi sau khi trang tải xong. |
Nếu trang cần 9 file JS để hiển thị đúng, gộp file JS bên ngoài trong WordPress giúp giảm tổng HTTP request cho code JS từ 9 xuống chỉ 2. File CSS bên ngoài cũng có thể gộp, giảm thêm HTTP request.
Web WordPress sẽ nhanh hơn nếu gộp file JavaScript bên ngoài?
Nhờ cải tiến HTTP, không còn cần thiết gộp file JS và CSS trừ khi hosting không hỗ trợ HTTP/2.
Trong HTTP/1.0 và HTTP/1.1, mỗi file JS/CSS phải tải theo thứ tự tuần tự. Nghĩa là file này tải xong file kia mới bắt đầu. Giao thức HTTP/2 ra mắt 2015 giải quyết vấn đề này bằng cách cho phép tải song song (parallel downloads). Vì tất cả tài nguyên bên ngoài tải cùng lúc, không còn lợi ích gộp file nếu HTTP/2 khả dụng.
HTTP/2 hiện được hỗ trợ bởi 95,6% trình duyệt Internet. Tính đến 6/1/2022, HTTP/2 dùng cho 46,9% tất cả web online, dù từ biểu đồ dưới thấy con số cao đáng kể ở web phổ biến nhất.
Nếu host hỗ trợ HTTP/2, gộp file có thể làm web chậm hơn vì file JS gộp lớn hơn file gốc. Vì mất nhiều thời gian hơn để trình duyệt tải 2 file JS lớn so với nhiều file JS nhỏ tải cùng lúc.
Hai kỹ thuật tôi khuyến nghị dùng với JavaScript: minification (tối thiểu hóa) và defer parsing (hoãn phân tích cú pháp).
| Minify | Minification loại bỏ ký tự không cần thiết: khoảng trắng, comment. Kết quả file JS nhỏ hơn. |
| Defer Parsing | Code JS làm chậm render trang. Hai kỹ thuật Defer và Async giải quyết vấn đề này. |
Đọc bài về hoãn phân tích JavaScript trong WordPress để hiểu rõ tại sao JS làm chậm render trang.
Cách kết hợp JavaScript bên ngoài trong WordPress
Nếu host vẫn dùng HTTP/1.1, vẫn khuyến nghị gộp file JS và CSS bên ngoài trong WordPress.
Chắc chắn chạy test hiệu suất trước và sau gộp file để biết thời gian tải bị ảnh hưởng ra sao. Dùng GTmetrix, Google PageSpeed Insights, Pingdom Website Speed Test.
Autoptimize
Autoptimize là một trong plugin tối ưu hiệu quả nhất cho WordPress. Hỗ trợ minification cho HTML, gộp file và minification cho JavaScript và CSS. File JS cũng có thể defer thay vì aggregate để ngăn chặn render-blocking, và có tùy chọn tối ưu Google Fonts.
Tôi dùng Autoptimize trên nhiều web WordPress vì nó luôn cải thiện thời gian tải.
TRANG CHỦ CHÍNH THỨC | TẢI AUTOPTOMIZE
Asset CleanUp
Asset CleanUp là plugin tối ưu WordPress cấu hình cao, hỗ trợ minification, gộp file, defer cho JavaScript và CSS. Cũng dọn dẹp HTML và cung cấp công cụ quản lý font giảm tác động lên thời gian tải.
Một tính năng nổi bật: JavaScript và CSS Manager. Cho phép chỉ định chính xác file JS/CSS tải trên trang nào của web.
TRANG CHỦ CHÍNH THỨC | TẢI ASSET CLEANUP
WP Super Minify
WP Super Minify làm khác: chỉ cho tùy chọn nén JavaScript và nén CSS. Khi chọn, WP Super Minify sẽ gộp, minify và cache file.
Nếu tìm giải pháp tối ưu đơn giản "chỉ làm việc", plugin này có thể cho bạn.
TRANG CHỦ CHÍNH THỨC | TẢI WP SUPER MINIFY
Kết hợp file JavaScript bên ngoài dùng WordPress Cache Plugin
Plugin cache WordPress tốt nhất bao gồm nhiều công cụ tối ưu thêm giúp cải thiện hiệu suất. Do đó, khả năng cao giải pháp cache WordPress hiện tại cho phép gộp file JS/CSS bên ngoài.
Ví dụ WP Rocket, có tùy chọn minify và gộp JS/CSS. File JS cũng có thể defer ngăn chặn render-blocking.
Khuyến nghị: test thời gian tải dùng gộp file bằng plugin cache ưa thích, sau đó so sánh với giải pháp tối ưu JS độc lập như Autoptimize, Asset CleanUp.
Tổng kết
Hy vọng bạn thích bài xem xét gộp file JavaScript bên ngoài. Như bạn thấy, không còn cần gộp file JS nếu host hỗ trợ HTTP/2 vì tải song song hiệu quả hơn.
Nếu host chỉ hỗ trợ HTTP/1.1, bạn có thể gộp JavaScript bên ngoài trong WordPress để giảm thời gian tải.
Đọc thêm: Loại bỏ CSS không sử dụng trong WordPress
Cảm ơn bạn đã đọc.
Kevin