Коротко о проекте
Legio - новостной портал на WordPress. Наша задача была техническая и очень конкретная: ускорить сайт так, чтобы он быстрее выходил в топ поисковой выдачи. Мы работали над показателями PageSpeed и временем ответа сервера и добились того, что время отклика стало меньше одной секунды.
Кейс о том, почему скорость - не косметика, а основа новостного бизнеса. Новостной портал живёт поисковым и агрегаторным трафиком, а поисковики и агрегаторы отдают предпочтение быстрым страницам. Медленный сайт проигрывает конкурентам в выдаче по одним и тем же новостям, даже если опубликовал материал первым.
Почему скорость критична для новостного сайта
Новость живёт часы. В первые минуты после события поисковики и новостные агрегаторы выбирают, какие источники показать. Быстрый сайт успевает проиндексироваться и попасть в выдачу, медленный - нет. Кроме того:
- читатель новостей почти всегда приходит с телефона и часто с мобильного интернета, где каждая лишняя секунда загрузки заметна;
- на новостных страницах много рекламы, счётчиков и виджетов, которые замедляют загрузку;
- поисковики учитывают показатели скорости и стабильности страниц при ранжировании;
- при наплыве трафика во время громкой новости медленный сервер может не выдержать нагрузку.
Задача
- Сократить время ответа сервера до значения меньше одной секунды.
- Улучшить показатели PageSpeed для мобильной и десктопной версии.
- Сохранить работу всех функций портала: публикаций, рекламы, счётчиков, комментариев.
- Подготовить сайт к пиковым нагрузкам.
Что мы сделали
Аудит скорости
Мы начали с измерений: время ответа сервера, вес страниц, количество запросов, блокирующие скрипты и стили, тяжёлые изображения, работа плагинов. Для новостного сайта на WordPress типичные источники медленной работы - избыточные плагины, тяжёлые запросы к базе данных, неоптимизированные изображения и сторонние скрипты, которые загружаются до основного контента.
Время ответа сервера
Главный результат - время отклика меньше секунды. Для этого:
- настроили кеширование страниц, чтобы большинство читателей получали готовую страницу без обращения к базе данных;
- оптимизировали запросы к базе данных, которые выполнялись при каждом открытии статьи;
- проверили и сократили плагины, которые нагружали каждую загрузку;
- настроили работу сервера под нагрузку новостного сайта.
PageSpeed
- изображения - сжатие, современные форматы, правильные размеры и отложенная загрузка картинок ниже первого экрана;
- скрипты - отложенная загрузка сторонних скриптов, которые не нужны для отображения статьи;
- стили - критические стили для первого экрана, остальное загружается позже;
- стабильность вёрстки - фиксированные размеры для изображений и рекламных блоков, чтобы страница не "прыгала" при загрузке.
Сохранение функций
Каждое изменение проверялось на работе портала: публикация материалов редакцией, показ рекламы, работа счётчиков и комментариев. Ускорение, которое ломает рекламу или аналитику, для новостного бизнеса бесполезно.
Мобильная версия в приоритете
Большая часть читателей новостей приходит со смартфона. Поэтому все замеры и оптимизация мы вели в первую очередь для мобильной версии: размер изображений под экран телефона, минимум скриптов на первом экране, стабильная вёрстка без смещения текста при загрузке рекламы. Десктопная версия при этом ускорилась автоматически.
Подготовка к пиковым нагрузкам
Громкая новость может за несколько минут привести на сайт в разы больше читателей, чем обычно. Кеширование страниц позволяет отдавать готовые страницы большому количеству читателей без нагрузки на базу данных, поэтому сайт не падает в момент, когда трафик самый ценный.
Что замедляет новостные сайты на WordPress чаще всего
- плагины, которые выполняют запросы на каждой странице - например, счётчики просмотров и связанные записи;
- изображения в исходном размере - фото с камеры весом в несколько мегабайт;
- сторонние скрипты - виджеты соцсетей, рекламные сети, счётчики, загружаемые до текста статьи;
- отсутствие кеширования - каждая страница собирается заново для каждого читателя.
Этапы работ
- Измерение исходных показателей скорости и времени ответа.
- Серверная часть - кеширование, база данных, плагины.
- Фронтенд - изображения, скрипты, стили, стабильность вёрстки.
- Проверка функций - публикации, реклама, аналитика.
- Контрольные замеры после изменений.
Как скорость влияет на путь читателя
| Шаг | Что происходит | Роль скорости |
|---|---|---|
| Событие | поисковики выбирают источники | быстрый сайт индексируется раньше |
| Выдача | читатель видит заголовок | позиции зависят и от скорости |
| Переход | страница загружается | медленная страница теряет читателя |
| Чтение | читатель листает статью | стабильная вёрстка не раздражает |
| Следующая статья | переход по ссылке | быстрая загрузка удерживает на сайте |
Ошибки, которых мы избегали
- Ускорение за счёт рекламы. Отключить рекламу - самый простой способ ускорить сайт, но для новостного портала это потеря дохода. Реклама осталась, но загружается так, чтобы не блокировать статью.
- Кеширование без учёта обновлений. Новость должна появиться на сайте сразу после публикации. Кеш настроен так, чтобы свежие материалы не "застревали".
- Оптимизация одной страницы. PageSpeed главной страницы не равен скорости статей. Мы оптимизировали типовые шаблоны, на которые приходит основной трафик.
- Разовая оптимизация. Без контроля новые плагины и виджеты постепенно возвращают сайт к прежней скорости.
Технологии
- Платформа: WordPress.
- Сервер: кеширование страниц, оптимизация базы данных.
- Фронтенд: сжатие и отложенная загрузка изображений, отложенные скрипты, критические стили.
- Контроль: замеры PageSpeed и времени ответа до и после.
Результат
| Показатель | Результат |
|---|---|
| Время ответа сервера | меньше 1 секунды |
| PageSpeed | улучшены показатели мобильной и десктопной версии |
| Функции портала | публикации, реклама и аналитика работают |
Быстрый сайт получает преимущество в выдаче по свежим новостям и удерживает читателя, который пришёл с мобильного интернета.
Как оценивать скорость сайта
| Метрика | Что показывает |
|---|---|
| Время ответа сервера | как быстро сервер начинает отдавать страницу |
| LCP | когда показывается главный контент |
| CLS | насколько стабильна вёрстка при загрузке |
| INP | как быстро страница реагирует на действия |
Для кого подходит такой подход
- новостным порталам и медиа, которые живут поисковым трафиком;
- блогам и контентным проектам с большим количеством статей;
- интернет-магазинам, у которых медленный каталог теряет покупателей;
- сайтам на WordPress, которые обросли плагинами и стали медленными.
Что взять себе
Измеряйте до и после. Без замеров невозможно понять, что дала оптимизация.
Начинайте с сервера. Время ответа сервера влияет на всё остальное.
Не жертвуйте доходом. Реклама и аналитика должны работать после ускорения.
Контролируйте постоянно. Каждый новый плагин или виджет может замедлить сайт.
Частые вопросы
Влияет ли скорость сайта на позиции в поиске? Да, поисковики учитывают скорость и стабильность страниц, особенно на мобильных устройствах.
Можно ли ускорить WordPress без смены платформы? Да, через кеширование, оптимизацию базы данных, плагинов, изображений и скриптов.
Что такое время ответа сервера? Время, за которое сервер начинает отдавать страницу после запроса браузера.
Почему новостному сайту важна скорость больше, чем другим? Новость живёт часы, и в первые минуты поисковики выбирают быстрые источники.
Не сломает ли ускорение рекламу? При правильной настройке реклама загружается после основного контента и продолжает работать.
Как часто нужно проверять скорость? После каждого заметного изменения сайта и регулярно - раз в месяц.
Что даёт кеширование новостному сайту? Готовые страницы отдаются читателям без обращения к базе данных, поэтому сайт быстро открывается и выдерживает всплески трафика.
Нужно ли отказываться от виджетов соцсетей? Не обязательно: их можно загружать после основного текста статьи, чтобы они не задерживали чтение.
Как мы работаем со скоростью сайтов
Ускорение - часть нашей работы по SEO, GEO и AEO и разработке сайтов. Похожие задачи мы решали для SF Education и BAT.
Ваш сайт медленно загружается? На бесплатном разборе измерим скорость и покажем, что её ограничивает.
