Антикризисное предложение! При заключении договора в период самоизоляции -15% на любой тариф!

Как измерить и улучшить скорость загрузки страниц сайта

Алексей Думчев
11 Февраля 2020 г, 19:19
   19

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

Этапы загрузки сайта

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

Процесс загрузки включает несколько этапов:

  1. Время отклика сервера. Это показ интервала, требуемого для обработки сервером запроса браузера и направления ответа. Сюда включается преобразование доменного имени в IP-адрес и процесс передачи данных TCP.
  2. TTFB – время до первого байта. Ключевой показатель для поисковых систем. Метрика демонстрирует время получения первого сетевого пакета в ответ на высланный запрос.
  3. Загрузка и обработка содержимого страницы. Продолжительность обработки графики, объектов HTML, стилей и скриптов.
  4. Время до рендеринга. Длительность полного отображения страниц для посетителя. Ускореяет процесс специальный оптимизированный код. Вначале он выгружает небольшие и простые элементы, постепенно направляясь к весомым элементам и файлам.
  5. Время до интерактивности. Показатель, отображающий интервал, через который человек сможет благополучно пользоваться всеми функциями площадки.
  6. Выгрузка элементов со сторонних веб-ресурсов. Тут все зависит от особенностей вашего сайта. Часто загрузка элементов со сторонних ресурсов откладывается на конечный этап. Содержимое меняется без ведома владельца веб-сайта, что означает рост временного интервала на передачу и обработку данных.

Обмен данными между клиентов и сервером выглядит следующим образом:

  1. Отправляется запрос из браузера на сервер с получением HTML-кода веб-ресурса.
  2. Запрос таблицы стилей с получением CSS-файлов.
  3. Запрос получения скриптов и приобретение в ответ JS-файлов.
  4. Запрос шрифтов, полученных из кода, и приобретение файлов шрифтов с сервера.
  5. Запрос на приобретение графических файлов с ответным получением файлов картинок, видеозаписей и иного важного контента.

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

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

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

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

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

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

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

прибыльность сайта
  • глубина просмотров;
  • конверсия;
  • репутация веб-ресурса;
  • вовлеченность пользователей и их заинтересованность;
  • общее впечатление о сайте;
  • количество открываемых страниц.

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

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

  • 47% аудитории готовы ждать загрузки до 2 секунд, и 40% посетителей покинут площадку в течение следующей секунды.Это при том, что еще пару лет назад загрузка в 3-7 секунд считалась относительно нормальной.
  • При сокращении времени на 3 секунды среднее количество просмотренных страниц увеличилось на 25%. Нагрузка снизилась наполовину, а доход увеличился примерно на 10%.
  • Аналитики Amazon подсчитали, что всего одна лишняя секунда загрузки сайта влечет к потере 1,6 млрд долларов годового бюджета.
  • Тот же Amazon утверждает, что каждые 100 мс ускорения веб-ресурса дает увеличение дохода на 1%.
  • Для 66% пользователей скорость загрузки сайта сказывается на репутации бренда. У 33% пользователей длительное ожидание формирует негативный образ о владельце площадки.

Дополнительно проводились исследования о взаимосвязи скорости загрузки сайта и его рейтинге в поисковиках Яндекс и Google. Выводы были сделаны следующие:

  • За высокую длительность ожидания сайт получает штрафы от поисковиков;
  • Для борьбы за ТОП-10 нужно оптимизировать оперативность открытия страниц;
  • Обнаружена взаимосвязь между скоростью сайта и оценкой поведенческого фактора, который считается основным критерием ранжирования.

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

Инструменты для измерения скорости загрузки

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

Яндекс.Вебмастер

Сделать тест скорости загрузки сайта можно, используя Яндекс Вебмастер на десктопных;

Измерение скорости сайта

устройствах. Инструмент демонстрирует время ответа в миллисекундах.

Если код ответа – «200 ОК», то с веб-ресурсом все хорошо. Если ответ «301 Moved» ;

Permanently» или «404 Not Found»,то у вас точно есть какие-то проблемы, которые нужно решить. Использовать сервис можно без регистрации. Он понятен даже непрофессионалу и интуитивно понятный.

PageSpeed Insights

Инструмент, позволяющий измерить скорость загрузки страниц сайта – это PageSpeed Insights от Гугл. Программа оценивает эффективность страниц как для компьютеров, так и для мобильных устройств. Помимо этого есть рекомендации по оптимизации проекта.

Оценка демонстрируется от 1 до 100. Зависит она далеко не только от скоростью загрузки. Это внутренняя метрика программы, основанная на ряде правил. Рекомендации инструмента не стоит воспринимать как призывы к действию, о чем говорят и сами разработчики. Слишком серьезное отношение к советам сервиса может повлечь вред для вашего сайта.

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

GTmetrix

Посчитать скорость загрузки сайта можно с помощью удобного сервиса GTmetrix. Вот некоторые его преимущества:

  • Дополнительная оценка от поисковой системы Yahoo (пригодится при продвижении за границей);
  • Возможность настройки постоянного мониторинга страницы.
  • Приятный интерфейс;
  • Возможность выбрать скорость соединения;
  • Выгрузка отчета в PDF;

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

Pingdom Tools

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

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

Как улучшить скорость загрузки

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

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

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

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

Оптимизация сервера

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

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

Оптимизация JS, CSS файлов и картинок

Неоптимизированные картинки – самые «тяжелые» элементы сайта. Обработка изображений позволит дать значительный прирост к скорости. В первую очередь нужно обратить внимание на вес картинок и их размер. Фотографии шириной около 5000 пикселей смело уменьшайте до 1600 пикселей. Изображения с фотоаппарата нужно сжимать в объеме перед загрузкой на сайт. К большим картинкам стоит делать превью. Так список товаров и фотографий к ним будет загружаться быстрее.

Также стои свести к минимуму количество css- и js- файлов. Сделать это можно посредством удаления пустых строк, пробелов, комментариев и т.д. Используйте более короткие имена переменных. Браузеру без разницы, с каким файлом взаимодействовать – минимизированным или обычным.

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

Настройка кешерирования

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

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

Оптимизация баз данных

Важный этап загрузки сайта – генерация сервером конечного HTML-кода, который он передает браузеру. Код генерируется движком сайта (CMS). Если движок написан неверно, можно «собирать» страницу достаточно долго, выполняя лишние запросы к файлам и базам данных.

При выборе CMS для сайта обратите внимание на популярные движки – WordPress, Битрикс, Open Cart и пр. Все они зарекомендовали себя как надежные и быстродействующие. Так как системы регулярно дорабатываются, следует постоянно обновлять CMS на сайте.

Устранение лишних элементов

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

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

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

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

А что вы думаете по этому поводу? Давайте обсудим в комментариях!

Понравилась статья? Получай свежие статьи первым по e-mail.
Подпишитесь на обновления:
Оцените статью:
Поделиться:
Оставить заявку