О Критический путь рендеринга (CRP) и его оптимизация, шаблон PRPL и бюджет производительности.
Введение
Производительность веб -сайта – это все, что нужно быстро сделать веб -сайты, в том числе медленные процессы кажутся быстрыми. Хорошая или плохая производительность веб -сайта сильно коррелирует с пользовательским опытом, а также к общей эффективности большинства сайтов. Веб -сайты и приложения должны быть быстрыми и эффективными для всех пользователей, независимо от того, в каких условиях находятся пользователи. Чтобы это произошло, мы используем оптимизацию производительности. Веб -документы MDN разбивают оптимизацию производительности на четыре основных областях.
Сокращение общего времени нагрузки
- Сжатие и министерство всех файлов.
- Сокращение количества файлов и других HTTP -запросов, отправляемых между сервером и пользовательским агентом.
- Использование расширенных методов загрузки и кэширования и условно обслуживающая пользователя только то, что им нужно, когда им это действительно нужно.
Сделать сайт пригодным как можно скорее
- Это делается путем загрузки критических компонентов сначала, чтобы предоставить пользователю начальное содержание и функциональность, а затем откладывая менее важные функции для последующего использования Lazy Doalling для запроса и отображения контента только тогда, когда пользователь попадает или взаимодействует с ним. И с помощью функций предварительной загрузки пользователь, вероятно, будет взаимодействовать с следующим.
Гладкость и интерактивность
- Улучшение воспринимаемой производительности сайта через интерфейсы скелетов, визуальные погрузчики и четкое указание на то, что что -то происходит, и в ближайшее время все сработает.
Измерения производительности
- Инструменты и метрики для мониторинга производительности и проверки усилий на станции. Здесь нужно иметь в виду, что не каждая оптимизация производительности будет соответствовать вашему решению и потребностям.
- Инструменты браузера измерение производительности включают Lighthouse (Chrome), сетевой монитор, монитор производительности. Существуют также размещенные сторонние инструменты, такие как PageSpeed Insights (Google), тест на веб-страницу, GTMetrics (фактически маяк), которые помогают измерить производительность.
- Ключевые индикаторы того, что эти инструменты, используемые для описания производительности:
- Первая краска- Время, которое требуется до того, как пользователь увидит изменения, происходящие в браузере. Самая большая довольная краска (LCP)- время, которое необходимо до того, как пользователь увидит контент, так что текстовые изображения, что-то еще в браузере.
- Первая значимая краска (FMP)- время, которое необходимо до того, как пользователь увидит контент, который на самом деле имеет смысл. Таким образом, когда загружаются полное содержание и веб -шрифты, и пользователь может получить значение из того, что они видят.
- Время Интерактивному- Время, которое требуется до того, как контент закончил загрузку, и пользовательский интерфейс можно взаимодействовать, чтобы пользователь мог фактически нажимать на кнопки, заполнять формы или делать все, что должно произойти на сайте.
Чем дольше сайт понадобится для достижения каждого из этих пунктов, тем выше вероятность того, что пользователь либо раздражает, либо полностью отказался от пользовательского опыта. Так что хорошая производительность лучше для ваших посетителей, лучше для вас, потому что вам не нужно платить так много за хостинг, лучше для вашего рейтинга Google и, наконец, лучше для окружающей среды.
Критический путь рендеринга (CRP)
Чтобы понять оптимизацию производительности, вам сначала нужно хорошее представление о том, как что -то вводить в адресную строку браузера приводит к тому, что страница отображается в точке зрения.
Все начинается с того, что браузер отправил запрос на Site.com своему интернет -провайдеру.
Затем ISP немедленно отправляет запрос в службу доменных имен DNS, телефонную книгу для Интернета, которая отображает веб -сайт, который вы ищете на адрес веб -сайта.
Этот поиск DNS выполняется для каждого уникального имени хоста. Поэтому, если сайт, который вы запрашиваете, использует фонты извне размещенных, или библиотеки JavaScript, или изображения, или видео или другие сервисы, этот поиск DNS происходит для каждой из этих различных сервисов. Каждый раз, когда появляется новое доменное имя, новый поиск DNS должен вступить в силу. Это первое крупное узкое место.
Чтобы покончить с некоторыми из этих накладных расходов на производительность, доменное именем в Ассоциации IP -адреса, вероятно, будет кэшировано на разных шагах, ваш интернет -провайдер будет кэширован как информация, он также, вероятно, будет кэширован в вашем маршрутизаторе и на вашем компьютере. Таким образом, когда вы отправляете запрос в тот же домен, который вы просили ранее, вместо того, чтобы снова проходить весь поиск DNS, мы просто вытащим кэш из -куда -то ближе к компьютеру, но это также означает, что если DNS изменился В то же время вы получите неправильный указатель адреса, и все будет работать, как и ожидалось.
Как только IP -адрес установлен, браузер и сервер теперь выполняют так называемое рукопожатие TCP, где они обмениваются ключами идентификации и другой информации, чтобы установить временное соединение и рабочие отношения. Это также, где определяется тип соединения Это регулярное HTTP -соединение или это зашифрованное HTTPS -соединение? Если последнее, клавиши шифрования обмениваются, и если как браузер, так и сервер поддерживают его, транзакция обновляется от HTTP 1.1 до HTTP -двух, что обеспечивает существенные повышения производительности.
Теперь у нас есть связь, и все готово к работе. На этом этапе браузер отправляет запрос HTTP GET для ресурса, который он ищет. Этот первоначальный запрос GET будет представлен для того, какой файл по умолчанию в местоположении сервера, как правило, index.html или index.php или index.js или что -то похожее на это.
Время, необходимое для браузера, чтобы наконец получить первый байт фактической страницы, которую он ищет, измеряется во времени до первого байта или TTFB. Первый кусок данных, называемый пакетом, который получает браузер, всегда 14 килобайт, а затем размер пакета удваивается с каждой новой передачей. Это означает, что если вы хотите, чтобы что -то произошло сразу, вам нужно втиснуть его в эти первые 14 килобитов.
Браузер теперь получает файл HTML -документ, и он начинает читать его сверху вниз, а затем анализировать эти данные. Это означает, что HTML превращается в дерево DOM, CSS превращается в дерево CSSOM и объект для CSS страницы, что позволяет браузеру представить CSS для JavaScript взаимодействовать с ним. И по мере того, как документ анализируется, браузер также загружается в любые внешние активы, как они встречаются. Это означает, что в любое время он встречается с новым файлом CSS или ссылкой на что -либо еще, он отправит новый запрос, сервер отвечает, отправляя запрос обратно, затем он помещается в систему, и браузер также начинает его ждать.
Однако в случае JavaScript браузер останавливает все остальное и ждет, пока файл будет полностью загружен. Почему? Потому что есть хорошие шансы на JavaScript, который хочет внести изменения в DOM или CSSOM или оба. Это то, что известно как блокировка рендеринга, какое -либо рендеринг происходил, останавливается и буквально блокируется до тех пор, пока браузер ждет, когда JavaScript будет полностью загружен, а затем полностью выполнен. После того, как весь этот анализ будет сделан, рендеринг может начаться всерьез, и здесь браузер сочетает в себе DOM и CSSOM с стилем, макетом, краской и сочинением документа в просмотре.
Метрическое время для первой довольной краски относится к тому, сколько времени требуется, чтобы все это произошло. Для наших целей важно помнить, что на самом деле происходит, таким образом, мы можем определить узкие места и добавить улучшения производительности, чтобы пройти их как можно быстрее.
Оптимизация СРБ
Когда вы взаимодействуете с контентом в Интернете сегодня, вы используете одну из двух разных версий протокола HTTP, либо старый HTTP/1.1, либо более современный HTTP/2. Какая версия протокола используется, оказывает значительное влияние на производительность сайта. В HTTP/1.1 все файлы, запрашиваемые браузером, загружаются синхронно, один за другим. Таким образом, типичная HTML -страница с двумя листами в стиле, пара изображений и некоторых JavaScript потребует от браузера сначала загрузить документ HTML, затем файлы CSS, затем файлы JavaScript и, наконец, файлы изображения один за другим. Это медленный, неэффективный и рецепт ужасной производительности.
Чтобы обойти эту очевидную проблему, браузеры обманывают, открывая до шести параллельных соединений с сервером для снесения данных. Тем не менее, это создает так называемую главу блокировки линии, где первый файл, файл HTML, удерживает остальные файлы с загрузки. Он также создает огромную нагрузку на подключение к Интернету и инфраструктуру, как браузер, так и сервер, потому что вы сейчас работаете с шестью подключениями вместо одного подключения.
В http/2 у нас есть то, что известно как мультиплексирование. Браузер может загружать много отдельных файлов одновременно по одному подключению, и каждая загрузка не зависит от других. Это означает, что при HTTP/2 браузер может начать загружать новый актив, как только он столкнется, и весь процесс происходит значительно быстрее.
Теперь, чтобы HTTP работал, необходимо выполнить несколько ключевых условий. Номер один, сервер должен поддерживать HTTP/2. Номер два, браузер также должен поддерживать HTTP/2. И номер три, соединение должно быть зашифровано по HTTPS. Если какое -либо из этих условий не выполнено, соединение автоматически возвращается к HTTP/1.1. Таким образом, итоги, для мгновенного улучшения производительности с минимальной работой, получите сертификат SSL для вашего домена и убедитесь, что ваш сервер поддерживает HTTP/2.
Определение того, какие узкие места вызывают проблемы с производительностью, является ключом к оптимизации производительности. Сам сервер может способствовать плохой производительности.
Следующее узкое место – это соединение, созданное между браузером и серверами, размещающими файлы, необходимые для визуализации страницы. Для каждой из этих соединений должен произойти весь этот цикл рукопожатия DNS и TCP, который замедляет весь процесс.
Сколько файлов загружается и в каком порядке эти файлы загружаются, влияют на производительность.
Кэширование (или хранение активов) также является одним из методов оптимизации производительности. Это можно сделать на сервере, на CDN или в браузере.
- Кэширование на сервере
Если вы запускаете сайт, полагаясь на рендеринг на стороне сервера, то есть каждая страница или представление генерируются на лету на сервере при его запросе, кэширование может обеспечить огромный повышение производительности. Включив кэширование, сервер больше не должен отображать страницу каждый раз, когда страница запрашивается. Вместо этого, когда страница отображается, создается снимок этой страницы, а затем хранится в кэше сервера. В следующий раз, когда посетитель затем придет на сайт, на этом сохраненном кэшированном снимке будет вручено к новой странице. Вот почему статические генераторы сайтов стали настолько популярными: они производят предварительно предопределенные статические страницы и обходят всю проблему с помощью сервиса CMS. Задача с этим типом кэширования заключается в динамических особенностях, которые у них есть. Как и каждый раз, когда добавляется новый комментарий, кеш должен быть очищен, а затем страница должна быть восстановлена. Несмотря на это, кэширование должно быть включено для всех сайтов, полагающихся на рендеринг на стороне сервера, поскольку преимущества производительности настолько значительны.
- Кэширование на CDN
CDN эффективно являются услугами внешнего кэширования для сайтов. CDN также могут делать краевые вычисления. Здесь CDN отображает страницу по запросу, а затем кэширует ее. Этот Edge подход хорошо работает с современными статическими генераторами сайтов, такими как Gatsby и All JavaScript, генераторы сайтов и рамки, потому что они по умолчанию обслуживают статические активы и созданы для работы в этой современной веб -архитектуре.
- Кэширование в браузере
Есть две основные вещи, которые мы можем сделать здесь. Один, храните существующие активы. Поэтому, если посетитель возвращается на сайт, у него уже есть вся информация, кэшированная в браузере, и два, выдвигайте файлы в браузер рано, поэтому к тому времени, когда браузер запрашивает файл, файлы, которые уже находятся в кэше. Все браузеры автоматически проводят некоторый уровень кэширования, а затем мы можем инструктировать браузер о том, как мы хотим справиться с кэшированием наших активов. Для активов, которые вряд ли изменятся, такие как листы основного стиля, JavaScript и другие изображения, длинные кэши имеют смысл. Для активов, которые могут измениться со временем, короткие продолжительность кеша или отсутствие наличных вообще могут иметь больше смысла.
Чтобы гарантировать, что новые и обновленные активы всегда добираются до посетителя. Мы можем использовать стратегии разрыва кэша, такие как добавление автоматического хэша к именам файлов, или мы можем полагаться на сам сервер, чтобы документировать имя файла на дату файла для каждого файла, а затем автоматически выполнять кэширование. Вы также можете разделить файлы CSS и JavaScript на более мелкие модули, и когда вы обновляете что -то в CSS или JavaScript, вместо того, чтобы переоценить целый лист стилей для всего сайта, вы просто перерываете модуль, который имеет это обновление.
PRPL и бюджет эффективности
Для достижения наилучшей производительности для вашего сайта или приложения всегда сохраняют Prpl схема в уме. Это аббревиатура, которая означает: Толкать или предварительную нагрузку Важные ресурсы для браузера, используя Server Push для начальных работников загрузки и обслуживания в следующем раунде, приложение будет работать быстрее. Рендер Первоначальный маршрут как можно скорее, обслуживая браузер с критическими CSS и JavaScript, воспринимаемая производительность приложения будет улучшена. Pre-Cache Остальные активы, чтобы они были доступны, когда браузер нуждается в них. Ленивая нагрузка Все некритические активы, поэтому они загружаются только тогда, когда они действительно необходимы, так что мы сокращаем время до начальной нагрузки и избавили посетителя от траты своей пропускной способности на активы, которые они никогда не будут использовать.
Метрика номер один, который определяет производительность вашего сайта или приложения, является его вес. Бюджет производительности дает вам метрику для измерения каждой новой функции и инструмента для использования, когда необходимо принимать жесткие решения. Бюджет производительности может включать ограничения на общий вес страницы, общий вес изображения, количество HTTP -запросов, максимальное количество шрифтов или изображений или внешних активов и т. Д. Теперь у нас есть инструменты, которые мы можем интегрировать в наши процессы сборки, такие как варианты производительности WebPack, которые вы можете получить непосредственно внутри WebPack и Lighthouse Light Swallet, который дает вам возможность проверить свои сборки с бюджетом производительности в любое время, чтобы получить флаги в любое время. Изображения слишком большие или ваш JavaScript слишком большой, или ваш CSS слишком большой или что -то еще.
Некоторые показатели лучших практиков для бюджета эффективности:
- Убедитесь, что ваш сайт соответствует индексу скорости в течение трех секунд.
- Время интерактивного составляет менее пяти секунд.
- Самая большая довольная краска составляет меньше секунды
- Максимальный потенциал первого входного задержки составляет менее 130 микросекунд.
- Максимальный размер пакета JavaScript GZASCRIPT составляет менее 170 КБ.
- Общий размер пакета составляет менее 250 КБ, и что все это происходит на телефонах с низким содержанием функции на 3G.
Теперь эти показатели бюджета эффективности являются серьезными и действительно трудно поразить. Это также метрики, используемые такими инструментами, как Lighthouse для проверки на производительность.
Итак, вопрос, вот как создать реалистичный бюджет эффективности?
- Создайте отдельные бюджеты производительности в медленных сетях и устройствах для ноутбуков/настольных компьютеров в быстрых сетях.
- Сделать аудит производительности.
- Установите резонансные цели на основе аудита.
- Тестовая производственная версия против бюджета Perfomance.
- Сделайте аудит производительности конкурента: сделайте свою цель лучше, чем ваш конкурент.
- Проверьте всю работу против бюджета эффективности, хотя бюджет производительности уникален для каждого проекта и изменится сверхурочно.
Часть II
Оригинал: “https://dev.to/bipul/web-performance-optimization-i-5d39”