Ускорение сайта на Drupal. Google PageSpeed и автоматическая проверка скорости страниц

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

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

Фронтенд — то, что отображается пользователю на сайте, весь интерфейс: меню, картинки и разделы с помощью css и html.

Фронтенд — то, как отображается.

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

Пользователь заходит на сайт → на сервер приходит запрос→ бэкэнд формирует страницу → передаёт её по сети и отображает в браузере → отображение в браузере зависит от фронтенда и его скорости.

Для качественного отображения страниц важно, чтоб быстро работало всё: и генерация на сервере, и отображение страницы в браузере.

Бэкенд — то, что отображается.

Как понять, есть ли на вашем сайте подобные проблемы?

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

Как выглядят проблемы с бэкендом: пользователь открывает страницу → смотрит на белый экран 3-5 и более секунд, пока страница формируется на сервере.

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

Самый популярный инструмент для измерения скорости страниц— PageSpeed Insights. Вы просто вставляете адрес сайта в строку для ввода и сервис выдаёт вам статистику скорости для мобильных устройств и десктопа.

Начинать беспокоиться стоит, когда показатели сайта находятся не в зелёной зоне.

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

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

Вот какой алгоритм действий у нас на этот случай.

Сначала мы находим, с какой конкретно стороны проблема — фронтенда, бэкенда, либо проседают все части сайта. Исходя их этого, мы либо прокачиваем всё вместе, либо проводим точечную работу:

На бэкэнде:

На фронтенде:

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

Важно отметить: не все клиенты гонятся за высокими показателями PageSpeed. Многим достаточно находится в диапазоне 70-89 и для их бизнеса этого достаточно. Мы расскажем только о двух клиентах, с которыми целенаправленно работали над фронтендом и бэкендом для достижения высоких «зелёных» показателей.

proektus.com

Этот сайт мы разрабатывали в 2020 году. На тот момент показатели были 99-100%. На момент написания статьи прошло 2 года, с проектом мы уже не работаем, но PageSpeed до сих пор довольно высокий — 99 десктопная и 94 мобильная.

scamatic.ru

Этот сайт также разрабатывала наша команда. Как мы уже говорили, нам гораздо проще работать с ускорением страниц на таких проектах. Мы изначально закладываем грамотную архитектуру, в которой можем быть уверены на 100%, поэтому улучшать страницы намного проще. За время работы мы много чего оптимизировали: настраивали кэширование, меняли встроенные видео для мобильных устройств на показ по клику, настраивали сжатие картинок и т.д. Как итог — показатели 96 на десктопной версии и 94 на мобильной.

Достичь высоких показателей PageSpeed — не единоразовая задача. Страницы постоянно меняются, на сайт могут добавить контент без должной оптимизации: разработчики внесли правки, SEO-специалисты добавили блокирующие загрузку скрипты, контент-менеджер залил «тяжёлую» картинку и т.д. Как итог — страницы деградировали и грузятся хуже. Помимо самого сайта, изменения могут произойти в технологиях/стандартах/форматах работы со сжатием контента браузеров. Интернет всё время развивается и то, что раньше загружалось моментально, через пару месяцев может растерять высокие показатели оптимизации.

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

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

Поддержка сайта с автоматическим мониторингом показателей PageSpeed — это идеальный баланс планомерного развития и обеспечения нужной скорости.

Любой web-проект — это не сделать и забыть. Это постоянный процесс улучшения, наблюдения, анализа и ещё раз улучшения. И если мы просто пилим страницы без оглядки на то, какими и как быстро их увидит клиент, мы полируем корпус машины, у которой отказывает двигатель.