Scores de vitesse des pages de chaque thème Shopify

0
95


Avec tant de commerces locaux contraints de fermer à cause de la pandémie, j’ai été ravi de voir le tutoriel de Shopify pour aider les détaillants à mettre en place un magasin « Achetez en ligne, ramassez en bordure de trottoir ».

La quatrième étape du tutoriel de Shopify propose un thème gratuit et personnalisé, appelé Debut.

Le tutoriel

comment créer une société offshore?

Le tutoriel « Acheter en ligne, ramasser en bordure de trottoir » de Shopify suggère d’utiliser le thème Debut.

Le tutoriel est une explication utile. Mais il manque d’instructions pour optimiser le nouveau site pour les moteurs de recherche ou pour accélérer l’expérience de l’utilisateur.

Dans ce billet, je vous ferai part d’une étude que j’ai menée sur la vitesse de page des thèmes Shopify.

Thèmes de Shopify

J’ai récemment travaillé avec un développeur sur un projet visant à aider un commerçant à accélérer son magasin Shopify. Nous avons amélioré la vitesse des pages mobiles de 23 à 84 sur l’outil PageSpeed Insights de Google. La vitesse sur le bureau est passée de 77 à 94. Nous avons obtenu des améliorations similaires pour différents types de pages.

Mais le point le plus intéressant est l’impact du thème Shopify sur la vitesse des pages. Le commerçant avait personnalisé le thème premium ShowTime, qui était beau et riche en fonctionnalités. Malheureusement, il était également lent. En optimisant les fichiers du thème, le développeur a considérablement amélioré la vitesse.

Ainsi, ayant travaillé sur ce projet et ayant observé le thème de Debut, j’ai eu une idée. Et si je faisais tourner Google Lighthouse (qui inclut les scores de PageSpeed Insights) sur tous les thèmes de la boutique Shopify ? Cela pourrait aider les nouveaux commerçants à localiser un magasin rapide et à éviter le coût de l’optimisation d’un thème lent par la suite.

Vitesse de page des thèmes

Shopify liste 72 thèmes. Il est possible de vérifier manuellement la vitesse de chacun d’entre eux. Mais il est plus amusant d’automatiser le processus car je peux collecter autant de mesures que nécessaire et répéter l’analyse au fur et à mesure de la mise à jour des thèmes.

Les résultats sommaires de l’étude figurent ci-dessous. Les scores de vitesse des pages proviennent de Google Lighthouse. Notez que ShowTime, le thème choisi par notre client, est parmi les plus lents en matière de performances mobiles. Mais le thème recommandé par le tutoriel Shopify, Debut, est en tête de liste. Vous pouvez trier le tableau selon n’importe quelle colonne.

Thème Page Speed Score :
Mobile
Page Speed Score :
Bureau
Simple 0.92 0.99
Éditorial 0.89 0.99
Sans frontières 0.88 0.97
Début 0.88 0.99
Fournir 0.86 0.99
Venture 0.85 0.99
District 0.83 0.94
Vitrine 0.82 0.98
Capital 0.81 0.98
Local 0.8 0.98
Récit 0.8 1
Rationaliser 0.79 0.99
Label 0.79 0.99
Royaume 0.78 0.98
Minimal 0.78 0.99
Boost 0.77 0.98
Fashionopolism 0.74 0.97
Modulaire 0.73 0.98
Grille 0.72 0.97
Brooklyn 0.72 0.98
Expression 0.7 0.97
Lever du soleil 0.7 0.99
Cascade 0.69 1
Impulse 0.68 0.92
Séparer 0.68 0.92
Empire 0.68 0.99
Atlantique 0.68 0.99
Symétrie 0.67 0.98
Prestige 0.66 0.96
Ira 0.66 0.96
Kagami 0.66 0.97
Vantage 0.64 0.9
Histoire 0.64 0.98
Editions 0.63 0.97
Focal 0.62 0.94
Alchimie 0.62 0.94
Artisan 0.61 0.97
Marque déposée 0.6 0.95
Maçonnerie 0.57 0.88
Testament 0.55 0.94
Pipeline 0.54 0.93
Flux 0.53 0.66
Couleurs 0.53 0.95
Mobilia 0.53 0.96
Canopy 0.5 0.97
Réactif 0.49 0.93
Avenue 0.48 0.77
Lancer 0.48 0.81
Créateur 0.48 0.87
Vogue 0.47 0.88
Startup 0.43 0.86
Providence 0.41 0.75
Entrepôt 0.41 0.88
Pratique 0.4 0.85
Californie 0.4 0.95
M. Parker 0.4 0.95
Contexte 0.37 0.79
Blockshop 0.37 0.81
Icône 0.36 0.93
Diffusion 0.34 0.77
Pacifique 0.34 0.81
Accéder à 0.33 0.81
Lieu : 0.33 0.81
Motion 0.32 0.8
Envie 0.31 0.81
Parallax 0.31 0.82
Lorenza 0.3 0.67
Galleria 0.3 0.78
Palo Alto 0.29 0.77
ShowTime 0.25 0.83
Loft 0.23 0.86
Retina 0.08 0.58

Pour un compromis entre vitesse et fonctionnalité, envisagez des mesures de vitesse plus granulaires. Pour vous aider, j’ai rassemblé six de ces mesures (appelées « données de laboratoire » sur PageSpeed Insights) sur une feuille Google. Ces mesures sont les suivantes.

  • Première peinture de contentement mesure le temps qu’il faut pour voir quoi que ce soit sur la page. Une bonne valeur est inférieure à 1 seconde.
  • Première peinture significative mesure le moment où le contenu principal de la page est visible. Une bonne valeur pour cette mesure est inférieure à 2 secondes.
  • Indice de vitesse mesure la vitesse à laquelle le contenu d’une page est visiblement peuplé. Moins de 4,3 secondes, c’est bien.
  • Premier CPU en panne mesure le temps nécessaire à la page pour accueillir les entrées. Une bonne valeur est inférieure à 4,7 secondes.
  • Le temps de l’interactivité mesure le temps que l’utilisateur doit attendre pour que la page soit totalement interactive. La page peut être entièrement visible, mais pas encore prête à recevoir les commentaires de l’utilisateur. Une valeur rapide pour cette mesure est inférieure à 5,2 secondes.
  • Délai d’entrée potentiel maximum mesure le pire cas de figure, à savoir le temps qu’il faut au navigateur pour répondre aux tâches typiques effectuées par un utilisateur, comme un clic sur un bouton. Une valeur rapide pour cette mesure est inférieure à 130 millisecondes.

L’examen des mesures détaillées permet d’apporter des nuances. Par exemple, le thème Avenue se classe 47e pour la vitesse de page des téléphones portables, mais le délai d’entrée potentiel maximal est mauvais à 2 278 millisecondes (2,2 secondes).

Pour un compromis entre vitesse et fonctionnalité, considérez les mesures de vitesse granulaires

Pour un compromis entre vitesse et fonctionnalité, considérez les mesures de vitesse granulaires « Lab Data » dans PageSpeed Insights. Cliquez sur l’image pour l’agrandir.

Le processus

J’ai produit manuellement une liste de thèmes (y compris les URL de leur site de démonstration) à partir de la boutique de thèmes Shopify.

Ensuite, j’ai écrit un script Python qui lit la liste des URL et exécute l’API PageSpeed Insights six fois par URL : trois pour obtenir des mesures détaillées pour les mobiles et trois pour les ordinateurs de bureau. Il est essentiel de répéter les tests pour tenir compte des changements dans les conditions du réseau. J’ai rapporté les résultats médians dans la fiche Google.

La sortie JSON renvoyée par l’API PageSpeed Insights est une structure complexe et imbriquée. J’ai utilisé JSONPath pour simplifier le processus d’extraction.

J’ai également trouvé l’évaluateur de JSONPath incroyablement utile. J’ai utilisé la bibliothèque Python jsonpath-ng très pratique pour faire fonctionner les JSONPaths.

Voici les JSONPaths que j’ai utilisés pour extraire chaque métrique.

jsonpath_first_contentful_paint = parse("$.lighthouseResult.audits.first-contentful-paint")
jsonpath_first_meaningful_paint = parse("$.lighthouseResult.audits.first-meaningful-paint") = parse("$.lighthouseResult.audits.speed-index")
jsonpath_first_cpu_idle = parse("$.lighthouseResult.audits.first-cpu-idle")
jsonpath_interactive = parse("$.lighthouseResult.audits.interactive")
jsonpath_max_potential_fid = parse("$.lighthouseResult.audits.max-potential-fid")
jsonpath_score = parse("$.lighthouseResult.categories.performance.score")