CSS
WEBSALE V8s stellt Ihnen standardmäßig einen Mustershop zur Verfügung, der auf Bootstrap basiert. Dieser enthält bereits die unmodifizierten Standard-CSS-Dateien von Bootstrap. Zusätzlich wird auch noch eine weitere CSS-Datei mit WEBSALE-spezifischen CSS-Anweisungen zur Verfügung gestellt.
Alle CSS-Dateien werden Ihnen sowohl in einer minimierten als auch in einer nicht-minimierten Fassung zur Verfügung gestellt. Zusätzlich werden alle minimierten Dateien mit einem sogenannten URL-Fingerprinting versehen. Durch URL-Fingerprinting ändert sich mit jeder Änderung an einer CSS-Datei automatisch der Name der Datei. Bei einer Änderung der Datei ist der Browser also gezwungen, die CSS-Datei erneut aufzurufen. Dies ermöglicht das WEBSALE V8s PageSpeed-Tool.
Der Shop selbst greift im Standard nur auf die minimierten Dateien mit URL-Fingerprinting zu.
WEBSALE V8s stellt Ihnen innerhalb des PageSpeed-Tools eine Möglichkeit zur Verfügung, Ihre CSS-Dateien seiten- oder themenspezifisch zu gruppieren. Dadurch können Sie pro Template nur die CSS-Dateien einbinden, die für den Aufruf der gewünschten Seite benötigt werden. Damit diese Dateien nicht alle einzeln eingebunden werden müssen, können sie zu einer Gruppierung mit einer frei wählbaren ID zusammengefasst werden. Diese Gruppierung wird dann als separate CSS-Datei mit einer verringerten Dateigröße (minimiert) und mit URL-Fingerprinting bereitgestellt. Die dadurch reduzierte Ladezeit Ihrer CSS-Dateien wirkt sich nicht nur positiv auf die User Experience, sondern auch auf das Suchmaschinen-Ranking Ihres Online-Shops aus.
Das PageSpeed-Tool steht Ihnen im OSB-Dienst Konfiguration in dem Reiter "PageSpeed-Tool" zur Verfügung. Sollte dies nicht das Fall sein, kontaktieren Sie bitte Ihren Ansprechpartner bei der WEBSALE AG.
Inhalt
2 Erstellen einer CSS-Datei in WEBSALE V8s
3 Einbinden neuer CSS-Dateien mit dem WEBSALE V8s PageSpeed-Tool (empfohlen)
3.3 Einbinden über eine ausgelagerte CSS-Datei
3.4 Einbinden direkt im Quellcode (inline)
3.5 Einbinden per Direktzugriff
3.6 Einbinden im Design-Testmodus
3.7 Debug-Modus für schnellere Fehlersuche im Browser
4 Einbinden neuer CSS-Dateien ohne PageSpeed-Tool
6 WEBSALE Klassennamen und IDs
7 SEO-optimierte Auslieferung von CSS-Dateien
Im Verzeichnis Ihres Onlineshops finden Sie den Ordner templates, der neben allen verfügbaren Templates die Ordner css_upload und css_min enthält. Während Sie mit einem einfachen FTP-Client in den Ordner css_upload neue CSS-Dateien hinzufügen können, wird der Ordner css_min durch das PageSpeed-Tool befüllt. Alle im Ordner css_min befindlichen Dateien sind automatisch mit einem URL-Fingerprinting versehen und minimiert.
Es existiert die folgende Ordnerstruktur, um CSS-Dateien hinzuzufügen, zu löschen oder bereits vorhandene CSS-Dateien zu bearbeiten:
/templates/css_upload
/templates/css_min
Sollte diese Ordnerstruktur noch nicht bei Ihnen vorhanden sein, legen Sie diese Struktur bitte entsprechend an.
2 Erstellen einer CSS-Datei in WEBSALE V8s
Der Mustershop von WEBSALE V8s enthält bereits Stylesheet-Dateien, die Sie als Vorlage verwenden können. Diese Dateien finden Sie unter benutzer/templates/css_upload. Mit einem einfachen FTP-Client können Sie in den Ordner css_upload weitere CSS-Dateien hinzufügen.
Die Verwendung einer "Grundgerüst-Datei" (die nur die CSS-Anweisungen enthält, die von allen Templates verwendet werden können) ist empfehlenswert, Sie können jedoch in WEBSALE V8s beliebig viele CSS-Dateien erstellen und diese gemäß Ihren Wünschen benennen. Hierbei müssen lediglich die HTML-Konventionen für Dateinamen berücksichtigt werden.
Quelle (externer Link): HTML-Konventionen für Dateinamen
Für CSS-Anweisungen, die nur auf einem Template benötigt werden, empfehlen wir das Anlegen separater kleiner CSS-Dateien, z. B. die CSS-Anweisungen für den Warenkorb. Diese können dann mithilfe des PageSpeed-Tools zu seiten- oder themenspezifischen Gruppierungen zusammengefasst und speziellen Seiten bzw. Templates zugewiesen werden. Dadurch begrenzen Sie die Menge der Daten, die beim Aufruf Ihres Shops geladen werden muss, und erzielen eine bessere Performance.
Bitte beachten Sie, dass alle CSS-Dateien zwingend unter benutzer/templates/css_upload gespeichert werden müssen.
3 Einbinden neuer CSS-Dateien mit dem WEBSALE V8s PageSpeed-Tool (empfohlen)
Nachdem Sie Ihre neu angelegten Dateien via SFTP im Verzeichnis css_upload bereitgestellt haben, müssen diese jetzt den gewünschten Templates zugewiesen werden.
Wir empfehlen die Einbindung über das PageSpeed-Tool, da Ihr Shop dadurch die minimierten CSS-Dateien mit URL-Fingerprinting verwendet.
Hinweis: |
|
|
Lassen Sie nur nicht-minimierte Dateiversionen vom PageSpeed-Tool verarbeiten. Das nochmalige Minimieren von bereits minimierten Dateien kann Fehler zur Folge haben. |
Standardmäßig ist das PageSpeed-Tool im OSB-Dienst "Konfiguration" sichtbar und somit aktiviert. Sollte dies nicht der Fall sein, kontaktieren Sie bitte Ihren Ansprechpartner bei WEBSALE.
Damit der Shop auf die über das PageSpeed-Tool generierten CSS- und JavaScript-Dateien zugreifen kann, ist zusätzlich eine Aktivierung in der Shopkonfiguration shop.config notwendig. Eine Freischaltung/Aktivierung durch WEBSALE ist nicht erforderlich. Die in Punkt 1. genannte Ordnerstruktur muss vorliegen, um die Funktionalität des PageSpeed-Tools zu gewährleisten.
Fügen Sie dazu im Abschnitt TopRank der Shopkonfiguration shop.config den Parameter UseMinifiedCSSAndJS = wie folgt hinzu.
<TopRank>
...
UseMinifiedCSSAndJS = yes
...
</TopRank>
Referenz: Abschnitt TopRank
Neue CSS-Dateien können über das PageSpeed-Tool nur hinzugefügt werden, wenn diese einer Gruppierung zugewiesen sind.
Das Gruppieren Ihrer CSS-Dateien erfolgt im Online-Service-Bereich (OSB) über den Dienst Konfiguration. Wählen Sie hier den Reiter PageSpeed-Tool und danach den Reiter CSS aus.
In der linken Spalte unter der Überschrift "Gruppierungen" können Sie jetzt beliebig viele seiten- oder themenspezifischen Gruppierungen anlegen. Jeder Gruppierung vergeben Sie beim Anlegen eine frei wählbare Gruppierungs-ID (im unten stehenden Beispiel lautet diese ID "start").
In der rechten Spalte sehen Sie alle CSS-Dateien, die Sie über SFTP im Ordner css_min bereitgestellt haben. Sollte dies nicht der Fall sein, dann klicken Sie bitte auf das Aktualisieren-Symbol.
Fügen Sie jetzt einzelne CSS-Dateien per Drag-and-Drop (innerhalb des OSB-Bereiches) einer Gruppierung hinzu - je nachdem, welche CSS-Datei für diese Gruppierung benötigt wird.
Haben Sie die Zuweisung abgeschlossen, klicken Sie auf das Weltkugel-Icon, um die CSS-Dateien Ihrer Gruppierungen zu erstellen. Pro Gruppierungs-ID wird eine optimierte CSS-Datei generiert. Mit jedem weiteren Klick auf das Weltkugel-Icon wird (wenn Sie inhaltliche Veränderungen vorgenommen haben) eine neue Version der optimierten CSS-Datei erstellt.
Haben Sie eine CSS-Datei einer Gruppierung zugewiesen und bearbeiten diese CSS-Datei später noch einmal über den Ordner css_upload, dann wird die Änderung erst angezeigt, wenn Sie die komplette Gruppierung erneut mit Klick auf das Weltkugel-Icon publiziert haben. Um für den Designer kleine Änderungen an den CSS-Dateien sofort sichtbar zu machen, lesen Sie bitte den Abschnitt 3.5 Einbinden per Direktzugriff.
3.3 Einbinden über eine ausgelagerte CSS-Datei
Das Einbinden von Stylesheets über separate CSS-Dateien bringt einen entscheidenden Vorteil mit sich: Eine CSS-Datei wird von mehreren Templates verwendet, muss aber vom Browser nur einmal geladen werden.
Das PageSpeed-Tool erstellt bereits für jede Gruppierungs-ID automatisch eine separate CSS-Datei. Diese kann mit dem HTML-Element link und der Angabe der Gruppierungs-ID an einer beliebigen Stelle Ihres Templates eingebunden werden.
Beispiel:
Die Gruppierungs-ID lautet start. Die Gruppierung soll als ausgelagerte CSS-Datei im <head> des Templates eingebunden werden.
Die Integration im Template erfolgt über das Tag WS-CSSURL(). Innerhalb der Klammern des Tags geben Sie die Gruppierungs-ID an.
<head>
...
<link rel="stylesheet" type="text/css" href="~WS-CSSURL(start)~">
...
</head>
Dieses Tag erzeugt dann für den Browser den korrekten Verweis zu der minimierten CSS-Datei der Gruppierung start.
<head>
...
<link rel="stylesheet" type="text/css" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">
...
</head>
Referenz: WS-CSSURL()
Hinweis: |
|
|
Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und Textvariablen enthalten. Die Dateien werden zum einen vom Shop nicht geparst und somit findet keine Ersetzung der WEBSALE-Tags statt. Zum anderen wird der Ordner auch nicht von der Textpflegeplattform berücksichtigt, so dass auch Textvariablen nicht durch ihre Inhalte ersetzt werden. Binden Sie das CSS in diesen beiden Fällen inline in das gewünschte Template ein. |
3.4 Einbinden direkt im Quellcode (inline)
Es ist nicht zwangsläufig erforderlich, Stylesheets über eine externe Datei einzubinden. Das HTML-Element style erlaubt es, Stylesheets zentral in einem HTML-Dokument festzulegen.
Beispiel:
Die Gruppierungs-ID lautet start. Die Stylesheets der Gruppierung start sollen inline innerhalb des <body> Elementes eingebunden werden:
Die Integration im Template erfolgt über das Tag WS-CSSInline(). Innerhalb der Klammern des Tags geben Sie die Gruppierungs-ID an.
<body>
...
<style type="text/css">
~WS-CSSInline(start)~
</style>
...
</body>
Dieses Tag erzeugt dann für den Browser alle Stylesheets der Gruppierung start.
<body>
...
<style type="text/css">
.text-normal {font-weight: normal;}
.text-fett {font-weight: bold;}
</style>
...
</body>
Referenz: WS-CSSInline()
3.5 Einbinden per Direktzugriff
Mit der Einbindung der CSS-Dateien über das PageSpeed-Tool werden Änderungen an den CSS-Dateien immer erst nach dem Klick auf das Weltkugel-Icon im PageSpeed-Tool publiziert und im Browser sichtbar. Dies kann gerade beim Aufbau eines neuen Shops unter Umständen sehr aufwendig sein.
Um für den Designer Änderungen an den CSS-Dateien sofort sichtbar zu machen, ohne immer auf "Publizieren" klicken zu müssen, ist deshalb das Einbinden per Direktzugriff möglich. Somit sind Änderungen an den CSS-Dateien sofort nach dem Hochladen der Dateien in den Ordner css_upload und dem Aktualisieren des Browsers sichtbar.
Dies ist durch die Verwendung spezieller WS-DirectCSS-Tags und -Klammerungen möglich. Statt auf die generierten CSS-Dateien einer Gruppierung im Ordner css_min wird jetzt auf die originalen CSS-Dateien im Ordner css_upload zugegriffen, die der Gruppierung zugewiesen sind:
Über eine Einstellung in der Shopkonfiguration shop.config haben Sie die Möglichkeit einzustellen, ob
a.der Shop permanent per Direktzugriff auf Ihre CSS-Dateien zugreifen soll oder
b.nur dann, wenn der Shop über den Parameter &jscssdirect-test=on im Direktzugriff-Modus aufgerufen wurde.
a) Permanenter Direktzugriff
Mit der folgenden Einstellung in der Shopkonfiguration shop.config kann der Direktzugriff dauerhaft auf "ein" gestellt werden.
Statt auf die generierten CSS-Dateien einer Gruppierung im Ordner css_min greift der Shop jetzt immer auf die originalen CSS-Dateien im Ordner css_upload zu, die der Gruppierung zugewiesen sind. Diese Einstellung ist empfehlenswert, wenn Sie gerade einen neuen Shop aufbauen und häufig Änderungen an den CSS-Dateien vornehmen müssen.
<TopRank>
...
ActivatePermanentDirectJSCSSTest = yes
...
</TopRank>
b) Optionaler Direktzugriff über den Parameter &jscssdirect-test=on
Mit der folgenden Einstellung in der Shopkonfiguration shop.config wird der permanente Direktzugriff deaktiviert.
Der Shop wird nur noch dann auf die CSS-Dateien einer Gruppierung im Ordner css_upload zugreifen, wenn Sie den Shop mit dem Parameter &jscssdirect-test=on aufrufen und somit den Direktzugriff-Modus aktivieren.
Nach der Deaktivierung des Modus mit dem Parameter &jscssdirect-test=off greift der Shop wieder auf die CSS-Dateien einer Gruppierung im Ordner css_min zu.
<TopRank>
...
ActivatePermanentDirectJSCSSTest = no
...
</TopRank>
Auch bei dieser Form der Einbindung können Sie sich zwischen der Integration mittels einer ausgelagerten CSS-Datei oder dem Einbinden direkt im Quellcode entscheiden. Beide Integrationsmöglichkeiten stellen wir Ihnen in den folgenden Beispielen vor.
Beispiel 1: Einbinden über eine ausgelagerte CSS-Datei
Die Gruppierungs-ID lautet start. Der Gruppierung start sind die beiden CSS-Dateien font.css und color.css zugewiesen.
Die Integration im Template erfolgt über das Tag WS-DirectCSS() und WS-DirectCSSURL(). Innerhalb der Klammern des Tags WS-DirectCSS() geben Sie die Gruppierungs-ID an.
<head>
...
<!-- Klammerung für den aktivierten Direktzugriff -->
{ST-DirectJSCSSTest}
{WS-DirectCSS(start)}
{@WS-DirectCSS}
<link rel="stylesheet" href="~WS-DirectCSSURL~">
{/@WS-DirectCSS}
{/WS-DirectCSS(start)}
{/ST-DirectJSCSSTest}
<!-- Klammerung für den deaktivierten Direktzugriff -->
{!ST-DirectJSCSSTest}
<link rel="stylesheet" href="~WS-CSSURL(start)~">
{/!ST-DirectJSCSSTest}
...
</head>
Diese Klammerung und Tags erzeugen dann für den Browser den korrekten Verweis zu den beiden CSS-Dateien font.css und color.css der Gruppierung start im Ordner css_upload
<head>
...
<!-- Verwendung im aktivierten Direktzugriff (alle Dateien der Gruppierung [nicht minimiert]) -->
<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_upload/font.css">
<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_upload/color.css">
<!-- Verwendung im deaktivierten Direktzugriff (eine minimierte Gruppierungs-Datei) -->
<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">
...
</head>
Referenz: ST-DirectJSCSSTest
Referenz: WS-DirectCSS()
Referenz: WS-DirectCSSURL()
Wegweiser: Testmodi des Shops ein- /ausschalten
Beispiel 2: Einbinden direkt im Quellcode (inline)
Die Gruppierungs-ID lautet start. Die Stylesheets der Gruppierung start sollen inline innerhalb des <body>-Elementes eingebunden werden:.
Die Integration im Template erfolgt über den Tag WS-DirectCSSInline(). Innerhalb der Klammern des Tags geben Sie die Gruppierungs-ID an.
<body>
...
<!-- Klammerung für den aktivierten Direktzugriff -->
{ST-DirectJSCSSTest}
{WS-DirectCSS(start)}
<style type="text/css">
{@WS-DirectCSS}
~WS-DirectCSSInline~
{/@WS-DirectCSS}
</style>
{/WS-DirectCSS(start)}
<!-- Klammerung für den deaktivierten Direktzugriff -->
{!ST-DirectJSCSSTest}
<style type="text/css">
~WS-CSSInline(start)~
</style>
{/!ST-DirectJSCSSTest}
...
</body>
Diese Klammerungen und Tags erzeugen dann im Direktzugriff für den Browser alle Stylesheets der Gruppierung start.
<body>
...
<!-- Verwendung im aktivierten Direktzugriff (minimiert) -->
<style type="text/css">
.text-normal {
font-weight: normal;
}
.text-fett {
font-weight: bold;
}
</style>
<!-- Verwendung im deaktivierten Direktzugriff -->
<style type="text/css">
.text-normal {font-weight: normal;}
.text-fett {font-weight: bold;}
</style>
...
</body>
Referenz: ST-DirectJSCSSTest
Referenz: WS-DirectCSS()
Referenz: WS-DirectCSSInline()
Wegweiser: Testmodi des Shops ein- /ausschalten
3.6 Einbinden im Design-Testmodus
Selbstverständlich müssen neue Gruppierungen nicht sofort von Ihnen im Livemodus eingebaut werden.
Für alle Integrationsvarianten stehen Ihnen die ST-DesignTest-Klammerung und der dazugehörige Design-Testmodus-Aufruf zur Verfügung:
{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
Wegweiser: Testmodi des Shops ein- /ausschalten
3.7 Debug-Modus für schnellere Fehlersuche im Browser
Die CSS-Anweisungen greifen nicht wie gewünscht? In einer minimierten CSS-Datei auf Fehlersuche zu gehen, kann sehr umständlich sein. Aus diesem Grund können Sie über einen speziellen Aufruf die Einbindung der minimierten Datei unterdrücken und stattdessen die nicht-minimierte Datei zum Debuggen im Browser verwenden.
Binden Sie Ihre CSS-Dateien per Direktzugriff ein, dann benötigen Sie diesen speziellen Debug-Modus nicht. Ihre CSS-Dateien werden dem Browser bereits nicht-minimiert zur Verfügung gestellt.
Hängen Sie zum Aktivieren an einen beliebigen Shop-Aufruf (der Shop muss sich im Testmodus befinden) den Parameter &jscssminified-test=off an.
Der Zugriff auf die nicht-minimierten Dateien im Browser erfolgt mit:
http://www.xyz.de/?test=on&jscssminified-test=off
Der Browser zeigt die Dateien nun wie folgt an:
<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.css">
Der Zugriff auf die minimierten Dateien im Browser erfolgt mit:
http://www.xyz.de/?test=on&jscssminified-test=on
Der Browser zeigt die Dateien nun wieder wie folgt an:
<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">
Wegweiser: Testmodi des Shops ein-/ausschalten
4 Einbinden neuer CSS-Dateien ohne PageSpeed-Tool
Die Nutzung des PageSpeed-Tools ist bei WEBSALE V8s nicht zwingend erforderlich. Sie können neue CSS-Dateien auch über einen relativen Pfad oder Verweis auf jedes Template einbinden. Auch die Zuweisung von Stylesheets direkt im Template (inline) ist selbstverständlich möglich.
Bei dieser Einbindung muss der <base href="~URL-Template~"> beachtet werden. Er legt die Basis für alle relativen Verweise fest. In der Regel weist der base href auf das Subshop-Templateverzeichnis, z. B. benutzer/templates/Deutsch
Einbinden über eine ausgelagerte CSS-Datei
<head>
...
<base href="~URL-Template~">
<link rel="stylesheet" type="text/css" href="../css_upload/styles.css">
...
</head>
Wegweiser: base-href
Wegweiser: URL-Template
Hinweise: |
|
|
▪Bitte beachten Sie, dass Sie nur die CSS-Dateien im Ordner css_upload verwenden dürfen. ▪Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und Textvariablen enthalten. Die Dateien werden zum einen vom Shop nicht geparst und somit findet keine Ersetzung der WEBSALE-Tags statt. Zum anderen wird der Ordner auch nicht von der Textpflegeplattform berücksichtigt, so dass auch keine Ersetzung der Textvariablen erfolgt. |
Einbinden direkt im Quellcode (inline)
Bei der Einbindung von Stylesheets direkt im Quellcode des Templates ist der base href nur dann zu beachten, wenn Hintergrundbilder über die CSS-Anweisung background oder background-images verwendet werden sollen.
<body>
...
<style type="text/css">
.text-normal {font-weight: normal;}
.text-bold {font-weight: bold;}
.background {background-image: url(../images/bg.png);}
</style>
...
</body>
Wegweiser: base-href
Wegweiser: URL-Template
Die im Mustershop bereitgestellten CSS-Dateien bootstrap.css/bootstrap.min.css und bootstrap-theme.css/bootstrap-theme.min.css sind die unmodifizierten Standard-CSS-Dateien von Bootstrap und enthalten alle CSS-Anweisungen und Komponenten. Diese Dateien werden von Bootstrap unter folgendem Link über den Button "Download Bootstrap" bereit gestellt: http://getbootstrap.com/getting-started/#download
Bis auf die E-Mail-Templates verwenden bereits alle Mustershop-Templates die bootstrap.min.css und die bootstrap-theme.min.css.
Möchten Sie Ihren Mustershop jetzt an Ihr Design anpassen, dann stellt Ihnen Bootstrap das "Customizen" unter folgendem Link zur Verfügung http://getbootstrap.com/customize/. Von einer Änderung der im Mustershop mitgelieferten Bootstrap-CSS-Dateien ist abzuraten, um die Update- und Kompatibilitäts-Fähigkeit von Bootstrap zu erhalten.
Können Designanpassungen nicht über das "Customizen" realisiert werden, dann können Sie die Bootstrap-Stylesheets entweder über eine ausgelagerte CSS-Datei oder eine Stylesheet-Einbindung direkt im Quellcode (inline-Styles) "überschreiben".
Wegweiser: Bootstrap
6 WEBSALE Klassennamen und IDs
Alle von WEBSALE V8s automatisch generierten HTML-Elemente, wie z. B. die Blätternavigation für Produktlisten, werden von WEBSALE V8s mit Klassennamen belegt. Über diese Klassennamen und IDs können Sie via Stylesheets gestalterischen Einfluss nehmen.
Beispiel:
~WS-ListPaging~
Dieses Tag erzeugt eine komplette <table> mit Verlinkungen, mit den Zahlen-Werten, mit Grafiken etc.
Tipp: |
|
|
Wir empfehlen, dass Sie die von WEBSALE verwendeten Klassennamen und IDs nicht für eigene HTML-Elemente verwenden. |
Über die folgenden Referenzen erhalten Sie eine Übersicht aller in WEBSALE vergebenen Klassennamen und IDs.
Referenz: Styles für Produkte
Referenz: Styles für Produktbewertung
Referenz: Styles für Blättern in Kategorien und Produkten
Referenz: Styles für Dropdown-Liste der Währungen
Referenz: Styles für Anmeldung
Referenz: Styles für Rechnungs-und abweichende Lieferadresse
Referenz: Styles für Bankverbindung
Referenz: Styles für multiple Kundendaten
Referenz: Styles für Trusted-Shops-Informationen
Referenz: Styles für Varianten der Merkliste
Referenz: Styles für Fehlermeldungen beim Online-Clearing
Referenz: Styles für kostenpflichtige Zusatzleistungen
Referenz: Styles für speicherbare Warenkörbe
Referenz: Styles für WWS-Infodatenschnittstelle
Referenz: Styles für Wunschliste
Referenz: Styles für Zustimmung zur Werbung
Referenz: Styles für Produktvergleich
Referenz: Styles für Filter auf Kategorieebene
7 SEO-optimierte Auslieferung von CSS-Dateien
Eines der wichtigsten Kriterien für ein gutes Suchmaschinen-Ranking ist die Performance. Gerade CSS-Dateien stellen hier auf Grund ihrer großen Datenmengen immer häufiger ein großes Problem dar. Wie Sie trotzdem nicht auf Ihr Design verzichten und eine optimale Performance erzielen können, erfahren Sie hier:
▪CSS-Bereitstellung optimieren
https://developers.google.com/speed/docs/insights/MinifyResources
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
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