В первую очередь скорость загрузки влияет на поведенческие факторы: глубину просмотра и количество отказов. У быстрых сайтов выше показатель конверсии. Также от скорости косвенно зависит успех поискового продвижения: при прочих равных Google учитывает время загрузки страницы
- Инженеры Google выяснили, что пользователь замечает даже пустяковую задержку загрузки — 0,4 секунды;
- Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
- Мобильные пользователи готовы ждать немного дольше — 6-10 секунд;
- 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.
Эксперимент Financial Times
Представители деловой газеты провели эксперимент с новым сайтом издания.
Участников поделили на две группы. Первая, контрольная, просматривала страницы с обычной скоростью загрузки, а вторая — с задержкой в пять секунд. Во втором этапе приняли участие уже четыре группы: контрольная и ещё три, участникам которых «досталась» задержка в одну, две и три секунды. Глубину просмотра в течение сессии взяли за коэффициент конверсии (рассматривали пользователей, которые посетили хотя бы две страницы) и посчитали разницу между конвертированными пользователями в каждой из групп.
При посещении двух страниц разница между графиками не бросается в глаза, но при посещении трёх и более страниц заметно постепенное снижение по всем вариантам задержки загрузки — и чем больше глубина просмотра, тем значительнее разница. При самых низких скоростях, с задержкой в три и пять секунд, коэффициент конверсии оказался на 7,5% и 11% ниже по сравнению с контрольной группой.
Чем больше задержка загрузки, тем меньше просматривается страниц за сессию. Результат исследования говорит о том, насколько скорость загрузки важна для вовлечённости пользователей и, в конечном счёте, конверсии.
Скорость загрузки можно измерить с помощью этих сервисов:
Как увеличить скорость загрузки сайта
1. Уменьшите объем загружаемых страниц
Используйте сжатие gzip, это сократит время передачи файлов браузеру. Объём передаваемых данных уменьшится в 4-5 раз, а скорость загрузки — увеличится.
Nginx
Для включения сжатия gzip в Nginx, измените конфигурацию сервера и добавьте эти строки:
server {
....
gzip on;
gzip_disable «msie6»;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}
Apache
Сначала убедитесь, что подключен модуль mod_deflate. После этого нужно добавьте в файл .htaccess следующие строки:
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
Уровень сжатия
Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать таким образом:
gzip_comp_level 5;
Оптимальный уровень сжатия — 5.
Подробный материал по теме:
Как уменьшить вес сайта и ускорить загрузку страниц с помощью gzip, brotli, минификации и других способов
2. Уменьшите объём графики
Удалите ненужные изображения. Там, где это возможно, используйте текст вместо заведомо более тяжёлой графики.
Формат JPG лучше всего подходит для фотографий. PNG предпочтительнее для остальных элементов сайта — иконок, иллюстраций и пр., при условии, что изображения правильно сжаты. Учитывайте, что сайт будет просматриваться на разных устройствах и в разных браузерах.
Вы можете использовать одно масштабируемое изображение, но оно будет занимать много места и тормозить загрузку страницы. Лучше использовать несколько изображений, адаптированных под разные устройства, чтобы браузер загрузил нужное — это можно сделать при помощи плагина Imager. Он заменяет плейсхолдеры прозрачными изображениями, подтягивает к каждому атрибут src и назначает нужный размер, после чего вам остаётся только загрузить несколько вариантов изображения разных размеров.
Как это работает:
<div style="width: 240px">
<div class="delayed-image-load" data-src="httр://placehold.it/{width}" data-alt="alternative text"> </div>
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script>
Сжать изображения можно при помощи функции сохранения веб-страниц в графических редакторах или сервисов PunyPNG, TinyPNG и других.
Материал по теме работы с изображениями:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте
3. Уменьшите количество запросов браузера
Этот пункт перекликается с предыдущим. Один из способов уменьшить количество запросов браузера — удалить со страницы часть элементов.
Используйте CSS-спрайты — графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.
Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейдите во вкладку Network.
4. Включите кэширование данных
Настройте сервер так, чтобы браузер пользователя кэшировал данные — в этом случае при первом посещении сайта некоторые элементы страниц (изображения, CSS- и JS-файлы) сохранятся автоматически. В следующий раз браузер не потратит время на их загрузку.
Однако такой способ помогает увеличить скорость загрузки только при повторных посещениях сайта.
Как включить кэширование?
Используйте модуль headers веб-сервера Apache, который контролирует и изменяет заголовки HTTP-запросов и HTTP-ответов. Браузер загружает с сервера в локальный кэш данные, которые редко изменяются, и при посещении сайта загружает их уже из кэша. Также можно кэшировать файлы определённых типов на заданное время, по истечении которого они будут загружены с сервера заново.
Это можно сделать так:
<filesmatch «.(gif|jpeg|png|swf|js|css|pdf|ico)$»=""> Header set Cache-Control «max-age=1234000» </filesmatch>
Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.
Также можно запретить кэширование файлов. Добавьте приведённый ниже код в .htachess, предварительно указав, какие типы файлов кэшировать не нужно:
<filesmatch «.(pl|php|cgi|fcgi|scgi)$»=""> Header unset Cache-Control </filesmatch>
Вы также можете управлять кэшированием с помощью модуля expires. Он контролирует установку HTTP-заголовков для кэширования со стороны браузера. Укажите период хранения данных в зависимости от времени, от последнего изменения файла или от времени доступа клиента.
Например, так:
<ifmodule mod_expires.c=""> ExpiresActive On ExpiresDefault «access plus 2 month» <b></b> ExpiresByType image/png «access plus 4 months» ExpiresByType image/swf «access plus 4 months» </ifmodule>
Или так:
ExpiresByType text/html «access plus 2 month 14 days 7 hours» ExpiresByType image/gif «modification plus 8 hours 3 minutes»
Об этом и других способах оптимизации в статье
Как ускорить загрузку: оптимизируем код верхней части страницы
5. Сократите размер кода CSS и JavaScript
Специальные сервисы для упрощения JavaScript и CSS удаляют из кода «лишние» символы (пробелы, комментарии) и сокращают время его загрузки. Для увеличения скорости они могут быть эффективнее, чем стандартное сжатие gzip. Google рекомендует СSS-файлы небольшого размера вставлять непосредственно в документ HTML.
Вы можете воспользоваться этими сервисами:
Размещайте CSS-файлы в начале страницы, а JS-файлы — в конце.
Если CSS-файлы расположены в хедере, рендеринг страницы происходит постепенно, что формирует положительное впечатление от сайта. Размещение JS-файлов внизу страницы позволяет браузеру сначала загрузить контент страницы, а уже потом разобраться со скриптами.
Успешной настройки!
