CLS Problem mit dem Menü

  • Thomas M

    (@webzunft)


    3 years, 4 months ago

    Hallo Thomas,

    wenn ich meine Seite durch die PageSpeed Insights laufen lasse sticht der schlechte Wert für den Cumulative Layout Shift hervor.

    Soweit ich das erkenne, liegt es daran, dass sich das Menü zunächst über alle Inhalte legt und dann geschlossen wird.

    Das ist manchmal auch auf den Screenshots zu erkennen die PageSpeed Insights hier macht.

    Bevor ich da selbst Hand anlege dachte ich will du dir das vielleicht einmal ansehen, da es auch andere Nutzer betreffen kann.

    VG
    Thomas

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Thomas M

    (@webzunft)

    3 years, 3 months ago

    Ich habe mir selbst eine Lösung gebastelt, auch wenn ich damit noch nicht ganz zufrieden bin.

    Das Problem ist grundsätzlich, dass für mobile wie auch für die main Navigation der gleiche Code genutzt wird.

    Auf mobile wird die Hauptnavigation geladen und dann per JavaScript verschoben und versteckt. Damit ist sie kurzzeitig auf Desktop sichtbar, insbesondere, wenn die JS und CSS Dateien minifiziert nachgeladen werden.

    Nach ein paar Tests und viel unnützem Code war die Lösung recht einfach. Ich habe mir jetzt folgendes in die functions.php meines Childthemes gepackt:

    
function skr_custom_head_code() {
	?>
<!-- noptimize -->
<style>
/* prevents the main navigation from causing Cumulative Layout Shifts on mobile */
@media ( max-width: 60em) {
	#main-navigation-wrap { display: none; }
	#sidebar-navigation #main-navigation-wrap { display: inherit; }
}
</style>
<!--/noptimize-->
<?php;
}
add_action('wp_head', 'skr_custom_head_code');

    <!-- noptimize --> und <!--/noptimize--> verhindern, dass der Code von Autopmimize angefasst wird und es damit wieder zum Shift kommt.

    Ich hoffe, das hilft jemandem.

Viewing 1 replies (of 1 total)
  • The topic ‘CLS Problem mit dem Menü’ is closed to new replies.