Сегодня я расскажу как правильно ускорить загрузку сайта на WordPress. Это статья отлично подойдет для новичков. Никаких специальных знаний не потребуется.

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

Я покажу два равнозначных варианта технической оптимизации сайта – бесплатный и платный. Расскажу про достоинства и недостатки каждого метода и помогу выбрать.

Ну а сейчас заваривай себе побольше чаю ☕, запасайся печеньками и усаживайся поудобнее. Мы начинаем…

Содержание

Шаг #1. Оцениваем текущую скорость загрузки

Перед тем, как начинать нашу магию, нужно зафиксировать текущие показатели сайта. Для этого переходим в Google PageSpeed Insights, вставляем ссылку на любую страницу нашего сайта и нажимаем «Анализировать». Гугл загрузит нашу страницу, проанализирует и выдаст результат.

Вот так выглядит стандартный отчет Google PageSpeed:

Google отдельно оценивает загрузку страницы на мобильных устройствах (1) и компьютерах (2). Внизу – ключевые показатели (3) из которых складывается общая оценка (4).

Ключевые показатели по которым Google оценивает твой сайт называются Core Web Vitals. Подробнее про них ты сможешь прочитать в отдельной статье.

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

В конце отчета ты можешь найти рекомендации по оптимизации, которые Google считает важными. На них пока не смотрим. К ним мы вернемся посже.

Скорость загрузки можно также проверить локально на своем компьютере с помощью инструмента litehouse, который встроен в Chrome.

Для этого нажимаем ctr+shift+I или Меню –> Дополнительные инструменты –> Инструменты разработчика. Внизу откроется панелька с инструментами разработчика.

Переходим на вкладку litehouse выбираем мобильную или десктопную версию, ставим галочку Perfomance и нажимаем Generate Report.

Отчет лайтхаус выглядит примерно также. Но цифры и оценка может слегка отличаться от тех, которые показал Google PageSpeed.

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

Шаг #2. Чек-лист правильной оптимизации сайта

Вот мой стандартный чек-лист технической оптимизации сайта

  1. Кэширование на сервере и в браузере
  2. Конвертация картинок в webp
  3. Ленивая загрузка картинок и айфреймов
  4. Создание критических стилей для каждой страницы в отдельности
  5. Объединение минификация и асинхронная загрузка стилей
  6. Объединение минификация и асинхронная загрузка скриптов
  7. Асинхронная загрузка шрифтов

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

Дальше будет немного теории, чтобы у тебя сложилось общее понимание чем мы будем заниматься. Но если ты хочешь поскорее перейти к практике, можешь перепрыгнуть этот раздел и сразу перейти к Шагу #3. Выбор кэширующего плагина.

Кэширование на сервере и в браузере

На какие метрики влияет: TTB (time to firs bite)

Кэширование – это один из самых эффективных способов оптимизировать скорость загрузки.

Упрощенная схема кэширования выглядит вот так:

Темно-синие стрелки – это стандартная схема работы сайта. Пользователь делает запрос на сервер. На сервере отрабатывает php-скрипт, который делает SQL-запрос к базе данных, в которой хранится текст страницы и вся сопутствующая информация. После того как сервер получает ответ от базы данных, он собирает html-страницу, которую отправляет пользователю.

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

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

Конвертация картинок в webp

На какие метрики влияет: Speed Index

Теперь переходим к картинкам. Для примера возьмем среднестатистическую неоптимизированную страницу и проверим ее через https://gtmetrix.com/. В разделе Page Details мы можем посмотреть из чего она состоит.

Все картинки на странице весят больше мегабайта (!), что составляет 33.8% от общего размера страницы. Что с этим можно поделать? Первое и самое необходимое – пережать все картинки из jpg и png в современный формат webp.

Например, если конвертировать в webp все картинки из примера выше, то их суммарный вес будет всего 300 Кб вместо изначальных 1.15 МБ. Это всего лишь 25% от первоначального объема.

Ленивая загрузка картинок и айфреймов

На какие метрики влияет: Speed Index

Но это еще не все. Загрузка каждой картинки – это одно обращение к серверу. Если мы еще раз вернемся к примеру выше, мы увидим, что для загрузки всех картинок браузеру потребовалось сделать целых 89 обращений к серверу. В процентном соотношении это 34.4% процента от всех запросов, которые сделала страница. Каждый лишний запрос – это дополнительная потеря времени.

Как можно уменьшить количество запросов? Самое лучшее средство – ленивая загрузка (lazy loading). Это значит, что при загрузки страницы с сервера скачаються только картинки, которые находятся в первом экране. Остальные картинки будут загружаться по мере того, как пользователь скролит страницу вниз. Т.е. контент загружаеться только в том случае, если он действительно нужен пользователю в данный конкретный момент.

То же самое относиться к видео и другим интерактивным вставкам на странице.

Создание критических стилей для каждой страницы в отдельности

На какие метрики влияет: FCP (first contentfull paint), LCP (lagest contentfull paint)

Следующий шаг – оптимизация стилей. На нашей тестовой странице они занимают почетное 3-е место по весу (521 КБ или 14.8% от общего веса страницы). Казалось бы не так уж и много.

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

Лучше всего это видно в том же gtmetrix.com в разделе Speed Visualization.

Красная стрелочка – это как раз то самое время, которое уходит на загрузку стилей. И оно существенно удлиняет отрисовку контента, т.е. и портит нам метрики FCP и LCP, что сказывается на общей оценке загрузки сайта.

Как с этим бороться? Казалось бы, логично перенести все стили в самый низ страницы, чтобы они загружались в последнюю очередь. В этом случае мы получим, эффект «flash of unstyled content», т.е. когда пользователь сначала увидит просто текст страницы на белом фоне, и только через некоторое время, когда подгрузятся стили, текст будет стилизован.

Такой трюк действительно поможет нам подтянуть FCP, но при этом обрушит другую метрику – CLS (Cumulative Layout Shift), которая отражает общее смещение всех элементов страницы при загрузке.

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

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

Объединение минификация и асинхронная загрузка стилей

На какие метрики влияет: FCP (first contentfull paint), LCP (lagest contentfull paint)

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

Объединение минификация и асинхронная загрузка скриптов

На какие метрики влияет: FCP (first contentfull paint), LCP (lagest contentfull paint), TTI (Time to Interactive)

Со скриптами все еще сложнее.

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

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

Что нужно сделать? Для всех скриптов нужно прописать атрибут defer. В этом случае они будут загружаться в фоновом режиме и выполняться когда страница будет загружена и первый экран отрисован. Их также можно минифицировать и собрать в отдельный файл, чтобы сэкономить запросы к серверу.

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

Асинхронная загрузка шрифтов

На какие метрики влияет: FCP (first contentfull paint), LCP (lagest contentfull paint)

Шрифты это тоже довольно тяжелые файлы, которые нужно скачать с сервера Google Fonts. Это может привести к проблеме, которая называется мелькание невидимого текста (flash of invisible text или FOIT), когда документ уже отрендерился, а шрифты еще не подгрузились. Для того, чтобы это не происходило, нужно временно показывать один из системных шрифтов. Для этого нужно прописать свойство «font-display: swap» внутри правила @font-face.

Если ты загружаешь шрифты с CDN Google, то нужно добавить параметр &display=swap к ссылке на шрифт.

https://fonts.googleapis.com/css?family=Roboto:400&display=swap

Шаг #3. Выбираем кэширующий плагин

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

Я выбрал несколько самых популярных кэширующих плагинов и сравнил их характеристики.

 LiteSpeed CacheSwift PerfomanceWP RocketW3 Total Cache
Кэширование на сервере и в браузере
Конвертация картинок в webp
Ленивая загрузка картинок
Критические стили
Оптимизация стилей
Оптимизация скриптов
Асинхронная загрузка шрифтов
СтоимостьБесплатно$49,99$49Бесплатно

Как видишь, больше всего нам подходят два плагина:

  1. LiteSpeed Cache
  2. Swiftperfomance

Давай коротко расскажу про каждый из этих вариантов.

LiteSpeed Cache

Это мой любимый плагин. Больше всего мне нравиться, что он бесплатный😉. Но есть и небольшой подвох. Кэширование с помощью LiteSpeed Cache можно настроить только на сайте, который работает на Open LiteSpeed Server. Это бесплатный веб-сервер с открытым исходным кодом. Ты можешь подробнее почитать про Open LiteSpeed на их официальном сайте, а также посмотреть их репозиторий на GitHub.

Создатели утверждают что связка LiteSpeed Server + LiteSpeed Cache работает значительно быстрее чем их ближайшие конкуренты Nginx или Apache.

Так это или нет – тема для отдельного холивара. Я смотрю на это с практической точки зрения. Плагин закрывает все мои проблемы? Закрывает! Он бесплатный? Бесплатный! Поэтому он стоит на первом месте. Все просто👍

Проблема в том, что далеко не все хостеры предоставляют сервера на LiteSpeed на своих виртуальных тарифах. На данный момент из всех русскоязычных провайдеров это делают только Fozzy и Hostinger.

Оба хостинга мне нравятся. Больше всего, конечно, Fozzy. 🏆 Недаром он занимает почетное первое место в моем рейтинге лучших хостингов для WordPress и второе место в рейтинге лучших Российских хостингов на 2022 год. К слову, bestseoblog.ru тоже размещен на нем же.

Если я тебя убедил – вот ссылка для регистрации на Fozzy. Специально для тебя я сделал промокод STARGAZER_FZ со скидкой 10% на первый платеж.

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

Подробнее про установку и настройку LiteSpeed Cache мы поговорим ниже.

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

Swift Perfomance

По функционалу Swift Perfomance все конкуренции. Единственный его недостаток – он платный. Именно поэтому он занял в моем рейтинге не 1-е, а только 2-е место 🥇

Подробнее про него можно прочитать на официальном сайте. Чтобы использовать все его возможности придется приобрести платную версию. Она стоит $50.

🎁 Разумеется, я поделюсь с тобой промокодом STARGAZER_SWP со скидкой 10% на Swift Perfomance.

Но зато этот плагин будет работать на любом хостинге все зависимости от программного обеспечения. На серверах nginx тоже будет прекрасно функционировать.

Подробности про установку и настройку Swiftperfomance будут ниже.

Шаг #4. Выбираем быструю тему

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

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

Вот несколько «быстрых» тем, которые мне нравятся и которые я могу рекомендовать:

  1. Kadence
  2. GeneratePress

Обе темы бесплатные. Их можно свободно скачать в репозитории WordPress.

Шаг #5. Избавляемся от ненужных плагинов

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

Это довольно очевидно. Но я в своей практике постоянно сталкиваюсь с этим, поэтому не мог не упомянуть.

Шаг #6. Отключаем загрузку плагинов постранично

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

Классический пример – плагин Contact Form 7 (или его анлоги: Gravity Forms, Contact Form by WPForms и т.д.). Обычно он используется только на странице Контакты.

Другой пример Elementor Page Builder – обычно используется только на нескольких страницах-лендингах, на которых нужен красивый, нестандартный дизайн.

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

Ты можешь в этом убедиться если посмотришь на исходный код любой страницы (ctr + u в браузере).

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

Сейчас мы это исправим.

Для начала нужно установить плагин Webcraftic Clearfy. Этот плагин делает много разного полезного, но нас сейчас интересует одна единственная его функция — Assets Manager.

Кстати, если на предыдущем шаге ты выбрал кэширующий плагин Swift Perfomace, там данный функционал уже встроен. Поэтому Webcraftic устанавливать не нужно.

После того, как ты установишь плагин, в панельке управления на фронтенде вверху (которая показывается у залогиненых пользователей ) появиться выпадающая менюшка Clearfy → Assets Manager.

Переходим сначала на любую страницу сайта и оттуда в assets manager. В крайнем слева меню выбираем Plugins. По центру появиться список всех плагинов, которые загружаются на этой странице. Выбираем в этом списке нужный. Я для примера выбрал Contact Form 7.

Справа мы увидим список стилей и скриптов, которые этот плагин грузит на страницу. В выпадающем меню выбираем Don’t load plugin assets.

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

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

Такие же правила можно задать не только для плагина в целом, но и для отдельного файла.

С подготовительными работами закончили. Теперь можно переходить к кэшированию 🔥

Шаг #7. Подключаем и настраиваем плагин LiteSpeed Cache

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

Если ты для себя выбрал Swift Perfomance – пропусти этот раздел и сразу переходи к следующему – подключаем и настраиваем плагин Swiftperfomance.

Установка

Устанавливаем плагин из официального репозитория WordPress.

Переходим на вкладку Общие

Здесь нам нужно запросить ключ домена на сервесе QUIC.cloud. Это необходимо для работы таких функций как оптимизация картинок и формирование критических стилей. Регистрация и получение ключа домена – бесплатно. Пользование сервисами тоже бесплатно в рамках месячного лимита.

Месячные лимиты рассчитываются на каждый сайт в отдельности и зависят от сервера, на котором расположен сайт. Для примера, сайт на Fozzy получает лимиты LiteSpeed Enterprise:

  • Беслатная оптимизация картинок — 10 000 запросов в мес.
  • Бесплатное оптимизация стилей — 2000 запросов в мес.
  • Беслатное создание плейсхолдеров для картинок — 1000 запросов в мес.

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

Если сайт очень большой и в бесплатные лимиты никак не влезает, можно докупить дополнительные. Цены вполне адекватные. Например:

  • +20 000 картинок – от $2 до $5 в зависимости от скорости обработки.
  • +10 000 стилей – $5 USD

С этим разобрались. Переходим в раздел «Cache». Здесь можно настроить кэширование.

Тут есть аж целых 8 вкладок. Но нас интересуют только две.

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

Теперь переходим на вкладку номер 7, которая называется «Браузер» и включаем Кэш браузера.

Все остальное можно оставить по умолчанию.

Переходим в раздел «Оптимизация изображений»

Для начала перейдем во вкладку «Настройки оптимизации изображений»

Включаем опцию «Автозапрос через Cron» в самом верху страницы.

Потом прокручиваем ниже и включаем генерацию и автозамену webp.

С изображениями все. Они будут постепенно конвертироватся в webp в фоновом режиме. За процессом можно следить на вкладке “Сводка по оптимизации изображения”.

Теперь можно переходить в раздел «Оптимизация страницы»

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

Первая вкладка это настройки стилей.

В самом верху включаем минификацию и комбинирование

Проматываем чуть вниз и включаем асинхронную загрузку стилей и font-display: swap для шрифтов

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

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

Но можно включить опцию «CCSS на каждый URL» и тогда плагин будет генерировать критические стили для каждой страницы сайта в отдельности.

Скрипты

Следующая вкладка – настройка скриптов.

Здесь мы включаем минификацию и объединение скиптов.

В низу страницы есть пункт «Загрузить отложенный JS» у которого есть три опции: выкл, отложено, отложенные. Если ты вдруг не понял чем «отложено» отличается от «отложенные», не расстраивайся. Проблемы не у тебя, а у программы-переводчика, которая переводила на русский эту страницу 🤣

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

Deferred («отложено») – скрипты отрабатывают сразу после загрузки HTML.

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

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

  1. Включаем опцию номер 3.
  2. Заходим на сайт в режиме «Инкогнито».
  3. Проверяем работу всех интерактивных элементов сайта: слайдеров, каруселей, аккордеонов, форм, всплывающих меню, рекламных баннеров, корзины и т.д.
  4. Если все работает нормально оставляем как есть.
  5. Если что-то не работает переключаемся на опцию номер 2.
  6. Еще раз все внимательно проверяем.
  7. Если что-нибудь упорно не хочет работать – добавляем в исключения (про это я расскажу чуть ниже)

Настройки HTML

Следующая вкладка – настройки html.

Здесь мы включаем минификацию и асинхронную загрузку шрифтов Google. Еще можно отключить Emoji если ты их не используешь на своем сайте.

Настройка медиафайлов

Пришло время подключить ленивую загрузку картинок и видео.

Переходим на вкладку «Настройка медиафайлов».

Тут нам нужно активировать две опции: «Отложенная загрузка изображений» и «Отложенная загрузка Iframes»

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

Tuning

Переходим на последнюю вкладку, которая называется «Tuning»

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

Впрочем, подобное бывает редко. Я например, столкнулся с подобной проблемой только один раз. После оптимизации у меня перестала работать метрика. Для того, чтобы исключить скрипт метрики я добавил дата атрибут no-optimize.

После этого все заработало👍

Как проверить работу кэша?

Итак, мы закончили с настройками. Как проверить что все работает корректно? Для этого нужно зайти на сайт в режиме инкогнито и открыть панель разработчика. Для этого в хроме нажимаем ctr+shift+I или Меню –> Дополнительные инструменты –> Инструменты разработчика.

Переходим на вкладку Network и перезагружаем страницу. Слева ты увидишь список запросов, которые страница делает на сервер. Выбираем самый первый запрос и смотрим его Response Headers. Если там будет x-litespeed-cache: miss это значит, что кэш работает, но для этой страницы он еще не сформирован. Если ты еще раз перезагрузишь эту страницу то увидишь x-litespeed-cache: hit. Это значит что страница закэшировалась и все работает отлично.

Самое время еще раз померить скорость сайта через Google Page Speed Insights и посмотреть разницу с тем что было до оптимизации 😉

Шаг #8. Подключаем и настраиваем плагин Swift Perfomance

Прежде всего, переходим на официальный сайт Swift Perfomance и покупаем Pro версию плагина.

Версия для одного сайта стоит $50, для четырех – $100, безлимитное количество сайтов – $239.

🎁 Не забывай про промокод STARGAZER_SWP который даст тебе скидку 10% на Swift Perfomance.

Кстати, если возьмешь безлимитную версию – Swift Perfomance посадит 3 дерева 🌳. Это не шутка. Они действительно этим занимаются 🙂. Быстрые сайты помогают бороться с глобальным потеплением 😉

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

Оптимизация изображений

Переходим во вкладку Media → Images.

Здесь мы активируем опцию Optimize Images on Upload. Image Optimizer можно поставить в положение Slightly Lossy (оптимизация с небольшими потерями) или Moderate (оптимизация с умеренными потерями) в зависимости от того, насколько ты готов поступиться качеством изображений ради скорости загрузки.

Включаем опцию Generate WebP. В выпадающем меню Serve WebP выбираем Use Picture elements.

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

Все остальное можно оставить по умолчанию.

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

Во вкладке Optimization мы будем настраивать скрипты и стили.

General. Оставляем все по умолчанию

Scripts. Активируем опцию Merge Scripts

Сразу после этого появятся опции, которые позволяют исключить любой скрипт из оптимизации.

Для того, чтобы добавить в исключения метрику я скопировал кусочек кода в поле Exclude Inline Scripts.

Styles. Активируем опцию Merge Styles. Тут все аналогично.

HTML. Активируем опцию Minify HTML.

Настраиваем кэширование

Переходим в раздел Caching. Для начала зайдем во вкладку General и убедимся что включено серверное кэширование (Enable Caching) и кэширование в браузере (Enable Browser Cache).

При желании можно выставить время жизни кэша побольше. За это отвечает опция Cache Expiry Time. По умолчанию кэш обновляется каждые 12 часов. Я бы порекомендовал поставить хотя-бы сутки, а еще лучше неделю или даже месяц, в зависимости от того, как часто обновляется твой сайт.

Все остальное можно оставить по умолчанию.

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

Не забудь нажать кнопку Save Changes, чтобы все сохранилось.

Теперь можно перейти во кладку Image Optimizer.

Нажимаем кнопку Optimize Images (All), чтобы оптимизировать существующие картинки в библиотеке.

Настраиваем плагины

Во вкладке Plugin Organizer можно настроить правила для загрузки на различных страницах. Об этом я уже рассказывал в разделе Отключаем ненужные скрипты и стили постранично. Там для этого я использовал плагин Webcraftic Clearfy. В данном случае, Webcraftic тебе не нужен. Все тоже самое ты можешь сделать непосредственно в Swift Perfomance, как раз в этой самой вкладке.

Проверяем работу кэширования

Для того, чтобы проверить работу кэша нужно зайти на сайт в режиме инкогнито и открыть панель разработчика. Для этого в хроме нажимаем ctr+shift+I или Меню –> Дополнительные инструменты –> Инструменты разработчика.

Теперь нужно перейти на вкладку Network и перезагрузить страницу. Колонка слева – это список запросов, которые страница делает на сервер. Нужно выбрать самый первый запрос и посмотреть его Response Headers. Если там будет swift-perfomance: MISS это значит, что кэш работает, но для этой страницы он еще не сформирован. Если еще раз перезагрузить эту страницу то появиться надпись swift-perfomance: HIT. Это значит что страница закэшировалась и все работает отлично 👍.

Шаг #9. Подключаем Яндекс метрику

Метрика – это ложка дегтя в нашей бочке меда.

  1. Она не оптимизируется
  2. Тормозит загрузку сайта
  3. Снижает оценки Google Page Speed

Что можно с этим сделать? Говоря по правде – ничего. Это неизбежное зло. Наша задача – максимально эффективно оптимизировать все что поддается оптимизации. После этого метрика в любом случае немного уронит твои оценки в Page Speed. С этим просто нужно смириться☹

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

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

Тем не менее, парочку советов я все же могу дать.

Во-первых, вместо метрики можно использовать Google Analytics. Он значительно меньше тормозит загрузку сайта.

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

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

При каждом включении/выключении нужно обновлять код счетчика на сайте. Это максимально неудобно. Но поделать с этим ничего нельзя. Увы!😢

Шаг #10. Фиксируем итоговый результат

Пришло время финального тестирования сайта. Если ты все сделал правильно, у твоего сайта будет примерно 95 — 100 баллов для компьютеров и 80 — 95 для мобильных.

Вот для примера показатели одной из страниц bestseoblog.ru:

Можно ли их еще улучшить? Да, можно. До этого мы работали топором. Теперь можно взять лобзик и точечно допилить отдельные детали. Например сделать уникальные стили для каждой страницы, добавить ленивую загрузку для таблиц, комментариев и прочей шлабуды, поставить Google Analytics вместо метрики, загружать сайт через CDN, добавить объектное кэширование Memcache или Redis и т.д.

Можно также посмотреть что там пишет Google Page Speed в своих рекомендациях.

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

  1. Провожу базовою оптимизацию
  2. Фиксирую итоговый результат
  3. Сравниваю скорость загрузки сайта с конкурентами
  4. Если у моего сайта оценки лучше, чем у конкурентов, оставляю все как есть 😉

Вопрос-ответ

Версия php влияет на скорость загрузки?

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

Google пишет ‘Сократите размер структуры DOM’, что можно сделать?

Ничего. Размер структуры DOM зависит исключительно от темы оформления и плагинов. Никакими другими способами на это повлиять нельзя.

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

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

Заключение

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

author
Андрей Живило
Занимаюсь SEO и созданием сайтов с 2010 года. Отлично знаю WordPress. Люблю программирование. А еще люблю делиться своим опытом. Поэтому и создал этот сайт.

Один комментарий

  1. Это самая качественная и подробная статья про ускорение загрузки, из всех которые я нашел в рунете. Спасибо большое! По вашему совету использовал плагин WP LiteSpeed Cache. Удалось дотянуть сайт до зеленой зоны)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *