Почему google speed говорит о перекрытии верхней части css файлом когда он у меня снизу. Как исправить?

Question

[tripcollor]

Вот этот сайт проверяю на google speed:
kangoroom.ru/medlinz

Вот результаты:
https://developers.google.com/speed/pagespeed/insi...

Answer 1

[entermix]

Почему google speed говорит о перекрытии верхней части css файлом когда он у меня снизу.

Где Вы это прочитали? Там сказано:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Простой пример:

<script type="text/javascript">

    $(function () {
// ...
    });

</script>

Скрипт будет выполнен после загрузки JQuery, без разницы куда Вы установили ссылку на скрипт.

Comments

[tripcollor]

entermix : Прочитал я это вот здесь prntscr.com/gafww0
Что за пример с пустым скриптом вы мне дали?
Я хочу понять как исправить ситуацию в моем случае, вы мне это можете подсказать?

[Сергей Горячев]

tripcollor: Тебе там русским по белому написано, что надо сделать.
Выделить часть CSS, которая отвечает за загрузку первого экрана, вынести ее в HTML, а остальное асинхронно.
Что не понятного там?

[entermix]

tripcollor: скрипт в примере будет выполнен после загрузки JQuery, без разницы куда Вы установили ссылку на скрипт. Аналогичная ситуация в Вашем случае. JS скрипт ждет загрузки стилей и не важно где Вы расположили ссылку.

[tripcollor]

Сергей Горячев: я такой русский не понимаю. у меня нет ни какой тем более CSS части которая отвечает за первый экран. CSS файл и так у меня был подключен в HTML в конце тега BODY, об этом я писал, что не понятно?
Сейчас все нормально загрузил css через скрипт как и советовал entermix

[alvvi]

tripcollor: если вы загрузите его через JS (как вы и сделали), то до исполнения этого скрипта ваш сайт будет вообще без стилей.

Суть совета гугл на самом деле такова: выделите критическую часть CSS-стилей, которая нужна для загрузки первого, самого верхнего экрана, и поместите ее инлайново в HTML с помощью тэга <style>. Таким образом, браузер на момент загрузки HTML-документа уже будет иметь стили для первого экрана, а для загрузки остальных стилей он уже как обычно сделает запрос на файл со стилями.

[tripcollor]

Илья Ростопка: Теперь я понял что хотел сказать гугл) спасибо)
я меня в хедере стоит код

<style>
    body {
      opacity: 0;
    }
    html {
      background-color: #fff;
    }
  </style>

Думаю сойдет, т.е пока стили не загружены посетитель видит белый экран, а после загрузки файла css все встает на свои места