Время до загрузки dom что это: 4 отчета Яндекс.Метрики, о которых все знают, но которыми не все пользуются

Время первого байта: Время от начала первого запроса до получения первого байта первого запроса без перенаправления. На этот раз количество редиректов 3xx увеличится.

Время взаимодействия DOM: Время до полной загрузки и обработки DOM.

Время первой отрисовки: Время, пока браузер не отобразит что-либо, кроме фона по умолчанию.

Время первой отрисовки содержимого: Время до первого отображения браузером содержимого.

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

Время начала рендеринга: Время до отрисовки первого пикселя содержимого.

Время загрузки DOM: Время до загрузки документа и анализа начальной разметки. Это соответствует событию DOMContentLoaded браузера.

Время завершения DOM: Время до готовности страницы и всех ее подресурсов.

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

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

Время загрузки: Время до загрузки страницы. Это соответствует событию загрузки браузера.

Время завершения визуализации: Время до завершения рендеринга всего верхнего содержимого.

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

Время полной загрузки: Время до 1,5 секунд бездействия сети после загрузки с ожиданием до 5 секунд. Если загрузка никогда не достигается, время от начала первого запроса до конца последнего запроса заканчивается.Последний запрос для завершения не всегда является последним запущенным запросом.

Время DNS: Время, необходимое для разрешения имени хоста от DNS-сервера

TCP Connect Time: Время для создания TCP-соединения.

Время SSL: Время, необходимое для согласования SSL / TLS.

Время отправки: Время, необходимое для отправки данных HTTP на сервер.

Время ожидания: Время с момента завершения запроса до момента получения первого байта ответа для первого запроса на странице.

Время приема: Время, необходимое для чтения всего ответа от сервера.

Количество запросов: Общее количество сделанных запросов. Это эквивалентно сумме всех типов ресурсов (HTML, изображение, JavaScript, CSS, видео, шрифт и другие значения).

Количество HTML: Количество запросов HTML-документов.

Количество изображений: Количество запросов изображений.

Количество JavaScript: Количество запросов файлов JavaScript.

Количество CSS: Количество запросов на файлы CSS.

Количество видео: Количество запросов на видео.

Количество шрифтов: Количество запросов шрифтов.

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

Количество ошибок клиента: Количество ответов с кодом состояния от 400 до 499.

Количество ошибок подключения: Количество ответов с кодом состояния 504 или 0 (запрос, прерванный браузером).

Количество ошибок сервера: Количество ответов с кодом состояния 500 или выше (исключая 504).

Количество ошибок: Общее количество ответов с кодами состояния больше или равными 400. Это эквивалентно общему количеству ошибок клиента, соединения и сервера.

Размеры содержимого рассчитываются с использованием размера передачи (или размера передачи) каждого запроса.

Размер содержимого: Общий размер (в байтах) всего загруженного содержимого. Это эквивалентно общей сумме размеров всех типов ресурсов (HTML, изображение, JavaScript, CSS, видео, шрифт и другие размеры).

Размер HTML: Общий размер (в байтах) всего загруженного содержимого HTML.

Размер изображения: Общий размер (в байтах) всех загруженных изображений.

Размер JavaScript: Общий размер (в байтах) всех загруженных файлов JavaScript.

Размер CSS: Общий размер (в байтах) всех загруженных файлов CSS.

Размер видео: Общий размер (в байтах) всех загруженных видео.

Размер шрифта: Общий размер (в байтах) всех загруженных шрифтов.

Другой размер: Общий размер (в байтах) всех других ресурсов, кроме запросов HTML, изображений, JavaScript, CSS, видео или шрифтов.

Самая большая Contentful Paint: измеряет время загрузки страницы, воспринимаемое пользователями. Метрика «Самая большая краска содержимого» (LCP) сообщает время визуализации самого большого элемента содержимого, видимого в области просмотра.

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

Совокупное смещение макета: измеряет стабильность страницы. CLS основан на формуле, которая подсчитывает, сколько раз компоненты на странице перемещаются или «сдвигаются» во время загрузки страницы. Лучше меньше смен.

Время отклика: Время отклика для одной страницы Real Browser Check такое же, как время загрузки.Если настоящая проверка браузера состоит из нескольких этапов, то время отклика равно сумме времен загрузки для каждой страницы, доступной во время пользовательского потока. Время отклика для проверки работоспособности равно времени сервера.

Время безотказной работы: Для проверки работоспособности метрика «Время работы» представляет собой процентное время безотказной работы конечной точки в течение заданного периода времени.

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

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

Основы скорости страницы

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

• Количество ресурсов (например, изображений, шрифтов, HTML и CSS), загруженных на страницу
• Размер файла этих ресурсов
• Воспринимаемая производительность вашего сайта пользователями

В дополнение к тому, что пользователи видят при отображении контента в браузере, есть дополнительные улучшения, которые вы можете внести в серверную часть, включая оптимизацию любой работы, которую сервер должен выполнить, чтобы вернуть первый байт обратно клиенту.На время загрузки страницы приходится больше, чем просто то, что происходит во внешнем интерфейсе вашего сайта, например, вызовы базы данных или компиляция шаблонов в HTML. Однако, как говорит Стив Содерс, «от 80 до 90% времени ответа конечного пользователя тратится на интерфейс». Поскольку именно здесь живет подавляющее большинство пользователей, мы сосредоточимся на интерфейсных аспектах времени загрузки страницы.

Как браузеры отображают контент

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

Сначала браузер отправляет запрос на получение контента. В первый раз, когда браузер делает запрос к новому домену, ему необходимо найти сервер, на котором находится этот контент. Это называется поиском DNS . Поиск DNS определяет, где в Интернете живет ваш веб-хост, чтобы запрос контента мог дойти до вашего сервера. Браузер запомнит это местоположение в течение определенного периода времени (определяемого настройками DNS для вашего сервера), поэтому ему не нужно тратить драгоценное время на поиск по каждому запросу.

Как только ваш сервер устанавливает соединение с браузером пользователя и получает свой первый запрос, он декодирует запрос и обнаруживает контент, который браузер ищет, пытаясь отобразить страницу. Затем ваш сервер отправит обратно этот контент, будь то изображение, CSS, HTML или другой вид ресурсов, и браузер начнет его загружать и отображать страницу для пользователя. Рисунок 2-1 иллюстрирует этот цикл.

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

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

Запросы

Оптимизация размера и количества запросов, необходимых для создания вашей веб-страницы, окажет огромное влияние на время загрузки страницы вашего сайта.Чтобы проиллюстрировать, как запросы влияют на общую скорость страницы, давайте рассмотрим пример каскадной диаграммы с использованием WebPagetest. (Мы рассмотрим, как использовать WebPagetest в главе 6.) Каскадная диаграмма, такая как на рис. 2-2, показывает, сколько времени требуется для запроса содержимого страницы, такого как CSS, изображения или HTML, и сколько время, необходимое для загрузки этого содержимого перед его отображением в браузере.

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

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

Например, когда мы работаем с изображениями, мы можем организовать отдельные запросы изображений в один спрайт (т. Е. Набор изображений), чтобы сократить количество запросов, которые браузер должен выполнять (мы рассмотрим эту технику в «Спрайтах»).Мы также можем запускать каждое изображение с помощью инструментов сжатия, которые уменьшают размер файла изображений без ущерба для их качества (подробнее см. В разделе «Дополнительное сжатие»). Мы также сосредоточимся на сокращении общего количества файлов CSS и JavaScript и загрузке их в наиболее оптимальном для воспринимаемой производительности порядке, как описано в разделе «Загрузка CSS и JavaScript». Оптимизация размера и количества запросов, необходимых вашему браузеру для загрузки вашей страницы, поможет вам оптимизировать скорость вашего сайта.

Подключения

Количество запросов , которые требуется для загрузки вашей страницы, отличается от количества подключений , которые ваш браузер делает для получения этого содержимого.В WebPagetest в представлении «Подключение» (рис. 2-3) показано каждое подключение к серверу и запросы, полученные через него.

Для каждого подключения вы можете увидеть поиск DNS для домена (темно-зеленый), начальное соединение с сервером (оранжевый) и, возможно, согласование SSL, прежде чем браузер начнет получать контент (ярко-розовый) для активов, обслуживаемых через HTTPS.Но браузеры умны и пытаются оптимизировать загрузку контента, как только у них будет открыто соединение с вашим сервером.

Что такое согласование SSL?

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

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

Вы также заметите, что браузер (в данном случае Chrome) установил несколько открытых подключений одновременно, распараллеливая объем контента, который он может получить.Количество одновременных постоянных подключений, которые может установить каждый браузер, варьируется. Современные браузеры допускают до шести одновременных открытых подключений (Chrome, Firefox, Opera 12) или до восьми (Internet Explorer 10).

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

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

Вес страницы

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

После того, как вы запустите YSlow на своей странице, переключитесь на вкладку «Компоненты» (рис. 2-4), чтобы увидеть список типов контента для этой страницы и их размер.

В этом примере мы видим, что включение gzip уменьшает размер наших файлов HTML («doc» в этой таблице), JavaScript и CSS. Если вам интересно, как работает gzip, мы расскажем об этом в статье «Минификация и gzip.«Мы также можем видеть, что, хотя для загрузки страницы требуется всего шесть изображений, их общий размер составляет 722,6 КБ! Это очень большие изображения. Строка cssimage отделяет любые изображения, вызываемые и применяемые с помощью CSS, от изображений, встроенных непосредственно в HTML-код сайта.

Посмотрите на свой собственный вес страницы и сравните его с графиками «среднего байта на страницу» на https://httparchive.org/interesting.php. Вы много используете CSS или JavaScript? Какова разбивка типов контента на вашей странице: значительно ли ваши изображения перевешивают другие типы контента, как в предыдущем примере, или есть еще один выброс?

Что такое HTTP-архив?

HTTP-архив — это постоянное хранилище информации о веб-производительности, такой как размер страниц, неудавшиеся запросы и используемые технологии.Он собирает информацию WebPagetest для URL-адресов, включенных в список 250 000 сайтов Alexa Top.

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

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

Воспринимаемая производительность

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

Критический путь рендеринга

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

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

Когда браузер читает HTML-код, он наталкивается на таблицу стилей. Браузер приостановит все и запросит этот файл с вашего сервера. Когда он получит файл обратно, браузер повторит аналогичный процесс: необработанные байты станут символами, строки символов станут токенами, токены станут объектами, объекты будут связаны в древовидной структуре, и, наконец, у нас будет объектная модель CSS , или CSSOM.

Затем браузер пользователя объединит DOM и CSSOM для создания дерева рендеринга , которое он будет использовать для вычисления размера и положения каждого видимого элемента. Дерево рендеринга содержит только то, что необходимо для рендеринга страницы (поэтому все с отображением : нет не будет включено в дерево рендеринга). Наконец, браузер отобразит на экране окончательное дерево рендеринга.

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

С помощью WebPagetest мы можем взглянуть на представление страницы в виде киноленты (рис. 2-5) и увидеть, что видно с течением времени при загрузке.

Если посмотреть на Yahoo! домашняя страница в 0.С 5-секундными интервалами мы видим, что страница остается пустой примерно до 2 секунд времени загрузки. Чем раньше вы начнете отображать видимый контент на странице, тем быстрее страница будет восприниматься вашим пользователем.

Примечание

WebPagetest зависят от местоположения, браузера, скорости соединения и других факторов. Хотя легко посмотреть на загрузку Yahoo! Домашняя страница с интервалами 0,5 секунды, вы, вероятно, захотите просмотреть 0,1-секундные интервалы времени загрузки вашего собственного сайта, которые вы можете выбрать в режиме просмотра ленты WebPagetest.

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

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

2. Эта таблица стилей будет применяться только в том случае, если ширина браузера равна или больше 61,5 см. Он не будет блокировать рендеринг, если ширина браузера меньше 61,5 em, но он будет блокировать рендеринг, если браузер соответствует этому условию min-width .

Другой способ оптимизировать критический путь рендеринга — убедиться, что вы загружаете JavaScript наиболее эффективным способом.JavaScript блокирует построение DOM, если оно не объявлено как асинхронное; Узнайте больше о том, как заставить ваш JavaScript хорошо взаимодействовать с остальной загрузкой страницы, в разделе «Загрузка CSS и JavaScript».

Хотите получить больше информации о предполагаемом влиянии критического пути на производительность вашего сайта на производительность? WebPagetest также предоставит вам показатель под названием «Индекс скорости» для вашей страницы. Согласно документации WebPagetest, индекс скорости — это среднее время, в течение которого отображаются видимые части страницы. Он выражается в миллисекундах и зависит от размера выбранного окна просмотра.

Показатель Speed ​​Index — отличный показатель, за которым стоит следить, когда вы пытаетесь измерить воспринимаемую производительность вашей страницы, поскольку он показывает, насколько быстро контент, находящийся в верхней части страницы, заполняется вашими пользователями. Лучше сосредоточиться на том, как быстро ваши пользователи начнут видеть и смогут взаимодействовать с контентом, а не на том, сколько времени требуется браузеру, чтобы полностью завершить загрузку контента вашей страницы (включая любой асинхронный контент, который извлекается и выполняется после документа. визуально завершена).Вы можете узнать больше об измерении индекса скорости WebPagetest и о том, сколько времени требуется для полной загрузки страницы в главе 6.

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

• Асинхронная загрузка содержимого
• Расставляйте приоритеты для запросов на «заметное» содержание
• Следуйте рекомендациям по загрузке CSS и JavaScript (подробнее см. «Загрузка CSS и JavaScript»)
• Кэширование ресурсов для вернувшихся пользователей (подробнее в разделе «Кэширование ресурсов»)
• Убедитесь, что все основные действия на странице доступны пользователю как можно быстрее.

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

Янк

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

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

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

Если вы заметили, что на вашем сайте наблюдаются симптомы нежелательной почты, существуют некоторые инструменты браузера, которые помогут вам отладить основную причину. В Chrome DevTools есть представление временной шкалы (рис. 2-6), которое показывает частоту кадров при взаимодействии со страницей.

После того, как вы нажмете «запись» и начнете взаимодействовать со своей страницей, Chrome DevTools будет записывать количество кадров в секунду, а также то, что делал браузер, например, пересчет стилей, запуск событий или рисование.Как только вы найдете область, в которой частота кадров упала ниже порога 60 кадров в секунду, вы можете начать нацеливаться на эту область, чтобы уменьшить проблемы с перерисовкой. Начните с скрытия элементов в этой области страницы, чтобы увидеть, какие элементы могут вызывать задержку, а затем поиграйте со скрытыми цветами, тенями и анимацией, чтобы увидеть, что может быть основной причиной медлительности. Подробнее о том, как использовать Chrome DevTools, читайте в разделе «Chrome DevTools».

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

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

Другие факторы, влияющие на скорость загрузки страниц

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

География

Географическое положение пользователя может сильно повлиять на время, необходимое для загрузки вашего сайта.Если вы запустите несколько тестов в разных географических точках с помощью инструмента тестирования, такого как WebPagetest, вы заметите разное время загрузки. Это связано с тем, что браузеры запрашивают и получают данные через физические соединения, и существует ограничение на скорость, с которой контент может перемещаться на большие расстояния; Браузеру вашего пользователя потребуется больше времени, чтобы связаться с вашим сервером, если он находится дальше. Если пользователь находится в Австралии, а ваш контент находится на сервере в Соединенных Штатах, для этого пользователя потребуется гораздо больше времени для доступа к вашему контенту, чем для человека, живущего в Соединенных Штатах.

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

Сеть

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

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

Браузер

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

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

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

Двухсекундная загрузка страницы

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

В Google Analytics вы можете получить представление о производительности вашего веб-сайта и сервера в разделе «Поведение → Скорость сайта» меню «Отчеты». Отчет «Скорость загрузки сайта» всегда создается на основе выборочных данных, и по умолчанию размер выборки составляет 1% посетителей. Скорость сайта также можно отслеживать только для посетителей, которые используют браузер, поддерживающий время навигации HTML5 (например, Chrome, Firefox 7 и более поздних версий, Internet Explorer 9 и более поздних версий [более ранние версии IE, если установлена ​​панель инструментов Google], Edge, некоторые версии Safari, Android 4.0 и выше, дополнительные браузеры также поддерживают эту функцию, но используются реже.)

Самым важным показателем производительности системы на странице «Скорость сайта» для веб-сайта является среднее время загрузки страницы . Среднее время загрузки страницы получается путем объединения семи отдельных показателей (время перенаправления, время поиска домена, время соединения с сервером, время ответа сервера, время взаимодействия с документом, время загрузки содержимого документа и время загрузки страницы) в единую метрику.Следует отметить, что эталонное время загрузки страницы для типичного веб-сайта, основанного на данных, в 2016 и 2017 годах составляло 3 секунды. Из-за более быстрого компьютерного оборудования и подключения к Интернету, которые стали доступны с 2017 года, для посетителей было бы разумным ожидать, что время загрузки страницы составит 2 секунды или меньше по сегодняшним стандартам.

Ниже приводится объяснение среднего времени загрузки страницы:

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

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

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

• Среднее время перенаправления (Целевой диапазон для этого показателя должен составлять от 0 до 0,30 секунды.) — следует избегать перенаправления, но иногда они неизбежны, и если перенаправления задействованы, это будет указывать время, необходимое для начала и окончания перенаправления, если перенаправления не задействованы, этот показатель будет показывать ноль (0.
• Среднее время поиска домена Время (Целевой диапазон для этого показателя составляет от 0,01 до 0,03 секунды.) — Google определяет это как «среднее время (в секундах), затрачиваемое на поиск DNS для этой страницы». Он измеряет, как долго браузер пользователя ищет IP-адрес вашего веб-сайта.На данный момент на временной шкале никакие данные с вашего веб-сайта не начали загружаться, и общий фактор, который может повлиять на это измерение, — это контент, отображаемый из нескольких мест (например, сторонние скрипты). Это должно быть одним из самых коротких связанных измерений времени. с временной последовательностью загрузки страницы.
• Среднее время соединения с сервером (Целевой диапазон для этого показателя составляет от 0,01 до 0,25 секунды.) — Google определяет это как «среднее время (в секундах), затраченное на установление TCP-соединения для этой страницы.Этот таймер запускается сразу после завершения поиска домена и измеряет время, необходимое серверу для подключения к устройству посетителя. Этот показатель, как и среднее время поиска в домене, также должен быть одним из двух самых быстрых на временной шкале для загрузки страницы.

1. Среднее время ответа сервера (ART) (Целевой диапазон для этого показателя должен составлять 0,20 секунды (200 мс) или меньше.) — Google определяет это как «среднее время (в секундах), которое требуется вашему серверу для ответа на запрос пользователя, включая сетевое время от местоположения пользователя до вашего сервера.На этот показатель может влиять любое или все из следующих факторов: медленная логика приложения, медленные запросы к базе данных, медленная маршрутизация и проблемы с ресурсами, такие как нехватка ЦП, нехватка памяти, даже местоположение посетителя и сетевая архитектура.
2. Среднее время взаимодействия с документом (Целевой диапазон для этого показателя составляет менее 0,80 секунды.) — Это измерение начинается, когда фактическое содержимое страницы начинает загружаться в браузер посетителя. Во время интерактивного взаимодействия с документом страница все еще загружается, но загружено достаточно контента, чтобы посетитель мог начать взаимодействовать со страницей.Пользователь может увидеть текст, щелкнуть гиперссылку и увидеть одно или два изображения. Этот показатель измеряет количество времени в секундах, которое требуется, чтобы добраться до этой точки на временной шкале от начала временной шкалы (пункты 1–4 выше). Хотя контент загружен не полностью, именно в этот момент большинство посетителей будут воспринимать страница загружается быстро или медленно.
3. Среднее время загрузки содержимого документа (Целевой диапазон для этого показателя должен быть менее 1,0 секунды.) — Google определяет этот показатель как «среднее время (в секундах), которое требуется браузеру для синтаксического анализа документа и выполнения отложенного и синтаксического анализа. вставленные сценарии (загружено содержимое объектной модели документа (DOM)), включая сетевое время от местоположения пользователя до вашего сервера.Этот показатель учитывает всю временную шкалу до этого момента (пункты 1–5) и, как таковой, всегда должен быть выше, чем Среднее время взаимодействия с документом.
4. Среднее время загрузки страницы (Целевой диапазон для этого показателя составляет 1,0 секунды или меньше.) — Google определяет это измерение как «среднее время (в секундах) для загрузки этой страницы». На этом этапе загрузка веб-страницы завершена, но другие аспекты, такие как CSS, изображения и любые другие упомянутые элементы, не загружены полностью, это измерение прекращает подсчет после загрузки всего содержимого.Этот показатель не включает никаких других показателей до этого момента, только время, необходимое для полной загрузки всего содержимого веб-страницы.

Измеряя и отслеживая все семь показателей производительности сайта Google Analytics, можно проанализировать более полную картину производительности системы, что позволит владельцу веб-сайта или аналитику выявить любые узкие места в производительности. Узкие места в производительности можно разделить на две большие категории: меры загрузки перед страницей и меры загрузки страницы.Узкие места загрузки страницы могут быть определены путем анализа приведенных выше измерений 1–4 и могут выходить за рамки контроля владельца веб-сайта; Узкие места при загрузке страницы можно определить путем анализа приведенных выше измерений 5–7, и владелец веб-сайта во всех случаях может контролировать факторы, составляющие эти измерения.

Измерения семи показателей производительности сайта объединяются для получения среднего времени загрузки страницы. Целевой диапазон для процесса предложения веб-страницы составляет две секунды или меньше от начала навигации (элемент 1) до полностью загруженной страницы (элемент 7.)

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

Рисунок 1. График среднего времени загрузки страницы Google Analytics

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

Рисунок 2: Различия во времени загрузки страницы в зависимости от браузера, страны и страницы

Источники:

Определения:

DOM или объектная модель документа — это кроссплатформенный и не зависящий от языка интерфейс прикладного программирования, который обрабатывает документ HTML, XHTML или XML как древовидную структуру, в которой каждый узел является объектом, представляющим часть документа.Объектами можно управлять программно, и любые видимые изменения, происходящие в результате, могут быть отражены в отображении документа.

Что важно при анализе скорости вашего сайта?

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

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

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

Все хорошо и хорошо, чтобы исправить эти проблемы, я не говорю, что вы не должны, но я говорю, что вы не должны доверять этим инструментам, чтобы дать вам точное представление о том, что пользователь воспринимает как медленный сайт. . Причина? Поскольку эти инструменты смотрят на общее время, необходимое для загрузки вашего веб-сайта, что не является самым важным фактором, во время загрузки Document Object Model (DOM) .

Почему время DOM важнее?

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

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

Как определить и улучшить тайминги DOM

Вы должны стремиться к тому, чтобы время интерактивного взаимодействия с документом составляло около 3,0–3,5 секунды, но первое, что вам нужно выяснить, это то, что время взаимодействия объектной модели документа является проблемой для вашего сайта.

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

Google Analytics

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

1. Поведение
2. Скорость сайта
3. Время страницы
4. На вкладке Explorer выберите DOM Timings
5. Измените раскрывающееся меню «По сравнению со средним значением по сайту» на «Средн. Время взаимодействия с документом (сек) »
6. Упорядочить по просмотрам страниц
7. Щелкните отдельные ссылки, чтобы узнать их время.

Плагин Chrome: время загрузки страницы:

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

Тест веб-страницы:

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

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

Таким образом, улучшение таймингов DOM — это самый важный аспект, на который нужно обращать внимание при анализе скорости страницы вашего веб-сайта, и это главный момент, о котором вы должны беспокоиться.Улучшение этого времени поможет вам сохранить ваши посещения и улучшить общий коэффициент конверсии. По сути, DOM = $$$$!

веб-производительности | MDN

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

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

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

Производительность анимации и частота кадров

Анимация в Интернете может выполняться через окно SVGAnimationElement , .requestAnimationFrame , включая холст и WebGL_API , CSS анимацию , видео , анимированные гифки и даже анимированные PNG и другие типы изображений. Затраты на производительность анимации свойства CSS могут варьироваться от одного свойства к другому, а анимация дорогих свойств CSS может привести к задержке, поскольку браузер изо всех сил пытается достичь плавной частоты кадров.

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

Критический путь отрисовки — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране.Оптимизация критического пути рендеринга улучшает производительность рендеринга. Критический путь рендеринга включает объектную модель документа (DOM), объектную модель CSS (CSSOM), дерево рендеринга и макет.

Производительность анимации CSS и JavaScript

Анимация имеет решающее значение для приятного взаимодействия с пользователем во многих приложениях. Существует множество способов реализации веб-анимации, например, CSS , переход /, анимация или анимация на основе JavaScript (с использованием Window.requestAnimationFrame ).В этой статье мы анализируем разницу в производительности между анимацией на основе CSS и на основе JavaScript.

Ленивая загрузка

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

Время навигации и ресурсов

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

Оптимизация производительности при запуске

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

Бюджеты производительности

Бюджеты производительности — это предел для предотвращения регрессов. Он может применяться к файлу, типу файла, всем файлам, загруженным на страницу, определенной метрике (например, времени до взаимодействия), пользовательской метрике (например.грамм. Time to Hero Element) или порог за период времени.

Основы производительности

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

Мониторинг производительности: RUM против синтетического мониторинга

Синтетический мониторинг и Мониторинг реального пользователя (RUM) — это два подхода к мониторингу и анализу производительности сети.

Заполнение страницы: как работают браузеры

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

Рекомендуемое время веб-производительности: сколько времени — это слишком долго?

Нет четких установленных правил относительно того, что представляет собой медленный темп при загрузке страниц, но есть конкретные рекомендации для указания того, что контент будет загружаться (1 секунда), простоя (50 мс), анимация (16,7 с) и реакция на ввод пользователя ( От 50 до 200 мс).

Задержка

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

Использование dns-prefetch

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

Учебники для начинающих

Область обучения MDN Web Performance содержит современные учебные пособия по основам производительности. Начните здесь, если вы новичок в производительности:

Веб-производительность: краткий обзор

Обзор пути обучения веб-производительности. Начните свое путешествие здесь.

Что такое веб-производительность?

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

Как пользователи воспринимают производительность?

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

Основы веб-производительности

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

Характеристики производительности HTML

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

Мультимедиа: изображения и видео

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

Характеристики производительности CSS

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

Рекомендации по производительности JavaScript

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

Мобильная производительность

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

Рекомендации по производительности JavaScript

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

Мобильная производительность

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

Производительность веб-шрифтов

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

Узкие места в производительности

Пропускная способность

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

Роль TLS в производительности

TLS — или HTTPS, как мы его обычно называем — имеет решающее значение для создания безопасного и безопасного взаимодействия с пользователем.Хотя оборудование уменьшило негативное влияние TLS на производительность серверов, оно по-прежнему представляет собой значительную часть времени, которое мы тратим на ожидание подключения браузеров к серверам. В этой статье объясняется процесс установления связи TLS и предлагаются некоторые советы по сокращению этого времени, такие как сшивание OCSP, заголовки предварительной загрузки HSTS и потенциальная роль подсказок ресурсов в маскировке задержки TLS для третьих сторон.

Диаграммы показателей чтения

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

Альтернативные форматы мультимедиа

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

Анализ пакетов JavaScript

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

Ленивая загрузка

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

Ленивая загрузка JavaScript с динамическим импортом

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

Управление доставкой ресурсов с помощью подсказок ресурсов

Браузеры часто лучше нас знают, когда дело доходит до приоритезации ресурсов и их доставки, однако они далеки от очевидности. Встроенные функции браузера позволяют нам подсказывать браузеру, когда ему следует подключиться к другому серверу, или предварительно загружать ресурс до того, как браузер узнает, что он когда-либо понадобится.При разумном использовании это может сделать быстрый опыт еще быстрее. В этой статье мы расскажем о встроенных функциях браузера, таких как rel = preconnect, rel = dns-prefetch, rel = prefetch и rel = preload, а также о том, как их использовать в ваших интересах.

Бюджеты производительности

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

Контрольный список для проверки веб-производительности

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

Контрольный список мобильной производительности

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

HTML

CSS

• будет меняться
• GPU против CPU
• Измерительная схема
• Рекомендации по загрузке шрифтов

JavaScript

API

Заголовки

Инструменты

Дополнительные показатели

• Индекс скорости и индекс скорости восприятия

Лучшие Лрактики

показателей скорости страницы — FullStory Support

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

Какие показатели скорости страницы фиксирует FullStory?

В потоке событий для любого воспроизведения сеанса FullStory покажет три ключевых показателя для каждой посещенной страницы:

Первая насыщенная краска (FCP)

Событие First Contentful Paint относится к моменту, когда первый элемент из DOM появляется в браузере пользователя.

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

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

Примечание. FCP исключает содержимое с iframe.

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

Подробнее об этой метрике читайте в документации для разработчиков Lighthouse.

DOMContentLoaded (DCL)

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

Более конкретно, DOMContentLoaded срабатывает, когда исходный HTML-документ загружен и проанализирован. Часто этот этап происходит до завершения загрузки таблиц стилей, изображений и подфреймов, поэтому событие DOMContentLoaded происходит за до , когда страница будет отрисована.

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

Подробнее об этой метрике читайте в документации для разработчиков Mozilla.

Загрузка страницы

Событие onload или «Загрузка страницы» срабатывает, когда вся страница и все зависимые от нее ресурсы завершили загрузку.

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

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

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

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

Просмотр сети и файла HAR

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

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

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

Файл HAR — это стандартный формат для просмотра ресурсов, которые способствуют загрузке страницы в представлении «водопадная диаграмма». Файл HAR загружается в формате .json / .har и включает подробное время запроса, информацию о DNS, размеры активов и сведения о подключении к серверу.Помимо FullStory, вы можете визуализировать файлы .har с помощью инструментов разработчика Chrome (просто перетащите файл на пустую вкладку «Сеть» в своем браузере!) Или инструмента HAR Analyzer от Google.

Как мне искать сеансы с медленными страницами?

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

Есть два способа поиска сеансов с медленными страницами.Вы можете либо:

Поиск медленных страниц с помощью OmniSearch

Чтобы начать новый поиск, щелкните панель OmniSearch и найдите критерий «Загрузка страницы» в разделе «Производительность».

Щелкните «Загрузка страницы», чтобы начать новый поиск с критериями загрузки страницы.

Затем используйте раскрывающееся меню, чтобы выбрать метрику для поиска: First Contentful Paint, DOMContentLoaded или Page Load.

Затем обновите критерии для поиска сеансов, когда страница была не менее определенного количества секунд.

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

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

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

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

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

FullStory Page Speed ​​Metrics и профилировщик производительности Chrome

Если вы использовали профилировщик производительности Google Chrome, вы могли заметить, что данные в профилировщике производительности не соответствуют числам, которые вы видите в FullStory. Это связано с тем, что, когда вы выбираете «начать профилирование и перезагрузить страницу» в профилировщике производительности Chrome, показатели скорости страницы в Chrome берутся с момента нажатия кнопки, включая e.грамм. выгрузить обработчики с предыдущей страницы. Напротив, показатели скорости страницы FullStory, которые основаны на API производительности браузера (например), относятся к «navigationStart».

Для иллюстрации, если вы запускаете профилировщик производительности Chrome на странице и первая отрисовка содержимого (FCP) отображается как 851,8 мс при начальном значении навигации 299,31, вы заметите, что значение FCP в FullStory будет 552,49. Значение 552,49, полученное из API производительности браузера, как раз и является разницей между тем, что профилировщик производительности Chrome сообщил для FCP и начала навигации.