/sites/default/files/2022-07/shutterstock_2084134495.jpg

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

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


Что такое фронтенд и бэкенд

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

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

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

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

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

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

Как выглядят проблемы с фронтендом и бэкендом

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

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

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

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

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

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

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

Google замеряет разные показатели. Мы писали об этом здесь.

Как можно ускорить сайт?

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

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

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

На бэкэнде:

  • оптимизируем сервер, ускоряем его ответ: время от запроса клиента до формирования страницы должно быть минимальным;
  • настраиваем кэширование: заранее формируем страницы, сохраняем их в память и «прогреваем» ночью. Утром, когда на сайт придут посетители, условные карточки товаров не будут собираться на ходу, а выведутся пользователю в готовом виде;
  • настраиваем автоматический прогрев кэша: для быстрой отдачи страниц на постоянной основе мы рассчитываем объём памяти, оптимизируем сервер и запускаем процесс прогрева на определённое время, чтобы в этот момент как можно меньше пользователей попали на сайт.

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

  • «срезаем углы» — делаем всё быстрое и простое: сжимаем и убираем лишние скрипты, делаем асинхронную загрузку, чтобы сначала грузилась страница, а потом подгружались вспомогательные скрипты;
  • внедряем новые технологии: добавляем на сервер новые форматы сжатия контента, внедряем новые протоколы, например, http2;
  • следуем рекомендациям Google: оптимизируем вёрстку и css по рекомендациям PageSpeed Insights. Сервис указывает, какие конкретно улучшения по фронтенду можно сделать. Они передаются на поддержку в виде конкретных задач.

Наши кейсы: сайты клиентов с лучшими показателями PageSpeed

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

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

proektus.com

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

 

 

scamatic.ru

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