Loại bỏ JavaScript và CSS chặn hiển thị của blogspot (blogger)

Mình đã đọc qua một số bài họ chỉ hướng dẫn cho các bạn loại các JavaScript và CSS mặc định của blogspot một cách mơ hồ vãi họ không hề hướng dẫn bạn loại bỏ JavaScript và CSS mình thêm vào trong khi viết code (không phải JavaScript và CSS mặc định)

“Loại bỏ” JavaScript và CSS để làm gì? “Loại bỏ” JavaScript và CSS chỉ có 1 mục đích duy nhất đó là làm tăng tốc độ load cho site và ăn điểm với Google. Giờ hãy cùng windows2it thực ngay nhé !

● Hướng dẫn khắc phục lỗi 404 ăn điểm với Google

● Tạo trang 404 thân thiện với SEO

Mình lấy ví dụ luôn đây là site bị chặn

- 4 đoạn JavaScript bị chặn

- 5 đoạn CSS (2 đoạn CSS mặc định và 3 đoạn CSS thêm vào khi viết Code)

- Tốc độ load trên di động là 70/100 điểm mà Google đưa ra

- Tố độ load trên máy tính để bàn là 84/100 điểm mà google đưa ra

Mình thực hiện loại bỏ JavaScript chặn hiện thị của blogspot

Giờ để khắc phục lỗi này bạn vào phần chỉnh sửa HTML tiếp đến ấn Ctrl + F và tìm đến đoạn Java bị chặn. Trong template bạn sẻ nhìn thấy đoạn JavaScript có dạng như sau:

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

Bạn cần thay đoạn trên bằng đoạn mã dưới đây để khắc phục lỗi chặn hiển thị màn hình. (chằn thêm async='async')

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

Đối với các đoạn JavaScript khác bạn làm tương tự chỉ việc chằn async='async' (Cách này thực cho cả JS mặc định và JS thêm vào) với các này bạn đã loại bổ được các JavaScript chặn hiện thị của blogspot

Mình thực hiện loại bỏ CSS chặn hiện thị của blogspot

Bước một: Đối với các CSS thêm vào

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn <head> Sau đó thêm đoạn code dưới đây phía dưới thẻ <head>

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

Thay các Link CSS 1, Link CSS 2, Link CSS 3 ... thành các link CSS mặc định mà bạn bị chặn: Dưới đây là 3 đoạn CSS thêm vào mà mình bị chặn.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://googledrive.com/host/0BzhmjN6UOoj5NXlTVEttckJUMk01");loadCSS("https://googledrive.com/host/0BzhmjN6UOoj5ak9HMzRNNld2ODA");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
//]]>
</script>

Bước hai: Đối với các CSS mặc định

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn <b:skin><![CDATA[ Sau đó thêm đoạn code dưới đây phía trên thẻ <b:skin><![CDATA[

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

- Tiếp đó bạn tìm đoạn <b:skin><![CDATA[ thay thành <style type='text/css'>

- Cuối cùng bạn tìm đoạn ]]></b:skin> thay thành </style>

=> Nhớ bấm lưu lại nhé !

Trải qua hai bước bạn đã loại bỏ được CSS chặn hiện thị của blog. Giờ các bạn xem kết quả mình đã thực hiện xong tại đây

- Tốc độ load trên di động là 70/100 tăng lên 89/100 (tăng lên 19 điểm)

- Tố độ load trên máy tính để bàn là 84/100 tăng lên 91/100 điểm (tăng lên 7 điểm)

Kết luận

- Đối với JavaScript mình thêm async='async' tạm gọi là thuật toán “xử lý” (nó chỉ tải sau khi các thành phần quan trọng của website hay blog đã được tải xong) đồng nghĩ với JavaScript vẫn hoạt động bình thường và không hề mất đi tính năng của nó .. Các bạn cứ yên tâm sử dụng nhé.

- Đối với CSS mình dùng hai thuật toán ở bước 1 và bước 2 với mục đích là hiển thị các đoạn CSS nên không hề ảnh hướng gì đến chức năng của nó đâu nhé. (Trong đó có 2 đoạn CSS mặc định đó chính là 2 đoạn CSS mà Google đã ngấm ngầm đưa vào ở đây mình khuyên các bạn chỉ hiện thị nó ra vậy là được rồi và không nên can thiệp quá sâu vào 2 đoạn CSS đó)

Còn bạn nào chưa hiểu thì cứ để lại comment nhé !