Shopify CSS-Optimierungstool: Was kann automatisiert werden?

Schnelle Lösung mit Thunder

Wenn PageSpeed ​​Insights „Renderblockierende Ressourcen beseitigen“ oder „Nicht verwendetes CSS reduzieren“ meldet, installieren Sie Thunder und testen Sie Ihre Homepage, eine Produktseite und eine Sammlungsseite erneut. Thunder verbessert das Laden von Storefront-Ressourcen, ohne dass Sie brüchige Codefragmente in jede Vorlage einfügen müssen.

CSS ist selten isoliert. Derselbe Store verfügt häufig über umfangreiches JavaScript, verzögert geladene Heldenbilder, ungenutzten App-Code und Verzögerungen bei der Schriftart. Aus diesem Grund ist eine App mit breiterer Geschwindigkeit in der Regel besser als eine schmale, nur auf CSS basierende Lösung. Siehe Thunders Funktionen, das Bester Leitfaden für Shopify-Speed-Appsund unser Detail Shopify CSS-Optimierungsleitfaden bevor Sie ein Werkzeug auswählen.

Was ein Shopify CSS-Optimierungstool automatisieren kann

Rendering-blockierende CSS-Verzögerung

Stylesheets im Dokumentkopf blockieren standardmäßig das Rendering. Ein Tool kann die Art und Weise ändern, wie unkritisches CSS geladen wird, sodass der Browser „above-the-fold“-Inhalte früher zeichnet. Dies hilft normalerweise First Contentful Paint und kann LCP verbessern, wenn das größte Element auf Stile wartet.

Minimierungs- und Komprimierungsprüfungen

Die Minimierung entfernt Leerzeichen und Kommentare. Die Komprimierung erfolgt auf der Server- oder CDN-Ebene. Das CDN von Shopify übernimmt einen Großteil der Bereitstellungsarbeit, aber in die App eingefügtes CSS und benutzerdefinierte Assets können immer noch umfangreicher sein als nötig. Mithilfe von Tools können diese Probleme erkannt werden, ohne dass ein Entwickler jedes Stylesheet lesen muss.

Sicherere Extraktion kritischer CSS

Unter kritischem CSS versteht man den kleinen Regelsatz, der für das erste Ansichtsfenster benötigt wird. Ein gutes Tool behandelt Vorlagen unterschiedlich, anstatt davon auszugehen, dass die Homepage, die Produktseite und die Sammlungsseite denselben kritischen Pfad haben. Das ist wichtig, da eine Produktgalerie, ein Sticky Header und eine Sammlungsfilter-Benutzeroberfläche unterschiedliche Regeln benötigen.

App-Stylesheet-Priorisierung

Bewertungen, Upsells, Abonnements, Popups und Seitenersteller integrieren CSS häufig global. Ein CSS-Optimierungstool kann Stile für Below-the-Fold-Widgets verzögern, sodass der Produkttitel, der Preis, das Hero-Bild und der Add-to-Cart-Bereich zuerst gerendert werden. Für App-spezifische Probleme lesen Sie auch So entfernen Sie nicht verwendetes CSS und JavaScript auf Shopify.

Was nicht vollständig automatisiert werden sollte

Das gefährliche Versprechen lautet: „Alle nicht verwendeten CSS automatisch entfernen.“ Chrome Coverage kann zeigen, dass 80 % eines Stylesheets auf einer Seite ungenutzt sind, aber das bedeutet nicht, dass es im gesamten Store ungenutzt ist. Eine Größentabelle kann ausgeblendet sein, bis Sie darauf klicken. Eine Variantenauswahl wird möglicherweise nur für bestimmte Produkte angezeigt. Eine Warenkorbschublade ist möglicherweise erst vorhanden, wenn ein Käufer einen Artikel hinzufügt. Nach Zustimmung kann ein Treue-Widget geladen werden.

Das Löschen von CSS basierend auf einem Crawl kann diese Zustände zerstören. Aus diesem Grund ist der sicherere Ansatz mehrschichtig: Zuerst die Verzögerung und Priorität automatisieren, dann offensichtliches Vorlagen-CSS aufteilen und erst nach dem Testen löschen. Das Ziel ist ein schnellerer Shop, nicht ein perfekter Abdeckungsbericht, der Ihre wertvollste Seite zerstört.

Manuelle Schritt-für-Schritt-CSS-Korrektur

1. Bestätigen Sie, dass CSS das Problem ist

Testen Sie dieselbe URL in PageSpeed Insights, Chrome DevTools und Shopifys Web Performance Dashboard. Wenn im Wasserfall große CSS-Dateien angezeigt werden, die das erste Malen blockieren, lohnt sich die CSS-Arbeit. Wenn die Gesamtblockierungszeit das größere Problem ist, beginnen Sie mit JavaScript-Optimierung Stattdessen .

2. Unkritische Stile zurückstellen

Für ein sorgfältig getestetes Theme-Stylesheet verwenden Entwickler häufig dieses Muster:

<link
  rel="stylesheet"
  href="{{ 'component-deferred.css' | asset_url }}"
  media="print"
  onload="this.media='all'"
>
<noscript>{{ 'component-deferred.css' | asset_url | stylesheet_tag }}</noscript>

Wenden Sie dies nicht auf jedes Stylesheet gleichzeitig an. Beginnen Sie mit CSS im unteren Bereich und testen Sie dann Navigation, Produktformulare, Varianten, Warenkorbschublade und mobile Menüs.

3. Vorlagenspezifisches CSS aufteilen

Wenn Sammlungsfilter nur auf Sammlungsseiten vorhanden sind, laden Sie deren CSS nur auf Sammlungsvorlagen. Wenn Produktmedienregeln nur für Produktseiten gelten, behalten Sie sie dort bei. Shopify-Themes können Assets basierend auf der Vorlage bedingt laden:

{% if template.name == 'product' %}
  {{ 'product-media.css' | asset_url | stylesheet_tag }}
{% endif %}

4. App-Reste zuletzt entfernen

Suchen Sie nach der Deinstallation von Apps nach alten Snippets, CSS-Assets und Skript-Tags. Dies ist eine wirkungsvolle Arbeit, die jedoch einer Überprüfung bedarf. Für den vollständigen Bereinigungsprozess verwenden Sie die Shopify-App-Reste-Guide.

Manueller Fix vs. Thunder Fix

So wählen Sie ein Shopify-CSS-Optimierungstool aus

Wählen Sie ein Tool, das Shopify unterstützt, und keinen generischen Minifier. Es sollte App-Einbettungen, Liquid-Themes, Seitenvorlagen, Core Web Vitals und den Unterschied zwischen Labortests und Felddaten verstehen. Es sollte Ihnen auch einen sauberen Rollback-Pfad bieten, da aggressive CSS-Änderungen visuelle Zustände zerstören können, die nur beim Einkaufen angezeigt werden.

Wenn Sie Optionen vergleichen, beginnen Sie mit dem Shopify-App-Leitfaden zur Optimierung der Seitengeschwindigkeit und die Übersicht über die Shopify-Geschwindigkeitsoptimierungs-App. CSS matters, but the best result usually comes from treating CSS, images, fonts, and scripts as one loading system.

FAQ