Назад к блогу

Как повысить конверсию с помощью скорости загрузки сайта

22.11.2016
1307
Как правило, повышение конверсии ассоциируется с такими действиями, как улучшение юзабилити, выявление лучшего решения с помощью А/В-тестирования различных элементов, упрощения пути оформления заказа. Сама по себе скорость загрузки страницы не кажется фактором, влияющим на конверсию, и зря!
Конверсия зависит от скорости загрузки сайта
Вот несколько фактов:
По данным эксперимента компании RadWare, замедление загрузки сайта на 2 секунды в процессе оформления заказа дало увеличение незавершенных заказов на 20%.
Как показало исследование компании BlueTriangle, повышение скорости загрузки карточки товара всего лишь на 0,1 секунды может дать до 3,5% прироста выручки.
Исследование, проведенное сервисом Soasta, показало, что прирост скорости загрузки сайта может увеличить конверсию у пользователей мобильных устройств до 27%.
Вероятно, любой владелец компании был бы рад увеличить выручку на 3,5% или конверсию – на 27%.
Как ускорить свой сайт
Небольшое уточнение: целью нашей статьи является, скорее, обзор методов, а не предоставление инструкций по настройке. Узнать детали, как сделать ту или иную настройку, вы можете у своего веб-мастера или в студии, которая осуществляет поддержку вашего сайта.
Вы можете самостоятельно проверить скорость загрузки своего сайта с помощью сервиса PageInsights от Google.
Используйте CDN
(Content Distribution Network)
CDN хранит ваши файлы в своей сети серверов, расположенных по всему миру, и когда пользователь обращается к вашему сайту из определенной локации, файлы попадают к нему с ближайшего сервера, что значительно сокращает скорость загрузки, чем если бы пользователь из Владивостока обращался напрямую к серверу в Москве.

Одно только это действие способно существенно ускорить ваш сайт.

Кроме того, CDN существенно снижает нагрузку на ваш сервер, и в какой-то мере может служить защитой от DDOS-атак или скачков трафика.
Выбирайте правильный хостинг и его опции
Сейчас можно найти хостинг и за 100 рублей в месяц. Но это не значит, что таким хостингом можно пользоваться для коммерческих проектов.

Такие варианты хостинга предлагаются для простых сайтов/блогов, но не для высоконагруженных систем.

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

В вашей команде должен быть человек, который разбирается в данных вопросах, либо воспользуйтесь услугами внешнего специалиста.
Используйте
кэширование браузера
Для некоторых CMS вы можете воспользоваться готовыми плагинами. В других случаях вы можете вручную прописать заголовки Expires на страницах.

Заголовки Expires «говорят» браузеру, нужно ли ему снова загружать некий файл для того, чтобы показать вашу страницу, или браузер может взять тот файл, который уже сохранен у него в кэше.
Оптимизируйте изображения
Большие изображения значительно утяжеляют страницу. Именно «тяжелые» изображения часто являются причиной долгой загрузки страницы.

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

Вы легко можете ухудшить качество картинки за счет сжатия и сократить размер файла со, скажем, 800 КБ до 300 КБ, и при этом не сможете различить одну от другой. С помощью сжатия изображений вы можете уменьшить объем загружаемой страницы в 2-3 раза.
Включите gzip-компрессию
Gzip работает так: он сжимает все ваши файлы, нужные для открытия страницы, в один zip-архив, отправляет его браузеру, а тот распаковывает его и показывает содержимое в виде обычной веб-страницы. Это более эффективно и экономит время, необходимое для загрузки.

Gzip – это функция сервера: проверить, включена ли она у вас, можно с помощью сайта Gziptest.com. Если не включена, вам нужно связаться с вашим провайдером, чтобы gzip вам включили, но потребуются также и некоторые настройки на вашем сайте.
Оптимизируйте файлы JS и CSS
Во-первых, постарайтесь объединить файлы JS и CSS в один или по крайней мере в 2-3, вместо 15-20. Каждое обращение к серверу за скачиванием очередного файла JS или СSS увеличивает время загрузки.

Во-вторых, минимизируйте их размер с помощью удаления лишних пробелов и сокращения используемых названий переменных и функций. Например, из page_load_time в plt. Код станет практически нечитаемым, зато гораздо компактнее, а у вас всегда останется «читаемый» экземпляр, над которым можно работать дальше. Это не обязательно делать вручную, для этого есть специальные средства типа jscompress.com.

Если ваш сайт создан с помощью популярной CMS, то, возможно, для этой задачи есть подходящий готовый плагин.
Используйте статический HTML вместо PHP
PHP отлично работает с динамическими страницами, но он отнимает ресурсы сервера. Везде, где можно обойтись без него, стоит использовать статические HTML-страницы.
Не используйте команду @import
Для файлов со стилями всегда используйте обычные ссылки на файлы со стилями. Команда @import дает тот же результат, но нагружает сервер, а этого мы стремимся избежать.
Используйте KeepAlive
Использование команды KeepAlive позволяет браузеру скачивать несколько файлов, сокращая необходимость каждый раз обращаться к серверу за «разрешением».
Указывайте размеры изображений
Если у изображения не указан размер, браузер каждый раз должен «предположить», как его расположить получше на экране, а если он «не угадал», и размер оказался другим после загрузки изображения, то браузер должен изменить положение текста и картинок на странице.

Кроме того, что это излишне нагружает браузер посетителя сайта и приводит к задержкам, это еще и выглядит непрофессионально, когда тексты и картинки меняют свой размер по мере загрузки. Это производит впечатление сайта, сделанного «на коленке».
Поместите CSS вверху страницы, а JS – внизу
Страница в браузере не начнет отрисовываться, пока браузер не получит информацию об используемых стилях. Поэтому CSS надо помещать на странице как можно раньше.

С другой стороны, JS-файлы блокируют работу браузера, пока они целиком не скачаны и не обработаны, поэтому их нужно поместить в конце страницы. Тогда пользователь сможет уже увидеть страницу и начать ее просматривать, пока необходимые JS-файлы постепенно догружаются.
Используйте спрайты
Браузер посетителя загрузит один большой файл намного быстрее, чем несколько маленьких, дающих в сумме такой же объем. Это происходит потому, что загрузка каждого файла требует дополнительного обращения к серверу, а это задержка. А теперь представьте, сколько разных изображений на вашей стандартной странице – все эти маленькие стрелочки, кнопочки и так далее.

Использовать спрайт – означает объединить все картинки в один большой файл, который скачивается браузером один раз, а затем в нужных местах из него показываются только отдельные «кусочки» большого файла.
Отключите все плагины, которые вы не используете
Каждый плагин, который вы включили в своей CMS, но не используете, увеличивает время загрузки. Плагины содержат код, который надо загружать, они нагружают ваш сервер. Если плагин не используется, он должен быть отключен.
Бонус: если ваш сайт на Битриксе...
Для владельцев сайтов на Битриксе существует специальное решение «Композитный сайт». Это не какой-то сторонний плагин, это «родное» решение от Битрикс, то есть в его работе можно быть уверенным.

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

«Композитный сайт» позволяет ускорить отображение страницы сайта на Битриксе в десятки раз, заявленное время открытия страницы становится равным порядка 0,2–0,4 секунд.

В заключение пожелаем вашему сайту открываться быстро. Воспользуйтесь указанными здесь методами, и ваш сайт будет «летать»!
В статье использованы материалы ventureharbour.com
Понравилась статья? Расскажи друзьям ;)
Психологические приемы улучшения конверсии. Часть 1
31.10.2016
В этой и ряде последующих статей мы расскажем, как использование знаний из психологии помогает улучшать конверсию.
Функциональная анимация для сайта
31.10.2016
Функциональная анимация нужна, чтобы плавно вести пользователя по изменяющемуся навигационному контексту, объяснять происходящее на экране и поддержив...