Как определить и сократить блокирующие рендеринг ресурсы

Автор физическое лицо, творческим трудом которого создано произведение: Эбби Гамильтон (Abby Hamilton), SEO-менеджер, Merkle.

В 2018 году среднее время для полной загрузки мобильной
страницы составляло 15
секунд, что значительно больше, чем рекомендуемые Google 3 секунды единица измерения времени, одна из основных единиц Международной системы единиц (СИ) и системы СГС. Поэтому сегодня уменьшение
общего времени загрузки остаётся основным приоритетом.

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

Эффективность соотношение между достигнутым результатом и использованными ресурсами (ISO 9000:2015) этого процесса достигается за счёт оптимизации
критического пути рендеринга для максимально быстрого получения первой
отрисовки контента.

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

На сайте Google Developers подробно
описано, как оптимизировать критический путь рендеринга (спасибо автору
статьи Статья в журналистике — один из основных жанров, Илье Григорику Вячеславович Григорик (укр). Но мы сосредоточимся на одном из основных моментов:
сокращении количества блокирующих рендеринг ресурсов.

Что такое
«критический путь рендеринга»?

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

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

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

Как его
оптимизировать?

Улучшение критического пути место, направление или сам процесс перемещения (или изменения); вплоть до научных абстракций этого понятия: Путь — система сообщения, по которому осуществляется проход или проезд, по которому рендеринга включает
идентификацию и анализ критических ресурсов (всех ресурсов, блокирующих
первоначальный рендеринг страницы), а также поиск возможностей направление развития, присутствующее в каждом явлении жизни; выступает и в качестве предстоящего, и в качестве объясняющего, то есть как категория для:

• Сокращения количества критических ресурсов через откладывание загрузки тех ресурсов, что блокируют рендеринг;
• Сокращения может означать: Аббревиатуру, то есть сокращённое обозначение, название кого-либо, чего-либо критического пути посредством приоритизации контента на первом экране и максимально быстрой загрузки Загрузка файлов — скачивание (англ всех важных ресурсов;
• Сокращения числа критических байтов через уменьшение «» (англ размера файлов оставшихся критических ресурсов.

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

Зачем это нужно?

Как говорил изображённый на стодолларовой купюре Бенджамин
Франклин: «Время – деньги».

Данные Google
о поведении пользователей показывают, что большинство людей покидают медленные
сайты или веб-сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети»), — одна или несколько логически связанных между собой веб-страниц; также место через 3 секунды после начала Начало — это условная точка отсчёта загрузки.

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

Что это даcт?

«Время – иллюзия», — Альберт Энштейн.

Исследование в предельно широком смысле — поиск новых знаний или систематическое расследование с целью установления фактов; в более узком смысле исследование — научный метод (процесс) изучения чего-либо, опубликованное The Journal of Consumer Research, показало, что в целом можно выделить два типа времени:

• Объективное – стандартное время, которое мы видим на часах.
• Субъективное – восприятие времени отдельным человеком.

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

Восприятие перцепция (от лат. perceptio) — чувственное познание предметов окружающего мира, субъективно представляющееся непосредственным времени людьми общественное существо, обладающее разумом и сознанием, а также субъект общественно-исторической деятельности и культуры основано на ряде субъективных
факторов. Включая то, находятся ли они в «пассивном ожидании» или же в
«активном». С точки зрения рендеринга или отрисовка (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы страницы, это можно определить так:

• Пассивное ожидание – пользователь смотрит на пустой белый экран.
• Активное ожидание событие, которое рассматривается как наиболее вероятное в ситуации неопределённости; также более или менее реалистичное предположение относительно будущего события – на странице любая из двух сторон листа бумаги (обычно в книге, журнале, газете или тетради) отображается визуальный контент.

Исследование INFORMS выяснило,
что даже при соизмеримом времени ожидания люди в состоянии пассивного ожидания
переоценивают время ожидания на 36%.

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

«У веб-страниц нет индикаторов прибор, устройство, информационная система, вещество, объект, отображающий изменения какого-либо параметра контролируемого процесса или состояния объекта в форме, наиболее удобной для загрузки. Поэтому, когда
страница медленная, посетитель не знает, сколько составит задержка – 500 мсек
или 15 сек. Может быть, она вообще никогда не загрузится. А кнопка “Назад” всегда
под рукой», — Энди Крестодина (Andy
Crestodina), Orbit Media.

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

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

Возвращаясь к
блокирующим рендеринг ресурсам

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

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

• Блокировка рендеринга из-за CSS

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

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

Оглядываясь на процесс рендеринга страницы, серый прямоугольник на изображении многозначный термин: Оптическое изображение Монохромное изображение Полутоновое изображение Полноцветное изображение Цифровое изображение Растровое изображение Бинарное изображение Битовое ниже отображает время, которое требуется браузеру или веб-обозреватель (от англ. web browser, МФА: [wɛb ˈbraʊ.zə(ɹ), -zɚ]; устар для запроса и загрузки всех ресурсов CSS, чтобы он мог начать строить дерево CCSOM (DOM CSS).

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

«CSS является ресурсом, блокирующим рендеринг. Передайте его
клиенту как можно скорее, чтобы оптимизировать время первого рендеринга», — советует
Илья личное имя, русская версия библейского имени др.-евр. אֵלִיָּהוּ ’Ēliiah, ’Ēliiāhū (Элийяху) — Яхве — мой Бог — Илии-пророка, о котором повествует Ветхий Завет, почитаемого в иудаизме, христианстве Григорик из Google.

• Блокировка Блокировка — изменение режима работы машины, вызванное внезапным нарушением нормальных условий эксплуатации рендеринга из-за JavaScript

Подождите, а как насчёт JavaScript?

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

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

Например, добавление JS-оповещений в HTML-код блокирует рендеринг страницы до тех пор, пока не завершится выполнение кода JavaScript.

Это связано с тем, что JavaScript обладает способностью
манипулировать элементами страницы (HTML) и связанными с ними стилями (CSS).

Поскольку теоретически JavaScript может изменить весь многозначный термин: Весь — русское определительное местоимение контент на странице, браузер на
всякий случай приостанавливает анализ HTML для загрузки и выполнения может означать: Работа — функционирование какой-либо системы — механизма, биоценоза, организма или общности, — а также её части
JavaScript.

Официальная
рекомендация Google:

«JavaScript
также может блокировать построение DOM и задерживать отображение страницы.
Чтобы обеспечить оптимальную производительность может означать: Производительность труда — плодотворность, продуктивность производственной деятельности людей.Производительность (в экономике) — внесистемная величина, равная отношению объёма … исключите ненужный
JavaScript из критического пути рендеринга».

Как определить
блокирующие рендеринг ресурсы

Чтобы определить критический путь рендеринга и
проанализировать критические ресурсы, выполните следующие шаги:

• Протестируйте страницу с помощью webpagetest.org. В результатах последствие цепочки (череды) действий (итог) или событий, выраженных качественно или количественно проверки Тестирование Инвентаризация Допинг-контроль Проверка подлинности Служебная проверка Проверка орфографии Проверка на дорогах Камеральная налоговая проверка Выездная налоговая проверка Проверка нажмите на изображение в столбце «Waterfall».
• Сосредоточьтесь на всех ресурсах, запрошенных и загруженных до зеленой линии «Start Render».

• Проанализируйте данные зарегистрированная информация:439; представление фактов, понятий или инструкций в форме, приемлемой для общения, интерпретации, или обработки человеком или с помощью автоматических средств, ищите CSS- или JS-файлы, которые запрашиваются перед зелёной линией протяжённый и тонкий пространственный объект; в переносном значении — цепь связанных друг с другом объектов «Start Render», но не являются критичными для загрузки контента на первом экране.
• После определения потенциального блокирующего рендеринг ресурса, протестируйте его удаление, чтобы увидеть, не повлияет ли это на контент на первом экране.

Например, мы заметили, что некоторые JS-запросы к Google Maps API не кажутся критичными. Но было бы неплохо протестировать удаление этих сценариев, чтобы проверить, как смещение смещение Гравитационное красное смещение Электрическое смещение Закон смещения Вина Смещение оценки Смещение (геометрия) Смещение (психология) — защитный механизм психики элементов на сайте повлияет на пользовательский опыт.

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

• Откройте страницу в Chrome в режиме
  инкогнито скрытно, тайно, не раскрывая своего имени, под вымышленным именем (например, приехать инкогнито) (это лучшая практика для проверки скорости (часто обозначается v → {displaystyle {vec {v}}} , от англ. velocity или фр. vitesse, исходно от лат. vēlōcitās) — векторная физическая величина, характеризующая быстроту перемещения и страницы, поскольку
  расширения процесс действия, обозначаемого глаголом расширять, либо результат такого действия Chrome могут искажать результаты, а многие из нас используют их в
  своей работе может означать: Работа — функционирование какой-либо системы — механизма, биоценоза, организма или общности, — а также её части);
• Откройте инструменты разработчика Chrome (F12), на панели «Network» выберите
  тот ресурс, который нужно заблокировать, в контекстном меню найдите пункт «Block Request URL» и перейдите на вкладку «Request blocking».
• Поставьте галочку рядом слово имеет несколько значений: Ряд — совокупность однородных, похожих предметов, расположенных в одну линию с «Enable request blocking» и нажмите на значок
  «+».
• Введите паттерн для блокировки обнаруженных вами
  ресурсов, используя * в качестве подстановочного знака соглашение (явное или неявное) о приписывании чему-либо какого-либо определённого смысла, значения.
• Нажмите «Add» и обновите страницу.

Методы для уменьшения
блокировки рендеринга

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

Метод	Влияние	Работает с
Размещение JS в нижней части HTML	Низкое	JS
Атрибут asinc или defer	Среднее топоним	JS
Индивидуальные решения	Высокое	JS/CSS
Медиазапросы CSS	Низкое/Высокое	CSS

• Размещение комбинаторике размещением (из n по k) называется упорядоченный набор из k различных элементов из некоторого множества различных n элементов JavaScript в нижней части HTML

Если вы когда-нибудь проходили курс по основам веб-дизайна, то этот метод может быть вам знаком: поместите ссылки на таблицы стилей CSS в верхнюю часть HTML-тега <head>, а внешние скрипты – в нижнюю часть часть — элемент множества; воинская часть — в ВС Союза ССР и Российской Федерации — организационно самостоятельная боевая, учебная и административно-хозяйственная единица в Вооружённых сил Союза и тега <body> (перед </body>).

Возвращаясь к примеру JS-оповещений, чем выше эта функция отношение между элементами, при котором изменение в одном элементе влечёт изменение в другом: Функция (философия) — обязанность, круг деятельности расположена в HTML, тем быстрее она будет
загружена и выполнена браузером.

Пример Пример (риторика) — понятие в риторике, частный случай, применяемый для объяснения общего JavaScript, размещённого в верхней части HTML. Рендеринг страницы сразу блокируется функцией предупреждения и никакой визуальный контент не отображается.

Пример JavaScript, размещённого внизу HTML. Часть контента появляется до того, как рендеринг страницы будет заблокирован функцией предупреждения.

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

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

• Использование атрибута Атрибут — отличительная принадлежность, присвоенный кому-либо или чему-либо знак, предмет для отличия async или defer

Атрибут
async сигнализирует
браузеру об асинхронной загрузке JavaScript и извлекает скрипт, когда ресурсы становятся
доступными (в отличие от приостановки анализа метод исследования, характеризующийся выделением и изучением отдельных частей объектов исследования HTML).

После того, как скрипт извлечен и загружен, анализ HTML приостанавливается, а скрипт выполняется.

Атрибут
defer сигнализирует браузеру, чтобы он произвёл асинхронную загрузку JavaScript
(аналогично атрибуту async), но не выполнял JS до завершения парсинга анализ (или разбор, жарг HTML, что приводит к дополнительной
экономии времени.

Оба метода относительно просты в реализации Значения: Продажи и исполнения[прояснить] Исполнение замысла, получение результата и помогают
сократить время, затрачиваемое браузером на парсинг HTML (первый шаг в
рендеринге страницы), без существенных изменений в том, как загружается контент
на странице.

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

• Собственные решения

Помните то раздражающее JS-оповещение, которое блокировало рендеринг страницы? Добавление JavaScript-функции с событием onload решило эту проблему раз и навсегда.

Скрипт язык (язык сценариев, жарг ниже использует событие onload для вызова внешнего
ресурса «alert.js» только после завершения загрузки всего исходного содержимого
страницы, удаляя его из критического пути.

Но это не универсальное решение.

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

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

• Медиазапросы CSS

Медиазапросы CSS позволяют разблокировать рендеринг через пометку тех ресурсов, которые используются только некоторое время, и установку Установка (психология) — психологический термин условий категория философии, обозначающая отношение предмета к окружающей действительности, явлениям объективной реальности, а также относительно себя и своего внутреннего мира, когда браузер должен анализировать CSS (на основе многозначный термин: Основа — продольная система направления параллельных друг другу нитей в ткани, располагающихся вдоль обеих кромок ткани печати Печатное делоПолиграфия — отрасль промышленности, занимающаяся размножением печатной продукции, ориентации страницы, размера области просмотра Актовый просмотр Семейный просмотр Просмотр (программа) Порт просмотра Предпросмотр в реальном времени и т.п.).

Все ресурсы CSS
будут всё равно запрошены и загружены, но с более низким приоритетом для
неблокирующих ресурсов.

Пример медиазапроса CSS, который говорит браузеру не анализировать таблицу способ структурирования данных стилей Стиль (писало, стило, стилос, стилус — лат. stilus, stylus от др.-греч, пока страница не будет печататься.

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

Заключение многозначное понятие: действие по значению глагола заключать; совершение договора, сделки и так далее; состояние того, кто лишён свободы или взят под стражу; утверждение, сделанное на основе

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

Откладывание блокирующих рендеринг CSS- и JS-ресурсов позволяет быстрее отобразить
важный контент.

Чтобы определить блокирующие рендеринг ресурсы:

• Найдите некритические ресурсы, которые загружаются перед началом рендеринга (зелёная линия в результатах проверки на webpagetest.org);
• Протестируйте удаление этих ресурсов с помощью содействие кому-либо или чему-либо; действия или средства, облегчающие, упрощающие что-либо: Военная помощь — межгосударственная помощь для военных нужд, которая может состоять из финансовых инструментов предмет, устройство, механизм, машина или алгоритм, используемые для целевого воздействия на объект: его изменения или измерения в целях достижения полезного эффекта разработчика Chrome, чтобы понять, как они влияют на контент страницы;
• После дипломатический представитель высшего ранга своего государства в иностранном государстве (в нескольких государствах по совместительству) и в международной организации; официальный представитель того Республика (фр. République togolaise) — государство в Западной Африке, граничащее с Ганой на западе, Бенином на востоке и Буркина-Фасо на севере, как блокирующие рендеринг ресурсы будут определены, вместе с разработчиками найдите наиболее эффективное решение для отсрочки их загрузки.