Как увеличить скорость загрузки сайта: боремся за каждого клиента

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

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

Статистика влияния низкой скорости загрузки сайта

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

• 53 % посетителей мобильных сайтов закрывают вкладку, если на загрузку требуется более трех секунд, как показало исследование Double Click;
• увеличение времени загрузки с одной до семи секунд увеличивает вероятность отказа посетителей на 113 % – выяснено при проведении исследования Think with Google;
• использование большего количества элементов страницы (текстов, картинок, заголовков), например, 6 000 вместо 400, приводит к росту доли отказов на 95 %.

Во время недавнего исследования компания Google выяснила:

• 46 % пользователей смартфонов признаются, что медленная работа сайтов их раздражает;
• 50 % респондентов называют две секунды нормальным временем открытия сайта;
• одна лишняя секунда загрузки приводит к снижению конверсии на 20 %.

Используемый мобильными устройствами 3G- и 4G-интернет редко может похвастаться стабильной скоростью. Ситуация усугубляется, когда еще и сайт открывается слишком долго – в таком случае более 50 % пользователей закрывают вкладку. Люди, обычно выходящие в интернет при помощи ПК, тоже негативно реагируют на длительную загрузку.

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

Согласно статистике компании Strange loop, оптимальная скорость загрузки сайта выглядит таким образом:

1. 1 секунда – идеально;
2. 2-3 секунды – нормально;
3. 4–7 секунд – необходима доработка;
4. 8–10 секунд – плохо;
5. 11 секунд и более – нужна срочная оптимизация.

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

6 сервисов для измерения скорости загрузки сайта

1. Test My Site от Google.

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

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

2. Pr-cy.

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

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


Комментарий эксперта
«Мы обязаны делать клиентов довольными
любыми доступными способами!»
Алексей Молчанов,
основатель международной IT-компании Envybox

Текущая ситуация в стране и мире с каждым днем набирает все больше и больше оборотов.
Сегодня каждый предприниматель задается вопросом: “А что же сейчас будет с моим бизнесом?”
Если вы поддадитесь всеобщей панике и “заморозите” деятельность компании, то ни к чему хорошему это не приведет. Если вы видите, что кризис неизбежен и доход компании уже начинает сокращаться — не приостанавливайте свою деятельность. Ни в коем случае не сокращайте расходы на рекламу и не прекращайте продвижение (если вас, конечно, не закрыли из-за Постановления правительства).
Направляйте максимум усилий и внимания на продвижение своей компании и увеличение потока новых клиентов.
Для того, чтобы у вас было понимание, как следует себя вести во время кризиса — поделюсь с вами полезными инструментами, которые помогли нам не только преодолеть кризис, но и выйти из него победителями.
Ниже вы можете скачать чек-лист из простых и доступных для любой компании инструментов привлечения стабильного потока новых клиентов или возвращения существующих. А также в качестве бонуса получить бесплатное использование наших сервисов для увеличения заявок с сайта в течение 7 дней и 30% скидку на их подключение. Желаем вам удачи, новых клиентов и больших продаж!
СКАЧАТЬ ЧЕК-ЛИСТ
+ БОНУС

3. Google Page Speed.

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

4. Web Page Test.

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

Способы увеличения скорости загрузки сайта

• Сокращение доли HTTP-запросов.

  80 % отображения страницы предполагает загрузку ее элементов, таких как скрипты, фотографии, файлы CSS, flash. По спецификации HTTP/1.1 браузеры должны открывать за один раз до двух компонентов страницы с одного хоста. Благодаря сокращению числа таких составляющих, можно снизить долю HTTP-запросов к серверу, и, как результат, увеличить скорость загрузки страницы. Есть несколько способов сократить данный показатель, сохранив вид страницы:

1. Использование CSS-спрайтов.

   Это комбинированные изображения, в которых содержится ряд маленьких изображений. При необходимости они вырезаются для нужного элемента страницы за счет свойств background-image и background-position.

2. Применение Inline-картинок.

   Такие картинки используют URL-схему data: для встраивания в страницу. Но данный подход приводит к тому, что возрастает размер HTML-документа. Встраивая inline-картинки в таблицы стилей, можно сократить количество запросов к серверу, при этом размер HTML не изменится.

3. Объединение нескольких файлов.

   Когда на странице подключается более одного CSS- или js-файла, их стоит объединить, так как это позволит увеличить скорость загрузки сайта. Данный способ сокращения числа HTTP-запросов на сервер прост и дает действительно хороший результат.

• Помещение JavaScript-а в конец страницы.

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

  Также нужно понимать, что внешние js-файлы не допускают параллельную загрузку. По спецификации HTTP/1.1 браузеры не должны одновременно загружать свыше двух компонентов веб-страницы с одного хоста. Допустим, используемые на сайте картинки содержатся на разных хостах, тогда превышается рекомендуемое количество параллельных загрузок. А при открытии скрипта браузер не начнет любые другие загрузки, даже когда речь идет о других хостах.

• Размещение CSS-файлов в начале страницы.

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

  

  Обратный звонок на сайте

  Достаточно эффективный вид общения фирмы с клиентом

  Подробнее

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

• Минимизация CSS и JavaScript.

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

• Использование поддоменов для параллельного скачивания.

  Не стоит забывать, что по спецификации HTTP/1.1 для браузеров действуют ограничения, касающиеся количества одновременно загружаемых компонентов сайта. Их может быть не более двух с одного хоста. Если на сайте содержится много графики, ее рекомендуется вынести на отдельный поддомен либо на несколько поддоменов. Для вас это будет один сервер, тогда как браузер будет воспринимать их как разные. Чем больше поддоменов используется, тем больше файлов параллельно загрузится. Иными словами, на отображение сайта потребуется меньше времени. Остается только изменить адрес картинок на новый. Это очень простой, но действительно работающий способ.

• Использование кэша браузера.

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

  Выставляйте HTTP-заголовок Expires во всех возможных случаях на несколько дней или даже месяцев вперед.

• Применение CDN для загрузки популярных JavaScript-библиотек.

  Когда на сайте используется популярный JavaScript фреймворк, такой как «jQuery», для его подключения рекомендуется применять CDN (Content Delivery Network). Под последним понимают множество веб-серверов, разнесенных географически для достижения наиболее высокой скорости отображения содержания сайта. При выборе сервера, который должен отдавать контент пользователю, отталкиваются от ряда характеристик. Так, стоит предпочесть сервер с минимальным количеством промежуточных хопов до него или с самым быстрым откликом. Также браузер кэширует JavaScript-файлы. То есть если посетитель заходил на сайты, применяющие данный метод, необходимая библиотека уже присутствует в кэше браузера и ее не требуется повторно загружать.

  

  Интеграция Telegram и EnvyCRM

  Пишите первыми Вашим клиентам — Telegram и CRM

  Подробнее

  Одним из наиболее известных CDN считается Google Libraries. Это CDN для популярных open-source JavaScript-библиотек. За счет загрузки популярных JavaScript-фреймворков с Google Libraries удается повысить скорость загрузки страницы и сократить трафик на сервер.

• Оптимизация изображений.

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

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

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

• Отказ от масштабирования изображений.

  Не меняйте размер изображения за счет CSS и атрибутов width и height-тега, ведь такой подход негативно отражается на скорости загрузки страницы. Если картинка имеет размер 500×500 px, а вам необходим 100×100 px, рекомендуется скорректировать ее в Photoshop либо при помощи другого графического редактора. Помните, что чем меньше весит изображение, тем быстрее происходит его загрузка.

• Использование Gzip- сжатия.

  Исследования показали, что Gzip-сжатие текстового файла на лету в 95–98 % случаев обеспечивает сокращение времени на его передачу браузеру. Если архивированные копии файлов хранятся на сервере в памяти proxy-сервера или на диске, то соединение освобождается в 3-4 раза быстрее.

• Удаление лишних плагинов, счетчиков.

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

  

  Unisender: интеграция с Онлайн-чатом Envybox

  Больше прибыли от email-рассылок

  Подробнее

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

• Оптимизация шрифтов.

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

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