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

Содержание материала:

12 параметров влияющих на скорость загрузки сайта

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

Исследования показали, что половина принявших в опросе людей ожидают, что страница загрузится менее, чем за 2 секунды, порядка 64% пользователей мобильных приложений готовы ждать менее четырех секунд. 2, 3, 4 секунды — это много или мало? Например для такого гиганта, как Amazon каждая секунда задержки загрузки стоит порядка 1,6 млрд долларов ежегодно.

Исследовав последствия каждой задержки на веб-сайте, эксперты получили интересные результаты:

  • конверсия уменьшилась на 7%;
  • степень удовлетворенности клиентов уменьшилась аж на 16 пунктов;
  • страницы просматривали на 11% меньше, чем обычно.

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

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

1. HTTP-запросы: минимизируем для каждого элемента

Существуют исследования, которые говорят о том, что 80% времени загрузки веб-сайта уходит на загрузку таких элементов, как изображения, сценарии и таблицы стилей. Чем больше у вас этих компонентов, тем больше HTTP-запросов. Для того, чтобы уменьшить их количество, сначала нужно выявить, сколько запросов на данный период времени делает ваш сайт, после чего приступить к «уборке» — упростить дизайн, избавиться от беспорядка, исключить ненужные перенаправления.

Какой инструмент использовать: Screaming Frog, он поможет идентифицировать перенаправления и избавиться от лишних. Так вы сохраните лишь те из них, которые на самом деле вам нужны для исправлениям поврежденных ссылок.

2. План хостинга: дешевле не всегда лучше

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

  • Общий хостинг
  • VPS хостинг
  • Выделенный сервер
  • Облачный хостинг

Они отличаются типом размещения, ресурсами, ценой и уровнем надёжности

3. TTFB:

Time To First Byte («Время до первого байта) — это измерение, используемое как указание на отзывчивость веб-сервера или другого сетевого ресурса.

Важный параметр, от которого зависит скорость веб-сайта.

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

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

Чтобы уменьшить TTFB можно включить кэширование браузера — это один из эффективных и распространенных способов.

4. Запускаем аудит сжатия для быстрой загрузки

С этим пунктом все предельно просто: чем меньше файл по размеру, тем быстрее он загружается. Если это не вредит качеству, то уменьшение файлов — это отличный способ ускорить ваш веб-сайт.

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

5. Изображения: размер решает

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

Уменьшение размеров изображений — это оптимальный вариант, когда на один продукт приходится несколько элементов. Чтобы не «убить» при этом качество, используйте специальные инструменты — например, compressor.io. В каком формате сохранять — выбирайте сами: в JPG это будет наиболее приемлемо, хотя для графики с точными деталями (например, логотип) можно использовать PNG файлы.

6. Сокращай и объединяй

Чем больше файлов содержит страница, тем сложнее ее загрузить, поскольку, как уже говорилось ранее, это создаст большое количество HTTP-запросов. Безусловно, невозможно удалить все файлы и оставить сайт пустым, но уменьшить и объединить HTML-файлы, файлы CSS и JavaScript, а также шрифты Google — вполне реально.

Инструмент Magnification будет отличным помощником в этом деле: он способен устранить ненужные символы, что уменьшит размер и сконцентрирует пресловутые HTTP-запросы в небольшие группы.

7. Синхронно? Асинхронно!

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

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

8. Видео? Используем внешние платформы!

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

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

9. Система доменных имен: выбирайте шустрого поставщика

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

10. Важно: включите кэширование браузера

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

11. Не используете плагины? Удаляйте их!

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

Лучшими вариантами будут те, которые подойдут для нескольких платформ одновременно — например, для Instagram и Facebook.

12. CDN: вопреки расстояниям

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

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

закажите аудит сайта у нас

Подпишись и следи за выходом новых статей в нашем монстрограмме

Остались вопросы?

Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей которые Вас интересуют в комментариях.

15 инструментов тестирования скорости сайта для анализа веб-производительности

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

Как тестирование скорости сайта может помочь в анализе?

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

  • Определение скриптов, шрифтов и плагинов, вызывающих увеличение времени загрузки ( HTML, JavaScript, CSS );
  • Проверка минимизации скриптов;
  • Обнаружение больших изображений;
  • Тестирование времени до получения первого байта ( TTFB );
  • Анализ общего времени загрузки, размера страниц и запросов;
  • Проверка производительности для различных географических точек;
  • Проверка скорости вывода в различных браузерах;
  • Анализ HTTP-заголовков ;
  • Измерение производительности сети (« доставка » контента );
  • Проверка, какие элементы корректно загружаются из CDN .

Концепции скорости сайта

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

Время до получения первого байта (TTFB)

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

Блокирующий код Javascript и CSS

К блокирующим вывод относятся скрипты Javascript и стили CSS, которые не дают страницам загружаться так быстро, как они могли бы.

Javascript

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

Как увеличить скорость загрузки сайта

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

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

Какая должна быть скорость загрузки сайта?

Объективное мнение владельцев сайта — менее трех секунд. Если же пользователь зашел на ваш сайт, то вероятность того, что он выйдет в течении трех секунд, если сайт не загрузится, равняется 40%. И с каждой п секундой, вероятность того, что вы потеряете пользователя, возрастает.

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

Пользуйтесь CSS-спрайтами

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

Существует огромное количество инструментов, с помощью которых можно сделать спрайты:

  • CSS Sprites
  • Sprite Cow
  • Glue
  • Fireworks CS6
  • Lemonade
  • Compass
  • SpriteMe

Благодаря использованию спрайтов скорость существенно вырастет.

Сделайте сжатие ресурсов вашего сайта.

Страница вашего сайта будет весить намного меньше, если использовать сжимающий алгоритм GZIP. За счет сервисов: Internet Information Services, Nginx и Apache HTTP Server, вы можете существенно сжать объем данных на страницах вашего сайта. Перед тем, как делать сжатие, советуем оптимизировать код вашего сайта. Код HTML и CSS должны быть согласованны. Ключевые значения HTML и CSS поставьте в правильном порядке, например пронумеруйте, а так же избавьтесь от лишнего пространства между строк.

Уберите лишние плагины.

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

Какие плагины стоит удалить?

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

Топ-пост этого месяца:  Анкорные и безанкорные ссылки примеры, отличия и соотношение

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

Пользуйтесь кэширующими плагинами.

Возвращаясь к предыдущему способу, лучше использовать кэширующие плагины. Они расходуют минимум ресурсов вашего сайта. Сложно выделить конкретный плагин, так как разные сайты реагируют на них по-разному. Например, для WordPress выбирайте из W3 Total Cache, WordPress Super Cache и Hyper Cache. Практически для всех популярных CMS существуют дополнения с инструментов кэширования.

Используйте CDN.

CDN – достаточно дорогое удовольствие, но, если у вас большой проект (или же магазин, выходящий далеко за рамки одного региона или даже страны) – данной технологией лучше не пренебрегать. Работает это так: допустим есть у Вас очень посещаемый и большой магазин. Размещаем его на нескольких серверах в разных локациях. Например, в Москве и Санкт-Петербурге. Итак, если использовать CDN, то пользователь, заходящий на ваш сайт, будет получать информацию с ближайшего к нему сервера. Т.е., если пользователь находится в Москве, то он получит информацию от сервера в Москве, а если зайдут из Санкт-Петербурга, то страницы магазина будут загружаться из соответствующего сервера в Петербурге.

Увеличить скорость загрузки сайта, за счет кэширования браузера с использованием expires заголовков.

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

  • Статические компоненты вашего сайта должны находиться под влиянием Never expire;
  • А для динамических больше подойдет Cache Control.

Пользуйтесь keep-alive response заголовками.

Запросы HTTP работают таким образом, что они сначала открывают файл кэша, после чего сразу же закрывают его. Это затрачивает некие ресурсы, поэтому рекомендуем пользоваться HTTP keep-alive response заголовками.

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

Проверяйте ваш сайт на производительность.

Заключающий шаг — это проверка производительности вашего сайта. Специальные сервисы, такие как: Page Speed Insights, YSlow, Pingdom, проверяют ваш сайт на производительность и дают оценку, а так же советы, которые помогут вам увеличить скорость загрузки веб-страниц.

Как ускорить время загрузки сайта и почему это важно

Влияет ли время загрузки страницы сайта на его позиции

Как Вы считаете, если использовать все возможные секреты продвижения, но забыть оптимизировать время загрузки сайта, он сможет попасть в ТОПы выдач поисковиков?

Да? Серьезно? Не верите в важность этого показателя?

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

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

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

Чем больше медленных сайтов попадает в ТОП выдачи конкретной поисковой системы, тем реже пользователи будут ее использовать.

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

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

Немного теории и статистики в подтверждение

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

Оптимальное время загрузки сайта (норма) – около 2-х секунд.

Когда скорость загрузки веб-ресурса уменьшается всего на 200 мс, это приводит к сокращению количества переходов на 36% в течение 6 недель.

И аналогично при увеличении задержки на 400 мс переходы сокращаются на 76% за тот же промежуток времени.

Показатель, при котором на выдачу не влияет время загрузки сайта (норма) – не более 1% пострадавших пользователей.

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

Google рекомендует работать над улучшением скорости работы, если она меньше, чем у 95% веб-ресурсов.

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

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

    PageSpeed Insights в сервисе для вебмастеров от Google. В его функции входит проверка времени загрузки сайта и предоставление рекомендаций по улучшению этого показателя.

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

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

    Расскажем, что одному известному сайту дало ускорение времени загрузки страниц на 3 секунды. В результате:

    • количество просмотров страничек увеличилось на 25%;
    • конверсия возросла на 7–12 %;
    • нагрузка снизилась на 50%.

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

    А как быстро загружаются страницы Вашего сайта?

    «Ой, все! Я найду другой сайт» — как увеличить скорость загрузки сайта, чтобы не терять клиентов

    Получайте новые статьи на эл. почту

    Даже сейчас, когда скорость интернета у большинства провайдеров превышает 100 Мбит/сек, а мобильные операторы развивают 5G, вопрос о скорости загрузки сайта остается актуальным. Этот параметр существенно влияет на конверсию, показатель отказов, посещаемость и другие важные для бизнеса KPI. Потому что при прочих равных условиях человек выберет тот сайт, который быстрее загружается и не заставляет его ждать. Об этом нам говорят логика, личный пользовательский опыт и многочисленные исследования на тему, которые можно найти в сети. Вот, например, исчерпывающая подборка кейсов с цифрами, как компании экспериментировали со скоростью загрузки.

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

    В статье мы расскажем:

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

    1. Клиенты уходят к конкурентам — им проще вернуться в поисковик и выбрать следующий сайт.
    2. Задержка загрузки на 0,1 секунду уменьшает конверсию на 7% (согласно исследованию Akamai).
    3. Снижается вероятность, что пользователи вернутся на сайт. Google говорит, что из-за негативного пользовательского опыта вероятность повторной покупки снижается на 60%. Правда, речь про мобильные версии.
    4. Скорость загрузки влияет на ранжирование сайта в поисковиках. Если сайт долго грузится, робот поисковой системы может не успеть его полностью проиндексировать.

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

    Как проверить скорость своего сайта

    Есть много онлайн-сервисов, которые позволяют проверить быстроту загрузки страниц — достаточно ввести нужный URL. Рассмотрим три самых интересных, на наш взгляд. Для примера будем использовать сайт https://shop.googlemerchandisestore.com/.

    1. PageSpeed Insights

    Это бесплатный инструмент от Google. С его помощью можно узнать, как быстро загружаются страницы на компьютере или мобильных устройствах. Если кратко, то сервис берет ключевые метрики об опыте реальных пользователей по всему миру из Chrome User Experience Report и сравнивает их с вашими. В результате вы видите среднюю скорость загрузки своей страницы и уровень оптимизации, а также долю загрузок, которые проходили на медленной, средней и высокой скорости.

    Если страница показывает не самые лучшие результаты (как в нашем примере), сервис дает конкретные советы, как ее оптимизировать.

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

    Кстати, рекомендации PageSpeed Insights можно увидеть в отчете Google Analytics «Ускорение загрузки», если кликнуть на ссылку в соответствующем столбце:

    Вообще, группа отчетов «Скорость загрузки сайта» (Site Speed reports) в GA — полезная штука. Если раньше вы не уделяли должного внимания этим отчетам, рекомендуем периодически их просматривать, чтобы отслеживать показатели в динамике и вовремя реагировать на проблемы.

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

    Допустим, ваша целевая аудитория находится в Германии. Если вы посмотрите на отчет выше, то увидите, что одна из важных страниц вашего сайта в этой стране грузится очень медленно (19,24 сек.), при этом у нее 140 просмотров. Чтобы ускорить загрузку, нужно оптимизировать страницу. Если же в этом регионе или у этого провайдера скорость интернет-соединения слишком мала для вашего сайта, можно создать альтернативные страницы, адаптированные для низкой пропускной способности.

    2. Pingdom Tools

    Это один из самых информативных и популярных сервисов для проверки скорости. У него есть бесплатная и платная десктоп-версии, а также мобильное приложение с 14-дневным trial.

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

    Кроме того, в бесплатной версии Pingdom Tools вы можете:

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

    3. GTmetrix

    По функционалу этот сервис очень похож на Pingdom Tools, разве что предоставляет информацию в более удобном и организованном виде. Бесплатная версия показывает браузер и локацию сервера, используемого для тестирования, производительность страницы (PageSpeed и YSlow), время загрузки, количество запросов и общий размер страницы. Учитывая, что сервис сохраняет историю проверок, этих метрик будет достаточно, чтобы анализировать скорость загрузки вашего сайта в динамике.

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

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

    Как ускорить загрузку страниц

    Можно выделить 5 основных причин, которые замедляют работу сайта. Разберемся, что делать с каждой из них.

    1. Страницы большого размера

    Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

    2. «Тяжелые» изображения

    Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т.д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

    3. Много запросов от браузера

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

    • Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
    • Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
    • Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.

    4. Перегруженный код JavaScript и CSS

    Если код JavaScript и CSS слишком длинный, содержит много лишних элементов (пробелы, комментарии и т.п.), то страница может загружаться с задержками. Чтобы оптимизировать код, вы можете:

    • Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
    • Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
    • Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

    5. Большое расстояние между сервером и пользователем

    Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

    6. Медленный хостинг

    Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

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

    Как регулярно мониторить скорость сайта

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

    Если вы собираете данные в Google BigQuery с помощью OWOX BI Pipeline и хотите отслеживать основные технические показатели сайта, заполните форму — и мы пришлем вам шаблон дашборда, который можно скопировать, а также гайд, как его настроить.

    В результате у вас получится удобный отчет, который состоит из 5 страниц. На первой странице вы сможете просматривать все важные показатели:

    1. Количество пользователей.
    2. Количество сеансов.
    3. Количество просмотров страниц.
    4. Ошибки JavaScript.
    5. Ошибки 404.
    6. Среднее время загрузки страниц.
    7. Среднее время соединения с сервером.
    Топ-пост этого месяца:  Библиотека React обязательный инструмент опытного веб-разработчика

    На втором листе можно узнать подробную информацию по ошибкам JavaScript:

    • Общее количество ошибок за выбранный период.
    • Количество ошибок на страницу.
    • Количество сессий с ошибками.
    • Сколько процентов пользователей столкнулись с ошибками.
    • На каких страницах и типах страниц происходят ошибки (для отслеживания типов страниц, необходимо внедрить pageType на сайте, а также создать пользовательскую переменную уровня хита hits.page.pageType).
    • В каком браузере и его версиях происходят ошибки.

    На третьей странице представлена подробная информация об ошибках 404:

    • Общее количество ошибок.
    • Количество ошибок на страницу.
    • Количество сессий с ошибками.
    • Количество пользователей, у которых возникли ошибки.
    • А также рефералы, после которых возникли ошибки.

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

    На четвертой странице информация по десктопу:

    На пятой странице данные по планшетам и мобильным устройствам:

    Теперь вы знаете, как заставить свой сайт «летать» 🙂 Если у вас остались вопросы или вы знаете другие способы уменьшить время загрузки страниц, пишите их в комментариях.

    Правда о том, насколько важна скорость загрузки сайта

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

    Выживает быстрейший

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

    Google: «Если сайт загружается дольше трех секунд, 53% пользователей покинут его».

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

    SOASTA: «Каждая секунда задержки мобильной страницы снижает конверсию на 20%».

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

    Google: «У мобильной страницы, скорость которой снизилась с 1 до 10 секунд, показатель отказа вырос на 123%».

    Также стоит обратить внимание, что самый заметный разрыв в конверсии наблюдается в интервале 2-5 секунд (конверсия падает в 9 раз).

    Google: «Низкая скорость загрузки — негативный фактор ранжирования в Google».

    Несколько лет назад говорили о «Мобайлгеддоне». Тогда Google начал проверять, насколько мобильная версия сайта оптимизирована, если с оптимизацией было плохо — сайт опускался вниз в мобильной выдаче.

    Сначала все испугались, потом выдохнули: обычно поисковой выдачи изменения не касались. Так вот, теперь касаются. Google объявил о своем Mobile First Index — этот принцип работает так: если у сайта медленная и не оптимизированная мобильная версия, то и в десктопной выдаче он тоже будет пессимизирован (то есть уйдет вниз).

    Google: «Низкая скорость загрузки является самым раздражающим фактором для мобильных пользователей».

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

    Не только скорость

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

    Search Engine Land: «Самые популярные сайты с большим трафиком не соответствуют критериям Google».

    Аналитический сайт Search Engine Land провел собственное исследование, в котором проанализировал 1000 самых популярных сайтов с высоким трафиком. Он протестировал каждый через сервис PageSpeed Insight и получил интересные результаты. Выяснилось, что только 2% мобильных сайтов получили 100 из 100 баллов. На десктопе процент не сильно изменился: всего 4% преодолели планку в 90 баллов. Средний показатель держался в районе 55 баллов, а средняя скорость страницы — 11 секунд. Это подвергает сомнению тезис о том, что 53% пользователей покидают сайт, который загружается более трех секунд.

    Google: «Показатель скорости загрузки влияет на выдачу менее чем 1% результатов поиска Google».

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

    User Interface Engineering: «Если пользователи жалуются на скорость загрузки, то на самом деле проблема в другом».

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

    WP Faster: «Скорость загрузки не входит в восьмерку главных показателей эффективности сайта».

    Многие веб-разработчики, которые занимаются оптимизацией сайтов, делают упор не на скорость, а на комфортный пользовательский опыт. Подтверждает это и инженер по веб-производительности Google Илья Григорик: «Время загрузки — это плохая метрика производительности. Современные сайты должны быть нацелены на то, чтобы доставить качественный прогрессивный рендеринг».

    Критика на сладкое

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

    Во-первых, цифры можно по-разному интерпретировать. Например, вспомните самое первое утверждение про то, что «53% пользователей покинет сайт, если загрузка длится дольше 3 секунд». В исследовании не говорится о выборке: что это за пользователи, впервые они посещают сайт или нет. А это имеет значение. Вы не будете ждать загрузки незнакомого сайта, так как решите, что он «лежит». И вы подождете хоть 10 секунд, если это ваш любимый Facebook с непрочитанными сообщениями и недосмотренной новостной лентой.

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

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

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

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

    Материал опубликован пользователем.
    Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

    ТОП-12 вариантов, как улучшить скорость загрузки сайта самому

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

    Какую скорость загрузки считать нормой

    Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы – это вполне нормально.

    От чего зависит скорость загрузки

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

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

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

    Все шаги по оптимизации скорости сайта направлены на устранение данных проблем.

    Как проверить скорость сайта

    Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed. Работать с ним просто – указываем адрес сайта и жмем кнопку «Анализировать».

    В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

    • Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint).
    • Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded).
    • Насколько сайт оптимизирован в плане скорости загрузки.
    • Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

    Желательно попасть в зеленую зону – и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

    Еще один хороший сервис для проверки скорости загрузки, правда, на английском – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

    А теперь к сути:

    Как ускорить сайт

    Шаг 1. Оптимизация картинок

    Неоптимизированные картинки – самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.

    Размер картинок (ширина и высота)

    Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.

    Вес картинок (килобайты)

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

    Превью к большим картинкам

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

    Например, Спортмастер использует картинки товаров в трех вариантах:

    Картинка для списка товаров (весит 7 Кб)

    Картинка для карточки товара (весит 18 Кб)

    Картинка для просмотра товара с «лупой» (весит 942 Кб)

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

    При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

    Шаг 2. Gzip-сжатие

    Gzip – это программа для сжатия файлов на сервере (аналог zip-архивов на компьютере). При включенном Gzip сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.

    Как включить Gzip-сжатие:

    Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):

    Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http <. >и перезапускаем сервер:

    Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

    Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

    Шаг 3. Кэширование на стороне браузера

    Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

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

    Через файл htaccess (кэшируем статические файлы на 10 дней):

    Для Nginx добавляем в конфигурацию:

    * \.(jpg|jpeg|gif|png|ico|css|js|txt)$ <
    root /var/www/user/data/www/site.ru;
    expires 10d;
    >
    .
    >

    Если к настройкам сервера доступа нет, опять же пишем в техподдержку и просим настроить кэширование статических файлов.

    Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

    Шаг 4. Минимизация css- и js-файлов

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

    Пример обычного кода:

    Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?

    Единственный минус минификации – теряется читабельность файла. Если понадобится внести изменения в сжатый файл – сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS – они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

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

    Шаг 5. Порядок загрузки css- и js-файлов

    Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился – тогда отрисовка остановится.

    Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом

    Топ-пост этого месяца:  Ребрендинг что это, примеры ребрендинга в России и в мире

    Как ускорить загрузку сайта?

    Время чтения: 9 минут Нет времени читать? Нет времени?

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

    Насколько быстрой должна быть скорость загрузки сайта?

    • 1 секунда – великолепно.
    • 2-3 секунды – очень хорошо.
    • 4-7 секунд – нормально, но есть куда расти.
    • 8-10 секунд – плохо.
    • 11 секунд и более – ужасно, начинайте бить тревогу, т.к. огромные деньги утекают прямо из-под вашего носа.

    Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

    • 57% посетителей покидают страницу, которая грузится более 3-х секунд.
    • В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
    • 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
    • Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
    • 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

    Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

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

    Чем быстрей загружается сайт, тем лучше конверсия

    Чтобы убедиться в этом, изучите следующие результаты исследований:

    • Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
    • Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
    • Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
    • 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

    Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

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

    5 способов увеличить скорость загрузки сайта

    Итак, что же можно сделать, чтобы ускорить загрузку сайта:

    1. Уменьшите размер страниц сайта

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

    Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

    2. Снизьте «вес» графики

    Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

    • Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
    • Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
    • Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
    • Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

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

    3. Упростите код JavaScript и CSS

    Использование специальных средств упрощения кода JavaScript и CSS уменьшает «вес» соответствующих элементов сильнее, чем стандартные технологии сжатия, например, gzip. Сервисы упрощения удаляют из кода лишние элементы, а также сокращают названия функций.

    Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

    4. Уменьшите число запросов браузера

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

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

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

    • Разрешите браузерам кэшировать данные. Если страницы вашего сайта являются статическими, нет нужды «заставлять» посетителей всякий раз загружать их содержимое заново. Попросите администратора сервера или хостинг-провайдера включить опцию кэширования фотографий, элементов CSS и JavaScript. Чтобы проверить результат этого действия, воспользуйтесь, например, сервисом Redbot.
    • Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
    • Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

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

    5. Сократите расстояние между сайтом и пользователями

    Если сервер вашего хостинг-провайдера находится во Владивостоке, посетителям из Санкт-Петербурга придется набраться терпения, ожидая загрузки страницы. Эта проблема особенно актуальна для сайтов с «тяжелым» контентом, которые посещают пользователи, физически удаленные от сервера на большие расстояния. Чтобы решить эту проблему, воспользуйтесь сетями доставки контента (CDN), например, Amazon CloudFront или Akamai.

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

    Скорость загрузки сайта очень важна в продвижении сайта и относится к факторам ранжирования.Ваш сайт долго грузится? Это негативно сказывается на позиции в выдаче. И Яндекс, и Google предпочитают более быстрые ресурсы.
    Оптимальное время загрузки — 2-3 сек. 0,5 сек – это идеальное время реакции. Но если Ваш сайт высоко нагруженный оптимальная скорость реакции может быть увеличина. В таком случае расчесывайте среднее время загрузки сайтов конкурентов в данной области и ориентируйтесь на него.

    Как проверить скорость загрузки сайта

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

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

    Google speed insights

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

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

    Uptrends.com

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

    Pingdom.com

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

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

    Sitechecker.pro

    Удобный анализ и мониторинг SEO параметров вашего сайта – данный сайт проводит анализ скорости ссылаясь на статистику Google Page Speed.

    Сервис бесплатно проверит выбранную страницу по чеклисту на 156 параметров и даже обещает помочь устранить каждую возможную проблему. Sitechecker проанализирует все картинки (их мета-теги, вес и оптимизацию), технические файлы (robots.txt и sitemap.xml), ответы сервера, внешние ссылки и множество других параметров.

    Gtmetrix.com

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

    Loadimpact

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

    Dareboost

    Десятки советов по оптимизации. Автоматический, легкий, эффективный. Инструмент анализирует то, как ваш сайт оценивается по сравнению с вашими конкурентами! Если ваш сайт на 20% медленнее, время загрузки будет заметно отличаться.

    Sitespeed

    SiteSpeed создан для того, чтобы любой пользователь мог проверить доступность и определить на сколько быстро загружается с разных точек мира интересующий его веб-сайт, отдельные его страницы, контент. Просто введите в строку URL нужного вам ресурса — и вы получите всю необходимую информацию: размер объекта, время и скорость загрузки.

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

    Websiteoptimization

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

    Заключение

    • Скорость загрузки — важный фактор ранжирования. Рекомендуемое время загрузки — 2 сек. Для высоконагруженных приложений рассчитайте время загрузки самостоятельно — среднее время между конкурентами. На скорость влияют вес сайта и хостинг.
    • Выбирайте хостинг под технические особенности ресурса. Откажитесь от размещения на виртуальном хостинге.
    • Увеличивайте скорость. Уменьшите количество запросов, по которым обращаются к серверу. Для этого объедините CSS в один файл и скрипты JS тоже в отдельный файл. Оптимизируйте их через инструменты CSS Minifier, CSS Compressor для CSS, и JS Minifier и JavaScript Compression Tool для JavaScript. Размещайте js скрипты перед закрывающим тегом .
    • Оптимизируйте изображения. Делайте из иконок спрайты, сжимайте и оптимизируйте фотографии с помощью Kraken.io и TinyPNG. Используйте фотографии только требуемого размера.
    • Настройте Турбо-страницы от Яндекс и AMP от Google для загрузки легкой версии страниц.

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

    Время отклика, время и скорость загрузки страниц ТОПовых интернет-магазинов Рунета

    Мы провели сравнительный анализ серверных характеристик (время отклика, время загрузки и скорость загрузки сайта) у 80 крупнейших интернет-магазинов Рунета.

    Средние показатели для разных типов страниц:

    Тип страницы Время отклика, мс Время загрузки, с. Скорость загрузки, кб/с
    Главная страница 343 1,07 173
    Разделы / подразделы 232 1,12 205
    Страница товара 194 1,10 175

    Внимание! Мы не учитывали подключаемые файлы (картинки, JavaScript, CSS и т.д.). Скорость и время загрузки рассчитано только для html кода страниц.

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

    Доли интернет-магазинов по времени отклика, времени загрузки и скорости загрузки

    Время отклика сайта

    Логично, что чем меньше время отклика сервера, тем лучше. Стоит заметить, что у 89% всех исследованных интернет-магазинов время отклика страниц составило до 300 мс.

    Время загрузки страниц

    Как видно из графика у 74% магазинов время загрузки страниц составило менее 1,3 с.

    Скорость загрузки страниц

    Интересно, что лишь у 14% интернет-магазинов скорость загрузки более 300 кб/с.

    Из вышесказанного вытекает ниже следующее:

    1. Время отклика нужно смотреть на разных типах страниц;
    2. Оптимальное время отклика — не более 250 мс, нормальное время загрузки страниц — не более 1 с., а скорость загрузки сайтов — выше 50 кб/c.

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

    P.S. Анализ проводился в тяжелейших условиях. Постоянный гнёт цензора не позволил передать все мысли которые я хотел донести. От того текст получился сухой и невесёлый. А в ходе исследования нарисовался такой вот гусь:

    Иван Шаронов
    младший SEO-специалист

    2 thoughts on “ Время отклика, время и скорость загрузки страниц ТОПовых интернет-магазинов Рунета ”

    А какими инструментами можно замерить для своего сайта время отклика и скорости загрузки?

    Для этого мы используем свои разработки, но так же можно воспользоваться http://www.seobuilding.ru/site… , или http://pr-cy.ru/speed_test но он не показывает время отклика.

    Физкульт-привет читателям и подписчикам нашего блога.

    Добавить комментарий