Что такое «контент в верхней части страницы» в Google Pagespeed?

132

До недавнего времени мой сайт (www.heatexchangers.ca) набирал 98% в Google Page Speed. Было несколько вещей, с которыми я ничего не мог поделать, например, строка запроса из веб-шрифтов. Я был очень доволен этим, так как это представляло все, что я мог сделать.

Недавно Google добавил кое-что еще, что влияет на оценку скорости страницы, и теперь я получаю только 89% скорости страницы и получаю это предложение:

  • Устранение внешнего JavaScript и CSS, блокирующего рендеринг, в верхней части страницы.

Предложение исправить это, похоже, включает в себя просмотр всех моих файлов .css и .js, разделение некоторых их частей и добавление их в мой html. Это вызывает у меня некоторую путаницу, поскольку у меня сложилось впечатление, что мы должны убрать как можно больше JS и CSS из HTML.

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

Glipt
источник
49
«Сгиб» - это место, где нижняя часть экрана находится при загрузке страницы. Когда вы попадаете на веб-сайт, любой контент, который вы сразу видите без прокрутки, оказывается «в верхней части страницы». Все, что вам нужно, нужно прокрутить вниз, чтобы увидеть «ниже сгиба».
CaribouCode
21
Термин «Над сгибом» - это термин, который обычно используется для обозначения газет, он же «содержимое вверху», где бумага сгибается по горизонтали. Обычно для веб - дизайна это первый 600px ~ или так (спорно в зависимости от того, кто вы спросите). Это не относится к стилям (шрифтам, фонам и т. Д.), Это относится к контенту и типу js, которые могут блокировать рендеринг в этом контенте. Я сомневаюсь, что Google предлагает использовать встроенные стили, можете ли вы опубликовать свои предложения?
Кристиан
@Coop Почему бы просто не дать ответ вместо комментария?
Каньон Колоб

Ответы:

113

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

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

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

Это видео-презентация от Google на эту тему:

http://www.youtube.com/watch?v=YV1nKLWoARQ

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

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

Джошуа Коади
источник
@Joshua, я кое-что сделал для "Устранения блокирующих рендеринг JavaScript и CSS в верхней части страницы" <noscript> ... </noscript>. Но размышляйте только о мобильных. Не на рабочем столе. для этого URL- адреса winni.in/cake-delivery-in-bangalore
V SH
2

Статистика страниц Google ясно покажет вам, сколько% css, относящихся к содержимому выше сгиба, загружается слишком поздно и страница могла быть отрисована раньше. Чем вы можете перемещать части CSS, чтобы получить зеленый результат. я могу сделать это за вас: goo.gl/GsRxNc

ссылка от Google, описывающая «верхнюю часть страницы» https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Нет женщин - нет слез
источник
Можете уточнить, что означают проц? Скажем, PageSpeed ​​сообщает, что 55% содержимого верхней части страницы можно отобразить, не дожидаясь загрузки внешних таблиц стилей. Это означает, что 45% содержимого верхней части страницы оформлено с использованием правил из внешних таблиц стилей. Но это не так .
x-
0

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

источник - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Эмили Кэти
источник
-1

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

CowboyWillie
источник
Это верно. Их следует отложить или асинхронно загрузить, или переместить в нижний колонтитул / перед закрывающим тегом </body>, поскольку они не имеют решающего значения для страницы. Важный код, такой как стиль главной страницы или Bootstrap, должен быть загружен вверху страницы, иначе вы испытаете FOUC (Flash Of Unstyled Content), поэтому единственное, что можно сделать с этими важными компонентами, - это минимизировать их и объединить. в меньшее количество файлов, чтобы уменьшить блокировку рендеринга. Этот комментарий является поддержкой комментария CowboyWillie, который несправедливо отвергнут.
Tahi