2543 подписчика

Как увеличить скорость загрузки сайта: основные способы

17 апреля 202017 апр 2020

4 мин

Оглавление

Измерение скорости загрузки сайта
Тестирование и примеры
Сжатие изображений (Способ №1)

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

Измерение скорости загрузки сайта

Для проверки скорости загрузки сайта подойдут такие инструменты, как:

Google PageSpeed insights. Наиболее популярный инструмент, позволяющий проводить анализ как мобильной, так и десктопной версии сайта. Дополнительно сервис дает рекомендации по улучшению показателей;
Pingdom Tools. Еще одни инструмент измерения скорости загрузки сайта, показывающий время в миллисекундах и выдает баллы для оценки данного показателя.

Тестирование и примеры

Для того, чтобы проверить эффективность части методов, которые были описаны использовалась проверка одной и той же страницы (мобильной версии), имеющей следующие показатели:

Баллов: 85;
Время загрузки первого контента: 2,1 сек;
Время загрузки для взаимодействия: 5,2 сек.

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

Сжатие изображений (Способ №1)

Для того, чтобы уменьшить размер страницы достаточно сжать изображения при помощи сервисов, например:

https://www.iloveimg.com/ru/compress-image
https://imagecompressor.com/ru/
https://compressjpeg.com/ru/

Это позволит снизить размер изображений на 60-90% и как следствие значительно снизить размер страницы.

Сжатие страницы (Способ №2)

Для того, чтобы улучшить скорость загрузки страницы по протоколу HTTP лучше всего использовать технологию:

ZIP;
GZIP.

Проверить результаты сжатия можно на сайте:

https://www.whatsmyip.org/http-compression-test/

Использование WebP (Способ №3)

Формат WebP даст возможность сделать страницу еще «легче», например. Данный формат позволяет получить размер на 26% меньше, чем PNG. Без его использования можно получить следующие результаты:

Баллов: 79;
Время загрузки первого контента: 2,3 сек;
Время загрузки для взаимодействия: 5,7 сек.

Lazy load изображений (Способ №4)

LazyLoad (Ленивая загрузка) — это отложенная загрузка изображений. Благодаря данной технологии изображения будут загружены пользователям лишь в том, случае если они требуются пользователям. Схема работы LazyLoad.

Результаты до:

Баллов: 40;
Время загрузки первого контента: 2,5 сек;
Время загрузки для взаимодействия: 13 сек.

Кэширование (Способ №5)

Кэширование — это способ оптимизации Web при котором медленные SQL запросы заменяются статическим HTML-кодом. Как правило, сохраняется код на некоторое время (час, день, неделя или любое другое), после чего кэш очищается и начинается генерация нового файла.

Результаты без кэширования.

Баллов: 77;
Время загрузки первого контента: 2,6 сек;
Время загрузки для взаимодействия: 5,6 сек.

Сократить css и Javascript (Способ №6)

При помощи использования специальных средств для упрощения код JavaScript и CSS можно снизить «вес» страницы.

Пример, кода без сжатия.

Баллов: 81;
Время загрузки первого контента: 2,7 сек;
Время загрузки для взаимодействия: 5,3 сек.

Для того, чтобы выполнить эту операцию достаточно использовать инструмент:

https://jscompress.com/

Уменьшить количество запросов (Способ №7)

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

Пример Google, который выглядит максимально просто, поэтому имеет идеальные данные по Google PageSpeed insights.

Уменьшить расстояние сервер клиент (Способ №8)

Расстояние между сервером и пользователем играет важную роль в оптимизации скорости загрузки сайта. Для решения проблемы можно использовать CDN-сервисы, которые загрузят нужные файлы (как правило, картинки) с собственного сервера, находящегося ближе всего к пользователю.

Для чего это нужно?

В первую очередь согласно данным Google (исследование SOASTA) скорость загрузки сайта сильно влияет на конверсию сайта. Так, оптимальное время за которое должна открыться страница составляет менее 2,2 секунд.

Согласно другим исследованиям компания Walmart добилась увеличения коэффициента конверсии на 2% за каждую 1 секунду ускорения. Также IT-гигант Mozilla смогла повысить количество загрузок на 15% уменьшив время на отображение страницы на 2.2 секунды.

Также данный Kinsta.com утверждает, что загрузка страницы за менее чем 100 миллисекунд дает пользователю ощущение моментальной загрузки. Как показали исследования около половины (40%) посетителей откажутся от сайта, если он загружается более 3 секунд. Было замечено, что при превышении времени загрузки контента 2-х секунд показатель отказов увеличивается на 30%.