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!

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!