Скорость загрузки сайта и способы оптимизации

Скорость загрузки сайта — что это?

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

Скорость загрузки сайта — это время, которое проходит от клика по ссылке до момента, когда пользователь видит финальную версию страницы. Это может произойти мгновенно, за 1–2 секунды, или дольше — от 5 секунд.

На что влияет скорость загрузки сайта

От скорости загрузки сайта зависит ранжирование в поисковых системах: чем быстрее веб-ресурс, тем эффективнее взаимодействие с пользователями. Это влияет на целевой трафик, рост конверсий и увеличение дохода. Если сайт загружается дольше 3 секунд, половина пользователей устанет ждать и уйдёт.

Что происходит, если сайт грузится дольше 3 секунд

— Растёт процент отказов;
— уменьшается конверсия;
— ухудшается позиция в выдаче;
— страдает имидж бренда.

3 способа узнать скорость загрузки сайта

1️⃣ Проанализировать данные вкладки Network (Сеть) в консоли разработчика.

Эта информация находится в Инструментах разработчика используемого браузера. Откройте в браузере нужную страницу, а затем консоль разработчика (в браузерах Google Chrome, Firefox для этого нажмите клавишу F12). Перейдите во вкладку Network (Сеть).
Нажмите F5, чтобы запустить анализ производительности.

Во вкладке All (Все) будет отображаться список всех файлов сайта и общее время загрузки, показатель Load.

Чтобы узнать время загрузки отдельного файла, кликните по интересующему в списке и затем перейдите в раздел Timing (Тайминги).

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

Показатели Queueing (Очередь), Stalled (Заблокировано), DNS Lookup (Поиск DNS), Initial connection (Соединение) составляют время отклика сервера и, как правило, суммарно занимают менее 0,1 с. В случае возникновения проблем на этом этапе загрузки сайта их быстро исправляют, так как они несут массовый характер и влекут множество жалоб.

Также сложности возникают с параметром Waiting (Ожидание). TTFB (Time to First Byte) — это время от момента ввода пользователем запроса, за которое на экран выводится первый байт информации. Также этот показатель отвечает за погрузку интерактивных элементов страницы. Иными словами, он описывает то, насколько быстро сайт (со всеми скриптами и данными) загрузился и готов к использованию. Также он показывает степень загруженности сервера. Причин снижения показателя TTFB несколько. Ниже мы перечислим основные проблемы и способы их решения.

2️⃣ Воспользоваться специальными сервисами: Be1, PR-CY, PageSpeed Insights, GTMetrix, WebPageTest.

3️⃣ Визуально оценить скорость загрузки (если вы не готовы тратить время, чтобы разобраться в технических тонкостях). Откройте сайт с нескольких разных устройств с автономным соединением. Если на одном страница загрузилась быстро, а на другом — медленно, скорее всего, дело не в сайте, а в скорости Интернета.

Почему сайт загружается медленно и что с этим делать

1. Не оптимизированные изображения

Фото и иллюстрации с высоким разрешением потребляют много трафика при загрузке. Чтобы сжать изображения, воспользуйтесь инструкцией по оптимизации.

2. Слишком много HTTP-запросов

Чем больше на сайте файлов, JavaScript, CSS и изображений,
тем ниже скорость открытия страницы. Минимизировать CSS и JS можно с помощью онлайн-сервисов CSS Minifier и JavaScript Compression Tool.

3. Не включено кэширование

Рекомендуем использовать кэширование: когда пользователь впервые зайдёт на сайт, в кэше его браузера сохранятся некоторые картинки, JavaScript и CSS-файлы. При следующем визите браузеру уже не придётся тратить время на их загрузку, они откроются автоматически.

4. Отсутствие GZIP-сжатия

Избыточный размер компонентов сайта — одна из причин его медленной работы. Сжатие файлов поможет увеличить скорость загрузки.

5. Грязный код

Начало кода должно содержать только те данные, которые нужны для первичной прорисовки контента. Загрузку всех второстепенных внешних CSS и JS следует разместить в конце кода.

6. Избыток рекламы

Всплывающие окна, баннеры, межстраничные переходы
и автоматическая загрузка видеорекламы создают сотни
HTTP-запросов, на обработку которых уходит много времени.

7. Тяжёлые видео

Перенесите видео контент на внешние платформы: YouTube
или Vimeo, чтобы сэкономить место на сервере и ускорить
загрузку сайта.

8. Отсутствие CDN

CDN (Content Delivery Network) — это сеть независимых серверов, которые распределены по разным географическим точкам. Благодаря такой инфраструктуре посетители сайта получают контент с высокой скоростью.

9. Тяжёлые страницы сайта

Создайте турбо-страницы в «Яндексе». Это лёгкие версии страниц, которые открываются быстро даже при медленном подключении
к Интернету. На их загрузку уходит примерно в 15 раз меньше времени, чем на загрузку оригиналов.