Nén Javascript và CSS để tăng tốc cho website

Tốc độ tải trang luôn là một bài toán chưa bao giờ có hồi kết đối với mỗi lập trình viên. Ngoài việc phải tối ưu thuật toán, tối ưu từng dòng code để quá trình xử lý, truy xuất dữ liệu nhanh chóng thì việc tối ưu các file css, javascript cũng góp phần làm giảm dung lượng lưu trữ cũng như khả năng đọc css trở lên nhanh hơn.

Thông thường khi bạn thiết kế xong một trang web bạn sẽ giật mình bởi các file css, js của bạn lên tới hàng trăm KB. Bạn đã bao giờ đặt câu hỏi tại sao lại có sự thay đổi lớn về dung lượng các file cs, js trước và sau khi tối ưu chưa? Đây là một số nguyên nhân mà tôi có thể chỉ cho bạn:
  • + Quá nhiều các dòng comment không cần thiết
  • + Xuống dòng
  • + Khoảng trắng
  • + Viết mã chưa tối ưu
Nhưng nếu được tối ưu lại thì nó chỉ chiếm của bạn vài 3 chục MB là cùng, đồng nghĩa với việc giảm được khá nhiều dung lượng dành cho việc lưu trữ các dữ liệu khác.

Những lý do bạn cần phải nén các file css, js

+ Tăng tốc độ đọc file: thay vì phải tải một file vài trăm KB thì website chỉ cần tải có vài MB thì đương nhiên là sẽ nhanh hơn rất nhiều rồi.
+ Tiết kiệm dung lượng hosting: chắc chắn là vậy, giảm được vài trăm KB là bạn có thể chứa thêm cả một đống ảnh hoặc dữ liệu khác
+ Tiết kiệm băng thông: càng phải tải ít thì băng thông càng được tiết kiệm
+ Bảo mật: Khi nén các file css, js thì khả năng soi code sẽ trở lên khó khăn hơn rất nhiều, điều này làm nản lòng những người muốn ăn cắp giao diện website

Cách nén file Javascript và CSS

Nén Javascript

Về cơ bản nén file javascript là một hành động loại bỏ các ký tự thừa không cần thiết trong code js, ví dụ như khoảng trắng, xuống dòng, chú thích, loại bỏ các đoạn mã trùng lặp, tối ưu lại code js... Bạn hoàn toàn có thể làm thủ công bằng tay công việc này nhưng điều đó khiến bạn mất rất nhiều thời gian mà đôi khi còn làm chưa thực sự kỹ lưỡng. Tôi sẽ chỉ cho bạn các nén file js bằng công cụ online tại website này:

http://compressorrater.thruhere.net/

Cách sử dụng rất đơn giản, bạn chỉ cần copy toàn bộ code js và past vào khung "Paste or type your JavaScript code here:" sau đó nhấp vào nút CompressorRate It! rồi chờ trong ít phút để hệ thống xử lý. Sau khi hoàn tất bạn sẽ có một bảng thông báo như sau:
Hướng dẫn xem kết quả sau khi nén file javascript và css

Hướng dẫn xem 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). Không nên dùng js nào được nén mà Run time quá lâu bạn nhé.

Size: Chú ý phần 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.

Lưu ý
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ư:

margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;

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

margin: 5px;

Hoặc thay vì viết code cho thuộc tính màu sắc là:
color: #ffffff

Ta có thể tối ưu bằng cách viết lại như sau:
color: #fff

Với CSS, bạn có thể dùng công cụ sau:

http://www.csscompressor.com/

Cách sử dụng khá đơn giản, bạn 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ũ. Việc sử dụng công cụ nén này không làm ảnh hưởng đến file css của bạn, nó chỉ xóa bỏ các ký tự thừa, không cần thiết mà thôi nên bạn cứ yên tâm mà làm nhé.

Lưu ý
Sau khi nén xong sẽ tương đối khó chỉnh sửa, một mẹo nhỏ là bạn dùng firebug để soi code sau đó search theo tên class/ID hoặc số dòng của của class/ID đó sẽ nhanh hơn rất nhiều.

Trên đây là toàn bộ các nén file css và js, một trong những cách để tăng tốc độ load trang web mà những lập trình viên chuyên thiết kế website nên tham khảo để tối ưu hơn cho website của mình.

Chúc các bạn thành công!




Bạn đang ở chuyên mục: Thiết kế website » Kiến thức » Học thiết kế website » Nén Javascript và CSS để tăng tốc cho website