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!

Đọc nhiều tuần qua:

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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *