Оптимизация работы шаблонов Shopify

Shopify-Vorlagen optimieren

Betrachten wir die Optimierung der Vorlage am Beispiel der Website casaeleganza .com - wir optimieren die Hauptseite.

Warum brauchen Sie eine Optimierung:

Bei der Anzeige von Suchergebnissen berücksichtigt Google Ranking- und Store-Optimierungsmetriken. Geschäfte mit höheren Punktzahlen befinden sich eher an den ersten Positionen der Suchergebnisse.

Tools, die Ihnen helfen, die Richtung der Optimierung zu verstehen:

Zum Zeitpunkt des Optimierungsstarts hat das Google PageSpeed ​​​​Tool eine Bewertung von 72 für die Desktop-Version gemeldet (Mindeststufe ist 80). Die Anzahl der hochgeladenen Dateien - 162. Seitengröße - 3,2 MB.

Zu berücksichtigende Merkmale der Optimierung:

  1. Shopify läuft über HTTP 1.1 – die Anzahl der gleichzeitig hochgeladenen Dateien ist also begrenzt – dies verlangsamt die Anzeigegeschwindigkeit des Shops.
  2. Aufgrund von Einschränkungen der Shopify-Plattform können nicht alle Empfehlungen von Google PageSpeed ​​erfüllt werden
  3. Bevor Sie mit der Optimierung beginnen, überprüfen Sie die Liste der installierten Anwendungen und entfernen Sie alle unnötigen Anwendungen

Optimierungsvorschläge:

1. Verwenden Sie Ihren Browser-Cache

Dieser Parameter kann nicht gesteuert werden - es handelt sich um eine Shopify-Einschränkung.

2. Entfernen Sie JavaScript und CSS, die den Seitenanfang blockieren

2.1. JS-Optimierung

Um zu verhindern, dass Skripte das Laden von Inhalten blockieren, müssen Sie den Aufruf aller Skripte überprüfen und den Befehl "defer" hinzufügen. Der async-Befehl sollte mit Kenntnissen über die Funktionsweise von Skripten verwendet werden.

 JS-Optimierung für Shopify

2.2. CSS optimieren

2.2.1. Es ist erforderlich, verschiedene CSS-Dateien so weit wie möglich in einer gemeinsamen Datei zu gruppieren (HTTP 1.1-Beschränkung). Nach der Optimierung bleiben noch 2 Dateien übrig: eine zum Vorladen und die zweite zum Nachladen der Seite.

2.2.2. Um CSS nachzuladen, verwenden Sie den Befehl preload im Link-Tag und Skript das das Vorladen für inkompatible Browser implementiert .

 CSS für Shopify optimieren

2.2.3. Ideale CSS-Vorbereitung für jeden Seitentyp (Home, Collection, Produkt, Seite, Blog). Dadurch wird die Seitenrendering-Geschwindigkeit verringert.

2.2.4. Bei der Anzeige der Hauptseite wurde die Option Critical CSS verwendet - wenn alle für die Anzeige der Hauptseite notwendigen CSS-Befehle in einer separaten Datei markiert sind und die restlichen CSS-Befehle über Load CSS geladen werden. Der Dienst Critical Pass CSS Generator wird verwendet, um ein CSS-Kurzformdatei ... Um das Ranking zu erhöhen, wird der Inhalt der CriticalCSS-Datei in den HTML-Code der Seite eingebettet.

CSS für Shopify optimieren

3. Optimieren Sie das Laden von sichtbaren Inhalten

In meinem Fall nahm der Schieberegler den größten Teil des sichtbaren Teils ein. Aber aufgrund des Lazy Loading-Mechanismus gab es einen leeren Platz auf dem Bildschirm. Um dieses Problem zu lösen, habe ich die Anzeige des ersten Slider-Bildes aktiviert.

Optimieren der Shopify Store-Geschwindigkeit

4. Optimieren Sie Ihre Bilder

Google PageSpeed ​​​​wies darauf hin, dass die Größe einiger Bilder um 30 % reduziert werden kann. Suchen Sie nach Dateitypen (normalerweise JPEG), Dateigrößen (bis zu 2000 Pixel) und Auflösung (bis zu 100 Pixel pro Zoll). Diese Empfehlung ist mit Vorsicht zu genießen, da Optimierte Bilder sehen nicht immer gut aus.

5. JavaScript minimieren

 JS-Minifizierung für Shopify

5.1. Es ist erforderlich, verschiedene js-Dateien so weit wie möglich in einer gemeinsamen Datei zu gruppieren (HTTP 1.1-Einschränkung).

5.2. Prüfen Sie beim Hinzufügen, ob der Quelltext der Skripte verkleinert ist und verkleinern Sie ihn ggf. mit dem Dienst Minifier . Wenn die Skripte den Quellcode für Liquid enthalten, sollte die Minimierung aufgegeben (oder teilweise minimiert) werden.

6. Verkleinere dein CSS

Prüfen Sie beim Hinzufügen, ob der Quelltext der CSS-Dateien verkleinert ist und verkleinern Sie ihn ggf. mit dem Dienst Minifier . Wenn die CSS den Quellcode für Liquid enthält, sollte die Minimierung aufgegeben (oder teilweise minimiert) werden.

7. Komprimierung aktivieren

Dieser Parameter kann nicht gesteuert werden - Shopify-Einschränkung

8. HTML minimieren

8.1. Verkleinern Sie CSS-Stile und js-Text mit Minifier . < / p>

8.2. Entfernen Sie zusätzliche Leerzeichen im HTML-Text. Das Problem hängt mit der Arbeit der Befehle der flüssigen Sprache zusammen. Befehle, die keinen Text ausgeben, erzeugen eine leere Zeile im HTML-Text. Um dies zu vermeiden, fügen Sie am Anfang und Ende des Befehls einen Bindestrich hinzu.

{% comment%} würde beispielsweise wie {% - comment -%} aussehen.

PS Um die Ladegeschwindigkeit der mobilen Version der Website zu optimieren, hat Google die AMP-Technologie entwickelt, die Ladezeit des Shopify-Shops .