Tối ưu Blogspot - #5 Nén CSS và Javascript trên blogger

Trong bài này mình sẽ hướng dẫn các bạn cách nén CSS và Javascript, cách tối ưu Javascript
Mình có một lưu ý: Trước khi tiến hành các bước tối ưu bạn nên backup template bạn để tránh trường hợp làm bị lỗi thì bạn có thể cập nhật lại mẫu dễ dàng hơn.

I. TỐI ƯU CSS CHO BLOGGER

Nhiệm vụ của phần tối ưu SEO Onpage nén CSS này là giảm tải CSS cho code bạn cần làm 2 việc
1. Xóa các id và các class trùng lặp, xóa bỏ một số lên css không cần thiết để giảm dung lượng
2. Nén CSS bằng công cụ sau, công cụ này sẽ giúp xóa bỏ các khoảng trắng giúp code CSS được nén lại giảm dung lượng bạn có thể truy cập trang sau để tiến hành nén csscompressor.com
Lưu ý: Bạn nên phân từng đoạn nhỏ để nén không nên nén 1 lần toàn bộ CSS sẽ rất dễ bị lỗi. Mỗi lần lưu nên kiểm tra lại giao diện xem có lỗi phần nào không.

II. TỐI ƯU JAVASCRIPT

Cách 1: Thêm async='async' vào giữa cặp thẻ <script> </script>
Ví dụ bạn thêm: 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
Thành: 
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/> 
Lưu ý: Nếu xảy ra tình trạng lỗi thì bạn không nên xử lý thằng này nhé và thằng này cũng giúp cải thiện nhiều đến điểm Google Insight 
Cách 2: Bạn có thể thay link .js với url bất kì
Ví dụ bạn thay: 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
 Thành: 
<script type="text/javascript">function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https:///ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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> 
Sử dụng các công cụ online để nén Javascript
jscompress.com
javascript-compressor.com
Lưu ý: bạn chỉ cần copy phần code nằm trong cặp thẻ <script> và </script> lại trừ cặp thẻ <script>
Chúc bạn thành công!


Nguồn: Blog chia sẻ thủ thuật

Không có nhận xét nào:

Đăng nhận xét

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.