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é !
About Quang Mến :
Theo dõi tôi trên:
){kind=link}
Nói thêm async='async' không ảnh hưởng là không đúng: khi thêm một số tính năng của blog như bài đăng phổ biến, bài đọc nhiều sẽ không hoạt động
Trả lờiXóaBạn nói vậy trừ khi bạn sử dụng trình duyệt cũ đối với thuật toán async thì phiên bản IE 10 trở về sau mới hiểu được, còn các phiên bản cũ thì chưa có hỗ trợ async.... Nha bạn @!
XóaMình làm rồi nhưng ko khắc phục được lỗi JavaScript và CSS chặn hiển thị.
Trả lờiXóaNhờ bạn xem giúp http://www.nhadatdongnambo.com/
Thanks!
Bạn Chỉ có thể khắc phục 2 đoạn CSS ở giao diện mobile CSS mặc định. 4 đoạn CSS ở giao diện laptop CSS thêm vào >>> Mình hướng dẫn rất kỹ trên bài viết rùi... bạn làm từng bước là được à. :)
Xóabạn nào giúp m vơi trang cuarm tự nhiên không hiện j cả
Xóahttp://www.muabannamcham.xyz/
bạn đã làm những gì thể thành ra như vậy ... !@
Xóa213123123
Trả lờiXóa213123123
Trả lờiXóa??? ::)
XóaBạn ơi, mình đã thêm async='async' rồi mà nó bị lỗi không lưu được. Có thể làm cách khác không?
Trả lờiXóaBạn thêm như thế nào à ko được ???? :(
XóaBạn ơi cho mình hỏi chút . đoạn:Tiếp đó bạn tìm đoạn . <![CDATA[ là của cái code bạn đưa hay là cái mình tìm ở bước trên
Trả lờiXóaBạn ơi cho mình hỏi chút ạ đoạn:Tiếp đó bạn tìm đoạn là của cái code bạn đưa hay là cái mình vừa tìm ở bước trên
Trả lờiXóaChưa hiệu ý bạn lắm, bạn nói rõ tí nữa xem ... Code ở bước nào thì bạn thực hiện tại bước đó là được.
XóaKhi mình thêm là thêm vào cái trước hay cái thêm vào sau.
XóaThêm cái nào trước cái nào sau cũng được hết bạn ... Ở trên là mình hướng dãn theo thứ thự ... Còn bạn trành rùi thêm trước hay thêm sau đều ko quan trọng :)
Xóalàm xong vỡ bố cục luôn chứ không thay đổi gì
Trả lờiXóaVậy là do bạn rùi, nên xem lại đi .. đoạn JS và CSS mà bạn đã thay đổi :) việc tối không phải một sớm một chiều là làm được đâu .. nếu chưa trành bạn nên sao lưu template trước khi hiện chứ !!
Xóamình làm theo hướng dẫn thì tốc độ load tăng lên được 88/100 cho máy tính và 65/100 cho điện thoại
Trả lờiXóanhư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ứ nhất: 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? 1 câu hỏi quá chung chung ///
Xóa- 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)
Cảm ơn ad rất nhiều. Mình đã làm theo hướng dẫn nên đã loại bỏ được các JavaScript và CSS chặn hiển thị và tăng điểm đáng kể: lên đến 96 điểm cho giao diện mobile và 97 điểm cho giao diện máy tính:
Trả lờiXóaDEMO
load rất nhanh !!!
Xóa