Comment compresser sur Shopify le code JavaScript et CSS intégré

Si vous êtes un propriétaire de site web Shopify, vous savez à quel point il est important d'optimiser le temps de chargement des pages pour offrir une expérience utilisateur fluide et agréable. La compression de fichiers JS et CSS est une technique couramment utilisée pour accélérer les temps de chargement.

Dans cet article, nous examinerons comment compresser les fichiers JavaScript et CSS intégrés sur Shopify.

Qu'est-ce que la compression de fichiers JS et CSS ?

La compression est un processus qui consiste à réduire la taille des fichiers JavaScript et CSS en les compressant, ce qui les rend plus petits. Les fichiers compressés prennent moins de temps à charger et contribuent à améliorer les temps de réponse du site.

Il existe deux types de compression: la compression de Gzip et la compression de Brotli. Gzip est le plus couramment utilisé. Il est pris en charge par tous les navigateurs et réduit la taille des fichiers jusqu'à 70 %. Brotli est une compression plus récente qui réduit la taille des fichiers jusqu'à 90 %, mais n'est pas encore pris en charge par tous les navigateurs.

Comment compresser les fichiers JS et CSS intégrés sur Shopify?

Les étapes pour compresser les fichiers JS et CSS intégrés sur Shopify sont simples. Toutefois, il est important de sauvegarder votre thème avant de commencer le processus de compression. Voici les étapes à suivre:

1. Accédez à la section Thèmes de votre tableau de bord Shopify et cliquez sur Actions à côté du thème que vous souhaitez modifier. Ensuite, cliquez sur Modifier le code.

2. Une fois que vous avez accédé au code du thème, vous devez repérer les fichiers JS et CSS que vous souhaitez compresser.

3. Pour compresser les fichiers CSS, accédez au fichier CSS principal et copiez le code.

4. Ensuite, accédez à un site de compression en ligne comme https://csscompressor.com/ et collez le code CSS. Sélectionnez Gzip comme méthode de compression et cliquez sur Compress.

5. Copiez le nouveau code compressé et collez-le dans le fichier CSS original. Enregistrez les modifications.

6. Pour compresser les fichiers JS, accédez au fichier JS principal et copiez le code.

7. Ensuite, accédez à un site de compression en ligne comme https://jscompress.com/ et collez le code JS. Sélectionnez Gzip comme méthode de compression et cliquez sur Compress.

8. Copiez le nouveau code compressé et collez-le dans le fichier JS original. Enregistrez les modifications.

9. Répétez le processus pour tous les fichiers CSS et JS que vous souhaitez compresser.

10. Enregistrez tous vos fichiers et publiez les modifications.

Conclusion

Compresser les fichiers JavaScript et CSS intégrés sur Shopify est un processus simple, mais crucial pour améliorer les temps de chargement de votre site web. En suivant les étapes décrites dans cet article, vous pourrez réduire considérablement la taille de vos fichiers, ce qui améliorera l'expérience utilisateur de votre site web.