Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров

в 10:06, , рубрики: edmunds, веб-аналитика, глубина просмотра, доход от рекламы, интернет-маркетинг, Повышение конверсии, показатель отказов, ускорение сайта
Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 1

Edmunds.com – один из топовых сайтов автомобильной тематики в США. Компания существует 1966 года, в то время выпускала печатные издания, с 1995 года – онлайн. Ежемесячно посетители сайта просматривают более 200 миллионов страниц. Выручка компании складывается из показа рекламы на сайте и продажи лидов автодилерам.

Так выглядел сайт до начала усилий по ускорению его загрузки. Вполне в духе того времени: уместить как можно больше информации и ссылок до «сгиба», то есть в видимой части страницы.

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 2

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

Исходная ситуация

На команду, ответственную за сайт, в свое время произвело большое впечатление выступление Стива Саудерса, одного из «лидеров мнений» в области ускорения сайтов. Стив заявил «95% производительности – это фронт-енд».

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

У сайта был набор проблем, связанных с фронтендом:

  • Слишком много запросов: более 150.
  • Много блокирующих запросов: более 20.
  • Медленная загрузка: событие onLoad через 8,4 секунды после начала загрузки.
  • Отсутствие кэширования.
  • Все запросы обрабатываются одним доменом.
  • Ряд внешних факторов: реклама, видео и т.д.
  • Зависимость от событий DOM.

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 3

Ускорение сайта: базовые меры

Первое, что сделала команда, это обратила внимание на CDN. Немного изменили настройки в Akamai, добавили заголовок истечения срока действия (на изображениях, CSS и JS-файлах), удалили Етэги.

Результаты от одного только этого действия поразили:

  • Трафик сократился на 34%.
  • Экономия трафика составила 34 ТБ.
  • В рамках своего контракта с Akamai, поскольку трафик уменьшился, команде удалось согласовать бесплатный стриминг видео на протяжении 2-х лет.

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

Продвинутое ускорение сайта

В сентябре 2008 года у команды появилась возможность реализовать все свои задумки на сайте InsideLine.com – другой сайт компании (сейчас является частью Edmunds.com), который приносил гораздо меньше выручки. Руководство было готово разрешить экспериментировать с ним и реализовать для ускорения сайта все, на что была способна команда, вплоть до его глобальной переделки.

Цели были установлены следующие:

  • Ускорить сайт: событие onLoad <= 1,5 секунды.
  • Обеспечить более «богатый контент» — flash и видео на сайте, различные «красивости» в части дизайна.
  • Улучшить выручку за счет показа рекламы.

HTTP-запросы

Первым делом команда взялась разбираться с http-запросами: они были собственные и сторонние.

С собственными запросами команде было относительно понятно, что делать: объединять файлы, использовать спрайты, использовать URI для изображений в некоторых случаях и т.д. С этим все было относительно просто. Основную проблему представляли как раз сторонние запросы. Сторонние запросы были представлены в 2-х видах, со своими плюсами-минусами:

Javascript:

  • Плюс: более «богатый» контент
  • Минусы: доступ к DOM, `document.write`

iFrame:

  • Плюсы: легко загружать постепенно (lazy-load), фактическая «песочница» кода.
  • Минусы: фиксированная высота/ширина

На сайте использовалось и то и другое:

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 4

В отношении сторонних Javascript-запросов была предпринята попытка их контролировать через перехват функции document.write() таким образом:

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 5

Однако это не сработало в случае с вложенными document.write(), и от этого пути отказались.

Вторая попытка заключалась в том, чтобы поместить рекламный модуль со сторонним Javascript-запросом внутрь iFrame, например так:

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 6

Дальше возможны два варианта:

  • Отслеживать событие onLoad внутри iFrame.
  • Сообщать со страницы с iFrame родительской странице, когда загрузка завершена.

Это прекрасно работало в Chrome, Firefox и Safari, но не работало с IE7, и от этого пути тоже отказались ради простоты в поддержке.

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

В связи с этим команда написала свой Javascript-загрузчик различных компонентов.

Загрузка сторонних модулей

Загрузка страницы стала строиться следующим образом:

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

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 7

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

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 8

Затем браузер рендерит все такие компоненты, и пользователь начинает видеть их на экране.

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 9

Внутри процесс регистрации выглядел так:

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 10

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 11

Третий главный вывод, который сделала команда, – нужно относиться ко всем внешним компонентам как к «черному ящику» по следующей логике:

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 12

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 13

Основные выводы следующие:

  • Вы не можете контролировать все.
  • То, что вы контролируете, надо сделать максимально быстрым.
  • Стоит относиться к внешним компонентам, как к «черному ящику».

Итоги

Итоговые результаты оказались следующие:

  1. Страница стала грузиться намного быстрее: событие onLoad наступало через ~1,5 с
    Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 14
  2. На странице использовался разнообразный, динамичный контент: flash, видео и множество изображений.
  3. Выручка от рекламы улучшилась: показы рекламы увеличились на 3%.

Вдохновленное такими результатами, руководство компании дало «добро» на применение этих разработок на своем главном сайте Edmunds.com. Параллельно также был запланирован редизайн сайта Edmunds.com.

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 15

Эти подходы прекрасно показали себя и на сайте Edmunds.com. В частности, время загрузки снизилось на ~80% и достигло 1,9 сек.

Как компания Edmunds ускорила свой сайт на 80% и получила на 20% больше просмотров - 16

И в заключение отметим, что сама по себе скорость загрузки, это не цель бизнеса. Но вслед за таким ускорением последовали и бизнес-результаты:

  • Количество просмотренных страниц пользователем за 1 сессию: +20%
  • Рост доходов от рекламы: +3%.
  • Снижение процента отказов (bounce rate): 4%.

Автор: sunnybear

Источник

Поделиться новостью

* - обязательные к заполнению поля