Critical CSS in Shopify
Critical CSS in Shopify - kurz gesagt
Critical CSS ist eine Sammlung von CSS-Regeln, die für das erste Rendering benötigt wird. Diese CSS-Regeln werden im Head der Seite platziert. Dies stellt sicher, dass ein Browser mit dem Rendern beginnt, ohne alle Render-Blocking-CSS-Dateien herunterladen zu müssen
Shopify ist eine weit verbreitete All-in-One-Webshop-Lösung, mit der jeder einfach seinen eigenen Webshop erstellen kann. Leider ist Shopify nicht mit einer perfekten PageSpeed-Bewertung im Hinterkopf gebaut und unterstützt kein automatisiertes Critical CSS. Critical CSS in Shopify kann nur manuell hinzugefügt werden.
In diesem Artikel zeige ich Ihnen, wie Sie Critical CSS schnell zu Ihrem Shopify-Webshop hinzufügen können.
Was ist Critical CSS?
Aufgrund der Art und Weise, wie alle modernen Browser funktionieren, wird das Rendern der Seite durch externe CSS-Dateien blockiert. Wenn ein Browser 1 oder mehrere CSS-Dateien herunterladen muss, kann das Rendern einer Seite leicht 100ms oder sogar länger blockiert werden.
Eine Möglichkeit, dies zu vermeiden, ist die Verwendung von Critical CSS. Critical CSS ist eine Sammlung von CSS, die erforderlich ist, um nur den sichtbaren Teil der Seite zu rendern. Dieses Critical CSS wird oft inline platziert, im Head der Seite. Dies stellt sicher, dass ein Browser keine 1 oder mehrere CSS-Dateien herunterladen muss, bevor er mit dem Rendern beginnen kann. Währenddessen lädt Ihr Browser im Hintergrund die endgültigen CSS-Dateien herunter.
Schnell loslegen: Critical CSS in Shopify!
Shopify ist eine beliebte All-in-One-Webshop-Lösung. Es funktioniert sehr einfach, aber PageSpeed ist nicht die Stärke von Shopify. Beispielsweise gibt es standardmäßig keine gute und automatisierte Unterstützung für Critical CSS. Daher müssen wir die Unterstützung für Critical CSS manuell hinzufügen. Glücklicherweise ist das nicht viel Arbeit. Befolgen Sie die Schritt-für-Schritt-Anleitung unten, um Critical CSS in Shopify zu verwenden.
1. Erstellen Sie ein neues Theme
Wenn Sie das Kernverhalten eines Templates in Shopify bearbeiten, ist es am besten, ein neues Theme zu erstellen. Navigieren Sie über 'Online Store'> 'Themes' zu Ihrem aktuellen Theme und kopieren Sie Ihr aktuelles Theme in ein neues Theme, indem Sie auf 'Actions'> 'Duplicate' klicken.
2 Generieren Sie Critical CSS
Es gibt zahlreiche Möglichkeiten, Critical CSS auf verschiedene Weise zu generieren. Ich selbst verwende das NodeJs Critical-Modul in Kombination mit einigen manuellen Anpassungen. Das ist ein bisschen wie ein Puzzle, aber oft die beste Lösung.
Wenn das für Sie etwas zu technisch ist, könnten Sie einen der vielen Online-Critical CSS-Generatoren ausprobieren. Geben Sie hier die URL Ihrer Website ein und das Tool generiert automatisch Ihr Critical CSS für Sie. Kopieren Sie dieses Critical CSS und fahren Sie mit dem nächsten Schritt fort.
3. Laden Sie Critical CSS hoch
Navigieren Sie in Ihrem neuen Theme zum Snippets-Ordner und erstellen Sie eine neue Datei namens critcal.css.liquid. Fügen Sie den Inhalt des generierten Critical CSS aus Schritt 2 in Ihre neue Datei ein.
4. Bearbeiten Sie die Template-Dateien
Öffnen Sie Ihr Template im Layout-Ordner. Wir müssen hier 2 Anpassungen vornehmen. Zuerst fügen wir das Critical CSS im Head der Seite hinzu:
<head>
{% include 'critical.css'%}
Bearbeiten Sie dann die vorhandenen CSS-Referenzen, um die ursprünglichen CSS-Dateien im Hintergrund herunterzuladen. Dafür verwenden wir das Preload-Tag. Das Preload-Tag zeigt Ihren Browsern an, dass eine Datei später auf der Seite verwendet wird. Der Browser lädt diese Datei dann parallel herunter. Sobald diese Dateien heruntergeladen sind, aktivieren Sie die CSS-Dateien über JavaScript:
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Testen Sie das neue Theme
Sie sind jetzt bereit, das Critical CSS in Shopify zu testen. Klicken Sie auf der Theme-Seite auf 'Actions' > 'Preview' des kopierten Themes. Testen Sie das neue Theme gründlich und achten Sie besonders auf den Wert des Layout Shift (CLS) in Lighthouse. Unvollständiges oder fehlerhaftes Critical CSS kann einen erheblichen Layout Shift verursachen.
5. Veröffentlichen Sie ein neues Theme
Navigieren Sie im linken Menü unter 'Online Store' zu Themes und wählen Sie unter 'Actions' 'Publish' für Ihr neues Theme.
Critical CSS ist live!
Herzlichen Glückwunsch, Ihr Shopify-Shop verwendet jetzt Critical CSS. Das macht Ihren Shop viel schneller! Benötigen Sie Hilfe bei der Beschleunigung Ihres Shops? Ich helfe Ihnen gerne!
Einschränkungen von Shopify
Normalerweise möchten Sie Critical CSS nur an Besucher ausliefern, die die endgültigen CSS-Dateien nicht in ihrem Browser-Cache haben. Das Bereitstellen der ursprünglichen CSS-Dateien über den Browser-Cache ist in der Regel schneller als die Verwendung von Critical CSS.
Dies geschieht durch Senden eines Cookies bei der ersten Anfrage und etwas Server Side Rendering. Leider erlaubt Shopify es nicht, Cookies im Shopify Liquid Editor zu lesen und zu senden. Das ist schade, aber was können Sie tun?
Trotzdem ist es sinnvoll, Critical CSS zu Ihrem Shopify-Shop hinzuzufügen. Der Geschwindigkeitsgewinn macht es auf jeden Fall lohnenswert!
Performance is a Feature.
Treating speed as an afterthought fails. Build a performance culture with a dedicated 2-sprint optimization overhaul.
- 2-Sprint Overhaul
- Culture Building
- Sustainable Speed
