Langsam aus Versehen vs. langsam durch Design

Ich unterscheide normalerweise zwischen langsam aus Versehen und langsam durch Design. Erfahren Sie, wie Ihnen dies helfen kann, die Core Web Vitals zu verbessern

Arjen Karel - linkedin

Last update: 2024-07-13

Langsam aus Versehen vs. langsam durch Design.

Wenn Sie mich beauftragen, die Core Web Vitals zu reparieren oder darüber zu sprechen, werden Sie mich irgendwann über langsam aus Versehen vs. langsam durch Design sprechen hören. Ich denke, es ist eine kritische Unterscheidung, die getroffen werden muss, und in diesem Artikel werde ich erklären, wie Ihnen dies helfen wird, die Core Web Vitals zu verbessern.

Table of Contents!

Langsam aus Versehen vs. langsam durch Design.
Langsam aus Versehen
Langsam durch Design
Fazit

Wenn mich jemand bittet, zu beraten und die Core Web Vitals zu reparieren, ist immer etwas falsch. Langsamkeit kommt immer von Anti-Patterns. Zum Beispiel ein 'Lazy Loaded Largest Contentful Paint Bild', 'Große, nicht optimierte Bilder', 'Slider', 'Render Blocking JavaScript' und so weiter.

Es braucht nicht viel, um ein Anti-Pattern einzuführen. Manchmal ist alles, was Sie tun müssen, um ein Anti-Pattern zu erstellen, ein Plugin zu installieren oder Best Practices für kurze Zeit zu vergessen.

Ich kategorisiere diese Anti-Patterns jetzt gerne in 'langsam aus Versehen' und 'langsam durch Design', weil die Art und Weise, wie ich sie repariere, völlig entgegengesetzt ist.

Langsam aus Versehen

Ich liebe 'langsam aus Versehen' Anti-Patterns. Sie haben etwas getan, das die Seite verlangsamt hat. Sie haben einen Fehler gemacht. Sie wussten nicht, dass es einen viel schnelleren Weg gibt, dies zu tun. Keine Sorge, ich kann Fehler beheben.

Das Kategorisieren dieser 'Fehler' macht also Sinn. Es gibt mir eine Liste von einfach zu behebenden Verbesserungen mit hoher Wirkung, die ich an Ihr Entwicklungsteam senden (oder selbst beheben) kann. Es ist normalerweise sehr wenig Diskussion erforderlich. Das Verbessern dieser Anti-Patterns macht einfach aus allen Richtungen Sinn. Sobald sie behoben sind, werden sich die Core Web Vitals verbessern.

Hier sind ein paar Beispiele für Anti-Patterns, denen ich täglich begegne. Wenn ich erkläre was und warum, bekomme ich normalerweise 'ohh, ich wusste nicht, dass dies die Seite verlangsamen würde'.

1. Nicht-lazy Bilder

Das häufigste Anti-Pattern sind nicht-lazy Bilder. Bilder, die nicht lazy loaded sind, werden bereits in den frühen Stadien des Seitenladens zum Herunterladen in die Warteschlange gestellt. Dies wird Netzwerk- und CPU-Ressourcen verbrauchen. Es macht keinen Sinn, kostbare Ressourcen Bildern zuzuweisen, die nicht einmal sichtbar sind, oder?

2. Schriftarten von Drittanbietern

Web-Fonts sind großartig. Sie werden das Look and Feel der Seite anpassen und verbessern. Leider wird die Verwendung eines Drittanbieters wie Google Fonts die Schriftarten nicht für Ihre spezifische Situation optimieren.

Schriftarten von Drittanbietern erfordern ein zusätzliches Render-Blocking-Stylesheet, eine neue Verbindung zu einem Webserver (während Sie bereits diese wirklich schnelle Verbindung zu Ihrem Ursprungsserver haben) und werden wahrscheinlich mehr Schriftarten zum Browser hinzufügen, als Sie tatsächlich verwenden.

Es wäre sinnvoller, Ihre Schriftarten selbst zu hosten, sie zu preloaden und eine benutzerdefinierte Optimierungs- Strategie jeder Schriftartdatei zuzuweisen. Das ist ein weiterer schneller Gewinn genau dort!

3. Skripte von Drittanbietern

Obwohl nichts Falsches an Skripten von Drittanbietern ist, verursachen sie viele Probleme aufgrund der Art und Weise, wie sie zu Seiten hinzugefügt werden. Ich stoße auf unwichtige Skripte von Drittanbietern (wie die Facebook-Tracking-Pixel, Social-Media-Buttons, Bewertungs-Widgets usw.) , die tatsächlich die gesamte Seite blockieren.

Es ist relativ einfach und sinnvoll, diese Skripte aufzuschieben und zu planen, bis der Browser die wichtigere Arbeit erledigt hat. Am Ende habe ich an der Seite nichts Kritisches geändert, sie sieht immer noch gleich aus und lädt viel schneller. Ich habe nur die Reihenfolge geändert, in der Dinge erledigt werden.

4. Hintergrundbilder

Aus einer Core Web Vitals-Perspektive machen Hintergrundbilder wenig Sinn. Hintergrundbilder können nicht lazy loaded werden, sie sind nicht responsiv und Sie haben wenig Kontrolle über ihr Timing und ihre Priorität.

Mit ein paar einfachen Korrekturen können wir diese Hintergrundbilder in normale Bilder umwandeln, die wir lazy loaden, responsiv machen und ihre Priorität anpassen können. Das wird sicherlich den Largest Contentful Paint verbessern.

5. Große Stylesheets

Stylesheets sind Render-Blocking. Das bedeutet, dass während der Browser die Stylesheets lädt, die Seite weiß bleibt. Es gibt viele Dinge, die Sie tun können, um dies zu beheben. Zum Beispiel, ungenutzte Stile entfernen, das Stylesheet aufteilen, Browser-Caching verbessern oder Critical CSS hinzufügen.

Sobald wir die Stylesheets verbessert haben, werden sich Ihr Largest Contentful Paint und First Contenful Paint dramatisch verbessern!

Langsam durch Design

Langsam durch Design ist der Teil, über den Sie sich Sorgen machen sollten. Sie haben strukturelle Entscheidungen getroffen, die die Seite verlangsamt haben. Sie beinhalten normalerweise UX-Design-Entscheidungen oder JavaScript-Code, der den sichtbaren Teil der Seite so stark verändert, dass es keine guten Workarounds gibt.

Das Problem bei 'langsam durch Design' ist, dass es nicht sofort durch kleine Änderungen behoben werden kann. Es erfordert mehr Planung und das Umschreiben einiger Kernfunktionen der Website.

Das erste, was ich tun muss, ist die Absicht herauszufinden: Warum haben Sie das getan? Was waren die Überlegungen und was genau wollten Sie erreichen? Und dann innerhalb dieser Parameter eine bessere Alternative finden!

Hier sind einige Beispiele für die häufigsten 'langsam durch Design'-Fehler.

1. Slider

Slider funktionieren normalerweise so: Wenn die Seite gerendert wird, injiziert ein JavaScript den Slider in die Seite. Ohne dieses JavaScript sieht die Seite völlig anders aus. Dies wird einen längeren Largest Contentful Paint verursachen, wahrscheinlich eine Layout-Verschiebung und höchstwahrscheinlich Probleme mit dem First Input Delay.

Es gibt keine schnelle Lösung. Das Aufschieben des JavaScripts wird die Paint-Metriken verbessern aber den Slider verzögern und eine Layout-Verschiebung verursachen. Das Skript des Sliders kritisch zu machen, wird die Layout-Verschiebung beheben, aber die Paint-Metriken verlangsamen.

Die Lösung besteht darin, die Seite progressiv zu verbessern. Stellen Sie zuerst sicher, dass der Slider ohne JavaScript gerendert wird, und verbessern Sie dann die Seite und verwandeln Sie das bereits vorhandene Slider-Bild in einen vollständigen Slider.

Das Lustige ist: 9 von 10 Mal, wenn ich das erkläre, schlägt der Seitenbesitzer sofort vor , den Slider zu entfernen. Deshalb ist es wichtig , nach den Absichten und Überlegungen dieser Slider zu fragen. Normalerweise waren sie 'einfach da'.

2. Produkt-Zoom

Produkt-Zoom funktioniert so: In Ihrem durchschnittlichen Webshop fahren Sie mit der Maus über ein Produktbild und können einen Teil des Produkts vergrößern. 'Produkt-Zooms' haben normalerweise dasselbe Problem wie Slider. Ein Stück JavaScript-Code nimmt Ihre Bilder, versteckt sie und schreibt sie dann als zoombare Bilder auf die Seite um. Dies wird einen längeren Largest Contentful Paint verursachen, wahrscheinlich eine Layout-Verschiebung und höchstwahrscheinlich Probleme mit dem First Input Delay.

Der Unterschied zum Slider ist, dass kein Produktbesitzer jemals sagen wird: "oh, entfernen Sie diese Funktionalität einfach". Sie ist wichtig und erhöht die Conversion.

Die Lösung ist dieselbe wie der Slider-Fix. Das Zoom-Skript sollte die Originalbilder nicht verstecken, sondern die Funktionalität des Produktbildes erweitern. Leider ist die Zoom-Funktionalität normalerweise nicht einfach zu beheben und wird etwas Arbeit erfordern, um es genau richtig zu machen.

3. Inline jQuery / Inline JavaScript-Abhängigkeiten

Inline jQuery ist ein Problem, das als 'langsam aus Versehen' begann, aber im Laufe der Zeit schlimmer wurde. Etwa 50% der Seiten, die ich mir ansehe, leiden unter diesem Problem. Da Inline-Skripte von einem früheren Skript (meistens jQuery) abhängen, können Sie jQuery nicht mehr aufschieben. Dies wird alle Paint-Metriken verzögern.

Die Lösung ist einfach: Verschieben Sie diese Skripte einfach in ein externes Skript. Jetzt können Sie sowohl jQuery als auch das benutzerdefinierte Skript aufschieben.

Warum habe ich das dann in die Kategorie 'langsam durch Design' eingeordnet? Wenn ich nach Absicht und Überlegung frage, bekomme ich normalerweise 'oh, ich weiß es nicht'. Und das ist das eigentliche Problem. Es fehlt an Wissen darüber, wie JavaScript funktioniert. Ich kann mir ziemlich sicher sein, dass dieser Fehler in Zukunft wiederholt wird. Das bedeutet, dass die Lösung nicht dasselbe ist wie der Fix. Ich muss das Entwicklungsteam über JavaScript-Abhängigkeiten und Timing aufklären.

4. Große (Hero) Bilder

Ein weiteres Problem 'langsam durch Design' sind große Bilder. Einige Seiten müssen einfach 'das Publikum beeindrucken' mit vielen Bildern in voller Größe. Stellen Sie sich vor, Sie verkaufen Poster. Sie würden Ihren Besuchern wahrscheinlich qualitativ hochwertige, große Bilder servieren wollen. Diese Bilder, egal wie sehr Sie sie optimieren, werden immer länger zum Herunterladen brauchen als kleinere Bilder.

An diesem Punkt (vorausgesetzt, dass die Bilder alle optimiert sind) ist das einzige, was ich tun kann, zu sehen, ob es Spielraum gibt. Brauchen wir wirklich 4k-Bilder oder würde Full-HD auch ausreichen?

5. Interaktive Karten

Ein weiteres Problem, dem ich häufig begegne, sind interaktive Karten. Wenn eine Seite eine interaktive Karte hat, ist die ganze Absicht dieser Seite, den Besucher mit der Karte interagieren zu lassen. Offensichtlich wird es einige Zeit dauern, bis diese Karte geladen ist.

Es führt kein Weg daran vorbei. Wir müssen etwas Langsamkeit akzeptieren. Aber es gibt Dinge, die wir tun können. Wir können sicherstellen, dass die Karten mit der höchsten Priorität geladen werden. Normalerweise sind diese Seiten nicht für frühe JavaScript-Ausführung optimiert. In diesem Fall war das die falsche Wahl. Wir brauchen das Skript, um so früh wie möglich herunterzuladen und ausgeführt zu werden!

6. Langsame APIs

Probleme 'langsam durch Design', die durch langsame APIs entstehen, sind meistens in SPA-Sites wie REACT NextJS oder Angular zu finden. Langsame APIs verursachen meistens große Layout-Verschiebungen, weil Komponenten nach Benutzerinteraktion zu spät rendern. Probleme wie dieses erfordern normalerweise einen teamübergreifenden Ansatz

Fazit

Es kann nützlich sein, zwischen langsam aus Versehen und langsam durch Design zu unterscheiden, wenn es um die Core Web Vitals geht. Langsam aus Versehen ist normalerweise leicht zu beheben, während langsam durch Design einen gründlicheren mehrdimensionalen Ansatz erfordert.