Меню Рубрики

Что такое DCL: объяснения понятным языком

DOMContentLoaded

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

DOMContentLoaded

Что такое DCL и DOM

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

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

Что такое FCP?

First Contentful Paint, или FCP, является еще одним важным показателем производительности. FCP измеряет момент времени, когда отображается первое содержимое из модели DOM, то есть отображается первый HTML-элемент. Это может быть текст, изображения или все, что пользователь распознает как часть веб-страницы. First Contentful Paint отличается от First Paint (FP), который измеряет, когда визуализируется любой элемент страницы.

Есть несколько других показателей производительности, которые измеряют «первое», что произойдет. Например, время до первого байта (TTFB) измеряет, когда самый первый байт с веб-сервера достигает браузера. Однако FCP измеряет первую точку, в которой пользователь может видеть, что страница начинает успешно загружаться. Поскольку восприятие пользователем веб-производительности — это то, что важно для удержания пользователей на веб-сайте, TTFB почти не имеет значения с точки зрения пользователя.

DOMContentLoaded

Как DCL и FCP влияют на SEO

Скорость сайта является важной частью стратегии SEO (поисковой оптимизации). Производительность является особенно важным фактором для рейтинга в поисковых системах. DCL и FCP — это две метрики, которые Google подчеркивает при оценке производительности, а Google PageSpeed Insights помогает разработчикам измерять их. (Хотя Google не разделяет точно, насколько эти два показателя производительности влияют на его рейтинг поиска, но он, безусловно, учитывает их.)

Разработчики могут предпринять ряд шагов для улучшения этих показателей на сайте. Использование преимуществ кэширования и использования CDN — это два важных шага для улучшения времени DCL и FCP. Не забудьте прочитать другую статью на этом сайте.

Как CDN улучшает DCL и FCP?

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

Краткое примечание о том, как работают веб-страницы

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

HTML (Hypertext Markup Language) — это код, содержащий инструкции для браузеров по отображению содержимого и запросу других ресурсов.

DOMContentLoaded

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

JavaScript — это язык программирования, который может принимать содержимое HTML и изменять его при выполнении определенных условий. Кроме того, JavaScript можно использовать для более сложных задач, таких как 3D-рендеринг, игры или другие технически сложные действия. На этой статье есть и другие статьи.

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

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