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

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

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

Один из самых животрепещущих вопросов, связанных с измерением скорости сайта – это что измерять? Ниже представлены основные важные пункты важный для того, чтобы проверить время загрузки страницы сайта:

• Загрузка основных элементов страницы.
• Полная загрузка сайта.
• TTFB – time to first bite. Это время, за которое страницы выдает первые результаты загрузка.
• Начало рендеринга (измерения покажет время от конца «белого экрана» до прорисовки элементов страницы).

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

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

• Использовать панель разработчика в браузере.
• Запустить аудит сайта (через вкладку Audits. Используя плагин, мы получаем скорость работы сайта на мобильных устройствах).
• Использовать веб-сервис (например WebPagetest. Сервис загрузит сайт в браузере и даст отчет по этапам и метрикам).
• Воспользоваться сервисом Google PageSpeed Insights (не дает детального отчета, но поможет быстро сформировать основные моменты из-за которых сайт «тормозит»).

Эти способы связаны с измерением клиентской скорости. Когда измеряется серверная скорость, чаще всего это делает веб-мастер и для измерения скорости он проверяет:

• Ресурсы хостинга,
• Сервисы базы данных,
• Влияние CMS и программного кода,
• Кэширование.

Оптимизация скорости работы сайта

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

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

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

Клиентская

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

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

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

https://developers.google.com/speed/pagespeed/insights/?hl=ru

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

https://tools.pingdom.com/fpt/

2. Провести анализ основного контента сайта. Сжимание размера картинок и оптимизируя дизайн можно сильно ускорить время загрузки сайта.
3. Сократить количество рекламы.
   Да, безусловно, количество рекламы напрямую влияет на вашу прибыль. Но не стоит забывать, что ее излишнее количество, увеличивая оптимальное время загрузки сайта уведет от вас потенциального пользователя, а значит повлияет на целевую аудиторию. Реклама влияет как на скорость загрузки, так и на поведенческий фактор. Избыток рекламных баннеров отпугнет потенциального посетителя.
4. Проанализировать ошибки в коде (валидация).
5. Воспользоваться хорошим хостингом.

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

Серверная

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

1. Сбрасывание кэша.
   Самый простой и популярный способ ускорения работы сервера. Этот способ связан с тем, что не все элементы страницы легко кэшируются, и если вопрос замедления можно решить этим способом, то он наиболее эффективен.
2. Улучшение сервиса базы данных.
   Один из мощных способов, с помощью которого, можно получить действительно сильное ускорение.
3. Оптимизация «движка» сайта.
   В частности, оценить все дополнительные модули, плагины, которые работают не только с серверной стороны, но и со стороны создателей страницы и сайта.
4. Вынос статического контента.
   Перенос статического контента в память и снятие этой задачи с сервера.

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

Оптимизация скорости загрузки сайта по Google PageSpeed Insights

Краткое содержание статьи:

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

Кратко об изменениях в работе инструмента

Раньше при оценке сайта Google основывался на своих метриках и правилах. Из недостатков: инструмент мог показывать оптимизированные страницы с быстрой загрузкой, но по факту страница могла грузиться долго, и при этом оценка отображаться высокой. Была и обратная ситуация: страницы загружались быстро, а оценка была низкой. 12 ноября 2018 года инструмент был обновлен. Формулы подсчета показателей полностью сменились, а также добавились новые.

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

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

Первое, что вы увидите — это оценка эффективности страницы. Она определяется с помощью Lighthouse, о котором мы писали выше. Эффективность загрузки страницы измеряется по шкале:

• 90 или выше – быстрая;
• от 50 до 89 – средняя;
• ниже 49 – медленная.

Данные наблюдений и Origin Summary

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

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

• Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
• Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

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

Имитация загрузки страницы оценивается по 6 показателям:

• Время загрузки первого контента (FCP).
• Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
• Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
• Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
• Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
• Максимальная потенциальная задержка (FID).

«Оптимизация», «Диагностика» и «Успешные аудиты»

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

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

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

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

• Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
• Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
• Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

  

  Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

• Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
• Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media=»print» в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:



• На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.

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

• Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
• Для Joomla плагины JCH Optimize.
• Для Drupal плагины JCH Optimize.
• В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
• Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

Используйте современные форматы изображений

В этом разделе инструмент рекомендует использовать форматы изображений JPEG 2000, JPEG XR и WebP, которые превосходят JPEG и PNG в характеристиках сжатия и сохранения качества.

Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

WebP

JPEG 2000

JPEG XR

Исходя из приведенных таблиц наиболее лучшим оказывается формат WebP (но всё еще не универсальным), который можно получить следующим образом:

• Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
• Плагин AdobeWebM для Adobe Photoshop CC.
• Плагины для CMS:
  1. для WordPress плагин WebP Express.
  2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта — оптимизация css, js и картинок» и Ammina Optimizer.
  3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
  4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
  5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

Настройте эффективную кодировку изображений

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

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

• PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
• JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
• GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

Оптимизация изображений может происходить следующим образом:

• Вручную с помощью Adobe Photoshop и с использованием экшенов.
• Пакетное преобразование с помощью FastStone Image Viewer.
• Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
• С помощью доработки кода, например в Bitrix.
• С помощью плагинов:
  1. для WordPress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
  2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
  3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
  4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
  5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

Удалите неиспользуемый код CSS

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

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

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

Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

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

• Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
• Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
• Оптимизируйте таблицы базы данных MySQL.
• Если используете старую версию CMS, лучше обновите её до последней версии.
• Включите кеширование сайта браузером.
• Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
• Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
• Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
• Выполните рекомендации из разделов Google PageSpeed Insights, описанн

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

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

Оптимизатор и автор блога Backlinko Брайан Дин с командой часто проводят исследования на больших объемах выборки. К примеру, в блоге PR-CY есть перевод исследования 912 миллионов статей с важными выводами о контент-маркетинге.

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

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

Как проводили исследование

Метрики, которые входят в измерение скорости загрузки сайта, мы разбирали в подборке плагинов для WordPress. У сайтов на любых движках измеряют время загрузки первого байта (TTFB), начало рендеринга страницы, загрузку основных элементов и полную загрузку контента страницы.

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

Кратко о самых интересных выводах

1. Скорость загрузки
   Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на мобильном. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на смартфоне.
2. TTFB
   Использование CDN коррелировало с улучшением показателей скорости загрузки TTFB. Для десктопных результатов на показатель TTFB сильнее влияют CDN, а для мобильных — количество запросов HTML.
3. Фреймворки
   Самыми быстрыми JavaScript-фреймворками для средних по размеру страниц оказались Wink и Gatsby.
4. Сжатие файлов
   Более высокая производительность у страниц с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера.
5. Сжатие изображений
   Лучший результат по ускорению загрузки дали адаптивные изображения. Еще очень эффективным оказалось сжатие gzip — и для десктопа,и для мобильной выдачи. Использование формата WebP для ускорения загрузки картинок работает хуже.
6. CMS
   При сравнении мобильных страниц на разных CMS лучшие показатели у сайтов на движках Squarespace и Weebly, худшие у Wix и WordPress.

Разберем выводы подробнее с таблицами.

Общая скорость загрузки

Загрузка страницы состоит из отдельных этапов, некоторые из них происходят на уровне сервера, другие в браузере пользователя:

Исследователи определили среднюю скорость для этих показателей:

• TTFB — время до загрузки первого байта HTML-документа.
• StartRender — начало рендеринга страницы.
• Visual Complete — время, за которое пользователь начинает видеть весь контент страницы.
• Индекс скорости — как быстро пользователь видит загрузку страницы.
• onLoad — время, за которое загружаются все ресурсы страницы (CSS, изображения и т. д.).
• Полная загрузка — время, за которое страница полностью загружается в браузере пользователя.

В итоге средняя скорость загрузки страницы составляет около 10,3 секунд на десктопе и 27,3 секунды на смартфоне. В среднем мобильные страницы загружаются на 87,84% дольше, чем десктопные.

Как CDN влияет на скорость загрузки

Исследователи проанализировали влияние разных характеристик страницы на TTFB (время до первого байта):

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

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

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

В десктопной выдаче:

И в мобильной:

Как это могло произойти?

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

Исследователи проанализировали производительность 18 лучших поставщиков CDN и нашли большую разницу в производительности — лучший из найденных CDN работал в 3,6 раза эффективнее, чем худший вариант.

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

Результаты по десктопу

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CacheFly, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: CDN77.

Плохо: Akamai, ArvanCloud, Cloudflare, Fireblade, Incapsula, Sucuri.

Результаты по мобильной выдаче

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CDN77, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: Fireblade, Incapsula, Sucuri.

Плохо: Akamai, ArvanCloud, Cloudflare.

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

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

Какие фреймворки самые быстрые

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

Сначала они изучили, как часто программисты использовали платформы из выборки:

Самым популярным по использованию JS-фреймворком оказался React — его используют 25,3% сайтов. Еще популярны TweenMax (10,3%) и RequireJS (9,5%).

Затем исследователи хотели выяснить, какие фреймворки JavaScript связаны с показателем FCP (First Contentful Paint) — временем, когда пользователь начинает видеть отрисованный полезный контент на странице. Результаты разделили по размеру страниц: маленькие (<1,264,374 байт), средние (1,264,374 и 4,019,332 байт) и большие (> 4,019,332 байт).

Для небольших страниц RightJS вышел на первое место:

Для средних по размеру страниц лучшие результаты показали Wink и Gatsby:

Самое быстрое время FCP на больших страницах было у страниц с Gatsby и Riot:

Выбор фреймворка JavaScript может значительно повлиять на время загрузки FCP. Для страниц среднего размера JS-фреймворк Wink, который оказался лучшим, загружается на 213% быстрее, чем самый медленный фреймворк Meteor.

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

Скорее всего не существует «лучшего» JavaScript-фреймворка для любой страницы. Для сайтов с небольшими страницами RightJS показал себя лучшим, для сайтов с большими страницами подойдет Gatsby.

Как сжатие файлов влияет на скорость

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

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

• быстро: 0-1000 мс;
• средне: 1000 мс — 2500 мс;
• медленно: <2500 мс.

Затем они сравнили скорость FCP и уровни сжатия для маленьких, средних и больших по размеру страниц.

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

Страницы среднего размера имели похожие результаты:

Большие страницы тоже показали такой результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

Weebly и Squarespace выходят на первое место для десктопов.

Что касается скорости загрузки страниц на мобильных устройствах, Squarespace занимает первое место, Adobe Experience Manager и Weebly завершают топ-3. Выходит, топ-3 из анализа десктопа и мобильной выдачи одинаков, разные только лидеры.

По статистике 30% всех сайтов созданы на WordPress. Интересно, что в этом исследовании скорости загрузки WordPress занимает только 14 место по мобильной выдаче. Wix — тоже одна из самых популярных CMS и тоже занимает далеко не первые места в таблице по скорости загрузки на мобильном и десктопе.

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

Почитать по теме:
Какую CMS выбрать? Чек-лист для начинающих
Как выбрать CMS для интернет-магазина

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

По данным исследования, самые быстрые страницы из десктопной и мобильной выдачи были на Weebly, Squarespace и Adobe Experience Manager.

Итак, с высокой скоростью загрузки TTFB коррелировало использование CDN на десктопе и количество запросов HTML на мобильных устройствах. Высокую скорость загрузки показывали страницы с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера. Сжатие gzip — самое эффективное для обоих видов выдачи. В оптимизации картинок лучший результат дали адаптивные изображения. Использование формата WebP для ускорения загрузки картинок работает хуже.

Эти и другие выводы в оригинале исследования Backlinko