Mantys CoreGuides und Wissensdatenbank
WordPress-Performance in der Praxis, ohne Fachchinesisch erklärt.
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.
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.
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.
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.
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.
„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.
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.
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.
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.
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.
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.