SEO Optimierung Blocking Time & Image Ladeverzögerung reduzieren

[ASTools]

Hallo zusammen,

ich versuche aktuell mein SEO Ranking etwas zu verbessern. Hierzu wollte ich mich zunächst um meinen Pagespeed kümmern.

Pagespeed Insigts gibt einem hierzu ja einige Tipps.

Nun bin ich bei Mobile Anwendungen an einem Punks mit 2 großen Baustellen angelangt, die ich so nicht lösen kann.

1. Script Evaluation & Blocking Time 

2. Image Ladeverzögerung

Laut Pagespeed blockiert der Google Tag Manager code und das Coockie banner die Ladezeit "extrem". Auch die Script Evaluation recht lange. Dadurch wird das Bild meines Banners verzögert geladen, was auch wieder für Minuspunkte sorgt. 

Habe es schon mit einem preload in theme.liquid für das Banner image versucht, bisher aber ohne Erfolg.

<!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
<link rel="preload" fetchpriority="high" as="image" href="/path/to/image" type="image/webp">

Vielleicht hat jemand einen Tipp wie ich die Zeiten hier verringern kann. 

[Gabe]

Hey @ASTools 

Danke  für den Sachverhalt und das Bild und das habe ich etwas gegoogelt. Beachte aber das alle Shopify Themes für das Web und die Loading Speeds optimiert sind und best-of-breed Loading times haben. 

Aber wenn dir das trotzdem nicht ausreicht, weitere Tipps findest du in diesen Artikeln:

• WP Rocket: How to Defer JavaScript
• Keen to Design: Optimizing JavaScript for PageSpeed

Im Grunde und TL;DR kannst du die Ladezeiten verbessern, indem du nicht-essentielles JavaScript verzögerst. Dadurch wird der Hauptinhalt der Seite schneller geladen und angezeigt, bevor die Scripts ausgeführt werden. Tools wie das WP Rocket Plugin oder Asset CleanUp können dabei helfen, JavaScript zu verzögern. Minimiere auch die JavaScript-Dateien, um die Dateigröße zu reduzieren und die Ladezeiten zu verkürzen. Kompressionsmethoden wie Gzip oder Brotli, die oft von Diensten wie Cloudflare angeboten werden, können das machen.

Bildoptimierung:

• Wichtige Bilder preladen: Auch wenn du bereits versucht hast, dein Bannerbild vorzuladen, stelle sicher, dass das Bild mit der richtigen Priorität geladen wird. Außerdem sollten alle Bilder für das Web optimiert sein, indem du moderne Formate wie WebP verwendest, die schneller laden und weniger Bandbreite benötigen.
• Lazy Loading für nicht-kritische Bilder: Implementiere Lazy Loading für Bilder, die nicht sofort sichtbar sind (Inhalte unterhalb des sichtbaren Bereichs). Dadurch werden die wichtigsten Bilder zuerst geladen, was die wahrgenommene Ladezeit verbessert. Plugins wie Lazy Load oder WP Rocket können dir dabei helfen, diese Funktion umzusetzen. Baer wie, gesagt, die Shopify Themes machen das alles ja bereits out-of-the-box. 
• Mehr dazu hier und auch hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.