Hướng dẫn tăng tốc Blogger toàn tập

Cuộc sống thật bận rộn, chính vì thế, tất cả chúng ta đều không có thời gian để ngồi đợi một website load quá lâu. Website của bạn load quá chậm đồng nghĩa với bạn đang mất đi không ít những khách hàng tiềm năng.

Tầm quan trọng tốc độ tải trang

Sau khi cập nhật những thuật toán xếp hạng mới, có vẻ như Google rất để tâm đến vấn đề này. Chính vì thế, để SEO đạt hiệu quả cao hơn, tăng tốc Blog là công việc không thể thiếu. Bên cạnh đó, người dùng chắc chắn sẽ thích thú truy cập vào Blog của bạn hơn nếu bạn làm tốt việc này

Hướng dẫn tăng tốc Blogger toàn tập

Tối ưu hóa Javascript

Hạn chế sử dụng Javascript

Mặc định, Blogger cung cấp khá ít chức năng, chỉ vừa đủ để tạo một Blog đơn giản nhất. Thế nhưng do nhu cầu sử dụng Blogger ngày càng tăng cao, đặc biệt là nhu cầu làm đẹp, chúng ta thường sử dụng quá nhiều Javascript làm giảm đáng kể tốc độ của Blog. Chính vì thế, nếu không thực sự cần thiết thì bạn đừng sử dụng nhiều Javascript quá.

Sử dụng async để tối ưu Javascript

Nhiều trường hợp, bạn không thể không sử dụng Javascript, ví dụ như thu gọn bài viết trên trang chủ, các nút chia sẻ mạng xã hội, các plugin jQuery. Vì vậy, chúng ta sẽ áp dụng kĩ thuật async để tối ưu hóa tốc độ tải JS.

Khi áp dụng kĩ thuật async, trình duyệt sẽ không ưu tiên load JS trước, mà chỉ load Javascript sau khi quá trình load HTML hoàn tất.

Để áp dụng kĩ thuật này, bạn thêm async vào trong thẻ mở <script>. Ví dụ

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript' async></script>

Bên cạnh đó, các bạn cũng có thể sử dụng đoạn script sau để trì hoãn tải javascript

<script type="text/javascript">
function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "link javascript.js";
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script> 

Nén Javascript

Nén Javascript thực chất là xóa bỏ các khoảng trống, chú thích không cần thiết. Để nén javascript, bạn hoàn toàn có thể làm bằng tay nhưng rất mất thời gian. Thay vào đó, bạn có thể sử dụng các công cụ miễn phí. Một số công cụ bạn có thể sử dụng : JSCompress, Javascript Compressor ...........

Ẩn file Javascript mặc định

Mặc định, Blogger có một file Javascript là blogger.com/static/v1/widgets/1384195903-widgets.js, file này sẽ được tự động thêm vào template. Để ẩn file này đi, bạn có thể áp dụng thủ thuật khá hay sau. Các bạn vào Template => Edit, tìm kiếm </body> và thay thế nó bằng đoạn code sau

&lt;!--</body>--&gt; &lt;/body&gt;

Tối ưu hóa  CSS

Nén CSS

Tương tự như nén Javascript, các bạn có thể làm bằng tay hoặc sử dụng 1 số công cụ như CSS Compressor, CSS Minifier...... Nếu Blog của bạn có số lượng lớn code CSS thì việc nén CSS có thể tăng tốc Blogger đáng kể

Ẩn file CSS mặc định

Bên cạnh file Javascript mặc định, Blogger cũng tự động thêm 1 số file CSS. Để làm việc này, các bạn vào Template => Edit, thay thế toàn bộ đoạn code

<b:skin><![CDATA[
Code CSS của Blog
]]></b:skin>

bằng đoạn code

&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Code CSS của Blog
</style>

Lưu ý : Khi áp dụng, thủ thuật ẩn file CSS mặc định, một số widget có thể sẽ bị xóa hết thiết lập CSS, vì vậy, chỉ những bạn có khả năng chỉnh sửa CSS mới nên áp dụng thủ thuật này

Tránh chèn code CSS inline

Trong quá trình thiết kế template blogger, có thể bạn sẽ soạn code như sau

<div style='width:xxx;height:yyy'>.....</div>

Khi chèn code CSS inline, bạn vô tình làm giảm kết nối tới sever, ảnh hưởng đến tốc độ Blog.

Tối ưu hóa hình ảnh

Nén hình ảnh

Hình ảnh kích thước lớn là một trong những nguyên nhân chính làm giảm tốc độ tải trang. Do đó, nếu không thực sự cần thiết, các bạn nên nén hình ảnh để tăng tốc cho Blog

Một số công cụ có thể nén hình ảnh. Các bạn có thể tự nghiên cứu hoặc đợi một bài viết hướng dẫn nén hình ảnh sắp được xuất bản trên Blog

• Online : TinyPNG, Compress JPEG Images Online, Free Image Optimizer....
• Phần mềm : FILEminimizer Pictures........ 

Sử dụng Base64 để mã hóa hình ảnh

Base64 là một chương trình mã hóa chuỗi ký tự, nó được sử dụng để mã hóa, truyền tải các tập tin đa phương tiện trong đó có hình ảnh. Chúng ta cần sử dụng 1 số công cụ để chuyển hình ảnh thành kí tự mã hóa, sau đó copy đoạn code vào nơi cần hiển thị hình ảnh. Ví dụ

<img src="data:image/png;base64,abcxyzabc" />

Một số công cụ có thể chuyển định dạng hình ảnh sang dạng kí tự mã hóa : Base64 Image Encoder, b64.io.... Trong bài viết tới, mình sẽ nói thêm về vấn đề này.

Sẽ còn Update thêm nếu phát hiện ra thủ thuật gì đó hay ho.

Lời kết : Trên đây là những thủ thuật theo mình thấy có thể tăng tốc Blogger đáng kể, mình khuyên các bạn nên áp dụng

Xin chân thành cảm ơn !!!