Mantys Core
Gründer von MantysLAB

Maxime

Maxime hat MantysLAB gegründet und entwickelt Mantys Core, ein cloudbasiertes Performance-Plugin für WordPress.

Mit Mantys Media, seiner freiberuflichen Tätigkeit, arbeitet er direkt an WordPress-Websites von Kunden: Page Builder wie Divi und Elementor, WooCommerce-Shops, Tracking- und Consent-Setups.

Die Leitfäden auf dieser Website stammen aus dieser Arbeit: Probleme auf echten Websites, im Browser gemessen, und die Lösungen, die gehalten haben.

Fachgebiete

  • Core Web Vitals
  • WordPress
  • Critical CSS
  • JavaScript
  • Cache
  • WebP
  • Divi
  • Elementor
  • WooCommerce

Leitfäden von Maxime

Core Web Vitals · 11 min

WordPress-Website beschleunigen: wo Sie anfangen und in welcher Reihenfolge

WordPress zu beschleunigen ist keine Liste von dreißig Tipps, die man auf einmal aktiviert, sondern eine Diagnose: die Daten Ihrer Besucher lesen, herausfinden, welche Metrik auf welcher Seitenvorlage durchfällt, die Ursache in der richtigen Reihenfolge beheben (Server, Bilder, CSS, JavaScript) und immer nur eine Sache ändern.

JavaScript · 9 min

JavaScript-Verzögerung hat meine Website kaputt gemacht: So finden Sie das schuldige Skript

Das Verzögern von JavaScript macht eine Website auf fünf mechanische Arten kaputt (eine fehlende Abhängigkeit, ein bereits ausgelöstes Seitenereignis, ein verschluckter erster Klick, eine an einem Skript hängende Kette, ein nie gezählter Besucher), und jede hinterlässt eine Signatur, die Sie im Browser lesen können. So nehmen Sie ein einzelnes Skript aus, statt die ganze Option abzuschalten.

Core Web Vitals · 8 min

Layout-Verschiebungen (CLS) auf Divi und Elementor beheben

Auf Page Buildern kommen die meisten Layout-Verschiebungen aus sechs Quellen (Bilder ohne Abmessungen, Styles, die nach dem ersten Paint ankommen, Webfonts, die ausgetauscht werden, per Skript hinzugefügte Header und Banner, Slider vor ihrem Start, Embeds), und jede wird behoben, indem Sie den Platz reservieren, bevor der Inhalt ankommt.

Bilder · 7 min

Mein Hero ist ein Hintergrundbild: Warum es den LCP bremst und wie Sie das beheben (Divi, Elementor)

Ein CSS-Hintergrundbild ist für den Browser unsichtbar, bis das Stylesheet heruntergeladen und angewendet ist, es hat kein srcset, und Builder laden es oft per JavaScript mit Lazy Loading, also startet der Hero spät; die beste Lösung ist ein echtes Bild, die zweitbeste ein Preload pro Gerät und kein Lazy Loading für diesen Abschnitt.

Bilder · 7 min

Das LCP-Bild ist auf Mobil und Desktop nicht dasselbe: So laden Sie das richtige per Preload

Wenn sich das größte Bild zwischen Smartphone und Desktop unterscheidet, lässt ein einziger Preload eines der Geräte ein Bild herunterladen, das es nicht anzeigt, oder den Hero doppelt herunterladen. Die Lösung ist ein Preload pro Gerät, mit demselben srcset und denselben sizes wie das Bild, direkt nach dem Viewport-Tag platziert.

Core Web Vitals · 8 min

PageSpeed und Search Console widersprechen sich: Labordaten und Felddaten richtig lesen

Der PageSpeed-Wert ist ein einziger simulierter Besuch auf einem bewusst langsamen Smartphone in einem bewusst langsamen Netz, während Search Console zeigt, was Ihre echten Besucher über 28 Tage erlebt haben; deshalb können sich beide in beide Richtungen widersprechen: grüne Labordaten mit schlechten Felddaten, wenn Ihre Zielgruppe langsamer ist als der Test, und mittelmäßige Labordaten mit grünen Felddaten, wenn sie schneller ist.

CSS · 8 min

„Ungenutztes CSS entfernen“ hat mein Layout kaputt gemacht: So finden Sie die fehlenden Styles

Ein Used-CSS-Durchlauf behält nur die Regeln, die er auf einer einzigen Momentaufnahme der Seite in Gebrauch gesehen hat. Alles, was in diesem Moment nicht auf dem Bildschirm war (ein geöffneter Zustand, das andere Gerät, später geladene Inhalte, eine Icon-Schrift, eine Einblendanimation), verliert seine Styles, und jede dieser Lücken hat eine Signatur, die Ihnen sagt, welche Regel Sie zurückholen müssen.

JavaScript · 8 min

So laden Sie Axeptio schneller (ohne die Einwilligung zu gefährden)

Ein Axeptio-Banner kommt selten wegen Axeptio selbst zu spät, sondern weil seine Kette von Anfragen (Einstellungen, SDK, Projektkonfiguration, Schrift) hinter allem anderen wartet, was die Seite lädt. Die Lösungen: die Konkurrenz verringern, das Consent-Tool nie verzögern, es früh laden, die ungenutzte Schrift weglassen und es anpassen, ohne gegen sein Markup zu kämpfen.

Caching · 11 min

So beschleunigen Sie einen WooCommerce-Shop, ohne den Warenkorb kaputt zu machen

Ein WooCommerce-Shop besteht aus zwei Websites in einer, einem Katalog, der gecacht und konsequent optimiert werden kann, und einer Transaktion (Warenkorb, Kasse, Kundenkonto), die nie gecacht oder gekürzt werden darf. Ein schneller Shop beginnt also damit, diese Grenze zu ziehen, und behebt dann auf beiden Seiten Cache, Cart Fragments, Produktbilder und Skripte.

Bilder · 8 min

Inline SVG: perfekt für ein Icon, Gift für eine Illustration

Ein SVG ist nicht nur eine einzige Art von Bild. Ein kleines Icon inline ist ideal, eine schwere Illustration inline bläht Ihre Seite auf, und ein Rasterfoto, das in einem SVG versteckt ist, ist das Schlimmste von allen dreien. So unterscheiden Sie sie und wählen jedes Mal das richtige Format.

JavaScript · 8 min

So wählen Sie ein Theme aus und erkennen jene, die alles in eine einzige riesige JavaScript-Datei packen

Noch vor Ihrer ersten Zeile Inhalt entscheidet Ihr Theme, was ein Browser herunterladen, parsen und ausführen muss. Die Entscheidung mit dem größten Gewicht: wie es sein JavaScript ausliefert. Als aufteilbares Set kleiner Dateien oder als ein einziger riesiger Block, der die gesamte Seite an ihren langsamsten Teil kettet.

CSS · 6 min

Warum verschwindet mein WooCommerce Mini-Warenkorb, wenn ich Remove Unused CSS aktiviere?

Ihr Mini-Warenkorb-Panel ist versteckt, bis jemand es hovert, sodass ein used-CSS-Durchlauf seine Styles entfernt und eine JavaScript-Verzögerung das Öffnen verhindert. Es funktioniert wieder, sobald Sie seine Styles in einer Safelist behalten und seine Skripte, cart fragments eingeschlossen, laufen lassen.

Core Web Vitals · 9 min

So beschleunigen Sie eine Divi-Website und verbessern ihre Core Web Vitals (Schritt für Schritt)

Eine Divi-Website kann schnell sein, wenn Sie in der richtigen Reihenfolge optimieren, zuerst Bilder, dann CSS, dann JavaScript, und mit den Hebeln beginnen, die nichts kaputt machen können, bevor Sie die anfassen, die es können.

JavaScript · 5 min

Warum öffnet sich mein Burger-Menü erst beim zweiten Klick?

Wenn Sie ein JavaScript delay aktiviert haben (Skripte werden beim ersten Klick oder nach einem Timer geladen), weckt der allererste Tap auf das Burger-Menü nur das Laden der Skripte, er öffnet das Menü nicht. Das Menü reagiert erst beim zweiten Tap. Die Lösung: das Menü-Skript und seine Abhängigkeiten aus dem Delay herausnehmen, oder noch besser: ein Vanilla-Menü ohne jede Abhängigkeit verwenden.

Core Web Vitals · 6 min

Welche Optimierungen können Sie risikofrei aktivieren, ohne Ihre Website zu beschädigen?

Es gibt eine ganze Familie von Optimierungen, die Ihre Website nicht beschädigen können, weil sie das Dateigewicht reduzieren oder dem Browser Hinweise geben, ohne jemals zu ändern, was ausgeführt wird. Beginnen Sie damit: Sie holen Ihnen das Wesentliche, mit geschlossenen Augen.

CSS · 6 min

Warum hat mein Critical CSS mein Menü / Overlay kaputtgemacht (es erscheint beim Laden offen)?

Critical-CSS-Generatoren behalten nur die Styles für das, was beim Laden im oberen Seitenbereich sichtbar ist. Ihre standardmäßig ausgeblendeten und per Klick geöffneten Elemente (mobiles Menü, Such-Overlay, Modal, Drawer) werden als nutzlos eingestuft und entfernt. Das Ergebnis: Beim Laden erscheinen sie offen, kaputt, ungestylt.

Bilder · 5 min

Warum zeigt PageSpeed Insights immer noch „Properly size images“ an, obwohl ich ein srcset habe?

Srcset bietet dem Browser eine Liste von Größen an, aber erst das sizes-Attribut sagt ihm, welche er auswählen soll. Fehlt sizes, ist es falsch oder wird es ignoriert, lädt der Browser das größte Bild der Liste herunter, und PageSpeed bemängelt das, srcset hin oder her.

Mein KontoLizenz holen →