Страница, на которую попадает пользователь, должна загрузиться за 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 на мобильной.
