- Заказчик
- ООО «Инитлаб»
- Задача
- Публикация статей
Страница, на которую попадает пользователь, должна загрузиться за 2-3 секунды. Согласно исследованиям, современный юзер не готов ждать дольше и просто покидает сайт. Нужно постоянно следить за скоростью загрузки страниц и если показатели слабые и пользователи закрывают вкладку быстрее, чем появляется первый элемент — вам нужно ускорить сайт.
Чаще всего скорость загрузки страниц можно увеличить за счёт доработки фронтенда и бэкенда. В этой статье мы расскажем, как они влияют на скорость загрузки страниц , что из себя представляют и какую работу мы проводим, чтобы пользователю на вашем сайте не приходилось ждать слишком долго. Даже если на странице много контента.
Что такое фронтенд и бэкенд
Фронтенд — то, что отображается пользователю на сайте, весь интерфейс: меню, картинки и разделы с помощью css и html.
Фронтенд — то, как отображается.
Бэкенд — то, что работает на сервере. Не в браузере и не на компьютере — база данных, генерация страниц, которые в итоге покажет браузер.
Пользователь заходит на сайт → на сервер приходит запрос? бэкэнд формирует страницу ? передаёт её по сети и отображает в браузере ? отображение в браузере зависит от фронтенда и его скорости.
Для качественного отображения страниц важно, чтоб быстро работало всё: и генерация на сервере, и отображение страницы в браузере.
Бэкенд — то, что отображается.
Как выглядят проблемы с фронтендом и бэкендом
Как понять, есть ли на вашем сайте подобные проблемы?
Как выглядят проблемы с фронтендом: пользователь открывает страницу ? страница загружается кусками, тормозит, не отображается текст или другие элементы.
Как выглядят проблемы с бэкендом: пользователь открывает страницу ? смотрит на белый экран 3-5 и более секунд, пока страница формируется на сервере.
В обоих случаях человек получает плохой пользовательский опыт. Скорее всего, он бросит попытки зайти на сайт и уйдёт к вашим конкурентам или же проявит терпение, но впечатление, скорее всего, будет испорчено.
Самый популярный инструмент для измерения скорости страниц — PageSpeed Insights . Вы просто вставляете адрес сайта в строку для ввода и сервис выдаёт вам статистику скорости для мобильных устройств и десктопа.
Начинать беспокоиться стоит, когда показатели сайта находятся не в зелёной зоне.
В идеале страница должна генерироваться секунду и за секунду полностью отображаться. Google периодически меняет значения некоторых параметров, но общий эталон загрузки — не более 3 секунд.
Google замеряет разные показатели. Мы писали об этом здесь.
Как можно ускорить сайт?
Если ваш сайт медленно загружается и это сказывается на его посещаемости или конверсиях, над этим нужно начать работать. Вы можете указать на плохие показатели PageSpeed своей команде разработчиков, а если её у вас нет, обратиться к нам.
Вот какой алгоритм действий у нас на этот случай.
Сначала мы находим, с какой конкретно стороны проблема — фронтенда, бэкенда, либо проседают все части сайта. Исходя их этого, мы либо прокачиваем всё вместе, либо проводим точечную работу:
На бэкэнде:
- оптимизируем сервер, ускоряем его ответ: время от запроса клиента до формирования страницы должно быть минимальным;
- настраиваем кэширование: заранее формируем страницы, сохраняем их в память и «прогреваем» ночью. Утром, когда на сайт придут посетители, условные карточки товаров не будут собираться на ходу, а выведутся пользователю в готовом виде;
- настраиваем автоматический прогрев кэша: для быстрой отдачи страниц на постоянной основе мы рассчитываем объём памяти, оптимизируем сервер и запускаем процесс прогрева на определённое время, чтобы в этот момент как можно меньше пользователей попали на сайт.
На фронтенде:
- «срезаем углы» — делаем всё быстрое и простое: сжимаем и убираем лишние скрипты, делаем асинхронную загрузку, чтобы сначала грузилась страница, а потом подгружались вспомогательные скрипты;
- внедряем новые технологии: добавляем на сервер новые форматы сжатия контента, внедряем новые протоколы, например, http2;
- следуем рекомендациям Google: оптимизируем вёрстку и css по рекомендациям PageSpeed Insights. Сервис указывает, какие конкретно улучшения по фронтенду можно сделать. Они передаются на поддержку в виде конкретных задач.
Наши кейсы: сайты клиентов с лучшими показателями PageSpeed
По сути, мы можем добиться показателей 100-100 как на мобильной, так и на десктопной версии Drupal-сайта. Однако достигнуть этого мы можем только если разрабатывали сайт с нуля. По опыту можем сказать, что с сайтами на поддержке сложнее: оптимизировать то, что до нас собиралось годами, без масштабной переделки пока что не получилось ни разу.
Важно отметить: не все клиенты гонятся за высокими показателями PageSpeed. Многим достаточно находится в диапазоне 70-89 и для их бизнеса этого достаточно. Мы расскажем только о двух клиентах, с которыми целенаправленно работали над фронтендом и бэкендом для достижения высоких «зелёных» показателей.
Этот сайт мы разрабатывали в 2020 году. На тот момент показатели были 99-100%. На момент написания статьи прошло 2 года, с проектом мы уже не работаем, но PageSpeed до сих пор довольно высокий — 99 десктопная и 94 мобильная.
Этот сайт также разрабатывала наша команда. Как мы уже говорили, нам гораздо проще работать с ускорением страниц на таких проектах. Мы изначально закладываем грамотную архитектуру, в которой можем быть уверены на 100%, поэтому улучшать страницы намного проще. За время работы мы много чего оптимизировали: настраивали кэширование, меняли встроенные видео для мобильных устройств на показ по клику, настраивали сжатие картинок и т.д. Как итог — показатели 96 на десктопной версии и 94 на мобильной.
Мониторинг и обновление показателей PageSpeed
Достичь высоких показателей PageSpeed — не единоразовая задача. Страницы постоянно меняются, на сайт могут добавить контент без должной оптимизации: разработчики внесли правки, SEO-специалисты добавили блокирующие загрузку скрипты, контент-менеджер залил «тяжёлую» картинку и т.д. Как итог — страницы деградировали и грузятся хуже. Помимо самого сайта, изменения могут произойти в технологиях/стандартах/форматах работы со сжатием контента браузеров. Интернет всё время развивается и то, что раньше загружалось моментально, через пару месяцев может растерять высокие показатели оптимизации.
Чтобы постоянно не проверять скорость загрузки страниц вручную, мы разработали специальный сервис — мониторинг PageSpeed. Он самостоятельно следит за тем, как сайт меняется и как это влияет на скорость его загрузки. Когда важные показатели падают ниже заданных стандартов, наш сервис оповещает команду поддержки, которая анализирует ситуацию, оптимизирует фронтенд, бэкенд или другие необходимые параметры сайта.
Мы разработали мониторинг PageSpeed, чтобы автоматизировать работу, которая очень важна, но абсолютно нелинейна: если проверять показатели вручную после каждой правки или, например, каждую неделю, можно пропустить период замедления или начать оптимизацию преждевременно, когда выполнены ещё не все задачи. Либо опоздаем, либо наделаем лишней работы. Нам дорого своё время и деньги клиентов, именно поэтому мы отдаём на откуп автоматике всё, что экономит оба эти ресурса.
Развивайте сайт без потери скорости
Поддержка сайта с автоматическим мониторингом показателей PageSpeed — это идеальный баланс планомерного развития и обеспечения нужной скорости.
Любой web-проект — это не сделать и забыть. Это постоянный процесс улучшения, наблюдения, анализа и ещё раз улучшения. И если мы просто пилим страницы без оглядки на то, какими и как быстро их увидит клиент, мы полируем корпус машины, у которой отказывает двигатель.
За доработкой фронтенда и бэкенда, а также за внедрением мониторинга показателей PageSpeed на свой сайт, обращайтесь к нам.