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

Posted on 19/09/201719/09/2017 by Admin | 649 lượt xem

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!