Базар Голос
Опубликовано: 2024-02-14Любой, кто ходил за продуктами накануне большого праздника, знает, как больно кружить в поисках места для парковки и пробиваться к вещам, которые нужны пятидесяти другим людям. Это не тот опыт, который кто-то хочет повторить в своем интернет-магазине, но вы можете это сделать, если не приложите усилия для улучшения производительности своего веб-сайта.
Ладно-ладно, возможно, мы немного преувеличиваем. Нет ничего хуже, чем пытаться найти приличную картошку, пока из аудиосистемы магазина звучит ваша нелюбимая рождественская песня. Однако мы знаем, что покупателям нравится удобство покупок в Интернете. Почти 70% потребителей учитывают скорость сайта при своей готовности совершать покупки в интернет-магазинах. И большинство онлайн-покупателей ожидают, что время загрузки страницы составит 3 секунды или меньше.
Если вы в последнее время не проверяли производительность своего веб-сайта, значит, давно пора. Ниже описано, как оценить текущую эффективность, а также некоторые шаги, которые каждый может предпринять для оптимизации сайта электронной коммерции для более быстрого совершения покупок.
Главы:
- Почему важна производительность сайта
- 7 основных показателей эффективности веб-сайта
- Как измерить эффективность вашего сайта
- Как улучшить производительность вашего сайта электронной коммерции
- Производительность веб-сайта зависит от скорости
Почему важна производительность сайта
Имеет ли это значение, если вы не достигнете 3-секундной отметки загрузки? Да, это так. Если вы не расставите приоритеты со скоростью загрузки веб-сайта, это ухудшит качество вашего пользовательского опыта, и это плохо во многих отношениях.
Первое и самое очевидное: увеличение времени загрузки означает увеличение показателя отказов. Даже пользователи, которые выдерживают первые несколько медленных загрузок страниц, могут отказаться от вашего сайта, прежде чем совершить покупку.
Более низкие начальные коэффициенты конверсии, вероятно, будут сопровождаться более низкой лояльностью в целом. Клиенты, которые помнят свой неоптимальный опыт покупок, с меньшей вероятностью вернутся, чтобы повторить попытку, и они не захотят переходить по ссылкам, которые ведут их на ваш сайт.
Плохая производительность веб-сайта также влияет на ваш рейтинг в поисковой выдаче Google. Поскольку алгоритм поисковой системы отдает приоритет пользовательскому опыту, страницы с медленной скоростью загрузки опускаются в результатах поиска. Небольшие торговые точки, конкурирующие за внимание, могут проиграть своим более быстрым конкурентам.
7 основных показателей эффективности веб-сайта
Время загрузки страницы не является отдельным показателем производительности веб-сайта. Это комплексная оценка, объединяющая несколько показателей. Четыре из этих показателей являются основными веб-показателями Google:
- Largest Contentful Paint измеряет скорость загрузки самого большого элемента страницы, который пользователи могут видеть «над сгибом», то есть без прокрутки вниз.
- Взаимодействие с Next Paint измеряет реакцию страницы на такие взаимодействия, как нажатие кнопки «Добавить в корзину» или ввод информации в форму.
- Первая задержка ввода измеряет временной промежуток между тем, когда пользователь взаимодействует с вашим веб-сайтом (скажем, нажимает кнопку «Добавить в корзину») и когда его браузер начинает обрабатывать этот запрос.
- Совокупный сдвиг макета измеряет, как часто содержимое страницы перемещается во время загрузки страницы.
Google считает эти аспекты наиболее важными, поскольку они оказывают наибольшее влияние на пользовательский опыт. Однако есть еще четыре показателя, которые также отражают важные аспекты пользовательского опыта:
- Время до первого байта измеряет скорость, с которой ваш DNS-провайдер начинает доставлять контент вашего веб-сайта после получения запроса.
- Общее время блокировки измеряет, сколько времени требуется веб-странице для загрузки достаточного количества времени, чтобы пользователь мог с ней взаимодействовать (поскольку браузеры, находящиеся в процессе загрузки страниц, не могут обрабатывать взаимодействия).
- First Contentful Paint измеряет, сколько времени требуется для отображения первого содержимого вашего веб-сайта.
Если вы хотите углубиться в какой-либо из этих показателей, на сайте Google web.dev объясняется, почему каждый из них важен и как их измерять. Или вы можете просто продолжать читать, пока мы обсуждаем измерение эффективности вашего сайта.
Как измерить эффективность вашего сайта
Измерить эффективность вашего сайта легко с помощью бесплатного инструмента PageSpeed Insights от Google. Этот инструмент оценивает ваш сайт по перечисленным выше показателям и оценивает его как хороший, требующий улучшения или плохой. Вы также получите заметки о производительности, доступности, использовании лучших практик и SEO вашего сайта.
Существует возможность просмотреть, как ваш сайт работает на мобильных и настольных устройствах, а также советы, которые помогут вам оптимизировать ваш сайт. Вы получаете большую помощь за низкую цену жизни в веб-экосистеме Google, и давайте посмотрим правде в глаза — это уже происходит.
Просматривая свой отчет, вы можете заметить, что общее время блокировки исключено из поля «Оценка основных веб-показателей». Прокрутите вниз до поля «Производительность», затем просмотрите таблицу «Метрики», чтобы увидеть свои результаты.
PageSpeed Insights позволяет легко понять, почему ваш сайт получил такой рейтинг, с помощью цветной графики и персонализированных советов. Проведите тест прямо сейчас — это займет всего несколько секунд — чтобы вы могли получить базовые показатели производительности вашего сайта и увидеть, где у вас есть возможности для улучшения.
Как улучшить производительность вашего сайта электронной коммерции
Если вы все еще здесь, мы будем считать, что ваша оценка основных веб-жизненных показателей показала, что вам есть над чем поработать. В этом нет ничего постыдного. Даже сайт Google web.dev не проходит оценку! Вот наши лучшие советы, которые помогут вам улучшить производительность вашего веб-сайта электронной коммерции, а также инструменты, необходимые для этого.
1. Сократите количество HTTP-запросов
HTTP-запросы лежат в основе загрузки веб-страниц. Здесь вам не нужно знать технических особенностей — только то, что браузер должен делать эти запросы для загрузки CSS-файлов, скриптов, изображений и другого контента на вашей странице. Каждый запрос требует, чтобы браузер отправил сообщение на ваш веб-хост, который затем должен ответить соответствующим контентом.
Чем больше у вас HTTP-запросов, тем больше времени потребуется для их выполнения. Представьте себе, что вы пришли в ресторан и сначала попросили воды, а затем, когда официант вернулся, заказали газировку. Когда принесли газировку, ты попросил закуску. И, наконец, после того, как принесли закуску, вы определились с первыми блюдами. Вам понадобится много времени, чтобы получить и закончить еду, независимо от того, насколько быстро работает ваш сервер.
Дайте вашему (веб) серверу передышку, исключив ненужные HTTP-запросы. Если вам не нужен скрипт или файл CSS, не ссылайтесь на него в заголовке страницы. Вы также можете попробовать сократить мультимедийный контент, чтобы увеличить скорость загрузки страницы.
2. Используйте HTTP/2
Не все HTTP-запросы одинаковы. HTTP/2, стандарт, дебютировавший в 2015 году, обладает возможностями, которые помогают вашим веб-страницам загружаться быстрее. Во-первых, это позволяет разработчикам расставлять приоритеты, какие элементы загружаются первыми, поэтому вы можете указать браузерам запрашивать легкие ресурсы перед более крупными скриптами. Он также может обслуживать несколько ресурсов одновременно. Возвращаясь к нашей метафоре ресторана, HTTP/2 позволяет вам отдать весь заказ сразу, чтобы официант мог быстрее доставить вам еду.
KeyCDN имеет бесплатный тест HTTP/2, чтобы определить, поддерживает ли ваш сайт протокол HTTP/2. Или, если вы хотите посмотреть поближе, откройте инструменты разработчика вашего браузера, перейдите на вкладку «Сеть» и найдите столбец «Протокол». (Возможно, вам придется щелкнуть правой кнопкой мыши список столбцов и добавить Протокол.)
Поддержка HTTP/2 определяется вашим веб-хостингом, поэтому к нему можно обратиться, если вам нужно включить протокол. Этот процесс различен для каждого провайдера.
3. Устраните ненужные редиректы
Многие компании используют перенаправления, чтобы обойти порчу ссылок во время ремонта веб-сайта. Однако каждый раз, когда вы перенаправляете пользователя на новую страницу, вы заставляете его ждать загрузки другой страницы. Особенно редиректы, ведущие к другому редиректу — нет, спасибо! К тому времени, когда пользователь достигнет фактического URL-адреса, он уже будет готов закрыть вашу страницу.
Перенаправления имеют обыкновение накапливаться со временем. Это означает, что вам необходимо периодически их проверять; особенно важно делать это после любого редизайна или изменения архитектуры вашего веб-сайта.
Screaming Frog SEO Spider может помочь вам проверить весь ваш сайт на наличие перенаправлений и даже обнаружить цепочки и циклы перенаправлений. Вы также можете использовать панель инструментов Ahrefs SEO для проверки страницы за страницей, но мы бы не рекомендовали это делать. Если только у вас нет обязательств, от которых вы действительно хотите избавиться.
4. Ограничьте внешние скрипты
Большинство разработчиков используют сторонние скрипты для добавления функциональности, на создание собственного кода у которых нет ресурсов. Однако включение внешних скриптов всегда рискованно с точки зрения скорости страницы. У вас нет контроля над кодом, поэтому вы ничего не сможете сделать, если скрипт загружается медленно.
Скрипты с медленной загрузкой приводят к тому, что страницы загружаются дольше и могут вызывать такие проблемы, как скачки контента (измеряемые по показателю совокупного смещения макета).
Проверьте каждую страницу, чтобы убедиться, что не загружаются ненужные скрипты. Например, у вас может быть включена функция отзывов на вашем сайте в целом, но вам не нужно, чтобы этот скрипт был включен на страницы, предназначенные для просмотра. Вы также можете спросить себя, действительно ли вам нужен этот модальный модуль для сбора электронных писем клиентов или он отключает больше покупателей, чем привлекает.
Больше наворотов не всегда лучше. Простой веб-сайт с хорошим пользовательским интерфейсом может помочь перегруженному магазину.
5. Включить отложенную (асинхронную) загрузку
Когда браузер отображает веб-сайт, он по умолчанию обрабатывает каждый запрос по порядку, переходя к следующей команде только после завершения текущей задачи. Большие скрипты замедляют весь процесс, поскольку браузер должен загрузить весь файл, прежде чем он сможет перейти к рендерингу остального контента.
Избегайте этой задержки, предписывая браузеру асинхронно загружать ваши сценарии, то есть продолжая отображать веб-страницу. Просто добавьте атрибут async в теги вашего скрипта (ваш код будет выглядеть примерно так: <script src="my_script.js" async></script>).
Некоторые эксперты рекомендуют добавлять теги <script> в нижней части содержимого основного текста, поскольку старые браузеры могут не иметь возможности читать атрибут async, но в этом нет необходимости. Вам будет сложно найти браузер, который не мог бы обрабатывать тег async.
6. Используйте дизайн, ориентированный на мобильные устройства
Оптимизация производительности веб-сайта должна включать в себя мышление, ориентированное на мобильные устройства. Смартфоны в настоящее время являются источником почти четырех из пяти посещений веб-сайтов электронной коммерции и двух из трех покупок в электронной коммерции. К сожалению, мобильный Интернет по-прежнему мешает. Большинство сайтов загружаются на мобильных устройствах гораздо дольше. Поскольку более 50% мобильных посетителей готовы покинуть сайт, если загрузка сайта занимает более 3 секунд, ритейлеры электронной коммерции, вероятно, теряют большую часть бизнеса.
Почти каждый веб-сайт, опубликованный в наши дни, адаптивный, но дизайнеры, которые пишут код для настольных компьютеров, а затем оптимизируют его для мобильных устройств, возможно, действуют в неправильном порядке. Использование эмуляторов мобильных телефонов для дизайна для маленьких экранов ставит потребности этой растущей аудитории на первый план.
Кроме того, это просто: инструменты разработчика Google Chrome позволяют вам войти в «режим устройства», чтобы увидеть, как ваш сайт будет выглядеть на небольших экранах.
Проектирование для мобильных телефонов также требует от вас максимально использовать ограниченное пространство экрана, что может означать, что вы выберете меньше декоративных элементов, которые могут замедлить просмотр страницы. Вам также захочется упростить навигацию и взаимодействие, а не использовать яркие или уникальные возможности, требующие внешних скриптов и плагинов.
Если вы работаете с существующим сайтом, вы, вероятно, не сможете реализовать эту практику прямо сейчас. Просто имейте это в виду при следующем редизайне.
7. Сжатие текстовых файлов с помощью gzip
Файлы HTML и CSS могут показаться несложными для загрузки, но когда вы считаете миллисекунды, каждый байт имеет значение. Сжатие уменьшает размер текстовых файлов, поэтому они могут быстрее перемещаться с вашего сервера в браузер клиента. Gzip — наиболее распространенная среда сжатия, но Brotli и Deflate также хорошо ускоряют ваш сайт.
Это еще одна функция, настроенная на стороне хостинга. Большинство хостов включают его по умолчанию, но полезно проверить его с помощью бесплатного теста HTTP-сжатия. Если вы обнаружите, что ваш контент не сжат, пришло время обратиться к вашему хостинг-провайдеру.
8. Минимизируйте файлы CSS, JavaScript и HTML.
Платформы сжатия, такие как Gzip, не единственные, кто экономит байты. Вы также можете минимизировать текстовые файлы, удалив все, что не является ключевой частью кода — например, комментарии, форматирование или длинные имена переменных. Многие из этих элементов полезны для разработчиков, но веб-браузерам они не нужны для непосредственного отображения вашей веб-страницы.
Нет необходимости самостоятельно просматривать и удалять комментарии, лишние пробелы и табуляции. Minifier.org предлагает бесплатный инструмент, который может обрабатывать CSS и JavaScript. Web.dev от Google рекомендует этот бесплатный минификатор HTML.
Если вы ищете инструменты для массового минимизации, модуль Google PageSpeed работает с веб-серверами Apache или Nginx и автоматически минимизирует ваши файлы. Однако для установки таких инструментов или CSSNano может потребоваться обращение в ИТ-отдел.
9. Оптимизируйте изображения и видео
Мультимедийные файлы часто снижают производительность веб-сайта просто потому, что они очень большие. Продавцы электронной коммерции, которые в значительной степени полагаются на изображения и видео, должны тщательно оптимизировать эти файлы, чтобы снизить нагрузку на интернет-соединения посетителей.
Самая простая часть оптимизации изображений — изменение их размера. Ни один файл не должен превышать 20 мегабайт (МБ), но на самом деле такого размера должны быть только ваши главные изображения. Shopify рекомендует продавцам по возможности хранить изображения размером около 500 килобайт (КБ), хотя они допускают, что некоторым сайтам требуются файлы размером до 2 МБ. Для достижения этих целей вам, вероятно, придется сжать изображения. К счастью, существует множество бесплатных инструментов сжатия изображений, которые вы можете использовать.
Уменьшив размер файлов, убедитесь, что вы используете принципы адаптивного дизайна, чтобы пользователи могли быстрее загружать ваш сайт с небольших устройств. MDN Web Docs, управляемый Mozilla, содержит хорошее руководство по адаптивным изображениям, которому вы можете следовать, если вы новичок в этом предмете.
10. Воспользуйтесь преимуществами кэширования браузера
Веб-браузеры могут хранить файлы локально на компьютерах пользователей, что ускоряет время загрузки для постоянных посетителей. Вместо того, чтобы обращаться к вашему серверу за каждым файлом, браузеры могут извлекать кэшированные ресурсы из локальной памяти компьютера.
Кэширование — отличное решение для большинства продавцов электронной коммерции, поскольку ваши активы остаются довольно статичными. Если вы проводите капитальный ремонт сайта или заменяете изображения продуктов, вам необходимо убедиться, что в браузерах есть инструкции по повторной загрузке нового контента и замене кэшированных ресурсов. Однако для большинства интернет-магазинов это достаточно редкое явление, поэтому настройка кэширования является правильным решением.
Ваш веб-хостинг снова является стороной, отвечающей за ваши настройки кеширования. Вам нужно будет найти его документацию и следовать инструкциям, чтобы включить локальные кэши и установить даты истечения срока действия (которые указывают браузерам, как часто им следует обновлять кэшированные ресурсы с вашего сайта).
11. Используйте сеть доставки контента (CDN)
Кэш браузера помогает только той аудитории, которая уже заходила на ваш сайт раньше. Сети доставки контента, или CDN, хранят ресурсы как можно ближе к каждому посетителю, чтобы сократить время загрузки.
CDN не полагаются на локальные машины для хранения ресурсов. Они просто распределяют ваши активы по сети серверов в разных местах. Это означает, что вместо одного сервера в Вирджинии, отвечающего на все запросы, у вас может быть сервер в Вирджинии, один в Калифорнии, один в Иллинойсе и так далее. Компании, обслуживающие международную аудиторию, могут работать с международными CDN, поэтому у них есть серверы в разных странах, регионах и континентах.
Всякий раз, когда браузер отправляет запрос на загрузку вашего веб-сайта, этот запрос направляется на сервер, который географически ближе к пользователю. Возможно, это не звучит как огромная экономия времени, но поскольку скорость загрузки страниц измеряется в очень небольших масштабах, CDN имеют заметное значение.
12. Регулярно проверяйте свои плагины
Плагины, надстройки и расширения значительно экономят время для большинства веб-разработчиков. Но, как и внешние скрипты, раздутые плагины могут снизить скорость вашей страницы. Улучшите производительность своего веб-сайта, пересмотрев библиотеку плагинов и проверьте, есть ли какие-нибудь приставки, которые вы больше не используете.
Иногда вам нужны все ваши плагины, но ваши страницы по-прежнему загружаются слишком медленно. В таком случае пришло время выяснить виновника. Скопируйте свой сайт в промежуточную среду, отключите все плагины и проверьте скорость загрузки сайта. Затем включите плагины по одному, чтобы определить, снижает ли один плагин ваши показатели производительности. (Убедитесь, что вы включили, протестировали, а затем отключили каждый плагин, чтобы случайно не измерить совокупный эффект.)
К счастью, с таким количеством плагинов вы, вероятно, сможете найти замену любым медлительным инструментам.
Еще один вариант — поискать плагины, оптимизированные по скорости. Например, наша технология отображения рейтингов и обзоров была разработана для обеспечения быстрой работы вашего веб-сайта, и наши разработчики поделились шагами, которые они предприняли для выполнения этого обещания. Найдите инструменты, созданные в этом духе — те, которые используют лучшие практики, такие как минимизация и сокращение файлов сценариев, кэширование и отложенная загрузка — чтобы упростить аудит.
13. Удалите ненужные всплывающие окна
Да, мы скажем это. Всплывающие окна очень непопулярны. Они приводят к неприятному опыту, особенно на мобильных устройствах. Даже если вы думаете, что ваши всплывающие окна сделаны со вкусом и полезны, интернет-пользователи целый день сталкиваются с шквалом модальных окон, наложений и виджетов чата. У всех есть всплывающие окна, которые утомляют, и если вы вносите свой вклад, вы подрываете доверие потребителей.
Большинство всплывающих окон вызывают внешние скрипты и ссылаются на такие ресурсы, как изображения и шрифты, которые браузер должен загрузить. Модальные окна, которые появляются условно, перед срабатыванием должны собирать данные об аудитории, что тоже требует времени. А если общее время блокировки велико, пользователи, возможно, не смогут закрыть эти элементы при отображении остальной части вашего сайта. Эта задержка повлияет на восприятие пользователями скорости вашего сайта, даже если фактического замедления не было.
Однако замедление является реальным, как и почти всеобщая неприязнь к этим инструментам. Удаление их со своего сайта — беспроигрышный вариант.
14. Выбирайте самые быстрые услуги
Когда клиент нажимает ссылку или вводит URL-адрес, он сообщает своему браузеру запросить службу DNS, чтобы перенаправить его на целевой сайт. Эта служба DNS направляет браузер на IP-адрес вашего сайта. Затем их браузер начинает читать ваши HTML-файлы и запрашивать ресурсы с вашего сервера или CDN, чтобы он мог отобразить созданный вами веб-сайт.
Для создания вашего сайта объединяется множество сервисов. Если какой-либо из них работает медленно, это отрицательно повлияет на скорость вашей страницы. Вот почему самый дешевый вариант не обязательно является лучшим вариантом для вашей технической инфраструктуры.
Например, многие базовые планы хостинга веб-сайтов являются общими. Это означает, что другие веб-сайты используют тот же сервер, что и вы, поэтому всплеск трафика с одного из них может замедлить время загрузки. Хостинг VPS (для растущих сайтов) или выделенные серверы веб-сайтов (для тех, кто может себе это позволить) дадут лучшие результаты.
Вы также хотите убедиться, что ваш регистратор доменов, который занимается DNS-хостингом, работает высокоэффективно. DNSPerf ведет постоянный журнал производительности DNS, поэтому вы можете сами увидеть, как работают различные провайдеры.
Конечно, скорость имеет значение не только на высших уровнях. Мы говорили о поиске легких и оптимизированных плагинов. Вам также стоит подумать о таких услугах, как программное обеспечение безопасности и другие серверные инструменты. Хотя клиенты не взаимодействуют с ними напрямую, они все равно могут влиять на производительность вашего сайта электронной коммерции.
15. Контролируйте работу сайта
Проверять производительность вашего веб-сайта время от времени, чтобы увидеть, нет ли серьезных проблем, — разумная идея. Постоянно следить за своим сайтом, чтобы быть в курсе, как только возникает проблема, еще разумнее.
Вы можете инвестировать в инструменты, которые собирают данные об опыте ваших пользователей, чтобы показать, как ваш сайт работает в реальном мире. Поскольку многие покупатели будут посещать вас из настроек, отличных от вашей, реальный мониторинг пользователей открывает новую перспективу.
Другие инструменты выдают себя за посетителей-людей, используя серию скриптов для навигации по вашему сайту и проверки его производительности. Подобные настройки синтетического мониторинга более полезны для команд, желающих собирать данные из контролируемых тестов. Если вы занимаетесь оптимизацией своего сайта, синтетический мониторинг поможет вам обнаружить изменения, которые действительно имеют значение. Эти системы также могут запускать запланированные тесты с целью выявления серьезных проблем до того, как с ними столкнутся ваши клиенты.
Существует множество инструментов, которые выполняют обе эти задачи (и многое другое):
- Site24x7 выполняет для вас синтетический и реальный мониторинг пользователей
- LogRocket отслеживает пользователей и выявляет ошибки и взаимодействия с сайтом, с которыми обычно сталкиваются пользователи.
- New Relic — это комплексная синтетическая система мониторинга, которая интегрируется практически со всеми существующими инфраструктурами.
Какой бы инструмент вы ни использовали, обязательно настройте оповещения, чтобы они сообщали вам, когда что-то идет не так. Чем быстрее вы решите проблему, тем меньше клиентов вы разочаруете.
Производительность веб-сайта зависит от скорости
Поскольку Интернет и мобильная связь становятся все более быстрыми и повсеместными, потребительские стандарты будут продолжать расти. Обеспечение быстрого и удобного взаимодействия — это базовое ожидание. Компании, которые смогут понять, как добиться успеха на мобильных устройствах и снизить скорость загрузки до секунды или меньше, получат шанс захватить большую долю рынка.
Качество обслуживания клиентов, которое вы предоставляете, напрямую связано с показателями конверсии и удержания, а производительность вашего веб-сайта напрямую связана с качеством обслуживания клиентов. Оптимизация веб-сайта — это не проект, который может ждать черного дня. Это важная часть привлечения клиентов на ваш сайт и увеличения продаж.
Повышение скорости вашего сайта — не единственный способ привлечь больше клиентов. Ознакомьтесь с этими способами увеличения органического трафика , чтобы сохранить свою динамику в поисковой выдаче.
