Lighthouse est un outil Google pour mesurer les performances web. On peut lancer manuellement des audits de performance mais lorsqu’on travaille à plusieurs sur un thème Shopify, il est intéressant d’avoir un suivi continu des performances du thème.
Avec cette intégration continue, nous pouvons bloquer l’ajout d’une fonctionnalité si jamais il y a une régression des performances.
Shopify a développé une github action qu’on peut intégrer sur nos projets, voici les étapes :
1. Configurer le Workflow GitHub Actions
Dans votre projet Shopify, à la racine, créez le fichier suivant :
/.github/workflows/lighthouse.yml
Les options possibles sont les suivantes :
L’action shopify/lighthouse-ci-action accepte les arguments suivants :
- access_token – (obligatoire).
- store – (obligatoire) URL d’administration du magasin Shopify, par exemple :
my-store.myshopify.com. - password – (optionnel) Mot de passe pour les boutiques protégées par mot de passe.
- product_handle – (optionnel) Identifiant du produit pour exécuter l’audit Lighthouse sur la page produit. Par défaut, le premier produit est utilisé.
- theme_root – (optionnel) Répertoire racine des fichiers du thème qui seront téléchargés. Par défaut, utilise la racine (
.). - collection_handle – (optionnel) Identifiant de la collection pour exécuter l’audit Lighthouse sur une page de produit. Par défaut, la première collection est utilisée.
- pull_theme – (optionnel) ID ou nom d’un thème dont les paramètres et les modèles JSON doivent être utilisés. Si non spécifié, Lighthouse s’exécutera avec les paramètres par défaut du thème.
- lhci_min_score_performance – (optionnel, par défaut : 0.6) Score de performance minimal requis pour réussir un audit (doit être compris entre 0 et 1).
- lhci_min_score_accessibility – (optionnel, par défaut : 0.9) Score d’accessibilité minimal requis pour réussir un audit.
Pour les vérifications d’état GitHub sur les pull requests, l’un des deux arguments suivants est requis :
lhci_github_token – (optionnel) Jeton d’accès personnel GitHub.
lhci_github_app_token – (optionnel) Jeton d’application Lighthouse GitHub.
On remarque que le score de performance minimal (0.6 ou 60/100, pour passer les tests) n’est pas très élevé. Chez Prestarocket, nous l’avons mis à 90 pour développer notre thème squelette Shopify.
2. Créer une Application Shopify
Accéder à votre boutique Shopify :
- Allez dans l’interface administrateur Shopify.
- Naviguez vers Applications.
- Cliquez sur Gérer les applications privées et Créer une nouvelle application privée.
Définissez les permissions nécessaires. Assurez-vous que l’application peut interagir avec votre boutique.
Installez l’application et copiez vos identifiants API.
Copiez les API credentials.
3. Configurer les Secrets GitHub
Naviguez vers Settings > Secrets and variables > Actions.
Créer la Secret : SHOP_ACCESS_TOKEN
Créez votre première secret depuis Github appelée SHOP_ACCESS_TOKEN avec comme valeur l’API key précèdemment copiée.
Créer la Secret : SHOP_STORE
Copiez votre nom de domaine pour créer une seconde Secret.
Même processus pour toutes les Secrets (cf. 3), créez en une appelée SHOP_STORE pour y placer votre nom de domaine de boutique Shopify.
Créer la Secret : SHOP_PASSWORD
Copiez votre mot de passe Shopify.
Créer la Secret : LIGHTHOUSE_TOKEN
Installez l’application Lighthouse CI juste ici.
⚠️ Conservez votre token communiqué par Lighthouse CI, vous devrez le garder pour vos futurs projets.
Enfin, créez votre dernier secret dans votre projet github.
4. Lancer le Workflow
- Assurez-vous que toutes les configurations sont correctes.
- Poussez votre commit vers GitHub.
- Vérifiez les résultats des tests dans l’onglet Actions de votre dépôt.
En suivant ces étapes, vous aurez configuré un pipeline automatisé qui exécute Lighthouse CI à chaque commit, améliorant ainsi les performances de votre boutique Shopify.
Vous pourrez constater votre compte rendu Lighthouse dans l’exécution de la Github Action depuis Github.
L’indice de performance est fixé à >90 (0.9) et l’indice d’accessibilité est fixé à >90 (0.9).
