Question

Добрый день. Имеется слайдер для сайта. Работает все впорядке. Но при проверке https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=https%3A%2F%2Fstroitel-kharkov.net%2F показывает критическое смещение макета:

Гугл пишет следующее:

 

Я понимиаю, что необходимо вставить display:block Но это не помогает.

Подскажите кто сталкивался с подобным и как это решить? Если есть возможное решение на чистом css без js помогите пожалуйста. Или решение с js.

   #sliderpromo{ width:100%; height:auto; position:relative; overflow:hidden; } @keyframes load{ from{left:-100%;} to{left:0;} } .slidespromo{ width:400%; height:auto; position:relative; -webkit-animation:slide 30s infinite; -moz-animation:slide 30s infinite; animation:slide 30s infinite; } .sliderpromo{ width:25%; height:auto; float:left; position:relative; z-index:1; overflow:hidden; } .imagepromo{ width:100%; height:auto; } .imagepromo img{ width:100%; height:auto; } .contentpromo{ width:100%; height:calc(100vw/2.4); position:absolute; overflow:hidden; } .contentpromo-txt{ width:60%; float:left; position:relative; top:10%; background:#FFB100; opacity: 0.8; -webkit-animation:contentpromo-s 7.5s infinite; -moz-animation:contentpromo-s 7.5s infinite; animation:contentpromo-s 7.5s infinite; -moz-border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; border-radius:15px; } .contentpromotxt1{ font-family:SegoeUIBold; font-size:2.8vw; color:#fff; text-align:left; margin-left:30px; padding-bottom:10px; position:relative; top:5%; } .contentpromotxtpraice{ font-family:SegoeUIBold; font-weight:bold; text-transform:uppercase; font-size:3.5vw; color:#fff; text-align:left; margin-left:30px; padding-bottom:10px; } .contentpromotxt2{ font-family: SegoeUIRegular; font-weight:normal; font-size:1.8vw; font-style:italic; color:#fff; text-align:left; margin-left:30px; } @-webkit-keyframes slide{ 0%,100%{margin-left:0%;} 21%{margin-left:0%;} 25%{margin-left:-100%;} 46%{margin-left:-100%;} 50%{margin-left:-200%;} 71%{margin-left:-200%;} 75%{margin-left:-300%;} 96%{margin-left:-300%;} } @-moz-keyframes slide{ 0%,100%{margin-left:0%;} 21%{margin-left:0%;} 25%{margin-left:-100%;} 46%{margin-left:-100%;} 50%{margin-left:-200%;} 71%{margin-left:-200%;} 75%{margin-left:-300%;} 96%{margin-left:-300%;} } @keyframes slide{ 0%,100%{margin-left:0%;} 21%{margin-left:0%;} 25%{margin-left:-100%;} 46%{margin-left:-100%;} 50%{margin-left:-200%;} 71%{margin-left:-200%;} 75%{margin-left:-300%;} 96%{margin-left:-300%;} } @-webkit-keyframes contentpromo-s{ 0%{left:-100%;} 10%{left:0px;} 30%{left:0px;} 40%{left:0px;} 50%{left:0px;} 60%{left:0px;} 70%{left:0;} 80%{left:-100%;} 90%{left:-100%;} 100%{left:-100%;} } @-moz-keyframes contentpromo-s{ 0%{left:-100%;} 10%{left:0px;} 30%{left:0px;} 40%{left:0px;} 50%{left:0px;} 60%{left:0px;} 70%{left:0;} 80%{left:-100%;} 90%{left:-100%;} 100%{left:-100%;} } @keyframes contentpromo-s{ 0%{left:-100%;} 10%{left:2%;} 15%{left:0px;} 30%{left:0px;} 40%{left:0px;} 50%{left:0px;} 60%{left:0px;} 70%{left:0;} 80%{left:-100%;} 90%{left:-100%;} 100%{left:-100%;} } .linepromo{ position:absolute; width:100%; z-index:1; background:#000; background-color:rgba(255, 219, 2, 0.5);  padding:3px 0 0;  bottom:0px;}

 

 

Answer 1

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

Comments

Добрый день. Если убираю код слайдера, то гугл не выдаёт ошибки смещения макета. С 2021г. Гугл на эти все вещи будет обращать особое внимание, от этого будут зависит результаты выдачи.

---

Vladimir Krivorychko,

Результаты этого анализатора никак не влияют на выдачу. Рекомендовал бы ознакомиться: https://www.cy-pr.com/forum/f106/t99803/ Если вам кто-то сообщает, что влияет на выдачу, это не правда. Это просто анализатор с рекомендациями по исправлению возможных ошибок, только не всех их можно зафиксировать или исправить так как исправление чревато урезанием функционала сайта.