11 очевидных способов ускорить работу сайта (и увеличить конверсию)

11 очевидных способов ускорить работу сайта (и увеличить конверсию)

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

Насколько быстрым должен быть сайт?

Секундная загрузка – предел мечтаний, но даже если ваш сайт загружается в пределах трех секунд, вы на верном пути. Загрузка менее 7 секунд – тоже неплохой показатель (который, все же, стоит исправить). Если же сайт грузится более 10 секунд – вы буквально с каждой из них теряете деньги.

Согласно данным Strangeloop, которые протестировали время загрузки 2000 топовых сайтов розничной торговли, страницы продолжают становиться объемнее, а среднее время загрузки сайта составляет 10 секунд. Типичный одностраничник eCommerce отображает всю полезную для посетителя информацию через 4,9 секунд.

Итак, насколько быстрым должен быть ваш сайт? И хотя Джейкоб Нильсен утверждает, что посетители, как правило, готовы ждать 10  секунд, примите во внимание следующие факты:

  • 47% людей ожидают, что сайт загрузится за две секунды и менее.
  • 57% посетителей закроют страницу, которая загружается более трех секунд.
  • Во времена высокой конкуренции более 75% онлайн-покупателей скорее перейдут на сайт конкурента, чем будут ждать загрузки.
  • Согласно научному исследованию, приемлемое время ожидания отображения информации составляет 2 секунды. Внедрение таких инструментов, как индикатор загрузки, увеличивает приемлемое время ожидания до 38 секунд (так что, если у вас медленный сайт, добавьте индикатор загрузки).
  • Сайт, который загружается в течение 3 секунд, просматривает на 22% меньше людей, чем сайт, открывающийся за секунду. Коэффициент конверсии более медленного сайта также ниже на 22%, а показатель отказов выше на 50%. У сайта, загружающегося в течение 5 секунд, на 35% меньше просмотров, на 38% ниже коэффициент конверсии, а показатель отказов выше на 105%.
  • 8% посетителей рассматривают низкую скорость сайта в качестве причины для отказа от покупки.

fast

Только 25% сайтов из рейтинга Alexa 2000 используют CDN. Пятая часть сайтов не используют относительно простых техник увеличения производительности. Конечно, некоторые сайты быстры. Самыми быстрыми (по результатам исследования Strangeloop) стали CVS.com (1.02 секунды), Polo.com (1.9 секунд), eCrater.com (1.95 секунд). Время загрузки страницы Amazon составило 3.26 секунд.

Инструменты для анализа скорости:

  • Pingdom — тестирует время загрузки страницы, анализирует его и находит причины задержек.
  • Google PageSpeed —  анализируют содержимое страницы и генерируют предложения по ее ускорению.
  • Test My Site от Google — новая система анализа скорости загрузки сайта от Google, которая также оценивает насколько сайт удобен на мобильных устройствах
  • WebPageTest

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

Как сделать результаты анализатора скорости Google Analytics более точными

Вы наверняка знаете, что инструмент Google Analytics может рассказать вам о скорости вашего сайта, каждой отдельно взятой страницы и т.д. Довольно полезная вещь. Я бы порекомендовал вам не зацикливаться на показателях среднего времени загрузки страницы, а копнуть глубже (например, посмотреть в таблицу Распределение, которая показывает распределение скорости). Отчеты ‘Тайминг DOM’ также полезны, так как они показывают, как много времени должно пройти, прежде чем ваша страница отобразится достаточно для того, чтобы воспринимать изложенную на ней информацию.

Данные довольно точны, так как Google Analytics берет всю информацию о загрузке напрямую из браузеров пользователей. Проблема в том, что он берет информацию только из 1-5% всех посещений, поэтому данные не всегда можно назвать статистически верными.  Вы можете получать данные обо всех 100% посещений вашего сайта. Просто добавьте в скрипт Google Analytics эту строчку:

_gaq.push([‘_setSiteSpeedSampleRate’, 100]);

Вставьте ее перед строкой ‘trackpageview’ в коде Google Analytics (низкий поклон Дэну Баркеру). Аккуратнее, чтобы не испортить ваш скрипт Google Analytics :)

Для новых версий Google Analytics (скрипт у них идет в файле ‘analytics.js’) строчка кода выглядит вот так:

ga(‘create’, ‘UA-XXXX-Y’, {‘siteSpeedSampleRate’: 100});

Обратите внимание, что не все браузеры поддерживают эту опцию (Safari), поэтому вы не увидите результатов анализа 100% посещений, но, тем не менее, точность данных значительно возрастет.

Влияние на конверсию

Основная мысль:

чем быстрее сайт, тем выше коэффициент конверсии.

Вот вам данные исследований на эту тему:

  • Коэффициент конверсии повышается на 74%, когда время загрузки страницы сокращается с 8 до 2 секунд (информация анализа 33 крупных сайтов розничной торговли).
  • Исследование Aberdeen Group показало, что задержка загрузки даже в секунду выливается в снижение просмотров на 11%, понижение удовлетворенности пользователей на 16% и коэффициента конверсии на 7%.
  • Один владелец сайта увеличил коэффициент конверсии на 8.47%, просто переместив его на более быстрый хостинг.
  • В Shopzilla увеличили скорость загрузки на 5 секунд, коэффициент конверсии вырос на 7-12%.
  • Ускорение лендингов Mozilla на 2.2 секунды повысило количество скачиваний на 15.4%, что вылилось в дополнительные 60 миллионов загрузок Firefox в год.
  • Amazon уже в 2006 году сообщил, что в результате ускорения на 100 миллисекунд их прибыль повысилась на 1%.

Насколько дорого вам обойдется секундное промедление? Ответ на картинке:

fastsite1

Думаете ли вы о пользователях мобильных устройств? А должны.

У меня есть доступ к данным Google Analytics многих сайтов по всему миру. Я вижу, как много людей просматривают эти сайты с мобильных устройств. Таких посетителей становится все больше и больше. Из моего опыта могу сказать, что доля просмотров большинства сайтов с мобильных устройств составляет 30-40% от общего числа. Это повсеместная тенденция. Согласно данным глобальной статистики, в 2015 году веб-серфинг с телефона стал впервые более популярным, чем просмотр страниц с компьютера — и этот тренд продолжается. Стоит задуматься.

phone

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

11 очевидных способов ускорить работу сайта

#1 Начните использовать CDN (Сеть доставки контента)

Это очень рационально, особенно если ваш сайт довольно объемный. Аудитория поблагодарит вас повышенным спросом.

CDN — сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов с специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю.

Также попробуйте эти инструменты:

  • MaxCDN – Много хороших отзывов.
  • CacheFly – Еще один надежный провайдер.
  • Cloudflare. Частично CDN, частично инструмент повышения безопасности.
  • Inscapsula – похож на Cloudflare, но, согласно исследованиям, предоставляет гораздо более надежный уровень безопасности..

#2 Размещайте статические файлы в облаке, которое использует CDN

Размещайте статические файлы на домене без cookies, оснащенном CDN. Почему домен без cookies? Каждый раз, когда браузер посылает запрос HTTP, вместе с ним он отправляет все связанные cookies, установленные на домене. Статический контент, например, картинки, JavaScript и файлы CSS, не должен сопровождаться cookies. Уменьшите время загрузки сайта, разместив статистические файлы на домене без cookies.

Вот вам два на выбор:

#3 Установите на своем сервере Google PageSpeed

Попросите службу поддержки вашего хостинга установить этот инструмент, вам определенно понравится результат.

PageSpeed уменьшает задержки при загрузке и улучшает пропускную способность благодаря изменению ресурсов на странице таким образом, чтобы она стала более производительной. Инструмент автоматически применяет лучшие решения для оптимизации страниц сайта и связанного с ними контента (CSS, JavaScript, картинки), не требуя изменения уже существующего контента или рабочих процессов. Установил и забыл — рекомендую.

#4 Попросите хостинг-провайдера установить Memcached

Memcached – это программное обеспечение высокой производительности для кэширования данных в оперативной памяти. Оно предназначено для ускорения динамических веб-приложений путем облегчения нагрузки на базу данных.

Проконсультируйтесь с системным администратором по поводу целесообразности установки в вашем конкретном случае, но, как правило, Memcached приносит много пользы (также рассмотрите его альтернативу – Redis).

В отличие от PageSpeed, ПО не активно сразу после установки, так что для его использования вам нужно настроить сайт соответствующим образом. Сайты на WordPress отлично работают с плагином W3 Total Cache, вы можете настроить его так, чтобы кэшированием занимался Memcached.

#5 Оптимизируйте картинки на сайте

Картинки могут быть большими и ощутимо замедлять работу сайта. Поэтому вам необходимо уменьшить размер файлов картинок, которые вы добавляете на страницы сайта. То же касается прочего контента – логотипов, графики и так далее. Хорошая новость – вы можете значительно уменьшить размер изображения без потери его качества.

Если вы используете WordPress, плагин вроде EWWW Image Optimizer может оптимизировать картинки в момент их загрузки (а также оптимизировать их массово в медиа-библиотеке).

Еще одним примером отличного сервиса оптимизации является Kraken.

#6 Пользуйтесь быстрым хостингом

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

Если размер траффика на вашем сайте значителен, не используйте такие хостинги, как Bluehost, Hostgator, GoDaddy и прочие низкобюджетные варианты.

Для начинающих:

  • Хостенко — очень простой в настройке, идеален, если вы ничего не понимаете в серверах, хосинге, и прочих технических вопросах.

Продвинутые:

  • Украина — очень надежный, уже установлено много фишек (в том числе о которых идет речь в этой статье), хороший суппорт.
  • Flops — у них есть и CDN, и облако, и много чего из продвинутых фишек, тоже хороший суппорт.

Профессиональные:

  • WP Engine – веб-хостинг для WordPress. Высокая скорость, качественная поддержка, в общем, предел мечтаний. Если ваш сайт работает на WordPress и вы хотите сделать его быстрее, можете больше не искать.
  • LiquidWeb – виртуальный хостинг, выделенный хостинг, облачный хостинг, CDN. Все к вашим услугам.
  • SingleHop – лучший выделенный хостинг, который я знаю.
  • Hetzner – лучшие предложения на выделенные серверы (есть на русском языке).
  • Storm on Demand – отличный облачных хостинг.

#7 Минимизируйте круговые задержки (RTT)

RTT относится ко всем запросам, которые пользователь адресует вашему сайту. Проблема здесь не в размере файлов, а в количестве запросов. Каждый запрос требует индивидуальной загрузки – файлов CSS, файлов JavaScript, картинок и т.д. Ваш браузер посылает запрос веб-серверу, который в ответ отправляет информацию. И так с каждым файлом. Поэтому важной стратегией ускорения сайта и повышения его производительности является минимизация времени приема-передачи.

У Google есть для этого вся необходимая документация с советами. Вот кратко суть процесса (пусть этим занимаются ваши системные администраторы):

  • Объедините все файлы JavaScript в один, чтобы минимизировать запросы. Если вы достаточно разбираетесь в технической стороне вопроса, вас заинтересует сервис Google Closure Compiler.
  • Объедините картинки со спрайтами CSS. Чем больше картинок на странице, тем больше процессов приема-передачи между посетителем сайта и веб-сервером. В идеале стоит объединить все маленькие картинки на заднем фоне в одну и использовать для их показа CSS. Заняться этим должен ваш верстальщик. Инструменты для создания CSS-спрайтов: Compass, SpritePad, Spriteme.
  • Избегайте CSS @import. Вместо @import для каждой таблицы стилей используйте тэг <link>. Это позволяет браузеру параллельно загружать таблицы стилей, ускоряя загрузку страницы.
  • Минимизируйте DNS-запросы. Избегайте использования разных доменных имен при загрузке сайта.
  • Минимизируйте редиректы. Если они необходимы, всегда используйте редиректы http, а не JavaScript.

#8 Используйте кэширование (плагины)

Многие плагины кеширования умеют справляться со всеми (или большинством) проблем, описанным в пункте 7 выше. Если вы используете WordPress, присмотритесь к плагину W3 Total Cache.

 #9 Сожмите ваш сайт с помощью gzip

Сжатие сокращает время ответа благодаря уменьшению размера ответа HTTP. Gzip уменьшает размер ответа примерно на 70%. Некоторые плагины делают это автоматически, иногда же вам нужно вручную подкорректировать настройки на уровне веб-сервера. В сети есть миллионы мануалов о том, как это сделать.

#10 Добавьте заголовок Expires

Браузеры используют кэш, чтобы уменьшить количество и размер запросов HTTP, и, соответственно, ускорить загрузку веб-страниц. Веб-сервис использует заголовок Expires в ответе HTTP, чтобы сказать браузеру, на какой срок можно кэшировать компонент. Для статических компонентов настройте заголовок так, чтобы срок их кэширования никогда не истекал (“Never expire”). Для динамических компонентов используйте соответствующий заголовок Cashe-Control, чтобы помочь браузеру с запросами с условием.

Несмотря на то, что в большинстве систем кэширования эта опция настроена по умолчанию, есть смысл перепроверить.

#11 Отключите все плагины, которые вам не нужны

Я встречаю множество сайтов, работающих на WordPress и не только, на которых работает огромное количество плагинов и расширений, которые по сути своей бесполезны и не используются. Многие из них требуют загрузки различных CSS и JavaScript файлов, которые замедляют работу сайта. Проведите аудит плагинов и отключите те, которые не используете.

Вывод

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