Betrachten Sie die Optimierung der Vorlage am Beispiel der Website casaeleganza.com - optimieren Sie die Hauptseite.
Warum eine Optimierung erforderlich ist:
Bei der Anzeige von Suchergebnissen berücksichtigt Google das Ranking und die Optimierung des Shops. Shops mit höheren Raten erscheinen eher an den ersten Positionen der Suchergebnisse.
Tools, die Ihnen helfen, die Optimierungsrichtungen zu verstehen:
Zum Zeitpunkt des Starts der Optimierung meldete das Google PageSpeed Tool eine Bewertung von 72 für die Desktop-Version (die Mindeststufe ist 80). Anzahl der hochgeladenen Dateien - 162. Seitengröße - 3,2 MB.
Merkmale der Optimierung, die berücksichtigt werden müssen:
- Shopify läuft auf dem HTTP 1.1-Protokoll – daher ist die Anzahl der Dateien, die gleichzeitig hochgeladen werden können, begrenzt – dies verringert die Anzeigegeschwindigkeit des Shops.
- Aufgrund von Einschränkungen der Shopify-Plattform können nicht alle Empfehlungen von Google PageSpeed befolgt werden
- 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 den Browser-Cache
Dieser Parameter kann nicht gesteuert werden - eine Einschränkung von Shopify.
2. Entfernen Sie JavaScript und CSS, die die Anzeige des oberen Seitenbereichs 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 muss mit einem Verständnis der Funktionsweise von Skripts verwendet werden.
2.2. CSS-Optimierung
2.2.1. Es ist erforderlich, verschiedene CSS-Dateien so weit wie möglich in einer gemeinsamen Datei zusammenzufassen (Einschränkung von HTTP 1.1). Nach der Optimierung blieben 2 Dateien übrig: eine zum Vorladen und die zweite zum Nachladen der Seite.
2.2.2. Um CSS nachzuladen, verwenden Sie den preload-Befehl im Link-Tag und Skript , das Preload für inkompatible Browser implementiert .
2.2.3. Perfekte CSS-Aufbereitung für jeden Seitentyp (Startseite, Sammlung, Produkt, Seite, Blog). Aus diesem Grund wird sich herausstellen, dass die Anzeigegeschwindigkeit der Seite verringert wird.
2.2.4. Beim Anzeigen der Hauptseite wurde die Option Critical CSS verwendet - wenn alle CSS-Befehle, die zum Anzeigen der Hauptseite erforderlich sind, in einer separaten Datei bereitgestellt werden und die restlichen CSS-Befehle über Load CSS geladen werden. Der Critical Pass CSS Generator- Dienst wird verwendet, um eine verkürzte CSS-Datei zu generieren. Um die Bewertung zu erhöhen, wird der Inhalt der CriticalCSS-Datei in das HTML der Seite eingebettet.
3. Optimieren Sie das Laden sichtbarer Inhalte
In meinem Fall nahm der Schieberegler den größten Teil des sichtbaren Teils ein. Aber aufgrund des faulen Lademechanismus war auf dem Bildschirm ein leerer Bereich. Um dieses Problem zu lösen, habe ich die Anzeige des ersten Bildes des Schiebereglers eingeschaltet.
4. Optimieren Sie Ihre Bilder
Google PageSpeed stellte fest, dass einige Bilder um bis zu 30 % verkleinert werden können. Achten Sie auf Dateitypen (meist JPEG), deren Größe (bis 2000 Pixel) und Auflösung (bis 100 ppi). Diese Empfehlung sollte mit Vorsicht angegangen werden, da nicht immer optimierte Bilder sehen gut aus.
5. JavaScript minimieren
5.1. Es ist erforderlich, verschiedene js-Dateien so weit wie möglich in einer gemeinsamen Datei zusammenzufassen (Einschränkung von HTTP 1.1).
5.2. Prüfen Sie beim Hinzufügen, ob der Quelltext der Skripte minimiert ist und minimieren Sie ihn ggf. über den Dienst Minifizierer . Wenn die Skripte Liquid-Quellcode enthalten, sollte die Minimierung aufgegeben werden (oder eine teilweise Minimierung durchgeführt werden).
6. CSS minimieren
Prüfen Sie beim Hinzufügen, ob der Quelltext von CSS-Dateien minimiert ist, und minimieren Sie ihn gegebenenfalls mithilfe des Dienstes Minifizierer . Wenn CSS Quellcode auf Liquid enthält, sollte die Minimierung aufgegeben werden (oder eine teilweise Minimierung durchgeführt werden).
7. Schalten Sie die Komprimierung ein
Dieser Parameter kann nicht gesteuert werden - Shopify-Einschränkung
8. Minimieren Sie HTML
8.1. Minimieren Sie CSS-Stile und js-Text mit einem Dienst Minifizierer .
8.2. Entfernen Sie zusätzliche Leerzeichen im HTML-Text. Das Problem hängt mit der Bedienung der flüssigen Sprachbefehle zusammen. Befehle, die keinen Text ausgeben, bilden im HTML-Text einen leeren String. Um dies zu vermeiden, müssen Sie am Anfang und am Ende des Befehls einen Bindestrich einfügen.
Zum Beispiel würde {% comment %} so aussehen {%- comment -%} .
PS Um die Ladegeschwindigkeit der mobilen Version der Website zu optimieren, hat Google die AMP-Technologie entwickelt, die beschleunigt Ladezeit des Shopify-Shops