Как измерить и улучшить скорость сайта электронной торговли (11 советов) и почему это важно для оптимизации коэффициента конверсии

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

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

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

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

Вот что вы можете найти в этом посте:

Что такое скорость сайта?
Почему так важна скорость загрузки сайта?
Как проверить текущую скорость вашего сайта: объяснение результатов Google PageSpeed ​​Insights
Лучшие методы повышения скорости загрузки страниц на основе данных
1. Проверьте и увеличьте скорость вашего хостинг-провайдера.
2. Оптимизировать изображения
3. Включите кеширование браузера.
4. Минимизируйте HTML, JavaScript и CSS.
5. Воспользуйтесь преимуществами AMP (ускоренных мобильных страниц) и PWA (прогрессивных веб-приложений).
6. Убейте плохо работающие плагины WordPress.
7. Используйте сеть распространения контента.
8. Оптимизируйте время отклика сервера.
9. По возможности используйте сжатие.
10. По возможности загружайте файлы асинхронно
11. Уменьшите количество перенаправлений.
Инструменты, помогающие повысить скорость вашего сайта
Готовы повысить скорость своего сайта электронной коммерции?

Звучит отлично? Тогда давайте копаться!

Что такое скорость сайта?

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

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

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

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

Почему так важна скорость загрузки сайта?

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

Медленная загрузка напрямую влияет на вашу прибыль. Источник

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

Скорость сайта влияет на поисковый рейтинг

Скорость сайта - главный фактор ранжирования Google. Сам Google неоднократно повторял это. И многочисленные независимые анализы подтверждают, что скорость сайта - одна из самых важных областей оптимизации, когда речь идет о SEO.

Эдвин Тунен, пишущий для Yoast, говорит: «Вам даже не нужно очень внимательно слушать, потому что SEO-специалисты кричат ​​это с крыш: скорость сайта - это все. Не проходит и дня, чтобы новая статья, технический документ, представитель Google или эксперт по SEO не говорили нам, что оптимизация по скорости - одна из самых важных вещей, которые вы можете сделать прямо сейчас. И они, конечно же, правы! »

Скорость сайта влияет на показатель отказов

Люди с большей вероятностью покинут ваш сайт, если он долго загружается. Эта активность не только является негативным сигналом для Google (указывающим на низкую вовлеченность клиентов), но также напрямую влияет на ваш коэффициент конверсии.

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

Скорость сайта влияет на ценность клиента

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

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

Низкая скорость загрузки сайта имеет негативные психологические последствия

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

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

И наоборот, сайт с быстрой загрузкой обеспечивает покупателям положительный пользовательский опыт (ознакомьтесь с 11 советами по UX!) И демонстрирует профессионализм и качество вашего магазина.

Как проверить текущую скорость вашего сайта: объяснение результатов Google PageSpeed ​​Insights

Существует множество инструментов для проверки скорости вашего сайта. Некоторые фокусируются на конкретных областях, таких как скорость вашего DNS-провайдера или время до первого байта (TTFB), в то время как другие являются более полными. В качестве отправной точки нет лучшего варианта, чем Google PageSpeed ​​Insights.

Вот как сделать ваш сайт полноценным и что означают результаты:

1. Перейдите в Google PageSpeed ​​Insights и введите свой URL-адрес в текстовую строку. Нажмите «Анализировать», чтобы получить результаты. В этом пошаговом руководстве мы будем использовать Zappos в качестве примера. Google PageInsights, возможно, лучший инструмент для проверки скорости сайта, полностью бесплатный и всеобъемлющий.

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

• Полевые данные - основаны на исторических данных и получены из выборки пользователей, отслеживаемых Google. Это полезно, поскольку позволяет увидеть постоянные проблемы, которые могли возникнуть в прошлом, а не только в одном конкретном случае тестирования. Разноцветная полоса внизу показывает, как ваша страница сравнивается с другими страницами в отчете о пользовательском опыте Chrome (всеми страницами, о которых Google хранит данные).
• Сводка по происхождению (не отображается автоматически) - сводка по происхождению, которую вам нужно щелкнуть, чтобы развернуть, показывает средние данные для вашего сайта в целом (а не для отдельной страницы). «Источник» относится к базовому URL-адресу.
• Лабораторные данные - это непосредственные результаты вашей веб-страницы, основанные на ее производительности, когда вы нажали «Анализировать». Это текущие результаты, полученные на основе мгновенных результатов, без учета каких-либо других данных. Общая оценка скорости вашего сайта в верхней части страницы основана на этих лабораторных данных.

Раздел «Лабораторные данные» содержит наиболее подробную информацию о показателях скорости сайта.

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

4. В каждом из разделов есть два ключевых показателя скорости (FCP и FID), а также пять отдельных показателей в разделе «Лабораторные данные»:

• First Contentful Paint FCP - в контексте веб-производительности термин «первая отрисовка» означает первый веб-элемент, видимый пользователю браузера. «Первая содержательная раскраска» - это когда появляется первая связная часть контента. Определение «контент» здесь - это все, что дискретно определено в объектной модели документа - по сути, индивидуальный и отдельный элемент, составляющий часть иерархии страницы, например изображение или блок текста. Часть контента - это все, что пользователи сети могут «потреблять». Таким образом, он отличается от «первого рисования», которым может быть что-то столь же простое, как изменение фона или отдельный пиксель.
• Задержка первого ввода (FID). Задержка первого ввода - это мера того, насколько быстро ваш сайт становится отзывчивым. Когда посетитель взаимодействует с вашим сайтом - щелкая ссылку, увеличивая изображение, выбирая вариант продукта и т. Д. - может потребоваться дополнительное время для получения ответа из-за фоновых процессов браузера, которые эффективно «отключают» интерактивные элементы сайта. FID основан на фактических пользовательских данных, собранных Google, поэтому не включается в лабораторные данные.
• Первая значимая краска - по сути, мера того, когда зрители могут реально начать потреблять контент. Первая значимая раскраска произошла, когда были загружены и основной контент в верхней части страницы, и веб-шрифты. Google заявил, что это их основной показатель пользовательского опыта для скорости сайта.
• Индекс скорости - время, необходимое для полной визуальной загрузки вашей страницы. Он основан на времени, когда рендеринг браузера перестает изменяться при покадровом сравнении.
• Первый простой ЦП - первый простой ЦП означает время, когда веб-сайт хотя бы в какой-то степени интерактивен. Не все интерактивные элементы могут быть готовы к работе, но некоторые будут.
• Время до интерактивности - время, необходимое для полной загрузки сайта и перехода в полностью интерактивный режим, когда он готов реагировать на любые действия посетителей.
• Максимальная потенциальная задержка первого входа - прогнозируемое значение для максимально возможного FID, если он должен быть протестирован. Этот показатель основан на лабораторных данных, а не на реальных данных.

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

Давайте посмотрим на несколько примеров со скриншота ниже (мы рассмотрим большинство из них более подробно в разделе ниже):

В разделе «Возможности» вы найдете конкретные предложения по увеличению скорости вашего сайта.

• Минимизация JavaScript. Минификация - это процесс сжатия файлов, содержащих код (HTML, CSS, JavaScript и т. Д.), Чтобы их можно было быстрее передавать с серверов в браузеры.
• Отложить закадровые изображения - отсрочка закадровых изображений включает в себя задержку времени загрузки изображений, которые не находятся выше сгиба, уменьшение размера первого запроса сервера и обеспечение более быстрого общего времени начальной загрузки. После загрузки всех изображений в верхней части страницы будут обработаны остальные изображения страницы.
• Удалите неиспользуемый CSS - таблицы стилей .css очень часто включают большое количество лишнего кода. Удаление этого кода может уменьшить размер файла CSS. Включение всего CSS в один файл также может сократить время, необходимое браузеру для интерпретации данных.
• Обслуживайте изображения в форматах следующего поколения - такие форматы изображений, как JPEG 2000, JPEG XR и WebP (наряду с некоторыми другими), обеспечивают лучшее сжатие, чем альтернативы, без ущерба для качества.
• Уменьшение времени отклика сервера (TTFB) - время отклика сервера можно увеличить несколькими способами, в том числе за счет оптимизации вашей CMS и выбора более быстрого хостинг-провайдера.
• Включить сжатие текста - когда вы включаете функцию gzip на своем сервере, текст в файлах сжимается, уменьшая их размер и ускоряя передачу. Затем сжатые файлы могут обрабатываться браузером.

6. Наконец, под разделом «возможности» находится раздел «диагностика» и «пройденные проверки». Они охватывают (соответственно) дополнительные возможности повышения скорости, основанные на передовых веб-практиках и критериях, которые вы прошли.

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

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

Хотите больше подобных идей?

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

на Я прочитал политику конфиденциальности и принимаю условия рассылки.

Установите этот флажок, чтобы продолжить

Woohoo! Вы только что зарегистрировались. Проверьте свой почтовый ящик, чтобы подтвердить подписку.

А как насчет других инструментов?

Несмотря на все свои возможности, PageSpeed ​​Insights не безупречен.

Одна область, где он спотыкается, относится к географической области. Местоположение тестового сервера неизвестно, поэтому результаты могут быть неоднородными. Если, например, ваш сервер находится в Великобритании, а тестовый сервер находится на западном побережье США, результаты будут быстрее для тех, кто посетит ваш сайт в предыдущей стране.

Используйте Pingdom и GTmetrix, которые позволяют указать местоположение тестового сервера, чтобы дополнить картину, предоставленную PageSpeed ​​Insights.

Лучшие методы повышения скорости загрузки страниц на основе данных

Хорошо, давайте рассмотрим несколько практических советов.

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

1. Проверьте и увеличьте скорость вашего хостинг-провайдера.

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

Если серверы вашего хостинг-провайдера медленные, вы мало что можете сделать, чтобы решить эту проблему. Источник

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

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

Вот основные различия между тарифными планами с точки зрения скорости:

• Общий хостинг. Общий хостинг - это самый недорогой и самый медленный вид хостинга. Ваш веб-сайт будет храниться на сервере вместе с веб-сайтами других пользователей. Большим недостатком такой схемы является то, что все ресурсы сервера, особенно ЦП и ОЗУ, также будут совместно использоваться. Это может пагубно повлиять на скорость сайта и может иметь особенно негативные последствия для больших сайтов, требующих большой вычислительной мощности.
• Виртуальный частный сервер (VPS) . Виртуальный частный сервер во многом похож на общий сервер. На одном сервере размещено несколько сайтов, но они разделены виртуальным барьером, фактически воссоздающим то, что было бы похоже на ваш собственный сервер. Основным преимуществом этого является то, что все ресурсы вашего сервера ограждены кольцом - нет никаких шансов, что кто-то из ваших соседей по квартире будет использовать всю горячую воду и оставить вас сухим и сухим. Виртуальные частные серверы также дают вам большую степень свободы по сравнению с администратором сервера. Кроме того, если вам нужно больше места, вы можете просто купить его.
• Выделенный хостинг - Выделенный хостинг - это следующий шаг по сравнению с VPS-хостингом. С выделенным тарифным планом вы арендуете сервер, который будет использоваться исключительно для работы вашего сайта. У вас также будет полный контроль администратора и root (в том числе над выбором операционной системы и настроек безопасности), что может сделать возможной техническую оптимизацию скорости между сервером и сайтом. Выделенный хостинг идеально подходит для крупных сайтов и компаний с выделенными техническими командами.

Вообще говоря, если у вас есть сайт электронной коммерции, вы захотите выбрать либо выделенный хостинг, либо VPS-хостинг.

Вот несколько самых популярных поставщиков интернет-магазинов:

SiteGround - SiteGround имеет ряд специальных планов для платформ электронной коммерции, включая Magento, WooCommerce и PrestaShop.

Liquid Web - одно из основных предложений Liquid Web - превосходное обслуживание клиентов. Компания предлагает круглосуточный доступ к консультантам, часто с временем ответа менее минуты. Предлагается ряд планов для электронной коммерции (включая выделенный хостинг для WooCommerce), и это отличный вариант для малых и средних предприятий розничной торговли, которые ожидают масштабирования в будущем.

Хостинг InMotion - InMotion очень популярен среди розничных продавцов электронной коммерции и является одним из доступных вариантов по лучшей цене.

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

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

2. Оптимизировать изображения

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

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

Вам следует оптимизировать изображения в таких программах, как PhotoShop или GIMP, чтобы сохранить полный контроль над качеством изображений. Для разных типов изображений лучше всего подходят разные форматы. Вообще говоря, например, JPEG идеально подходят для фотографий, тогда как более простые изображения со стандартными цветами будут отображаться быстрее как PNG.

Вот краткое изложение наиболее распространенных форматов и когда их использовать:

• JPEG (Joint Photographics Expert Group) - JPEG, вероятно, является наиболее широко используемым форматом для высококачественных фотографий и изображений с высокой детализацией. Основным преимуществом является то, что изображения JPEG хорошо обрабатываются, обеспечивая при этом высокий уровень сжатия. Для фотографий предпочтительным вариантом является JPEG. Вам также следует рассмотреть возможность использования новых вариантов JPEG, таких как JPEG 2000 и JPEG XR, которые могут предложить еще более высокий уровень сжатия.
• PNG (переносимая сетевая графика) - PNG является форматом между JPEG и GIF. Он обеспечивает хороший баланс между качеством, поддержкой широкого диапазона цветов и размеров. PNG, как правило, меньше, чем JPEG, но не имеют такой же емкости с точки зрения цвета и детализации. Были опасения по поводу совместимости со старыми браузерами, но сейчас они в значительной степени излишни.
• GIF (Graphic Interchange Format) - GIF (один из старейших форматов в Интернете) лучше всего подходит для изображений с ограниченной цветовой палитрой, таких как логотипы. Если вам нужно загрузить изображение, состоящее в основном из текста, выберите формат GIF. Основное преимущество файлов GIF в том, что они, как правило, довольно маленькие. Из-за ограниченной цветопередачи GIF-файлы не следует использовать для насыщенных изображений или фотографий. Вы также можете использовать GIF-файлы для базовой анимации. Не используйте GIF для мультимедиа. Использование стороннего размещенного контента (например, YouTube) будет более выгодным для скорости сайта.

Помимо использования правильного формата, вы можете сделать еще несколько вещей, чтобы оптимизировать изображения для повышения скорости сайта:

• Не делайте изображения больше, чем они должны быть. Многие дизайнеры и разработчики совершают ошибку, загружая большие изображения (часто превышающие несколько тысяч пикселей) на свои серверы, а затем изменяя их размер, используя код страницы. Это большая ошибка. Нет абсолютно никакого смысла отправлять в браузеры посетителей изображение шириной 5000 пикселей, если оно будет отображаться на странице продукта только с разрешением 1000 пикселей. Часто изображения должны быть относительно большими, чтобы можно было использовать функцию масштабирования, но сохраняйте их как можно меньше. Измените размер изображений перед их загрузкой.
• Сжимайте изображения перед их загрузкой - сжатие удаляет всю лишнюю информацию из ваших файлов изображений, тем самым уменьшая их размер. Некоторые «невидимые» детали, такие как время съемки изображения, могут быть встроены в файл. Для быстрого выполнения этой задачи можно использовать такие инструменты, как TinyPNG, JPEG Optimizer и плагины, такие как WPSmush. Все платные планы, необходимые для интенсивного использования, очень разумны.
• Не используйте ненужные изображения на страницах - каждое изображение отнимает время, необходимое для полной загрузки вашего сайта, поэтому не используйте больше изображений, чем это абсолютно необходимо. Легко попасть в ловушку включения изображений только ради этого. Еще один снимок продукта не повредит, правда? Но при создании страниц продукта рекомендуется удалять ненужные изображения (обратите внимание на отличные шаблоны страниц продукта). Вы также можете использовать «ленивую загрузку», чтобы сначала отображать изображения верхней части страницы (а не все изображения на странице одновременно). Изображения, для которых в HTML-коде установлена ​​«отложенная загрузка», будут загружаться только после того, как информация в верхней части страницы станет видимой для посетителей или когда посетитель начнет прокручивать страницу.

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

3. Включите кеширование браузера.

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

Кеширование браузера происходит, когда браузер сохраняет важные файлы, из которых состоит ваш сайт. Это означает, что когда посетитель возвращается на ваш сайт, его браузеру не нужно получать каждый файл непосредственно с ваших серверов. Требуется только запросить определенные файлы, которые, вероятно, были обновлены, или даже определенные части отдельных страниц (например, изображение логотипа). Это существенно увеличивает время загрузки, так как сокращает количество запросов к серверу.

Включение кэширования - довольно простой процесс, который включает добавление небольшого количества кода в ваши HTTP-заголовки, чтобы установить периоды истечения срока действия для определенных файлов. Если ваш сайт размещен на WordPress, существует множество плагинов, таких как W3 Total Cache, для оптимизации этого процесса.

Кэширование B rowser может быть немного сложным для интернет-магазинов, потому что страницы часто подвергаются своевременным обновлениям, касающимся цены, уровня запасов, обзоров, информации о доставке и т. Д. Из-за этого важно различать те файлы, которые хранят действительно стабильный контент - стили CSS, логотип, навигацию и т. Д. - и те части контента, которые могут быть изменены . Затем вы можете соответствующим образом кодировать. Помните, что вполне возможно закодировать определенные элементы страницы, такие как верхние и нижние колонтитулы, а также файлы большего размера (например, таблицы стилей CSS), которые не зависят от времени, и даже простое включение кеширования для них все равно будет иметь положительный эффект на скорость сайта.

4. Минимизируйте HTML, JavaScript и CSS.

Краткая версия: используйте CDN (сеть доставки контента), чтобы включить автоматическую минификацию и уменьшить размер файлов до 60%. Настройка CDN - это относительно простой процесс, который стал возможным благодаря известным сервисам, таким как CloudFlare и Amazon AWS.

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

Он работает из-за несоответствия в длине и сложности, понятной разработчикам (что обычно включает комментарии, пробелы, запятые и т. Д.), А также из-за минимального кода, необходимого браузеру для отображения страницы. Иногда эта сокращенная версия может составлять всего 40% от исходной версии.

Минификация может значительно уменьшить размер веб-файлов. Источник

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

Вместо этого лучше всего использовать CDN (сеть доставки контента), которая автоматически минимизирует код перед его доставкой в ​​браузер. Исходные файлы будут храниться на вашем собственном сервере, а минифицированные версии будут храниться на серверах CDN. Всякий раз, когда вы вносите изменения в страницы, они будут синхронизироваться с серверами CDN. CDN также полезны по ряду других причин, но мы вернемся к ним позже.

5. Воспользуйтесь преимуществами AMP (ускоренных мобильных страниц) и PWA (прогрессивных веб-приложений).

Краткая версия: AMP и PWA, разработанные Google, могут значительно увеличить скорость загрузки ваших мобильных страниц. Разработка требует больших затрат, поэтому переход на PWA или AMP следует проводить в свете других положительных факторов (если вы к этому склонны). Если вы все же решите продолжить, это может значительно повлиять на скорость вашего сайта.

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

Что такое AMP и PWA? Вот краткий обзор:

• Ускоренная мобильная страница (AMP) - AMP - это среда разработки, состоящая из подмножества HTML (AMP HTML), инфраструктуры JavaScript и необязательной CDN (сети доставки контента), которая была создана Google, чтобы позволить разработчикам доставлять молниеносные- быстрые мобильные страницы без необходимости вкладывать значительные ресурсы в оптимизацию скорости. Хотя изначально AMP был разработан для сайтов, основанных на содержании (вы можете увидеть маленькую стрелку-молнию в результатах поиска на многих страницах новостей), он становится все более популярным среди интернет-магазинов.
• Прогрессивное веб-приложение (PWA). PWA похожи на мобильные приложения, доступ к которым осуществляется через мобильный браузер. Они копируют многие функции приложений, такие как доступ через значок на главном экране мобильного телефона и push-уведомления, но без необходимости создавать специальное программное обеспечение или устанавливать что-либо на свои телефоны.

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

6. Убейте плохо работающие плагины WordPress.

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

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

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

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

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

7. Используйте сеть распространения контента.

Краткая версия: CDN (сети распространения / доставки контента) недороги в подписке и просты в реализации.

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

Сети CDN смягчают негативные последствия передачи данных на большие географические расстояния. Источник

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

Использование CDN также может помочь вам контролировать расходы на пропускную способность (если вы их платите) и справляться с пиками трафика.

8. Оптимизируйте время отклика сервера.

Краткая версия: хотя вы не можете изменить плохой сервер, вы можете оптимизировать тот, который хорошо работает. Сосредоточьтесь на очистке своей базы данных, выборе правильных настроек для вашей CMS и выборе быстрого DNS-провайдера.

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

Вы можете проверить время до первого байта с помощью WebPageTest. Оно должно быть меньше 200 мс.

Использование CDN - один из лучших способов улучшить первый и третий этапы, потому что сеть уменьшит расстояние между серверами и браузерами ваших посетителей.

Это вторая область, которая нас интересует. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. Источник
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. Но это того стоит. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.