Как увеличить скорость загрузки сайта и почему это нужно сделать?

Скорость загрузки страниц играет важную роль для коммерческих сайтов: чем дольше они загружаются, тем выше вероятность, что потенциальный клиент уйдет, так и не дождавшись нужной информации. Исследования таких гигантов, как Amazon или Walmart, показывают, что ускорение сайта даже на 0,1 секунды существенно влияет на конверсию и продажи.

Зависимость конверсии от скорости загрузки страниц. Источник — исследование Walmart. Обратите внимание на резкое уменьшение показателя конверсии, когда время загрузки страницы увеличивается более чем на 1 секунду

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

Что со скоростью загрузки интернет-магазинов Украины?

С помощью Google PageSpeed Insights API мы в Arto Web Agency проверили 23246 главных страниц интернет-магазинов Украины. Проверка проводилась на API версии 4, поскольку исследование проходило до обновления PageSpeed Insights 12 ноября 2018 года.

В ходе исследования мы получили данные по 10 основным правилам, соблюдение которых помогает увеличить скорость загрузки:

• Avoid Landing Page Redirects — избегайте перенаправлений с целевой страницы;
• Enable GZip Compression — включите сжатие GZip;
• Leverage Browser Caching — используйте кэширование браузера;
• Improve Main Resource Server Response Time — уменьшите время ответа сервера;
• Minify CSS — минимизируйте размер CSS-файлов;
• Minify HTML — минимизируйте размер HTML-кода;
• Minify JavaScript — минимизируйте размер ресурсов JavaScript;
• Minimize Render Blocking Resources — минимизируйте число ресурсов, блокирующих отрисовку;
• Optimize Images — оптимизируйте изображения;
• Prioritize Visible Content — отдавайте приоритет загрузке видимого контента (на первом экране страницы).

Соответствие сайта каждому из 10 правил выражалось в виде показателя Impact, который показывает, насколько сильно несоблюдение правила влияет на скорость загрузки страницы относительно других правил. Если Impact равен 0, то правило соблюдено, и возможность для ускорения по нему сведена к минимуму.

На диаграммах ниже представлены усредненные значения Impact интернет-магазинов Украины на компьютерах и мобильных устройствах.

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

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

Как проверить скорость загрузки своего сайта ? Инструкции и советы

Проверять оптимизацию скорости загрузки можно при помощи Google PageSpeed Insights, GTMetrix, WebPageTest и других сервисов. Но мы хотим сосредоточить внимание на более важном — как самостоятельно сделать правильные выводы из такой проверки и принять адекватные решения?

Допустим, вы проверили сайт при помощи Google PageSpeed Insights. Важно отметить, что этот сервис (как и многие другие) проверяет только ту страницу, которую вы указали. Обычно все запускают проверку главной и забывают, что есть еще каталог, страница товара, контакты и т. д. Это не означает, что нужно будет вручную проверять все страницы сайта. Нужно выбрать из каждой категории страниц одного "представителя" и проанализировать его. Если вы получили оценку 85 и выше, то, скорее всего, оптимизация не понадобится.

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

Разверните каждую рекомендацию и просмотрите экономию трафика в килобайтах.

Секция "Оптимизация" из отчета PageSpeed Insights. Рекомендация "Используйте современные форматы изображений" развернута, видна примерная экономия трафика

Не нужно стремиться к выполнению абсолютно всех советов: если сжатие определенных рисунков уменьшит страницу всего на 2 Кб, то нет смысла это делать. Существенной будет экономия трафика примерно от 50 Кб.

Для популярных сайтов в секции "Данные наблюдений" PageSpeed Insights дополнительно показывает время первой отрисовки контента и первой задержки ввода. Эти данные были получены в результате сбора статистики взаимодействия реальных пользователей с сайтом.

Пример отчета PageSpeed Insights в секции "Данные наблюдений"

Важно сопоставить их с оценкой по 100-балльной шкале. Они не должны сильно различаться. Если вы видите, что у более чем 70% пользователей ваша страница грузится быстро, но по 100-бальной шкале сайт держит твердую желтую зону (75 — 90), то проведение оптимизации может быть нецелесообразным.

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

Таким образом, анализируя свой сайт, обращайте внимание в первую очередь на те факторы, которые замедляют его наиболее сильно. Не гонитесь за оценкой в 100 баллов только из-за принципа. Зачастую это приводит к нерациональной трате ресурсов.