Minify JavaScript/CSS là gì? Công cụ nén JS/CSS trên WordPress

Thuật ngữ Minify hay còn gọi là nén/giảm bớt dung lượng hiện có của tập tin. Đây là một kỹ thuật trong thiết kế web nhằm giảm thiểu tối đa dung lượng dư thừa. Đảm bảo tốc độ tải trang web nhanh hơn, tối ưu hơn cho SEO.

Trong một hệ thống hoặc trang web nhỏ, việc này không đem lại nhiều kết quả đáng kể. Tuy nhiên với web lớn thì việc minify này giúp cải thiện rõ rệt tốc độ tải trang. Gsviec sẽ lần lượt giới thiệu về thuật ngữ này cho các bạn. Cho dù bạn biết code hay chỉ dùng “web kéo thả” như WordPress cũng nên biết. Vì phần cuối cùng là giành cho các bạn để tối ưu web WordPress. Bài viết này sẽ có các phần:

  • Minify Javascript/CSS là gì?
  • Cách Minify JaveScript/CSS đơn giản nhất.
  • Plugin tối ưu JavaScript/CSS trong WordPress cho người mới dùng WP.

Minify Javascript/CSS là gì?

Minify JS/CSS là gì?

Với những bạn newbie, khi tham khảo những code cho dự án lớn hoặc từ những coder giàu kinh nghiệm sẽ thấy file có dạng: style.min.css hay script.min.js. Đây là những dạng file code đã nén – min. Như đã nói ở phần đầu, việc minify JS hay CSS ở đây tức là: giảm tối đa dung lượng dư thừa trong code bằng cách: loại bỏ đoạn trắng, đoạn xuống dòng, đoạn ghi chú trong tập tin… từ đó mà chúng có dung lượng nhỏ đi rất nhiều.

Minify JavaScript/CSS là gì?

Các bạn có thể kiểm chứng tốc độ load trang web sẽ nhanh như thế nào. Nhưng với những trang lớn thôi nhé, những trang nhỏ thì giảm thiểu vài kB thì cũng không đáng kể cho lắm trong tốc độ load trang. Gsviec sẽ giới thiệu các công cụ đo lường tốc độ tải trang ở phần tiếp theo. Ở những công cụ này ngoài đo lường tốc độ thì còn hỗ trợ cho các bạn những cách tối ưu website.

Tại sao phải Minify JS/CSS?

Trong kỹ thuật thiết kế web hiện nay và yêu cầu do SEO web đặt ra là phải chuẩn SEO. Ngoài những thuật toán mà các công cụ đưa ra thì việc tốc độ tải trang phải nhanh cũng là một yêu cầu bắt buộc. Ngoài ra, nếu tốc độ tải trang khá lâu thì ngoài công cụ tìm kiếm “chê” mà còn bị khách hàng tiềm năng chê. Bạn chả bao giờ rảnh để ngồi đợi trang web bán hàng nó load ra được sản phẩm quá 8 giây.

Giảm dung lượng file JV/CSS

Do đó, ngoài việc tối ưu hình ảnh – CSS Image Sprites thì tối ưu tệp code là việc nên làm. Những việc này sẽ giảm đi lượng băng thông cho web, tăng tốc độ tải trang. Các bạn có thể kiểm tra tốc độ tải trang của mình trên Google hoặc tại GTMetrix .

Công cụ Minify JavaScript/CSS tự động online

Bạn mò từng đoạn code sau đó bấm nút backspace trên mỗi vị trí cần xóa để minify ư? Câu trả lời tất nhiên là không rồi. Coder chả rảnh tới mức đó. Nếu bạn dò cụm từ khóa: “online Javascript compressor” thì sẽ xuất hiện nhiều công cụ minify js/CSS cho bạn chọn.

Ở đây Gsviec sẽ giới thiệu về 2 công cụ online là: refresh-sfwillpeavy. Thật ra, các công cụ viết mã IDE hay Editor đều hỗ trợ việc minify. Nhưng nếu bạn lười cài đặt phần mềm này kia thì cứ dùng online cho tiện.

Cách nào để Minify JV/CSS ?

Nén bằng Refresh-sf

Với công cụ Refresh-sf thì các bạn truy cập vào đường link này . Trang này rất “chân phương”, dễ sử dụng. Công việc của bạn sẽ là:

  • Copy và dán đoạn mã cần nén vào ô Input.
  • Đoạn code đó thuộc loại nào? JavaScript, HTML hay CSS? Hãy chọn nút nén theo từng loại ở ô góc bên phải màn hình.
  • Quá trình Minify đã xong, chọn tên để lưu về hoặc lưu dạng file nén. Ngoài ra, công cụ này sẽ giới thiệu được bạn đã tiết kiệm được bao nhiêu dung lượng.
Đoạn code HTML cần Minify bằng Refresh-sf
Đoạn code HTML sau khi minify, dung lượng giảm một chút.

Nén bằng willpeavy

Tương tự như Refresh-sf, Willpeavy cũng cung cấp công cụ tương tự như vậy. Bạn có thể truy cập đường link này. Sau đó cũng tiến hành các bước tương tự như trên.

Điểm khác biệt ở đây là Willpeavy không tiện lợi bằng Refresh-sf vì sau khi bấm Minify thì công cụ sẽ nén code lại nhưng không cho bạn biết dung lượng sau khi nén thế nào. Ngoài ra cũng sẽ không tự động tạo file tải về cho bạn mà bạn phải copy-paste thủ công.

Trên đây là 2 công cụ online sẽ giúp bạn nén JS/CSS tự động. Câu hỏi đặt ra là trong web, nếu bạn Minify HTML thì có sao không? Câu trả lời là: Nên nhưng phải dùng công cụ hỗ trợ. Bởi vì nén sẽ giúp bạn giảm dung lượng file HTML. Nhưng nếu nén trực tiếp như vậy rồi chèn vào mã nguồn dễ khiến bạn gặp vấn đề trình bày mã nguồn.

Plugin Minify cho JavaScript/CSS tự động trên WordPress

Phần này giành cho những bạn mới tập mày mò web WordPress. Hẳn sau khi đọc sơ qua lợi ích về việc Minify JavaScript/CSS thì bạn rất háo hức. Cũng muốn tối ưu nó ngay để giảm tốc độ load trang. Nhưng mà, bạn làm cách nào để minify JavaScript/CSS trên WordPress khi mà bạn còn chả biết code nó nằm chỗ nào?

Bài vừa rồi, Gsviec đã giới thiệu về plugin trong WP . Trong bài này, Gsviec sẽ giới thiệu về một plugin cần có trên web WP. Các bạn chắc đã biết cách cài plugin ở bài trước rồi nhỉ? Công việc bây giờ là các bạn hãy tìm kiếm từ khóa: “WP Fastest Cache” trên kho plugin, cài đặt và kích hoạt nó.

Sau khi cài đặt, kích hoạt, các bạn có thể cấu hình nó như hình dưới đây:

Click chuột trái vào WP Fastest Cache và tick vào ô như hình.

Bước tiếp theo, sau khi ra màn hình chính của trang web của bạn sẽ xuất hiệu icon WP Fastest Cache hình con cọp như hình bên dưới. Các bạn hãy click vào đó và chọn Minify JV/CSS.

Đưa chuột vào vị trí Delete Cache và chọn nén JavaScript/CSS

Trên WordPress có rất nhiều plugin để dùng tối ưu JV/CSS. Trong bài này Gsviec chỉ giới thiệu về plugin này. Những plugin khác cho WP thì Gsviec sẽ giới thiệu cho các bạn trong những bài sau. Sau khi thiết kế web xong, tối ưu và bạn dễ dàng kiểm tra tốc độ của chúng bằng những công cụ như đã nói ở trên.

Ngoài ra, để so sánh trước – sau khi tối ưu tốc độ như thế nào, các bạn có thể vào link này và gõ tên miền để kiểm tra. Dưới đây là một trang web đã được cải thiện đáng kể sau khi tối ưu mà Gsviec thực hiện.

Mọi thứ được cải thiện sau khi tối ưu web WordPress.

Qua bài viết này, Gsviec hi vọng đã giới thiệu được cho các bạn coder mới bắt đầu có công cụ để tối ưu code JV/CSS online. Cũng như các bạn không cần code vẫn có thể tối ưu code WP của mình.

Gsviec – Học lập trình online miễn phí.

3 thoughts on “Minify JavaScript/CSS là gì? Công cụ nén JS/CSS trên WordPress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *