Bislang haben wir in dieser Serie die erforderlichen Schritte für die Optimierung vor Ort vorgenommen. Im dritten Teil dieser Serie erfahren Sie, wie Sie Ihre Magento-Installation optimieren, um die Ladezeit der Seite zu reduzieren, und wie Sie Rich Snippets integrieren, um die Suchergebnisse professioneller zu gestalten.

Geschwindigkeit erhöhen

Die Reduzierung der Seitenladezeit ist ein Problem für alle Webentwickler. Magento, ein Gigant eines CMS, ist nicht sehr schnell, aber kleine Änderungen können seine Leistung steigern.

Die Verkürzung der Seitenladedauer ist nicht nur zur Verbesserung der Benutzererfahrung und zur Verringerung der Absprungrate erforderlich, sondern auch, um Sie bei der Positionierung in Suchmaschinen zu unterstützen. Seit 2010 legt Google bei der Bestimmung des Seitenrankings besonderen Wert auf die Ladezeit einer Website. Hier besprechen wir kurz einige Möglichkeiten, um die Seitenladezeit Ihres Magento-Stores zu reduzieren.

Der schnellste und einfachste Weg, um Ihre Magento-Site schnell zu machen, besteht in einigen kleinen Änderungen im Magento-Admin-Panel. Zunächst aktivieren wir den Magento-Cache. Allein dieser kleine Schritt reduziert die Ladezeit der Seite um 30% bis 40%.. 

Wenn der Magento-Cache aktiviert ist, muss Magento bei jeder Seitenanforderung nicht alle Seitenressourcen von den Servern laden. Um den Magento-Cache zu aktivieren, gehen Sie zu System> Cache-Verwaltung. Wählen Sie alle Cache-Typen aus und wählen Sie aus der Dropdown-Liste oben rechts die Option aus Aktivieren und einreichen.

Zweitens müssen wir unsere CSS- und JS-Dateien vor dem Seiten-Rendering zusammenführen. Wir gehen nach System> Konfiguration> Entwickler. Hier wirst du sehen JavaScript-Dateien zusammenführen und CSS-Dateien zusammenführen. Setzen Sie diese beiden Felder auf Ja, und schlagen sparen.

Durch das Zusammenführen von CSS- und JS-Dateien wird die Anzahl der Anforderungen an den Server reduziert, während die Seite geladen wird. Dadurch wird die Ladezeit der Seite nochmals erheblich reduziert.

Als Nächstes führen wir den Magento-Kompilierungsprozess aus. Die Kompilierungsfunktion von Magento kompiliert alle Magento-Dateien, um eine einzige zu erstellen umfassen Weg für mehr Leistung. Dies reduziert die Ladezeit der Seite um 25% bis 50%.. 

Um dieses Tool zu verwenden, das Verzeichnis beinhaltet und die Datei Includes / config.php müssen beide beschreibbar sein. Um den Kompiliervorgang zu starten, gehen Sie zu System> Tools> Zusammenstellung. In der oberen rechten Ecke sehen Sie die Kompilierungsprozess ausführen Taste. Klicken Sie darauf und Sie sind fertig.

Als Nächstes haben wir einige erweiterte Schritte zum Reduzieren der Seitenladezeit, die das Ändern von Inhalten in der .htaccess Datei. Es könnte viele geben .htaccess Dateien in einem Magento-Verzeichnis, aber hier bearbeiten wir die im Stammverzeichnis. 

Durch die .htaccess Datei, werden wir zuerst die Inhaltskodierung vornehmen, die die Datei komprimiert, bevor sie an den anfordernden Agenten gesendet wird. Dies verringert die Downloadzeit von Dateien. Zweitens fügen wir den Headern eine Verfallszeit hinzu. Das bedeutet, dass der Browser beim Herunterladen von Ressourcen überprüft, ob die Header abgelaufen sind. Wenn dies nicht der Fall ist, werden die zwischengespeicherten Versionen verwendet.

Um die Komprimierung zu aktivieren, deaktivieren Sie diese Codezeile in Ihrer Standardeinstellung .htaccess Datei entfernen, d. h # Vor php_flag zlib.output_compression ein:

########################################### # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ################################################################# # zlib.output_compression on ##########################################

Um die gzip-Komprimierung in Gang zu setzen, fügen wir diese Zeilen in die .htaccess Datei:

########################################## # # Filter für alle Inhalte einfügen SetOutputFilter DEFLATE # Einfügen eines Filters nur für ausgewählte Inhaltstypen AddOutputFilterByType DEFLATE Text / HTML Text / Klartext / XML Text / CSS Text / Javascript Anwendung / Javascript # Einige Netscape 4.x-Probleme lösen BrowserMatch ^ Mozilla-4-only-text / html # Einige Netscape 4.06-4.08-Probleme in Angriff nehmen BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip # Szenario: MSIE-Masqueraden als Netscape BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html # Befehl zum Nichtkomprimieren von Bildern SetEnvIfNoCase Request_URI \. (?: gif | jpe? G | png) $ no-gzip nicht-variieren # Proxies korrekt verarbeiten Header anhängen Vary User-Agent env =! Dont-variables ############ #################################

Lassen Sie uns zum Schluss ein Ablauflimit für die Header setzen, indem Sie diesen Code in die .htaccess Datei:

###########################################  # Zuerst aktivieren Sie Ablaufdaten ExpiresActive On # Standardablauf ExpiresDefault "Zugriff plus 1 Monat" # Für das Favicon ExpiresByType-Bild / X-Icon "Zugriff plus 1 Jahr" # Set Bilder Ablaufen AblaufenByType / Gif "Zugriff plus 1 Monat" ExpiresByType-Bild / png "Zugriff plus 1 Monat" ExpiresByType image / jpg "Zugriff plus 1 Monat" ExpiresByType Image / jpeg "Zugriff plus 1 Monat" # CSS-Ablauf festlegen ExpiresByType text / css "Zugriff 1 Monat" # Für Javascript Ablaufdatum "/ Typ" Anwendung / Javascript " plus 1 Jahr "  ###########################################

Eine sehr wichtige Sache, die Sie berücksichtigen sollten, um die Geschwindigkeit Ihres Magento-Stores zu verbessern, ist die Auswahl des Servers. In diesem Tuts + -Artikel werden die Faktoren erläutert, die Sie berücksichtigen sollten, um sicherzustellen, dass Ihre Serverauswahl zu Magento passt.

Rich Snippets implementieren

Nun ist es an der Zeit, einen Weg zu finden, um Schemas oder Rich Snippets in unserem Magento-Shop zu implementieren. Sie sorgen nicht nur dafür, dass Ihre Suchergebnisse professioneller aussehen und sie hervorheben, sondern auch die Klickrate auf Suchseiten erhöhen. 

Die reichhaltigen Ausschnitte, die wir in dieses Lernprogramm integrieren werden, sind Produkt-, Angebots- und Gesamtbewertung. Am Ende gebe ich Ihnen einige Ressourcen zur Implementierung von Breadcrumbs und Organisationsschemas.

Standardmäßig sehen die Ergebnisse auf den Ergebnisseiten von Suchmaschinen folgendermaßen aus:

Durch die Implementierung von Rich-Snippets können sie auffallen und folgendermaßen aussehen:

Bitte beachten Sie, dass die Implementierung dieser Snippets die Bearbeitung von Vorlagendateien erfordert. Sie benötigen ein grundlegendes Verständnis von HTML und PHP, um sie implementieren zu können. Stellen Sie außerdem sicher, dass Sie eine Sicherungskopie aller Dateien erstellen, bevor Sie sie bearbeiten.

Wir beginnen mit der Einführung des Produktschemas. Öffnen Sie diese Datei in Ihrem Editor: app / design / frontend / [package] / [theme] /template/catalog/product/view.phtml und fügen Sie den hervorgehobenen Code in das ein Produktansicht Klasse.

Lassen Sie uns nun den Produktnamen, die Beschreibung und das Bild mit Tags versehen. Suchen Sie zum Markieren eines Produktnamens nach h1 Tag mit dem Produktnamen und fügen Sie den folgenden Code hinzu:

 productAttribute ($ _ product, $ _ product-> getName (), 'name')?> 

Um die Beschreibung mit einem Tag zu versehen, suchen Sie die Produktbeschreibung div Stellen Sie sicher, dass die Attribute im folgenden Code enthalten sind:

 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?> 

Als nächstes in app / design / frontend / [package] / [theme] /template/catalog/product/view/media.phtml, Finden Sie die Image-Tags (zwei Zeilen davon finden Sie in den Zeilen 40 und 62, wenn Sie das Standarddesign verwenden), und stellen Sie sicher, dass sie Folgendes enthalten:

$ _img = ''; $ _img = '';

Jetzt fügen wir Informationen zur Gesamtbewertung des Produkts hinzu. Öffnen Sie dazu diese Datei:

app / design / frontend / [package] / [theme] /template/review/helper/summary.phtml

Ersetzen Sie den vollständigen Code dieser Datei durch den unten angegebenen Code:

getReviewsCount ()):?> 
getRatingSummary ()):?> 
 
 
  
 getReviewsUrl ()?> ">__ ('% d Review (s)', $ this-> getReviewsCount ())?> | getReviewsUrl ()?> # review-form ">__ ("Ihre Bewertung hinzufügen")?> 
    
 getDisplayIfEmpty ()):?> 
 getReviewsUrl ()?> # review-form "> __ ('Erstes Produkt bewerten')?>  
 

Öffnen Sie nun die folgende Datei, um den Umfang des Produktangebots anzuzeigen:

app / design / frontend / [package / [theme] /template/catalog/product/view/type/default.phtml

Fügen Sie diesen Code am Anfang des Codes nach den ersten Kommentaren ein (die in Zeile 28 stehen sollten):

  isAvailable ()):?> 
  __ ('Verfügbarkeit:')?> __ ("auf Lager")?> 
  
  __ ('Verfügbarkeit:')?> __ ("Nicht vorrätig")?> 
 

Fügen Sie am Ende der Datei diesen Code hinzu:

… 

 Währung ($ _ price + $ _weeeTaxAmount, true, true)); ?>