WordPress асинхронная загрузка css: Асинхронная загрузка CSS и JavaScript | Скорость загрузки сайта | Дропшиппинг

Содержание

Асинхронная загрузка CSS WordPress – info-effect.ru

Оптимизация сайта

На чтение 2 мин. Опубликовано 08.12.2016

Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как сделать асинхронную загрузку CSS стилей на сайте WordPress. В настройках плагина вы сможете выбрать какие именно стили добавлять в асинхронную загрузку. Установить плагин WP Async CSS вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу:

Настройки – WP Async CSS.

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

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

Внимание ! На некоторых сайта использование данного плагина может вызвать противоположный эффект. Я проводил эксперимент на одном своём сайте, после включения данного сайта – ответ сервера увеличился на 0,2 секунды. То есть, получается, по моему мнению – не обязательно делать асинхронную загрузку. Попробуйте, может на вашем сайте плагин будет вести себя иначе, о результатах отпишитесь в комментариях !

Остались вопросы ? Напиши комментарий ! Удачи !

Как реализовать асинхронную загрузку CSS специально для PageSpeed Insights? — Хабр Q&A

Имеется проект, по которому заказчик хочет получить «зеленые карточки» PageSpeed Insights ( >= 85 баллов).

Фронтенд сторона проекта представляет из себя монолитный кусок CSS от старых разработчиков размером ~350 кбайт + 400 кбайт CSS от fancybox, semantic и десятка других фреймворков/непонятно чего. В общем, минифицированные и конкатенированные CSS весят >700 кбайт.
Результаты PageSpeed на данный момент 63 — мобильная и 79 — десктопная версия сайта. Рекомендовано «оптимизировать» и «избежать блокировки» css-файлами при загрузке страницы.
Первое, что было сделано — использование uncss, что в три раза снизило «вес», однако PageSpeed не придал этому значения. Так же был использован популярный метод динамической загрузки css через манипуляции с аттрибутом media:

link href=»/css-skin/skin-blue.css» rel=»stylesheet» media=»none» onload=»media=’all'»

Но и тут PageSpeed словно игнорирует динамическую загрузку, считая, что рендер все равно не начинается без подгрузки этих файлов.
Ради эксперимента перед изменением media был задан таймаут в 10 секунд.

На этот раз голую страницу без CSS PageSpeed принял как родную и дал «зеленые карточки». Естественно, оставлять посетителей без css на 10 секунд не то, что нужно, чтобы угодить PageSpeed. Посоветуйте, как можно решить этот вопрос?
Были испробованы:
1. подгрузка css из js — PageSpeed считает их блокирующими,
2. использование rel=preload (на данное время поддерживается лишь Chrome 50, дает хорошие результаты, но малораспространено),
3. Использование «критического» css — генерируемый утилитой critical инлайновый style дает нужные баллы только на главной странице. На подстраницах он уже не годится + мало баллов.

4. Интересная особенность — из утилиты ngrok хорошо себя показывает способ динамической загрузки через media + onload, а безCSS-ное безобразие на время загрузки прикрывается loader-ом. Однако будучи выгруженным на боевой сервер «динамические» css вновь оказываются «блокирующими»

CSS и JavaScript, блокирующие загрузку страницы в WordPress

В этом посту будет подразумеваться, что вы знакомы с инструментом Google по оптимизации скорости загрузки страниц сайта — PageSpeed Insights. Слушайте, да прямо сейчас вбейте туда свой сайт нажмите кнопку «Analize».

Окей, а теперь — о чём этот пост?

Вполне возможно, что в результатах проверки вашего сайта есть пункт «Eliminate render-blocking JavaScript and CSS in above-the-fold content».

Я заметил, что этот пункт один из самых трудноразрешимых (трудоёмких) и практически на всех сайтах, даже на очень быстрых, он присутствует.

Как его исправить в теории:

Объединяем все JavaScript файлы и размещаем то, что получилось перед закрывающим тегом </body> сайта.
Объединяем все CSS, суём прямо перед JavaScript, которые мы уже переместили, затем выбираем из них те стили, которые необходимы для корректного отображения страницы, а в особенности её верхней части (первого экрана) и помещаем их в тег <style> в <head> сайта.

Как же обстоит дело на практике, и в данном конкретном случае — для сайтов на WordPress?

1.

Воспользуемся зависимостью других скриптов от jQuery

В корректно состряпанной теме WordPress все CSS и JS файлы подключаются через wp_head() и wp_footer() — то есть в <head> и в конце </body> соответственно.

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

jquery.js, а это значит, что если библиотека jQuery находится в wp_footer(), то FancyBox ну никак не может попасть в wp_head().

Перемещаем jQuery в футер сайта

Делается это очень просто — при помощи функций wp_deregister_script(), wp_register_script(), wp_enqueue_script() и хука wp_enqueue_scripts (иногда используют хук init в связке с is_admin()). Всё, что требуется от вас, это вставить код следующего содержания в файл functions.php вашего сайта.

add_action('wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer');  
 
function true_peremeshhaem_jquery_v_futer() {  
 	// снимаем стандартную регистрацию jQuery
        wp_deregister_script('jquery');  
 
        // регистрируем для подключения в футере, описание параметров - в документации функции (ссылка чуть выше)
        wp_register_script('jquery', includes_url('/js/jquery/jquery. js'), false, null, true);  
 
	// подключаем
        wp_enqueue_script('jquery');  
 
}

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

На этом наша работа с JS заканчивается, конечно прирост в скорости даст ещё и объединение скриптов (то есть снимаете их все с регистрации и потом просто подключаете свою объединенную версию) — но Google сейчас это уже не требует.

2. Объединение CSS в WordPress

Если объединение всех JavaScript в один файл — не всегда хорошая идея, то CSS-ки я бы рекомендовал объединять по возможности всегда.

Помните скриншот в самом начале статьи (10 blocking CSS resources)? Откуда берется такое количество файлов стилей, ведь разработчик темы наверное понимал, что делает?

Ответ — из плагинов.

Например плагин «Contact Form 7» подключает свою собственную таблицу стилей, и хотя сама по себе она невелика, то лучше всё же избежать лишних HTTP-запросов.

Давайте пошагово разберем как.

Копируете содержимое таблицы стилей плагина и вставляете его в конец основного файла стилей — style.css.
Проверяете, проставлены ли в данных стилях относительные ссылки на изображения, например url('images/load.gif'). Если да, то либо заменяете их на абсолютные, либо переносите изображения из плагина в папку с темой.
Заходите в настройки плагина и смотрите, есть ли возможность где-нибудь снять галочку и не подключать CSS плагина. В «Contact Form 7» такой возможности нет, а значит мы переходим к следующему пункту.

Отрубаем файлы через functions.php. Для стилей «Contact Form 7» код будет следующий:

add_action( 'wp_print_styles', 'true_otkljuchaem_stili_contact_form', 100 ); // по идее вы можете использовать и хук wp_enqueue_scripts, хотя конкретно его я не тестировал
 
function true_otkljuchaem_stili_contact_form() {
	wp_deregister_style( 'contact-form-7' ); // в параметрах - ID подключаемого файла
}

Также иногда при помощи условных тегов файлы плагинов (как CSS, так и JS) отключают только с тех страниц, на которых они не используется.

Ок, с «Contact Form 7» разобрались, а как узнать ID файлов CSS других плагинов?

Да легко, открываем исходный код страницы и видим там подобную картину:

Также есть плагин, который позволит выполнить объединение CSS и JavaScript автоматически — JS & CSS Script Optimizer.

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

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Как загружать CSS файлы асинхронно

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

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

Для сайтов с небольшим объемом контента этот способ может и не пригодиться, но если размер CSS велик (скажем, больше 50–60 КБ), это может помочь производительности скорости загрузки сайта. Разделите стили и загружайте менее критичный CSS в фоновом режиме – т.е., асинхронно. В сегодняшней практической статье мы рассмотрим оптимальный способ для асинхронной загрузки CSS стилей.

Способы асинхронной загрузки CSS файлов

Существует несколько способов асинхронной загрузки CSS, но ни один из них не лежит на поверхности. В отличие от файлов JavaScript, здесь отсутствует атрибут async или defer, который можно просто применить к элементу ссылки (тег <link>). Однако в последнее время браузеры стандартизировали свое поведение при загрузке CSS, поэтому специальные скрипты (например, такой как loadCSS) вероятно, больше не нужны.

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

<link rel="stylesheet" href="{путь к css файлу}" media="print" onload="this.media='all'">

Что делает этот код

Эта HTML строка лаконична, но не очень понятна, поэтому давайте разберем, что здесь происходит.

Для начала атрибут media для ссылки установлен на печать (print). Печать – это тип носителя, который гласит: «применять правила этой таблицы стилей для печатных носителей» или, другими словами, применять их, когда пользователь пытается распечатать страницу. Следует признать, что мы хотим, чтобы наша таблица стилей применялась ко всем носителям (особенно к ПК и мобильным), а не только к печати, но, объявив тип носителя, который не соответствует текущей среде, мы можем получить интересный и полезный эффект: браузер загрузит таблицу стилей без задержки рендеринга страницы, т.е., асинхронно! Это полезно, но это не все, чего мы хотим. Мы также хотим, чтобы CSS действительно применялся к экранным устройствам (screen) после его загрузки. Для этого мы можем использовать атрибут onload, чтобы установить значение all для всех медиа, когда браузер завершит загрузку.

Можно ли этого добиться с использованием

rel=preload?

Да, аналогично! В последнее время веб-мастера довольно активно использовали для ссылки rel=preload (вместо rel=stylesheet), чтобы получить аналогичное поведение, рассмотренное выше. Этот подход все еще хорошо работает, однако есть несколько недостатков, которые необходимо учитывать при использовании предварительной загрузки. Во-первых, поддержка предварительной загрузки в браузерах все еще невелика, поэтому необходимо использовать polyfill (например, такое, как у loadCSS), если вы хотите полагаться на этот способ в разных браузерах. Что еще более важно, предварительная загрузка извлекает файлы очень рано (с наивысшим приоритетом), потенциально лишая приоритета другие важные загрузки. Что может придавать более высокий приоритет, чем на самом деле нужен для некритического CSS.

К счастью, если вам нужен высокоприоритетный выбор, который обеспечивает rel=preload (в браузерах, которые его поддерживают), вы можете объединить его с приведенным выше шаблоном, например так:

<link rel="preload" href="{путь к css файлу}" as="style">
<link rel="stylesheet" href="{путь к css файлу}" media="print" onload="this. media='all'">

Учитывая простую и декларативную природу приведенного выше кода, этот подход с использованием media="print" имеет право на жизнь.

А почему бы не использовать недействительный атрибут для

media?

Да, можно использовать недействительный атрибут для media, например, такой как «only х», что позволит достичь того же эффекта, что и «print». Когда браузеры сталкиваются с типами media, которые не могут определить, они пока относятся к ним одинаково – все равно загружают эти файлы. Тем не менее, некоторые браузеры начинают различать несоответствующие типы мультимедиа и недопустимые (или которые вообще не распознаются браузером), и, возможно, не будут загружать эти файлы. В целях безопасности мы рекомендуем использовать допустимый, но не соответствующий текущему типу, такой как print например.

Вот и все.

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

Как ускорить сайт в WordPress | REG.RU

Современные сайты должны быть не только стильными, лаконичными и понятными, но и быстрыми. Если ваш веб-ресурс отстаёт хотя бы по одному из этих критериев — это отразится на лояльности посетителей и в конечном счёте на выручке. В статье расскажем, как ускорить сайт, созданный на WordPress.

Что такое скорость загрузки сайта

Когда мы открываем сайт в браузере, проходит какое-то время, прежде чем контент на странице целиком загрузится. Это может происходить очень быстро: 1–2 секунды, и тогда нам кажется, что всё открылось мгновенно. А может дольше – от 5 секунд. Тогда мы понимаем, с сайтом что-то не так и, скорее всего, закроем его, чтобы не тратить своё время.

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

TTFB (Time To First Bite) — время до первого байта. Когда пользователь попадает на страницу, его браузер отправляет серверу HTTP-запрос. Сервер, в свою очередь, отдаёт первый байт страницы. Этот интервал между запросом и отдачей первого байта должен быть минимальным.
Время отрисовки страницы — первым делом сервер загружает HTML-файл страницы. Это «голая» структура с минимумом контента. На этом этапе пользователь видит общие очертания: где расположены заголовки, изображения и так далее.
Время загрузки контента — заключительный этап, на котором страница загружается целиком вместе со всеми остальными CSS- и JS-файлами, изображениями и кнопками.

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

Зачем нужно ускорять сайты

Скорость загрузки влияет не только на UX (восприятие пользователями), но и на ранжирование в поисковых сетях. Рассмотрим подробнее.

Если сайт грузится дольше 3 секунд:

Возрастают «отказы». Никто не любит ждать, особенно клиенты. Если вместо перечня и описания услуг, они видят белую страницу или не до конца прогрузившуюся структуру — большинство из них просто перейдут на другой сайт в первые 15 секунд. Это и называется «отказом».
Уменьшается конверсия. Конверсия — это соотношение числа посетителей, которые выполнили целевое действие (купить, подписаться, зарегистрироваться и т. п.), к общему числу пользователей, просмотревших страницу. Так, если за неделю на ваш блог зашло 400 человек, а на электронную рассылку подписались 15, конверсия будет 3,75% (15/400). Чем больше людей покинут страницу из-за низкой скорости, тем ниже будет эффективность.
Ухудшается позиция в выдаче. В числе многих факторов поисковики Яндекс и Google оценивают скорость загрузки сайта. Предпочтение отдаётся быстрым сайтам. Медленным же гораздо сложней попасть в топ-10 первых ссылок на странице поиска.

Как узнать скорость загрузки сайта

Определить скорость загрузки сайта можно по-разному:

Проанализировать данные вкладки Network (Сеть) в консоли разработчика. Подробнее об этом способе мы рассказывали в статье Почему мой сайт работает медленно и что делать.
Воспользоваться специальными сервисами Be1, PR-CY, Google PageSpeed.

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

Откройте сайт с нескольких разных устройств с автономным соединением. Если на одном страница загрузилась быстро, а на другом — медленно, вероятно, дело не в самом сайте, а в скорости интернета.

Также стоит помнить о том, что мобильная и полная (десктопная) версия сайта загружаются с разной скоростью. Если на компьютере всё открывается быстро, это не гарантирует того, что и на смартфоне будет то же самое. С учётом того, что всё больше людей сидят в интернете со смартфонов — скорости мобильной версии нужно уделить особое внимание.

Как повысить скорость сайта

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

структура сайта;
HTTP-запросы;
размер CSS и JS;
изображения;
версия php;
кэширование;
gzip-сжатие;
хостинг.

Разберём, как именно они влияют и как можно их улучшить.

1. Структура сайта → оптимизировать

Как говорилось выше, сначала сервер отдаёт браузеру HTML-страницу (структуру) и только потом загружает внешние файлы (изображения, стили, скрипты). Если в начале HTML-кода подключены другие файлы, они блокируют его загрузку. Сервер, встретив их, не может вернуться к ним позже, после того, как прогрузит структуру. Он начинает обрабатывать другие запросы — и в результате скорость загрузки снижается.

Чтобы этого не происходило, начало кода должно содержать только те данные, которые нужны для первичной/основной прорисовки контента. Загрузку всех второстепенных внешних CSS и JS нужно отложить (разместить в конце кода).

Это можно сделать вручную или с помощью плагинов WordPress.

2. HTTP-запросы → сократить количество

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

Чтобы сократить количество файлов, их можно объединить. Для этого откройте любой текстовый редактор и последовательно вставьте код каждого файла в том порядке, в каком они влияют на контент. В идеале вместо большого количества отдельных .css- и .js-файлов, для каждой страницы должен быть один основной.

3. CSS и JS → минимизировать

Чем больше лишних незначительных элементов (пробелов, переносов строк) в коде, тем медленнее он загружается. Чтобы убрать их, можно воспользоваться онлайн-сервисами CSS Minifier, JavaScript Compression Tool и т. п. Просто загрузите файл, и инструменты автоматически очистят код от лишних знаков и таким образом оптимизируют их.

4. Изображения → оптимизировать

Оптимизация скорости загрузки сайта во многом зависит от того, сколько весят изображения, ведь это самый тяжёлый тип контента (в сравнении с текстовыми кодами и динамическими скриптами). Мы посвятили работе с изображениями отдельную инструкцию.

5. Версия php → обновить

Если версия php, установленная для вашего сайта, устарела, это тоже может замедлять скорость обработки скриптов. Сейчас повсеместно используются 7.1–7.4. Узнать и изменить версию php на хостинге можно с помощью инструкции.

6. Кэширование → включить

Кэширование — позволяет экономить время на обработку запросов. Так, если оно включено, сервер просто отдаёт браузерам пользователей файлы из кэша, а не генерирует их каждый раз заново. Мы рассказывали о том, как включить кэширование с помощью плагинов WordPress и в файле .htaccess.

7. Gzip-сжатие → настроить

На хостинге REG.RU по умолчанию включено сжатие для статичных файлов. Подробнее о настройках gzip можно узнать в статье.

8. Хостинг → увеличить тариф

Иногда медленная загрузка сайта — сигнал того, что вы исчерпали возможности вашего тарифа. Если сайт популярен и его посещают тысячи пользователей, а вы используете тариф с низким CPU, сервер просто не справляется с обработкой запросов. Мы рекомендуем выбирать VIP-тарифы с максимальными параметрами CPU. Читайте о том, как изменить тариф, в инструкции.

Как ускорить загрузку сайта на WordPress

Если ваш сайт создан на CMS WordPress для оптимизации скорости загрузки можно использовать плагины. Они помогут улучшить некоторые моменты (например, настроить асинхронную загрузку скриптов) автоматически.

WordPress — оптимизация загрузки сайта

Мы выбрали 2 популярных плагина, которые комплексно решают проблему скорости: PageSpeed Ninja и Autoptimize.

Рассмотрим, как установить их в административной панели и что делать потом.

1. Откройте административную панель WordPress по инструкции.
2.
Перейдите в раздел «Плагины» и нажмите Добавить новый:
3.
В поиске справа введите название плагина: PageSpeed Ninja или Autoptimize и следуйте инструкции в нужной вкладке.

PageSpeed Ninja

Autoptimize

4.
Нажмите Установить и Активировать:
5.
В разделе «Настройки» выберите PageSpeed Ninja:
6.
Во вкладке «Общие» отображается оценка оптимизации десктопной и мобильной версии сайта, а также интерфейса. Чтобы настроить плагин более тонко, перейдите во вкладку «Дополнительно». Мы рекомендуем использовать пресет «Safe», чтобы обезопасить себя от критических изменений в структуре сайта:
7.
Включите следующие первоочередные настройки, раскрывая все вкладки и передвигая ползунок вправо. Когда всё будет готово: нажмите Сохранить в правом верхнем углу страницы:
- Gzip compression и Gzip compression in .htaccess
- Caching in .htaccess
- Caching, Experimental Caching и DNS Prefetch
- Merge embedded styles → In head only
- Minify CSS Method → RESS + CSSTidy
- Minify style attributes, Cross-files optimization, Keep extra link tag attributes, Keep extra style tag attributes
- Merge whitespaces, Remove default attributes, Remove IE conditionals
- Cross-files optimization, Keep extra script tag attributes
- Optimization (Images)

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

4.
Нажмите Установить и Активировать:
5.
В разделе «Настройки» выберите Autoptimize:
6.
Откройте вкладку JS. CSS & HTML и отметьте галочкой Оптимизировать код JavaScript и сохраните изменения:
7.
Повторите то же самое во вкладке «Изображения». Мы рекомендуем включить функцию «Ленивая загрузка», чтобы картинки не прогружались до того момента, пока пользователь до них не долистал страницу.

Готово, вы оптимизируете JS-скрипты и изображения. Это положительно отразится на скорости загрузки.

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

Закажите услугу REG.Site

Попробуйте комплексное решение для создания сайта прямо сейчас!

Подробнее Помогла ли вам статья?

2 раза уже помогла

PageSpeed Ninja — Плагин для WordPress

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

Простое влючение gzip сжатия для файлов
Исправление блокирующих отрисовку css и javascript
Улучшение критического пути отрисовки и авто-генерация критического above-the-fold CSS
Минификация html, javascript и css файлов
Объединение и подстановка javascript и css
Отложенная загрузка javascript и css
Оптимизация порядка загрузки стилей и скриптов
Сжатие всех изображений для оптимизации размера
Отложенная (ленивая) загрузка изображений с поддержкой предпросмотра в низком разрешении
Получайте преимущества от кэширования в браузере и на стороне сервера
Оптимизируйте ваши изображения для почти 10000 различных мобильных браузеров благодаря базе данных AMDD – одной из наиболее полных баз данных о мобильных устройствах.
И еще больше на основе более 10 летнего опыта оптимизации для мобильных устройств более 200 000 вебсайтов.

Почему PageSpeed Ninja?

В течение десятилетия мы занимались web-оптимизацией для мобильных устройств (возможно вы слышали об одном из наших проектов, Lazy Load XT на Github). PageSpeed Ninja для WordPress — это результат более 10 лет опыта в оптимизации производительности более 200 000 вебсайтов для мобильных устройств. Вряд ли вы сможете найти другой подобный, легкий в использовании, универсальный плагин для улучшения производительности.

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

Мы рады вашим комментариям и предложениям – всегда смело отправляйте нам свои вопросы, идеи и предложения.

Перед установкой

Согласно нашей статистике, наш плагин улучшает скорость 4 из 5 сайтов. Однако в некоторых случаях определенные комбинации тем и плагинов (в частности, связанных с кэшированием и оптимизацией) могут приводить к проблемам несовместимости. Таким образом, наш плагин может не подходить для всех. Чтобы вы могли проверить, как PageSpeed Ninja может работать на вашем сайте, мы сделали простой инструмент, где вы можете протестировать свой сайт перед установкой. Мы настоятельно рекомендуем посетить PageSpeed.Ninja и предварительно протестировать свой сайт.

Удаление

Когда плагин удаляется, он автоматически отменяет все изменения, внесенные в сайт, на момент установки плагина. Восстанавливаются все оптимизированные изображенияи удаляется директория /s, содержащая оптимизированные JS и CSS файлы. Также отменяются все изменения в файлах .htaccess.
Пожалуйста обратите внимание, что такое восстановление может не быть надежным в случае возможных конфликтов с другими плагинами, например если другие плагины создают/редактируют/удаляют файлы (включая файлы, резервируемые этим плагином).

Обратная связь, сообщения об ошибках, логирование

Мы рады любым вопросам, комментариям, предложениям, сообщениям о проблемах. Свяжитесь с нами, чтобы мы добавили вас в загрытую группу тестирования в Facebook.

PageSpeed Ninja может логировать все ошибки php в файл wp-content/plugins/pagespeedninja/includes/error_log.php (см. секцию Troubleshooting на странице Расширенных настроек PageSpeed Ninja)
Если вы обнаружили какую-либо проблему, было бы хорошо прислать нам этот файл.

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

Upload the plugin files to the /wp-content/plugins/psn-pagespeed-ninja directory, or install the plugin through the WordPress plugins screen directly. We recommend taking a backup of your site first, just like with any other new plugin.
Активируйте плагин на странице ‘Плагины’ в WordPress
Используйте страницу Настройки->PageSpeed Ninja для конфигурирования плагина
После установки плагина зайдите в Настройки->PageSpeed Ninja и включите уровни оптимизации, предложенные Google PageSpeed Insights. По умолчанию все оптимизации отключены. После этого плагин будет оптимизировать изображения, файлы JS и CSS, вносить изменения в файлы .htaccess для исправления проблем, обнаруженных Google PageSpeed Insights.

Конфликтует ли этот плагин с Yoast или другими SEO плагинами?: Плагин PageSpeed Ninja должен хорошо работать с большинством других плагинов. Однако, если какие-либо SEO плагины пытаются дублировать функционал этого плагина, возможны конфликты, особенно при включенном gzip сжатии. Однако, это маловероятно.

«PageSpeed Ninja» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

руководство по отложенной загрузке изображений — Дизайн на vc.ru

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

40 223 просмотров

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

Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

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

Основные возможности — вкратце

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

Что такое отложенная загрузка

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

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

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

Инструменты

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

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

С помощью расширения Lighthouse для браузера Google Chrome можно узнать, какие изображения подходят для отложенной загрузки и сколько трафика можно сэкономить. В расширении есть раздел, посвящённый закадровым изображениям.

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

Способы реализации

Изображения на странице можно загружать двумя способами — с помощью тега <img> или с помощью CSS-свойства «background», которое позволяет установить одновременно несколько характеристик фона. Сначала рассмотрим более распространённый тег <img>, а затем перейдём к фоновым изображениям CSS.

Тег <img>

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега <img />, браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

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

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

Загрузка изображений с помощью Intersection Observer API

Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

Intersection Observer API делает процесс проще, помогает избежать вычислений и обеспечивает хорошую производительность.

Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку. Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

Если вы сравните время загрузки изображения двух методов — с отслеживанием событий и Intersection Observer API, — то обнаружите, что с помощью Intersection Observer API загрузка изображения запускается гораздо быстрее, и сайт уже не смотрится «вялым» при скроллинге.

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

Однако, как и всё новое, поддержка Intersection Observer API доступна не во всех браузерах. Таким образом, приходится возвращаться к методу отслеживания событий в браузерах, где Intersection Observer API не поддерживается. Учли этот момент в приведённом выше примере.

Отложенная загрузка фоновых изображений CSS

После тегов <img /> фоновые изображения являются наиболее распространённым способом загрузки изображений для страниц. Для тегов <img /> в браузере простой подход — если URL-адрес изображения доступен, то можно его загрузить.

С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

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

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

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

1. Правильный дизайн плейсхолдеров

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

Мы использовали подобный плейсхолдер в нашем примере — везде он выкрашен в сплошной светло-серый цвет. Тем не менее можно сделать лучше. Ниже — примеры использования более удачных вариантов плейсхолдеров.

Плейсхолдер доминирующего цвета

Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

Рабочий пример и код для использования плейсхолдера доминирующего цвета — по ссылке.

Плейсхолдер низкого качества (LQIP)

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

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

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

Рабочий пример и код для использования техники LQIP — по ссылке.

2. Добавление буферного времени

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

Решение

Вместо того чтобы загружать изображения только тогда, когда они точно входят в окно просмотра, загрузите картинки, когда они, например, в 500 px от края.

С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

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

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

Как понятно из видео ниже (внимательно следите за сетевыми запросами, появляющимися внизу), при прокрутке, когда третье изображение находится в поле зрения, загружается пятое. Когда четвёртое изображение появляется в окне просмотра, загружается шестое.

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

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

3. Как избежать смещения содержимого

При отсутствии изображения браузер не знает размеров содержимого, которое должно отображаться в пределах контейнера. Если не задать его с помощью CSS, конечный контейнер не будет иметь размеров, то есть его размеры будут равны 0 x 0 px.

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

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

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

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

4. Не стоит применять отложенную загрузку для всех изображений

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

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

Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

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

yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

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

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

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

Или можно использовать тег <noscript>, чтобы создать удобный интерфейс для этих пользователей. В треде Stack Overflow рассматриваются проблемы этого тега. Материал будет полезен для всех, чья целевая аудитория — такие пользователи.

CSS JS Manager, Async JavaScript, Defer Render Blocking CSS поддерживает WooCommerce — плагин WordPress

Документация

Загрузить / удалить css или js, если запрос поступает с мобильного устройства
Загрузить / удалить css или js, если запрос поступает с настольного устройства
Отложенная загрузка файла CSS
Загрузить любой JS-файл Async или Defer
Удалить любой JS со всех страниц или с некоторых страниц в соответствии с различными условными правилами
Удалить любой файл CSS со всех страниц или с некоторых страниц в соответствии с различными условными правилами
Асинхронно любой файл JS на всех страницах или на отдельных страницах
Вы можете удалить или добавить файл JS в зависимости от типа сообщения
Вы можете удалить или добавить файл CSS в зависимости от типа сообщения
Вы можете удалить или добавить файл JS на основе идентификатора страницы
Вы можете удалить или добавить файл CSS на основе идентификатора страницы

Управление критически важными css

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

Шаг 1. Перейдите в Менеджер CSS JS >> Критическая настройка CSS
выберите тип сообщения, в котором вы хотите использовать критический CSS,
Скажите, что вы хотите использовать его в публикации, продукт
Шаг 2: перейдите в Critical CSS >> Add New Critical css
вы можете добавить столько критических CSS, сколько хотите
Скажем, вы хотите иметь разные критические CSS для домашней страницы и публикации, и продукт
, чтобы вы создали 3 разных критический css и загрузить критический css Там
Используйте это, чтобы сгенерировать критический css https: // www.sitelocity.com/critical-path-css-generator
Шаг 3. Перейдите к соответствующему сообщению или странице, где вы хотите использовать эти важные CSS-файлы, и выберите их.

Как отложить блокировку рендеринга CSS с помощью диспетчера CSS JS?

Как удалить файл CSS с целого веб-сайта или конкретной страницы?

Те же шаги применимы и к JS, просто добавьте ссылку JS и выберите JS в раскрывающемся списке.

Премиум-поддержка: мы отвечаем на все вопросы поддержки в течение 24 часов

Как отложить блокировку рендеринга CSS с помощью диспетчера CSS JS?

Скопируйте URL-адрес этого файла без переменной строки запроса (без этого «? Ver = 5.0,3 “
URL: http: //localhost/telco/wp-content/themes/twentyseventeen/style.css
Теперь откройте диспетчер CSS JS
Нажмите «Добавить новый ресурс»
Теперь добавьте URL из шага 2
Установить метод как «Асинхронный»
Логика выбора «Добавить это»
на всех страницах

Как удалить файл CSS с целого веб-сайта?

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

, вы легко можете это сделать. просто следуйте всем шагам, указанным в процессе Defer, вы можете сохранить метод загрузки как что угодно (так как это не имеет значения, поскольку css будет удален), а затем внизу

Если вы хотите разрешить JS-файл только на нескольких определенных страницах и удалить со всех остальных

Все шаги остаются прежними. Вам нужно скопировать URL-адрес файла JS. Выберите тип ресурса как «JS» из раскрывающегося списка.

Выберите метод загрузки JS (есть Defer, Async и normal)

В логике выбора нажмите «Добавить»

Щелкните «Выбранные страницы»

В поле Single Resource ID введите идентификатор страницы страниц, на которых вы хотите, чтобы этот js был разрешен.

E, g: 1,2,22 это идентификатор страницы, на которой этому js будет разрешено загружать, кроме этого, он не будет загружаться ни на одной другой странице

Поддерживает ли он WooCommerce

Да, теги страницы WooCommerce, такие как is_product, is_category, is_cart, is_shop и другие.Таким образом, вы можете загрузить или удалить скрипт, специфичный для правил страницы WooCommerce

Я хочу удалить CSS, если запрос поступает с мобильного устройства

Да, вы можете удалить css или js в зависимости от устройства, мобильное или настольное

Я хочу асинхронизировать файл js для мобильного устройства

Да, вы можете сделать это в версии pro

«CSS JS Manager, Async JavaScript, Defer Render Blocking CSS поддерживает WooCommerce» — это программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

авторов

html — Как загрузить CSS асинхронно

Простой ответ (полная поддержка браузера):

Задокументированный ответ (с дополнительной предварительной загрузкой и резервным вариантом с отключением сценария):

Комбинированная предварительная загрузка и асинхронизация:

Если вам нужен предварительно загруженный и асинхронный CSS, это решение просто объединяет две строки из задокументированного ответа выше, делая его немного чище.Но это не будет работать в Firefox, пока они не поддержат ключевое слово preload. И снова, как подробно описано в задокументированном ответе выше, предварительная загрузка на самом деле может быть бесполезной.

Дополнительные сведения:

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

Благодарим filament group за их многочисленные асинхронные решения CSS.

html — Как лучше всего загружать CSS async?

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

По умолчанию CSS обрабатывается как ресурс блокировки рендеринга.
Медиа-типы и медиа-запросы позволяют нам помечать некоторые ресурсы CSS как необработанные. блокировка.
Браузер загружает все ресурсы CSS, независимо от блокирующее или неблокирующее поведение.

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

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

CSS «медиа-типы» и «медиа-запросы» позволяют нам решать следующие варианты использования:

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

Рассмотрим несколько практических примеров:

Первое объявление — это блокировка рендеринга и соответствует во всех условиях.
Второе объявление также блокирует рендеринг: «all» является типом по умолчанию, поэтому, если вы не укажете какой-либо тип, для него неявно будет установлено значение «all». Следовательно, первое и второе объявления фактически эквивалентны.
Третье объявление содержит динамический медиа-запрос, который оценивается при загрузке страницы. В зависимости от ориентации устройства во время загрузки страницы portrait.css может блокировать или не блокировать рендеринг.
Последнее объявление применяется только тогда, когда страница печатается, поэтому при первой загрузке страницы в браузер не происходит блокировка рендеринга.

Источник — CSS с блокировкой рендеринга —

Как устранить блокирующие отображение javascript и CSS в верхней части страницы в wordpress

Много способов. Способы пройти более 85/100 —

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

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

Традиционный способ:

То есть один сервер, один сайт и настройка на основном сервере.

Самое важное время отклика вашего сервера выше. Сначала пройди. Протестируйте на webpagetest.org . Затем отдайте приоритет видимому контенту. Затем используйте кеш. Дело в том, что блокирование рендеринга происходит после их создания. Эти оптимизации выполняются после того, как вы прошли безопасность сервера, время до первого байта, время безотказной работы и т. Д. Нет плагина, который может сделать 100% идеальным с несколькими щелчками мыши для всех сайтов.

Вы должны читать (см. Документ WordPress) и загружать скрипты асинхронно в нижний колонтитул или тело с помощью плагинов, таких как Header и Footer, и спрашивать на форуме WordPress, когда вы сталкиваетесь с трудностями. Много раз многие сайты, посвященные технологиям, подробно обсуждали это. Есть действительно очень старые добрые сайты-блоги, такие как CSS Tricks. Вы должны найти все статьи по теме и прочитать от старого к новому. Невозможно уступить легкий путь. Загрузка Js — более сложный браузер, зависит от устройства. Кроме того, на обычных веб-сайтах есть плагин кеширования, похожий на W3TC.

Известных проблем традиционным способом:

Нет ничего странного в том, чтобы вскрыть брешь в безопасности некоторыми фрагментами. Благодаря HTTP / 2 push, многие новые вещи, недавние вопросы безопасности WordPress в феврале заставили не говорить о странных плагинах и фрагментах. Никто на самом деле не может проводить аудит безопасности. Вот почему я говорил об этом 2 года назад о блокировке рендеринга javascript и CSS, а не позже. Там я показал настройки бесплатного плагина для WordPress Async js и css. Этот плагин WordPress предоставляет параметры для CSS, JS, автоматически загружаемых как встроенные или загружаемых асинхронно.Можешь попробовать. Inline, Async имеет свои недостатки.

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

Делайте на свой страх и риск на сайте разработчиков с оценкой A + в лабораториях SSL, добавляйте различные заголовки безопасности.

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

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

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

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

Это, вероятно, вызывает у вас два вопроса:

Что такое ресурсы, блокирующие рендеринг в первую очередь?
Как можно устранить ресурсы, блокирующие рендеринг, в WordPress?

В этом посте мы ответим вам на оба вопроса.Вот все, что мы расскажем в этом посте:

Хотите посмотреть видео версию?

Что означает «Устранение ресурсов, блокирующих рендеринг»?

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

Когда посетитель заходит на ваш сайт, его веб-браузер в основном запускается с верхней части кода вашего сайта и читает его вниз. Сверху вниз, понятно?

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

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

Допустим, у вас есть классный эффект JavaScript в нижнем колонтитуле вашего сайта. Он основан на «coolfooter.js» — скрипте, на который есть ссылка в верхней части кода вашего сайта (, хотя эффект находится в нижнем колонтитуле, поэтому посетители не увидят его, пока не перейдут к нижнему колонтитулу ).

Итак, примерный макет очень для кода вашего сайта может выглядеть примерно так:

Заголовок мета
Coolfooter.js
HTML для вашего содержания в верхней части страницы. Это весь контент, который посетитель видит сразу ( до того, как они начнут взаимодействовать со страницей )

И вот почему это проблема:

Когда посетитель заходит на ваш сайт, его браузер начинает читать сверху вниз. Поэтому, прежде чем он сможет проанализировать и отобразить HTML-код для содержания в верхней части вашего сайта, ему необходимо дождаться загрузки и синтаксического анализа coolfooter.js файл.

Конечный результат? Отображение HTML-кода верхней части страницы занимает больше времени, означает, что посетители будут воспринимать ваш сайт как более медленный.

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

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

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

Когда мы говорим о ресурсах, блокирующих рендеринг, мы обычно имеем в виду:

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

Например, важно загружать ваш критически важный CSS в верхней части страницы, иначе ваши посетители могут столкнуться с так называемой вспышкой нестилизованного контента (FOUC).

Являются ли изображения ресурсами, блокирующими рендеринг?

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

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

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

Сообщение об устранении ресурсов, блокирующих рендеринг, в PageSpeed Insights

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

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

Однако полезно понимать, что эти плагины делают «за кулисами», чтобы устранить ресурсы, блокирующие рендеринг.

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

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

Async — позволяет парсеру HTML (, например, браузер посетителя ) загружать JavaScript, продолжая анализировать остальную часть HTML.То есть он не прекращает полностью анализ во время загрузки файла. Однако он приостановит анализатор HTML для выполнения сценария после его загрузки.
Отложить — позволяет синтаксическому анализатору HTML загружать JavaScript, пока анализирует остальную часть HTML. и ожидают выполнения сценария до завершения синтаксического анализа HTML.

Эта иллюстрация из журнала Growing with the Web отлично показывает разницу:

JavaScript async против отложенного

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

Async не использует этот подход, который иногда может вызывать проблемы, если вы применяете async ко всем ресурсам JavaScript, потому что он часто может нарушить ресурсы, которые зависят от ресурсов, которые появляются ранее в документе. Самая распространенная проблема, которую вызывает асинхронный вызов, — это неработающие ресурсы jQuery, которые пытаются загрузить до того, как jquery.js был добавлен в документ.

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

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

Определите стили, которые требуются для визуализации содержимого верхней части страницы, и доставляйте эти стили встроенными в HTML.
Используйте атрибут media в элементах ссылки, которые втягивают файлы CSS, чтобы идентифицировать ресурсы CSS, которые являются условными, то есть необходимы только для определенных устройств или ситуаций.
Оставшиеся ресурсы CSS следует загружать асинхронно, что обычно выполняется путем их добавления с помощью отложенного или асинхронного JavaScript.Если честно, мы действительно здесь забиваемся над головой, не так ли? Это определенно территория фронтенд-инженера. Это здорово, если вы фронтенд-инженер, но большинство из нас — нет. Хорошая новость заключается в том, что это статья о WordPress, и вы можете устранить или, по крайней мере, значительно уменьшить количество ресурсов JS и CSS, блокирующих рендеринг, влияющих на ваш сайт, с помощью подходящих плагинов.

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

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

Autoptimize + Async JavaScript (бесплатно)
WP Rocket (оплачивается)

Для справки, вот как выглядит наш тестовый сайт до оптимизации доставки CSS и JavaScript:

Сообщение об устранении ресурсов, блокирующих рендеринг, в PageSpeed Insights

Если вы проверяете эффективность изменений с помощью Google PageSpeed Insights, имейте в виду, что Google кэширует свои результаты на несколько минут.По сути, это означает, что если вы быстро…

Проверьте свой неоптимизированный сайт
Активируйте один из плагинов в этом разделе
Повторно протестируйте свой сайт

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

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

Autoptimize и Async JavaScript — это два отдельных бесплатных плагина от одного разработчика.Вместе они помогают оптимизировать доставку как CSS, так и JavaScript.

После того, как вы установили оба плагина, перейдите в Настройки → Асинхронный JavaScript и:

Установите флажок Включить асинхронный JavaScript вверху.
Выберите между Apply Async и Apply Defer в поле Quick Settings .

Как настроить плагин Async JavaScript

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

После того, как вы настроили плагин Async JavaScript, перейдите в Настройки → Автоматическая оптимизация и:

Установите флажок, чтобы Оптимизировать код JavaScript
Установите флажок, чтобы Оптимизировать код CSS

Как настроить плагин Autoptimize

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

После настройки автоматической оптимизации и асинхронного JavaScript наш тестовый сайт прошел аудит PageSpeed Insights «Устранение ресурсов, блокирующих рендеринг»:

Результаты PageSpeed Insights с автоматической оптимизацией и асинхронным JavaScript

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

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

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

WP Rocket — популярный плагин для повышения производительности и кеширования WordPress премиум-класса.

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

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

После установки и активации WP Rocket перейдите на вкладку Оптимизация файлов . Затем включите эти две опции:

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

Как настроить WP Rocket

После активации этих двух функций наш тестовый сайт также прошел аудит «устранение ресурсов, блокирующих рендеринг» в PageSpeed Insights. WP Rocket также удалось устранить больше ресурсов, блокирующих рендеринг, чем при настройке Autoptimize / Async JavaScript:

Результаты PageSpeed Insights с WP Rocket

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

Хотите избавиться от ресурсов, блокирующих рендеринг, в #WordPress? С правильными плагинами это очень просто… Узнайте, как изменить их настройки и сделать ваш сайт быстрее! ⚙️🏃‍♀️Нажмите, чтобы написать твит

Сводка

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

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

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

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

Если вы готовы платить, вы можете использовать WP Rocket, который предлагает специальную интеграцию с Kinsta и может помочь с множеством других настроек производительности WordPress.

У вас есть дополнительные вопросы о том, как устранить ресурсы, блокирующие рендеринг, в WordPress? Дайте нам знать об этом в комментариях!

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Асинхронная и отложенная загрузка JavaScript в WordPress — async-javascript

Inasync-javascript — это плагин WordPress, который позволяет загружать неблокирующие файлы JavaScript (например, библиотеку jQuery) с помощью Async и Defer.

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

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

Когда файл JavaScript загружается с помощью функции wp_enqueue_script , Async JavaScript добавляет атрибут async или defer .

Существует несколько способов выполнения внешнего файла JavaScript:

Если присутствует async : сценарий выполняется асинхронно с остальной частью страницы (сценарий будет выполняться, пока страница продолжает анализ)
Если defer присутствует и async отсутствует: сценарий выполняется, когда страница завершила синтаксический анализ
Если ни async , ни defer отсутствуют: сценарий извлекается и выполняется немедленно, прежде чем браузер продолжит работу разбор страницы

Поддерживаемые браузеры:

Chrome
IE 10 и выше
Firefox 3.6 и выше
Safari
Opera

Как использовать:

1. Установите и активируйте плагин async-javascript из панели администратора как обычно.

2. Включите async-javascript на странице настроек.

3. Выберите метод (асинхронный или отложенный), который вы хотите использовать:

4. Задайте для сценария (-ов) Async или Defer:

5. Вы также можете выбрать сценарий, плагин и тема для игнорирования:

Предварительный просмотр:

Скачать плагин WordPress:

Вы можете скачать этот бесплатный плагин WordPress, используя кнопку загрузки ниже.Если не указано иное, плагин WordPress доступен под лицензией GNU General Public License.

Автор: Франк Гуссенс

Домашняя страница: https://wordpress.org/plugins/async-javascript/

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

Как исправить блокирующие рендеринг 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.

Асинхронная загрузка CSS WordPress – info-effect.ru

Как реализовать асинхронную загрузку CSS специально для PageSpeed Insights? — Хабр Q&A

CSS и JavaScript, блокирующие загрузку страницы в WordPress

1.

Перемещаем jQuery в футер сайта

2. Объединение CSS в WordPress

Миша

Как загружать CSS файлы асинхронно

Способы асинхронной загрузки CSS файлов

Что делает этот код

Можно ли этого добиться с использованием

А почему бы не использовать недействительный атрибут для

Как ускорить сайт в WordPress | REG.RU

Что такое скорость загрузки сайта

Зачем нужно ускорять сайты

Как узнать скорость загрузки сайта

Как повысить скорость сайта

1. Структура сайта → оптимизировать

2. HTTP-запросы → сократить количество

3. CSS и JS → минимизировать

4. Изображения → оптимизировать

5. Версия php → обновить

6. Кэширование → включить

7. Gzip-сжатие → настроить

8. Хостинг → увеличить тариф

Как ускорить загрузку сайта на WordPress

WordPress — оптимизация загрузки сайта

PageSpeed Ninja — Плагин для WordPress

Почему PageSpeed Ninja?

Перед установкой

Удаление

Обратная связь, сообщения об ошибках, логирование

Конфликтует ли этот плагин с Yoast или другими SEO плагинами?

руководство по отложенной загрузке изображений — Дизайн на vc.ru

CSS JS Manager, Async JavaScript, Defer Render Blocking CSS поддерживает WooCommerce — плагин WordPress

Управление критически важными css

Как отложить блокировку рендеринга CSS с помощью диспетчера CSS JS?

Как удалить файл CSS с целого веб-сайта или конкретной страницы?

Те же шаги применимы и к JS, просто добавьте ссылку JS и выберите JS в раскрывающемся списке.

Премиум-поддержка: мы отвечаем на все вопросы поддержки в течение 24 часов

Как отложить блокировку рендеринга CSS с помощью диспетчера CSS JS?

Как удалить файл CSS с целого веб-сайта?

Если вы хотите разрешить JS-файл только на нескольких определенных страницах и удалить со всех остальных

Поддерживает ли он WooCommerce

Я хочу удалить CSS, если запрос поступает с мобильного устройства

Я хочу асинхронизировать файл js для мобильного устройства

html — Как загрузить CSS асинхронно

html — Как лучше всего загружать CSS async?

Как устранить блокирующие отображение javascript и CSS в верхней части страницы в wordpress

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

Хотите посмотреть видео версию?

Что означает «Устранение ресурсов, блокирующих рендеринг»?

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

Являются ли изображения ресурсами, блокирующими рендеринг?

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

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

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

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

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

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

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

Сводка

Асинхронная и отложенная загрузка JavaScript в WordPress — async-javascript

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

Поддерживаемые браузеры:

Как использовать:

Предварительный просмотр:

Скачать плагин WordPress:

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

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

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

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

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

Устранение неполадок

Добавить комментарий Отменить ответ