Khắc phục lỗi css chặn hiển thị trong màn hình đầu tiên

Khắc phục lỗi css chặn hiển thị trong màn hình đầu tiên của template blogger (blogspot). Ví dụ như link font-awesome, fonts.googleapis, ví dụ lúc đầu những link này nằm dưới <head> và trước <b:skin>

<link href='//fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' media='all' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Cách khắc phục hãy đưa nó xuống dưới <b:/skin> và trước </head> chèn vào js như sau:

<script type='text/javascript'>
//<![CDATA[
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("//fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i");loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Xem hình dưới đây:

Chú ý việc này chỉ đúng với một số template. Đặc biệt có 1 số template sẽ không hiển thị đúng nếu không khai báo các tài nguyên trên ở trên dưới thẻ head đầu

Check PageSpeed sẽ ko còn lỗi nữa!

Khắc phục lỗi css chặn hiển thị trong màn hình đầu tiên
5 / 1 vote

Cùng chuyên mục:

Add Comment

One Comment

  1. Phạm Lệ Quyên
    43 Bình luận
    21/09/2017