Удалите код javascript и css блокирующий отображение верхней части страницы: Как Исправить Удалите Код JavaScript и CSS, Блокирующий Отображение Верхней Части Страницы

Как Исправить Удалите Код JavaScript и CSS, Блокирующий Отображение Верхней Части Страницы

Введение

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

Конечно, оценить скорость вашего сайта может показаться немного сложным. Есть много факторов, которые могут повлиять на результат — скорость интернет соединения, географическое положение и т.д. Однако не стоит переживать, в этом нелегком деле вам может помочь Google’s PageSpeed Insights. Это бесплатный сервис от Google, который даёт оценку сайту на основе его скорости загрузки. В идеале, вы должны попытаться заполучить самую высокую оценку на PageSpeed. И если вы уже воспользовались данным онлайн инструментом, значит вы могли столкнуться с довольно известной рекомендацией по оптимизации скорости загрузки сайта Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.

Что означает

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

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

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы одно из этих правил. Обычно загрузка JS и CSS скриптов заставляет браузер отложить загрузку HTML страницы. Конечно, это не является проблемой. Даже больше, это то чего вы хотите, никто не захочет смотреть на сайт без соответствующего оформления.

Однако Удалите код JavaScript и CSS, относится к тем скриптам, которые влияют на отклик страницы, но не используются в содержимом верхней части страницы (ATF). Содержимое ATF — это часть страницы, которая видна пользователю когда страница загружается; любая часть страницы для просмотра которой необходимо прокрутить сайт вниз не является ATF. Поэтому Google этой рекомендацией, говорит вам о том, что у вас на странице присутствуют JS и CSS скрипты, которые без надобности замедляют загрузку сайта, так как часть страницы на которую они влияют ещё не видна пользователю.

В этом руководстве по WordPress, мы воспользуемся Google PageSpeed Insights для обнаружения скриптов блокирующих отображение. Затем мы покажем вам 3 способа, как исправить эту проблему на WordPress. В дополнение к этому, вы также должны взглянуть на другие способы увеличить скорость загрузки сайта на WordPress, чтобы получить заметный результат.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

• Доступ к панели управления WordPress

Исправляем

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

JS и CSS являются важными составляющими любого современного сайта не только для его работы, но и для его внешнего вида. Однако тут есть один нюанс — производительность. Несмотря на то, что вы можете принять некоторые меры, вроде включения отложения загрузки JavaScript, иногда этого может оказаться недостаточно. Мы конечно же говорим о рекомендации удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Чтобы исправить данную ошибку, мы должны узнать существует ли данная проблема на вашем сайте вообще. После того, как мы подтвердим наличие, мы сможем приступить непосредственно к ее устранению.

Шаг 1 – Использование Google PageSpeed Insights для поиска кода JavaScript и CSS, блокирующего отображение верхней части страницы

Первый шаг для решения данной проблемы, это проверка вашего сайта с помощью Google PageSpeed Insights. Просто посетите данную страницу и введите в поле адрес вашего сайта. Нажмите кнопку Анализировать для получения отчета о сайте. Большинство сайтов имеют оценку от 50 до 70; это должно стать ориентиром вашей оценки. Помимо оценки, Google предоставит список с рекомендациям по улучшению скорости загрузки сайта.

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

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

Важная вещь на которую необходимо обратить внимание — вашей задачей не должно стать получение 100 баллов на PageSpeed Insights. Скорее, ей должно стать стремление получить хорошую оценку без ущерба функционалу и дизайну сайта. Если на вашем сайте есть скрипты необходимые для работы robust UX, вы не должны удалять их просто для того, чтобы получить высокие оценки на PageSpeed Insights. Правила по которым Google оценивает сайты являются лишь рекомендациями и должны быть восприняты именно так.

Шаг 2 – Исправление

Удалите код JavaScript и CSS

Вариант 1 – Использование W3 Total Cache

Теперь, когда вы знаете о наличии кода, блокирующего отображение страницы, у вас есть несколько вариантов его исправления. Мы рекомендуем скачать плагин, который поможет вам легко разобраться с этой проблемой. Один из наших любимых плагинов это W3 Total Cache. Установите и активируйте его. Далее, следуйте этим инструкциям:

1. Перейдите во вкладку Performance → General Settings. Найдите Minify в списке вверху страницы.
2. Вы увидите несколько вариантов под этим заголовком. Первый под названием Minify; поставьте галочку Enable напротив него.
3. В настройках Minify mode, выберите Manual и нажмите на кнопку Save all settings.

4. На данном этапе вы должны определить все JS и CSS скрипты, которые вызывают блокировку отображения. Вы можете найти эти скрипты с помощью Google PageSpeed Insights. Если вы оставили вкладку с PageSpeed открытой, как рекомендовалось в Шаге 1, вы найдёте надпись Как исправить? под соответствующей рекомендацией. Нажмите на неё. Это откроет список со всеми скриптами и таблицами стилей, которые вызывают появление ошибки Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
5. Вернитесь в WordPress. Перейдите во вкладку Performance → Minify. Вам необходимо будет оптимизировать и JS, и CSS файлы отдельно.
6. Во-первых, давайте начнём с JS. На странице найдите заголовок JS, далее вы увидите раздел Operations in areas. Здесь выберите Non-blocking using defer в качестве embed типа перед тегом  <head>.

7. Затем, под подзаголовком JS file management, выберите активную тему и нажмите кнопку Add Script. Теперь просто скопируйте адреса JS скриптов со страницы PageSpeed и вставьте их один за одним. Это завершит исправление JS файлов.

8. Переходим к CSS. Прокрутите ту же страницу и найдите раздел CSS. Под подзаголовком CSS file management, выберите вашу активную тему и нажмите Add a style sheet. Также как и для JS скриптов, скопируйте и вставьте CSS таблицы стилей со страницы PageSpeed Insights.

9. Наконец, нажмите кнопку Save settings and purge cache.

Теперь вернитесь на страницу Google PageSpeed Insights для проверки исправления ошибки. На скриншоте ниже вы можете увидеть, что настройка W3 Total Cache помогла устранить ошибку Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы с нашего тестового сайта.

Если вы хотите еще больше контроля над вашим ATF содержимым, воспользуйтесь плагинов Above The Fold Optimization. Этот плагин разработан специально для ATF содержимого и совместим с другими популярными плагинами, вроде W3 Total Cache и Autoptimize.

Вариант 2 – Использование Autoptimize

Сравнительно простой метод для решения проблемы блокирующего кода, это использование плагина под названием Autoptimize. Скачайте и установите плагин, что не должно занять много времени. После этого перейдите во вкладку Настройки → Autoptimize. Здесь, выставьте галочки напротив Оптимизировать код JavaScript? и Оптимизировать код CSS?, и нажмите кнопку Сохранить изменения и очистить кэш.

В большинстве случаев этого достаточно, чтобы исправить блокирующий код (зависит от темы и активных плагинов). Чтобы узнать являетесь это вашим случаем, запустите проверку вашего сайта в PageSpeed Insights вновь.

Как вы можете заметить из скриншота сверху, Autoptimize оставил 1 блокирующий ресурс CSS.

Если вы хотите полностью закончить оптимизацию, вернитесь в раздел Настройки → Autoptimize. Нажмите кнопку Show Advanced Settings. Далее, выставьте галочки напротив опций Also aggregate inline JS и Also aggregate inline CSS. Закончите нажав на кнопку Сохранить изменения и очистить кэш. Чтобы проверить результат, вновь запустите проверку PageSpeed Insights.

Вариант 3 – Использование Speed Booster Pack

Еще один популярный плагин, который может помочь вам решить проблему Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы на WordPress сайте — это Speed Booster Pack. Скачайте и активируйте плагин. Его настройки вы сможете найти в разделе Настройки → Speed Booster Pack в панели управления WordPress.

Для JS скриптов вам необходимо включить Move scripts to the footer и Defer parsing of JavaScript files.

Для CSS перейдите в меню Still need more speed?. Здесь вы найдёте дополнительные настройки относящиеся к CSS оптимизации.

Вы можете поэкспериментировать с этими настройками, чтобы найти баланс — включение всех опций может привести к Flash of unstyled content (FOUC). Это случается в том случае, если браузер загружает страницу без ожидания загрузки таблицы стилей, вызывая отключение всех стилей на странице. Теперь осталось лишь вновь проверить сайт на наличие проблемы.

Заключение

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

Помните, работа над увеличением скорости загрузки сайт не должна наносить ущерб его функционалу. Поэтому не волнуйтесь, если у вас еще остался какой-либо из блокирующих кодов. Это руководство было для вас полезным? У нас есть множество других на hostinger.ru/rukovodstva.

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

jquery — pagespeed google — Stack Overflow на русском

Для более подробной информации о скорости загрузки тестируйте ваши веб-страницы с инструментом (Гугл также рекомендует) WebPagetest = результат теста вашей главной веб-страницы. Если вы щелкните на изображение в колонке Waterfall, то вы увидите подробную информацию о загружаемых ресурсах/файлах тестируемой веб-страницы, с указанием времени загрузки для каждого ресурса. В данном анализе, в колонке Waterfall View, вы можете видеть, что наибольшие тормоза веб-страницы — это шрифты ttf (щелкните прямо на красной полосе/баре и откроется окно с подробность загрузки данного ресурса): fonts/Ubuntu/Ubuntu-Regular.ttf = Content Download: 2393 ms + fonts/Ubuntu/Ubuntu-Bold.ttf = Content Download: 2277 ms и так далее.

Рекомендации оптимизации скорости загрузки веб-страниц:

• Примените асинхронную загрузку скриптов для максимально возможного количества скриптов веб-страницы — подробнее статья Гугл «Используйте асинхронные скрипты».
• Задайте вашему лого размер, соответствующий размеру показа на веб-странице. Оптимизируйте ваши svg файлы с этим инструментом SVG Editor.
• Задайте всем изображениям ваших веб-страниц размеры, соответствующие размеру показа. Для изменения размера вы можете использовать этот инструмент Online Photo Editor.
• Сожмите изображения на ваших веб-страницах с этим инструментом ImageOptim online.
• Для устройств с экранами высокого разрешения: добавьте к элементу img атрибут srcset. Этот атрибут расширяет функциональные возможности элемента img. Благодаря ему вам будет проще назначать изображения с учетом параметров устройства. атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства. Например, использовать изображения 2x на экране 2x и, потенциально, изображения 1x на устройстве 2x при ограниченной пропускной способности сети. Пример:

<img src="photo.png" srcset="[email protected] 2x" ...>

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства. Вы можете задать любые условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные возможности не вошли в противоречие с будущими разработками, продолжайте назначать этому атрибуту изображение 2x.

• Для изменения изображений в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д. Пример:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

• Также вы можете определять размер обрабатываемого изображения, добавив дескриптор width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки. Пример:

<img src="lighthouse-200.jpg"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

В этом примере приведено изображение, которое занимает половину ширины области просмотра (sizes=»50vw») и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера.

Источник: статья Гугл Изображения для отзывчивого дизайна.

• Сожмите исходный код ваших веб-страниц с этим инструментом HTMLcompressor.
• Для предварительной загрузки ресурсов, требуемых для открываемой веб-страницы, примените мета тэг preload — документация W3.
• Для связанных ресурсов (могут быть затребованы пользователем, но не обязательно), примените мета тэги dns-prefetch + preconnect + prefetch + prerender. Эти тэги указаны в порядке повышения мощности требуемых ресурсов браузера для применения этих тэгов. Например, тэг prerender потребляет наибольшее количество мощности браузера, поэтому этот тэг может тормозить загрузку текущей веб-страницы, но связанная веб-страница с этим тэгом откроется, практически мгновенно. Определяйте важность связанных веб-страниц и потенциальную возможность их вызова пользователем. Документация W3 о этих тэгах.

Лучшее решение для полной мобильно оптимизации — это применение технологии Гугл AMP Accelerated Mobile Pages. Готовьте ваш веб-сайт к новому индексу Гугл Mobile-first Indexing — вероятно это начнётся в феврале 2018.

Удалите из верхней части страницы код javascript и CSS

Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией — «Удалите из верхней части страницы код javascript и CSS, блокирующий отображение«.

Скажите, вас эта рекомендация тоже ставила в тупик, как и меня? Если так, читайте дальше, я помогу вам решить эту задачку.

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

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

Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).

Таким образом, мы убьем сразу много зайцев :-).

Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу — https://ru.wordpress.org/plugins/autoptimize/

Настройки плагина для WordPress Autoptimize

1. После установки и активации Autoptimize, перейдите к его настройкам.

Расставьте галочки.

2. Далее перейдите к расширенным настройкам плагина, для чего в правом верхнем углу кликните по кнопочке «Show advanced settings«

Для успешного завершения миссии на wordpress-book.ru мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.

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

Параметры HTML

1 Активируйте опцию «Оптимизировать код HTML» если этого просит PageSpeed Insight.

2 Комментарии HTML я сохранять не стал за ненадобностью.

Опции JavaScript

Если после активации плагина под рекомендацией «Удалите из верхней части ….» исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:

1 Force JavaScript in <head>

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.

2 Also aggregate inline JS

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

3 Exclude scripts from Autoptimize

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

4 Add try-catch wrapping

Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.

Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут «async» в код скрипта как на скриншоте.

Опции CSS

1 Оптимизировать код CSS

Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.

2 Generate data: URLs for images

Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.

3 Remove Google Fonts

Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.

4 Also aggregate inline CSS

Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.

5 Inline and Defer CSS

Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.

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

Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе «fag» на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.

6 Inline all CSS

В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы.

7 Exclude CSS from Autoptimize

Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.

CDN Options

CDN Base URL

Если сайт использует CDN сервера для сокращения времени загрузки при передаче данных на большие расстояния, впишите сюда их URL.

Информация о кэше

Save aggregated script/css as static files

Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.

После завершения или в процессе работы с настройками Autoptimize, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки «Сохранить изменения и очистить кэш» чтобы проверять только свежие страницы.

Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.

Оптимизация работы шаблонов Shopify
– TradeMinister

Автор Aleksandr Tarasinsky, дата публикации 2021-05-16 20:08:22 +0300

Рассмотрим оптимизацию работы шаблона на примере сайта casaeleganza.com — оптимизируем главную страницу.

Зачем нужна оптимизация:

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

Инструменты, которые помогут понять направления оптимизации:

На момент начала оптимизации Google PageSpeed Tool сообщил о рейтинге 72 для десктопной версии (минимальный уровень — 80). Количество загружаемых файлов — 162. Размер страницы — 3,2 Мб.

Особенности проведения оптимизации, которые нужно учитывать:

1. Shopify работает по протоколу HTTP 1.1 — поэтому существует ограничение на количество одновременно загружаемых файлов — это снижает скорость отображения магазина.
2. Не все рекомендации Google PageSpeed возможно выполнить из-за ограничений платформы Shopify
3. Перед началом оптимизации проверьте список установленных приложений и удалите все ненужные приложения

Предложения по оптимизации:

1. Используйте кеш браузера

Этим параметром не получится управлять — ограничение Shopify.

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

2.1. Оптимизация JS

Чтобы скрипты не блокировали загрузку контента нужно проверить вызов всех скриптов и добавить команду «defer». Команду async нужно использовать с пониманием особенностей работы скриптов.

2.2. Оптимизация CSS

2.2.1. Требуется максимально сгруппировать различные файлы css в один общий файл (ограничение HTTP 1.1). После проведения оптимизации осталось 2 файла: один для предварительной загрузки и второй для постзагрузки страницы.

2.2.2. Для постзагрузки CSS применяется в теге link команда preload и скрипт, который реализует preload для несовместимых браузеров.

2.2.3. Идеальный вариант подготовки CSS для каждого типа страницы (главная, коллекция, продукт, страница, блог). За счет этого получится сократить скорость отображения страницы.

2.2.4. При отображении главной страницы использовался Critical CSS вариант — когда все необходимые для отображения главной страницы CSS команды выделяются в отдельный файл, а оставшиеся команды CSS загружаются через load CSS. Для создания сокращенного файла CSS используется сервис Critical Pass CSS Generator. Чтобы повысить рейтинг содержимое файла CriticalCSS встраивается в html страницы.

3. Оптимизируйте загрузку видимого контента

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

4. Оптимизируйте изображения

Google PageSpeed отметил, что размер некоторых изображений можно сократить на 30%. Обращайте внимание на типы файлов (обычно jpeg), их размеры (до 2000 пикселей) и разрешение (до 100 пикселей на дюйм). К этой рекомендации нужно подходить осторожно, т.к. не всегда оптимизированные изображения выглядят качественно.

5. Сократите JavaScript

5.1. Требуется максимально сгруппировать различные файлы js в один общий файл (ограничение HTTP 1.1).

5.2. При добавлении проверяйте минимизирован ли исходный текст скриптов и, при необходимости, минимизируйте его с помощью сервиса Minifier. Если скрипты включают исходный код на Liquid, то от минимизации нужно отказаться (или провести частичную минимизацию).

6. Сократите CSS

При добавлении проверяйте минимизирован ли исходный текст css файлов и, при необходимости, минимизируйте его с помощью сервиса Minifier. Если css включают исходный код на Liquid, то от минимизации нужно отказаться (или провести частичную минимизацию).

7. Включите сжатие

Этим параметром не получится управлять — ограничение Shopify

8. Сократите HTML

8.1. Минимизируйте css-стили и текст js с помощью сервиса Minifier.

8.2. Удалить лишние пробелы в текст html. Проблема связана с работой команд языка liquid. Команды, которые не выводят текст, формируют пустую строку в тексте html. Чтобы этого избежать, нужно добавлять дефис вначале и конце команды.

Например, {% comment %} будет выглядеть так {%- comment -%}.

P.S. Для оптимизации скорости загрузки мобильной версии сайте в Google создали технологию AMP, которая ускоряет время загрузки магазина Shopify.

Как оптимизировать сайт по предложениям PageSpeed Insights » Onwp.ru

В данной статье коротко разберем основные вопросы касающиеся оптимизации сайта с помощью сервиса

PageSpeed Insights. Я опишу какие решения мне помогли для улучшения рейтинга сайта в глазах гугла.

1. Удалите код JavaScript, препятствующий отображению

Для решения данной проблемы можно перенести код js из шапки в подвал, а можно просто добавить атрибут «async«, который сделает асинхронную загрузку вашего js кода.

Пример:

<script async src=»my.js»>

Внимание! Проверьте что бы после внесения правок ваш код работал правильно, использование async не всегда является лучшим вариантом.

Данная доработка дала мне + 5% по рейтингу PageSpeed Insights.

2. Оптимизируйте работу CSS

Тут можно проделать трюк что и с js, использовать анинхронную загрузку.

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

Также возможно

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

Важным моментом при переноси стилей и файлов js в подвал сайта(footer.php) является то что все стили .css обязательно! должны быть выше файлов js. В противном случае, гуглу будет все равно перенесли вы стили и js в подвал или нет. Весь css обязательно должен располагаться выше js кода, тем самым не мешая визуальному отображению сайта.

 4. Сократите(сжатия) CSS

Для сокращения(сжатия) можно использовать вот этот скрипт: http://www.phpied.com/cssmin-js/. Так же можно обойтись бес скрипта а сразу отдавать браузеру сжатый скрипт, сжати можно тут: http://tools.w3clubs.com/cssmin/. Это то же самый скрипт, только в работе. Он удалит лишние пробелы и переходы на новую строку. При этом помните что у вас должна храниться полная версия кода, которую можно будет отредактировать и опять сжать. Сжатую версию .css файла проблематично будет править.

Данная статья будет обновляться по мере выявления новых положительных решений оптимизации.

Полезные ресурсы:

http://highloadtools.com/gzip  — проверяет включен ли на сервере gzip

http://last-modified.com/ru/if-modified-since.html  —  Проверка If-Modified-Since

Как Pagespeed Insights от Google помогает улучшить скорость загрузки сайта

Предположим у вас есть хорошо настроенный сервер, но производительность вашего сайта оставляет желать лучшего. Задержка ответа сайта занимает секунды и сервер не может обработать более 100 одновременных пользователей. Вы вложились в SEO, но до сих пор чувствуете, что поисковик Google ранжирует ваш сайт в выдаче ниже, чем предполагалось и, о боже, даже не в ТОП 10. Что делать? Как Google PageSpeed Insights может помочь вам? Давайте начнём с основных положений.

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

Вы можете использовать PageSpeed Insights бесплатно со страницы project или следуйте инструкции по установке расширения Google PageSpeed Insights Plesk в вашей панели Plesk

ПОЯСНЕНИЯ К РЕКОМЕНДАЦИЯМ PAGESPEED INSIGHTS

1. Избегайте переадресаций целевой страницы

Переадресации могут вызвать ощутимые задержки, если запрос переадресуется несколько раз на конечный адрес откуда в итоге отсылаются данные клиенту. Каждая переадресация инициирует свою процедуру HTTP запроса-ответа (с возможным поиском DNS и ТСP согласованием), которая может значительно снизить производительность сайта, особенно для мобильных устройств со слабым интернет соединением.

Хороший пример как избежать переадресаций для мобильных устройств — это использование современного оптимизированного дизайна . Хорошо оптимизированный сайт не требует редиректов на выделенный субдомен для мобильных устройств.

Также убедитесь, что настроен правильный редирект в один шаг с http://example.com на https://www.example.com. Люди привыкли набирать короткий адрес вашего домена в адресной строке браузера. Но ваш сайт должен работать только на https (для большей защиты и лучшего рейтинга) и возможно использовать www как субдомен.

Заметки SEO: 301 редирект с HTTP на HTTPS

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

Пользователям Plesk поможет расширение Security Advisor для активации бесплатных SSL-сертификатов. И вы можете активировать 301 редирект через опцию «Настройки хостинга» в панели управления.

Говоря о редиректах, Plesk поддерживает из своей коробочной версии 301 редиректы, дружественные к SEO. Т.е. если вы устанавливаете бесплатный SSL сертификат Lets’Encrypt (о том, как его установить из панели Plesk, читайте в этой статье (прим. редакции Русоникс)), то Плеск поможет вам переключиться на безопасный протокол без потери в поисковом рейтинге.

2. Включите сжатие

Всегда отсылайте пользователям контент сжатым с помощью GZIP или Deflate. Эти способы сжатия проверяют может ли быть сжат запрошенный ресурс такой как HTML картинки или JS/CSS файлы. Сжатие уменьшает количество байтов, передаваемых через сеть, до 90%. Это сокращает общее время загрузки всех ресурсов, что приводит к ускорению времени загрузки и лучшему юзабилити. Для сжатия важным является то, что обе стороны (и клиент и сервер) понимают примененный алгоритм сжатия. В так называемых полях HTTP заголовков происходит обмен поддерживаемыми алгоритмами.

Большинство современных браузеров уже поддерживают сжатие по умолчанию. На серверной стороне вы можете использовать специальные модули такие как mod_deflate (в Apache) или ngx_http_gzip_module (в Nginx)

Plesk поддерживает сжатие из коробочной версии

Не переживайте, сервер Plesk уже имеет предустановленные необходимые модули сжатия. Вам лишь необходимо активировать эту опцию вручную для всех доменов где нужно использовать сжатие. Вы можете добавить необходимый код в .htaccess (apache) или web.config (nginx) в корневой директории вашего сайта или прямо в панели Plesk, что ещё проще.

Перейдите в закладку «Сайты и домены» и выберите «Настройки apache и nginx». Если вы используете веб-сервер apache, то вам нужно добавить следующий код в текстовом поле под опцией «Дополнительные директивы apache».

Выберите текстовое поле следующей опции «Дополнительные директивы для HTTPS» если вы используете HTTPS.

Для APACHE:

AddOutputFilterByType DEFLATE text/plain text/html text/xml;
AddOutputFilterByType DEFLATE text/css text/javascript;
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml;
AddOutputFilterByType DEFLATE application/rss+xml;
AddOutputFilterByType DEFLATE application/javascript application/x-javascript

Если вы используете nginx, добавьте следующий код в текстовом поле «Дополнительные директивы nginx»

Для NGINX

gzip on; gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_disable «msie6»;
gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;

Замечание: Динамическое сжатие может повлиять на процессор таким образом, что вы можете потерять преимущество увеличения производительности за счет сжатия, из-за долгой обработки процессором. Не стоит устанавливать максимальный уровень сжатия, так как такая степень сжатия объёма файла не намного уменьшает его размер в сравнении со средней степенью сжатия, а нагрузка на процессор критически увеличивается. Следующее улучшение нужно делать кешированием уже сжатых файлов и передачей их напрямую без участия процессов сжатия.

3. Настройте кеширование браузером

Загрузка статических файлов затратна по времени. Браузер хранит ранее загруженные ресурсы в хранилище кеша браузера. Сервер может определять политику кеширования с помощью специальных заголовков. Локальный кеш должен предоставлять ресурсы из локального хранилища кеша, вместо того, чтобы каждый раз запрашивать их с сервера.

Вы можете использовать два поля в заголовке ответа: cache-control и ETag. С помощью Cache-Control вы можете определить как долго браузер может кешировать индивидуальные ответы. ETag создаёт ревалидацию токенов с помощью которых браузер может легко определять изменения файлов.

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

4. Уменьшите время ответа сервера.

PageSpeed Insights выводит это сообщение, когда сервер не отвечает через определённое время (>200ms) . Время ответа обозначает время, которое нужно браузеру для загрузки HTML кода для вывода. На этот параметр может влиять множество причин.

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

Вопрос в том как найти эти «узкие места»? Вы можете использовать расширение New Relic для решения или с помощью тестирования ресурсом Webpagetest где можно увидеть как браузеры отображают страницы и какие файлы замедляют ваш сайт.

5.Уменьшите HTML, CSS&JS

Сервер может уменьшить объём таких ресурсов, как HTML код или JS и CCS файлы, перед отправкой их в браузер. Это сохранит много байтов данных, что увеличивает скорость загрузки ресурсов. Уменьшение объёма — это процесс оптимизации кода без потери нужной информации, чтобы сайт для посетителя отображался корректно.

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

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

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

Это правило действует, когда PageSpeed Insights выявляет, что HTML код ссылается на блокирующий внешний файл JavaScript в верхней части страницы. PageSpeed Insights запускает это правило, если браузер загружает JS и CSS файлы для верхней части страницы, даже если данное содержимое не нуждается в коде для создания правильного вывода. Это значит, что брауезр не может отобразить HTML вывод так как внешние ресурсы доступны частично.

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

Также есть смысл объединять все файлы в один файл (1 файл для CSS и JS) для уменьшения количества HTTP запросов. В общем, опредённо следует активировать HTTP/2 на вашем сервере. Новая версия протокола имеет очень положительное влияние на производительность сайта.

7. Оптимизируйте изображения.

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

Есть много разных возможностей для оптимизации, т.е разрешения, формата картинки и настроек качества. На многих сайтах вебмастеры загружают картинки в слишком большом разрешении и соответственно слишком объёмные файлы. PageSpeed Insights даёт список этих файлов после проверки с выводом в процентном значении возможного объёма, который можно сократить после оптимизации этих картинок.

Content-Delivery-Networks (CDN) такие как CloudFlare, могут оптимизировать картинки для вас автоматически.

Обратите внимание, что такая возможность оптимизации платная. Конечно вы также можете оптимизировать ваши картинки вручную. Как это сделать, читайте это руководство Google

8.Оптимизация видимого контента

Это сообщение выводится аналогично как при ошибке блокирующего контента. PageSpeed Insights выводит его когда для отображения первого экрана страницы, необходимо дополнительное сетевое подключение. Если посетитель загружает эту страницу через медленное интернет подключение (с большими задержками), то дополнительные сетевые запросы создают значительные задержки и ухудшают работу пользователя.

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

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

Google PageSpeed Insights расширение в Плеск

Если вы ещё не делали этого установите расширение в Плеск «Google PageSpeed Insights Plesk » сегодня и улучшите производительность веб-сайта и позиции в поисковой выдаче.

Перевод: Сергей Гордеев (Русоникс)
Оригинал

Статьи

Удалите код JavaScript, препятствующий показу страницы

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что код HTML ссылается на блокирующий внешний файл JavaScript в верхней части страницы.

Общая информация

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

Рекомендации

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

Встройте небольшие ресурсы JavaScript

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

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

а ресурс small.js выглядит так:

/* contents of a small JavaScript file */

то этот скрипт можно встроить, как показано ниже:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Это избавит от необходимости выполнять внешний запрос small.js, так как он располагается внутри документа HTML.

Отложите загрузку кода JavaScript

Чтобы код JavaScript не блокировал загрузку страницы, используйте атрибут async. Например:

<script async src="my.js">

Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств.

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

Часто задаваемые вопросы

Что, если я использую библиотеку JavaScript, например jQuery?

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

Что, если я использую среду JavaScript для создания страницы?

Если содержание страницы создано кодом JavaScript на стороне клиента, попробуйте встроить соответствующие модули JavaScript, чтобы избежать лишних запросов к серверу. Кроме того, оптимизация обработки на стороне сервера может ускорить первую загрузку страницы. Обработайте шаблоны JavaScript на сервере, встройте результаты в HTML, а потом используйте шаблоны на стороне клиента после загрузки приложения. Чтобы получить более подробную информацию по обработке на стороне сервера, см. видео: http://youtu.be/VKTWdaupft0?t=14m28s.

Поделиться материалом

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

Вы хотите устранить блокирующие рендеринг JavaScript и CSS в WordPress?

Если вы протестируете свой веб-сайт с помощью Google PageSpeed ​​insights, то, скорее всего, вы увидите предложение по устранению скриптов, блокирующих рендеринг, и CSS. Однако он не предоставляет никаких подробностей о том, как это сделать на вашем сайте WordPress.

В этой статье мы покажем вам, как легко исправить JavaScript и CSS, блокирующие рендеринг, в WordPress, чтобы улучшить ваш показатель Google PageSpeed.

Что такое JavaScript и CSS с блокировкой рендеринга?

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

У каждого сайта WordPress есть тема и плагины, которые добавляют файлы JavaScript и CSS к интерфейсу вашего сайта. Эти скрипты могут увеличить время загрузки страницы вашего сайта, а также могут блокировать отображение страницы.

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

Эти скрипты и таблицы стилей называются JavaScript и CSS, блокирующими рендеринг.

Владельцам веб-сайтов, которые пытаются достичь 100 баллов в Google PageSpeed, необходимо исправить эту проблему, чтобы получить высший балл.

Что такое показатель Google PageSpeed?

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

Показывает оценку, основанную на количестве правил, которым соответствует ваш сайт. Большинство веб-сайтов получают где-то между 50-70. Тем не менее, некоторые владельцы веб-сайтов чувствуют себя обязанными набрать 100 баллов (самый высокий балл, который может получить страница).

Вам действительно нужен идеальный показатель Google PageSpeed ​​«100»?

Цель Google PageSpeed ​​insights — предоставить вам рекомендации по повышению скорости и производительности вашего веб-сайта.Вы не обязаны строго соблюдать эти правила.

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

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

Ваша цель должна состоять в том, чтобы создать быстрый веб-сайт, который будет удобен для пользователей.

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

Мы рекомендуем вам использовать правила Google Pagespeed в качестве рекомендаций, и если вы можете легко реализовать их, не нарушая взаимодействия с пользователем, то это прекрасно. В противном случае вам следует стремиться сделать как можно больше, а потом не беспокоиться об остальном.

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

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

1. Исправьте скрипты блокировки рендеринга и CSS с помощью WP Rocket

Для этого метода мы будем использовать плагин WP Rocket. Это лучший плагин для кэширования WordPress на рынке, который позволяет быстро улучшить производительность вашего сайта без каких-либо технических навыков или сложной настройки.

Во-первых, вам необходимо установить и активировать плагин WP Rocket.Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

WP Rocket работает «из коробки» и включит кеширование с оптимальными настройками для вашего сайта. Вы можете узнать больше об этом в нашем полном руководстве о том, как правильно установить и настроить WP Rocket в WordPress.

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

Для этого вам необходимо перейти на страницу «Настройки » »WP Rocket , а затем перейти на вкладку« Оптимизация файлов ». Отсюда прокрутите до раздела «Файлы CSS» и установите флажки рядом с параметрами «Сократить CSS», «Объединить файлы CSS» и «Оптимизировать доставку CSS».

Примечание. WP Rocket попытается минимизировать все ваши файлы CSS, объединить их и загрузить только CSS, необходимый для видимой части вашего веб-сайта. Это может повлиять на внешний вид вашего веб-сайта, поэтому вам необходимо тщательно протестировать свой веб-сайт на разных устройствах и экранах разных размеров.

Затем вам нужно перейти к разделу файлов JavaScript. Отсюда вы можете проверить все варианты для максимального повышения производительности.

Вы можете уменьшать и комбинировать файлы JavaScript, как вы это делали для CSS.

Вы также можете запретить WordPress загружать файл jQuery Migrate. Это скрипт, который загружается WordPress для обеспечения совместимости с плагинами и темами, использующими старые версии jQuery.

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

Затем прокрутите немного вниз и установите флажки рядом с параметрами «Загрузить отложенный JavaScript» и «Безопасный режим для jQuery».

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

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

После этого вы также можете очистить кеш в WP Rocket перед повторным тестированием своего сайта с помощью Google Page Speed ​​Insights.

На нашем тестовом сайте мы смогли достичь 100% результатов на ПК, и проблема с блокировкой рендеринга была решена как для мобильных, так и для настольных компьютеров.

2. Исправьте сценарии блокировки рендеринга и CSS с помощью функции автоматической оптимизации.

Для этого метода мы будем использовать отдельный плагин, созданный специально для улучшения доставки файлов CSS и JS вашего веб-сайта.Хотя этот плагин выполняет свою работу, у него нет других мощных функций, которые есть в WP Rocket.

Первое, что вам нужно сделать, это установить и активировать плагин Autoptimize. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо перейти на страницу « Настройки» »Автоматическая оптимизация , чтобы настроить параметры плагина.

Во-первых, вам необходимо установить флажок рядом с опцией «Оптимизировать код JavaScript» в блоке «Параметры JavaScript».Убедитесь, что опция «Агрегировать JS-файлы» не отмечена.

Затем прокрутите вниз до поля «Параметры CSS» и установите флажок «Оптимизировать код CSS». Убедитесь, что опция «Агрегировать CSS-файлы» не отмечена.

Теперь вы можете нажать кнопку «Сохранить изменения и очистить кеш», чтобы сохранить свои настройки.

Протестируйте свой веб-сайт с помощью инструмента Page Speed ​​Insights. На нашем демонстрационном сайте мы смогли исправить проблему с блокировкой рендеринга с помощью этих основных настроек.

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

Например, вы можете разрешить плагину включать встроенный JS и удалять сценарии, которые исключены по умолчанию, например, seal.js или jquery.js.

Нажмите кнопку «Сохранить изменения и очистить кеш», чтобы сохранить изменения и очистить кеш плагина.

Когда вы закончите, снова проверьте свой веб-сайт с помощью инструмента Page Speed.

Как это работает?

Autoptimize объединяет все поставленные в очередь JavaScript и CSS. После этого он создает миниатюрные файлы CSS и JavaScripts и передает кэшированные копии на ваш сайт как асинхронные или отложенные.

Это позволяет исправить проблему со скриптами и стилями, блокирующими рендеринг. Однако имейте в виду, что это также может повлиять на производительность или внешний вид вашего веб-сайта.

Устранение неисправностей

В зависимости от того, как плагины и ваша тема WordPress используют JavaScript и CSS, может быть довольно сложно полностью исправить все проблемы JavaScript и CSS, блокирующие рендеринг.

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

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

Однако может быть довольно сложно определить, какой код CSS нужно будет отображать над содержимым сгиба.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Устранение JavaScript и CSS, блокирующих рендеринг, в содержимом над сгибом

Наличие быстро загружаемого веб-сайта имеет решающее значение, если вы хотите занять высокие позиции на страницах результатов поисковых систем (SERP).Вот почему Google PageSpeed ​​Insights поможет вам оптимизировать скорость загрузки вашего сайта. Если при использовании инструмента вы получаете предупреждение « Устраните блокирующие отображение JavaScript и CSS в содержимом верхней части страницы », не волнуйтесь. В этой статье мы покажем вам, как решить эту проблему.

Знакомство с «Устранение блокирующих отрисовку JavaScript и CSS в верхней части страницы» Предупреждение

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

Ну, каждый раз, когда вы устанавливаете новую тему или плагины, они добавляют код JavaScript и CSS к интерфейсу. В результате браузерам может потребоваться больше времени для загрузки страницы.

Вверху сгиба (ATF) означает часть вашей веб-страницы, которая видна при первой загрузке страницы. Любая часть страницы, которую вам нужно прокрутить вниз, не относится к ATF.

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

Выявление JavaScript и CSS, блокирующих отрисовку, с помощью Google PageSpeed ​​Insights

Первым шагом в устранении блокировки рендеринга является проверка скорости вашего сайта с помощью Google PageSpeed ​​Insights. Для этого выполните следующие действия:

1. Посетите страницу и вставьте URL-адрес своего веб-сайта в поле « Введите URL-адрес веб-страницы ».
2. Щелкните Analyze , чтобы получить отчет.
   

   Большинство сайтов имеют рейтинг от 50 до 70; это должно служить ориентиром для вашей оценки.Google также перечислит предложения по повышению производительности вашего веб-сайта.

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

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

Если на вашем сайте WordPress есть скрипты, которые необходимы для надежного UX, не удаляйте их только для того, чтобы получить немного более высокую оценку на PageSpeed ​​Insights.

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

Исправление ошибки «Устранение блокировки JavaScript и CSS в верхней части страницы»

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

W3 Общий кэш

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

1. Перейдите к Performance -> General Settings .
2. Найдите на странице заголовок Minify . Затем вы увидите несколько вариантов под этим заголовком.
3. Установите флажок Включить для Minify . Затем для параметра Minify mode выберите Manual .
4. Нажмите Сохраните все настройки .
5. Получите все сценарии JavaScript и CSS, блокирующие рендеринг, которые можно найти с помощью Google PageSpeed ​​Insights.
6. Как только вы найдете нарушителя спокойствия, вернитесь к Performance -> Minify на панели инструментов WordPress.
7. Найдите раздел JS . В разделе «Операции в областях » выберите Неблокирование с использованием типа внедрения «отложить» для тега B efore .
8. Для управления файлами JS выберите активную тему и нажмите кнопку Добавить сценарий . Скопируйте и вставьте URL-адреса JavaScript из Google PageSpeed ​​Insights в предоставленные поля, как показано ниже.
9. Прокрутите вниз и найдите раздел CSS .Для управления файлами CSS выберите активную тему и нажмите Добавить таблицу стилей . Как и в предыдущем шаге, скопируйте URL-адреса таблиц стилей CSS из PageSpeed ​​Insights и вставьте их в обязательные поля.
10. Наконец, нажмите кнопку Сохранить настройки и очистить кеши .

Автоматическая оптимизация

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

1. Перейдите в Настройки -> Автоматическая оптимизация .
2. Установите флажки для Оптимизировать код JavaScript? ”и Оптимизировать код CSS?
3. Нажмите кнопку Сохранить изменения и очистить кэш .
   

В большинстве случаев этого достаточно для устранения предупреждения. Однако результат может отличаться в зависимости от вашей темы и активных плагинов.

Чтобы убедиться, что проблема решена, снова запустите свой сайт через PageSpeed ​​Insights. Если остались какие-либо блокирующие ресурсы JS и CSS, продолжите оптимизацию, выполнив следующие действия:

1. Вернитесь в настройки -> Автоматическая оптимизация .
2. Нажмите кнопку Показать дополнительные настройки .
3. Затем проверьте параметры Также агрегировать встроенный JS и Также агрегировать встроенный CSS .
4. Сохраните изменения.

Пакет ускорителей

Еще один популярный плагин, который может оказаться полезным для исправления ошибок javascript и CSS, блокирующих рендеринг, на вашем сайте WordPress — Speed ​​Booster Pack. Для этого выполните следующие действия в области wp-admin:

1. Перейдите в раздел Speed ​​Booster Pack и перейдите на вкладку Advanced .
2. В меню Оптимизация JavaScript включите Переместить скрипты в нижний колонтитул и Отложить анализ файлов JavaScript .
3. Прокрутите вниз до меню Оптимизация CSS , чтобы настроить оптимизацию блокировки рендеринга CSS.
4. Вы найдете дополнительные настройки для встраивания всего CSS, уменьшения всего (ранее) встроенного CSS и перемещения всего встроенного CSS в нижний колонтитул. Поэкспериментируйте с этими вариантами, чтобы найти правильное решение.
   

   Простое включение всех из них ускорит загрузку вашего сайта, но может также привести к появлению нежелательного артефакта Flash нестилизованного содержимого (FOUC).Это происходит, когда браузер загружает веб-страницу, не дожидаясь загрузки таблицы стилей, вызывая мгновенное мигание нестилизованной страницы.

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

Заключение

Скорость веб-сайта — один из наиболее важных факторов в привлечении и удержании посетителей. Это связано с тем, что поисковые системы учитывают скорость сайта при ранжировании результатов.

Google PageSpeed ​​Insights присваивает веб-сайтам оценку в зависимости от скорости их загрузки.Если при анализе производительности сайта WordPress вы получаете печально известную команду «Устранить блокировку рендеринга JavaScript и CSS» в предложении контента вверху, просто устраните проблему с помощью плагинов.

Надеюсь, это руководство будет для вас полезным. Не стесняйтесь комментировать ниже, если у вас есть какие-либо вопросы. Удачи!

Domantas возглавляет отделы контента и SEO, предлагая свежие идеи и нестандартные подходы. Обладая обширными знаниями в области SEO и маркетинга, он стремится распространить информацию о Hostinger во всех уголках мира.В свободное время Домантас любит оттачивать свои навыки веб-разработки и путешествовать по экзотическим местам.

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

Вы когда-нибудь заканчивали создание веб-сайта WordPress и любили все в нем? А потом сразу возненавидел его, поняв, что загрузка занимает целую вечность?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. В меню панели управления WordPress будет добавлена ​​новая опция Performance .Выберите Performance> General Settings.

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

4. Щелкните Сохранить все настройки внизу раздела Minify .

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

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

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

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

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

10. В разделе CSS рядом с CSS minify settings установите флажок рядом с CSS minify settings и убедитесь, что для метода Minify установлено значение Combine & Minify .

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

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

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

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

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

Плагины

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

Для этого найдите теги

А вот пример атрибута async:

.

При выборе атрибута для реализации помните о рекомендациях, которые мы поделились в предыдущем разделе.

WP Rocket также может помочь вам самым простым способом отложить выполнение ваших JS-файлов. Функция Load Javascript Deferred позволяет без труда отложить блокирующий рендеринг ресурс JS!

Более того, вы также можете исключить отсрочку любого файла JS, если вам это нужно.

Перейдите на вкладку «Оптимизация файлов» и выберите параметр «Загрузить отложенный JavaScript».Просто как тот.

Отложенная функция загрузки JavaScript

Устранение ресурсов, блокирующих рендеринг, с помощью WP Rocket: результаты до и после

Вы можете спросить, в чем реальная разница в производительности оценки PageSpeed ​​Insights при использовании WP Rocket и его функций по умолчанию, а также параметров оптимизации доставки CSS и отложенной загрузки JavaScript, описанных выше.

Мы провели тест, установив тему Astra и импортировав сайт электронной коммерции с помощью Gutenberg.

Вот оценка производительности без использования WP Rocket. Это не так уж плохо. Тем не менее, сайт не достигает 90 баллов , что приводит к зеленому баллу и лучшему пользовательскому опыту. Более того, LCP и CLS превышают пороговое значение, требуемое Google:

.

Оценка PageSpeed ​​Insights - для мобильных устройств - без WP Rocket

Сценарий меняется после активации WP Rocket. Помните: мы сохранили все функции по умолчанию и активировали только две опции, описанные в статье. Без каких-либо усилий мы получили оценку 90+ и зеленые LCP и CLS:

PageSpeed ​​Insights Score - мобильный - с WP Rocket

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

На этом этапе вам может быть интересно, почему Time to Interactive тоже не лучший вариант. По правде говоря, просто активировав функцию отложенной загрузки WP Rocket, оценка TTI также значительно улучшится:

🚀 Короче говоря: с WP Rocket ничто не помешает вам оптимизировать результат за несколько минут!

Если вы все еще настроены немного скептически, прочтите тематическое исследование о том, как набрать 100% баллов на PageSpeed ​​Insights!

Начните устранение ресурсов, блокирующих рендеринг, прямо сейчас

Устранение ресурсов, блокирующих рендеринг, имеет решающее значение для оптимизации производительности вашего сайта WordPress и улучшения оценок Core Web Vitals.