Trì hoãn javascript để cải thiện tốc độ tải trang

Khi trình duyệt tải về nội dung trang blog/web nó phải duyệt qua tất cả các Javascript. Nếu trang blog/web có nhiều Javascript thì trình duyệt sẽ phải làm việc quá sức vì cùng lúc nó phải biên dịch và chuyển đổi các đoạn mã Javascript thành nội dung tương ứng. Điều này sẽ làm cho tốc độ tải trang bị chậm lại, nhiều lúc trình duyệt bị "đơ", do đó sẽ gây cảm giác không thoải mái cho người theo dõi. Vì thế nếu bạn biết javascript nào không quan trọng thì sẽ trì hoãn nó lại đợi khi các thành phần khác tải xong thì mới tiến hành duyệt đến javascript đó. Sự sắp xếp này giúp cho trình duyệt tuần tự thể hiện các thành phần của trang mà không bị quá tải và tạo cảm giác "mượt mà" cho blog/web của bạn.

Để trì hoãn một javascript nào đó ta sử dụng thuộc tính "defer" của thẻ <script>. Nếu bạn lưu trữ javascript đó trên host riêng và trong template bạn truy xuất đến nó theo dạng <script type='text/javascript' src='common.js' ></script> thì ta thêm vào thuộc tính "defer" như sau

<script type='text/javascript' src='common.js' defer='defer'></script>

Còn nếu javascript được thiết kế trực tiếp trong template thì ta sử dụng thuộc tính "defer" như dưới đây

<script type='text/javascript' defer='defer'>
// Nội dung code.
</script>

Hy vọng thuộc tính "defer" này sẽ giúp bạn cải thiện tốc độ tải blog/web. Chúc bạn thành công.

Gzip javascript để tăng tốc blog

Bạn có một blog (web) cá nhân, ngoài việc hoàn thiện nội dung thì chắc hẳn bạn cũng đầu tư cho blog mình nhiều tiện ích thú vị, và trong số đó ắt sẽ có nhiều tiện ích được viết bằng javascript. Tuy nhiên, template càng nhiều javascript càng làm tốc độ tải blog chậm lại. Vậy có cách nào cải thiện tốc độ tải blog trong khi vẫn giữ lại các tiện ích không? Qua tìm hiểu, mình thấy có các công cụ online cho phép nén các javascript để thu được dung lượng code javascript nhỏ hơn mà vẫn giữ nguyên tính năng của javascript đó. Với từ khóa minify javascript online bạn sẽ dễ dàng tìm thấy những công cụ này khi tìm kiếm trên Google. Việc giảm dung lượng javascript sẽ làm cho template nhẹ hơn và do đó sẽ cải thiện tốc tộ tải blog. Nhưng theo gtmetrix.com, tối ưu hóa javascript không chỉ có tiêu chí minify (cực tiểu hóa) mà còn thêm tiêu chí Enable gzip compression nữa. Vì thế, việc Gzip các javascript sẽ góp phần tăng tốc cho blog của bạn.

Một công cụ online (được Google code giới thiệu) cho phép bạn vừa giảm dung lượng vừa gzip javascript đó là closure-compiler.appspot.com.

Để tối ưu hóa javascript, đầu tiên bạn vào http://closure-compiler.appspot.com.

Tiếp đến bạn paste đoạn mã javascript (là đoạn mã nằm giữa cặp thẻ <script>...</script>) vào cửa sổ bên trái màn hình và chọn chế độ gzip: Whitespace only hoặc Simple hoặc Advanced tùy theo yêu cầu của bạn.

Bạn bấm vào Compile và thấy đoạn mã javascript đã được tối ưu hóa ở cửa sổ bên phải hoặc bấm vào link default.js thì sẽ thấy đoạn mã này.

So sánh hai thông số Original size và Compiled size trong hình trên bạn sẽ đồng ý rằng không những dung lượng javascript được giảm xuống rõ rệt mà còn được gzip nữa.

Bạn thay đoạn mã đã tối ưu hóa vào vị trí đoạn mã ban đầu rồi lưu mẫu và kiểm tra xem thế nào nhé. Chúc bạn thành công.