Вводные факты
В первую очередь скорость загрузки влияет на поведенческие факторы: глубину просмотра и количество отказов. У быстрых сайтов выше показатель конверсии. Также от скорости косвенно зависит успех поискового продвижения: при прочих равных Google учитывает время загрузки страницы.
- Инженеры Google выяснили, что пользователь замечает даже пустяковую задержку загрузки — 0,4 секунды;
- Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
- Мобильные пользователи готовы ждать немного дольше — 6-10 секунд;
- 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.
Эксперимент Financial Times
Представители деловой газеты провели эксперимент с новым сайтом издания.
Участников поделили на две группы. Первая, контрольная, просматривала страницы с обычной скоростью загрузки, а вторая — с задержкой в пять секунд. Во втором этапе приняли участие уже четыре группы: контрольная и ещё три, участникам которых «досталась» задержка в одну, две и три секунды. Глубину просмотра в течение сессии взяли за коэффициент конверсии (рассматривали пользователей, которые посетили хотя бы две страницы) и посчитали разницу между конвертированными пользователями в каждой из групп.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
При посещении двух страниц разница между графиками не бросается в глаза, но при посещении трёх и более страниц заметно постепенное снижение по всем вариантам задержки загрузки — и чем больше глубина просмотра, тем значительнее разница. При самых низких скоростях, с задержкой в три и пять секунд, коэффициент конверсии оказался на 7,5% и 11% ниже по сравнению с контрольной группой.
Чем больше задержка загрузки, тем меньше просматривается страниц за сессию. Результат исследования говорит о том, насколько скорость загрузки важна для вовлечённости пользователей и, в конечном счёте, конверсии.
Скорость загрузки можно измерить с помощью этих сервисов:
- Проверка скорости сайта PR-CY,
- GTmetrix,
- PageSpeed.
Как увеличить скорость загрузки сайта
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.
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 и других.
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»
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 Drive,
- CSS Compressor.
Размещайте CSS-файлы в начале страницы, а JS-файлы — в конце.
Если CSS-файлы расположены в хедере, рендеринг страницы происходит постепенно, что формирует положительное впечатление от сайта. Размещение JS-файлов внизу страницы позволяет браузеру сначала загрузить контент страницы, а уже потом разобраться со скриптами.
Успешной настройки!
Источник фото на тизере: Depositphotos
Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.
Источник:
