Accélérez le temps de chargement de votre page

Qu'est-ce que la vitesse de chargement ?

Vitesse de chargement, aussi connu sous le nom temps de chargement de la page, désigne le temps total nécessaire à une page web pour afficher l'intégralité de son contenu dans un navigateur après une requête utilisateur. Cela inclut tout : des images et du texte aux scripts et feuilles de style.

Google utilise la vitesse de chargement comme facteur de classement, en particulier pour l'indexation mobile-first. 

Comment vérifier la vitesse de chargement de votre site Web

Avant d'optimiser, il est essentiel d'établir un benchmark. Voici deux méthodes fiables :

1. Utilisez des outils de test de vitesse en ligne

• Google PageSpeed ​​Insights: Fournit des scores de vitesse sur mobile et sur ordinateur ainsi que des suggestions exploitables.
• GTMetrix: Offre des rapports détaillés, notamment le temps jusqu'au premier octet (TTFB), le Largest Contentful Paint (LCP) et bien plus encore.
• Outils Pingdom:Idéal pour tester dans différentes régions géographiques.

En général, chacun d'entre eux aura ses propres mesures de calcul et fournira un résultat différent, mais en fin de compte, ils vous donneront une estimation approximative des performances de votre page sur le front-end, sur l'appareil de navigation de votre client.

2. Effectuer des tests manuels

Parfois, le meilleur outil de surveillance est votre propre impression. Outre l'utilisation d'outils de mesure techniques, vous pouvez également tester la charge de votre site Web à tout moment.

Visitez votre site Web et parcourez les pages, sur plusieurs appareils, sous plusieurs connexions Internet tout en utilisant différents navigateurs, et voyez si votre site Web fonctionne selon vos normes.

Comment optimiser la vitesse de chargement

De nombreux facteurs entrent en compte dans les performances d'une page, certains étant contrôlables et d'autres non. Nous avons compilé une liste de composants contrôlables pour vous permettre d'optimiser au mieux votre boutique.

1. Compresser les fichiers multimédias

Assurez-vous que tous vos fichiers multimédias sont bien optimisés avant de les télécharger sur la boutique. N'utilisez des images haute résolution que lorsque cela est nécessaire, sinon votre site fera une mauvaise première impression en prenant une éternité à charger.

2. Ajustez la qualité et la résolution de l'image

Si vous utilisez GemPages V6, dans le Bannière de héros Parallaxe éléments, vous avez la possibilité de choisir entre Briquet Le plus léger résolution pour votre bannière sous le Qualité d'image menu déroulant.

Dans l'élément Image, en plus de Qualité d'image, vous pouvez choisir une résolution d'image sous le Résolution d'image menu déroulant. Choisissez une résolution rationnelle qui assure une vitesse de chargement rapide mais également une qualité d'image nette.

Dans la version 7, l'optimisation des images est désormais gérée automatiquement via CDN, avec des contrôles de performances supplémentaires tels que Chargement Lazy pré-charge Options disponibles par élément. Cela garantit un chargement plus rapide sans configuration manuelle, tout en vous permettant de contrôler les images spécifiques à votre appareil.

3. Réduisez le code inutile

Dans Shopify

• Optimisez le code de votre thème en supprimant le code HTML, CSS JavaScript et Liquid inutile, les espaces blancs, les commentaires, etc.
• Nettoyez votre liste d'applications tierces : lorsque vous installez et utilisez une application tierce depuis l'App Store de Shopify, l'application génère du code dans votre thème. Pensez à supprimer les applications que vous n'utilisez plus.
• Un code de suivi comportemental redondant de Google et Facebook pourrait potentiellement ralentir votre site. Essayez de ne conserver que le code que vous utilisez réellement.

In GemPages

• Assurez-vous qu'il n'y a pas d'éléments inutilisés qui traînent sur vos pages.
• Faire usage de Chargement Lazy .

• Utilisez la fonction Précharger la police et la feuille de style : Précharger la police et la feuille de style Cette fonctionnalité est une directive qui indique au navigateur de demander et de charger à l'avance les ressources clés de votre page (telles que les polices et les feuilles de style), ce qui améliore considérablement la vitesse de chargement. GemPages Version 7Cette fonctionnalité est déjà disponible. Intégré et activé par défaut.

4. Réduire les chaînes de redirection

Si Redirections d'URL sont utiles, mais un nombre excessif peut entraîner des requêtes HTTP supplémentaires et retarder le chargement. Bonnes pratiques :éviter de rediriger d'une page à l'autre sauf si nécessaire.
Si vous avez modifié une URL, mettez à jour les liens internes au lieu de vous fier aux redirections.

5. Utilisez un CDN haut débit

GemPages implémente un CDN (Content Delivery Network) à haut débit pour mettre en cache du contenu partout dans le monde, ce qui permet à votre site de se charger plus rapidement où que se trouvent vos clients.

Pour les moteurs de recherche populaires tels que Google ou Bing, les performances des pages mobiles sont depuis longtemps un facteur de classement important, même avant leur équivalent sur ordinateur. De plus, la vitesse joue un rôle indéniable dans l'amélioration de l'expérience des visiteurs, la réduction des taux de rebond et, à terme, l'augmentation de vos revenus. Autrement dit, pour augmenter vos conversions, l'optimisation de la vitesse de chargement de vos pages est incontournable.

Questions Fréquemment Posées

1. Comment puis-je augmenter la vitesse de mes pages de collection dans Shopify ou GemPages ?

Les pages de collection se chargent souvent plus lentement car elles affichent de nombreuses images de produits et incluent parfois des fonctions de filtrage ou de tri. Pour améliorer les performances, vous pouvez :

• Compressez et redimensionnez les images des produits avant de les télécharger.
• Utilisez le Chargement Lazy dans GemPages pour retarder le chargement des images jusqu'à ce qu'elles apparaissent à l'écran.
• Réduisez le nombre de produits par page en activant la pagination.
• Limitez les applications ou scripts tiers lourds sur les pages de collection.
• Dans la mesure du possible, utilisez le filtrage intégré de Shopify plutôt que des applications gourmandes en ressources.

• Compresser les images des bannières et des sections.
• Utilisez le chargement différé pour les images et les vidéos.
• Réduisez les applications et les scripts utilisés sur la page d’accueil.
• Préchargez les polices et les feuilles de style importantes dans GemPages.

• Compressez les images et les vignettes des produits.
• Activer le chargement différé pour les images situées sous le pli.
• Limitez les applications supplémentaires et les scripts tiers.
• Préchargez les polices et les feuilles de style critiques.