Tối ưu hóa web, nén Javascript và CSS để tăng tốc cho web

Tốc độ tải website, một vấn đề luôn được chú trọng hàng đầu. Trong bài viết hôm nay tôi sẽ giới thiệu cho bạn cách cắt giảm chi tiêu về dung lượng lưu trữ cho các tệp tin .css và .js trên hệ thống. Thuật ngữ “Nén” dường như không còn gì xa lạ với mọi người. Một thư viện javascript trần thường có thể chiếm dung lượng lên đến cả hàng trăm kí lô byte.Điển hình là JQuery đồ sộ. Bạn có biết Jquery lúc chưa được nén có dung lượng bao nhiêu? Sắp xỉ 229KB. Nhưng bản nén thì sao? chỉ vào khoảng 31KB thôi bạn ạ. Trên máy ta thì chắc nó chả có nghĩa địa gì.

Nhưng trên trường WWW, một Webmaster có tầm nhìn xa chắc chắn sẽ thấy một tương lai thiệt thòi trước mắt.

Những lợi ích mà việc nén Javascript và CSS mang lại
+ Tăng tốc độ duyệt web của người dùng. À, thay vì gòng lên tải cả trăm kí. Người dùng chỉ cần tải một file nén với kích thước nhỏ hơn nhưng lại không ảnh hưởng gì đến trang web đang xem.

+ Tránh những cập mắt tò mò. Sau khi nén, việc soi code có lẽ sẽ khó khăn hơn bình thường khá nhiều.

+ Tiết kiệm được không gian lưu trữ: Có vài trăm kí thì có ích gì… không với những kí lô byte mà ta tiết kiệm được đó, ta có thể lưu trữ thêm được một mớ ảnh đấy .

+ Tiết kiệm băng thông: như trên

Nén Javascript và CSS thế nào?
Nén Javascript
Nén, thực chât là loại bỏ những ký tự dư thừa vốn không cần thiết trong code. Ví dụ như: khoảng trống, xuống dòng, chú thích, … Hay làm ngắn đoạn code lại bằng cách lựợc bỏ những biến không cần thiết, những giá trị lập đi lập lại, … . Hiên nay có khá nhiều công cụ online giúp bạn làm công đoạn “nén” này một cách tự động.

Mình xin đề cử một công cụ nén Javascript tổng hợp vô cùng hiệu quả, đó là:

http://compressorrater.thruhere.net/

Bạn chỉ cần copy đoan code mình muốn nén, cho nó vào hộp text. Và ấn “CompressorRate It!”… chờ vài phút, để trang web xử lí code của bạn với từng loại thuật toán. Sau khi hoàn tất, sẽ có một bảng báo cáo đầy đủ cho bạn.

Một số thông tin bạn nên biết khi xem bảng báo cáo của CompressorRater.

Compression Tool: công cụ dùng để nén, hay thuật toán nén JS. Thường thì YUI sẽ cho kết quả tối ưu nhất.
Run time: Tốc độ thực hiện code (khi client đã tải xong). Đừng nên dùng js nào được nén mà Run time quá lâu bạn nhé.

Size: Quan trọng này, cột đầu tiên là kích thước sau khi nén tính theo byte. % thể hiện dung lượng script được nén so với nguyên bản của nó.

Khi chọn được những thông số ưng ý, ấn “View” để xem source code (đã nén). Bạn có thể copy nó ra rồi dán vào file js để dùng hoặc nội dung file nén này lại với lệnh File -> Save as… trên trình duyệt.

Ghi chú

Một lời khuyên nho nhỏ, nếu site của bạn phải import nhiều file .js. Bạn hãy copy nội dung tất cả bọn chúng cho vào công cụ nén => ra một file duy nhật + dung lượng bé.

Nén CSS

Cách nén của CSS cũng có phần giống Javascript. Ngoài việc loại bỏ ký tự dư thừa. Với CSS ta còn có thể gộp nhiều thuộc tính giống nhau lại thành một nhóm, như vậy sẽ tiết kiệm được thêm vài dòng code. Ví dụ như:

Mã:1 margin-left: 5px; 2 margin-right: 5px; 3 margin-top: 5px; 4 margin-bottom: 5px;

Ta có thể gọp lại thành một dòng duy nhất.

Mã:1 margin: 5px;

Với CSS, bạn có thể dùng công cụ sau: http://www.csscompressor.com/
Chỉ cần copy toàn bộ code css bỏ vào, ấn compress. Sau khi nén xong bạn chỉ cần copy đoạn code được nén chép đè lên phần style css cũ. Và như mình nói ở đầu bài. Việc nén này hoàn toàn vô hại, không làm thay đổi ý nghĩa những dòng code của ta mà chỉ làm cho chúng trở nên gọn gàn. Loại bỏ đi những phần thừa thải không cần thiết.

Lưu ý

Sau khi nén xong, code sẽ rất khó chỉnh sửa do code nén thường chỉ còn có 1 dòng duy nhất (giảm kích thước tối đa mà). Code viết liên miên không có cách, chú thích, hay làm dấu hiệu gì để cho dễ đọc. Vì thế bạn nên lưu một bản nháp để sau này tiện chỉnh sửa và nén tiếp nhé

Sưu tầm và chỉnh sữa.