Augmenter la vitesse et ajouter des extraits enrichis dans Magento

Jusqu'à présent, dans cette série, nous avons effectué la plupart des étapes nécessaires à l'optimisation sur site. Maintenant, dans la troisième partie de cette série, vous apprendrez à optimiser votre installation de Magento afin de réduire le temps de chargement des pages et à intégrer des extraits riches pour rendre vos résultats de recherche plus professionnels..

Vitesse croissante

La réduction du temps de chargement des pages est une préoccupation pour tous les développeurs Web. Magento, géant d’un CMS, n’est pas très rapide, mais quelques petites modifications peuvent augmenter ses performances.

Réduire le temps de chargement des pages est nécessaire non seulement pour améliorer l'expérience utilisateur et réduire le taux de rebond, mais également pour vous aider à bien vous positionner dans les moteurs de recherche. Depuis 2010, Google accorde une importance particulière au temps de chargement des pages d'un site Web pour déterminer son classement. Ici, nous allons brièvement discuter de quelques moyens rapides et réalisables pour réduire le temps de chargement des pages de votre boutique Magento..

Le moyen le plus rapide et le plus simple de rendre votre site Magento rapide est d’apporter de petites modifications au panneau d’administration de Magento. Tout d'abord, nous allons activer le cache Magento. Cette petite étape à elle seule réduira le temps de chargement des pages de 30% à 40%.

Lorsque le cache Magento est activé, Magento n'a pas à charger toutes les ressources de page des serveurs à chaque demande de page. Pour activer le cache Magento, allez à Système> Gestion du cache. Sélectionnez tous les types de cache et, dans le coin supérieur droit, sélectionnez Activer et soumettre.

Deuxièmement, nous devons fusionner nos fichiers CSS et JS avant le rendu de la page. Nous irons à Système> Configuration> Développeur. Ici tu verras Fusionner des fichiers JavaScript et Fusionner des fichiers CSS. Définissez ces deux champs sur Oui, et frapper sauvegarder.

Cette fusion des fichiers CSS et JS réduira le nombre de demandes adressées au serveur pendant le chargement de la page. Cela réduira à nouveau considérablement le temps de chargement des pages.

Ensuite, nous allons lancer le processus de compilation de Magento. La fonctionnalité de compilation de Magento compilera tous les fichiers Magento pour créer un seul fichier. comprendre chemin pour une performance accrue. Cela réduit le temps de chargement des pages de 25% à 50%.

Pour utiliser cet outil, le répertoire comprend et le dossier includes / config.php doit être en écriture. Pour lancer le processus de compilation, allez à Système> Outils> Compilation. Dans le coin supérieur droit, vous verrez le Exécuter le processus de compilation bouton. Cliquez dessus et vous aurez terminé.

Ensuite, nous avons quelques étapes avancées pour réduire le temps de chargement des pages nécessitant une modification du contenu de la page. .htaccess fichier. Il pourrait y avoir beaucoup .htaccess fichiers dans un répertoire Magento, mais ici nous allons éditer celui situé dans le répertoire racine.

À travers le .htaccess fichier, nous allons d’abord faire l’encodage du contenu, qui le compressera avant de l’envoyer à l’agent demandeur. Cela réduira le temps de téléchargement de fichier. Deuxièmement, nous ajouterons la durée d'expiration aux en-têtes. Cela signifie que lors du téléchargement de ressources, le navigateur vérifie si les en-têtes ont expiré. Si ce n'est pas le cas, les versions en cache seront utilisées.

Pour activer la compression, décommentez cette ligne de code par défaut. .htaccess fichier, c’est-à-dire supprimer le # avant php_flag zlib.output_compression sur:

############################################ # activer la compression html résultante php_flag zlib.output_compression on ###########################################

Ensuite, pour activer la compression gzip, nous allons ajouter ces lignes dans le .htaccess fichier:

############################################ # Insérer un filtre sur tout le contenu SetOutputFilter DEFLATE # Insertion de filtre uniquement sur les types de contenu sélectionnés AddOutputFilterByType DEFLATE text / html texte / texte brut / texte xml texte / css application / javascript # Résolution de certains problèmes de Netscape 4.x BrowserMatch ^ Mozilla / 4 gzip-only / text / html # Résolution de certains problèmes de Netscape 4.06-4.08 BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip # Scénario: MSIE se faisant passer pour Netscape BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html # Commande permettant de ne pas compresser les images SetEnvIfNoCase Request_URI \. (?: gif | jpe? G | png) $ no-gzip ne-varie pas # Manipulation correcte des procurations En-tête append Vary User-Agent env =! Ne-varie ############ ##################################

Enfin, mettons une limite d’expiration sur les en-têtes, en ajoutant ce code dans le champ .htaccess fichier:

#############################################  # Tout d'abord activer les expirations ExpiresActive On # Expiration par défaut ExpiresDefault "accès plus 1 mois" # pour favicon ExpiresByType image / x-icon "accès plus 1 an" # Définir les images Expiration ExpiresByType image / gif "accès plus 1 mois" ExpiresByType image / png "accès plus 1 mois" ExpiresByType image / jpg "accès plus 1 mois" ExpiresByType image / jpeg "accès plus 1 mois" # Définir CSS Expiration ExpiresByType text / css "accès 1 mois" # Pour Javascript Expiration ExpiresByType application / javascript "accès plus 1 an "  #############################################

Le choix du serveur est une chose très importante à considérer pour améliorer la vitesse de votre boutique Magento. Cet article de Tuts + explique très bien les facteurs à prendre en compte pour vous assurer que le choix de votre serveur convient parfaitement à Magento..

Implémentation des extraits enrichis

Il est maintenant temps de trouver un moyen d'implémenter des schémas ou des extraits enrichis dans notre magasin Magento. Ils donneront non seulement plus de résultats professionnels à vos résultats de recherche et les aideront à se démarquer, mais ils augmenteront également le taux de clics sur les pages de recherche..

Les extraits enrichis que nous intégrerons dans ce didacticiel sont des évaluations de produits, d'offres et d'agrégats. À la fin, je vous donnerai quelques ressources sur la mise en oeuvre de chapelures et de schémas d'organisation..

Par défaut, les résultats dans les pages de résultats du moteur de recherche se présentent comme suit:

Grâce à la mise en œuvre d'extraits enrichis, ils peuvent se distinguer et ressembler à ceci:

Sachez que pour implémenter ces extraits, vous devrez éditer les fichiers de modèles. Vous aurez besoin de connaissances de base en HTML et PHP pour les implémenter. Assurez-vous également de conserver une copie de sauvegarde de chaque fichier avant de le modifier..

Nous allons commencer par mettre en œuvre le schéma de produit. Ouvrez ce fichier dans votre éditeur: app / design / frontend / [package] / [thème] /template/catalog/product/view.phtml et ajoutez le code en surbrillance dans le vue du produit classe.

Identifions maintenant le nom du produit, sa description et son image. Pour baliser un nom de produit, recherchez le h1 balise contenant le nom du produit et ajoutez le code suivant:

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

Maintenant, pour marquer la description, trouver la description du produit div et assurez-vous qu'il inclut les attributs dans le code suivant:

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

Ensuite, dans app / design / frontend / [package] / [thème] /template/Catalog/product/view/media.phtml, recherchez les balises d'image (vous en trouverez deux occurrences aux lignes 40 et 62 si vous utilisez le thème par défaut) et assurez-vous qu'elles incluent les éléments suivants:

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

Nous allons maintenant ajouter les informations de classement global du produit. Pour cela, ouvrez ce fichier:

app / design / frontend / [package] / [thème] /template/review/helper/summary.phtml

Remplacez le code complet de ce fichier par le code ci-dessous:

getReviewsCount ()):?> getRatingSummary ()):?>  
 
   getReviewsUrl ()?> ">__ ('% d Review (s)', $ this-> getReviewsCount ())?> | getReviewsUrl ()?> # review-form ">__ ('Ajoutez votre commentaire')?> 
    
 getDisplayIfEmpty ()):?>  getReviewsUrl ()?> # review-form "> __ ('Soyez le premier à évaluer ce produit')?>

Maintenant, pour afficher l'étendue de l'offre produit, ouvrez le fichier suivant:

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

Ajoutez ce code au début du code, après les premiers commentaires (qui devrait être autour de la ligne 28):

  isAvailable ()):?>   __ ('Disponibilité:')?> __ ('en stock')?> 
    __ ('Disponibilité:')?> __ (en rupture de stock)?>

Et à la fin du fichier, ajoutez ce code:

Pour ajouter le prix, ouvrez ce fichier:

app / design / frontend / [package] / [thème] /template/catalog/product/price.phtml

Assurez-vous d'ajouter les attributs appropriés pour le code dans chaque instance des classes. prix et prix habituel. Pour chaque instance de span avec la classe prix nous ajouterons le surligné itemprop tag dedans:

…

De même, pour chaque envergure avec classe prix habituel, nous y ajouterons le code en surbrillance:

 devise ($ _ price + $ _weeeTaxAmount, true, true)); ?>

En utilisant des techniques comme celle-ci, vous pouvez également ajouter de la chapelure à vos extraits enrichis. Google Rich Snippets est un excellent didacticiel à ce sujet. N'oubliez pas de tester simultanément lors de la mise en œuvre de ces schémas. Vous pouvez utiliser les outils de test gratuits de Google et Bing à des fins de test..

Une fois que vous avez mis en place tous ces riches objets dans votre magasin Magento, vous remarquerez une augmentation significative du trafic de votre site Web si vous êtes déjà bien placé dans les moteurs de recherche..

Conclusion

Jusqu'à présent, nous devrions avoir un site Web Magento entièrement optimisé pour le référencement avec un très bon temps de chargement des pages et des résultats de recherche professionnels..

Dans le prochain article de cette série, j'expliquerai quelques considérations relatives au référencement pour la création d'une configuration multi-magasins pour Magento, ainsi qu'un aperçu rapide de certaines extensions utiles de Magento à des fins de référencement..

Code