Проверяем скорость загрузки сайта

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

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

 

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Объём, или же размер изображения

Мной заботливо украдена таблица из , где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

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

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

Есть две причины измерить скорость загрузки сайта и ускорить его:

Эта история не новая – еще в 2010 году Google объявил, что скорость загрузки сайта является фактором ранжирования.

В 2018 году этот фактор начал влиять на результаты мобильной выдачи.

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

Очевидно, что Яндекс считает скорость важной составляющей нормальной работы сайта

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

В Google выяснили, что при увеличении скорости загрузки с 1 до 3 секунд вероятность отказа возрастает на 32%, а с 1 до 5 секунд на 90%. В другом исследовании выявили, что увеличение скорости загрузки на 1 секунду приводит к снижению конверсии на 25%. И таких исследований масса.

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

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

Тестирование скорости специалистом

Наиболее полной и детальной информацией обладает Спидтест

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

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

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

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

Основной профиль оператора Йота – это интернет типа LTE. Согласно данной технологии, параметры загрузки должны соответствовать на максимуме 326 Мбит/сек., а показатели отдачи – 172,8 Мбит/сек. Конечно, такие параметры скорее теоретичны, в реальности скорость интернета от оператора Yota несколько ниже.

Многие абоненты Ета используют специальные спид тесты, берут в аренду оборудование для тестирования и выкладывают, полученные результаты в сеть. Анализ итогов тестирования показал, что довольно высокими показателями являются 35 Мбит за секунду при приеме и 15 Мегабит за секунду при отдаче данных. Такая скорость Yota считается нормой и позволяет использовать internet для любых целей.

Проведенные Йота спидтесты позволили определить, что на скорость передачи данных влияют следующие факторы:

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

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

Не расстраивайтесь если ваши показатели окажутся в 8-10 раз меньше максимально доступных скоростей. 30 Мбит/секунду вполне хватает даже для просмотра видео контента в высоком разрешении. В целом Йота показывает более высокие результаты по тесту скорости, но к сожалению не во всех областях. Далее я расскажу вам как провести свой тест и получить данные по результатам тестирования о скорости интернета Yota.

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

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

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

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

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

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

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

  • GTmetrix
  • WhichLoadFaster
  • Pingdom Tools
  • Web Page Performance Test
  • Monitis Tools
  • SiteSpeed.me
  • Load Impact
  • WebPage Analyzer

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

Важность ускорения сайтов

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

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

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

Page Speed — анализ скорости и советы по ее увеличению

P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.

Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.

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

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

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

Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера»), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.

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

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

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

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

loading.express

Этот один из немногих сервисов, который позволит вам проверить скорость загрузки вашего ресурса на территории России. В целом, выдаёт нормальный блок по основным метрикам скорости. Самая полезная фича — время ответа сервера для региона РФ. Не каждый сервис в этом обзоре сможет дать вам адекватное число. По значкам вопроса можно кликать и смотреть подробное описание того что и как измеряется. Из минусов: подходит только для экспресс-аудита ваших страниц, а также нельзя сохранить ссылку на проверку, чтобы вернуться к ней позже. За более подробными рекомендациями по скорости лучше смотреть другие 4 сервиса в обзоре.

gtmetrix.com

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

Из минусов: регион сканирования находится слишком далеко от СНГ, что немного сказывается на точности и числовых показателях скорости. 

pingdom.com

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

webpagetest.org

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

dotcom-tools.com

Главная фишка данного инструмента — проверка скорости загрузки из 25 разных регионов, включая Северную и Южную Америку, Европу, Азию, Африку. Подробных рекомендаций ждать не следует, а вот сравнить быстродействие в другой стране будет удобно вместо запуска отдельно нескольких тестов, как в случае с webpagetest.org.

Как увеличить скорость интернета

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

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

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

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

  • Удалить лишние изображения, JS-файлы, коды сторонних сервисов.

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

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

  • Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
  • Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

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

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

Какое сжатие изображений эффективнее ускоряет загрузку

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

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

  • WebPНекоторые сайты уже используют новый формат WebP, который разработал Google. Изображения в таком формате при сохранении качества могут весить значительно меньше картинок в другом формате.Как использовать WebP для оптимизации картинок на сайте
  • Оптимизированные изображенияПод такими изображениями исследователи подразумевают разные версии картинок, которые появляются в зависимости от устройства пользователя. В эту категорию они включили использование CDN, сжатие и другие службы оптимизации изображений.
  • Отложенная загрузка изображенийLazy loading или «ленивая загрузка» — изображения на следующем скролле страницы загружаются по мере надобности, когда пользователь прокручивает до этого скролла.
  • Адаптивные изображенияКартинки, которые динамически адаптируются под размер окна браузера.

При сравнении разных подходов для оценки скорости адаптивные изображения вышли на первое место.

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

Формат WebP перспективнее PNG и JPEG по сжатию при сохранении качества, но пока очень немногие сайты внедрили этот новый формат изображений.

WebPagetest

Отчет «Время загрузки страниц»

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

  • Статистика: данные о странице в зависимости от различных аспектов.
    • Использование сайта: основные показатели взаимодействия (например, просмотры страниц или показатель отказов).
    • Технические характеристики: показатели сети и сервера.
    • Хронометраж DOM: показатели синтаксического анализа документа.
  • Распределение: доля различных факторов в общем значении.
  • Наложение данных на карту: просмотр различных показателей в зависимости от региона.
    • Использование сайта: основные показатели взаимодействия (например, просмотры страниц или показатель отказов).
    • Технические характеристики: показатели сети и сервера.
    • Хронометраж DOM: показатели синтаксического анализа документа.

Консоль разработчика Google Chrome

Проверить скорость загрузки сайта можно также при помощи браузера Google Chrome и консоли отладчика. Для того чтобы выполнить проверку, зайдите на интересующий вас сайт и нажмите клавишу F12. После этого откроется окно разработчика – перейдите на вкладку “Network” и обновите страницу с помощью нажатия клавиши F5. По мере загрузки страницы можно будет увидеть перечень прогружаемых файлов (изображений, скриптов и т.п.), а также количество времени, которое потребовалось на загрузку того или иного элемента.

Анализ скорости сайта с помощью консоли разработчика Google Chrome

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

Оптимизация JS

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

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

Встраивание JS скриптов в HTML-код

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

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

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

Если же для корректной работы страницы или функционала требуется более раннее исполнение скрипта, можно включать его в начало. Например, Google Analytics просит устанавливать код своего счётчика ближе к началу тега <head>, а Яндекс Метрика — ближе к началу <body>.

Отложенная загрузка скриптов

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

Не рекомендуется загружать скрипты аналитики (Метрики или GA) с помощью атрибута defer, что подтвердил один из разработчиков Яндекс Метрики:

Минификация файлов JS

Рекомендуется аналогично с CSS использовать минификацию (minify) для скриптов. Google рекомендует использовать технологии: UglifyJS и Closure Compiler, или же загрузить минифицированные файлы из Google PageSpeed Insights.

В настройках Яндекс Метрики можно выгрузить уже готовый код «в одну строку». Это выбирается просто в настройках счётчика:

Также есть онлайн-минификаторы, что позволяют сократить лишнее в коде JS. Достаточно внести текущий код, и забрать уже готовый. Инструмент, которым пользуюсь я: minifier.org.

Использование атрибута rel=»preconnect»

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

Preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сторонний сервер. Preconnect добавляется непосредственно к тегу link как атрибут HTML. Ниже приведён пример возможного использования preconnect:

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

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

Скорость загрузки сайта: ускоряйте без перфекционизма

Когда вы проанализируете свой сайт в PageSpeed Insights и увидите, что он в «красной» зоне, то это не повод доставать валерьянку. Посмотрите на результаты аудита – наверняка вы что-то сможете внедрить своими руками. При этом ускорение сайта вы заметите моментально.

Но зацикливаться на скорости загрузки не стоит. Есть аудиты, для прохождения которых нужно не просто что-то сжать, а «перелопатить» структуру сайта. Это долго и дорого. И не факт, что потраченные усилия будут стоить вложенных денег.

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

И все у вас будет хорошо.

Имитация загрузки страницы

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

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

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

Заключение

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

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

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

Если вы хотите стать опытным вебмастером и зарабатывать на своих проектах, то я рекомендую вам курс Василия Блинова “Как создать блог”. Разработка сайта на WordPress, оптимизация его под поисковые системы и монетизация – все эти вещи будут рассмотрены на курсе, который постоянно обновляется и дорабатывается.

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий