Minify HTML, JavaScript và CSS trong WordPress mà không cần plugin.
Sử dụng quá nhiều plugin trên blog/ website WordPress không bao giờ là một ý tưởng tốt. Bởi vì chúng ta đều biết rằng các hacker có thể dễ dàng tấn công blog/ website WordPress của bạn thông qua việc khai thác lỗ hổng từ plugin. Tại sao không cố gắng để giảm bớt sự phụ thuộc vào các plugin? Một số tính năng hữu ích có thể được bổ sung dễ dàng bằng cách thêm code snippets vào file function.php của theme mà bạn đang sử dụng. Bao gồm cả thủ thuật độc đáo sau đây để minify HTML, CSS và JavaScript.
Tham khảo thêm:
- Top 4 plugins minify dữ liệu tốt nhất cho WordPress
- Làm thế nào để giảm bớt HTTP requests cho WordPress?
Giảm bớt hay minify HTML, JavaScript và CSS về cơ bản là giảm kích thước của các tập tin. Từ đó, chúng sẽ nhỏ hơn, nhẹ hơn và load nhanh hơn, giúp cải thiện tốc độ hiển thị nội dung trên trình duyệt web. Việc minify dữ liệu về cơ bản là khá đơn giản. Bạn chỉ cần tìm cách loại bỏ các vùng không gian trống, tham số và comments của JavaScript, CSS, HTML là được. Chức năng minify có thể được tìm thấy trong một số plugin như WP-Minify hay Autoptimize. Nếu đang sử dụng plugin W3 Total Cache, bạn cũng chỉ cần vài thao tác đơn giản để kích hoạt tính năng này. Nhưng chúng ta đang cố gắng hạn chế sự phụ thuộc vào plugin. Vậy nên, điều chúng ta cần là một phương pháp để thay thế.
Minify HTML, JavaScript và CSS trong WordPress
Trên thực tế, các bạn có thể làm điều này một cách dễ dàng mà không cần đến plugin. Tất cả những gì bạn cần làm là copy và paste đoạn code sau đây vào file functions.php của theme mà bạn đang sử dụng.
Nếu code bị lỗi, các bạn có thể download file text tại đây về máy tính để xem chi tiết.
Để kiểm tra xem liệu các chức năng minify có thực sự hoạt động hay không, các bạn chỉ cần view source (Ctrl + U) của blog/ website. Ở cuối mã nguồn, các bạn sẽ thấy thông báo trông như thế này:
<!–-HTML compressed, size saved …%. From …bytes, now …bytes-–>
Đơn giản vậy thôi. Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)
Đôn đã bình luận:
29/06/2014 at 10:19mình cũng viết một bài về minify, hình như thấy hơi giông giống :D
Trung Hieu đã bình luận:
30/06/2014 at 16:44Bài của mình đăng lâu rồi mà. Từ hôm 4/6. :D
Truong Nguyen đã bình luận:
25/09/2014 at 10:02Vô tình đọc được cả 2 bài :))
Nhưng mình thêm code vào function rồi nhưng bị lỗi.hay tại up lên WP 4.0 nhỉ
Trung Hieu đã bình luận:
25/09/2014 at 10:08Chắc do mình paste code nó bị lỗi đó bạn. Nếu bị lỗi, bạn có thể download file text này về để xem: http://dvslabs.googlecode.com/files/minifier-script-en.txt
Truong Nguyen đã bình luận:
25/09/2014 at 21:31ok, để mình test lại thử :3
Trung Hieu đã bình luận:
25/09/2014 at 21:43Lần này đảm bảo thành công 100% luôn. :D
Dũng Lưới đã bình luận:
10/04/2015 at 14:55Mình không làm được dù đã down file của bạn. Khi thêm vào web nó trắng xóa ko có 1 mã HTML nào cả :(
Trung Hiếu đã bình luận:
10/04/2015 at 15:31Nếu vậy thì có lẽ bạn nên sử dụng plugin sẽ tốt hơn. Bạn có thể tìm plugin HTML Minify. :-P
Son Dang đã bình luận:
12/04/2015 at 20:29Website anh Hiếu đang xài chức năng nén css và javascript là plugin hay cùng code vậy anh!
Trung Hiếu đã bình luận:
12/04/2015 at 21:42Mình không dùng code cũng không dùng plugin bạn nhé. Mình nén theo phương pháp thủ công. :)
ha ha đã bình luận:
27/05/2016 at 05:23thôi xong chèn xong code thì lỗi 500 k còn gì để khóc cán bộ xem có lỗi gì không
Trung Hiếu đã bình luận:
27/05/2016 at 08:15Nếu lỗi thì bạn vào Files Manager của cPanel/ DirectAdmin hoặc FTP, mở file functions.php của theme ra và xóa đoạn code vừa chèn vào là được. :P
can ho southern dragon đã bình luận:
06/09/2016 at 23:18Kaka, dùng đoạn code bạn đưa có vẻ hay, mình đang áp dụng và chạy thấy cũng tạm ổn hơn plugin.
Thanks thớt.
Luong Quan đã bình luận:
26/11/2016 at 11:17Mình cũng đang dùng code của bạn để nén, thấy xài ổn hơn plugin Autoptimize đó. Thanks bạn !!
Quốc đã bình luận:
29/11/2016 at 16:32Code này bỏ vào trong thẻ PHP là được nhé mọi người bỏ ngoài là bị lỗi. Bác up code mà không chỉ mọi người nhé :(
Sơn Zim đã bình luận:
18/12/2016 at 12:03Mình sử dụng WP Rocket có hơn gì k nhỉ?
Vy Spirit đã bình luận:
18/12/2016 at 12:11WP Rocket cũng có chức năng nén như này mà :D hơn ở chỗ ko cần phải làm thêm gì cho mất công :D
khach san phu quoc đã bình luận:
13/02/2017 at 23:17theme cuả mình nặng quá , chỉnh sao vẫn chậm
Đạo tặc Comment đã bình luận:
20/03/2017 at 20:40Đang tìm thì vớ được, sẽ đem cái này vào theme.
Cũng đưa khung comment lên trên rồi ạ :P
Trung Hiếu đã bình luận:
20/03/2017 at 21:55Anh đang tiến hành một số thay đổi để nâng cao trải nghiệm người dùng. :P
Soju đã bình luận:
23/03/2017 at 23:31cái mục Files optimisation: (Minification & Concatenation) ở plugin WP rocket (có HTML, CSS, JS, Google Fonts) cũng là cái này hả a. thấy dưới có dòng chữ đỏ nên không dám nghịch linh tinh @@
Trung Hiếu đã bình luận:
24/03/2017 at 08:43Chính xác. Nhưng không phải site nào cũng áp dụng được, vì có thể sẽ gây lỗi giao diện. :P
Soju đã bình luận:
04/04/2017 at 21:41e bật cái html (tích cả 2 mục nhỏ bên trong Inline CSS và Inline JS). nhưng khi test pagespeed insight nó vẫn báo giảm bớt html với đường dẫn là trang chủ luôn. ko có gạch chéo / cái mục gì cả. vậy nếu e muốn nén thủ công thì e phải lấy html từ file nào ra nén đây a (e đã nén thành công js và css rồi nhưng nó chỉ rõ file đấy là file nào chứ ko đưa mỗi cái link trang chủ như ở html). theo e nghĩ là file index.php ở trong mục theme. nhưng mà view xem thử toàn thấy php không có mỗi tí html @@
Trung Hiếu đã bình luận:
05/04/2017 at 07:51HTML của WordPress không nén thủ công được vậy đâu nha. 1 là dùng code. 2 là dùng plugin. Không nén bằng tay được, dễ lỗi lắm. :P
mrleezoo đã bình luận:
02/11/2017 at 11:45Xin chào Trung Hiếu.
Xin được hỏi hiện mình đang dùng The Fastest Cache rồi nhưng thấy phần trăm minify của plugin này vẫn chưa hết tính năng (bản free ==!) thì mình thêm đoạn mã này có ảnh hưởng gì đến site không bạn ?
Trung Hiếu đã bình luận:
02/11/2017 at 12:17Không nên dùng chung code với các tính năng tương tự của plugin bạn nhé, rất dễ bị xung đột. :P
mrleezoo đã bình luận:
02/11/2017 at 14:19Vậy theo bạn đánh giá nên sử dụng code hiệu quả hơn hay dùng plugin ?
Trung Hiếu đã bình luận:
02/11/2017 at 19:30Nếu plugin tạo cache đã tích hợp sẵn tính năng minify thì sao phải dùng thêm code nhỉ. :P
mrleezoo đã bình luận:
03/11/2017 at 08:09ok cảm ơn bạn đã dành thời gian tư vấn :D :D
Đỗ Huệ đã bình luận:
13/09/2018 at 00:11Anh cho em hỏi, là Minify HTML thì có ảnh hưởng gì tới SEO không ak
Mong anh giải đáp giúp em ạ.
Tks anh
Trung Hiếu đã bình luận:
13/09/2018 at 08:02Trên thực tế dù bạn có minify HTML hay không minify HTML thì các bots tìm kiếm vẫn đọc hiểu dữ liệu website giống nhau. Minify giúp page-size nhẹ hơn => web load nhanh hơn => có lợi cho SEO.
Đỗ Huệ đã bình luận:
15/09/2018 at 11:18Dạ e cảm ơn anh nhiều ak