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é !
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[
<style type="text/css"><!-- /*<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é !
=> 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é !
Nhờ bạn xem giúp http://www.nhadatdongnambo.com/
Thanks!
http://www.muabannamcham.xyz/
nhưng còn nhiều lỗi khác không biết Bác chủ có hướng dẫn làm luôn không?
web mình thực hiện là http://Hangdocauto.com
Với lại bước ở trên mình không thay [ < style type='text/css'> ]vào được, thay xong save nó báo lỗi . Bác hướng dẫn thêm cho mình được không?
Với hiện web mình gặp lỗi là kg load thêm bài được, ví dụ ở ngay trang chủ bấm vào xem thêm sản phẩm nó cứ xoay xoay mà không load thêm bài mà mình mò hoài không tìm được cách khắc phục.
Thanks Bác chủ thớt nhiều
- Thứ hai nó báo lỗi như thế nào ... Bạn chụp cho mình tâm hình để mình xem chứ bạn nói nó bão lỗi, thì mình ko biết nó bị lỗi gì cả.
- Thư ba Cái lỗi load thêm bài ko được, Bạn nên liên hệ trực tiếp với người bán template cho bạn để họ xử lý cho, Sevida template cũng đang bị lỗi này thì phải (mình có truy cập và template gốc nó vẫn ko load được, chứ ko riêng gì template của bạn)
DEMO
Đăng nhận xét