Инструкции и советы по настройке плагина WP Rocket , который может заметно ускорить ваш сайт WordPress.
Что такое кеш
Кэш — это слово, которое в последнее время так часто упоминается, что даже моя бабушка потихоньку говорит о нем. Кэш — это имя для временного или кеш компьютера и сервера.
Вместо перезагрузки всей веб-страницы (так эффективно загружаемой с сервера) некоторые части, которые не изменяются, загружаются из этой памяти.
Таким образом, происходит уменьшение потока данных между клиентом и сервером, что связано с меньшим объемом передаваемых данных и, в частности, большей скоростью загрузки страниц.
Кэш на стороне сервера
Каждый средний сервер имеет свою собственную систему кэширования. Сервер обычно запоминает сохраненные изображения, файлы CSS и JS, общие для всей страницы.
Вместо того, чтобы всегда отправлять сохраненный логотип клиенту, он отправляет только информацию о том, что клиент уже имеет сохраненный логотип и, следовательно, может его использовать.
Это относится к большинству изображений на странице. Возможно, вы когда-нибудь сталкивались с проблемой того, что старое изображение по-прежнему отображается даже после замены его новым. Так что кэш виноват.
При разработке сайта, конечно же, нужно отключать кеш, потому что нужно сразу видеть внесенные изменения. Это можно сделать на стороне сервера, в панели управления вашего хостинга.
Кэш на стороне страницы
Мы также можем установить кеш на стороне WordPress. Хоть это и называется кэшем, но на самом деле это только оптимизация используемых кодов и других файлов.
Мы можем использовать несколько плагинов для этой цели. Некоторые из них бесплатны и в основном охватывают только базовый функционал. У многих есть платные версии или платные с нуля.
В этой статье мы сосредоточимся на плагине WP Rocket, который платный, но я точно могу с чистой совестью причислить его к лучшим плагинам для оптимизации скорости.
Как получить WP Rocket? какова его цена?
Мы получаем WP Rocket исключительно с их официального сайта . По цене у нас есть три плана на выбор — SINGLE за $49 в год, мы будем использовать его для одного сайта. Мы будем использовать план PLUS за 99 долларов для трех сайтов и план INFINITE за 249 долларов в год для бесконечного числа веб-сайтов (отлично подходит для разработчиков, которые создают много сайтов).
После заполнения платежной информации и оплаты мы получим для скачивания ZIP-файл, содержащий наш плагин и лицензию. Заливаем плагин на наш сайт через wp-admin (Плагины->добавить новый->загрузить плагин). После успешной установки не забудьте активировать плагин.
Инструкция по настройке плагина WP Rocket
На практике я уже несколько раз сталкивался с тем, что человек установил плагин кеша и не заметил никаких изменений. Конечно. ИМЕТЬ кеш-плагин — это хорошо, но это все равно, что иметь водительские права (но не вождение). Чтобы повысить производительность и оптимизировать скорость, нам нужно будет настроить WP Rocket.
Доступ к настройкам WP Rocket можно получить в wp-admin через основную левую колонку в разделе « Настройки» —> ВП Ракета . Мы нажимаем. Нам покажут доску объявлений и много разных, на первый взгляд страшных, вариантов. Давайте пройдемся по ним один за другим.
Приборная доска
Доска объявлений. Здесь отображается основная информация о вашей учетной записи, лицензиях и т. д. У нас есть возможность включить «Rocket Analytics», что означает, что некоторые данные будут отправлены в штаб-квартиру WP Rocket. Это может помочь разработчикам плагинов.
Кэш
Основные настройки кэша.
Мы можем включить/выключить мобильное кэширование , я рекомендую оставить его включенным. Мы также можем разделить файлы кеша отдельно для больших ПК и отдельно для мобильных устройств. Я лично никогда этого не делаю, так как не вижу смысла.
Включить кеширование для зарегистрированных пользователей WordPress включает кеширование для вошедших пользователей. Не требуется для более простых и презентационных страниц, но если у вас есть страница, на которой пользователи входят в систему (например, интернет-магазин), эта функция может быть полезна. Как правило, вошедший в систему пользователь не использует кеш (предполагается, что вошедший в систему пользователь является администратором веб-сайта, который должен видеть страницу без кеша, чтобы иметь возможность сразу проверить изменения). Если вы установите этот флажок, кеш также будет использоваться вошедшими в систему пользователями.
Cache Lifespan — здесь мы задаем период времени, по истечении которого кеш должен очищаться автоматически. После нажатия на «Минуты» достаточно выбрать час и день. Я всегда оставляю значение по умолчанию, но, конечно, решать вам. Таким образом, если вы когда-нибудь внесете изменение, оно не сразу начнет отображаться, вам придется «сбрасывать» кеш вручную, то есть сбрасывать его. Если вы забудете, он автоматически сбрасывается по истечении указанного здесь времени.
Кэш можно очистить вручную через Админ панель (черная полоска вверху), найдите в ней пункт WP Rocket и нажмите Очистить кеш, чтобы сбросить весь кеш. Это начнет показывать изменения везде, даже незарегистрированным пользователям.
Оптимизация файлов
Пожалуй, самая интересная часть. Здесь мы устанавливаем, как WP Rocket должен обрабатывать файлы, составляющие веб-сайт.
Базовые настройки
Сократить HTML — минимизирует исходный HTML-код страницы, удаляя разрывы строк и ненужные пробелы. Малоэффективно, но тут практически ничего не сломается. Я всегда его включаю.
Оптимизируйте шрифты Google — обязательно оставьте это включенным, это улучшит загрузку шрифтов Google, которые вы почти наверняка используете.
Примечание. В более новых версиях WP Rocket основные настройки больше недоступны (уже неактуальны).
CSS-файлы
CSS это язык, на котором, говоря простым языком, задается внешний вид страницы. В идеальной вселенной каждая страница содержит один файл .css, в котором настроены все визуальные элементы. Но это, конечно, не так в WordPress. Поскольку WordPress является сложной платформой и состоит из тем и плагинов, почти каждый плагин имеет свои собственные файлы CSS (и редко только один). В результате вы загружаете несколько десятков файлов CSS каждый раз, когда загружается страница.
Минимизировать файлы CSS — минимизирует файлы .css, удаляя отступы и пробелы. Аналогично минификации HTML. Поскольку файлов CSS больше, этот параметр почти обязателен.
Объединить файлы CSS — этот параметр будет выполнять все файлы .css, которые использует страница, и создавать один большой файл (только один). Итак, давайте приблизимся к состоянию идеальной вселенной — вы загружаете только один файл .css, хоть и большего размера. Обязательно необходимо включить эту опцию.
Оптимизировать доставку CSS — я также включаю этот параметр. Это приведет к тому, что CSS будет загружаться «асинхронно», то есть независимо от остального содержимого веб-страницы.
Конечно, сделать это не так просто, установка комбинации файлов CSS может вызвать визуальные ошибки на странице (так называемые баги). В этом случае необходимо выяснить, что вызывает данную проблему, и включить конкретный файл .css в «Исключенные файлы CSS».
Файлы Javascript
Как и в случае с CSS, мы также можем оптимизировать файлы Javascript.
Minify и Combine ведут себя так же, как CSS
Удалить jQuery Migrate — jQuery Migrate — это вспомогательная функция jQuery, которая предупреждает вас о несовместимости между версиями jQuery и сторонними плагинами или темами. Начиная с WordPress 5.5 он больше не используется, поэтому его можно отключить.
Отложенная загрузка JavaScript — в основном будет делать то же самое, что и оптимизация доставки CSS — javascript будет загружаться независимо от остальных файлов на странице.
Примечание. Если вы используете протокол http2, нет необходимости объединять файлы CSS или JS.
СМИ
В этом разделе мы настроим изображения, видео и другой мультимедийный контент.
Ленивая загрузка
Ленивая загрузка — это функция, которая замедляет ненужную загрузку изображений, которые сразу не видны на странице. Это приведет к значительному увеличению скорости, так как изображения начнут загружаться только тогда, когда вы приблизитесь к их местоположению. Я захожу на www.wp.sk и в самом низу в футере есть логотип wp.sk, который на самом деле является картинкой.
Ленивая загрузка приведет к загрузке страницы без этого изображения. Только когда мы приближаемся к нижнему колонтитулу, поворачивая колесо мыши, изображение загружается в фоновом режиме и отображается. До тех пор в этом нет необходимости. Без ленивой загрузки вся страница загружается в самом начале.
Включить для изображений — включает ленивую загрузку изображений.
Включить для фреймов/видео — включает ленивую загрузку для видео и фреймов. Iframe часто используется, например. в случае канала Facebook или при вставке видео YouTube или контента с другого сайта.
Заменить iframe YouTube на изображение для предварительного просмотра — заменяет незагруженное видео изображением для предварительного просмотра (например, если мы быстро прокручиваем до места, где должно быть видео, и оно не успело загрузиться в фоновом режиме).
эмодзи
Смайлики — довольно бесполезная часть WordPress, но в некоторых блогах они могут найти свое применение. Собственно, это смайлики (смайлики), которые WordPress автоматически преобразует в графическую форму. Если вам это не нужно, вы можете легко отключить их.
Встраивает
Отключить встраивание WordPress — не позволяет другим «вытягивать» часть вашего сайта на внешние сайты. Я рекомендую оставить его включенным.
WebP-совместимость
Устанавливает кэширование изображений WebP. WebP — это относительно новый формат изображений, предназначенный в первую очередь для отображения в Интернете. Изображение меньше по размеру, но по качеству сравнимо с jpg. Каждый jpg и png можно преобразовать в WebP через какой-нибудь конвертер и загрузить на страницу. Однако, если вы не используете WebP, нет необходимости включать этот параметр.
Предварительная загрузка
Как я упоминал выше, WP Rocket работает в стиле создания пользовательских файлов (в основном .css и .js), которые затем используются в реальной работе веб-сайта вместо оригинальных. Предварительная загрузка — это функция, запускающая создание этого файла. То же самое касается повторного создания уже созданных файлов, если на странице есть изменения (например, добавление новой статьи и т. д.).
Здесь я рекомендую оставить включенными «Активировать предварительную загрузку», а также «Активировать предварительную загрузку кеша на основе карты сайта», «Карта сайта Yoast SEO XML» (если вы используете плагин Yoast SEO), а также «Включить предварительную загрузку ссылок». Этого достаточно для 99% сайтов.
Расширенные правила
Здесь мы установим расширенные правила для WP Rocket. Например, мы можем указать здесь подстраницы, файлы и т.д. который никогда не следует кэшировать. Мы можем установить исключение при кэшировании файлов cookie или в зависимости от используемого браузера.
В WP Rocket можно использовать так называемый подстановочные знаки, то есть подстановочный знак звездочки *. Если нам нужно, например. убрать из кеширования весь плагин, допустим Contact form 7, нонсенс перечислять друг под другом 10 .css файлов, которые находятся в папке contact-form-7. Вместо этого мы будем использовать подстановочный знак, что-то вроде этого:
Wp-content/plugins/contact-form-7/* гарантирует, что вся папка (и, следовательно, весь плагин) останется некэшированной.
База данных
В этом разделе мы можем в некоторых случаях значительно ускорить работу сайта, но это берет свое. Здесь мы можем выполнить так называемый очистка базы данных от, казалось бы, ненужных данных. WP Rocket рекомендует сделать резервную копию базы данных перед выполнением таких операций с базой данных.
Здесь мы можем удалять ревизии, автоматические черновики, посты из корзины, неутвержденные комментарии, переходные процессы, оптимизировать таблицы и ставить автоматическую очистку.
При создании каждой подстраницы или статьи в WordPress сохраняется столько ревизий, сколько раз мы нажимаем кнопку ОБНОВИТЬ. Для больших сайтов, которые в основном содержат статьи, это может быть довольно большой проблемой, учитывая, что ревизий может быть несколько миллионов. Удалив эти ревизии, мы значительно облегчим жизнь базе, но потеряем возможность вернуться к предыдущим версиям статьи или подстраницы.
CDN
CDN означает сеть доставки контента. Вы используете его и можете даже не знать об этом. На уровне кода веб-страницы существуют различные библиотеки, которые обычно используются для создания веб-страницы.
Типичным примером могут быть шрифты jQuery или Google. Преимущество в том, что посетитель вашего сайта, вероятно, уже скачал jQuery с другой страницы на своем ПК, поэтому его браузеру не нужно снова извлекать файл jQuery с сервера, а из его кеша при рендеринге страницы.
Это повлияет на скорость работы сайта. Однако на самом деле это всего лишь несколько килобайтных файлов, которые не окажут сильного влияния на скорость, если речь идет о классическом веб-сайте.
Стук сердца
Heartbeat — это встроенная функция WordPress. Это какой-то регулярный «импульс», на основе которого с определенной периодичностью (раз в минуту) на сервер отправляются ajax-запросы.
Используется для уведомлений, которые отображаются в среде администратора, для автоматического сохранения статей и подстраниц, для блокировки контента при редактировании другим пользователем (выскакивает пресловутая таблица «Пользователь #имя редактирует эту статью»).
У меня лично никогда не было с этим проблем, и я никогда с этим не сталкивался. Теоретически здесь можно отключить Heartbeat, но я уж точно не рекомендую, так как он мешает встроенному функционалу WordPress, не говоря уже об используемых плагинах, которые могут прийти в негодность. Поэтому ограничение этого параметра актуально только для некоторых слабых плагинов.
Дополнения
Возможность установить другие плагины, которые работают с WP Rocket и обеспечивают еще большую скорость.
Оптимизация изображения
Вы должны думать об оптимизации изображения уже при создании веб-сайта, или при загрузке контента. Приличия диктуют не размещать на странице изображение размером более 300кБ. Размер FullHD (т.е. 1920×1080) вполне достаточен для большинства сайтов. Категорически не рекомендую загружать в сеть гигантские зеркальные изображения (например, 6000×4000).
Хотя WordPress по-прежнему обрезает их до размера 4K, размер данных изображения важнее, чем размеры. На самом деле есть только несколько исключений, когда необходимо использовать большой образ данных.
Однако для таких изображений мы всегда используем их миниатюру, а полное изображение — только при нажатии на него (например, при открытии в лайтбоксе). В любом случае, WP Rocket не включает опцию оптимизации изображений, но очень хорошо работает с плагином Imagify .
Еще один известный плагин для оптимизации изображений — EWWWW Image Optimizer (рекомендую удалить его после использования).
Инструменты
Инструменты плагина. Импорт, экспорт, возврат к старой версии. Вещи, которые мы знаем.
Учебники
И, наконец, в разделе Tutorials плагина WP Rocket вы можете найти видеоуроки для использования на английском языке.
Последний совет: ознакомьтесь с этим руководством о том, как ускорить работу вашего сайта WordPress .
Was this article helpful for you? Support me by sharing, please. 👍
