Hướng dẫn nén JavaScript và CSS không dùng Plugin

Nếu đã từng dùng công cụ kiểm tra tốc độ website như Google Insights hay Gtmetrix các bạn thường thấy thông báo Minify JavaScript and CSS, đây là yêu cầu nén JavaScript và CSS để giảm kích thước các tập tin nhằm tăng tốc website. Kích thước file JavaScript và CSS lớn cũng là nguyên nhân làm ảnh hướng đến thứ hạng website trên google.

Nếu dùng WordPress các bạn có thể dùng plugin rất nổi tiếng W3 total Cache để thực hiện công việc minify & compress javascript/css một cách tự động. Tuy nhiên cách này có thể gây ra lỗi web hiển thị không đúng, thứ nữa sẽ làm trang web của bạn chậm đi vì cài nhiều plugin.

Hôm nay mình sẽ hướng dẫn các bạn cách rút gọn và nén JavaScript/CSS bằng dòng lệnh trên Linux Web Server và dùng tool nén Online để tối ưu trang web của mình, rất có lợi cho SEO.

1. Sử dụng YUI Compressor.

YUI Compressor là gì? Đó là công cụ Minify JavaScript and CSS được nhóm nghiên cứu về Performance của Yahoo phát triển trên ngôn ngữ Java, YUI Compressor 2.4.8 đang là bản mới nhất.

Cài đặt Java trên linux

Do được viết bằng Java bạn cần cài đặt Java trên VPS Server của mình.

CentOS/RHEL/Fedora:

yum install java

Ubuntu/Debian:

apt-get install default-jre

Kiểm tra java cài đặt ok hay chưa bạn chạy lệnh:

java -version

Kết quả như bên dưới là ok.

[root@srv1 ~]# java -version
 openjdk version "1.8.0_91"
 OpenJDK Runtime Environment (build 1.8.0_91-b14)
 OpenJDK 64-Bit Server VM (build 25.91-b14, mixed mode)

Cài đặt YUI Compressor

Trước tiên cần tài YUI về :

wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar -P /etc/java/yuicompressor

Mình down về và để file trong /etc/java/yuicompressor, bạn có thể tạo thư mục khác tùy thích.

Bạn tạo shell script đặt trong /usr/bin cho mình.

vi /usr/bin/yui

Với nội dung:

#!/bin/sh
 java -jar /etc/java/yuicompressor/yuicompressor-2.4.8.jar "$@"

Xong đâu đây bạn check lại xem script chạy được chưa, chạy lệnh:

[root@srv1]# yui --version
 2.4.8

YUI đã hoạt động, tiếp theo chúng ta đi vào công việc chính.

Nén JavaScript và CSS trên linux

Trước khi làm các bạn nhớ backup các .js & .css phòng rủi ro.

Ví dụ với trang thuysys.com khi check trên Google Insights mình nhận được thông báo phải giảm bớt JavaScript và CSS như hình bên dưới.

Link website là vậy, trên server là đường dẫn đến source code tùy cách phân cấp thư mục bạn dùng đường dẫn cho phù hợp.

Link JavaScript cần minify là:

https://www.thuysys.com/wp-content/plugins/wp-shortcode/js/jquery.tipsy.js

Thì trên server thành:

/var/www/thuysys.com/wp-content/plugins/wp-shortcode/js/jquery.tipsy.js

Link CSS cần minify là:

https://www.thuysys.com/wp-content/themes/mts_best/style.css

Sẽ thành:

/var/www/thuysys.com/wp-content/themes/mts_best/style.css

Cấu trúc lệnh tổng quan.

yui source-file -o minify-file

• source-file: file JavaScrip/CSS cần nén
• -o: để xuất ra dạng file
• minify-file: file JavaScrip/CSS đã được nén

Với cấu trúc trên chúng ta sẽ có hai lệnh:

yui /var/www/thuysys.com/wp-content/plugins/wp-shortcode/js/jquery.tipsy.js -o /var/www/thuysys.com/wp-content/plugins/wp-shortcode/js/minify-jquery.tipsy.js
yui /var/www/thuysys.com/wp-content/themes/mts_best/style.css -o /var/www/thuysys.com/wp-content/themes/mts_best/minify-style.css

Sau khi chạy lệnh bạn sẽ được 2 file nén tối ưu về dung lượng:

minify-jquery.tipsy.js
minify-style.css

Giờ bạn chỉ việc xóa file cũ đi thay bằng hai file mới này là xong, nhớ đổi tên giống file đã xóa đấy không là không chạy đâu ^^.

Lười đổi tên thì dùng lệnh sau

cat minify-jquery.tipsy.js > jquery.tipsy.js
cat minify-style.css > style.css

Chú ý đường dẫn của file, vì dài quá mình viết ngắn như vậy cho các bạn dễ đọc.

Tiếp theo dùng Google Insights kiểm tra lại.

Bạn có thể nhìn thấy không còn thông báo giảm bớt JavaScript/CSS nữa rồi, số “quy tắc được phê duyệt” đã tăng từ 4 lên 6 uy tín trang web của bạn trong mắt google tăng lên đắng kể.

Mình đã dùng trên CentOS 7 và Ubuntu 16.04 bản mới nhất không vấn đề gì cả. Bạn nào thích dùng command thử áp dụng vào website của mình xem sao ^^.

2. Nén JavaScript và CSS Online

Dùng command thì như vậy, ngoài ra có nhiều tools minify JavaScript/CSS online rất đơn giản như cleancss chẳng hạn.

Nén JavaScript

http://www.danstools.com/javascript-minify/

Nén CSS

http://www.cleancss.com/css-minify/

Bạn truy cập vào hai link bên trên copy code js và css paste vào rồi ấn Minify là xong.

Trên đây là cách nén JavaScrip/CSS bằng command và hướng dẫn dùng tool online từ giờ bạn quên plugin đi được rồi.

Theo mình đây là việc làm một lần rồi thôi bạn có gắng dành thời gian tối ưu javascript và css bằng những cách mình giới thiệu rất đơn giản không có gì phức tạp cả, chứ lúc nào cũng kè kè cái plugin sẽ làm web chậm đi đáng kể.

Chúc thành công.