Последнее обновление: 20 октября 2022 г.
Время выполнения: 1-2 часа

Цель: Оптимизировать текущую настройку WordPress и контент для более быстрой загрузки страницы.

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

Предварительные условия или требования:
Этот процесс применим только к WordPress.org сайтам.

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

Где это делается: на вашей панели администратора WordPress, на Pingdom.com , в Google Chrome.

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

Кто это делает: лицо, ответственное за управление веб-сайтом, или веб-разработчик.

1. Перед запуском этой инструкции создайте резервную копию своего веб-сайта.

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

Использование внешнего инструмента:

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

1. Использование Pingdom:

• В вашем браузере перейдите к https://tools.pingdom.com/;
• Вставьте страницу, которую вы хотели бы протестировать, в поле URL → Выберите местоположение, которое находится ближе к вашей целевой аудитории → Нажмите “Start Test” (“Начать тест”);

Примечание: Если вы не знаете, какие страницы тестировать, они должны быть самыми важными страницами в вашей воронке. (Например: Домашняя страница, страницы продаж, оформление заказа и т.д.)

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

• Оценка производительности: ваш показатель Google PageSpeed. Чем выше, тем лучше.
• Размер страницы: общий размер вашей страницы, объем данных, которые пользователь должен был бы загрузить, если бы он запросил вашу страницу. Чем ниже, тем лучше.
• Время загрузки: время (в секундах), необходимое для загрузки вашей страницы в отличных условиях работы сети. Имейте в виду, что в зависимости от того, как настроена ваша страница, этот результат может показаться немного ниже, чем он есть на самом деле. Чем ниже, тем лучше.

Настройка среды

Проверка производительности вашего веб-сайта

Сохраните URL-адрес вашего теста, вы будете использовать его позже. Вы можете найти его на панели навигации вашего браузера сверху.

Повторите процедуру для каждой из ваших основных страниц.

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

1. Использование встроенной функции аудита производительности Chrome:

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

• В Google Chrome, используя режим инкогнито, откройте страницу, которую вы хотели бы протестировать.
• Примечание: Вы можете открыть режим инкогнито, нажав Ctrl + Shift + N в Windows или ⌘ + Shift + n на Mac.
• Щелкните правой кнопкой мыши в любом месте страницы и выберите “Inspect” (“Проверить”).
• Нажмите “Audits” (”Аудиты").

Примечание 2: Если вы не видите некоторые функции, показанные в этой главе, убедитесь, что вы используете самую последнюю версию Google Chrome.

• Если вы хотите проверить, как работает ваш веб-сайт на определенном устройстве, категории или подключении, вы можете выбрать его в выпадающих списках:

Примечание 2: Если вы не уверены, выберите:
1. Emulation: Desktop (Эмуляция: Рабочий стол)
2. No throttling (Отсутствие регулирования)
3. Clear storage (Очистите хранилище)

• Нажмите “Perform an audit...” (“Выполнить аудит...”)

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

1. Откройте страницу результатов Pingdom, вернувшись к URL-адресу, который вы сохранили в первой главе этого руководства.

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

• Load Time (Время загрузки): > 3s
• Page Size (Размер страницы): > 3MB
• Performance Grade (Класс производительности): < C

3. Сравните свою производительность с показателями ваших конкурентов и некоторых крупных веб-сайтов:

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

0. Откройте страницу результатов pingdom, вернувшись к URL-адресу, который вы сохранили в первой главе этого руководства.

Поиск вашего самого большого контента:

1. Прокрутите вниз до “Content size by content type” (“Размер содержимого по типу содержимого”) и найдите запись, которая может быть ответственна за большую долю размера вашей страницы. Как правило, это будут изображения или видео.

2. Теперь прокрутите отчет вниз до раздела “File Requests” (“Запросы к файлам”) и отсортируйте по “File Size” (“Размеру файла”), вы сможете увидеть вверху файлы, которые больше всего влияют на размер страницы.

3. Спросите себя и свою команду:

• Обязательно ли нам иметь этот файл на этой странице?
• Оптимизировали ли мы этот файл наилучшим образом, насколько это было возможно?

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

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

Поиск инструментов и скриптов, которые вы, возможно, больше не используете:

1. Прокрутите отчет вниз до раздела “File Requests” (“Запросы к файлам”) и проанализируйте имена файлов и доменов и посмотрите, сможете ли вы распознать некоторые инструменты или скрипты, которые вы, возможно, больше не используете.

Пример: Если вы обнаружите запрос на http://load.sumo.com вы знаете, что именно ваш веб-сайт загружает этот инструмент. Если вы больше не используете этот инструмент, вам следует удалить его как по соображениям производительности, так и по соображениям безопасности.

Оценка производительности вашего веб-сайта

Дальнейший аудит отчетов о производительности вашего веб-сайта

2. Создайте список из них и попросите своего разработчика удалить их с вашего веб-сайта или удалите их самостоятельно. Если вы используете Google Tag Manager для развертывания скриптов вашего инструмента, эту задачу обычно выполнить намного проще.

Поиск кодов неверного ответа:

1. Прокрутите отчет вниз до раздела “Response codes” (“Коды ответов”) и найдите коды ответов, которые не являются “200 OK”, если все ваши коды ответов “200 OK”, вы можете перейти к следующей главе этой инструкции.

2. Если у вас есть другие коды ответов, найдите отдельные запросы, прокрутив вниз до раздела “File Requests” (“Запросы файлов”) и высмотрев выделенные файлы или значок восклицательного знака слева.

3. Составьте список этих запросов. И спросите своего разработчика:

1. 301/302/307 Redirects (Перенаправления 301/302/307): оцените, возможно ли установить ссылку на конечный пункт назначения и избежать перенаправления.

2. 404 Not Found (404 Не найдено): Этот ресурс не загружается, скорее всего, потому, что файл больше не существует или произошла опечатка. Если ресурс не нужен, этот запрос следует удалить со страницы.

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

1. В вашем браузере войдите в свою панель администратора WordPress.

2. На боковой панели нажмите “Settings” (“Настройки”) → “Reading” (“Чтение”).

3. Найдите поле “Blog pages show at most” (“Страницы блога отображаются максимум”) и отредактируйте его значение. Чем меньше записей в блоге вы показываете на главной странице, тем быстрее загружается ваша страница, но вашим читателям также придется использовать разбивку на страницы или ссылки на главную страницу, чтобы найти ваши записи в блоге. Принимая это во внимание, снизьте значение до того, с которым вы чувствуете себя комфортно.

Уменьшите размер вашей домашней страницы, предварительно показав меньше записей в блоге

3. Найдите поле “Blog pages show at most” (“Страницы блога отображаются максимум”) и отредактируйте его значение. Чем меньше записей в блоге вы показываете на главной странице, тем быстрее загружается ваша страница, но вашим читателям также придется использовать разбивку на страницы или ссылки на главную страницу, чтобы найти ваши записи в блоге. Принимая это во внимание, снизьте значение до того, с которым вы чувствуете себя комфортно.

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

1. В вашем браузере войдите в свою панель администратора WordPress.
2. На боковой панели нажмите “Plugins” (“Плагины”).

3. Отфильтруйте по “Active” (“Активному”), нажав на ссылку вверху:

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

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

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

5. После того, как вы выбрали все плагины, которые вы больше не используете, перейдите наверх, нажмите на выпадающий список “Bulk Actions” (“Массовые действия”) → Выберите “Deactivate” (“Деактивировать”) → Нажмите “Apply” (“Применить”).

6. После того, как вы деактивировали плагины, которые вы больше не используете, прокрутите вниз список “Active” (“Активных”) и найдите устаревшие плагины. Они будут отмечены бежевым фоном с предложением обновить до самой последней версии. Нажмите “Update Now” (“Обновить сейчас”).

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

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

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

Аудит ваших плагинов WordPress

Примечание: Хотя установка плагина для оптимизации производительности, такого как W3 Total Cache, может оказать очень значительное влияние на производительность вашего веб-сайта, это также может привести к сбоям в работе вашего веб-сайта. Прежде чем перейти к этому шагу, убедитесь:

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

Примечание 2: Убедитесь, что вы уже не используете какие-либо плагины для кэширования, так как это может противоречить этой инструкции. Чтобы сделать это, вернитесь к разделу “Auditing your WordPress Plugins” (“Аудит ваших плагинов WordPress”) этого руководства и убедитесь, что вы не нашли ни одного плагина, в котором упоминается какая-либо функция кэша.

1. В вашем браузере войдите в свою панель администратора WordPress.
2. На боковой панели нажмите “Plugins” (“Плагины”) → “Add New” (“Добавить новые”).

3. В строке поиска вверху введите “W3 Total Cache” (“Общий кэш W3”).

4. В строке поиска вверху введите “W3 Total Cache” (“W3 Total Cache”) → Нажмите “Install Now” (“Установить сейчас”) → “Activate” (“Активировать”).

5. На боковой панели нажмите “Performance” (“Производительность”) → “Dashboard” (“Панель мониторинга”).

6. Нажмите “Compatibility check” (“Проверка совместимости”) сверху:

7. В списке найдите несовместимость настроек вашего сервера с “enhanced page and browser cache” (“улучшенной страницей и кешем браузера”):

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

8. На боковой панели нажмите “General Settings” (“Общие настройки”).

Установите плагин WordPress W3 Total Cache Plugin

9. Выберите следующие настройки:

• Page Cache (Кэш страниц): Enable (Включить)
• Page Cache Method (Метод кэширования страниц): Disk: Enhanced (Улучшен).

Примечание: Если на предыдущем шаге вы обнаружили, что настройки вашего сервера несовместимы с опцией “Enhanced” (“Расширенный”) и ваш текущий провайдер веб-хостинга не может предложить вам решение, выберите “Disk: Basic” (“Диск: Базовый”). Также обратите внимание, что существует небольшая вероятность того, что предупреждение инструмента “compatibility check” (“проверка совместимости”) W3 Total Cache является ложным флагом, и ваш сервер действительно поддерживает расширенный режим.

1. Уменьшить: Включить → “I understand the risks” (“Я понимаю риски”)

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

2. Database Cache: Enable (Кэш базы данных: Включить)

10. Нажмите “Save Settings and Purge Caches” (“Сохранить настройки и очистить кеши”).

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

11. Откройте свой веб-сайт, перейдите по основным страницам и убедитесь, что все по-прежнему функционирует.

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

Примечание: Поскольку теперь вы показываете пользователям кэшированную версию своего веб-сайта каждый раз, когда вносите изменения на свой веб-сайт (например, редактируете страницу), вам захочется очистить кэш этой страницы, чтобы ваш веб-сайт обновлял контент, который видят ваши пользователи. Вы можете сделать это, либо наведя курсор мыши на значок “Performance” (“Производительность”) в заголовке администратора WordPress и нажав “Purge All Caches” (“Очистить все кеши”). Или очистите только определенные кэши (более эффективно), нажав кнопку “Purge from cache” (“Очистить от кэша”) рядом с вашими сообщениями и страницами WordPress.

1. В вашем браузере войдите в свою панель администратора WordPress.
2. На боковой панели нажмите “Plugins” (“Плагины”) → “Add New” (“Добавить новые”).

3. В строке поиска вверху введите “ShortPixel”.

4. Нажмите “Install Now” (“Установить сейчас”) → “Activate” (“Активировать”).

5. На боковой панели наведите курсор “Settings” (“Настройки”) → Нажмите “ShortPixel”.

6. Вам будет предложено добавить ключ API или запросить его. Если у вас его еще нет, введите свой адрес электронной почты, установите флажок, чтобы принять TOS и PP, и нажмите “Request Key" (“Запросить ключ”).

7. Вы должны увидеть сообщение “Your API key is valid” (“Ваш ключ API действителен”) и быть перенаправлены на страницу настроек плагина.

Примечание: Вы можете протестировать три различные настройки в прямом эфире на веб-сайте ShortPixel здесь.

Примечание 2: Если вы не уверены, выберите “Lossy” (“С потерями”). Это обеспечит вам наилучшие результаты, при этом ваши изображения будут выглядеть хорошо.

9. Нажмите “Save and Go to Bulk Process” (“Сохранить и перейти к массовому процессу”).

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

10. Нажмите “Start Optimizing” (“Начать оптимизацию”).

Примечание: Бесплатный тарифный план позволяет пользователям оптимизировать до 100 изображений в месяц. Если у вас уже есть более 100 изображений, когда вы начинаете, вы можете приобрести “One-Time” (“одноразовый”) план, который соответствует вашим потребностям, впоследствии, если вы не планируете добавлять более 100 изображений в месяц, бесплатного плана будет достаточно.

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

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

Установка плагина Shortpixel Image optimizer для оптимизации изображений

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

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

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

Примечание: Убедитесь, что вы выбрали точно такие же расположения серверов при выполнении новых тестов.

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

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

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

Повторно протестируйте свои страницы: