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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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