Tot nu toe hebben we in deze reeks de meeste van de vereiste stappen voor on-site optimalisatie genomen. Nu, in het derde deel van deze serie, leert u hoe u uw Magento-installatie kunt optimaliseren om de laadtijd van de pagina te verminderen en hoe u rich snippets kunt integreren om uw zoekresultaten professioneler te maken.

Snelheid verhogen

Het verminderen van de laadtijd van pagina's is een zorg voor alle webontwikkelaars. Magento, een gigant van een CMS, is niet erg snel, maar het uitvoeren van enkele kleine aanpassingen kan de prestaties verbeteren.

Het verminderen van de laadtijd van de pagina is niet alleen nodig om de gebruikerservaring te verbeteren en het bouncepercentage te verminderen, maar ook om u te helpen bij een goede positie in zoekmachines. Sinds 2010 hecht Google veel waarde aan het laden van de pagina's van een website bij het bepalen van de paginaclassificatie. Hier bespreken we kort enkele snelle en haalbare manieren om de laadtijd van uw Magento-winkel te verminderen.

De snelste en gemakkelijkste manier om uw Magento-site snel te maken, is door een paar kleine wijzigingen aan te brengen in het Magento-beheerdersdashboard. Allereerst zullen we de Magento-cache inschakelen. Deze kleine stap alleen zal de paginalaadtijd verminderen met 30% tot 40%. 

Wanneer de Magento-cache is ingeschakeld, hoeft Magento niet alle paginabronnen van de servers bij elke paginavraag te laden. Ga naar om Magento-cache in te schakelen Systeem> Cache Management. Selecteer alle cachetypen en selecteer in de vervolgkeuzelijst rechts boven in de hoek in staat stellen en indienen.

Ten tweede moeten we onze CSS- en JS-bestanden samenvoegen voordat de pagina wordt gerenderd. We gaan naar Systeem> Configuratie> Ontwikkelaar. Hier zie je het Voeg JavaScript-bestanden samen en Samenvoegen CSS-bestanden. Stel beide velden in op Ja, en druk op Opslaan.

Deze samenvoeging van CSS- en JS-bestanden vermindert het aantal aanvragen naar de server terwijl de pagina wordt geladen. Dit zal de paginalaadtijd aanzienlijk verminderen.

Vervolgens voeren we het Magento-compilatieproces uit. De compilatiefunctie van Magento compileert alle Magento-bestanden om een ​​single te maken omvatten pad voor betere prestaties. Dit vermindert de laadtijd van de pagina met 25% tot 50%. 

Om deze tool te gebruiken, is de directory omvat en het bestand includes / config.php moeten beide beschrijfbaar zijn. Ga naar om het compilatieproces te starten Systeem> Hulpmiddelen> Compilatie. In de rechterbovenhoek ziet u de Voer het compilatieproces uit knop. Klik erop en je bent klaar.

Vervolgens hebben we enkele geavanceerde stappen voor het verminderen van de laadtijd van de pagina waarvoor inhoud moet worden gewijzigd in de .htaccess het dossier. Er kunnen er veel zijn .htaccess bestanden in een Magento-map, maar hier zullen we die in de hoofdmap bewerken. 

Door het .htaccess bestand, zullen we eerst de inhoudscodering doen, waardoor het bestand wordt gecomprimeerd voordat het naar de verzoekende agent wordt verzonden. Dit zal de downloadtijd van bestanden verminderen. Ten tweede voegen we de vervaltijd toe aan headers. Dit betekent dat tijdens het downloaden van bronnen, de browser zal controleren of de headers zijn verlopen. Als dat niet het geval is, worden de versies in de cache gebruikt.

Als u compressie wilt inschakelen, verwijdert u deze regel code uit uw standaard .htaccess bestand, d.w.z. verwijder de # voor php_flag zlib.output_compression op:

############################################ # enable resulterende html-compressie php_flag zlib.output_compression op ####################

Als u vervolgens gzip-compressie in actie wilt instellen, voegen we deze regels toe aan de .htaccess het dossier:

#################### # Filter invoegen op alle inhoud SetOutputFilter DEFLATE # Filter alleen invoegen op geselecteerde inhoudstypen AddOutputFilterByType DEFLATE tekst / html-tekst / platte tekst / xml-tekst / css tekst / javascript-toepassing / javascript # Aanpak van enkele Netscape 4.x-problemen BrowserMatch ^ Mozilla / 4 gzip-only-text / html # Aanpak van enkele Netscape 4.06-4.08-problemen BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip # Scenario: MSIE speelt zich af als Netscape BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html # Opdracht voor het niet comprimeren van afbeeldingen SetEnvIfNoCase Request_URI \. (?: gif | jpe? G | png) $ no-gzip dont-vary # Handling Proxies correct Header append Vary User-Agent env =! Dont-vary ############ ################################

Laat als laatste een vervallimiet op de headers staan, door deze code toe te voegen aan de .htaccess het dossier:

############################################  # Allereerst inschakelen vervalt VerlooptActief aan # Standaard vervaldatum vervalt Standaard "toegang plus 1 maand" # Voor favicon VerlopenByType afbeelding / x-pictogram "toegang plus 1 jaar" # Set Afbeeldingen Vervaldatum verlooptByType afbeelding / gif "toegang plus 1 maand" VervaltByType afbeelding / png "toegang plus 1 maand" ExpiresByType image / jpg "toegang plus 1 maand" ExpiresByType image / jpeg "toegang plus 1 maand" # CSS-vervaldatum instellenByType tekst / CSS "toegang 1 maand" # voor Javascript vervalt verlopenByType-toepassing / javascript "toegang plus 1 jaar "  ############################################

Een zeer belangrijk ding om te overwegen voor het verbeteren van de snelheid van uw Magento-winkel is de keuze van de server. Dit Tuts + -artikel geeft een goed beeld van de factoren die u moet overwegen om ervoor te zorgen dat uw serverkeuze geschikt is voor Magento.

Rich snippets implementeren

Nu is het tijd om een ​​manier te bedenken om schema's of rich snippets in onze Magento-winkel te implementeren. Ze zorgen er niet alleen voor dat uw zoekresultaten er professioneler uitzien en helpen ze op te vallen, maar ze verhogen waarschijnlijk ook de klikfrequentie op zoekpagina's.. 

De rich snippets die we in deze zelfstudie integreren, zijn product-, aanbieding- en verzamelclassificatie en uiteindelijk geef ik u enkele bronnen voor het implementeren van broodkruimels en organisatieschema's.

Standaard zien de resultaten in pagina's met zoekmachine resultaten er als volgt uit:

Door het implementeren van rich snippets kunnen ze opvallen en er als volgt uitzien:

Houd er rekening mee dat voor het implementeren van deze fragmenten sjabloonbestanden moeten worden bewerkt. U moet enige basiskennis hebben van HTML en PHP om deze te implementeren. Zorg er ook voor dat u een back-up van elk bestand bewaart voordat u het bewerkt.

We beginnen met het implementeren van het productschema. Open dit bestand in je editor: app / design / frontend / [package] / [thema] /template/catalog/product/view.phtml en voeg de gemarkeerde code toe aan de productspecifieke view klasse.

Laten we nu de productnaam, beschrijving en afbeelding taggen. Om een ​​productnaam te labelen, zoekt u de h1 tag met de productnaam en voeg de volgende code erin toe:

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

Om de beschrijving nu te labelen, vind je de productbeschrijving div en zorg ervoor dat het de attributen in de volgende code bevat:

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

Volgende, in app / design / frontend / [package] / [thema] /template/catalog/product/view/media.phtml, vind de afbeeldingslabels (u vindt twee exemplaren op regels 40 en 62 als u het standaardthema gebruikt) en zorg ervoor dat ze het volgende bevatten:

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

Nu voegen we productaggregaatbeoordelingsinformatie toe. Open daarvoor dit bestand:

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

Vervang de volledige code van dit bestand door de onderstaande code:

getReviewsCount ()):?> 
getRatingSummary ()):?> 
 
 
  
 getReviewsUrl ()?> ">__ ('% d Review (s)', $ this-> getReviewsCount ())?> | getReviewsUrl ()?> # beoordelingsformulier ">__ ('Voeg uw beoordeling toe')?> 
    
 getDisplayIfEmpty ()):?> 
 getReviewsUrl ()?> # beoordelingsformulier "> __ ('Wees de eerste om dit product te beoordelen')?>  
 

Om het bereik van het productaanbod weer te geven, opent u het volgende bestand:

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

Voeg deze code toe aan het begin van de code, na de eerste opmerkingen (die rond regel 28 zouden moeten zijn):

  is beschikbaar ()):?> 
  __ ('Beschikbaarheid:')?> __ ('In voorraad')?> 
  
  __ ('Beschikbaarheid:')?> __ ('Niet op voorraad')?> 
 

En voeg aan het einde van het bestand deze code toe:

... 

 valuta ($ _ prijs + $ _weeeTaxAmount, true, true)); ?>