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 chặn hiển thị của blogspot (blogger)

“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

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

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

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

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

 - Tố độ load trên máy tính để bàn 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 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 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 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é ! 
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

22 nhận xét:

  1. 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

    ReplyDelete
    Replies
    1. Bạ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 @!

      Delete
  2. Mình làm rồi nhưng ko khắc phục được lỗi JavaScript và CSS chặn hiển thị.
    Nhờ bạn xem giúp http://www.nhadatdongnambo.com/
    Thanks!

    ReplyDelete
    Replies
    1. 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 à. :)

      Delete
    2. bạn nào giúp m vơi trang cuarm tự nhiên không hiện j cả
      http://www.muabannamcham.xyz/

      Delete
    3. bạn đã làm những gì thể thành ra như vậy ... [email protected]

      Delete
  3. Bạ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?

    ReplyDelete
    Replies
    1. Bạn thêm như thế nào à ko được ???? :(

      Delete
  4. Bạ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

    ReplyDelete
  5. Bạ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

    ReplyDelete
    Replies
    1. Chư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.

      Delete
    2. Khi mình thêm là thêm vào cái trước hay cái thêm vào sau.

      Delete
    3. Thê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 :)

      Delete
  6. làm xong vỡ bố cục luôn chứ không thay đổi gì

    ReplyDelete
    Replies
    1. Vậ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ứ !!

      Delete
  7. mì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
    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

    ReplyDelete
    Replies
    1. - 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 ///

      - 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)

      Delete
  8. 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:

    DEMO

    ReplyDelete