Как увеличение скорости загрузки страницы на 1/10 секунды может помочь заработать дополнительные 500000 долларов?

В нашем совместном стремлении продвигать Интернет, чтобы сделать больше, мы сталкиваемся с общей проблемой: производительность. У сайтов больше возможностей, чем когда-либо прежде. Настолько, что многие сайты теперь пытаются достичь высокого уровня производительности в различных сетевых условиях и устройствах.

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

П Производительность - это сохранение пользователей

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

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

Вот пара тематических исследований, в которых низкая производительность негативно повлияла на бизнес-цели:

В том же исследовании DoubleClick by Google, о котором говорилось выше, было обнаружено, что загрузка сайтов в течение 5 секунд была на 70% более длительной, 35% ниже, чем у респондентов, и на 25% выше, чем у сайтов, занимающих почти четыре раза дольше в 19 секунд. Чтобы получить общее представление о том, как производительность вашего сайта сравнивается с вашими конкурентами, ознакомьтесь с инструментом Speed Scorecard .

П Производительность - это улучшение конверсий

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

Если вы управляете бизнесом в Интернете, производительность имеет решающее значение. Если пользовательский интерфейс вашего сайта быстро реагирует на ввод пользователя, он может служить вам только хорошо. Чтобы узнать, как производительность потенциально может повлиять на ваш доход, ознакомьтесь с инструментом Impact Calculator .

П Производительность - это пользовательский интерфейс

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

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

Производительность является основополагающим аспектом хорошего пользовательского опыта. Когда сайты отправляют много кода, браузеры должны использовать мегабайты пользовательского плана данных для загрузки кода. Мобильные устройства имеют ограниченную мощность и память ЦП. Они часто перегружены тем, что мы можем считать небольшим количеством неоптимизированного кода. Это создает плохую производительность, что приводит к невосприимчивости. Зная, что мы знаем о человеческом поведении, пользователи будут терпеть только низкопроизводительные приложения так долго, прежде чем отказаться от них. Если вы хотите узнать больше о том, как оценить производительность вашего сайта и найти возможности для улучшения, ознакомьтесь с рекомендациями « Как думать о скоростных средствах» .

П Производительность - это люди

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

Поскольку мобильные пользователи продолжают составлять большую часть пользователей Интернета по всему миру , важно иметь в виду, что многие из этих пользователей получают доступ к сети через мобильные сети LTE, 4G, 3G и даже 2G. Как отмечает Бен Шварц из Caliber в этом исследовании производительности в реальном мире , стоимость предоплаченных планов данных снижается, что, в свою очередь, делает доступ к Интернету более доступным в тех местах, где раньше его не было. Мобильные устройства и доступ в Интернет уже не роскошь. Они являются общими инструментами, необходимыми для навигации и функционирования во все более взаимосвязанном мире.

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

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

К Куда пойти отсюда

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

П Помните, какие ресурсы вы отправляете

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

  • Если вы используете Bootstrap или Foundation для создания пользовательского интерфейса, спросите себя, нужны ли они. Такие абстракции добавляют кучи CSS, которые браузер должен загружать, анализировать и применять к странице, все до того, как ваш сайт-специфический CSS войдет в изображение. Flexbox и Grid превосходны при создании простых и сложных макетов с относительно небольшим количеством кода. Поскольку CSS является ресурсом блокировки рендеринга , накладные расходы CSS-структуры могут значительно замедлить рендеринг. Вы можете ускорить рендеринг, удаляя ненужные служебные данные, когда это возможно.
  • Библиотеки JavaScript удобны, но не всегда необходимы. Возьмите JQuery, например: выбор элемента был значительно упрощен благодаря методам , как querySelector и querySelectorAll. С привязкой к событиям легко справиться addEventListener. classList, setAttributeиgetAttribute предлагают простые способы работы с классами и атрибутами элементов. Если вы должны использовать библиотеку, исследуйте более компактные альтернативы. Например, Zepto - это меньшая альтернатива jQuery, а Preact - гораздо меньшая альтернатива React.
  • Не все веб-сайты должны быть одностраничными (SPA), поскольку они часто используют JavaScript. JavaScript - это самый дорогой ресурс, который мы обслуживаем в байте Интернета для байта , поскольку его нужно не только загружать, но анализировать, компилировать и выполнять.Например, новостные и блог-сайты с оптимизированной архитектурой переднего плана могут хорошо работать как традиционные многостраничные события. В частности, если HTTP-кеширование настроено правильно и, при необходимости, используется служебным работником .

О Обратите внимание, как вы отправляете ресурсы

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

И Имейте в виду, сколько данных вы отправляете

Вот несколько советов по ограничению количестваотправляемых вами данных:

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

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

Отдельное спасибо , Джефф Posnick , Мэтт Гонта , Филип Уолтон , , Daniel An , и Пит LePage для их обширной обратной связи в улучшении и запуск этого ресурса!