Przesunięcie w wersji mobilnej występuje dlatego, że nie są zdeklarowane w grafikach szerokość (width) i wysokość (height).
W ten sposób przeglądarka zarezerwuje odpowiednią wysokość już na etapie parsowania HTML, zanim obraz zostanie wczytany.
Co do wtyczki jeśli serwer masz, który obsługuje litespeed to ta wtyczka może być jak najbardziej (tylko też trzeba ją dobrze ustawić, bo potrafi być problematyczna). Możesz użyć wtyczki Autoptimize, w której po instalacji zaznacz (włącz):
„Optimize CSS Code?”
„Inline and Defer CSS?”
„Optimize JavaScript Code?”
Pamiętaj, aby w tym samym czasie używać tylko jednej wtyczki do optymalizacji.
Co do określenia szerokości i wysokości obrazów użyj wtyczki ShortPixel lub Imagify.
Możesz skonfigurować je tak, by automatycznie nadpisywały atrybuty srcset i sizes w , co pozwala przeglądarce wybrać idealny rozmiar pod dany ekran. Dzięki temu nie musisz ręcznie podawać width i height w każdym – plugin wykryje proporcje i doda te atrybuty sam.
Ogólnie musisz potestować.
To samo tyczy się czcionki, bo ona też może mieć wpływ na przesunięcia. Rozwiązaniem na to jest w sekcji wstawienie “nie chce pokazać się kod w poscie a w podglądzie go widać, jak będziesz chciał to prześle Ci go w inny sposób”, a w CSS dla @font-face ustaw font-display: swap;. Dzięki temu system zrenderuje tekst w czcionce zastępczej (systemowej), a potem „podmieni” go natychmiast, nie blokując układu.
Te wtyczki możesz używać razem: Autoptimize + Imagify lub ShortPixel.
Też kiedyś działałem na motywie Astra, ale jednak Kadence uważam, że jest lepszy.