Опять же много (да и вообще больше одного) файлов CSS не нравится анализатору, он скажет при анализе, что оптимальнее упаковать все файлы стилей в один.
Есть примеры сайтов с такой рекомендацией? В размещении файлов в нескольких css вижу только один минус - увеличение количества сетевых запросов. Но для современного сервера это вообще ни о чем.
Вот этого никогда не понимал. Да, будет ненамного (прям совсем ненамного) быстрее загружаться страница, отсутствие лишнего CSS понравится анализатору, но вот пользователь переходит на другую страницу, где используется на пару правил CSS больше и... подгружается целиком новый файл стилей, где правила пересобраны оптимизатором, вместо того, чтобы использовать имеющийся в кэше браузера загруженный файл стилей при загрузке первой страницы. Резко падает объективная оптимизация, зато анализатор доволен. 😀
А зачем подгружать на каждой странице новый файл стилей и дублировать код в нем? Можно разбить css на блоки и каждый блок подгружать отдельно. К примеру header.css, footer.css, menu.css, userpage.css и. т.п. Разумеется это все делается не вручную, а сборщиком типа webpack.
Заниматься онанизмом Прятать основной контент вместо реальной разработки.
У меня была структура что основное кого типа около 70% высоты, ниже шли сами анкеты образно говоря спустя отступ 30%... Но Гугл их видел все равно. Я перепилил так что теперь кого грубо говоря строго на 100% высоты а остальной текст ниже и вот уже остального Гугл не видит, так как речь только про стартовый экран!) Мини хак но убрал ряд плохих показателей.
Звучит как что - то противоестественное.
Сократить DOM - это значит убрать лишний код, в том числе лишние обертки в верстке. Удалить неиспользуемый css - это значит загружать стили только те, что нужны конкретно на этой странице. Шрифт загружается с каким значением font-display?
Сжатие картинок тоже полезная рекомендация. Если у тебя пользовательские фото - конвертируй их на сервере в .Webp
В любом случае их же надо обрабатывать.
Ну сайдбары в 2024 году можно и не обсуждать, сайты с десктопным трафом очень специфичны нынче, 90-95% трафа с мобил на абсолютном большинстве обычных сайтов. А резервация блоков определенного размера на мобилках - чистая лотерея, система сама решает, какого размера объявление подойдёт для конкретного посетителя. Поэтому вариант некрасивый с выделением места заранее. А при блокировщике рекламы - вообще убожество, как будто сайт недоделанный или сломался.
Ну тогда живи со сдвигом макета. По другому проблему не решить т.к. рекламу все равно нужно загружать асинхронно.
Ага, а когда блок займёт 20% высоты от него - это прям прелестно будет!
Вертикальные блоки нужно размещать в сайдбаре. Даже если будет включен блокировщик рекламы - ничего страшного не произойдет и страница будет смотреться вполне себе. На мобилках блоки лучше делать горизонтальными.
Тут экспериментирую еще по немногу, и как я понял FCP это то что в видом части экрана первое грузится? По идее если мне добавить пустоты и опустить контент чуть ниже, то может тоже еще время улучшится..?! Уже устал экспериментировать с этим.
Отступы на странице вообще никак не повлияют на показатель fcp. Вот тут подробно про это написано: https://web.dev/articles/fcp?hl=ru
P.s. В google page speed у каждого показателя есть ссылки на статьи с расшифровкой проблемы и путями ее решения.
Можно выделить место на сайте под баннерный блок с максимально допустимой высотой и ничего подпрыгивать не будет.
Ну там же вроде во вселенной CLS, нужно что бы все было зафиксировано в упор, желательно в пикселях или типа того.
Указывание атрибутов width и height для изображений - это один из способов избежать сдвига макета. Для резиновых (responsive) дизайнов можно использовать новое css свойство aspect-ratio. Но поскольку старые браузеры его не поддерживают (насколько я помню около 5%), то очень желательно к нему добавить правило @supports not и в нем использовать старый добрый костыль с paddding-top в %. Вот тут про aspect-ratio, а вот это - общие рекомендации гугла по поводу сдвига элементов. Вот пример совместного использования отступа и aspect-ratio.А еще тег <picture> придумали для адаптивных дизайнов.
