Настройте предварительную загрузку ключевых запросов вордпресс

Оптимизация сайта на WordPress для Google PageSpeed

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

Проверить, насколько быстр ваш сайт, можно с помощью сервиса Google PageSpeed Insights.

Хорошая скорость загрузки — если сайт находится в зеленой зоне.

Как улучшить показатели Google PageSpeed

Ошибка » Отложите загрузку скрытых изображений» ( Defer offscreen images)

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

Установите плагин Lazy Load Optimizer, который добавляет ленивую загрузку для изображений WordPress, а также для изображений товаров и категорий товаров WooCommerce.

Ошибка » Задайте правила эффективного использования кеша для статических объектов » ( Serve static assets with an efficient cache policy )

Часто возникает ошибка » Задайте правила эффективного использования кеша для статических объектов «.

Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):

Если у вас стоит Яндекс.Метрика, или Google Analytics — то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.

Ошибки — » Уменьшите размер кода CSS «, » Уменьшите размер кода JavaScript», «Сократите глубину вложенности критических запросов», » Устраните ресурсы, блокирующие отображение «

Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:

• Оптимизировать код HTML
• Оптимизировать код JavaScript
• Оптимизировать код CSS

Для исправления о шибки » Устраните ресурсы, блокирующие отображение » нужно поставить галочку в пункте Встраивать все CSS:

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

Ошибка «Сократите глубину вложенности критических запросов» может возникнуть, если на сайте используются шрифты Google fonts. Перейдите на вкладку «Дополнительно» данного плагина. Там нужно установить настройку для Гугл шрифтов — Combine and preload in head (fonts load late, but are not render-blocking).

Ошибка — » Настройте предварительную загрузку ключевых запросов» (Preload key requests)

В решении этой проблемы опять поможет Autoptimize. Во вкладке «Дополнительные» нужно найти пункт Preload specific request.

Сюда нужно вставить полный урл ресурса. Если их несколько, то вставляем несколько, разделяя запятой. Урл ресурса можно скопировать, кликнув правой кнопкой мыши по ссылке на ресурс:

Ошибка — » Настройте эффективную кодировку изображений «

Чтобы оптимизировать изображения, установите плагин WP Smush. Этот плагин оптимизирует все изображения, загруженные в Медиа-библиотеку WordPress.

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

Хороший сайт, на котором можно оптимизировать картинки онлайн — https://tinypng.com/

Ошибка — » Используйте современные форматы изображений » ( Serve images in next-gen formats)

Для устранения этой ошибки подойдет плагин WebP Converter for Media . Этот плагин создаст для всех изображений на сайте их аналоги в новом формате WebP. На браузерах, которые поддерживают этот формат, картинки будут грузиться в новом формате, в остальных браузерах будет загружаться старый формат png, jpg.

Ошибка » Сократите время ответа сервера (время до получения первого байта)»

Чаще всего с ней помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию — «Сжимать файлы кэша чтобы ускорить работу»:

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

Ошибка «Включите сжатие текста»

Добавьте в файл .htaccess:

Дополнительно

Cниппет, который добавит асинхронную загрузку для скриптов, подключенных через wp_enqueue_script():

Если нужна помощь в ускорении вашего сайта — мы оказываем услугу оптимизации сайтов на WordPress.

Вам помогла эта статья? Оцените!

Комментариев: 17

Здравствуйте. А я блин, от многого избавится не могу. Плагин Autoptimize не работает, как было куча скриптов, так и есть. Но вопрос в другом! Как мобильную версию оптимизировать? На десктопе 86% добился, а вот на мобильном 71% максимально. Может кто подскажет?

Плагин Autoptimize может не работать из-за неправильной конфигурации хостинга, или устаревшей версии PHP. Попробуйте поставить версию PHP 7.0

Не получается оптимизировать данными способами, может кто что подскажет?

Статья обновлена, возможно сейчас результат будет лучше.

Спасибо, теперь сервис PageSpeed Insights перестал ругаться красными воцклицательными знаками. Использовал подсказку по добавлению правил в .htaccess

а как для самописного сайта ускорить загрузку?

Сделать вручную то, что делают эти плагины — минифицировать css, js и html. Все скрипты объединить в 1 файл и подключать внизу страницы, либо используя атрибут async. Сжать все изображения на сайте. Интегрировать ленивый загрузчик для изображений, например lazysizes, ссылка на него есть в начале статьи.

Когда делаю шаблон (не использую готовые, там трудно добиться высоких показателей по pagespeed), обязательно включаю кеш в htaccess с указанием всех форматов, ужимаю все картинки через FileOptimizer, обязательно ставлю плагин Minit. Шрифты стараюсь подключать со своего сервера и в CSS прописываю им font-display: swap. Также просматриваю код и если что-то не устраивает в плане нагрузки удаляю (скрипты, стили картинки). Когда начинал заниматься созданием шаблонов под WordPress большая ошибка была в том, что подключал стили и скрипты прямо в шаблоне, например в header.php, а оказалось правильно через functions.php через функции wp_enqueue_style/wp_enqueue_script, начинающим стоит взять на заметку.

у меня на сайте тестов для врачей с 30 на мобильных до 61 поднялось. Так гугл пишет, что блокируют отображение файлы autoptimize.css , которые он комбинирует.

Возможно вы не включили в настройках «Встраивать все CSS»

Спасибо за полезную статью, многое использую у себя + еще w.tools, ускорение на лицо.

Спасибо автору за статью. Поднял загрузку страницы с 15 балов на мобилках и 31 на ПК до 70 и 90+. Рекомендую!

Это далеко не всё. Главные методы — это оптимизация картинок и кеширование. Не всем помогут эти варианты с асинхронной загрузкой, а тем более объединение стилей и скриптов не навредив сайту внешне.

Добрый день! Большое Вам спасибо, добрый человек! Статья отличная! Всё выполнила по Вашим рекомендациям. Загрузка страницы с 15 баллов на мобильных и 52 на ПК выросла до 85 и 98 соответственно. Удачи Вам во всех делах и крепкого здоровья!

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

помогло
мобильная: 49 до 71
для компьютеров: 80 до 95

Источник

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

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

Для примера установим чистый WordPress на сервере отечественного хостера. Время генерации одной страницы со старта без каких-либо плагинов достигает полсекунды. Полная загрузка страницы у пользователя из Европы занимает около 1 сек., в США (запад) — 2.2 сек., в Австралии — 2.8 сек. Цифры получены следуя этой инструкции и на основе данных загрузки сайта из разных уголков мира с помощью сервиса Webpagetest.

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

Кэширование на сервере

Слабым местом многих сайтов являются тяжеловесные запросы к базе данных MySQL. В WordPress они зачастую генерируются установленными плагинами.

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

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

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

Результатом работы упомянутых выше MySQL запросов и PHP скриптов является сгенирированный HTML код, который отдается пользователю в качестве веб-страницы. Если этот HTML временно (до внесения изменений в контент) сохранять на сервере и отдавать его пользователям без обращения к PHP и MySQL — время загрузки такой страницы будет наименьшим. По такому принципу работает большинство WordPress плагинов кэширования. Они сохраняют уже сгенерированную HTML страницу как файл и отдают ее за сотые доли секунды.

Среди кэш-плагинов по числу установок лидирует бесплатный WP Super Cache. После его установки, включаем кэширование и жмем «Обновить»:

Работающий плагин добавляет в конце HTML кода закэшированых страниц информацию о времени их создания:

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

Подключение CDN для WordPress

Помимо исполняемых на сервере PHP скриптов и MySQL запросов, движок WordPress содержит и статические файлы: картинки, стили, шрифты, яваскрипты. Скорость загрузки таких файлов зависит от их размера и того, насколько географически далеко от них находится пользователь.

Касаемо размеров файлов, — за этим всегда нужно следить. Не стоит ждать от картинки в несколько мегабайт быстрой загрузки на мобильном интернете.

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

Подключим CDN к своему сайту. Для этого зарегистрируемся на BunnyCDN и, указав лишь емейл, сразу получим на тест 1Тб бесплатного мирового трафика.

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

Создав зону, в конце выбираем «Wordpress» и следуем короткой инструкции по включению плагина кэширования:

Результат

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

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

Источник

13 плагинов WordPress для ускорения загрузки сайта: как ускорить сайт на WP

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

Поисковики любят быструю загрузку

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

Google в июле 2018 запустил алгоритм Google Speed Update, он понижает в выдаче сайты, которые загружаются очень долго. Особенно рискуют интернет-магазины, потому что обычно они функционально перегружены.

Многие владельцы сайтов и SEO-специалисты жаловались на значительную просадку позиций после обновления алгоритма. Сервисы мониторинга позиции не показывали каких-либо значительных изменений:

График изменений по десктопной и мобильной выдаче

Но сайты, которые действительно долго загружались, просели в выдаче. Интересно, что по анализу Барри Шварца, владельца портала Seroundtable, апдейт больше всего навредил сайтам о здоровье:

Результаты анализа Барри Шварца

Пострадали 42% официальных ресурсов медучреждений, частных сайтов о здоровье и фитнесе, ЗОЖ. Причина такого смещения результатов неизвестна, точнее, нет официального ответа, зато есть версии, о которых мы рассказывали в статье «Как продвигать сайты в медицинской тематике».

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

От чего зависит скорость загрузки сайта

Скорость загрузки сайта зависит от нескольких факторов, каждый из них можно ускорить по мере возможностей.

Серверные параметры, хостинг

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

Скорость ответа сервера, верстка, оптимизация CSS и JS влияет на время загрузки основной части сайта.

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

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

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

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

Почитать по теме:
«Как ускорить загрузку: оптимизируем код верхней части страницы»: асинхронная загрузка, jQuery, минификация и объединение кода, кэширование и другие способы.

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

Для этого в корневой директории нужно найти файл wp-config.php, в котором найти строку

И заменить ее на такой код:

Вес страницы сайта

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

Об этом в подробностях в статье «Как уменьшить вес сайта и ускорить загрузку страниц»: gzip, brotli, минификация и другие способы.

Редиректы

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

Редиректы с HTTP на HTTPS тоже могут тормозить процесс, в этом случае поможет технология HSTS (HTTP Strict Transport Security) — тогда браузер автоматически сделает внутренние редиректы, сразу сделает запрос на HTTPS и перенаправит пользователей на безопасное соединение. Для этого нужно подключить функцию HSTS в личном кабинете хостинга или прописать заголовок HTTP Strict Transport Security. Но советуем сначала протестировать функцию, чтобы убедиться, что все страницы доступны.

Плагины для ускорения загрузки сайта на WordPress

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

Optimize Database

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

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

Фрагмент работы с плагином

Совместим вплоть до 5.2.3 версии WordPress, нужна версия PHP 5.0 или выше.

WP-Optimize

Плагин для очистки базы данных, сжатия изображений и кэширования.

• удаление резервных копий, спам-комментариев, пингбэков, трекбэков;
• массовое сжатие изображений в формате PNG, JPG, GIF, BMP и TIF;
• кэширование: специфический кэш для устройств, предварительная загрузка кэша, расширенные правила исключения для файлов;
• gzip-сжатие HTML, JavaScript и CSS;
• настройка автоматических очисток по расписанию.

Ускорение с помощью плагина Пример интерфейса

Работает бесплатно, есть премиум-версия с дополнительными возможностями. Совместим с версиями WordPress от 3.8.

WP Fastest Cache

Плагин создает статические html-файлы с сайта на WordPress и сохраняет их, то есть кэширует страницы.

• кэширование страниц в браузере для более быстрой загрузки у пользователей, посещавших сайт ранее;
• gzip-сжатие;
• оптимизация кода;
• уменьшение размера файлов css.

Данные работы плагина

Плагин совместим с HTTPS, поддерживает SSL, CDN, Cloudflare. Не работает с режимом Multisite. Совместим с версиями WordPress от 3.3

PageSpeed Ninja

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

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

PageSpeed Ninja предлагает действия по ускорению загрузки

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

Совместим с версиями WordPress от 4.0.1 и выше.

PageSpeed Module

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

• очистка кэша от модулей;
• включение режим разработчика для обхода кэширования PageSpeed.

Окно настройки плагина

Для работы нужно, чтобы был установлен веб-сервер Apache или Nginx. Плагин совместим с версиями WordPress от 4.4.

Jetpack

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

• отложенная загрузка изображений для ускорения работы на мобильных устройствах;
• темы для оформления;
• поддержка статистики и аналитики;
• автоматический постинг в соцсети с планированием публикаций;
• статистика и аналитика сайта
• Elasticsearch — поиск похожего контента на сайтах;
• фильтрация спама;
• ежедневное резервирование;
• поддержка системы оплаты;
• двухфакторная аутентификация для входа на сайт;
• и другие возможности для безопасной работы на сайте и маркетинга.

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

Загрузка изображений на сайт через плагин

Совместим с версиями WordPress от 5.1, версия PHP от 5.6.

All in One SEO Pack

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

• поддержка Google AMP для ускорения загрузки мобильных страниц;
• уведомление Google об изменениях на сайте;
• автоматическая оптимизация заголовков и генерация метатегов;
• поддержка Google Analytics;
• встроенный API, который позволяет дорабатывать плагины под себя;
• и другая функциональность для SEO.

SEO-меню плагина с модулями

Совместимость с PHP от 5.2.4 версии. Совместим с WordPress от 4.7 версии.

WP Total cache

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

• тестирование настроек сервера, чтобы подобрать настройки плагина для комфортной работы;
• импорт настроек, если работаете с несколькими проектами;
• кэширование страниц и объектов;
• сжатие CSS и JavaScript;
• отслеживание работы плагина.

Интерфейс плагина

Нужна версия WordPress 3.2 или выше.

WP Super Cache

Плагин для кэширования HTML-страниц. Не оптимизирует JS/CSS, но с этим справляется следующий плагин из подборки.

• простое включение и отключение кэширования;
• настройка сроков и страниц для кэширования;
• настройка кэширования для мобильной версии;
• поддержка CDN;
• сбор статистики по страницам.

Варианты настройки кэширования

Совместим с версиями WordPress от 3.1, минимальное требование — версия PHP 5.2.4 или выше.

Autoptimize

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

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

Настройки плагина

Совместим с версиями WordPress от 4.0 и выше, версиями PHP от 5.3 и выше.

AMP for WordPress

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

• преобразование страниц в вид AMP, тогда к URL каждой страницы добавится /amp/;
• отображение сайта как «Native AMP», тогда у каждого адреса будет только одна AMP-версия URL;
• обновление кэша по расписанию.

Пример страницы с шаблоном AMP

Поддерживает CDN. Совместим с версиями WordPress от 4.9, PHP от 5.4.

Yandex.News Feed by Teplitsa

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

• трансляция контента для Яндекс.Новостей;
• поддержка режима Турбо Страниц.
• настройка категорий, которые попадут в трансляцию;
• и другие настройки RSS-ленты для Яндекс.Новостей.

Настройка Турбо-страниц

Совместим с версиями WordPress от 3.9.

Smush Image Compression and Optimization

Плагин уменьшает и сжимает изображения для быстрой загрузки страницы.

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

Автоматическое изменение размера

Совместим с версиями WordPress от 4.6, PHP от 5.3 и выше.

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

Источник