Finora in questa serie, abbiamo eseguito la maggior parte dei passaggi richiesti per l'ottimizzazione in loco. Ora, nella terza parte di questa serie, imparerai come ottimizzare l'installazione di Magento per ridurre il tempo di caricamento della pagina e come integrare rich snippet per rendere i risultati di ricerca più professionali.

Aumento della velocità

Ridurre il tempo di caricamento della pagina è una preoccupazione per tutti gli sviluppatori web. Magento, essendo un gigante di un CMS, non è molto veloce, ma apportare alcune piccole modifiche può aumentare le sue prestazioni.

La riduzione del tempo di caricamento della pagina è necessaria non solo per migliorare l'esperienza utente e ridurre la frequenza di rimbalzo, ma anche per aiutarti a classificarti bene nei motori di ricerca. Dal 2010, Google attribuisce particolare importanza al tempo di caricamento della pagina di un sito Web nel determinare il suo posizionamento di pagina. Qui discuteremo brevemente alcuni modi rapidi e fattibili per ridurre il tempo di caricamento della pagina del tuo negozio Magento.

Il modo più rapido e semplice per rendere veloce il tuo sito Magento è apportare alcune piccole modifiche nel pannello di amministrazione di Magento. Innanzitutto, abiliteremo la cache di Magento. Questo piccolo passaggio riduce il tempo di caricamento della pagina dal 30% al 40%. 

Quando la cache Magento è abilitata, Magento non deve caricare tutte le risorse della pagina dai server in ogni richiesta di pagina. Per abilitare la cache Magento, vai a Sistema> Gestione cache. Seleziona tutti i tipi di cache e dall'elenco in alto a destra seleziona Abilitare e inviare.

In secondo luogo, dobbiamo unire i nostri file CSS e JS prima del rendering della pagina. Andremo a Sistema> Configurazione> Sviluppatore. Qui vedrai Unisci i file JavaScript e Unisci file CSS. Impostare entrambi questi campi su sì, e colpisci Salvare.

Questa fusione di file CSS e JS ridurrà il numero di richieste al server durante il caricamento della pagina. Ciò ridurrà sostanzialmente il tempo di caricamento della pagina.

Successivamente, eseguiremo il processo di compilazione di Magento. La funzione di compilazione di Magento compilerà tutti i file Magento per creare un singolo includere percorso per migliorare le prestazioni. Questo riduce il tempo di caricamento della pagina dal 25% al ​​50%. 

Per utilizzare questo strumento, la directory include e il file includes / config.php devono essere entrambi scrivibili Per iniziare il processo di compilazione, andare a Sistema> Strumenti> Compilazione. Nell'angolo in alto a destra, vedrai il Esegui il processo di compilazione pulsante. Cliccaci sopra e avrai finito.

Successivamente, abbiamo alcuni passaggi avanzati per ridurre il tempo di caricamento della pagina che richiede la modifica del contenuto in .htaccess file. Ce ne potrebbero essere molti .htaccess file in una directory Magento, ma qui modificheremo quello che si trova nella directory root. 

Tramite la .htaccess file, prima faremo la codifica del contenuto, che comprimerà il file prima di inviarlo all'agente richiedente. Ciò ridurrà il tempo di download dei file. In secondo luogo, aggiungeremo la durata di scadenza alle intestazioni. Ciò significa che durante il download delle risorse, il browser controllerà se le intestazioni sono scadute. In caso contrario, verranno utilizzate le versioni memorizzate nella cache.

Per abilitare la compressione, decommentare questa riga di codice nel valore predefinito .htaccess file, cioè rimuovere il # prima php_flag zlib.output_compression on:

############################################# abilita la compressione html risultante php_flag zlib.output_compression on #####################################################################

Successivamente, per impostare la compressione gzip in azione, aggiungeremo queste righe nel file .htaccess file:

############################################ # Inserimento del filtro su tutto il contenuto SetOutputFilter DEFLATE # Inserimento del filtro solo sui tipi di contenuto selezionati AddOutputFilterByType DEFLATE testo / testo html / testo semplice / testo xml / testo css / applicazione javascript / javascript # Risoluzione di alcuni problemi di Netscape 4.x BrowserMatch ^ Mozilla / 4 gzip-only-text / html # Affrontare alcuni problemi di Netscape 4.06-4.08 BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip # Scenario: MSIE si maschera da Netscape BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html # Comando per non comprimere le immagini SetEnvIfNoCase Request_URI \. (?: gif | jpe? G | png) $ no-gzip dont-vary # Gestire i proxy correttamente Intestazione append Vary User-agent env =! Dont-vary ############ ################################

Infine, poniamo un limite di scadenza sulle intestazioni, aggiungendo questo codice nel .htaccess file:

############################################  # Innanzitutto abilitare le scadenze ExpiresActive On # Scadenza predefinita ExpiresDefault "access plus 1 month" # per favicon ExpiresByType image / x-icon "access plus 1 year" # Imposta immagini scadenza expiresByType image / gif "access plus 1 month" ExpiresByType image / png "access plus 1 month" ExpiresByType image / jpg "access plus 1 month" ExpiresByType image / jpeg "access plus 1 month" # Imposta CSS Expiry ExpiresByType text / css "access 1 month" # Per Javascript Expiry ExpiresByType application / javascript "accesso più 1 anno "  ############################################

Una cosa molto importante da considerare per migliorare la velocità del tuo negozio Magento è la scelta del server. Questo articolo di Tuts + fa un ottimo lavoro per spiegare i fattori che dovresti considerare per assicurarti che la tua scelta di server sia adatta a Magento.

Implementazione di rich snippet

Ora è il momento di escogitare un modo per implementare schemi o rich snippet nel nostro negozio Magento. Non solo renderanno i risultati di ricerca più professionali e li faranno risaltare, ma aumenteranno anche la percentuale di clic sulle pagine di ricerca. 

I rich snippet che integreremo in questo tutorial sono prodotto, offerta e valutazione aggregata, e alla fine ti darò alcune risorse sull'implementazione dei breadcrumb e degli schemi organizzativi.

Per impostazione predefinita, i risultati nelle pagine dei risultati del motore di ricerca hanno il seguente aspetto:

Attraverso l'implementazione di rich snippet, possono emergere e apparire così:

Tieni presente che l'implementazione di questi snippet richiede la modifica dei file modello. Avrai bisogno di avere una conoscenza di base di HTML e PHP per implementarli. Inoltre, assicurarsi di conservare un backup di ogni file prima di modificarlo.

Inizieremo implementando lo schema del prodotto. Apri questo file nel tuo editor: app / design / frontend / [pacchetto] / [tema] /template/catalog/product/view.phtml e aggiungi il codice evidenziato nel prodotto-view classe.

Ora taggliamo il nome del prodotto, la descrizione e l'immagine. Per contrassegnare il nome di un prodotto, trovare il h1 tag contenente il nome del prodotto e aggiungere il seguente codice in esso:

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

Ora per taggare la descrizione, trova la descrizione del prodotto div e assicurati che includa gli attributi nel seguente codice:

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

Avanti, in app / design / frontend / [pacchetto] / [tema] /template/catalog/product/view/media.phtml, trova i tag immagine (ne troverai due esempi nelle righe 40 e 62 se utilizzi il tema predefinito) e assicurati che includano quanto segue:

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

Ora aggiungeremo le informazioni sulla classificazione aggregata del prodotto. Per questo, apri questo file:

app / design / frontend / [pacchetto] / [tema] /template/review/helper/summary.phtml

Sostituisci il codice completo di questo file con il codice riportato di seguito:

getReviewsCount ()):?> 
getRatingSummary ()):?> 
 
 
  
 getReviewsUrl ()?> ">__ ('% d Review (s)', $ this-> getReviewsCount ())?> | getReviewsUrl ()?> # review-form ">__ ('Aggiungi la tua opinione')?> 
    
 getDisplayIfEmpty ()):?> 
 getReviewsUrl ()?> # review-form "> __ ('Sii il primo a recensire questo prodotto')?>  
 

Ora per visualizzare l'ambito dell'offerta del prodotto, apri il seguente file:

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

Aggiungi questo codice all'inizio del codice, dopo i commenti iniziali (che dovrebbero essere intorno alla riga 28):

  isAvailable ()):?> 
  __ ('Disponibilità:')?> __ ('In magazzino')?> 
  
  __ ('Disponibilità:')?> __ ("Non disponibile")?> 
 

E alla fine del file, aggiungi questo codice:

... 

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