Công nghệ làm web hiện tại đang khai thác triệt để khả năng của các file CSS và JavaScipt để đạt được các yêu cầu về chức năng và phi chức năng của hệ thống. Tuy nhiên, nếu quá lạm dụng các file này sẽ có thể làm hệ thống chậm hơn do phải tốn thời gian tải các file đó. Điều này dẫn đến 1 xu hướng thiết kế mới là dùng càng ít file .CSS và .JS càng tốt. Ngoài ra, chúng ta còn có thể tối thiểu hóa kích thước của các file này bằng cách loại bỏ đi những ký tự không cần thiết như khoảng trắng, xuống dòng, tab,... đây chính là cách minify css và JavaScript.
Đúng như là như vậy, lúc code chúng ta thường hướng đến tính dễ đọc, dễ hiểu nên dùng dấu xuống dòng, thụt ra, thụt vào khá nhiều, nhưng lúc chạy những thành phần đó lại trở nên dư thừa. Vấn đề mà chúng ta quan tâm sẽ là làm sao để tối ưu hóa các file CSS có sẵn, mà vẫn giữ nguyên được tác dụng của nó. Để minh họa, chúng tôi giới thiệu 1 công cụ nhỏ gọn có tên là csCSSc ở địa chỉ http://www.automotivecenter.nl/diversen/utility/csscompressor/ , với công cụ này chúng ta có thể nhập vào nội dung đoạn CSS cần tối ưu, ví dụ như sau:
Sau khi nhấn nút Compress, kết quả đoạn code CSS tối ưu tương ứng sẽ hiển thị ngay ở pane bên dưới như sau:
Chúng ta dễ nhận thấy rằng, tất cả các khoảng trắng và dấu xuống dòng, các dấu chấm phẩy không cần thiết đã bị loại bỏ. Đồng thời toàn bộ nội dung đoạn CSS mới phát sinh nằm trên 1 dòng duy nhất. Ngoài ra, công cụ còn cho biết tỉ lệ nén file CSS đạt được là 74%. Tác dụng khi áp dụng file đoạn CSS được tối ưu này, vẫn được đảm bảo đúng như đoạn CSS gốc.
Tuy nhiên, nếu có nhu cầu debug, chỉnh sửa trên 1 file CSS đã nén thư thế thì sẽ thật vất vã. Do đó, khi cần chúng ta cũng có thể giải nén ngược lại bằng nút Decompress kế tiếp. Kết quả giải nén cho cùng đoạn code đã nén như sau:
Các mã màu đã được viết lại đầy đủ, các dấu chấm phẩy, các dấu xuống dòng cũng đã trở lại đúng như cách chúng ta code CSS thông thường. Đặc biệt, trang web còn cung cấp mã nguồn của đoạn JavaScript dùng để thực hiện việc nén và giải nén CSS để chúng ta tái sử dụng khi cần thiết.
Đối với các file JavaScript, hình thức thực hiện hoàn toàn tương tự. Bạn đọc hãy cùng tìm hiểu những công cụ thích hợp dùng các từ khóa compress/decompress JavaScript, minify hay unminify CSS và chia sẻ kinh nghiệm của mình cho cộng đồng thông qua việc phản hồi lại bài viết này nhé.
Theo công cụ đánh giá tốc độ duyệt website của Google, việc nén file CSS sẽ giúp tốc độ
website của bạn tăng lên tới 30%.
Bạn truy cập vào liên kết sau sẽ hiểu rõ hơn về tốc độ trang
web của NEVICOM:
Tối ưu hóa website luôn là vấn đề cần giải quyết ngay khi trang web mình hoạt động:
Công cụ nén file CSS sau đây sẽ giúp bạn tối ưu hóa code CSS.
Nén file js theo đường link sau đó copy code vào 1 file mới rồi up lên host riêng của bạn: http://closure-compiler.appspot.com/home
Plugin nén file gộp (js, css thánh 1) cho wordpress
0 nhận xét:
Post a Comment