Удалите код javascript и css блокирующий отображение верхней части страницы как исправить: pagespeed insights — Как удалить код JavaScript и CSS, блокирующий отображение верхней части страницы

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

Доброго времени суток!

Не получается исправить последнее правило от Google Page Speed Insights:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.

Примерно 3 % содержания верхней части страницы можно отобразить, не дожидаясь загрузки указанных далее ресурсов. Попробуйте отложить ее или асинхронно загрузить блокирующие ресурсы либо встроить их особо важные составляющие прямо в код HTML.

Оптимизируйте работу CSS на следующих ресурсах: http://ecoexspert.kz/css/style.css

Попробовал разные способы:

1. перенёс CSS вниз body,
2. вынес стили в HTML документ

А Google Page Speed Insights всё равно ругается, как можно исправить проблему?

Ссылка на ресурс.

• pagespeed-insights

Установите ссылки на ваши файлы css и js внизу перед закрытым элементом /body.

При этом, для валидации примените для линка стилей property=stylesheet, примерно так:

<link rel=stylesheet property=stylesheet href=code/example.css>

Поиграйте с установкой async — только для скриптов js: устанавливайте и смотрите какой результат в браузере. Также я рекомендую вам для ускорения применять сжатие исходного кода с этим инструментом и сжатие картинок с этим инструментом. Пример async: <script async src=code/modernizr.custom.53362.js></script>

3

На всех js файлах добавьте атрибут defer, а весь css уберите куда подальше вниз. И то и другое надо минифицировать, можно еще и то, и другое вставлять в тело страницы.

1

Оставьте css сверху, js вниз, defer не ставить если подключается больше 1 файла

Сайт почему-то не доступен…

Вообще данная рекомендация гугла (о 3%) напрямую связана с тем, что внешний css-файл небольшой, поэтому лучше от него отказаться, а все стили перенести прямо в html-код страницы (в секцию HEAD). С точки зрения гугла, лучше потратить чуть больше трафика, чем создавать новое http-соединение. С учетом того, что используется gzip-сжатие для html, то всё довольно логично.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

WordPress.

«Render-Blocking JavaScript and CSS». Как это исправить? / Хабр

Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице результатов поиска. PageSpeed Insights от Google — отличный инструмент для оптимизации скорости загрузки вашего веб-сайта. Он не только показывает текущую скорость, но и определяет проблемы, которые тормозят ваш ресурс. В этом руководстве мы покажем, как устранить одну из наиболее частых проблем, с которой вы можете столкнуться, тестируя ваш сайт. Так что, если вы увидели предупреждение: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, — не волнуйтесь, решение в этой статье.

Что Означает Предупреждение “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

В правилах Google PageSpeed, вы найдёте следующее требование: “Eliminate render-blocking JavaScript and CSS”. Невыполнение этого требования может существенно повлияет на скорость загрузки вашего сайта — замедлить его. Наверняка у вас возник вопрос, как JavaScript и CSS могут замедлить работу сайта?

Проще говоря, всякий раз, когда вы устанавливаете новый плагин или тему, front-end пополняется новым кодом JavaScript и CSS. Следовательно, браузерам может потребоваться больше времени для загрузки этого кода, а соответственно веб-страницы.

Верхняя часть страницы, или ATF (Above The Fold) — это часть сайта, которую видит пользователь сразу же после его загрузки. Любая другая часть — всё, что вы видите, прокрутив вниз — это BTF (Below The Fold), или нижняя часть.

Теперь суть этого предупреждения становится намного понятней, не так ли? Если при посещении вашего сайта, загружается какой-либо нерелевантный JavaScript и CSS, вы получите предупреждение сократить количество JavaScript и CSS кода, блокирующего рендеринг в верхней части страницы

Ищем «Render-Blocking JavaScript and CSS» с Помощью Google Page Insights

Чтобы исправить эту ошибку, вы должны сначала проверить скорость вашего сайта с помощью PageSpeed Insights:

1. Перейдите на страницу, вставьте URL-адрес вашего сайта в поле “Enter a web page URL”.
2. Нажмите на “Analyze”, чтобы получить результаты.

   Средняя оценка большинства cайтов — от 50 до 70 баллов. Также ниже на странице вы найдёте рекомендации Google по улучшению производительности вашего сайта.

   
   

Если в этом списке будет рекомендация удалить код JavaScript и CSS, блокирующий отображение верхней части страницы, мы советуем решить эту проблему как можно быстрее.

Помните, что максимальное количество баллов, то есть 100 — это не главное. Ваша цель — попытаться получить хорошую оценку без ущерба для UX.

Также помните, что не стоит удалять скрипты, имеющие решающее значение для UX, только чтобы получить немного высший балл PageSpeed Insights.

Правила, по которым Google оценивает ваш сайт, являются лишь рекомендациями по оптимизации. Так что судите сами, что хорошо, а что может навредить вашему веб-ресурсу!

Устранение ошибки “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Минимизировать ресурсы JavaScript и CSS, блокирующие рендеринг, на сайтах WordPress действительно просто. Мы рекомендуем использовать следующие плагины WordPress, чтобы устранить проблему:

W3 Total Cache

Один из моих любимых плагинов — W3 Total Cache. После того, как вы закончили установку и активацию, выполните следующие действия в административной панели WordPress:

1. В левом меню выберите Performance -> General Settings
2. В меню сверху, выберите пункт Minify, и под заголовком вы увидите несколько параметров.
3. Установите флажок “Enable” для Minify. После этого выберите Minify mode — “Manual”.
4. Нажмите кнопку “Save all settings”.

   
   

5. Извлеките все скрипты JavaScript и CSS, блокирующие рендеринг. Google PageSpeed Insights поможет вам их найти.
6. После того, как вы найдёте скрипт, который всё портит, возвращайтесь назад в Performance -> Minify.
7. Начнём с удаления JS. На странице найдите заголовок JS, далее вы увидите раздел “Operations in areas”. Здесь выберите
   Non-blocking using “defer” в качестве embed type перед тегом — Before <head>.
8. Выберите активную тему вашего сайта и нажмите кнопку “Add Script” в разделе JS file management. Скопируйте URL-адреса JavaScript из PageSpeed Insights и вставьте их в соответствующие поля.

   
   

9. Теперь давайте повторим процедуру для CSS. В разделе “CSS file management”, выберите текущую тему вашего сайта и нажмите на “Add a style sheet”. Как и в предыдущем шаге, скопируйте и вставьте URL-адреса таблиц стилей CSS из Google PageSpeed Insights в необходимые поля.

   
   

10. Наконец, нажмите на “Save Settings & Purge Caches”.

Autoptimize

Ещё одно решение, которое также может помочь в устранении ошибок JavaScript и CSS, блокирующих рендеринг — плагин под названием Autoptimize. Плагин частично переведён на русский. Выполните следующие действия на панели инструментов после его установки и активации:

1. Зайдите в Settings -> Autoptimize.
2. В разделах “JavaScript and CSS Options” отдельно отметьте галочкой “Optimize JavaScript Code?” и “Optimize CSS Code?”.
3. Нажмите “Save Changes and Empty Cache”.

   
   

Этих трёх шагов должно быть достаточно, чтобы решить проблему. Но иногда используемая тема или другие активные плагины могут вызвать обратный результат.

Чтобы убедится, что проблема была решена, проверьте свой сайт в Google PageSpeed Insights ещё раз. Если предупреждение не появляется, здорово — вы можете двигаться дальше! В противном случае давайте попробуем выполнить некоторые дополнительные действия.

1. Перейдите в Settings -> Autoptimize.
2. Нажмите “Show Advanced Settings”.
3. Оказавшись там, найдите и отметьте оба варианта “
   Also aggregate inline JS” и “Also aggregate inline CSS” selections.

   
   

4. Сохраните ваши настройки.

Speed Booster Pack

Последнее, но не менее важное решение — Speed Booster Pack. Этот плагин также достаточно эффективно устраняет проблему с JavaScript и CSS на вашем сайте. Чтобы исправить ошибку с помощью этого плагина, вы должны выполнить следующие действия:

1. Перейдите к разделу Speed Booster Pack в разделе настроек, а затем на вкладку “Advanced”.
2. Найдите меню “JavaScript Optimization”, активируйте “JavaScript Optimization” и “Defer parsing of Javascript files”.
3. Найдите меню “CSS Optimization” внизу и включите “CSS render-blocking optimization”.
4. Вы также увидите дополнительные опции, такие как Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS в футер. Вы можете поэкспериментировать с этими настройками, чтобы добиться наилучшего результата.
   Активировав все эти настройки, вы заставите свой сайт загружаться быстрее. Тем ни менее включение всех настроек может вызвать побочный эффект — “мелькание неоформленного содержимого”, или FOUC (Flash Of Unstyled Content). Короче говоря, это ситуация, когда браузер загружает страницу, не подождав пока загрузится таблица стилей CSS, что приводит к отключению всех стилей на странице.
   

После того, как вы выполнили одну из описанных выше инструкций, проверьте ваш сайт в Google PageSpeed Insights ещё раз, чтобы убедится что проблема блокировки отображения верхней части страницы действительно устранена.

Выводы

Поскольку поисковые системы учитывают время загрузки сайтов при ранжировании, это один из основных факторов, влияющих на посещаемость вашего ресурса.

Google’s PageSpeed Insights даёт оценку скорости загрузки сайтов, а также предлагает советы по их оптимизации. И в случае, когда, тестируя ваш сайт WordPress, вы столкнётесь с предупреждением “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, мы рекомендуем воспользоваться одним из выше упомянутых плагинов.

Как удалить ресурсы, блокирующие рендеринг, с вашего веб-сайта WordPress

Вы когда-нибудь заканчивали создание веб-сайта WordPress, любили все в нем и сразу же начинали его ненавидеть, осознав, что он загружается вечно? Освоение устранения ресурсов, блокирующих рендеринг, поможет диагностировать эту проблему. Но как?

Низкая скорость загрузки не только доставляет неудобства вам и вашим посетителям, но и может стоить вам дорого, когда дело доходит до SEO. С 2010 года алгоритмы Google учитывают скорость загрузки при принятии решений о ранжировании, поэтому медленные страницы отображаются ниже на страницах результатов.

Возможно, вы знакомы с распространенными причинами низкой производительности страниц — чрезмерным содержанием, несжатыми файлами изображений, недостаточным хостингом и отсутствием кэширования, и это лишь некоторые из них. Но есть еще один преступник, которого часто упускают из виду: ресурсы, блокирующие рендеринг.

Что такое ресурсы, блокирующие рендеринг?

Блокирующие рендеринг ресурсы — это части кода в файлах веб-сайта, обычно CSS и JavaScript, которые препятствуют быстрой загрузке веб-страницы. Эти ресурсы занимают относительно много времени для обработки браузером, но могут быть не нужны для непосредственного взаимодействия с пользователем. Ресурсы, блокирующие рендеринг, могут быть удалены или отложены до тех пор, пока браузеру не понадобится их обработать.

Не поймите меня неправильно — CSS и JavaScript великолепны. Без CSS веб-сайты были бы стенами простого текста. Без Ja=ooovaScript мы не смогли бы добавлять на наши веб-сайты динамические, интерактивные и привлекательные элементы. Но если выполнить их в неподходящее время, и CSS, и JavaScript могут снизить производительность вашего сайта.

И вот почему: когда веб-браузер впервые загружает веб-страницу, он анализирует весь HTML-код страницы, прежде чем отобразить ее на экране для посетителя. Когда браузер встречает ссылку на файл CSS, файл JavaScript или встроенный скрипт (то есть код JavaScript в самом HTML-документе), он приостанавливает синтаксический анализ HTML, чтобы получить и выполнить код, что замедляет все.

Если вы оптимизировали производительность страницы в WordPress, но по-прежнему испытываете проблемы, причиной могут быть ресурсы, блокирующие рендеринг. Иногда этот код важно запустить при первой загрузке, но в большинстве случаев его можно удалить или протолкнуть до самого конца очереди.

В этом посте мы покажем вам, как удалить этот надоедливый код с вашего сайта WordPress и повысить производительность.

Если вы предпочитаете следить за видео, ознакомьтесь с этим пошаговым руководством, созданным WP Casts:

Как устранить ресурсы, блокирующие рендеринг, в WordPress

1. Определите ресурсы, блокирующие рендеринг.
2. Удалите ресурсы, блокирующие рендеринг, вручную или с помощью подключаемого модуля.
3. Повторно запустите сканирование сайта.
4. Проверьте свой сайт на наличие ошибок.

1. Определите ресурсы, блокирующие рендеринг.

Прежде чем вносить какие-либо изменения, сначала необходимо найти ресурсы, блокирующие рендеринг. Лучший способ сделать это — воспользоваться бесплатным онлайн-тестом скорости, например инструментом Google PageSpeed ​​Insights. Вставьте URL своего сайта и нажмите Анализ .

По завершении сканирования Google присваивает вашему веб-сайту общую оценку скорости от 0 (самый медленный) до 100 (самый быстрый). Оценка в диапазоне от 50 до 80 является средней, поэтому вам нужно попасть в верхнюю часть этого диапазона или выше.

Чтобы определить файлы, блокирующие отображение, которые замедляют работу вашей страницы, прокрутите вниз до Возможности , затем откройте аккордеон Устранение ресурсов, блокирующих отображение .

Источник изображения

Вы увидите список файлов, замедляющих «первое отрисовывание» вашей страницы — эти файлы влияют на время загрузки всего контента, который появляется в окне браузера при начальной загрузке страницы. Это также называется «контентом выше сгиба».

Обратите внимание на все файлы, оканчивающиеся на расширения .css и .js, поскольку именно на них вам следует сосредоточиться.

2. Удалите ресурсы, блокирующие рендеринг, вручную или с помощью плагина.

Теперь, когда вы определили проблему, есть два способа исправить ее в WordPress: вручную или с помощью плагина. Сначала мы рассмотрим плагин.

Некоторые плагины WordPress могут уменьшить эффект блокировки рендеринга ресурсов на веб-сайтах WordPress. Я расскажу о двух популярных решениях: Autoptimize и W3 Total Cache.

Как устранить ресурсы, блокирующие рендеринг, с помощью плагина Autoptimize

Autoptimize — это бесплатный плагин, который изменяет файлы вашего веб-сайта для более быстрой загрузки страниц. Автооптимизация работает путем объединения файлов, минимизации кода (т. е. уменьшения размера файла путем удаления избыточных или ненужных символов) и задержки загрузки ресурсов, блокирующих рендеринг.

Поскольку вы изменяете серверную часть своего сайта, не забудьте соблюдать осторожность с этим плагином или любым подобным плагином. Чтобы устранить ресурсы, блокирующие рендеринг, с помощью Autoptimize:

1. Установите и активируйте плагин Autoptimize.

2. На панели инструментов WordPress выберите Настройки > Автооптимизация .

3. В разделе Параметры JavaScript установите флажок рядом с Оптимизировать код JavaScript? .

4. Если рядом с полем Агрегировать JS-файлы? отмечен флажком, снимите его.

5. В разделе Параметры CSS установите флажок рядом с Оптимизировать код CSS? .

6. Если рядом с полем Агрегировать CSS-файлы? отмечен флажком, снимите его.

7. В нижней части страницы нажмите Сохранить изменения  и Очистить кэш .

8. Просканируйте свой веб-сайт с помощью PageSpeed ​​Insights и проверьте наличие улучшений.

9. Если PageSpeed ​​Insights по-прежнему сообщает о файлах JavaScript, блокирующих рендеринг, вернитесь в Настройки > Автооптимизировать и установите флажки рядом с Агрегировать JS-файлы?  и Совокупные CSS-файлы? . Затем нажмите Сохранить изменения и очистить кэш  и повторите сканирование.

Как устранить ресурсы, блокирующие рендеринг, с помощью подключаемого модуля W3 Total Cache

W3 Total Cache — это широко используемый подключаемый модуль кэширования, помогающий устранять задержки кода. Чтобы устранить блокировку рендеринга JavaScript с помощью W3 Total Cache:

1. Установите и активируйте плагин W3 Total Cache.

2. Новая опция Performance  будет добавлена ​​в меню панели инструментов WordPress. Выберите Производительность > Общие настройки.

3. В разделе Minify установите флажок рядом с Minify , затем установите Режим Minify  на Ручной .

4. Нажмите Сохранить все настройки  в нижней части Сократите раздел  .

5. В меню панели инструментов выберите Performance > Minify .

6. В разделе JS рядом с JS minify settings убедитесь, что флажок Включить установлен. Затем в разделе Операции в областях откройте первое раскрывающееся меню Embed type и выберите Неблокирующий, используя «отложить» .

7. Под Управление файлами JS , выберите активную тему из раскрывающегося списка Theme .

8. Вернитесь к результатам предыдущего сканирования PageSpeed ​​Insights. Для каждого элемента в разделе Устранить ресурсы, блокирующие отрисовку  , оканчивающиеся на .js, нажмите Добавить скрипт . Затем скопируйте полный URL ресурса JavaScript из PageSpeed ​​Insights и вставьте его в поле URI файла .

9. После вставки всех ресурсов JavaScript, блокирующих рендеринг, о которых сообщает PageSpeed ​​Insights, нажмите Сохранить настройки и очистить кэши  в нижней части раздела JS  .

10. В разделе CSS  рядом с Настройки минимизации CSS установите флажок рядом с Настройки минимизации CSS и убедитесь, что для метода Minify установлено значение Объединить и минимизировать2 . .

11. В разделе Управление файлами CSS выберите активную тему из раскрывающегося списка Тема .

12. Для каждого элемента под номером Удалите ресурсы, блокирующие отрисовку  с расширением .css, заканчивающимся на .css в результатах сканирования PageSpeed ​​Insights, нажмите Добавить таблицу стилей . Затем скопируйте полный URL ресурса CSS из PageSpeed ​​Insights и вставьте его в поле URI файла  .

13. После вставки всех ресурсов CSS, блокирующих отрисовку, о которых сообщает PageSpeed ​​Insights, нажмите Сохранить настройки и очистить кэши  в нижней части Раздел CSS .

14. Просканируйте свой веб-сайт с помощью PageSpeed ​​Insights и проверьте наличие улучшений.

Как устранить блокировку рендеринга JavaScript вручную

Плагины могут выполнять внутреннюю работу за вас. С другой стороны, сами плагины — это просто дополнительные файлы, добавленные на ваш веб-сервер. Если вы хотите ограничить количество этих дополнительных файлов или предпочитаете заниматься программированием самостоятельно, вы можете вручную решить блокирующий рендеринг код JavaScript.

Для этого найдите overflow: hidden также удалит функциональность полосы прокрутки. Прокрутка внутри страницы невозможна.

Совет: Чтобы узнать больше о свойстве overflow , перейдите к нашему Учебнику CSS Overflow или Справочнику по свойствам CSS overflow.

---

---

Скрыть полосы прокрутки, но сохранить функциональность

Чтобы скрыть полосы прокрутки, но сохранить возможность прокрутки, вы можете использовать следующий код:

Пример

/* Скрыть полосу прокрутки для Chrome, Safari и Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Скрыть полосу прокрутки для IE, Edge и Firefox */
.example {
  -ms-overflow-style: none; /* IE и Edge */
  ширина полосы прокрутки: нет; /* Firefox */
}

Попробуйте сами »

Браузеры Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar , который позволяет нам изменять внешний вид полоса прокрутки браузера. IE и Edge поддерживают -ms-overflow-style: свойство , и Firefox поддерживает свойство scrollbar-width , которое позволяет нам скрыть полосу прокрутки, но сохранить функциональность.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

0 Top96 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения.