Устраните блокировку рендеринга JavaScript и CSS в содержимом выше уровня
Когда вы ищете оценку скорости в Google Page Insight, вы можете увидеть предупреждение типа "Устраните блокировку рендеринга JavaScript и CSS в содержимом выше", я искал решение для устранения этой проблемы.
Я знаю, что уже несколько гиков ответили, чтобы переместить файл CSS и Js в нижнюю часть веб-страницы, тогда он загрузится только после загрузки содержимого веб-страницы. Но, к сожалению, это неправильный ответ. Этот вопрос касается того, как мы позволяем вышеуказанное содержимое поля для визуализации. Итак, у кого-нибудь есть решение (кроме "переместить CSS и Js в нижний колонтитул веб-страницы)?
3 answers
Наконец-то я сам нашел решение,
По умолчанию CSS рассматривается как ресурс блокировки рендеринга, что означает, что браузер будет удерживать рендеринг любого обработанного содержимого до тех пор, пока не будет создан CSSOM. Следите за тем, чтобы ваш CSS был скудным, доставляйте его как можно быстрее и используйте типы носителей и запросы, чтобы разблокировать рендеринг.
Чтобы устранить эту проблему, вам нужно определить правило таблицы стилей, которое применяется к вышеуказанному содержимому сгиба, просто удалите их из внешний файл css, уменьшите их и доставьте в виде встроенного CSS. А затем переместите свою внешнюю ссылку css в нижнюю часть страницы. Как показано ниже,
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
После выполнения приведенного выше правила стиля таким образом, я смог достичь скорости 100/100 для одной из моих целевых страниц. Вы можете посмотреть на оценку скорости понимания.
ПРИМЕЧАНИЕ: Никогда не используйте встроенную доставку css, если правило стиля слишком тяжелое
Вы можете изменить все свои вызовы скрипта на загрузку "асинхронно" и не использовать готовые функции doc/window, если вы можете помочь этому. Затем создайте скрипт для асинхронной загрузки CSS-файлов, используя что-то вроде https://github.com/filamentgroup/loadCSS
Что касается сторонних скриптов/источника/кэша/и т. Д., Вам не повезло. Ирония в том, как сценарии Google снижают ваш показатель скорости страниц Google, учитывая, что они являются сторонниками всех этих правил.
Вы можете исправить, просто зайдите в тестер скорости страниц Google и узнайте, что увеличивает время загрузки вашей страницы, после анализа всего вашего сайта он показывает общий результат, проблемы вашего сайта и как исправить эту проблему. вы просто нажимаете на (как исправить), после нажатия на это Google предоставит вам решение, как исправить.