Как ускорить сайт каталога или торговой площадки, созданный с помощью HivePress

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

В этом руководстве мы объясним, как резко повысить производительность вашего веб-сайта, настроив кэширование, оптимизировав стили и скрипты, а также оптимизировав медиаконтент. Мы будем использовать плагин LiteSpeed ​​Cache, комплексное решение для ускорения веб-сайтов с множеством инструментов и функций, которые сделают ваш веб-сайт невероятно быстрым.

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

Итак, начнем с установки LiteSpeed ​​Cache.

Установка кеша LiteSpeed

Прежде всего, вам необходимо установить плагин LiteSpeed ​​Cache. Вы можете легко сделать это прямо из панели управления WordPress, перейдя в раздел « Плагины» > «Добавить новый ». Найдите его через строку поиска и продолжите установку. Когда установка будет завершена, просто нажмите кнопку «Активировать», чтобы активировать плагин.

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

Оптимизация кеша

Чтобы настроить основные параметры кэша, перейдите на страницу LiteSpeed ​​Cache > Cache . На этой странице много разных разделов, но мы рассмотрим только самые важные настройки.

Настройки кэша

Здесь мы настоятельно рекомендуем отключить кэш для вошедших в систему пользователей и запросов REST API. Это необходимо для правильной работы плагина HivePress. После того, как вы включите или отключите какие-либо параметры, не забудьте сохранить изменения.

Кэш объектов

Далее давайте включим Object Cache . Перейдите в раздел « Объект » и проверьте, доступен ли кеш объектов на вашем сайте. Проверка соединения должна отображаться как «пройдено». Если это так, вы можете включить кэширование объектов, и это значительно улучшит производительность сайта за счет кэширования повторяющихся запросов к базе данных.

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

Кэш браузера

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

Оптимизация страницы

Ваш следующий шаг — перейти в раздел LiteSpeed ​​Cache > Оптимизация страницы , чтобы оптимизировать стили, скрипты и шрифты.

CSS-оптимизация

Начнем с раздела настроек CSS . Здесь мы рекомендуем включить настройки CSS Minify и CSS Combine .

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

Оптимизация шрифтов

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

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

JS-оптимизация

Теперь давайте перейдем в раздел « Настройки JS », чтобы оптимизировать файлы JavaScript. Здесь мы рекомендуем выполнить те же действия, что и для настроек CSS. Просто включите параметры JS Minify и JS Combine , чтобы файлы JS также были уменьшены и объединены в один файл.

Существует также опция « Отложенная загрузка JS », которая действительно может иметь значение. После того, как вы включите этот параметр, сценарии будут загружаться в фоновом режиме, пока браузер отображает макет страницы и стили. Скрипты часто «тяжелее», чем HTML, поэтому загрузка и выполнение скриптов, которые не нужны для начального рендеринга страницы, могут быть отложены и загружены позже. Это позволяет посетителям использовать веб-сайт практически сразу.

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

Медиа-оптимизация

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

В разделе « Кэш LiteSpeed» > «Оптимизация изображений» > «Настройки » вы можете преобразовать изображения своего веб-сайта в формат WebP, включив настройки « Создать версии WebP» и « Замена изображений WebP ».

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

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

Перейдите в раздел LiteSpeed ​​Cache > Оптимизация страницы > Настройки мультимедиа и включите параметр « Отложенная загрузка фреймов ».

Подведение итогов

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

Вот и все! Если вы создали свой каталог или веб-сайт торговой площадки с помощью HivePress (или любого другого решения на основе WordPress) , вы можете выполнить те же шаги, чтобы настроить кэширование, оптимизировать стили, сценарии и шрифты, а также мультимедийный контент, такой как изображения или встраивания. В результате вы получите высокий балл в Google PageSpeed ​​(тем самым повысив свой рейтинг SEO) и улучшите общее впечатление пользователей от вашего сайта.

Кроме того, не стесняйтесь проверить следующие статьи:

• Лучшие плагины каталога WordPress
• Популярные темы каталогов WordPress
• Ошибки при создании веб-сайта со списком WordPress