PageSpeed ​​Insights низкий балл. 1 блокировка ресурса CSS

Question

Я получаю следующую ошибку в PageSpeed ​​Insights. Я перешел в режим «Ручной» Minify и добавил ниже CSS. Но Google по-прежнему жалуется на CSS. У меня только счет 64/100. Пожалуйста помоги.

На вашей странице есть 1 блокировка ресурсов CSS. Это приводит к задержке в рендеринге вашей страницы. Ни одно из вышеперечисленного содержимого на вашей странице не может быть отображено без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или встроить критические части этих ресурсов непосредственно в HTML. Оптимизация CSS Доставка: https://www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css

Answer 1

Простое измельчение CSS часто недостаточно для понимания страниц. Скорость страницы предпочитает CSS, который включает в себя контент «Над сгибом» (верхний 600 пикселей), чтобы быть внутренним (т. Е. Загружен в тег). Все остальные CSS должны быть отложены для загрузки после наиболее важного содержимого ATF.

Смотрите этот пример из giftofspeed

• Q: Какие файлы CSS я должен отложить загрузку?
• A: Вы должны отложить загрузку всех файлов CSS, которые блокируют рендеринг вашей страницы.
• A: Не откладывайте загрузку сценария CSS небольшого или среднего размера. Вы получите больше, в смысле скорости страницы, вместо того, чтобы вставлять все свои CSS.

Javascript сниппет для откладывая CSS файлы:

<script type="text/javascript"> 
/* First CSS File */ 
var giftofspeed = document.createElement('link'); 
giftofspeed.rel = 'stylesheet'; 
giftofspeed.href = '../css/yourcssfile.css'; 
giftofspeed.type = 'text/css'; 
var godefer = document.getElementsByTagName('link')[0]; 
godefer.parentNode.insertBefore(giftofspeed, godefer); 

/* Second CSS File */ 
var giftofspeed2 = document.createElement('link'); 
giftofspeed2.rel = 'stylesheet'; 
giftofspeed2.href = '../css/yourcssfile2.css'; 
giftofspeed2.type = 'text/css'; 
var godefer2 = document.getElementsByTagName('link')[0]; 
godefer2.parentNode.insertBefore(giftofspeed2, godefer2); 
</script> 

<noscript> 
<link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" /> 
<link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" /> 
</noscript>