Приоритет видимого контента - Google PageSpeed ​​Insights

Интересно, может ли кто-нибудь помочь мне. У меня проблемы с приоритетом видимого содержимого (ПВХ).

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

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

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

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

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

Заголовок размером около 150 пикселей с одним маленьким изображением Nav bar Нет изображения героя /большого изображения Div без боковой панели, только теги h1 и h2 с некоторым ключевым текстом

И под слоем есть изображения и текст.

Как эта страница будет помечена как не приоритетная для видимого контента?

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

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

Вот ошибка для кого-то, кто задается вопросом:

  

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

1 голос | спросил Beth 25 FebruaryEurope/MoscowbSun, 25 Feb 2018 06:20:53 +0300000000amSun, 25 Feb 2018 06:20:53 +030018 2018, 06:20:53

2 ответа


2

Прежде чем браузер сможет отобразить страницу, необходимо создать DOM и CSSOM . В результате нам необходимо обеспечить как можно быстрее как HTML, так и CSS в браузере.

Конечным результатом всего этого процесса является Document Object Model (DOM) нашей простой страницы, которую браузер использует для дальнейшей обработки страницы.

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

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

Конструкция дерева рендеринга показывает, что для критического пути рендеринга требуется как DOM, так и CSSOM для построения дерева рендеринга. Это создает важную производительность: как HTML, так и CSS - это блокирование ресурсов. HTML очевидно, поскольку без DOM нам нечего было бы отображать, но требование CSS может быть менее очевидным.

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

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

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

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

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

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

Число критических ресурсов. Критическая длина пути. Количество критических байтов.

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

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

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

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

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

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

Сводка - приблизительная цепочка зависимости создания видимого содержимого: Visible conten => DOM => критические ресурсы (например, css, javascript).

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

Источник: Критический путь рендеринга веб-основ Google и Оптимизация критический путь рендеринга Google Patners Help .

ответил nikant25 25 FebruaryEurope/MoscowbSun, 25 Feb 2018 11:09:23 +0300000000amSun, 25 Feb 2018 11:09:23 +030018 2018, 11:09:23
1

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

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

ответил Michael d 25 FebruaryEurope/MoscowbSun, 25 Feb 2018 11:06:19 +0300000000amSun, 25 Feb 2018 11:06:19 +030018 2018, 11:06:19

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132