Magento 2 : Bonnes pratiques 21 à 25

Faisant directement suite à Magento premier du nom, Magento 2 est une plateforme e-commerce parmi les plus performantes du marché. Cet article est le dernier de nos 25 bonnes pratiques Magento 2. Il fait directement suite aux bonnes pratiques Magento 2 – 16 à 20 et vient conclure notre série avec les 5 dernières bonnes pratiques Magento 2 – 21 à 25.

Bonne Pratique Magento 2 21 : Examiner la performance des pages avec Magento Profile

Magento Profiler est un outil intégré que vous pouvez utiliser pour inspecter les appels à la base de données lors du chargement des pages, étudier les dépendances, collecter les journaux d’événements, etc.

La nature du profilage dépend des outils d’analyse que nous utilisons.

Actuellement, Magento2 prend en charge plusieurs formats tels que HTML, CSV ou Firebug.

Il existe deux façons d’activer le profileur dans Magento 2 :

1. En utilisant le fichier .htaccess :
   Nous pouvons activer le profileur en ajoutant l’instruction suivante dans le fichier .htaccess
   SetEnv MAGE_PROFILER
   où, < type> peut prendre les valeurs «csvfile» ou «firebug» ou «html» . Dans le cas de «csvfile», vous pouvez trouver le rapport dans /var/log/profiler.csv
2. À l’aide de l’interface de ligne de commande : vous pouvez exécuter la commande suivante pour activer le profileur :
   1, php bin/magento dev:profiler:enable
   où, peut être «html» ou «csvfile» ou «flagfile» .

Dans le cas de «flagfile», un flagfile nommé profiler.flag sera créé dans le répertoire /var.

Remarque : Si vous ne mentionnez aucun lors de l’exécution de la commande, alors il activera le profileur de type « html » par défaut.

Ainsi, si vous avez activé le profileur de type « html », le résultat sera affiché dans la section de pied de page (footer) de la page Web, vous pouvez le voir dans l’image ci-dessous :

Ainsi, les informations sont présentées en bas de page sous forme de tableau.

Magento Profiler est un excellent outil pour déceler les goulots d’étranglement, les ralentissements et autres problèmes de performances.

Si vous connaissez déjà Magento Profiler mais que vous souhaitez en faire plus, nous vous recommandons la barre d’outils MGT pour les développeurs.

https://github.com/mgtcommerce/Mgt_Developertoolbar

Elle est gratuite et permet une meilleure représentation des données, des améliorations dans les plugins ainsi que l’inspection des événements/observateurs, et d’autres fonctionnalités intéressantes.

Si vous n’avez jamais travaillé avec Magento Profiler, n’hésitez pas contacter nos équipes d’experts NBS System et nous vous accompagnerons dans l’utilisation de ce puissant outil.

Bonne Pratique Magento 2 22 : Utiliser une application web progressive pour accélérer Magento 2

En suivant d’autres tendances du commerce en ligne, les application web progressive sont un nouveau concept de développement web.

Les propriétaires de site marchand sous Magento 2 ont déjà ressenti les bénéfices à utiliser du PWA (Progressive Web Apps) :

• Augmentation du taux de conversion ;
• Réduction du poids de l’application ;
• Augmentation du nombre d’utilisateurs.

Dans les prochaines lignes, nous allons essayer de comprendre comment et pourquoi l’utilisation du PWA sous Magento peut influencer votre activité.

Qu’est-ce qu’une application PWA ?

Les applications web progressives (PWA) sont développées à l’aide des mêmes technologies que les sites web. Cependant pour l’utilisateur final, elles ressemblent à de véritables applications natives. Faciles à partager et ne nécessitant aucune installation, les PWA permettent également de créer l’icône de raccourci d’un site web sur l’écran d’un smartphone !

Un bref historique des Progressive Web Apps (PWA)

En 2015, les ingénieurs de Google Chrome ont donné naissance au terme, mais avant cela, l’idée des applications basées sur les technologies web n’était pas nouvelle.

Puis en 2017, Steve Jobs a présenté à la communauté la vision d’Apple concernant les applications web pour l’iPhone, en utilisant le navigateur Safari. La création d’applications sans kit de développement logiciel semblait être une solution attrayante pour certains, tandis que d’autres étaient sceptiques.

Safari: iPhone Development Platform

Très vite, il est apparu qu’en 2007, les technologies web n’étaient pas prêtes à couvrir les fonctions des applications natives. Le manque de sécurité a entraîné le “jailbroken” de l’iPhone moins d’un mois après sa sortie.

À cela se sont ajoutées des performances inférieures à celles des applications natives et des difficultés liées à l’accès limité à l’architecture centrale. Ainsi, fin 2007, Apple a annoncé qu’elle s’orientait vers les applications natives et a commencé à travailler sur son kit de développement logiciel et son App Store. Pour Apple, cette décision s’est avérée trop rentable pour être abandonnée et revenir aux applications web !

Les applications natives ont prospéré, tandis que l’idée des applications web a été presque oubliée pendant des années. Cette technologie a dû attendre son heure jusqu’à ce qu’elle renaisse avec l’aide des développeurs de Google Chrome en 2015. L’article publié sur Medium par Alex Russel – développeur de Google Chrome – avait pour but d’aider le public à repenser son attitude envers les applications web et à le préparer aux changements. Depuis lors, Google a commencé à promouvoir activement les PWA comme une alternative plus efficace aux applications natives.

En 2018, les développeurs de Google disposaient déjà d’un impressionnant portefeuille d’études de cas avec des statistiques sur l’utilisation des PWA par des marques telles que Starbucks, le Washington Post, Jumia et AliExpress. Pas étonnant qu’après une telle promotion, d’avantage d’entreprises se soient également intéressées aux applications web progressives !

Qu’avons-nous maintenant ?

La popularité mondiale des PWA ne cesse de croitre et de plus en plus de plateformes, dont Magento, Shopify, PrestaShop ou encore Shopware, offrent à leurs utilisateurs la possibilité de créer une application web. Les solutions open source de PWA sont en cours de développement.

En 2019, Magento a annoncé la disponibilité de la PWA Studio. En réalité, elle a continué à y travailler en ajoutant l’intégration de Braintree comme passerelle de paiement.

L’équipe de Magento a publié un rapport sur les premiers utilisateurs de PWA Studio, en Décembre 2020,.

Progressive Web Apps

D’autres sociétés de développement proposent également leurs solutions PWA pour le e-commerce, par exemple VueStoreFront, Deity Falcon, ScandiPWA, Litefy, Superchargiy, etc.

Bonne Pratique Magento 2 23 : Avantages et Inconvénients des Applications Web Progressives

Lorsque nous parlons des avantages et ou des inconvénients d’une technologie, il est toujours plus facile de la comparer à d’autres solutions existantes. Dans notre cas, nous allons voir ou les PWA gagnent et perdent face aux applications natives.

PWA VS. Applications natives

Fonctions similaires (que vous n’obtenez pas avec un site web réactif ordinaire)

• Notifications push. Cette fonctionnalité vous permet de promouvoir les offres les plus intéressantes, les nouveaux produits ou les mises à jour de contenu sans utiliser de ressources supplémentaires. Ce canal de communication, qui appartenait auparavant qu’aux applications natives et désormais utilisé par les applications web progressives (PWA).
• Ajout d’un icone de raccourci à l’écran d’accueil. Lorsqu’un utilisateur ouvre une PWA, il reçoit une notification lui proposant de l’ajouter à son écran pour un accès ultérieur plus facile.. Le processus est fluide et ne nécessite aucune autorisation ou installation !
• Accès hors ligne. L’une des caractéristiques parmi les plus discutées est la possibilité d’utiliser certaines fonctions hors ligne. Grâce au cache, une fois les pages entièrement chargées, un utilisateur peut les faire défiler et les ouvrir même avec une connexion instable.

Avantages de l’Application Web Progressives (PWA)

• Coûts de développement et de maintenance réduits. En moyenne, une application classique coute entre 20 000 et 80 000€. Tandis que une application web progressive coûte entre 6 000 et 20 000€. Il y a un facteur d’économie d’argent et de temps. Votre équipe de développement n’aura alors pas à construire deux systèmes séparés : une boutique en ligne et une application. Cela signifie que la construction d’une PWA prendra moins d’heures de développement. La maintenance est également moins coûteuse pour plusieurs raisons, l’une d’entre elles étant qu’avec une PWA, tous les utilisateurs du site web exécutent la même version du code, contrairement à sa fragmentation lors de l’utilisation d’applications natives. Les pannes sont moins fréquentes.
• Référencement avancé (SEO). Comme nous le savons tous, la plupart des moteurs de recherche suivent désormais l’approche mobile-first définie par Google. Si vous testez votre boutique en ligne avec l’outil PageSpeed Insights de Google, vous verrez que les exigences pour obtenir un bon score sur mobile sont désormais assez strictes. Les PWA sont parmi les solutions les plus promues par les développeurs de Google. La plupart des applications web Progressives se chargent donc presque instantanément sur les appareils mobiles et répondent parfaitement à ces exigences.
• Une interaction avec l’utilisateur plus fluide. En ce qui concerne les applications natives, l’abandon au cours de l’installation est un véritable problème. En même temps, de nombreuses personnes n’installent pas du tout d’applications. Alors que les applications natives demandes un effort supplémentaire et plus de temps pour l’installation et le lancement, les PWA offrent un accès quasi instantané.
• Compatibilité avec différents appareils. Les principes progressifs utilisés pour la création des PWA lui permettent de fonctionner sur différents navigateurs et tailles d’écran. Même si, à l’heure actuelle, tous les appareils ne prennent pas en charge l’ensemble des fonctionnalités des PWA, celles-ci peuvent, d’une certaine manière, être utilisées sur n’importe quel appareil.
• Aucune dépendance vis-à-vis des magasins d’applications. Les applications web progressives fonctionnent en dehors de l’écosystème des magasins d’applications. Cela signifie donc que vous n’aurez pas à craindre qu’Apple ou Google censure ou supprime l’application pour une raison quelconque.

Inconvénients de l’Application Web Progressives (PWA)

• Les magasins d’applications ne découvrent pas la marque ou l’application. Avec une PWA, vous ne pourrez pas atteindre de nouveaux clients via ce canal de vente. Cependant, les statistiques montrent que ce n’est pas un énorme problème, car la popularité globale des applications de shopping est relativement faible par rapport aux autres types d’applications Selon Statista, les applications de shopping ne sont que la 12e catégorie préférée (sur les 20 prévues) sur l’App store. Elle représente ainsi 2.42% des applications actives installées.
• Une interface utilisateur médiocre. L’accès à l’architecture de base de la PWA est assez limité. En tant que propriétaire de boutique en ligne, vous n’aurez pas la possibilité d’implémenter toutes les fonctionnalités que vous que vous souhaitez. Pour un utilisateur, une PWA fournit moins d’éléments d’interaction qu’une application native.
• Pas de connexion correcte aux autres applications installées ou par défaut. La technologie PWA est encore incapable de permettre à un utilisateur d’utiliser l’appareil photo ou d’autres applications pour des recherches ou des interactions plus avancés.
• Limités pour les appareils iOS. Les problèmes les plus importants liés à l’utilisation d’applications web sont liés aux produits de la société ou l’idée de telles applications est née – Apple ! IOS supporte les PWA à partir de la version 11.3, aucun support pour les versions antérieures. De plus, le réengagement n’est pas facile pour les utilisateurs d’Apple car l’OS limite toujours les capacités des PWA.

Durant l’accompagnement de certains de nos clients e-commerce, nous avons eu à mettre en place des infrastructures pour des boutiques Magento2 équipées en PWA sous le Framework VueStoreFront.

Par conséquence, le résultat est tout simplement spectaculaire.

Bonne Pratique Magento 2 24 : Nettoyer les journaux de la base de données

Dans le cas où votre boutique Magento 2 serait vieillissante, les journaux de la base de données peuvent atteindre des centaines de MB comportant des millions d’entrées.

Ce volume d’information engendrera de forts ralentissements et peut même aboutir à un manque d’espace disque.

Magento 1 offrait une option très pratique pour nettoyer automatiquement toutes les entrées datant de plus d’un mois, par exemple.

Avec Magento 2, cette possibilité ne fait plus partie des tâches de base.

Ainsi pour procéder au nettoyage, vous devrez avoir accès à votre base de données soit via un gestionnaire comme PHPMyAdmin ou Adminer, soit via la console MySQL en ligne de commande.

Ou bien faire appel au module prévu pour cela.

Automatiquement, une fois par semaine, cron nettoyera les journaux.

• Téléchargez le module et mettez-le dans le dossier “/app/code/” de votre installation Magento
  https://github.com/rakeshmagento/magento2-db-log-cleaner
• Exécutez via SSH, les instructions suivantes :

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:flush

php bin/magento cache:clean

• Puis, installez le module avec la commande :

php bin/magento module:status

• Finalement, exécutez la commande cron :

php bin/magento cron:runphp bin/magento cron:run

Une nouvelle entrée db_log_cleaning apparaîtra dans le tableau cron_schedule !

Bonne Pratique Magento 2 25 : Félicitations votre site est optimisé

Félicitations vous y êtes arrivés ! Votre boutique Magento 2 est maintenant pleinement optimisée !

Nous savons que ces optimisations vous ont pris du temps. Tout le temps investi à optimiser les performances et la sécurité de votre site portera bientôt ses fruits. Bravo, nous sommes fiers de vous !

Vous voilà dorénavant avec une boutique Magento 2 plus performante et sécurisée que jamais ! Afin de vous accompagner sur l’hébergement des plateformes e-commerce, nos équipes NBS System sont disponibles. N’hésitez pas à nous contacter.

Relisez donc nos 4 articles précédents pour retrouver l’ensemble de nos bonnes pratiques Magento 2 :

• 01 à 05 des bonnes pratiques de Magento 2
• 06 à 10 des bonnes pratiques de Magento 2
• 11 à 15 des bonnes pratiques de Magento 2
• 16 à 20 des bonnes pratiques de Magento 2

Merci d’avoir suivi cette série d’article, on se retrouve bientôt pour une autre série…

A bientôt !