Меню
Статьи
10 ноября 2014

Как увеличить скорость сайта и удержать посетителя на примере The Guardian

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

Скорость имеет значение. Особенно когда речь идет о новостях. Это хорошо знают и The Guardian с их 100-миллионной аудиторией читателей. Проведя опрос среди читателей, команда The Guardian обнаружила следующее. 

Из 17 параметров удобств сайта скорость загрузки оказалась на втором месте по популярности, уступив только удобству навигации

Что делает The Guardian? Сокращает время загрузки сайта с 13,3 до 5,2 секунд, т.е. в 2,6 раза или на 8 секунд. В результате это привело к существенному увеличению времени и глубины просмотра сайта каждым из 100 миллионов читателей. Скорость сайта руководство проекта сравнивает с бюджетом: для нее выставляется жесткое ограничение, и ни при каких обстоятельствах за это ограничение нельзя выходить. Отсюда законный вопрос:

Когда сайт работает быстро?

На основе опыта The Guardian и многих других интернет-проектов, можно сделать следующие выводы:

  • Когда основное содержание страниц доставляется в первую очередь. Для этого макеты всех страниц сайта нужно пересмотреть на предмет выделения главного и второстепенного содержания.
  • Когда основное содержание показывается в течение 1000 мс (1 секунды). Откуда эта цифра? 0,2 секунды уйдет на установление IP-адреса сервера (DNS-запрос), 0,2 секунды — на установление соединения и 0,2 секунды — на запрос данных (страницы) с сервера. И на эти задержки для каждого конкретного пользователя повлиять нет никакой возможности.
  • Когда происходит плавное улучшение функционала в процессе загрузки сайта. Пусть под конец загрузки посетитель будет приятно удивлен открывшимися возможностями и инструментами. Но сначала все же он должен увидеть главное.
  • Когда каждый запрос измеряется и анализируется.

Делайте выводы из измерений и постоянно оптимизируйте, «докручивайте». Или посетитель просто уйдет.

Что же нужно, чтобы сайт работал быстрее?

  • Получить таблицы стилей (CSS) максимально быстро

Для этого достаточно выделить только те правила CSS, которые необходимы для отображения содержания первого экрана, и загрузить их в первую очередь. Такие правила еще называют Критические CSS-правила.

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

  • Максимально использовать кэш

Это была проблема для команды The Guardian, работающей над оптимизацией сайта для мобильных устройств. Проблема заключалась в небольшом размере кэша — сохраняемых данных сайта, а также в его регулярном сбросе. Дело в том, что из-за посещения большого количества сайтов или страниц происходит удаление «старых» файлов.

Решение было найдено: для The Guardian альтернативой браузерного кэша стало использование технологии localStorage, что как раз и позволило по максимуму использовать кэш.

Чем закончилась эта история для The Guardian?

К счастью, хэппиэндом. Сокращение скорости загрузки сайта в два раза привело к последовательному увеличению аудитории сайта в те же 2 раза за несколько месяцев. 

Кроме того, максимально быстрое и комфортное отображение сайта на всех типах устройств позволило увеличить глубину просмотра, а это одна из главных метрик новостного сайта. Так The Guardian смог укрепить свои лидерские позиции как авторитетного источника новостей.

Делитесь своим мнением, советами и комментариями!

А
Александр Зотов Не задумывался раньше о скорости загрузки. А ведь правда от нее много что зависит. Спасибо за наводку! ))
6 лет назад •
Ответить
В
Валерий Тумаш Александр Зотов, мы программиСты обычнО про это Знаем, но далеко не все клиенты готоВы за это платить. ВЕдь это немалый ДополнителЬный кусок РаБоты
6 лет назад •
Ответить
В
Валерий Тумаш Александр Зотов, мы программиСты обычнО про это Знаем, но далеко не все клиенты готоВы за это платить. ВЕдь это немалый ДополнителЬный кусок РаБоты
6 лет назад •
Ответить
S
Sergey salkutsan to Валерий Тумаш,
ну, есть вещи, которые почти ничего не стоят (в плане объема работы). Например, выставить ключевые CSS в начале, а не в конце - не стоит ни копейки. Это должно быть СТАНДАРТОМ работы хорошего программиста. И за это ДЕЙСТВИЕ платить глупо.
А вот за сам УРОВЕНЬ ПРОФЕССИОНАЛИЗМА клиенты опосредовано платят, выбирая соответствующую студию. агентство или фирму. Заказывая сайт у А.Лебедева клиент серьезно переплачивает, по сравнению со "среднерыночной стоимостью, именно за то, что ему не нужно проверять, а грамотно ли написан HTML код, robot.txt и прочие "невидимые технологии". За такие деньги заказчик ожидает безупречное качество в любых аспектах, от дизайна и копирайта, до SEO фишек и тонкостей программирования.
Другой вопрос, если для достижения некоторых не очевидных, но важных параметров нужно действительно много поработать за рамками типовых решений. Но это уже работа другого профессионала - вашего продавца, поскольку сами программисты редко бывают толковыми "продажниками".
Каждый должен заниматься своим делом!
Обоснуйте, покажите, убедите - и любой заказчик задумается.
Гарантируйте результат - и большинство предпринимателей рискнет.
Покажите эффект - и они с радостью повторят заказ.
Что из этого вы реально можете?
5 лет назад •
Ответить
А
Андрей Ловыгин Вот это очень полезно. Спасибо. Пошел пинать своего програмиста )))
6 лет назад •
Ответить
С
Сергей Колпаков Увеличение скорости загрузки сайта - это еще один пункт в Money Making, если сайт является инструментом продаж. В какой-то статье видел диаграммы с показателями крупных интернет-магазинов, таких как amazon, ebay и т.д. Они соотносят показатель скорости загрузки страниц напрямую с выручкой.
К тому же, поисковики не любят медленные сайты!
6 лет назад •
Ответить
В
Валерий Тумаш НеправильНо работает Моб версия. ТяжеДо оставлять Комменты
6 лет назад •
Ответить
В
Валерий Тумаш НеправильНо работает Моб версия. ТяжеДо оставлять Комменты
6 лет назад •
Ответить
А
Александр Бурый Отличная статья =)
У меня есть сайт. На бесплатной основе. Но я не знал что столько факторов может повлиять на него.
5 лет назад •
Ответить
Похожие статьи