Ist Ihr Magento 2 Shop langsamer als ein schläfriges Faultier? Lässt die Geschwindigkeit Ihrer Website Ihre Kunden ungeduldig mit den Fingern trommeln? In der heutigen schnelllebigen digitalen Welt ist die Website-Geschwindigkeit nicht nur ein Luxus – sie ist eine Notwendigkeit. Langsame Ladezeiten können zu frustrierten Benutzern, höheren Absprungraten und letztendlich zu Umsatzeinbußen führen.

Ein wesentlicher Bestandteil der Bereitstellung einer schnellen Erfahrung mit Magento ist das Verständnis und die Optimierung des Largest Contentful Paint (LCP) und Core Web Vitals (CWV) von Google allgemein.

 

Boosten Sie Ihren Magento 2 Shop (Luma + Hyvä): Der ultimative Leitfaden zur LCP-Optimierung Boosten Sie Ihren Magento 2 Shop (Luma + Hyvä): Der ultimative Leitfaden zur LCP-Optimierung

 

Diese Metriken messen die reale Benutzererfahrung hinsichtlich Ladeleistung, Interaktivität und visueller Stabilität. Einer der wichtigsten Core Web Vitals, der die Leistung und Benutzererfahrung Ihrer Website beeinflusst, ist der Largest Contentful Paint (LCP). Insbesondere für Magento 2 Shops kann die Optimierung des LCP der Schlüssel sein, um schnellere Ladezeiten, zufriedenere Kunden und bessere Suchmaschinenrankings zu erreichen.

 

Dieser umfassende Leitfaden wird tief in die LCP-Optimierung speziell für Magento 2 Shops eintauchen, sowohl für das traditionelle Luma-Theme als auch für das moderne, leistungsorientierte Hyvä-Theme. Wir werden untersuchen, was LCP und andere Core Web Vitals sind, warum sie wichtig sind, wie man sie misst, und vor allem umsetzbare Strategien und Tools bereitstellen – einschließlich leistungsstarker Extensions von JaJuMa –, um Ihnen zu helfen, die Geschwindigkeit Ihres Magento 2 Shops zu steigern.

 

“In Magento's flow, swift speeds we seek,
Where Largest Content Paint must peak.
A dance of bytes, a seamless glide,
Peformance shines, no need to hide.
Measure, refine, each metric feeds,
The beauty of speed is all it needs.”

 

Warum Core Web Vitals, inkl. des Largest Contentful Paint (LCP) für Magento 2 Shops wichtig ist

 

Largest Contentful Paint und die anderen Core Web Vitals sind mehr als nur technische Begriffe; sie sind entscheidende Indikatoren dafür, wie Nutzer die Ladegeschwindigkeit, Interaktivität und Stabilität Ihrer Website wahrnehmen. Google verwendet LCP als eine Schlüsselmetrik in seinen Core Web Vitals, als Ranking-Signale, die das Suchmaschinenranking Ihrer Seite direkt beeinflussen. Googles offizielle Dokumentation zu LCP finden Sie hier.

Hier sind die Gründe, warum die Optimierung der Core Web Vitals, mit Fokus auf LCP, besonders wichtig für Magento 2 Shops ist:

 

  • Benutzererfahrung:
    Ein schneller LCP bedeutet, dass Benutzer den wichtigsten Inhalt der Seite schnell sehen (Ladeleistung). Ein guter Interaction to Next Paint (INP) stellt sicher, dass die Seite schnell auf Klicks und Tippen reagiert (Interaktivität), während ein niedriger Cumulative Layout Shift (CLS) störende Inhaltsverschiebungen verhindert (visuelle Stabilität). Im E-Commerce bedeutet diese Kombination den Unterschied, ob ein Kunde bleibt, um zu stöbern, oder zu einem Wettbewerber wechselt.
  • Conversion-Raten:
    Schnellere Ladezeiten und eine reibungslosere interaktive Erfahrung korrelieren direkt mit höheren Conversion-Raten. Studien, wie die von Deloitte (https://www.deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html), zeigen, dass selbst Verbesserungen im Millisekundenbereich das Engagement und den Umsatz signifikant steigern können.

  • SEO-Ranking:
    Google priorisiert Websites, die eine gute Benutzererfahrung bieten. Gute Werte bei allen Core Web Vitals tragen zu Ihrer gesamten Page Experience Bewertung bei und können potenziell Ihre Sichtbarkeit in den Suchergebnissen erhöhen und mehr organischen Traffic generieren.

  • Absprungrate:
    Langsam ladende Seiten und nicht reagierende Oberflächen sind ein Hauptgrund für hohe Absprungraten. Wenn der Hauptinhalt zu lange zum Erscheinen braucht oder sich die Seite träge anfühlt, geben Benutzer wahrscheinlich auf und gehen woanders hin. Die Optimierung von LCP und INP hilft, Benutzer engagiert zu halten, von dem Moment an, in dem sie auf Ihrer Seite landen.

Was sind die Core Web Vitals?

Bevor wir tiefer in die Magento Largest Contentful Paint (LCP) Optimierung eintauchen, definieren wir kurz die drei wichtigsten Core Web Vitals-Metriken:

  • Largest Contentful Paint (LCP):
    Fokussiert auf Ladeleistung. Misst die Zeit, die benötigt wird, bis das größte im Viewport sichtbare Bild oder Textblock gerendert wird, relativ zum Zeitpunkt, als die Seite zu laden begann. Im Wesentlichen markiert er den Punkt, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde.
    Google empfiehlt einen LCP von 2,5 Sekunden oder weniger für eine 'gute' Erfahrung.
  • Interaction to Next Paint (INP):
    Fokussiert auf Interaktivität. Misst die Latenz aller Benutzerinteraktionen (wie Klicks, Tippen oder Tastendrücke) während des gesamten Besuchs einer Seite. Der endgültige INP-Wert ist die längste beobachtete Interaktion (Ausreißer ignoriert). Er gibt an, wie schnell die Seite visuell auf Benutzereingaben reagiert.
    Ein 'guter' INP wird als 200 Millisekunden oder weniger angesehen.
    (Hinweis: INP ersetzte First Input Delay (FID) als Core Web Vital im März 2024).
  • Cumulative Layout Shift (CLS):
    Fokussiert auf visuelle Stabilität. Misst die Gesamtsumme aller unerwarteten Layoutverschiebungen, die während der gesamten Lebensdauer des Seitenladens auftreten. Eine Layoutverschiebung tritt auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.
    Ein 'guter' CLS-Wert ist 0,1 oder weniger.

Die Optimierung aller drei Core Web Vitals ist unerlässlich, um eine überragende Benutzererfahrung in Ihrem Magento Shop zu bieten.
Dieser Leitfaden konzentriert sich hauptsächlich auf LCP, aber viele Optimierungstechniken wirken sich auch positiv auf INP und CLS aus.

Der Stand bzgl. LCP und Core Web Vitals in Magento: Hyvä vs. Luma

Magentos Standard-Luma-Theme ist zwar funktional, aber bekannt für sein relativ schweres Frontend, das auf umfangreiches CSS (z. B. styles-m.css) und JavaScript-Bibliotheken wie KnockoutJS, jQuery und RequireJS angewiesen ist. Diese Komplexität kann zu Herausforderungen bei der Erzielung optimaler LCP-Werte führen und trägt oft zu Problemen mit Render-blockierenden Ressourcen und potenziell Cumulative Layout Shift (CLS) bei, insbesondere auf Mobilgeräten.

 

Hyvä Themes für Magento 2 hingegen wurden von Grund auf mit Leistung als Hauptziel entwickelt. Durch die Eliminierung sperriger Bibliotheken verwendet Hyvä eine moderne Architektur mit leichtgewichtigen Technologien wie Tailwind CSS und Alpine.js, Hyvä-basierte Shops reduzieren die Menge an Code, die der Browser verarbeiten muss, erheblich. Dieser optimierte Ansatz führt typischerweise zu drastisch besseren LCP-Zeiten und allgemeinen Core Web Vitals-Werten im Vergleich zu Luma.
Das Erreichen wirklich guter und herausragender LCP-Werte in realen Szenarien erfordert jedoch oft zusätzliche Optimierungen auch mit dem Hyvä Theme.
Oder aus einer anderen Sicht: Keine zusätzlichen Optimierungen für LCP mit dem Hyvä Theme anzuwenden, wäre eine verpasste Chance, einen Shop und dessen Benutzererfahrung zu verbessern.

 

Obwohl dieser Leitfaden Strategien bietet, die sowohl für Luma als auch für Hyvä gelten, haben Benutzer von Hyvä-Themes aufgrund der inhärenten Leistungsvorteile des Themes oft einen signifikanten Vorsprung. Die Optimierung ist jedoch unabhängig vom Theme entscheidend.

 

Um den Weg zur LCP-Exzellenz und zum Erreichen der begehrten Top-Google-Platzierungen weiter zu vereinfachen, steht eine Reihe von Maßnahmen und leistungsstarken Tools für Magento und Hyvä Theme zur Verfügung, z. B. in Form von JaJuMa Performance Optimierungs Extensions. Diese Extensions sind speziell dafür entwickelt worden, verschiedene Aspekte der Website-Leistung anzugehen, einschließlich Bildoptimierung, CSS-Bereitstellung und Ressourcenladen. Durch die Nutzung dieser leicht verfügbaren Lösungen können Magento-Händler, Agenturen und Entwickler LCP-Best-Practices mit größerer Leichtigkeit und Effizienz implementieren und komplexe Optimierungsaufgaben in einfache Konfigurationen umwandeln.
Stellen Sie es sich so vor, als hätten Sie einen Leistungsexperten direkt in Ihrem Magento-Admin!

Largest Contentful Paint (LCP) verstehen

Im Kern misst Largest Contentful Paint (LCP), wie schnell der Hauptinhalt einer Webseite für den Benutzer sichtbar wird.


Wie bereits definiert, misst LCP die Renderzeit des größten sichtbaren Inhaltselements im Viewport. Dieses Element ist oft ein Hero-Image, ein großes Banner, das Posterbild eines Videos oder ein bedeutender Textblock. LCP zielt darauf ab zu erfassen, wann der Hauptinhalt der Seite wahrscheinlich geladen und für den Benutzer sichtbar ('erschienen') ist.
Der Browser beginnt mit der Messung des LCP, wenn der Benutzer das Laden der Seite initiiert, und stoppt, wenn das größte Inhaltselement vollständig gerendert wurde und sichtbar wird. Das Verständnis dieser Definition ist der erste entscheidende Schritt zur effektiven Optimierung dieser Metrik, da sie die Aufmerksamkeit auf die Elemente lenkt, die den größten Einfluss auf die wahrgenommene Ladegeschwindigkeit haben.

 

Google hat klare Bewertungsgrenzwerte für LCP festgelegt, um Website-Besitzern zu helfen, ihre Leistung einzuschätzen und die Auswirkungen für ihre Nutzer und Suchmaschinenrankings zu verstehen (Quelle).

 

 

  • Ein LCP von 0 bis 2,5 Sekunden wird als Gut angesehen und deutet auf eine schnelle und reaktionsschnelle Nutzererfahrung hin.
  • Websites, die in den Bereich von 2,5 bis 4 Sekunden fallen, werden als Verbesserungsbedürftig eingestuft, was darauf hindeutet, dass die Seite zwar nicht kritisch langsam ist, aber Raum für Optimierung zur Verbesserung der Nutzererfahrung besteht.
  • Schließlich wird ein LCP über 4 Sekunden als Schlecht angesehen und signalisiert erhebliche Probleme mit der Ladeleistung, die sich negativ auf die Nutzerzufriedenheit und das SEO auswirken können.

 

Google Definition der Largest Contentful Paint Ranges Google Definition der Largest Contentful Paint Ranges
Google Definition der Largest Contentful Paint Ranges

 

Diese Benchmarks bieten greifbare Ziele für Optimierungsbemühungen und ermöglichen es Entwicklern und Händlern, ihren aktuellen Stand zu bewerten und die Kategorie "Gut" anzustreben, um die Sichtbarkeit in Suchmaschinen zu maximieren.
Denken Sie daran, ein guter LCP-Wert ist ein starkes Signal an Google, dass Ihre Seite eine positive Benutzererfahrung bietet, was zu besseren Rankings führen kann.

 

awesomeicons6/solid/lightbulb
TIPP:
Während das Anstreben von "Gut" (unter dem Ziel von 2,5 Sekunden) wesentlich ist, sollten Shops, die eine wirklich exzellente Benutzererfahrung anstreben und die Benutzerbindung fördern möchten, möglicherweise über die oben genannten Schwellenwerte hinausgehen und LCP-Werte im Bereich von ~1 - 1,5s anstreben, um eine außergewöhnliche Benutzererfahrung und einen Wettbewerbsvorteil zu gewährleisten.

 

Wie misst man den LCP?

Das spezifische Element zu identifizieren, das zum LCP in Ihrem Magento 2 Shop mit Luma oder Hyvä beiträgt, ist der wesentliche erste Schritt jeder gezielten Optimierungsstrategie.
LCP- und andere CWV-Werte können im "Labor" gemessen werden, indem Entwicklertools einen einzelnen Seitenaufbau unter bestimmten Bedingungen analysieren, oder im "Feld" basierend auf echten Benutzererfahrungen auf einer Website.

 

LCP im Labor & im Feld überwachen und messen LCP im Labor & im Feld überwachen und messen
LCP im Labor & im Feld überwachen und messen

 

  • Manuelle Messung des LCP im "Labor":
    Glücklicherweise bieten moderne Browser-Entwicklertools einfache Möglichkeiten, dieses Element zu identifizieren, was nützlich für das Debugging und das Testen von Änderungen ist. Diese Tools simulieren Seitenaufbauten in einer kontrollierten Umgebung, um die Leistung Ihrer Seite zu analysieren, und zeigen das LCP-Element zusammen mit seiner Ladezeit deutlich an. Beispiele hierfür sind:

    • Google Lighthouse:
      Verfügbar in Chrome DevTools (F12 > Lighthouse-Tab).  Bietet eine detaillierte Leistungsprüfung, einschließlich LCP, INP-Simulations-Einblicken und CLS.
    • Google PageSpeed Insights (PSI):
      Ein Online-Tool (https://pagespeed.web.dev/), das Ihre Seite analysiert und sowohl Labor- (Lighthouse) als auch Felddaten (aus CrUX, falls verfügbar) bereitstellt.
    • WebPageTest:
      Ein leistungsstarkes Tool für tiefgehende Leistungsanalysen von verschiedenen Standorten, Geräten und Verbindungsgeschwindigkeiten.

 

 

  • Feld-Tools (Real User Monitoring - RUM):
    Priorität sollte die Messung des LCP im Feld haben, da dies die tatsächliche Benutzererfahrung widerspiegelt, die Kunden in einem Magento-Shop haben.
    Real User Monitoring (RUM)-Tools sammeln Daten von tatsächlichen Benutzern, die Ihre Website besuchen, und liefern so ein genaueres Bild der realen Leistung über verschiedene Geräte und Netzwerkbedingungen hinweg. Beispiele hierfür sind:

    • Chrome User Experience Report (CrUX):
      Öffentliche Daten, die von angemeldeten Chrome-Nutzern gesammelt werden. PageSpeed Insights und die Google Search Console zeigen diese Daten an.
      Sie können CrUX-Daten für Ihre Website oder die von Wettbewerbern mit Tools wie CrUXVis visualisieren.
    • Google Search Console:
      Der Core Web Vitals-Bericht (unter "Nutzerfreundlichkeit") zeigt, wie Ihre Seiten basierend auf CrUX-Felddaten abschneiden, und hebt URLs hervor, die verbessert werden müssen.
    • JavaScript-Bibliotheken:
      Bibliotheken wie Googles web-vitals-Bibliothek ermöglichen es Ihnen, CWV-Daten direkt von Ihren Benutzern zu sammeln und an Ihre eigenen Analysetools (z. B. Google Analytics) zu senden.
    • JaJuMa Real User Monitoring (RUM) Extension:
      Unsere Real User Monitoring (RUM) Magento 2 Extension vereinfacht die Überwachung, Sammlung und Analyse von realen LCP-, INP-, CLS- und anderen Leistungsdaten.
      Sie liefert aktuelle Daten, Optionen für detailliertere Analysen und Einblicke direkt in Ihrem Magento-Admin für eine einfache und bequeme Überwachung und Analyse.

 

Schlüsselfaktoren, die den LCP in Magento 2 beeinflussen

Mehrere Faktoren können den Largest Contentful Paint auf einer Magento 2 Website mit Luma oder Hyvä beeinflussen und verzögern.
Das Verständnis dieser Schlüsselfaktoren ist entscheidend für die Entwicklung effektiver Optimierungsstrategien und letztendlich für das Erreichen dieser Top-Google-Plätze sowie einer herausragenden Benutzererfahrung.

  1. Server-Antwortzeit (TTFB):

    Einer der grundlegendsten Aspekte, der die Magento LCP Werte beeinflusst, ist die Server-Antwortzeit (TTFB - Time to First Byte).
    TTFB misst die Zeit, die der Browser eines Benutzers benötigt, um das erste Byte an Daten vom Server zu empfangen, nachdem eine Anfrage gestellt wurde. Ein langsamer TTFB wirkt wie ein Flaschenhals und verzögert alle nachfolgenden Ladevorgänge, einschließlich des Ladens des LCP-Elements. Wenn der Server lange braucht, um mit dem initialen HTML zu antworten, kann der Browser nicht einmal beginnen, die zum Rendern der Seite benötigten Ressourcen zu identifizieren und anzufordern, einschließlich des größten Inhaltselements.
    Daher ist die Optimierung der Server-Antwortzeit ein grundlegender Schritt zur Verbesserung des LCP.

  2. Renderblockierende Ressourcen:

    Renderblockierende Ressourcen, hauptsächlich CSS- und JavaScript-Dateien, können das Rendern des LCP-Elements erheblich verzögern.
    Wenn der Browser auf diese Dateien im HTML trifft, pausiert er normalerweise das Parsen des Dokuments, um sie herunterzuladen und zu verarbeiten. Wenn diese Dateien groß oder nicht optimiert sind, können sie den Browser daran hindern, Inhalte zu rendern, einschließlich einer erheblichen Verzögerung des Erscheinens des LCP-Elements, bis sie vollständig verarbeitet sind.
    Die Minimierung der Auswirkungen von renderblockierenden Ressourcen ist daher entscheidend für einen schnellen LCP.

  3. Medienoptimierung:

    Da Bilder und Videos häufig die größten Elemente auf einer Seite sind, ist ihr langsames Laden eine häufige Ursache für einen schlechten LCP.
    Große, unoptimierte Mediendateien benötigen viel Zeit zum Herunterladen, und bis sie vollständig geladen sind, können sie nicht als LCP-Element gerendert werden.
    Die Optimierung von Größe, Format und Laden dieser Medienassets ist daher von größter Bedeutung für die Verbesserung des LCP, insbesondere wenn das größte Inhaltselement ein Bild oder ein Video ist.

  4. JavaScript-Ausführung:

    Die JavaScript-Ausführungszeit kann ebenfalls eine entscheidende Rolle für den LCP spielen, insbesondere wenn JavaScript zum Rendern oder Manipulieren des LCP-Elements verwendet wird.
    Wenn der Browser eine erhebliche Menge an JavaScript ausführen muss, bevor das LCP-Element angezeigt werden kann, kann diese Ausführung den Hauptthread blockieren und den Rendervorgang verzögern, selbst wenn die zugrunde liegende Ressource (wie ein Bild) bereits heruntergeladen wurde.
    LCP-Probleme aufgrund eines blockierten Hauptthreads treten häufiger bei Themes auf, die stark von komplexen JavaScript-Frameworks (wie Luma mit KnockoutJS) oder umfangreichem clientseitigen Rendering abhängig sind.
    Die Reduzierung der Hauptthread-Arbeit, des JavaScripts und die Optimierung seiner Ausführung sind wichtige Überlegungen für die LCP- (und auch INP-) Optimierung.

  5. Web-Schriftarten:

    Schließlich können Web-Schriftarten den LCP beeinflussen, wenn das größte Inhaltselement Text ist, der mit einer benutzerdefinierten Schriftart gestaltet wurde.
    Standardmäßig können Browser das Rendern von Text, der mit einer Web-Schriftart gestaltet ist, verzögern, bis die Schriftartdatei heruntergeladen wurde, was zu einer Verzögerung des Erscheinens des LCP-Elements führt.
    Auch wenn ein großer Textblock Ihr LCP-Element ist, wird die Strategie zum Laden von Schriftarten entscheidend.
    Die Optimierung des Ladens von Web-Schriftarten ist daher unerlässlich, um sicherzustellen, dass textbasierte LCP-Elemente schnell gerendert werden und um Layoutverschiebungen (CLS) zu verhindern.

Umsetzbare Strategien zur LCP-Optimierung

Nun werden wir praktisch und gehen die LCP-Engpässe in Ihrem Magento 2 Shop an.
Basierend auf den oben diskutierten Faktoren können mehrere bewährte, umsetzbare Strategien implementiert werden, um den Largest Contentful Paint in Ihrem Magento 2 Shop mit Luma oder Hyvä zu optimieren.

 

Lesen Sie weiter, um bewährte und getestete Maßnahmen zur Verbesserung Ihres LCP in Magento kennenzulernen. 
Die nachfolgenden Strategien stimmen mit den allgemeinen Empfehlungen zur LCP-Optimierung überein und sind speziell auf das Magento- und Hyvä-Ökosystem zugeschnitten.

 

Die Schönheit der Geschwindigkeit und der Performance-Optimierung Die Schönheit der Geschwindigkeit und der Performance-Optimierung
Die Schönheit der Geschwindigkeit und der Performance-Optimierung

 

Durch die Anwendung dieser Maßnahmen konnten wir 50% von einem LCP von 1,6 bei Luma auf einen unglaublichen LCP von 0,8 bei Hyvä reduzieren – Sehen Sie sich unsere unten verlinkten Showcases für weitere Details an und erleben Sie die Schönheit der Geschwindigkeits- und Leistungsoptimierung in Aktion.

Dein bester Freund: Ein guter TTFB (Time to First Byte)

Selbst mit einem perfekt optimierten Frontend wird eine langsame Serverantwort Ihren LCP zunichte machen.
Während die Konzentration auf das größte Inhaltselement entscheidend ist, basiert ein schneller LCP auf einem soliden Fundament einer schnellen Time to First Byte (TTFB). Wenn der Browser längere Zeit warten muss, um das initiale HTML-Dokument zu empfangen, verzögert dies zwangsläufig die Erkennung und das Laden aller nachfolgenden Ressourcen, einschließlich des LCP-Elements.

awesomeicons6/solid/lightbulb
EINBLICK:
Obwohl die unten beschriebenen Optimierungen der Serverinfrastruktur, des CDN und des erweiterten Cachings die Leistung und die CWV verbessern können, sollten sie hauptsächlich als Skalierungsmaßnahmen betrachtet und je nach individueller Situation bewertet/berücksichtigt werden.
Mit Magento 2 ist es durchaus möglich, gute TTFB- und CWV-Werte ohne teures Hosting, CDN oder erweitertes Caching wie Varnish oder Redis zu erreichen, indem gezielte und intelligente Optimierungen angewendet werden.
Lesen Sie unsere 60 Tage mit Hyvä: Von der Projektrettung, beschleunigt auf Lichtgeschwindigkeit & zum Erfolg Fallstudie, um zu erfahren wie
  • Serverinfrastruktur:

    Für Magento 2 Shops, insbesondere solche, die das leistungsorientierte Hyvä-Theme verwenden, ist die Auswahl der richtigen Serverinfrastruktur von größter Bedeutung. Magento als robuste E-Commerce-Plattform profitiert erheblich von robusten Serverressourcen. Hyvä ist zwar im Frontend leichtgewichtig, stützt sich aber dennoch auf eine effiziente Backend-Verarbeitung. Die Überprüfung von Serverprotokollen und die Verwendung von Leistungsüberwachungstools können helfen, potenzielle Engpässe bei den Serverantwortzeiten zu identifizieren. Die Optimierung des Magento-Backend-Codes und der Datenbankabfragen sowie die Sicherstellung, dass Ihre Serverkonfiguration (z. B. durch Verwendung von LiteSpeed oder Nginx und der neuesten PHP-Version wie 8.1+) ordnungsgemäß abgestimmt ist, kann zu erheblichen Verbesserungen des TTFB führen. Darüber hinaus ist die Prüfung von Drittanbieter-Extensions und Ihren Theme-Dateien auf leistungslastige Operationen entscheidend.
    Stellen Sie sicher, dass Ihr Hosting-Plan für Ihren Traffic ausreichend ist. Erwägen Sie ein Upgrade auf einen leistungsstärkeren Server, ein auf Magento optimierter Hosting-Anbieter ist ein Muss (dediziertes Hosting ist oft besser als Shared Hosting). Auch der Serverstandort ist wichtig; wählen Sie einen Standort in der Nähe Ihrer Hauptzielgruppe.

  • Content Delivery Network (CDN):

    Die Implementierung eines Content Delivery Network (CDN) kann eine weitere effektive Möglichkeit sein, den TTFB zu reduzieren, insbesondere für Shops mit einer globalen Kundenbasis. Ein CDN speichert zwischengespeicherte Kopien der statischen Assets Ihrer Website (wie Bilder, CSS- und JavaScript-Dateien) auf geografisch verteilten Servern weltweit. Wenn ein Benutzer Ihre Website anfordert, liefert das CDN diese Assets vom Server aus, der seinem Standort am nächsten ist, wodurch die Serverlast minimiert, die Latenz reduziert und die Antwortzeiten erheblich verbessert werden. Zahlreiche CDN-Anbieter sind mit Magento 2 und Hyvä kompatibel, was dies zu einer leicht implementierbaren Lösung macht. Beliebte Optionen sind Cloudflare, Fastly und Amazon CloudFront.
    Hinweis: Beachten Sie, dass die Verwendung eines CDN ein DSGVO-Problem darstellen könnte.

  • Full Page Cache (FPC):

    Die Optimierung des Caching ist ebenfalls entscheidend für die Reduzierung der Serverantwortzeiten. Magento 2 bietet integrierte Caching-Mechanismen wie Full Page Cache (FPC), die ordnungsgemäß konfiguriert und aktiviert sein sollten. Für noch größere Leistungssteigerungen erwägen Sie die Verwendung von Varnish, einer leistungsstarken HTTP-Reverse-Proxy- und Caching-Anwendung, die für Magento 2 sehr empfohlen wird. Die Konfiguration von FPC/Varnish zum Zwischenspeichern häufig aufgerufener Seiten kann die Last auf Ihrem Magento-Server drastisch reduzieren und zu deutlich schnelleren TTFB für zwischengespeicherte Inhalte führen. Sie liefern vorgenerierte HTML-Seiten direkt aus dem Cache und umgehen so einen Großteil der Backend-Verarbeitung von Magento für die meisten Besucher. Stellen Sie sicher, dass Ihr FPC korrekt konfiguriert und aktiviert ist.
    Überprüfen Sie im Magento Admin unter Stores > Configuration > Advanced > System > Full Page Cache. Stellen Sie bei Varnish sicher, dass es als Caching-Anwendung ausgewählt ist.

  • Redis:

    Die Nutzung von Redis, einem In-Memory-Datenspeicher, zum Zwischenspeichern von Datenbankabfragen, Sitzungen und anderen häufig abgerufenen Daten kann die Leistung ebenfalls erheblich verbessern.

  • Datenbankoptimierung:

    Minimieren und optimieren Sie Datenbankabfragen. Stellen Sie sicher, dass Datenbank-Caches (wie Redis oder Memcached) aktiviert und ordnungsgemäß konfiguriert sind. Verwenden Sie Indizierung effektiv.

  • Audit von Drittanbieter-Modulen:

    Überprüfen Sie regelmäßig Drittanbieter-Extensions. Schlecht programmierte Module können die Serverantwortzeit erheblich verlangsamen. Deaktivieren Sie Extensions nacheinander, um die Verursacher zu identifizieren.

  • PHP & Magento-Version:

    Halten Sie PHP und Magento auf den neuesten stabilen Versionen aktuell, da diese oft Leistungsverbesserungen beinhalten. Betreiben Sie Magento im Produktionsmodus.

  • BFCache/Preloading/Prerender:

    Obwohl nicht direkt für "kalte Ladevorgänge", wie z.B. in Google Page Speed analysiert, sind Browserfunktionen wie Back/Forward Cache, die Speculation Rules API und Seiten-Preloading hochwirksame Optionen zur Reduzierung von LCP- und CWV-Felddaten. Sie lassen die Navigation deutlich schneller erscheinen und bieten eine reibungslosere wahrgenommene Leistung für Kunden nach dem ersten initialen Laden, indem sie auf nahezu "Null-TTFB" bei nachfolgenden Seitenaufrufen abzielen.

Kritischen Rendering-Pfad optimieren, um rendering-blockierende Ressourcen zu minimieren

Der kritische Rendering-Pfad ist die Abfolge von Schritten, die der Browser unternimmt, um die initiale Ansicht einer Webseite zu rendern, das heißt, HTML, CSS und JavaScript in Pixel auf dem Bildschirm umzuwandeln.
Ressourcen, die diesen Pfad blockieren, verhindern, dass der Browser die Seite schnell zeichnet, was sich direkt auf den LCP auswirkt.

  • Minimieren von CSS und JavaScript

    Das Minimieren von CSS- und JavaScript-Dateien ist eine grundlegende Optimierung. Die Minimierung entfernt unnötige Zeichen (wie Leerzeichen und Kommentare) aus dem Code und reduziert so die Dateigrößen.
    Kleinere Dateien werden schneller heruntergeladen und vom Browser schneller geparst, wodurch das LCP-Element früher erscheinen kann.
    Magento 2 verfügt über integrierte Konfigurationsoptionen für die CSS- und JavaScript-Minimierung unter Stores > Configuration > Advanced > Developer. Sie können auch das Zusammenführen aktivieren, testen Sie dies jedoch sorgfältig, da das Zusammenführen je nach HTTP/2-Nutzung manchmal die Funktionalität beeinträchtigen oder die Leistung verringern kann. Verwenden Sie Magento CLI-Befehle wie bin/magento config:set dev/css/minify_files und bin/magento config:set dev/js/minify_files.
    Hyvä Theme nutzt standardmäßig die CSS- und JS-Minimierung.

  • Inlining von (kritischem) CSS & Zurückstellen von unkritischem CSS

    Das Inlining von kritischem CSS ist eine leistungsstarke Technik, um CSS als renderblockierende Ressource zu eliminieren. Kritisches CSS ist der minimale Satz an CSS, der zum Stylen des im initialen Viewport sichtbaren Inhalts (above-the-fold) erforderlich ist. Indem dieses CSS direkt im <head> Ihres HTML-Dokuments eingebunden wird, kann der Browser den Inhalt oberhalb des Falzes (der oft das LCP-Element enthält) rendern, ohne auf das Herunterladen externer CSS-Dateien warten zu müssen. Das Identifizieren und Inlinen von kritischem CSS kann ein manueller Prozess sein oder mithilfe verschiedener Tools automatisiert werden.
    Magento verfügt über eine integrierte Funktion "CSS Critical Path" (Stores > Configuration > Advanced > Developer), aber die Generierung von eindeutigem kritischem CSS pro Seite erfordert benutzerdefinierte Lösungen oder Extensions.

    Das Zurückstellen von unkritischem CSS stellt sicher, dass CSS, das nicht für die initiale Ansicht benötigt wird, das Rendering nicht blockiert. Dies kann mithilfe des Tricks media="print" onload="this.media='all'" oder durch asynchrones Laden von CSS mithilfe von JavaScript erreicht werden. Durch das spätere Laden von nicht wesentlichem CSS kann der Browser das Rendern des LCP-Elements priorisieren.

     

    Für Hyvä-Themes geht die Hyvä Inline CSS Extension von JaJuMa diese Optimierung einen Schritt weiter und bietet eine optimierte Lösung für diese entscheidende Optimierung, wodurch die Implementierung erheblich vereinfacht wird. Diese Extension automatisiert die CSS-Optimierung und -Generierung pro Seite/URL vollständig und fügt alle, aber nur verwendete Stile als Inline-CSS hinzu, wodurch die Notwendigkeit, CSS-Dateien zu laden sowie ungenutztes CSS zu laden, überflüssig wird. Beachten Sie, dass die Architektur von Hyvä, die Tailwind CSS nutzt, die CSS-Overhead-Dateigrößen bereits minimiert, was diese Extension noch effektiver macht.
    Das Entfernen von ungenutztem CSS ist ebenfalls entscheidend für die Leistung.

  • Nicht-kritische JS-Dateien zurückstellen

    Ebenso sollten die Attribute async oder defer für nicht-kritische JavaScript-Dateien verwendet werden. Das async-Attribut ermöglicht das Herunterladen des Skripts, ohne das HTML-Parsing zu blockieren, und es wird ausgeführt, sobald es heruntergeladen ist (möglicherweise nicht in der Reihenfolge). Das defer-Attribut lädt das Skript ebenfalls herunter, ohne das Parsing zu blockieren, aber es wird erst in Reihenfolge ausgeführt, nachdem das HTML vollständig geparst wurde. Die Wahl des geeigneten Attributs hängt davon ab, ob das Skript Abhängigkeiten hat oder zu einem bestimmten Zeitpunkt ausgeführt werden muss, z. B. vor oder nachdem das DOM vollständig bereit ist.
    Magento ermöglicht das Verschieben von JS nach unten (Stores > Configuration > Advanced > Developer > JavaScript Settings > Move JS code to the bottom of the page), was ähnlich wie das Zurückstellen wirkt. Testen Sie dies jedoch sorgfältig, da es Skripte beschädigen kann, die auf eine frühe Ausführung angewiesen sind. Schließen Sie bei Bedarf kritische Skripte aus.
    Hinweis: Bei Hyvä Themes sollte diese Option nicht verwendet werden.
    Mehrere Magento 2 Extensions können beim Zurückstellen oder Bündeln von JavaScript helfen.

  • Kritische Ressourcen & Assets vorab laden

    Das Vorabladen von Schlüsselressourcen über Resource Hints mithilfe der Direktive <link rel=preload> ist eine weitere effektive Methode zur Optimierung des kritischen Rendering-Pfads.
    Dies weist den Browser an, wichtige Ressourcen wie Schriftarten, Hero-Images (oft das LCP-Element) und kritische CSS/JS-Dateien mit höherer Priorität abzurufen, noch bevor sie im HTML entdeckt werden. Dadurch wird sichergestellt, dass diese kritischen Assets früher verfügbar sind, was die Ladezeit für das LCP-Element reduziert.
    Zum Beispiel: <link rel="preload" href="/path/to/lcp-image.webp" as="image">
    Verwenden Sie preconnect für kritische Drittanbieter-Domains (z. B. CDNs, Schriftartenanbieter), um den Verbindungsaufbau zu beschleunigen: <link rel="preconnect" href="https://your-cdn.com">.
    Die Preload Critical Resources & Assets Extension von JaJuMa vereinfacht die Implementierung von Resource Hints wie preload und preconnect und ermöglicht eine einfache Konfiguration, welche kritischen Assets priorisiert werden sollen.
    Eine weitere Möglichkeit, die Ladepriorität von Hero-Images / LCP zu erhöhen, ist die Verwendung von fetchpriority="high".
    Zum Beispiel: <img src="/path/to/lcp-image.webp" fetchpriority="high">.
    Der Ultimate Image Optimizer von JaJuMa ermöglicht es, dieses Attribut einfach zu optimierten Bildern hinzuzufügen.

 

Code-Splitting und Progressive Loading-Techniken implementieren

Das sofortige Laden von allem JavaScript, CSS und Inhalt ist nicht immer notwendig oder effizient.
Diese Techniken konzentrieren sich darauf, zunächst nur den notwendigen Code und die Ressourcen bereitzustellen, wodurch die initiale Ladezeit und potenziell der LCP verbessert werden.

  • JS-Bündelung & Code-Splitting

    Das Aufteilen von JavaScript-Bundles beinhaltet das Zerlegen großer JavaScript-Dateien in kleinere, handlichere Teile basierend auf Routen, Seiten oder Komponenten. Dies ermöglicht es dem Browser, nur das JavaScript herunterzuladen und auszuführen, das für die aktuelle Seite benötigt wird, wodurch die initiale Nutzlast reduziert und die Leistung verbessert wird.
    Während Hyväs minimaler JavaScript-Ansatz die Notwendigkeit des Splittings im Vergleich zu Luma von Natur aus eliminiert, kann die Optimierung der JavaScript-Bündelungskonfigurationen von Magento 2 für Luma dennoch Vorteile bringen.
    Das integrierte JavaScript-Bundling von Magento kann manchmal sehr große Dateien erzeugen. Obwohl es darauf abzielt, Anfragen zu reduzieren, kann es sich negativ auf LCP und INP auswirken, wenn das Bundle zu groß ist, das Rendering blockiert oder übermäßige Hauptthread-Arbeit verursacht. Fortgeschrittene Bündelungstools (wie MagePack) oder Strategien, die sich auf das Aufteilen von Bundles nach Seitentyp oder Funktionalität konzentrieren, könnten effektiver sein, insbesondere für komplexe Shops. Ziel ist es, initial nur das notwendige JavaScript für die aktuelle Ansicht zu laden.

  • Lazy Loading

    Diese Technik verzögert das Laden von Ressourcen außerhalb des sichtbaren Bereichs (insbesondere Bilder und Iframes), bis der Benutzer in ihre Nähe scrollt. Dies priorisiert das Laden kritischer Inhalte oberhalb des Falzes zuerst, was die initialen Ladezeiten und den LCP erheblich verbessert, sofern das LCP-Element selbst nicht per Lazy Loading geladen wird. Natives Browser-Lazy-Loading (Attribut loading="lazy" bei <img>- und <iframe>-Tags) wird weitgehend unterstützt und ist einfach zu implementieren (Es ist entscheidend, das Lazy Loading des LCP-Elements selbst zu vermeiden, da dies sein Erscheinen direkt verzögern würde):
    <img src="image.jpg" loading="lazy" width="200" height="200" alt="...">
    Stellen Sie sicher, dass Sie Breiten- und Höhenattribute angeben, um Layoutverschiebungen (CLS) zu verhindern.
    Dies reduziert die initiale Seitenladezeit, indem das Laden von Ressourcen verzögert wird, die nicht sofort sichtbar sind.
    Sowohl die Ultimate Image Optimizer als auch die WebP Optimized Images Extensions von JaJuMa bieten einfach zu konfigurierendes Lazy Loading für Bilder, mit der wesentlichen Option, bestimmte Bilder (wie das LCP-Element) vom Lazy Loading auszuschließen.

  • Platzhalter

    Die Verwendung von leichtgewichtigen Platzhaltern (z. B. einfarbige Blöcke, verschwommene Bilder niedriger Qualität (LQIP) oder das Reservieren von Platz mit CSS) für Bilder, Videos und andere dynamisch geladene Inhalte während des Ladens kann die wahrgenommene Leistung verbessern, die Wartezeit kürzer erscheinen lassen und Layoutverschiebungen (CLS) verhindern.

 

Optimieren typischer LCP-Elemente: Bilder, Banner und Medien

Da das LCP-Element häufig ein Bild, ein Banner oder ein Video-Platzhalter ist, ist die Optimierung dieser Medien-Assets von größter Bedeutung.
Konzentrieren Sie sich über das Lazy Loading von Inhalten außerhalb des sichtbaren Bereichs hinaus auf das LCP-Element selbst:

  • Identifizieren Sie das LCP-Element:
    Verwenden Sie Tools wie PageSpeed Insights oder Lighthouse, um genau zu bestimmen, welches Element auf wichtigen Seitentypen (Startseite, Kategorieseite, Produktseite) das LCP ist.
    Es könnte ein Bannerbild, das Haupt-Produktbild oder sogar ein Textblock sein.
  • Priorisieren Sie das Laden des LCP:
    Stellen Sie sicher, dass das LCP-Bild so früh wie möglich entdeckt und geladen wird.
    • Vermeiden Sie Lazy Loading für das LCP-Bild:
      Wenden Sie niemals loading="lazy" auf Ihr Haupt-LCP-Bild an, wenn es oberhalb des Falzes sichtbar ist.
    • Verwenden Sie Preload:
      Verwenden Sie <link rel="preload" as="image"> für die LCP-Bildquelle (stellen Sie sicher, dass sie mit der verwendeten srcset-Quelle übereinstimmt, falls zutreffend).
    • Verwenden Sie Fetch Priority:
      Fügen Sie fetchpriority="high" zum LCP-<img>-Tag hinzu, um dem Browser dessen Wichtigkeit zu signalisieren.
  • Optimieren Sie Bilddateien:
    • Komprimierung:
      Verwenden Sie effektive Komprimierungstools (wie TinyPNG online oder serverseitige Tools), um die Dateigröße zu reduzieren, ohne die visuelle Qualität zu beeinträchtigen.
      Oder überspringen Sie diesen Schritt besser und wenden Sie die Komprimierung bei der Generierung von Formaten der nächsten Generation wie WebP oder AVIF an - siehe nächster Punkt.
    • Moderne Formate:
      Stellen Sie Bilder in Formaten der nächsten Generation wie WebP oder AVIF bereit, die eine bessere Komprimierung als herkömmliche JPG- oder PNG-Formate bieten.
      Verwenden Sie das <picture>-Element oder Server-Negotiation, um Fallbacks für ältere Browser bereitzustellen.
      Beispiel:
      <picture>
      <source srcset="image.avif" type="image/avif">
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="..." width="1000" height="500" fetchpriority="high">
      </picture>
    • Responsive Bilder (srcset und sizes):
      Stellen Sie Bilder in angemessener Größe basierend auf dem Viewport und der Geräteauflösung des Benutzers mithilfe der Attribute srcset und sizes bereit.
      Vermeiden Sie es, riesige Bilder in Desktop-Größe an mobile Benutzer auszuliefern.
    • Explizite Abmessungen:
      Geben Sie immer Breiten- und Höhenattribute für <img>- und <video>-Tags an, um Layoutverschiebungen (CLS) beim Laden der Medien zu verhindern.
    • LQIP (Low-Quality Image Placeholder):
      Erwägen Sie die Verwendung von LQIP (Low-Quality Image Placeholder), um die wahrgenommene Leistung zu verbessern. Dabei wird eine sehr kleine Version des Bildes mit niedriger Auflösung angezeigt, während das Bild in voller Qualität geladen wird. Dies gibt dem Benutzer sofortiges visuelles Feedback, wodurch sich der Ladevorgang schneller anfühlt. Der Ultimate Image Optimizer bietet verschiedene LQIP-Optionen, einschließlich verschwommener Versionen und farbasierter Platzhalter.

  • Video-Optimierung:
    Wenn ein Video Teil des LCP ist (normalerweise dessen Posterbild), stellen Sie sicher, dass das Posterbild selbst wie jedes andere Bild optimiert ist. Verschieben Sie das Laden des eigentlichen Videoplayer-JavaScripts, bis es benötigt wird.
  • Verwenden Sie ein CDN:
    Liefern Sie Bilder und Videos über ein Content Delivery Network (CDN) für eine schnellere Bereitstellung von Servern, die näher am Benutzer liegen.

Die Extensions Ultimate Image Optimizer von JaJuMa und WebP Optimized Images von JaJuMa können viele dieser Bildoptimierungsaufgaben innerhalb von Magento automatisieren.

JavaScript-Ausführung und Blockierzeit des Hauptthreads reduzieren

Langlaufende JavaScript-Aufgaben, aufgrund von übermäßigem oder ineffizientem JavaScript können den Hauptthread blockieren, das Rendering verzögern (was sich auf LCP auswirkt) und die Seite für Benutzereingaben nicht mehr reagieren lassen (was sich auf INP auswirkt).

 

  • Überprüfung & Entfernung von ungenutztem JS:
    Identifizieren und entfernen Sie jeglichen JavaScript-Code, Bibliotheken oder Drittanbieter-Skripte, die nicht für die Kernfunktionalität der Seite oder für die initiale Ansicht wesentlich sind.
  • Optimieren Sie Drittanbieter-Skripte:
    Laden Sie Drittanbieter-Skripte (Analyse, Chat-Widgets, Anzeigen, Tag-Manager) asynchron (`async`) oder verschieben Sie sie (`defer`). Überlegen Sie, ob sie wirklich bei jedem Seitenaufbau notwendig sind, da sie die Leistung oft erheblich beeinträchtigen. Filtern Sie Skripte, um sie nur bei Bedarf zu laden.
  • Code Splitting:
    Zerlegen Sie große JavaScript-Bundles in kleinere Teile, die nur bei Bedarf geladen werden (z. B. laden Sie JavaScript für ein Popup nur, wenn das Popup ausgelöst wird).
  • Minimieren Sie die Hauptthread-Arbeit: Optimieren Sie komplexe Berechnungen oder langlaufende JavaScript-Aufgaben. Teilen Sie lange Aufgaben (über 50 ms) mithilfe von Techniken wie `setTimeout` in kleinere auf, um die Kontrolle an den Browser zurückzugeben. Erwägen Sie die Verwendung von Web Workern, um Nicht-UI-Aufgaben vom Hauptthread zu verlagern.
  • Reduzieren Sie die DOM-Größe:
    Ein übermäßig großes Document Object Model (DOM) erhöht den Speicherverbrauch und verlangsamt das Rendering und die Skriptinteraktionen. Vermeiden Sie die Erstellung unnötiger DOM-Elemente.
  • Es ist erwähnenswert, dass die Kernphilosophie des Hyvä-Themes, minimales JavaScript (hauptsächlich Alpine.js) zu verwenden, von Natur aus dazu beiträgt, die JavaScript-Ausführungszeit im Vergleich zu traditionelleren Magento-Themes zu reduzieren. Dieser leichtgewichtige Ansatz bietet einen erheblichen Vorteil bei der Minimierung von JavaScript-bedingten Leistungsengpässen. Obwohl JaJuMa keine spezifische Extension für allgemeine JavaScript-Optimierung anbietet, kann die Nutzung ihrer Extensions für CSS-Inlining (Hyvä Inline CSS) und Bildoptimierung (Ultimate Image Optimizer, WebP Optimized Images) indirekt die Arbeitslast des Hauptthreads reduzieren.

 

Back/Forward-Cache, Preloading und Prerendering für sofortige Ladevorgänge nutzen

Über die Optimierung des initialen Ladens hinaus verbessert die Beschleunigung nachfolgender Navigationen die gesamte Benutzererfahrung und die Core Web Vitals-Felddaten erheblich:

 

  • Browser-Caching:
    Stellen Sie sicher, dass statische Assets (CSS, JS, Bilder, Schriftarten) mit geeigneten Cache-Headern (z. B. `Cache-Control: max-age=...`) ausgeliefert werden, damit Browser sie lokal speichern und bei nachfolgenden Besuchen nicht erneut herunterladen müssen. Konfigurieren Sie Cache-Lebensdauern effektiv.
  • Back/Forward Cache (BFCache):
    Diese Browser-Optimierung ermöglicht das sofortige Laden zuvor besuchter Seiten bei Verwendung der Zurück/Vorwärts-Schaltflächen. Sicherzustellen, dass Ihre Seiten BFCache-kompatibel sind (Vermeidung von `unload`-Event-Listenern usw.), kann die Navigationsgeschwindigkeit erheblich verbessern. Die Back Forward Cache (bfcache) Extension für Magento 2 hilft bei der Aktivierung des BFCache, gewährleistet die Kompatibilität und vermeidet UX-Probleme sowie die Anzeige privater/veralteter Daten.
  • Preloading/Prerendering nächster Navigationen:
    Techniken wie `<link rel="prefetch">` oder die neuere Speculation Rules API (nur Chromium-Browser) ermöglichen es dem Browser, während Leerlaufzeiten mit dem Abrufen oder sogar dem vollständigen Rendern von Seiten zu beginnen, die der Benutzer wahrscheinlich als Nächstes besuchen wird. Dies kann dazu führen, dass sich nachfolgende Seitenaufbauten augenblicklich anfühlen. JaJuMa bietet Extensions wie Smart Speculation Rules und Page Preload an, um diese Strategien einfach in Magento 2 zu implementieren.
  • Preloading über Resource Hints:
    Wie bereits erwähnt, ist das Vorabladen von Schlüsselressourcen mit <link rel=preload> entscheidend, um sicherzustellen, dass kritische Assets wie das LCP-Bild oder die Schriftart frühzeitig abgerufen werden. Die Preload Critical Resources & Assets Extension von JaJuMa vereinfacht die Implementierung dieser Technik.
  • Service Worker:
    Service Worker können Netzwerkanfragen abfangen und vorgecachte oder vorgerenderte Antworten bereitstellen, was zu schnellerem Laden führt, insbesondere bei nachfolgenden Besuchen. 
    Obwohl die Implementierung von Service Workern komplexer sein kann, bieten sie erhebliche Leistungsvorteile.

 

Webfonts für schnelleres Textrendering optimieren

Wenn Ihr LCP-Element Text enthält, der mit einer Web-Schriftart gestaltet ist, oder wenn Schriftarten Layoutverschiebungen (CLS) verursachen, ist die Optimierung des Schriftartenladens unerlässlich.

  • Schriftarten-Ladestrategie:
    Verwenden Sie `font-display: swap;` in Ihren `@font-face`-Deklarationen. Dies weist den Browser an, Text zunächst mit einer Fallback-Systemschriftart anzuzeigen und dann zur benutzerdefinierten Schriftart zu wechseln, sobald diese geladen ist. Dies vermeidet unsichtbaren Text (FOIT) und stellt sicher, dass der Inhalt schnell lesbar ist, was den wahrgenommenen LCP für Textelemente verbessert. Es hilft auch, CLS zu verhindern, das durch Schriftartenwechsel verursacht wird.
  • Schriftarten vorab laden:
    Laden Sie kritische Schriftartdateien (insbesondere im WOFF2-Format) mithilfe von `<link rel="preload" as="font" type="font/woff2" crossorigin>` vorab.
    Konzentrieren Sie sich auf die Schriftarten und Schriftschnitte , die für Inhalte oberhalb des Falzes benötigt werden.
    Dies kann einfach mit der Preload Critical Resources & Assets Extension von JaJuMa konfiguriert werden.
  • Schriftartenformate:
    Verwenden Sie moderne, effiziente Schriftartenformate wie WOFF2, das die beste Komprimierung bietet.
  • Selbst gehostete Schriftarten vs. Drittanbieter:
    Das Hosten von Schriftarten auf Ihrem eigenen Server (und die Bereitstellung über Ihr CDN) bietet oft mehr Kontrolle und potenziell bessere Leistung als die Abhängigkeit von Drittanbieter-Schriftartdiensten (wie Google Fonts), insbesondere wenn Sie das Caching optimieren und ein CDN verwenden. Erwägen Sie die Verwendung von Systemschriftarten (siehe Tipp unten), um das Laden von Web-Schriftarten vollständig zu vermeiden, wenn das Design dies zulässt.
  • Schriftarten unterteilen (Subsetting):
    Wenn Sie benutzerdefinierte Schriftarten verwenden, unterteilen Sie diese so, dass nur die tatsächlich auf Ihrer Website verwendeten Zeichen (Glyphen) enthalten sind, wodurch die Dateigröße erheblich reduziert wird.
  • Variable Schriftarten:
    Erwägen Sie die Verwendung variabler Schriftarten, die mehrere Schriftschnitte und Stile in einer einzigen Datei enthalten können, was potenziell zu kleineren Dateigrößen im Vergleich zum Laden einzelner Schriftartdateien für jeden Schriftschnitt und Stil führt.
awesomeicons6/solid/lightbulb
TIPP:
Vermeiden Sie nach Möglichkeit Web-Schriftarten/Schriftartdateien vollständig.
Verwenden Sie stattdessen Systemschriftarten, die im Betriebssystem des Clients verfügbar sind,
siehe z. B. https://modernfontstacks.com/.
Anstelle von Icon-Schriftarten verwenden Sie Inline-SVG-Icons, die einfach hinzugefügt werden können,
z. B. mit unseren kostenlosen Icon-Pack-Extensions für Hyvä Theme

LCP im Feld und im Labor überwachen und messen

Kontinuierliche Überwachung und Messung sind entscheidend für die Identifizierung von LCP-Problemen und die Verfolgung der Auswirkungen Ihrer Optimierungsbemühungen.

Verfolgen Sie kontinuierlich die Auswirkungen neuer Funktionen oder Leistungsoptimierungen auf Ihren LCP-Wert. Dies hilft Ihnen zu verstehen, was funktioniert und was nicht.
Analysieren Sie das LCP-Element selbst, um zu verstehen, was zur Ladezeit beiträgt. Konzentrieren Sie Ihre Optimierungsbemühungen auf dieses spezifische Element.
Denken Sie daran, Felddaten gegenüber Labordaten zu priorisieren, da Felddaten die tatsächliche Benutzererfahrung widerspiegeln. Während Labor-Tools für das Debugging wertvoll sind, können die realen Bedingungen erheblich variieren.

 

  • Felddaten - Real User Monitoring (RUM):
    Nutzen Sie RUM (Real User Monitoring)-Tools, um reale LCP-Daten von Ihren tatsächlichen Benutzern zu sammeln. Dies liefert wertvolle Einblicke, wie Ihre Website unter realen Bedingungen funktioniert. Die Real User Monitoring (RUM) Extension (derzeit in Beta) und das Real User Monitoring (RUM) Power Toy von JaJuMa zielen darauf ab, diese entscheidenden Felddaten direkt in der Magento-Umgebung bereitzustellen, zusammen mit Details und Anleitungen zur Identifizierung und Priorisierung weiterer Optimierungen.

  • Labordaten - Labor-Tools:
    Nutzen Sie Labor-Tools wie Lighthouse und Chrome DevTools, um LCP während der Entwicklung und des Testens in einer kontrollierten Umgebung zu messen.
    Diese Tools liefern detaillierte Leistungsberichte und Empfehlungen für Verbesserungen.

Die ultimative Magento 2 Luma & Hyvä LCP Optimierungs-Checkliste mit JaJuMa Extensions

Nachfolgend finden Sie eine leicht lesbare Checklisten-Tabelle, die wichtige Optimierungsbereiche zusammenfasst und JaJuMa-Extensions hervorhebt, die automatisierte oder verbesserte Lösungen bieten, um Ihnen zu helfen, die empfohlenen Optimierungen schnell zu überprüfen und umzusetzen:

 

Optimierungs-
Technik
Magento 2 Implementierung JaJuMa Extension(s) Priorität
TTFB optimieren Optimiertes Hosting wählen, CDN konfigurieren, Magento & Varnish/Redis Caching aktivieren, Redirects minimieren, Drittanbieter-Extensions/Themes prüfen Back/Forward Cache,
Speculation Rules API und
Page Preload 
(für nachfolgende Ladevorgänge)
Hoch
CSS & JS
minimieren
Luma: Minifizierung im Magento Admin aktivieren
Hyvä: Build-Tools für Hyvä verwenden
N/A Hoch
(Kritisches) CSS
inlinieren
Luma: Kritisches CSS manuell oder mit Online-Tools identifizieren und inlinieren.
Hyvä: Alles verwendete CSS inlinieren
Hyvä Inline CSS

Hoch

 

Nicht-kritisches
CSS verzögern
Luma: Media-Attribut oder JavaScript-basiertes Laden verwenden.
Hyvä: Nicht notwendig
N/A Mittel
Nicht-kritisches
JS async/defer
async- oder defer-Attribute in <script>-Tags verwenden, Magento 2 Extensions dafür in Betracht ziehen N/A Mittel
Wichtige
Ressourcen
vorladen
<link rel=preload> für LCP-Bild, Fonts, kritisches CSS/JS verwenden,
fetchpriority="high" für Hero-Bilder
Preload Critical Resources & Assets
und
Ultimate Image Optimizer
Hoch
Nicht-LCP
Bilder
lazy laden
Lazy Loading mit Browser-APIs implementieren Ultimate Image Optimizer, WebP Optimized Images (mit LCP-Ausschluss) Hoch
Next-Gen
Bildformate
verwenden
Bilder in WebP und AVIF konvertieren Ultimate Image Optimizer, WebP Optimized Images Hoch
Responsive
Bilder
srcset- und <picture>-Elemente mit responsiven Bildversionen verwenden Ultimate Image Optimizer Hoch
Bildbreite/-höhe
angeben
width- und height-Attribute zu <img>-Tags hinzufügen Ultimate Image Optimizer Hoch
LQIP
erwägen
Low-Quality Image Placeholders implementieren Ultimate Image Optimizer Mittel
Ungenutztes JS
prüfen/entfernen
Browser-Entwicklertools verwenden, um unnötigen Code zu identifizieren und zu entfernen N/A Mittel
Lange JS-Aufgaben
aufteilen
Code refaktorieren, um lange laufende Aufgaben aufzuteilen N/A Mittel
Webfonts
optimieren
Fonts selbst hosten, font-display: swap verwenden, kritische Fonts vorladen, Fonts subsetzen.
Besser: Webfonts vermeiden, Systemfonts verwenden.
SVG-Icons anstelle von Icon-Fonts verwenden
Preload Critical Resources & Assets
Icon Pack Extensions für Hyvä Theme
Hoch
Bfcache/
Prefetch/
Prerender
Links
Speculation Rules für Chromium-Browser implementieren
Page Preloading-Techniken für andere Browser implementieren
Back/Forward Cache,
Smart Speculation Rules und
Page Preload 
Hoch
LCP
überwachen
(Feld & Labor)
Tools wie Lighthouse, Chrome DevTools + Real User Monitoring verwenden Real User Monitoring (RUM),
Real User Monitoring (RUM) Power Toy,
Core Web Vitals Power Toy
Hoch

Deinen Magento-Shop auf Hochtouren bringen: Wie JaJuMa Extensions die LCP- & CWV-Optimierung vereinfachen

Während viele LCP -und Core Web Vitals-Optimierungen manuell mithilfe nativer Magento-Funktionen oder benutzerdefinierten Codes durchgeführt werden können, erfordert dies oft erhebliche technische Expertise, Entwicklungszeit und fortlaufenden Aufwand, um sie effektiv zu implementieren und zu warten. Die Suite von Performance Optimierungs Extensions von JaJuMa für Magento 2 (kompatibel mit Luma und Hyvä, einige speziell für Hyvä entwickelt) automatisiert und vereinfacht viele dieser kritischen Aufgaben und bietet Komfort, erweiterte Funktionen und schnellere Ergebnisse im Vergleich zu manuellen Methoden:  

 

Der Ultimate Image Optimizer zeichnet sich als umfassende Lösung für bildbezogene LCP-Optimierungen aus. Er automatisiert die Konvertierung von Bildern in Next-Generation-Formate wie WebP und AVIF, generiert responsive Bilder für verschiedene Geräte und stellt sicher, dass wichtige Breiten- und Höhenattribute automatisch hinzugefügt werden, um Layoutverschiebungen zu verhindern. Darüber hinaus bietet er eine integrierte Lazy-Loading-Funktionalität für Bilder außerhalb des sichtbaren Bereichs und gleichzeitig die wichtige Option, Ihr LCP-Element vom Lazy Loading auszuschließen, um sicherzustellen, dass es sofort geladen wird. Die Erweiterung unterstützt auch das Laden mit hoher Priorität für designierte LCP-Bilder und bietet verschiedene Low-Quality Image Placeholder (LQIP)-Optionen zur Verbesserung der wahrgenommenen Leistung.

Für Nutzer des Hyvä Themes bietet die Hyvä Inline CSS Extension eine unkomplizierte Möglichkeit, rendering-blockierendes CSS anzugehen. Durch die Automatisierung des Prozesses der Identifizierung und des Inlinierens von kritischem CSS eliminiert diese Extension eine komplexe manuelle Aufgabe und stellt sicher, dass das gesamte und nur das für das Rendern einer Seite notwendige CSS direkt im HTML ausgeliefert wird, was zu einem schnelleren anfänglichen Rendering und einem verbesserten LCP führt.

Obwohl sie den anfänglichen LCP nicht direkt beeinflussen, tragen Extensions wie Back/Forward CacheSpeculation Rules API und Page Preload zu einer deutlich schnelleren und nahtloseren Nutzererfahrung bei, indem sie die Navigation beschleunigen. Dies verbessert die allgemeine Wahrnehmung der Leistung Ihres Shops und wirkt sich direkt positiv auf die Feldwerte der Core Web Vitals aus.

 

Die Preload Critical Resources & Assets Extension vereinfacht die Implementierung des Ressourcen-Preloadings, einer wichtigen Technik zur Verbesserung des LCP. Mit dieser Extension können Sie einfach konfigurieren, welche kritischen Assets, wie z. B. Ihr LCP-Bild, wichtige Schriftarten oder kritische CSS- und JavaScript-Dateien, vorgeladen werden sollen, um sicherzustellen, dass sie vom Browser so früh wie möglich abgerufen werden. Diese Extension ermöglicht auch die Konfiguration von DNS-Prefetch und Preconnect für Drittanbieter-Domains.

Schließlich liefert die Real User Monitoring (RUM) Extension wertvolle Einblicke in die LCP-Performance, die Core Web Vitals sowie andere Performance-KPIs und Fehler Ihres Shops, so wie sie von echten Nutzern erlebt werden, und ermöglicht Ihnen so datengestützte Entscheidungen für weitere Optimierungen.

Durch die Nutzung dieser Tools können Sie erhebliche LCP -und allgemeine Core Web Vitals -Verbesserungen effizienter erzielen und Zeit gewinnen, um sich auf andere Aspekte Ihres Geschäfts zu konzentrieren. Sie bieten einen optimierten Weg im Vergleich zu potenziell komplexer manueller Konfiguration und Entwicklung.

JaJuMa LCP Optimierungs-Extensions Fallstudien & Showcases

Verlassen Sie sich nicht nur auf unser Wort! Sehen Sie, wie unsere Extensions echten Magento-Shops geholfen haben, dramatische LCP- und allgemeine Performanceverbesserungen zu erzielen.
Sehen Sie sich unsere Fallstudien/Showcases unten an, um unsere Performance-Optimierungs-Extensions für Top-LCP-Werte in Aktion zu sehen.
Ein Largest Contentful Paint von 0,8 Sekunden sowohl für einen neu gestarteten Shop als auch für eine Migration von Luma zu Hyvä ist beeindruckend, oder?

 

LCP Optimierungs-Showcase:
Deutliche Performance-Steigerungen für Blumenhändler mit Hyvä

Herausforderung: Projekt-Rettung Luma zu Hyvä Migration. Erreichung von Top Largest Contentful Paint und User-Experience mit einem atemberaubend niedrigen Budget.

60 Tage auf Hyvä: Von der Projektrettung zu Super-Performance & Erfolg

Lösung: Implementierung von JaJuMas Suite von Largest-Contentful-Paint-Optimierungs-Extensions und individuellen Performance-Optimierungs-Services.

Ergebnisse:
  • CLS
    -100% 0.0
  • LCP
    -50% 0.8
  • FCP
    -46% 0.7
  • TTFB
    -55% 0.4
Lesen Sie die ganze Erfolgsgeschichte 'Accelerated to Success'

LCP Optimierungs-Showcase:
Schneller Hyvä Magento-Launch für Weihnachtsstollen.de

Herausforderung: Launch eines Hyvä Magento-Shops in Rekordzeit. Mit begrenztem Budget, ohne Kompromisse, sondern 'über 'nur grüne' Core Web Vitals hinaus gehen', und außergewöhnliche Largest Contentful Paint Optimierung direkt vom Launch-Tag an sicherstellen.

Ein leckeres E-Commerce-Rezept: In wenigen Wochen einen super-schnellen Magento-Shop backen (mit Hyvä & JaJuMa)

Lösung:Nutzung von JaJuMas sofort einsatzbereiten Largest Contentful Paint-Optimierungs-Extensions und individuellen Performance-Optimierungs-Services.

Ergebnisse:
  • CLS
    0
  • LCP
    0.8s
  • FCP
    0.7s
  • TTFB
    0.4s
Learn How To Bake A Super Fast Hyvä Store in Weeks

FAQ: Ihre Fragen zur Magento 2 LCP Optimierung beantwortet

Was ist ein guter LCP-Wert für einen E-Commerce-Shop?

Ein guter LCP-Wert liegt bei 2,5 Sekunden oder weniger. Das Anstreben dieses Schwellenwerts gewährleistet eine schnelle und reaktionsschnelle Erfahrung für Ihre Kunden, was zu einer besseren Interaktion und besseren SEO-Rankings führen kann.

Für eine wirklich herausragende Nutzererfahrung empfehlen wir, einen deutlich niedrigeren Wert anzustreben.

Wie finde ich heraus, welches Element der LCP auf meiner Seite ist?

Sie können Browser-Entwicklertools wie Google Lighthouse (innerhalb von Chrome DevTools oder PageSpeed Insights) oder den Performance-Tab in Chrome DevTools verwenden, um das LCP-Element zu identifizieren. Diese Tools heben das spezifische Element hervor, dessen Laden am längsten dauert.

Es wird jedoch empfohlen, Felddaten gegenüber Labordaten zu priorisieren und ein RUM-Tool (Real User Monitoring) zu nutzen, um Daten und Erkenntnisse von echten Kunden zu sammeln.

Ist LCP wichtiger als andere Core Web Vitals?

LCP (Largest Contentful Paint), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) sind alles wichtige Core Web Vitals, die zur gesamten Nutzererfahrung beitragen. LCP konzentriert sich auf die Ladeleistung, was oft der erste Eindruck ist, den ein Nutzer von Ihrer Seite hat. Die Optimierung aller Core Web Vitals ist entscheidend für eine gesunde Website.

Wird die Verwendung von Hyvä mir automatisch einen guten LCP-Wert liefern?

Hyvä bietet mit seiner schlanken Architektur eine fantastische Grundlage für Performance. Allerdings ist in der Regel eine weitere Optimierung basierend auf Ihren spezifischen Inhalten, Bildern und Ihrer Konfiguration notwendig, um einen optimalen LCP-Wert zu erreichen und Ihre Google-Rankings und die Nutzererfahrung wirklich zu maximieren.

Wie kann ich die Auswirkungen meiner LCP-Optimierungen testen?

Verwenden Sie sowohl Labortools wie Lighthouse als auch Felddaten von Tools wie den RUM-Erweiterungen von JaJuMa, um die Auswirkungen Ihrer Optimierungen zu messen. Regelmäßige Überwachung und Tests Ihrer Performance helfen Ihnen zu erkennen, was funktioniert und was weiterer Anpassung bedarf.

Sind die JaJuMa Extensions mit der neuesten Version von Magento 2 und Hyvä kompatibel?

Ja, JaJuMa ist bestrebt, seine Extensions mit den neuesten Magento- und Hyvä-Versionen auf dem neuesten Stand zu halten.

Was sind die häufigsten Fehler, die man bei der Optimierung des LCP vermeiden sollte?

Häufige Fehler sind das Lazy Loading des LCP-Elements, die unzureichende Optimierung von Bildern, das Vorhandensein von zu vielen rendering-blockierenden Ressourcen (CSS und JavaScript) und die Vernachlässigung der TTFB/Server-Performance.

Wie oft sollte ich meinen LCP-Wert überwachen?

Sie sollten Ihren LCP-Wert regelmäßig überwachen, insbesondere nach der Bereitstellung von Codeänderungen oder neuen Funktionen. Die Beobachtung oder das Einrichten von Warnmeldungen in Ihren Überwachungstools kann Ihnen helfen, Performance-Verschlechterungen schnell zu erkennen.

Welche Rolle spielen Drittanbieter-Extensions beim LCP?

Drittanbieter-Extensions können manchmal Performance-Overhead verursachen, einschließlich der Erhöhung der TTFB und dem Hinzufügen von rendering-blockierenden Ressourcen. Es ist wichtig, Ihre Extensions zu überprüfen und alle zu entfernen oder zu ersetzen, die Ihren LCP erheblich beeinträchtigen.

Wie unterscheidet sich der mobile LCP vom Desktop-LCP, und welche spezifischen Überlegungen gibt es für Mobilgeräte?

Mobiler LCP kann aufgrund langsamerer Netzwerkverbindungen und weniger leistungsstarker Geräte oft langsamer sein. Die Optimierung von Bildern für kleinere Bildschirme (responsive Bilder), die Minimierung der anfänglichen Nutzlast und die Sicherstellung eines Mobile-First-Designs sind entscheidende Überlegungen für mobilen LCP.

Was ist die häufigste Ursache für einen schlechten LCP in Magento?

Zu den häufigsten Ursachen gehören langsame Server-Antwortzeiten (TTFB), große, nicht optimierte Bilder (insbesondere Hero-Banner), renderblockierendes CSS/JavaScript (besonders in Luma) und ineffizientes Laden von Schriftarten.

Wie messe ich den LCP in Magento 2?

Nutzen Sie Tools wie Google PageSpeed Insights (online) oder Lighthouse (in den Chrome DevTools). Diese Tools analysieren Ihre Seite und melden die LCP-Zeit und identifizieren dabei auch das LCP-Element.

Kann ich den LCP allein durch ein Upgrade meines Hostings verbessern?

Ein Hosting-Upgrade kann den TTFB, einen Schlüsselfaktor für den LCP, signifikant verbessern. Jedoch sind Frontend-Optimierungen (Bildkomprimierung, kritisches CSS, zurückgestelltes JS) in der Regel weiterhin notwendig für optimale Ergebnisse. Normalerweise ist es eine Kombination von Maßnahmen.

Wie verbessert Hyvä den LCP im Vergleich zu Luma?

Hyvä ersetzt Lumas schwergewichtiges JavaScript (KnockoutJS, RequireJS) und großes CSS durch leichtgewichtige Alternativen (Alpine.js, Tailwind CSS), wodurch renderblockierende Ressourcen drastisch reduziert und die LCP-Zeiten von Haus aus verbessert werden.

Ersetzen JaJuMa-Extensions die Notwendigkeit eines schnellen Themes wie Hyvä?

Unsere Extensions funktionieren sowohl mit Luma als auch mit Hyvä, um spezifische Bereiche zu optimieren. Obwohl sie die Leistung von Luma erheblich verbessern können, liefert die Kombination mit einem grundlegend schnellen Theme wie Hyvä typischerweise die absolut besten Ergebnisse, da Hyvä eine überlegene Leistungsgrundlage bietet.

Key Takeaways

  • Core Web Vitals (LCP, INP, CLS) sind entscheidend: Sie beeinflussen direkt die Benutzererfahrung, SEO-Rankings und Konversionsraten für Magento-Shops.
  • Hyvä-Vorteil: Magentos Luma-Theme stellt oft Herausforderungen bei den Core Web Vitals dar; Hyvä bietet aufgrund seiner leichtgewichtigen Architektur eine schnelle Grundlage für die LCP- & CWV-Optimierung.
  • Wichtige LCP-Faktoren: Beinhalten TTFB, renderblockierende Ressourcen, Ressourcenladezeiten (insbesondere Bilder/Banner), JS-Ausführung (Hauptthread-Arbeit) und Schriftartenladen.
  • LCP optimieren: Durch Serververbesserungen (Hosting, CDN, Caching wie Varnish), Optimierung des kritischen Pfads (Minimieren, Inline-CSS, JS zurückstellen, Preload), priorisiertes Laden von LCP-Elementen (`Workspacepriority`, kein Lazy Load), Medienoptimierung (Formate, Komprimierung, responsive Bilder, Lazy Load für Offscreen-Inhalte) und Schriftartenstrategien (`font-display: swap`, Preload).
  • Viele Optimierungen für LCP wirken sich auch positiv auf INP aus: Z.B. Reduzierung der JS-Ausführung und CLS (z.B. Bildabmessungen, Schriftartoptimierung).
  • JaJuMa Power: Manuelle Optimierung ist möglich, kann aber komplex sein; JaJuMa-Extensions können viele LCP/Performance-Best-Practices und Optimierungsaufgaben für Luma und Hyvä automatisieren und vereinfachen.
  • Fokus auf TTFB: Eine schnelle Serverantwort ist für einen guten LCP unerlässlich.
  • Bilder optimieren: Verwenden Sie Next-Gen-Formate, responsive Bilder und vermeiden Sie Lazy Loading für das LCP-Element.
  • Blockierende Ressourcen minimieren: Inline (kritisches) CSS und Zurückstellen von nicht-kritischem CSS/JS.
  • Regelmäßig überwachen: Verfolgen Sie Ihren LCP-Wert mithilfe von Feld- (RUM) und Labor-Tools (Lighthouse), um sicherzustellen, dass Ihre Optimierungen wirksam sind und um gute Werte beizubehalten.

 

Fazit

Die Optimierung des Largest Contentful Paint und aller Core Web Vitals ist für ernsthafte Magento 2-Shopbetreiber nicht länger optional.
Es ist ein grundlegender Aspekt für die Bereitstellung einer positiven Benutzererfahrung, die Maximierung der Konversionen und das Erreichen einer starken SEO-Leistung.
Obwohl der Weg komplex erscheinen mag, insbesondere mit dem Luma-Theme, kann das Verständnis der Schlüsselfaktoren und die Implementierung gezielter Strategien – potenziell beschleunigt durch Tools wie JaJuMa-Extensions und die Leistungsgrundlage von Hyvä-Themes – zu signifikanten Verbesserungen führen.

 

Beginnen Sie damit, Ihre aktuellen Core Web Vitals zu messen, identifizieren Sie Ihre größten Engpässe (achten Sie dabei genau auf LCP, INP und CLS) und implementieren Sie die in diesem Leitfaden beschriebenen Strategien. Denken Sie daran, dass Leistungsoptimierung ein fortlaufender Prozess ist. Überwachen, testen und verfeinern Sie Ihren Ansatz also kontinuierlich, um Ihren Magento 2-Shop blitzschnell laufen zu lassen und eine exzellente Benutzererfahrung zu bieten, die den Standards von Google entspricht.

 

Wir ermutigen Sie, die in der Checkliste beschriebenen Schritte zu unternehmen und zu erkunden, wie JaJuMa-Extensions Ihnen helfen können, Ihren Magento 2-Shop mit Hyvä oder Luma zu beschleunigen.
Besuchen Sie die JaJuMa-Website unter Performance Optimierungs Extensions , um mehr zu erfahren und noch heute mit der Optimierung der Leistung Ihres Shops zu beginnen.

 

Bereit, die Geschwindigkeit und CWV Ihres Magento 2 Shops zu steigern?

Möchten Sie Top-Google-Rankings und eine exzellente Benutzererfahrung erzielen?
Beginnen Sie noch heute mit der Implementierung dieser LCP-Optimierungstechniken und sehen Sie den Unterschied in Ihrer Benutzererfahrung und SEO!
Entdecken Sie die Performance Optimierungs Extensions von JaJuMa oder kontaktieren Sie uns für professionelle Magento Performance-Tuning-Services:

Von der Entwicklung leistungsstarker Shops über die Optimierung Ihrer Performance bis hin zur Anpassung der Extensions Ihres Systems – JaJuMa bietet umfassende Magento-Services, die Ihr Geschäft voranbringen. Lassen Sie uns Ihre Ziele gemeinsam erreichen! Kontaktieren Sie uns für eine kostenlose & unverbindliche Beratung.