Có nên combine JavaScript và CSS trong WordPress hay không?
Nếu bạn đã từng thử test tốc độ của website với các công cụ như Google PageSpeed Insights, GTMetrix hay Pingdom thì chắc hẳn bạn cũng đã từng nhìn thấy lời khuyên là phải combine JavaScript và CSS để giúp tăng điểm tốc độ rồi phải không nào? Combine (hay “gộp”) là một thuật ngữ dùng để chỉ việc gộp chung nhiều file JS thành 1 file JS duy nhất, nhiều file CSS thành 1 file CSS duy nhất. Điều này được cho là sẽ làm giảm số lượng HTTP request, qua đó giúp tăng tốc độ load cho website của bạn.
Tham khảo thêm:
Combine JavaScript và CSS trong WordPress
Trong WordPress, bạn hoàn toàn có thể triển khai kỹ thuật này một cách đơn giản với sự trợ giúp của plugin. Có rất nhiều plugin chuyên dụng (chẳng hạn như Autoptimize) hoặc các plugin tạo cache (chẳng hạn như LiteSpeed Cache, WP Rocket, WP Fastest Cache, W3 Total Cache…) được tích hợp sẵn tính năng này. Bạn chỉ cần một vài thao tác là đã có thể kích hoạt được nó. Tuy nhiên, không phải lúc nào việc combine JS, CSS cũng là điều tốt.
Khi nào bạn không nên combine JavaScript và CSS?
Mặc dù cũng trang bị sẵn tính năng combine JS, CSS trên plugin của mình. Tuy nhiên, các lập trình viên của WP Rocket lại khuyến cáo bạn không nên kích hoạt tính năng này nếu hosting/ server của bạn hỗ trợ giao thức HTTP/2. Tại sao vậy?
Thứ nhất, khác với giao thức HTTP/1.1, giao thức HTTP/2 và HTTP/3 có cách truyền tải dữ liệu hoàn toàn mới. Nó tương tự như cách chúng ta combine JS, CSS. Các dữ liệu sẽ được gộp chung vào một kết nối TCP hoặc QUIC (UDP) để giảm số lượng HTTP request. Các bạn có thể thấy rõ điều đó thông qua hình minh họa bên dưới.
Như vậy, việc combine JS, CSS bằng plugin là điều không cần thiết. Để biết website của mình có đang hỗ trợ giao thức HTTP/2 hay không, các bạn có thể kiểm tra bằng HTTP/2 Test hoặc HTTP2.Pro.
Thứ hai, combine JS, CSS rất dễ gây lỗi giao diện. Do nhiều file JS, CSS chỉ có thể hoạt động bình thường nếu chúng nằm riêng rẽ một chỗ. Nếu gộp chung với các file khác, chúng sẽ bị lỗi ngay, khiến cho giao diện web bị vỡ hoặc các chức năng không thể hoạt động được.
Thứ ba, việc combine JS, CSS có thể tạo ra những file JS và CSS với kích thước siêu to. Website sẽ hiển thị chậm hơn trong trường hợp kết nối mạng có tốc độ không đủ nhanh, do các file CSS và JS lớn mất thời gian để tải hơn. Nó cũng đồng nghĩa với việc bạn sẽ phải tải cả những file JS, CSS thừa trên những trang không thực sự cần đến chúng.
Kết luận
Tóm lại, nếu website của bạn có hỗ trợ giao thức HTTP/2 hoặc HTTP/3 thì không nhất thiết bạn phải tìm cách để combine JavaScript và CSS. Bạn chỉ nên làm điều này nếu việc combine không làm ảnh hưởng đến giao diện và các tính năng của web.
Đừng quá quan tâm đến cảnh báo của Google PageSpeed Insights, GTMetrix hay Pingdom về việc combine JS, CSS. Bởi vì chúng vẫn đang áp dụng các tiêu chuẩn và lời khuyên dành cho HTTP/1.1 chứ không phải HTTP/2 hay HTTP/3.
Tất nhiên, nếu việc combine JS, CSS vừa làm tăng tốc độ load thực tế, vừa không gây lỗi giao diện lại giúp bạn tăng điểm test tốc độ thì chẳng có lý do gì để không làm cả.
Bạn có đang áp dụng kỹ thuật combine JS, CSS trên website của mình hay không? Bạn nghĩ gì về vấn đề mà tôi vừa đề cập ở trên. Đừng quên chia sẻ với chúng tôi những quan điểm và ý kiến của bạn trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Hiếu ơi . Mình dùng wp-rocket để combine JavaScript và CSS mục đích là tăng điểm trên gtmetrix . Thì site mình sau khi combine css thì ok nhưng combine JavaScript lại gây ra lỗi . Mình muốn biết lỗi ở đâu và tại sao url của file js lại có đuôi : ‘%20defer%20onload=’ . Nó làm site ko nhận dc js . Bạn có thể check và support mình vấn đề này không . Thank nhiều
Bạn thử tham khảo các bài viết ở đây xem sao: https://docs.wp-rocket.me/category/33-minification
Công nhận là dù thằng GTMetrix hay Google nó đánh giá điểm thấp nhưng load thực tế thì thấy nhanh thật.
Mà tui thấy thằng Google nó đánh giá không thân thiện với Mobile không biết có sao không đây
Nếu bị đánh giá không thân thiện với thiết bị di động thì nên kiểm tra lại nhé. Cẩn thận bị đánh tụt hạng tìm kiếm di động. Tháng 7 này Google bắt đầu mạnh tay về vấn đề này, bên cạnh các update liên quan đến HTTPS (SSL).
Có mấy cái widget nặng quá làm nó không thân thiện nên tui xóa luôn cho nhẹ web :D. mà page size tui tận 1MB nặng quá >.<
Nén ảnh chưa? Dùng định dạng WebP đi. Mà sao không nén JS, CSS bằng LiteSpeed Cache lại chạy đi dùng Autoptimize?
Sặc sao biết hay vậy :)), tui nén bằng ShortPixel với xài code Webp ời. Tại tui đang vọc thử cái thằng WP Super Cache á
Trên LiteSpeed Web Server thì không có thằng nào ngon hơn LiteSpeed Cache đâu nhé, kể cả WP Rocket. Vậy nên đừng cố giãy giụa làm gì. Nằm yên mà hưởng thụ đi. :P
Hừm mà chắc do size ảnh to quá, phải optimize về witdh cỡ 800 hết vậy
Haha. Site này vẫn còn nhiều cái có thể tối ưu lắm. Đăng ký 1 gói tối ưu website WordPress của WP Căn bản là ngon ngay. =))
Hôm trước nói được tối ưu free khi mua host mà ta :'(
Tối ưu free chỉ là tối ưu cơ bản. Còn muốn tối ưu nâng cao thì phải thuê dịch vụ riêng nhé. :))
Chuẩn rồi, nếu host hỗ trợ http/2 thì thôi, mình sử dụng stablehost nhưng ông này chưa hỗ trợ thì phải. Hawkhost thì đã hỗ trợ rồi.
So sánh tốc độ load http/1 vs http/2 tại đây http://www.http2demo.io
StableHost hỗ trợ HTTP/2 lâu rồi bạn nhé. Mình cũng có 1 site dùng test plugin đang chạy bên đó. :P
Ủa vậy à bác, thế ngon rồi :D