Shopify-Ladezeit-Glossar: Fachbegriffe einfach erklärt

Core Web Vitals

Die drei Kennzahlen von Google dafür, wie sich eine Seite für echte Besucher anfühlt: LCP (Laden), INP (Reaktion) und CLS (visuelle Stabilität). Eine Seite besteht, wenn alle drei am 75. Perzentil der Besuche gut sind, gemessen mit Felddaten aus dem Chrome-Bericht zur Nutzererfahrung (CrUX). Sie gehören zu den Page-Experience-Signalen der Google-Suche.

Bei Shopify: Der Shopify-Admin hat einen Web-Performance-Bericht mit denselben drei Kennzahlen, gemessen an Ihren eigenen Besuchern.

LCP (Largest Contentful Paint)

Die Zeit vom Start des Ladens bis das größte sichtbare Bild oder der größte Textblock gezeichnet ist. Gut sind 2,5 s oder weniger, über 4 s gilt als schlecht.

Bei Shopify: Auf einer Produktseite ist das LCP-Element meist das Hauptfoto, auf der Startseite das Hero-Banner. Alles, was davor lädt, bremst es.

INP (Interaction to Next Paint)

Wie lange die Seite braucht, um nach einem Tippen, Klick oder einer Eingabe sichtbar zu reagieren, gemessen an einer der langsamsten Interaktionen des Besuchs. Gut sind 200 ms oder weniger, über 500 ms gilt als schlecht. INP hat im März 2024 First Input Delay (FID) als Core Web Vital ersetzt.

Bei Shopify: App-Skripte, die den Browser beschäftigen, sind eine häufige Ursache für schlechtes INP, etwa beim Tippen auf „In den Warenkorb“.

CLS (Cumulative Layout Shift)

Wie stark sichtbare Inhalte sich unerwartet verschieben, bewertet nach der Größe des verschobenen Inhalts und der Strecke. Gut ist 0,1 oder weniger, über 0,25 gilt als schlecht.

Bei Shopify: Häufige Ursachen sind Ankündigungsleisten, Popups und Bewertungssterne, die nach dem Aufbau der Seite erscheinen, sowie Bilder ohne feste Breite und Höhe.

TTFB (Time to First Byte)

Die Zeit von der Anfrage bis zum ersten Byte des HTML der Seite, inklusive Weiterleitungen, Verbindungsaufbau und Serverzeit. Laut Google sind 0,8 s oder weniger gut.

Bei Shopify: Shopify betreibt die Server, daher hat ein Shop wenig direkten Einfluss auf TTFB. Weiterleitungsketten und schwerer Theme-Code können ihn aber verlängern.

FCP (First Contentful Paint)

Der Moment, in dem der Browser den ersten Text oder das erste Bild der Seite zeichnet. Gut sind 1,8 s oder weniger.

Bei Shopify: Ein schnelles FCP bei langsamem LCP heißt meist, dass das Hauptbild von etwas anderem auf der Seite aufgehalten wird.

Speed Index (Geschwindigkeitsindex)

Eine Lighthouse-Laborkennzahl dafür, wie schnell sich der sichtbare Teil der Seite bei einem Testlauf füllt, berechnet aus einem Video des Ladevorgangs. Niedriger ist besser.

Total Blocking Time (TBT)

In einem Lighthouse-Labortest die Gesamtzeit nach FCP, in der lange Tasks (über 50 ms) den Main Thread des Browsers blockieren, wobei nur der Teil jedes Tasks über 50 ms zählt. Sie ist das Labor-Gegenstück zu INP und eines der schwersten Gewichte im Lighthouse-Performance-Score.

Bei Shopify: App-Skripte, die beim Laden der Seite laufen, sind eine häufige Ursache für eine hohe TBT.

Render-blockierende Ressource

Eine Datei, die der Browser laden und verarbeiten muss, bevor er überhaupt etwas zeichnen kann, meist ein Stylesheet oder ein Skript im Head ohne async oder defer. Jede davon verzögert FCP und LCP.

Bei Shopify: Bei Shopify sind App-Skripte im Head des Themes eine häufige Quelle. PageSpeed Insights führt sie in seinen Vorschlägen auf.

Critical CSS (kritisches CSS)

Der kleine Teil des CSS, der für den zuerst sichtbaren Bereich nötig ist, direkt ins HTML geschrieben, damit die Seite zeichnen kann, bevor das ganze Stylesheet da ist. Der Rest lädt danach.

Bei Shopify: Manche Speed-Apps erzeugen Critical CSS für ein Theme. Whoosh nicht: Es steuert, wann Apps laden.

Lazy Loading (verzögertes Laden)

Bilder, Videos oder iFrames erst laden, wenn sie gleich ins Bild scrollen, meist mit loading="lazy". Das spart Daten und hält das Netz frei für das, was zu sehen ist.

Bei Shopify: Laden Sie das erste Produktfoto oder das Hero-Banner nie per Lazy Loading: Es ist meist das LCP-Element, und Lazy Loading macht LCP langsamer.

Vorladen (Preload und Prefetch)

Preload (rel="preload") weist den Browser an, eine Datei früh zu holen, die die aktuelle Seite bald braucht, etwa das Hero-Bild oder eine Schrift. Prefetch holt mit niedriger Priorität Dateien oder Seiten für die wahrscheinlich nächste Navigation, damit die nächste Seite schneller öffnet.

Bei Shopify: AI Page Preloading von Whoosh lädt die nächste Seite, bevor der Kunde tippt.

Speculation Rules (Spekulationsregeln)

Eine Browser-Funktion in Chrome und Edge: Die Seite listet in JSON, welche Links der Browser vor einem Klick vorab laden oder vorab rendern darf. Eine vorab gerenderte Seite kann beim Tippen fast sofort erscheinen. Browser ohne Unterstützung ignorieren die Regeln.

CDN (Content-Delivery-Network)

Server rund um die Welt, die Kopien der Dateien einer Website vorhalten, damit jeder Besucher sie von einem nahen Standort lädt. So kommt jede Datei schneller an.

Bei Shopify: Jeder Shopify-Shop läuft über das weltweite CDN von Shopify, es gibt also nichts einzurichten. Dateien von App-Anbietern kommen von deren eigenen Servern.