Loại bỏ Javascript và CSS chặn hiển thị nội dung cho Blogger

Khi check PageSpeed Insights chắc hẳn không ít bạn đã gặp phải lỗi "Javascript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên". Vậy cách khắc phục như thế nào mà không cần phải loại bỏ CSS hay Javascript? Hãy theo dõi bài viết sau của chiase78 nhé.

Bình thường khi chèn Javascript và CSS chúng ta vẫn thường viết theo cách này

<link href='//abc.css' rel='stylesheet' type='text/css'/>

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

Nhưng khi check PageSpeed Insights sẽ bị báo lỗi như tiêu đề.

Các bạn hãy sửa theo cú pháp sau

Đối với CSS

1. Đối với CSS ngắn thay vì sử dụng link để thêm CSS chúng ta hãy viết CSS trực tiếp vào template theo mẫu sau và đặt trước thẻ </head> hoặc thêm trực tiếp vào trước thẻ ]]></b:skin>

<style type="text/css">
/*Đặt CSS tại đây*/


</style>

2. Đối với CSS dài, các bạn hãy chèn CSS theo cú pháp sau

 <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");
//]]>
</script>

3. Ngoài ra nên hạn chế thêm CSS theo cách chèn thêm thuộc tính CSS trực tiếp vào phần tử HTML, ví dụ như: <p style="..."></p> mà hãy thêm CSS vào như đối với CSS ngắn (bước 1)

Đối với Javascript

1. Chèn Javascript trực tiếp vào template

a. Tìm đường link của script chặn hiển thị có đuôi .js và copy địa chỉ đó vào trong tab mới bạn sẽ thấy code nội dung trong script đó.

b. Copy và dán nội dung đoạn code vừa tìm được ở trên vào giữa đoạn code sau

 
<script type='text/javascript'>
//Nội dung code

</script>

c. Dán đoạn code trên vào trước thẻ </body> (Nếu bị lỗi code thì bạn dán code lại tại ngay vị trí bạn tìm thấy đoạn script ở bước a)

2. Sử dụng thuộc tính không đồng bộ (Asynchronous) và hoãn lại (Defer loading)

<script async="async" src="//link Javascript.js">

<script defer="defer" src="//link Javascript.js">

CSS và Javascript mặc định

Ngoài ra khi kiểm tra bạn sẽ thấy một link CSS và JS khá lạ (như ở khung bên dưới), đó là những CSS và JS mặc định của Blogger, bạn có thể xóa chúng đi bằng cách thực hiện theo những thủ thuật ở bài viết bên dưới.

https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
https://www.blogger.com/…&zx=e35e54c0-dccd-405f-aae8-731de51ebc0e
https://www.blogger.com/static/v1/widgets/3401484092-widgets.js
https://apis.google.com/js/plusone.js
https://www.blogger.com/static/v1/jsbin/313381681-comment_from_post_iframe.js

Bây giờ bạn hãy check lại PageSpeed Insights xem có còn bị lỗi trên không nhé.

Thủ thuật trên cũng đồng thời làm web của bạn load nhanh hơn chút ít đấy :)

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh