Athens-2021

Рейтинг
25
Регистрация
25.11.2020
sochi-russia #:
Смещение макета не из-за ленивой загрузки изображений. Для устранения смещения достаточно прописать высоту блока (видимого при загрузки), как для ПК, так и для МУ

При адаптивной вёрстке не можем указать высоту блока, так как если в этом блоке находится картинка, то когда будем тянуть на правый край браузера и делать его шире, то картинка выйдет за пределы блока.

Я только сейчас понял зачем разработчики Wordpress изначально внедрили функцию ресайза изображений, то есть - загружаешь одно изображение, а оно разделяется на несколько копий разных размеров. До этого я эту функцию отключал, но только сейчас допёр. Всё дело вот в чем. Можно же взять изображение размером 1000px ширины и в css коде прописать 100% ширины и тогда будет резиновое изображение при адаптивной вёрстке. Но! Во-первых, во время загрузки страницы пространство вокруг это картинки сдвиниться вертикально - будет сдвиг макета и это минус. Во-вторых, для большой картинки потребуется больше времени для загрузки на маленьком дисплее телефона (например 360px экран) - будет медленная отрисовка контента и это минус на который ругается Google. Вот поэтому в коде надо прописывать хотя бы две копии изображений разных размеров для мобильных и десктопных девайсов.

LEOnidUKG #:

Можете сделать страницу тупо с текстом, вообще без css и всё. Я думаю это идеал! Скорость, читаемость!

А может просто подключить css в коде html в секции head методом:

<style>код</style>

Тогда никаких подключений не будет? Не будет задействована оператива сервера.

LEOnidUKG #:

и не получится т.к. это ЭМУЛЯЦИЯ.

Так же будет в реальности у кого современный телефон, у кого тормознутый хлам. Кто-то через wifi сидит, кто-то через мёртвый 3G.

А как тогда жить, если не получиться сделать идеально?

LEOnidUKG #:

Остальное погрешность будет скакать туда сюда.

Ну так у меня тоже так, но я пытаюсь сделать больше 100. Но, не получается.

LEOnidUKG #:

Исходный код моего сайта посмотрите: https://getmanyspeed.ru/

И как там подключены стили. И никто ни на кого не ругается. 

Как это не ругается. Ругается. У вас 0.065 cls

png screenshot_2021-02-26-14-51-23-370_com.opera.mini.native.png
Представляйте. Я уже третий день не могу понять в чем дело. Google ругается на сдвиг макета (cls) при загрузке страницы (несколько милисекунд), а не после того как страница загрузилась. Оказывается проблема была в следующем. У меня подключение стилей было в футере, в результате чего загружался макет без границ и все прыгали, а потом уже применялись стили. В итоге я попробовал убрать подключение стилей из футера в хедер, и Google больше не ругается. Но, блин, Google же сам раньше порекомендовал перенести мне стили в футер, а теперь уже нет?
Антоний Казанский #:

Я бы сказал, не фактор, а критерий. Но заветные 90% - это всё вольные интерпретации вокруг IT новостей. Протестируйте топовые сайты и еще в догонку сами сервисы Гугла и сильно увидитесь какие там цифры (об этом авторы подобных новостей умалчивают или попросту не знают). Самое главное - это быстрый отклик и отрисовка страницы для пользователя, если для среднестатистического пользователя с этим нет проблем, то "попугаи" в GooglePageSpeed - это всё озорство. 

Можно и в определённой степени нужно заморочиться с сжатием картинок, облегчением скриптов, кеширование статических данных и т.д., но куда важнее понимать, что реально можно  и нужно оптимизировать, а не кивать на  мифические 90%. Это доморощенный формализм. 

Значит я фанатик - https://searchengines.guru/ru/forum/1043244 ?

Сегодня в Google Speed появился новый пункт предупреждения, которого раньше не было. Для изображения необходимо задать атрибуты ширины и высоты. 100% не подходит. Надо числа в px. Это очень плохо. Потому что не пройдут адаптивные изображения. В этом случае на кажду точку останова (брекпоинт) придется задавать размер изображения, что увеличит размер кода в css.
jpg tmp-cam-4100538210092845659.jpg
skapunker #:

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

Я знаю. Я все скрипты обернул этими атрибутами.

Всего: 166