Увеличиваем конверсию, ускоряя загрузку страниц

Правило «терпение – это добродетель» не для онлайна. Здесь более актуально «человек – не камень, потерпит, да и треснет». Вернее, вы потеряете потенциального клиента. Вы наверняка знаете, что медленная загрузка страницы убивает конверсию.

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

Как скорость загрузки влияет на конверсию страниц

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

Загрузка страницы — правило 3 секунд

Еще в 1999 году, когда dial-up был суровой реальностью, посетители ждали загрузки страницы 8 секунд (данные по рынку США)! А теперь, согласно отчёту Radware, посетитель уходит со страницы через 3 секунды, если она не открывается. Логично: люди оплачивают широкополосный интернет и дорогие компьютеры не для того, чтобы ждать.

Низкое быстродействие лишает сайт мобильного трафика

По данным Akamal и Gomez.com, 79% клиентов интернет-магазинов не делают повторную покупку, если быстродействие сайта при последнем визите было недостаточным. А 44% жалуются на медленный сайт знакомым.

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

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

Загрузка страницы — проблемы мобильных пользователей

Диаграмма показывает, что 60% мобильных пользователей сталкивались как минимум с одной проблемой при просмотре сайтов. И эти проблемы варьируются от медленной загрузки до полной недоступности ресурса.

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

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

Google наказывает за плохой пользовательский опыт

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

Google оценивает посадочные страницы и назначает им показатель качества (QualityScore) и рейтинг рекламного объявления (AdRank). Если лендинг не соответствует потребностям пользователей, он получает низкий показатель, а объявления занимают худшее место в рекламной выдаче.

Еще в 2010 году в Google заявил, что быстрые сайты не только улучшают пользовательский опыт, но и снижают эксплуатационные расходы. «Пользователи ценят скорость, почему мы учитываем ее при ранжировании результатов поиска».

Инструменты аналитики, которые подчеркнут потребность в оптимизации

Еще один инструмент, чтобы убедить руководство или разработчиков — данные веб-аналитики.

Чтобы их использовать, в аккаунте Google Analytics выберите вкладку «Поведение», затем – «Скорость загрузки сайта» и «Обзор».

Загрузка страницы — обзор скорости загрузки сайта в Google Analytics

На странице – важные статистические данные для отслеживания: среднее время загрузки страницы, реакции сервера (domain look-up) и среднее время отклика сервера.

Далее – раздел «Скорость загрузки страниц сайта», где разбивка сайта по страницам показывает общую скорость загрузки конкретных страниц в зависимости от браузера.

Красное поле указывает проблемные страницы.

Загрузка страницы — проблемные страницы по GA

Загляните в «Ускорение загрузки», чтобы узнать, как увеличить скорость загрузки страницы. Менее 80 баллов в графе «Уровень скорости загрузки страницы» — показатель того, что есть проблемы.

Что удобно — Google Analytics рассказывает, как исправить их. По ссылке «Предложения PageSpeed» переходите в интерфейс, где и ознакомьтесь с рекомендациями Google:

Загрузка страницы — рекомендации Google по оптимизации

Вы внедрили поисковую оптимизацию, но еще не добились результатов в поисковом продвижении? Или слишком много тратите на рекламу? Возможно, вы используете не те методы.

Сервисы для анализа скорости загрузки страниц

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

PageSpeed Insights

Если вы не установили на сайт скрипт Google Analytics, вы все равно можете использовать PageSpeed Insights. Этот сервис выявит проблемные области и предложит рекомендации по улучшению скорости. Если сервис рекомендует оптимизировать ресурсы (css, javascript, изображения), можете тут же их скачать и загрузить на сервер.

Загрузка страницы — PageSpeed Insights

Дополнительное преимущество: вы можете исследовать сайты конкурентов – как десктоповую, так и мобильную версию – и не допустить их ошибок.

Недостатки и мифы относительно этого инструмента

Google PageSpeed Insights – всего лишь чек-лист, перечень проблемных моментов, которые могут негативно влиять на взаимодействие пользователя с сайтом и быстродействие.

Учтите:

  • Google никогда не говорил об этом инструменте как о факторе ранжирования. Влияет быстродействие и пользовательский опыт, а не баллы PageSpeed.
  • Рекомендации по результатам теста формальные и едва ли заметно скажутся на быстродействии.
  • С минимизированными javascript и css сложно работать. Если сайт в разработке – не спешите оптимизировать ни css, ни javascript. Фактически сервис просто удаляет форматирование и превращает код в нечитаемый.
  • Оптимизированные изображения могут стать легче, но картинка ухудшится. Если важно, чтобы изображения товаров и оформление выглядели хорошо, обратите внимание, какой размер Google считает оптимальным, но оптимизируйте картинки вручную в визуальном режиме. Отслеживайте вес и качество изображения.
  • Буквальное следование этим рекомендациям может ухудшить опыт пользователя, а в некоторых случаях – привести к неработоспособности сайта.

PageSpeed Insights

GTMetrix

Сервис объединяет данные из Yslow и PageSpeed Insights и дает сайту оценку от A до F по быстродействию. Вы получите отчет, с помощью которого можно проанализировать ключевые проблемы.

Плюс: вы знаете, где расположен обращающийся к сайту сервер, и какой браузер использовался.

Минус: выбора вам не предоставляют.

Вы получаете несколько вкладок с результатами. Кроме PageSpeed и Yslow есть Waterfallchart, каскадная диаграмма, которая показывает серверные запросы и тайминг. Видно, из чего состоит общее время загрузки, какие запросы его увеличивают:

Загрузка страницы — GTMetrix

Кликните на любом пункте – и вы увидите развернутый отчет по запросу и отклику сервера, данные о кэшировании и сжатии, keep-alive и т.д.

GTMetrix

Pingdom.com

Pingdom.com оценивает эффективность страниц по скорости загрузки от 0 до 100%. Как и GTMetrix, отображает результаты в виде каскадной диаграммы (Waterfallchart), благодаря чему можно быстро определить проблемные стадии загрузки.

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

В результатах – статистика по запросам (количество и %), по типам контента, по доменам, к которым обращается браузер посетителя (количество запросов и размеры полученных файлов). Есть подробные рекомендации по всем пунктам.

Загрузка страницы — Pingdom.com

Pingdom.com

WebPageTest

Превосходит большинство сервисов из данного списка.

Первое серьезное преимущество: можно выбрать как месторасположение сервера, так и браузер. И не только десктопные версии: во внушительном списке – версии для смартфонов.

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

Второе серьезное преимущество: сервис позволяет сравнивать быстродействие нескольких страниц сразу, просто обозначьте каждую и укажите сервису URL.

После теста вы видите несколько диаграмм (каскадные в том числе). На вкладке «Детали» – подробные данные по каждому аспекту загрузки, каждому запросу. Сервис учитывает множество показателей: от времени загрузки первого байта до полной загрузки документа.

Загрузка страницы — WebPageTest

С результатами этих тестов можно идти не только к директору за бюджетом на оптимизацию, но и к техподдержке: это серьезная статистика для профессионалов.

WebPageTest

PR-CY.RU

Российский сервис. В отличие от PageSpeed Insights, отдельно проверяет десктоп и мобайл версии: нужно выбрать, что именно проверяем.

Загрузка страницы — PR-CY

Результаты проверки и рекомендации в точности совпадают с результатами PageSpeed Insights, слово в слово. Вероятно, сервис использует данные сервиса Google, и тогда непонятно, почему бы не обратиться к первоисточнику.

Советы по оптимизации скорости загрузки страниц

Некоторые из них простые и не требуют особых вложений и трудов.

1) Уменьшайте размер страницы.

Это нужно не только для ускорения загрузки. Это влияет и на индексацию контента, сводит соотношение код / контент к минимуму.

За счет чего уменьшается размер страницы?

  • Используйте внешние css, не внутренние. Код станет легче, и при этом внешние файлы css кэшируются.
  • Убирайте лишние пробелы и строки комментариев из файлов css и javascript. Есть много сервисов, которые делают это автоматически. Однако иногда такая оптимизация может стать причиной неработоспособности JS.
  • Объединяйте css и скрипты в единый внешний файл. Эта мера уменьшает количество запросов к серверу, а потому ускоряет загрузку и нагрузку на сервер. Однако и здесь нужен вдумчивый подход: один объединенный файл может грузиться дольше нескольких небольших. Тестируйте и выбирайте оптимальный вариант.
  • Помните о правиле: css подключаются в самом начале страницы, javascript – в конце. Это для того, чтобы посетитель сначала получил доступ к контенту, затем – к интерактивным возможностям страницы. В соответствии с деревом DOM, загрузка javascript блокирует остальные запросы: как только браузер натыкается на тег «script», процесс загрузки другого контента останавливается. Нюанс: скрипты аналитики нужно подключать как можно раньше, фактически – до загрузки контента.

2) Используйте диспетчер тегов Google (GTM).

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

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

Все, что нужно – добавить два фрагмента кода на сайт, и после этого всеми тегами управлять в одном месте.

Пошаговая настройка Google Tag Manager для начинающих 

3) Просчитайте и оптимизируйте время загрузки первого байта (TTFB) и время до первого взаимодействия (TTI).

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

Помогут два показателя: время загрузки первого байта (TTFB) и время до первого взаимодействия (TTI).

Показатель TTFB более важен для поисковых роботов: по предположениям Moz, именно он влияет на определение скорости страниц. Его проще зафиксировать, и браузеры обрабатывают поступающий код по-разному. Вычислить TTFB посадочной страницы можно с помощью WebPageTest (см. выше).

Немного сложнее дела с TTI. В соответствии с Dotcom-Monitor, у которых есть инструмент для измерения производительности сайта, время вывода первого интерактивного элемента (TTI) определяет важный момент загрузки страницы – когда основной интерактивный контент становится интерактивным для конечного пользователя.

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

Посетителю не нужно ожидать полной загрузки страницы для взаимодействия с сайтом. В идеале время до начала взаимодействия с сайтом – более объективный показатель, чем время загрузки страницы (TTL).

4) Оптимизируйте изображения.

Согласно Radware, именно изображения – это 50-60% общего веса страниц. Большие картинки иногда заставляют ваши страницы грузиться бесконечно.

  • Вдумчиво подходите к выбору форматов изображения: в некоторых случаях разумнее использовать изображения с индексированными цветами (GIF и PNG-8).
  • Объединяйте элементы оформления в css-спрайты. Спрайт не уменьшает размер картинок, он уменьшает количество запросов к серверу. Вместо нескольких десятков запросов будет один, к одной объединенной картинке.
  • Не используйте масштабированные изображения: они хуже выглядят, потому что браузер не интерполирует их хорошо, если вы большую картинку средствами html втискиваете.
  • Не стоит использовать на сайте PNG-24, если только вам не нужно фотографическое качество и прозрачность. Весят такие картинки очень много, и единственная сфера в веб, где их стоит использовать – соцсети, которые все равно пережмут картинки, но вы гарантируете себе наилучшее качество изображения. На сайте фотографии в формате PNG-24 не нужны.

ImageOptim – отличный инструмент для разработчиков, который позволяет оптимизировать изображения без потери качества. Простой в использовании, даже если у вас нет продвинутых навыков кодирования, сервис может работать автоматически.

Приятный плюс: ImageOptim работает с изображениями для retina-дисплеев. Главный минус: сервис платный, базовый тариф – 9$ в месяц. Бесплатный тестовый режим.

Помимо веб-сервиса, разработчики ImageOptim предлагают приложение для Mac и утилиты как для Windows, так и Linux. Бесплатно.

5) Используйте быстрый и надежный хостинг.

Услуги хостинга играют важную роль в быстродействии сайта. Если сервер не справляется с нагрузкой, сайт не просто будет медленным – он «ляжет». Недоступный сайт – это ущерб бренду и прямые убытки. А если поисковый бот обнаружит, что сервер хронически недоступен и часто не отвечает на запросы, рейтинг сайта упадет.

Для нагруженного проекта и интернет-магазина лучше использовать VPS. Выделенный сервер обеспечивает сайт необходимым количеством ресурсов, дает возможность настройки сервера, а главное – избавит от «шумных» соседей, которые могут повлиять на быстродействие.

6) Используйте CDN.

CDN – распределенная сеть доставки контента. Каждый узел сети кэширует статический контент сайта (обычно это изображения, javascript и css). Узлы CDN распределяются географически, и на запрос пользователя отвечает не основной сервер, а альтернативные, близкие по местоположению. Это сокращает время ожидания и снижает нагрузку на хостинг.

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

Основной нюанс: нужно понимать, откуда к вам идут посетители. Нет нужды использовать узлы CDN, географически удаленные от аудитории, это может даже замедлить загрузку контента.

7) Используйте точки разрыва для мобильных устройств.

Точка разрыва – один из определяющих терминов адаптивной html-верстки. Она определяется соответствием дисплея заданным условиям, когда сайт масштабируется под определенный размер дисплея.

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

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

Но учтите: если точек разрыва слишком много, есть риск запутаться в них и связанных с ними классах CSS.

8) Откажитесь от веб-шрифтов или оптимизируйте их.

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

Теперь можно разместить желаемый шрифт непосредственно на сервере, либо обратиться к набору шрифтов от Google.

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

Веб-шрифты, особенно плохо оптимизированные, серьезно замедляют загрузку, а чтобы включить их кэширование в браузере, придется настраивать сервер.

9) Кэшируйте!

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

Лучший способ оптимизировать запросы страницы к серверу — не делать эти запросы. Чтобы избежать их, нужно использовать кэш. По умолчанию время кэширования определяет сам браузер, но вы можете его корректировать.

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

Кроме браузерного кэширования, есть и другие типы, но эти вопросы оставьте для IT-отдела.

P.S. Этих инструментов и рекомендаций вполне достаточно, чтобы ускорить загрузку страниц. Начните с тестов, а с возникающими вопросами обращайтесь к разработчикам сайта и команде техподдержки хостинга.