2013-08-20 2 views
112

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

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

  • Устраните внешний рендер-блокирование JavaScript и CSS в вышеприведенном в раз содержание.

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

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

+40

«Сгиба» - это место, где нижняя часть экрана находится на загрузке страницы. Когда вы приземляетесь на веб-сайт, любой контент, который вы сразу видите без прокрутки, находится «над сгибом». Все, что вам нужно прокрутить вниз, чтобы увидеть это «ниже складки». – Coop

+18

Above the Fold - термин, обычно используемый для газет, ака, содержание выше, где бумага складывается горизонтально. Обычно для веб-дизайна это первый 600px ~ или около того (дискуссионный в зависимости от того, кого вы спрашиваете). Это не относится к стилям (шрифты, фоны и т. Д.), Это относится к контенту и типу js, который может блокировать рендеринг _in_ этого содержимого. Я сомневаюсь, что Google предлагает использовать встроенные стили, можете ли вы опубликовать предложения, которые вам были даны? –

ответ

98

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

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

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

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

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

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

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

+0

Действительно приятно, когда у вас есть угловой спа-центр ... – Laurenswuyts

+0

@ Joshua, я сделал кое-что для «Устраняют визуализацию-блокировку JavaScript и CSS в вышеописанном содержимом» . Но только размышляйте о мобильных телефонах. Не на рабочем столе. для этого URL https://www.winni.in/cake-delivery-in-bangalore –

2

google page insights ясно расскажет вам, сколько% css, ссылающихся на содержимое выше складки, загружается слишком поздно, и страница могла быть отображена ранее. Чем вы можете перемещать части css для достижения зеленого результата. Я могу сделать это за вас: goo.ГЛ/GsRxNc

ссылку от Google, описывающая «над сгибом» https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

+0

Можете ли вы уточнить, что означают проценты? Предположим, что PageSpeed ​​сообщает, что 55% содержимого сверху могут быть отображены без ожидания загрузки внешних таблиц стилей. Это означает, что 45% содержимого, вышедшего из строя, имеют правила из внешних таблиц стилей. Но это не так (https://stackoverflow.com/questions/45779900/what-do-percents-regarding-above-the-fold-content-mean). –

-2

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

Смежные вопросы