[Blogger] Loại bỏ JavaScript và CSS chặn hiển thị cho blogspot

Loại bỏ JavaScript và CSS chặn hiển thị là 1 cụm từ quen thuộc trên khung tìm kiếm khi bạn đã trở thành 1 blogger. Loại bỏ JavaScript và CSS chặn hiển thị giúp trang web của bạn tải nhanh hơn và tốt cho SEO

JavaScript và CSS chặn hiển thị xuất hiện khi bạn tiến hành kiểm tra hiệu suất website trên Google PageSpeed Insights. Với đại đa số template thì hầu như lúc nào cũng có 3 tác nhân chặn hiển thị đó là

• Đoạn mã nhúng Jquery
• Đoạn mã nhúng Fontawesome
• Đoạn css bundle tự sinh của blogger

Ngoài ra còn có thể có thêm 1 số đoạn mã nhúng mà webmaster thêm vào tùy từng template.

Bài viết này sẽ giúp bạn khắc phục được tình trạng trên.

I, Loại bỏ CSS chặn hiển thị

Cách 1: Chèn trực tiếp vào template

Với đoạn css thông thường nếu như bị báo chặn hiển thị bạn chỉ cần copy toàn bộ nội dung của nó và dán trực tiếp vào template, không thông qua thẻ link nữa, như vậy code sẽ có dạng

<style type='text/css'>
/* Đặt toàn bộ code css vào đây */
</style>

hoặc đặt tất cả code trước ]]></b:skin>

Cách 2: Sử dụng script

Nếu không thích chèn vào template bạn có thể sử dụng đoạn script sau

<script type='text/javascript'>//<![CDATA[
function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("LINK1.css"),loadCSS("LINK2.css");
//]]></script>

thay link tương ứng vào LINK1.css, LINK2.css, ..., LINKn.css

Riêng với fontawesome bạn chỉ có thể thực hiện theo cách 2. Với CSS bundle tự sinh của blogger, bạn có thể thực hiện theo cách 2, hoặc nếu template của bạn không cần tới nó có thể tắt đi 1 cách cực kì dễ dàng bằng cách thêm b:css='false' như 1 thuộc tính của thẻ html

Bạn phải hết sức cẩn thận với css bundle này nhé, khi đã chặn hiển thị hoặc vô hiệu hóa nó phải test tất cả các widget, các chức năng comment, phân trang,... mà blogger cung cấp cho. Không đến lúc lỗi lại không biết tìm nguyên nhân từ đâu 😁

II, Loại bỏ JS chặn hiển thị

Tương tự như CSS bạn cũng có 2 cách

Cách 1: Chèn trực tiếp code vào template

<script type='text/javascript'>//<![CDATA[
// Đặt code vào đây
//]]></script>

Trong trường hợp code không cần phân tích bạn có thể bỏ //<![CDATA[ và //]]> đi nhé

Cách 2: Tải không đồng bộ các tài nguyên JavaScript

Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên CSS. Mã nhúng có dạng

<script async='async' src='file.js' type='text/javascript'/>

Thuộc tính defer của JavaScript cho phép bạn trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong. Mã nhúng có dạng

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

Sau khi thêm bạn phải test ngay lại tất cả những gì trong blog của mình để tránh gặp lỗi.

Với kinh nghiệm có được tôi thường chặn JS hiển thị theo cách 1, mặc dù khi dán vào thì nhìn code trong phần chỉnh sửa HTML hơi dài và bất tiện 1 xíu nhưng không sao nó cũng chỉ là phần cánh gà, cái chính là khắc phục được yêu cầu đặt ra

Cuối cùng xin chúc bạn thành công và nhanh lên top nhé !