> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # CSS > Wie Sie in WEBSALE V8s eigene CSS-Dateien anlegen, mit dem PageSpeed-Tool gruppieren und in Ihren Templates einbinden. Diese Seite beschreibt, wo CSS-Dateien im Shop liegen, wie Sie eigene Stylesheets anlegen und auf welchen Wegen Sie diese in Ihre Templates einbinden. Vorausgesetzt wird, dass Sie mit dem Aufbau der Template-Verzeichnisse vertraut sind und einen SFTP-Zugang zu Ihrem Shop haben. Der ausgelieferte Mustershop von WEBSALE V8s basiert auf Bootstrap. Er enthält bereits die unmodifizierten Standard-CSS-Dateien von Bootstrap sowie eine weitere CSS-Datei mit WEBSALE-spezifischen Anweisungen. Alle diese Dateien liegen sowohl minimiert als auch nicht-minimiert vor. Zentrales Werkzeug für die Arbeit mit CSS ist das PageSpeed-Tool. Es fasst einzelne CSS-Dateien zu Gruppierungen zusammen, minimiert sie und versieht sie mit einem URL-Fingerprinting. Beim URL-Fingerprinting ändert sich mit jeder inhaltlichen Änderung automatisch der Dateiname. Der Browser ist dadurch gezwungen, die Datei neu zu laden, statt eine veraltete Fassung aus dem Cache anzuzeigen. Der Shop greift im Standard ausschließlich auf diese minimierten Dateien mit URL-Fingerprinting zu. Der Nutzen der Gruppierungen liegt in der Ladezeit. Pro Template binden Sie nur die CSS-Dateien ein, die für den Aufruf der jeweiligen Seite wirklich benötigt werden. Damit Sie diese Dateien nicht einzeln referenzieren müssen, fassen Sie sie unter einer frei wählbaren Gruppierungs-ID zusammen. Eine kürzere Ladezeit wirkt sich sowohl auf die Nutzererfahrung als auch auf das Suchmaschinen-Ranking Ihres Shops aus. Das PageSpeed-Tool finden Sie im Online-Servicebereich (OSB) im Dienst Konfiguration unter dem Reiter "PageSpeed-Tool". Sollte der Reiter dort nicht sichtbar sein, wenden Sie sich bitte an Ihren Ansprechpartner bei der WEBSALE AG. Diese Seite behandelt ausschließlich CSS. Für JavaScript-Dateien gilt ein weitgehend identisches Verfahren mit eigenen Ordnern und eigenen Tags, beschrieben unter Wegweiser: [JavaScript und jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md). ## Ordnerstruktur Im Verzeichnis Ihres Onlineshops finden Sie den Ordner `templates`, der neben allen verfügbaren Templates zwei Ordner für Stylesheets enthält: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} benutzer/templates/css_upload benutzer/templates/css_min ``` In den Ordner `css_upload` laden Sie Ihre eigenen CSS-Dateien per SFTP hoch. Dort bearbeiten und löschen Sie sie auch. Der Ordner `css_min` wird dagegen ausschließlich vom PageSpeed-Tool befüllt. Alle darin liegenden Dateien sind minimiert und mit einem URL-Fingerprinting versehen. Sie bearbeiten diese Dateien nicht selbst, da sie bei der nächsten Publizierung überschrieben werden. Sollte diese Ordnerstruktur in Ihrem Shop noch nicht vorhanden sein, legen Sie sie bitte entsprechend an. Ohne beide Ordner kann das PageSpeed-Tool nicht arbeiten. ## Eine CSS-Datei anlegen Der Mustershop enthält unter `benutzer/templates/css_upload` bereits Stylesheet-Dateien, die Sie als Vorlage verwenden können. Weitere Dateien fügen Sie mit einem einfachen SFTP-Client in denselben Ordner ein. Bei der Benennung sind Sie frei, solange Sie die HTML-Konventionen für Dateinamen einhalten. Quelle (externer Link): [HTML-Konventionen für Dateinamen](https://www.w3.org/TR/html4/types.html#type-name) Bewährt hat sich eine Aufteilung in zwei Arten von Dateien: * eine "Grundgerüst-Datei" mit allen Anweisungen, die auf jeder Seite gebraucht werden * mehrere kleine Dateien für Anweisungen, die nur ein einzelnes Template betrifft, beispielsweise den Warenkorb Der Grund für die kleinen Dateien liegt in den Gruppierungen. Nur was in getrennten Dateien liegt, lässt sich später seiten- oder themenspezifisch kombinieren. Je genauer Sie trennen, desto weniger überflüssige Anweisungen muss ein Besucher beim Seitenaufruf laden. > [!WARNING] > > Alle CSS-Dateien müssen zwingend unter `benutzer/templates/css_upload` gespeichert werden. Dateien an anderen Orten findet das PageSpeed-Tool nicht. ## Einbinden mit dem PageSpeed-Tool (empfohlen) Nachdem Sie Ihre Dateien per SFTP im Ordner `css_upload` bereitgestellt haben, weisen Sie sie den gewünschten Templates zu. Wir empfehlen den Weg über das PageSpeed-Tool, weil Ihr Shop dadurch die minimierten Dateien mit URL-Fingerprinting verwendet und nicht die unbearbeiteten Originale. Der Weg besteht aus drei Schritten: Tool aktivieren, Dateien gruppieren, Gruppierung im Template einbinden. Lassen Sie nur nicht-minimierte Dateiversionen vom PageSpeed-Tool verarbeiten. Das nochmalige Minimieren einer bereits minimierten Datei kann zu Fehlern führen. ### PageSpeed-Tool aktivieren Im OSB-Dienst "Konfiguration" ist das PageSpeed-Tool standardmäßig sichtbar und damit aktiv. Ist der Reiter bei Ihnen nicht vorhanden, wenden Sie sich an Ihren Ansprechpartner bei WEBSALE. Damit der Shop auch tatsächlich auf die erzeugten Dateien zugreift, ist zusätzlich ein Eintrag in der Shopkonfiguration `shop.config` nötig. Eine Freischaltung durch WEBSALE ist dafür nicht erforderlich, die oben beschriebene Ordnerstruktur muss allerdings vorliegen. Fügen Sie im Abschnitt `` den Parameter `UseMinifiedCSSAndJS` hinzu: ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... UseMinifiedCSSAndJS = yes ... ``` Referenz: [Abschnitt TopRank](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#toprank) ### CSS-Dateien gruppieren Eine CSS-Datei lässt sich über das PageSpeed-Tool nur einbinden, wenn sie einer Gruppierung zugewiesen ist. Die Gruppierung ist damit die kleinste Einheit, die der Shop später referenziert. Gruppierungen legen Sie im Online-Servicebereich (OSB) im Dienst Konfiguration an. Wählen Sie dort den Reiter "PageSpeed-Tool" und anschließend den Reiter "CSS". In der linken Spalte unter der Überschrift "Gruppierungen" legen Sie beliebig viele seiten- oder themenspezifische Gruppierungen an. Jede Gruppierung erhält beim Anlegen eine frei wählbare Gruppierungs-ID. In den Beispielen auf dieser Seite lautet diese ID `start`. In der rechten Spalte sehen Sie alle CSS-Dateien, die Sie per SFTP im Ordner `css_upload` bereitgestellt haben. Fehlt eine gerade hochgeladene Datei, klicken Sie auf das Aktualisieren-Symbol. Ziehen Sie die benötigten Dateien per Drag-and-drop innerhalb des OSB in die jeweilige Gruppierung. Klicken Sie anschließend auf das Weltkugel-Icon, um die Dateien der Gruppierung zu erzeugen. Pro Gruppierungs-ID entsteht dabei eine optimierte CSS-Datei im Ordner `css_min`. Jeder weitere Klick auf das Weltkugel-Icon erzeugt eine neue Version, sofern Sie inhaltliche Änderungen vorgenommen haben. > [!WARNING] > > Bearbeiten Sie eine bereits zugewiesene CSS-Datei später erneut im Ordner `css_upload`, wird die Änderung erst sichtbar, nachdem Sie die komplette Gruppierung mit dem Weltkugel-Icon erneut publiziert haben. Wenn Sie während der Designphase häufig kleine Änderungen vornehmen, verwenden Sie stattdessen den Direktzugriff. ### Gruppierung als ausgelagerte CSS-Datei einbinden Eine ausgelagerte CSS-Datei hat einen entscheidenden Vorteil: Sie wird von mehreren Templates verwendet, muss vom Browser aber nur einmal geladen werden. Für jede Gruppierungs-ID erzeugt das PageSpeed-Tool bereits eine solche Datei. Sie binden sie mit dem HTML-Element `link` an einer beliebigen Stelle Ihres Templates ein. Den Pfad liefert das Tag `WS-CSSURL()`, in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Gruppierung `start` soll im `` des Templates eingebunden werden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Das Tag erzeugt für den Browser den Verweis auf die minimierte Datei der Gruppierung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Der Namensbestandteil `753e2835a4` ist das URL-Fingerprinting. Er ändert sich mit jeder neuen Version der Gruppierung. Referenz: WS-CSSURL() > [!WARNING] > > Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten. Der Shop parst diese Dateien nicht, WEBSALE-Tags werden also nicht ersetzt. Der Ordner wird außerdem von der Textpflege-Plattform nicht berücksichtigt, sodass auch Textvariablen unersetzt bleiben. Binden Sie das CSS in diesen beiden Fällen inline in das gewünschte Template ein. ### Gruppierung inline einbinden Stylesheets müssen nicht zwingend über eine externe Datei eingebunden werden. Mit dem HTML-Element `style` legen Sie sie direkt im HTML-Dokument fest. Das ist der richtige Weg, wenn Ihre CSS-Anweisungen WEBSALE-Tags oder Textvariablen enthalten. Den Inhalt aller Dateien einer Gruppierung liefert das Tag `WS-CSSInline()`, in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Stylesheets der Gruppierung `start` sollen inline innerhalb des `` eingebunden werden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Das Tag gibt für den Browser alle Stylesheets der Gruppierung aus: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Referenz: WS-CSSInline() ## Direktzugriff während der Designphase Beim Einbinden über das PageSpeed-Tool werden Änderungen an CSS-Dateien erst nach einem Klick auf das Weltkugel-Icon sichtbar. Beim Aufbau eines neuen Shops ist dieser Zwischenschritt aufwendig, weil er sich bei jeder Korrektur wiederholt. Für diesen Fall gibt es den Direktzugriff. Der Shop greift dabei nicht auf die generierten Dateien im Ordner `css_min` zu, sondern auf die originalen Dateien im Ordner `css_upload`, die der Gruppierung zugewiesen sind. Änderungen sind damit sofort nach dem Hochladen und einem Neuladen im Browser sichtbar. Der Direktzugriff besteht aus zwei Teilen. Erstens einer Einstellung in der Shopkonfiguration `shop.config`, die festlegt, wann der Modus greift. Zweitens einer Klammerung im Template, die beide Fälle abdeckt. ### Permanenter Direktzugriff Mit der folgenden Einstellung greift der Shop dauerhaft auf die Originaldateien zu. Diese Einstellung empfiehlt sich, solange Sie einen Shop aufbauen und häufig Änderungen vornehmen. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ActivatePermanentDirectJSCSSTest = yes ... ``` ### Direktzugriff nur auf Abruf Mit dem Wert `no` ist der permanente Direktzugriff deaktiviert. Der Shop greift dann nur auf die Originaldateien zu, wenn Sie ihn mit dem Parameter `&jscssdirect-test=on` aufrufen. Mit `&jscssdirect-test=off` kehrt er zu den Dateien im Ordner `css_min` zurück. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ActivatePermanentDirectJSCSSTest = no ... ``` Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ### Beispiel: ausgelagerte CSS-Datei im Direktzugriff Im Direktzugriff liefert der Shop jede Datei der Gruppierung einzeln aus, nicht eine zusammengefasste Datei. Das Template muss deshalb über alle Dateien der Gruppierung laufen. Dafür gibt es die Klammerung `WS-DirectCSS()` mit der Gruppierungs-ID und darin die Schleife `@WS-DirectCSS`, die pro Durchlauf über `WS-DirectCSSURL` den Pfad einer Datei liefert. Damit das Template in beiden Zuständen funktioniert, umschließt die Klammerung `ST-DirectJSCSSTest` den Direktzugriff-Fall und `!ST-DirectJSCSSTest` den Normalfall. Beispiel: Der Gruppierung `start` sind die beiden Dateien `font.css` und `color.css` zugewiesen. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... {ST-DirectJSCSSTest} {WS-DirectCSS(start)} {@WS-DirectCSS} {/@WS-DirectCSS} {/WS-DirectCSS(start)} {/ST-DirectJSCSSTest} {!ST-DirectJSCSSTest} {/!ST-DirectJSCSSTest} ... ``` Für den Browser entsteht daraus je nach Zustand entweder ein Verweis pro Originaldatei oder ein einzelner Verweis auf die minimierte Gruppierungsdatei: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Referenz: [ST-DirectJSCSSTest](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) Referenz: WS-DirectCSS() Referenz: WS-DirectCSSURL() ### Beispiel: Inline-Einbindung im Direktzugriff Auch inline eingebundene Stylesheets lassen sich im Direktzugriff verwenden. Statt des Pfads liefert `WS-DirectCSSInline` hier den Inhalt der jeweiligen Datei. Beispiel: Die Stylesheets der Gruppierung `start` sollen inline innerhalb des `` eingebunden werden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... {ST-DirectJSCSSTest} {WS-DirectCSS(start)} {/WS-DirectCSS(start)} {/ST-DirectJSCSSTest} {!ST-DirectJSCSSTest} {/!ST-DirectJSCSSTest} ... ``` Für den Browser entsteht daraus im Direktzugriff der unveränderte Inhalt der Originaldateien, im Normalfall der minimierte Inhalt der Gruppierung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Referenz: WS-DirectCSSInline() ## Neue Gruppierungen im Design-Testmodus erproben Eine neue Gruppierung muss nicht sofort im Livemodus eingebaut werden. Für alle beschriebenen Integrationsvarianten steht Ihnen die Klammerung `ST-DesignTest` zur Verfügung. Damit sehen nur Sie im Design-Testmodus die neue Zuweisung, während Besucher weiterhin die bisherige Fassung erhalten. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {ST-DesignTest} Zuweisung der CSS-Dateien, die im Design-Testmodus verwendet werden sollen {/ST-DesignTest} {!ST-DesignTest} Zuweisung der CSS-Dateien, die im Livemodus verwendet werden sollen {/!ST-DesignTest} ``` Referenz: [ST-DesignTest](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ## Debug-Modus für die Fehlersuche im Browser Greifen die CSS-Anweisungen nicht wie gewünscht, ist die Fehlersuche in einer minimierten Datei mühsam. Deshalb können Sie die Einbindung der minimierten Datei per Aufruf unterdrücken und stattdessen die nicht-minimierte Fassung im Browser verwenden. Das PageSpeed-Tool legt diese Fassung zeitgleich mit der minimierten Datei im Ordner `css_min` ab. Binden Sie Ihre CSS-Dateien per Direktzugriff ein, brauchen Sie diesen Modus nicht. Der Browser erhält dort ohnehin die nicht-minimierten Originale. Hängen Sie zum Aktivieren an einen beliebigen Shop-Aufruf den Parameter `&jscssminified-test=off` an. Der Shop muss sich dafür im Testmodus befinden. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https://www.xyz.de/?test=on&jscssminified-test=off ``` Der Browser erhält dann die nicht-minimierte Fassung, erkennbar am fehlenden `.min` im Dateinamen: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Mit `&jscssminified-test=on` kehren Sie zu den minimierten Dateien zurück: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https://www.xyz.de/?test=on&jscssminified-test=on ``` ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ## Einbinden ohne PageSpeed-Tool Die Nutzung des PageSpeed-Tools ist in WEBSALE V8s nicht zwingend. Sie können CSS-Dateien auch über einen relativen Pfad in jedes Template einbinden oder Stylesheets direkt im Template notieren. Dieser Weg ist einfacher, verzichtet aber auf Minimierung und URL-Fingerprinting. Bei der Einbindung über einen relativen Pfad ist das `base`-Element zu beachten. Es legt die Basis für alle relativen Verweise fest und zeigt in der Regel auf das Subshop-Templateverzeichnis, beispielsweise `benutzer/templates/Deutsch`. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Wegweiser: base-href Wegweiser: [URL-Template](https://dokumentation.websale.de/v8s/produkte/backinstockmail-ordernow-service.md#welche-tags-erlaubt-sind) > [!WARNING] > > Verwenden Sie auch auf diesem Weg ausschließlich die Dateien im Ordner `css_upload`. Ein automatisches URL-Fingerprinting und eine automatische Minimierung finden nicht statt. Beides müssen Sie nach jeder Änderung manuell nachziehen, sonst liefert der Browser eine veraltete Datei aus dem Cache aus. > > Auch hier gilt: Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten, weil der Shop diese Dateien nicht parst und die Textpflege-Plattform den Ordner nicht berücksichtigt. Binden Sie das CSS in diesen Fällen inline ein. Bei der Einbindung direkt im Quellcode spielt das `base`-Element nur dann eine Rolle, wenn Sie über `background` oder `background-image` Hintergrundbilder einbinden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` ## Hinweise zu Bootstrap-CSS Die im Mustershop bereitgestellten Dateien `bootstrap.css` und `bootstrap.min.css` sowie `bootstrap-theme.css` und `bootstrap-theme.min.css` sind die unmodifizierten Standarddateien von Bootstrap mit allen Anweisungen und Komponenten. Bis auf die E-Mail-Templates verwenden bereits alle Mustershop-Templates `bootstrap.min.css` und `bootstrap-theme.min.css`. Möchten Sie den Mustershop an Ihr Design anpassen, nutzen Sie dafür vorrangig das Customizing von Bootstrap. Von einer Änderung der mitgelieferten Bootstrap-Dateien ist abzuraten, weil Sie damit die Update- und Kompatibilitätsfähigkeit von Bootstrap verlieren. Lässt sich eine Designanpassung nicht über das Customizing lösen, überschreiben Sie die Bootstrap-Anweisungen. Dafür stehen Ihnen beide oben beschriebenen Wege offen, die ausgelagerte CSS-Datei und die Einbindung direkt im Quellcode. Wegweiser: [Bootstrap](https://dokumentation.websale.de/v8s/templates/bootstrap.md) ## WEBSALE Klassennamen und IDs Alle von WEBSALE V8s automatisch erzeugten HTML-Elemente sind mit Klassennamen und IDs versehen. Ein Beispiel ist die Blätternavigation für Produktlisten: ![Css Blaettern Quellcode](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/css-blaettern-quellcode.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=3f486cac9e7eb78d8dc9d47e6d6f8948) Dieses Tag erzeugt eine vollständige Tabelle mit Verlinkungen, Zahlenwerten und Grafiken. Über die vergebenen Klassennamen und IDs nehmen Sie per Stylesheet gestalterischen Einfluss darauf, ohne das erzeugte Markup selbst ändern zu müssen. Verwenden Sie die von WEBSALE vergebenen Klassennamen und IDs nicht für eigene HTML-Elemente. Sonst greifen Ihre Anweisungen unbeabsichtigt auch auf die generierten Elemente. Eine Übersicht aller vergebenen Klassennamen und IDs finden Sie in den folgenden Referenzen: * Styles für Produkte * Styles für Produktbewertung * Styles für Blättern in Kategorien und Produkten * Styles für Dropdown-Liste der Währungen * Styles für Anmeldung * Styles für Rechnungs- und abweichende Lieferadresse * Styles für Bankverbindung * Styles für multiple Kundendaten * Styles für Trusted-Shops-Informationen * Styles für Varianten der Merkliste * Styles für Fehlermeldungen beim Online-Clearing * Styles für kostenpflichtige Zusatzleistungen * Styles für speicherbare Warenkörbe * Styles für WWS-Infodatenschnittstelle * Styles für Wunschliste * Styles für Zustimmung zur Werbung * Styles für Produktvergleich * Styles für Filter auf Kategorieebene ## SEO-optimierte Auslieferung von CSS-Dateien Die Performance einer Seite ist eines der wichtigsten Kriterien für ein gutes Suchmaschinen-Ranking. CSS-Dateien fallen dabei wegen ihrer Größe besonders ins Gewicht. Die folgenden Quellen erläutern, wie Sie Ihr Design beibehalten und trotzdem eine gute Performance erreichen. * CSS-Bereitstellung optimieren: [Ressourcen minimieren](https://developers.google.com/speed/docs/insights/MinifyResources) und [CSS-Bereitstellung optimieren](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) * [Browser-Caching nutzen](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=de) * [URL-Fingerprinting und Caching-Header](https://developers.google.com/speed/docs/insights/LeverageBrowserCaching?hl=de#welche-caching-header-sollte-ich-verwenden) * [Sichtbare Inhalte priorisieren](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent) ## Related topics - [Includes, Templates, CSS und JavaScript](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md) - [Anmeldung und Registrierung](https://dokumentation.websale.de/v8s/kundenkonto/anmeldung-registrierung.md) - [Komponenten & Sammlungen in strapi](https://dokumentation.websale.de/strapi-cms/komponenten-sammlungen-in-strapi.md) - [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) - [ws-filter](https://dokumentation.websale.de/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.