Как сделать, чтобы Google не просил отложить загрузку фона сайта?

Question

[BLM21]

Доброго времени суток, уважаемые знатоки.

Вот скриншот замера скорости сайта.



По сути, 100/100. Закрываю глаза на то, что Google хочет удаления CSS и JS.
Но не могу закрыть глаза на то, что с недавних пор он захотел отложить загрузку фоновой картинки сайта, причём эта картинка на весь экран, а не фрагмент какого-то блока div.

Вызывается картинка не из html, а из CSS следующим кодом:

body {
    background: url(/img/fon17.jpg);
    font-family: “Roboto”, “Arial”, sans-serif;
    color: #303030;
    font-size: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0px 0px;
}

В HTML легче - прописал подключаемым картинкам loading="lazy", и всё.
А вот как быть в моём случае? И потом, если отложить загрузку фона сайта, смотрибельность будет так себе.
Хочется, чтобы в PageSpeed стало меньше красноты на этот один пункт, но, желательно, без потерь.
В сети нашёл массу вариантов, но для фот, подтягивающихся из HTML, но это белый фон на старте точно обеспечен. А вот для CSS решения не нашёл. И обратите внимание, что это body, а не какой-то третьесортный блок.

Может быть, кто из вас сталкивался с таким и имеет продуктивные мысли для решения?

ПАРДОН, сразу не написал. Сайт на MODX REVOLUTION.

Comments

[Thomas Laybe]

попробуйте

[BLM21]

Thomas Laybe, Признателен, но тут MODX.

Answer 1

[Радость моя]

PageSpeed - не панацея. Если следовать всему что он говорит - так это только статика нужна без картинок и стилей. У вас и так отличный результат.

Comments

[BLM21]

Признателен. Я вот тоже этим утешаюсь.
Просто по натуре идеалист, максималист и перфекционист... Бывает, на один вопрос ищу ответ по 2-3 дня.

[Kadzi]

BLM21, Если например сайт коммерческий, рано или поздно он обрастает js скриптами от коллтрекинга, CRM, метриками, прочими темами. И 100 там не будет никак от слова совсем. Да и не нужно, ведь при оптимизированном коде/графике будет и так достаточно быстрая загрузка на смартфоне. А гугл меняет и будет менять дальше условия для зеленой отметки.

Поэтому, важно сделать ДОСТАТОЧНО ХОРОШО. А остальная задротская оптимизация, имеет практический смысл только на сайтах с большой нагрузкой и огромной посещаемостью.

[BLM21]

Kadzi,
Признателен. Порылся в кодах мобильной и десктопной CSS. Ноги растут следующим образом.
Две фоты скрыты, но они никак не связаны с фоном сайта во весь экран (одна в мобильной версии, другая в десктопной). Скрыты параметрами:

position: absolute;
   top: -9999px;
   left: -9999px;

У body указан отступ между строками:

line-height: 1.42857143;

Словом, если удаляю из CSS отступ между строками у body, исчезает замечание Гугла, которым я недоволен. Если удаляю параметры скрытия фот, которые применил, замечание тоже исчезает.

Выходит, мне либо одно терять, либо другое. Два в одном совместить не удаётся. Либо мне нужно ещё какое-то скрытие фот, чтобы было таким же эффективным, как выбранный мной метод. Ибо терять отступ между строками совсем не хочется. Причём, куда ни перемещай отступ из body, один хер шняга выходит.

Но эффективный метод скрытия фот, чтоб не конфликтовал с отступом между строк, мне на ум приходит лишь один: обернуть фоту в div, задать col xs, col sm и т.п., а затем добавить, к примеру, hidden-sm. А 3,14здец, как не хочется применять такой метод.

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

Разобраться с метриками, CRM, аналитикой, чтобы не падала скорость, полагаю, уже умею.
Метрика и Аналитика уже на моём сайте, я их забодал. Это с ними у меня сайт выдаёт 100 по мобиле.

[BLM21]

Kadzi, Странные дела, периодически, несмотря на постоянные несколько замеров, а не один (чтобы точно убедиться) показывает PageSpeed ерунду, при том, что не забываю постоянно очищать кэш MODX для вступления в силу изменений.

Я уже пошёл на

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 text-center hidden-xs">

и

<div class="col-xs-12 col-sm-6 col-lg-12 text-center hidden-lg">

, как теперь PageSpeed перестал реагировать на метод скрытия фото.

Теперь реагирует лишь на line-height, если убираешь, то и замечания нет. Но как жить без отступа между строк нормального?

Понимаю, что и так есть положительный результат. Но перфекционизм требует идеала.
Если что, мои извинения.

[Радость моя]

BLM21, найдите утешение в том что разрабы PageSpeed не являются перфекционистами. И не им вам диктовать правила.

Засуньте сайт PageSpeed в PageSpeed и посмотрите на результаты. Сплошное лицемерие :)

[Радость моя]

BLM21, у меня друг вообще для прохождения pagespeed проверял заголовки рефера, и если это pagespeed - отключал для него какие-то стили и скрипты. Для всех остальных - они работали. (Было такое требование заказчика о 100%)

[BLM21]

Радость моя, Доброго утра. Да я тут в некоторых постах вижу про чудных заказчиков. Возможно, я сам был таким же, когда заказывал свой сайт (однако тогда я не знал, чего сейчас знаю и ТЗ мог составить лишь в двух словах), но чем больше я вникаю в свой сайт, тем лучше понимаю, как далеко от идеала мне его сделали, и, к сожалению, сомнений даже в этом не имею. Сейчас вот смотрю на свой boostrap.min.css и понимаю, что его просто у кого-то скопировали создатели, тупо слизали и мне залили. А такой сюр пороли про вёрстку десктопа, мобилы и планшета...

Кстати, я докопался до того, что если убираю у body line-height: 1.42857143; , замечание Гугла про скрытое изображение пропадает. Если меняю параметр line-height на, допустим, normal или 1.33em, замечание так же пропадает. Получается, где-то конфликт line-height, а в boostrap "крутые создатели" понапихали line-heght всему, их там, как грибов... Вот сиди и перебирай по одному, называется, в поиске конфликта.

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