{"version":"1.1","schema_version":"1.1.0","plugin_version":"1.1.2","url":"https://kalys.fr/vitesse-de-chargement/","llm_html_url":"https://kalys.fr/vitesse-de-chargement/llm","llm_json_url":"https://kalys.fr/vitesse-de-chargement/llm.json","manifest_url":"https://kalys.fr/llm-endpoints-manifest.json","language":"fr-FR","locale":"fr_FR","title":"Guide d’optimisation de la vitesse de Shopify","site":{"name":"Kalys","url":"https://kalys.fr/"},"author":{"id":2,"name":"Charly Cabécadas","url":"https://kalys.fr/author/charlyseo/"},"published_at":"2025-10-05T15:59:58+00:00","modified_at":"2026-02-18T16:37:35+00:00","word_count":3119,"reading_time_seconds":936,"summary":"Introduction au temps de chargement Mise à jour 2026 Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion… autant de conséquences d’une page qui répond lentement. L’optimisation de la vitesse du site est l’une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous […]","summary_points":["Introduction au temps de chargement\n\n\n\nMise à jour 2026\n\n\n\nDes problèmes de taux de rebond élevé, baisse de trafic ou de la conversion… autant de conséquences d’une page qui répond lentement.","L’optimisation de la vitesse du site est l’une des principales considérations pour les propriétaires de boutiques Shopify.","Plus votre site est rapide, plus vous êtes susceptible de convertir d’utilisateurs. \n\n\n\nDeux études le prouvent : \n\n\n\nDans un communiqué, le géant Amazon déclare qu’une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.","L’outil d’analyse Semrush relève lui aussi, qu’un retard de chargement d’une seule seconde peut réduire la conversion de 7 %."],"topics":["Shopify SEO"],"entities":[],"entities_metadata":[{"id":8,"name":"Shopify SEO","slug":"seo-shopify","taxonomy":"category","count":20,"url":"https://kalys.fr/seo-shopify/"}],"tags":["Shopify SEO"],"content_hash":"de2ccd1ecc029f1bd3343207227b06fe","plain_text":"Introduction au temps de chargement\n\n\n\nMise à jour 2026\n\n\n\nDes problèmes de taux de rebond élevé, baisse de trafic ou de la conversion… autant de conséquences d’une page qui répond lentement. L’optimisation de la vitesse du site est l’une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d’utilisateurs. \n\n\n\nDeux études le prouvent : \n\n\n\nDans un communiqué, le géant Amazon déclare qu’une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.\n\n\n\nL’outil d’analyse Semrush relève lui aussi, qu’un retard de chargement d’une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA.\n\n\n\nEn moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C’est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO.\n\n\n\nDécouvrez les meilleures méthodes pour accélérer la réponse de vos pages.\n\n\n\n\n\n\n\nComment accélérer le temps de réponse des pages ?\n\n\n\nAfin de pouvoir comparer l’avant / après optimisation, pensez à faire des captures d’écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix.\n\n\n\nVotre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l’ordre de chargement des ressources sur la page analysée.\n\n\n\nWaterfall : Ordre et vitesse de chargement des ressources\n\n\n\nLes essentiels :\n\n\n\nChoisir un thème Shopify léger\n\n\n\nLe choix d’un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l’inverse, un thème plus léger permettra à votre site d’être plus performant à l’avenir.\n\n\n\nBien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site.\n\n\n\nRéduisez le poids de vos visuels\n\n\n\nNotre objectif est d’avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l’envoi d’une image dans votre site, veillez à ces 5 points : \n\n\n\n1 – Choisir le format approprié\n\n\n\nEn fonction du type d’image, choisissez le format qui convient :\n\n\n\n\nIl faut favoriser le format WEBP, c’est la meilleure option.\n\n\n\nS’il y a besoin de transparence, du PNG en cherchant à compresser le plus possible.\n\n\n\nSi pas de transparence, dans tous les autres cas, du JPEG en compressant avec les recos qui suivent.\n\n\n\nPour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.\n\n\n\nPour les images avec du texte, on favorisera le format PNG compressé ou WEBP. \n\n\n\n\n\nQuel est le meilleur format d’image selon shopify ?\nShopify : documentation officielle\n\n\n\n2 – Redimensionnez à taille réelle\n\n\n\nSi vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l’erreur de les envoyer tels quels.\n\n\n\n\nRedimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG, 1 à 1,5 fois la taille réelle du conteneur dans le navigateur (cela peut être 2 fois les dimensions indiquées pour couvrir les écrans rétina).\n\n\n\nUtilisez srcset, qui charge conditionnellement la bonne taille d’image en fonction de l’appareil. \n\n\n\n\n\nSi vous avez l’avertissement « Images surdimensionnées » dans l’outil Shopify Analyzer, cette solution srcset résoudra ce problème.\nKalys – Agence SEO 100% Shopify\n\n\n\nSrcset permet d’afficher l’image en taille 1x sur les écrans normaux et 2x sur les écrans rétina.\n\n\n\nSrcset peut aussi redimensionner l’image selon différentes tailles d’écran.\n\n\n\n3 – Utilisez la compression\n\n\n\nChoisir le bon format de fichier n’est qu’une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d’images à 80 / 90% de leur qualité :\n\n\n\n\nGrandes images (banner, slider…) : 200 KO maximum\n\n\n\nPetites images (produits, descriptions…) 80 KO maximum\n\n\n\n\nJ’ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :\n\n\n\nTaille des images divisée par 2 après compression d’images \n\n\n\nVous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable. \n\n\n\nLa réduction d’une image à 80 / 90% de sa qualité initiale ne se voit pas à l’œil nu. Voici un exemple d’une image de 68ko puis de 39ko après compression.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\n\n\n\n\n\nHeureusement, c’est facile à faire. Avec une application Shopify, vous pouvez automatiser l’ensemble du processus. Voici nos préférées :\n\n\n\nPayantes :\n\n\n\n\n Hyperspeed – 49$ / Mois. C’est la rolls des app ! Elle regroupe tout ce qui est important pour la vitesse de chargement.\n\n\n\nTiny IMG – 3$ / Mois. 5000 images sur 2an, c’est celui qu’on utilise le plus.\n\n\n\nSmart SEO – 10$ / mois, 1000 images / mois, d’autres fonctionnalités très intéressantes.\n\n\n\n\nGratuites :\n\n\n\nGratuit est mort mais derrière lui, il a quand même laissé :\n\n\n\n\nSEO Image Optimizer – 50 images gratuites / mois, choix du niveau de compression, rétroaction, optimise tous types d’images en automatique. En gratuit c’est notre préféré.\n\n\n\nTiny IMG – 50 images gratuites / mois, rétroaction, optimise tous types d’images en automatique.\n\n\n\n\nDans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d’applications supplémentaires afin de réduire les temps de chargement.\n\n\n\n4 – Remplacer les GIF par des images statiques\n\n\n\nUne tendance que nous avons observée sur les boutiques Shopify les plus lentes est l’utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs.\n\n\n\nCependant, les ressources GIF sont extrêmement volumineuses.\n\n\n\nNous avons vu des cas où l’utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible.\n\n\n\nCependant, si vous tenez quand même à utiliser des images animées, 2 choix s’offrent à vous :\n\n\n\n\nCompresser le GIF\n\n\n\nUtiliser un autre format d’images animées plus léger (par ex. LottieFiles)\n\n\n\n\n5 – Preload et Lazyload\n\n\n\nEn général, lorsqu’une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?\n\n\n\nLes pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d’entre elles sont visibles même après le chargement de la page. Beaucoup d’entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles.\n\n\n\n\n\n\n\nTous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel=\"preload\". L’objectif est d’avoir un chargement prioritaire du logo, des images d’en-têtes, background, icon, polices d’écriture, script css ou js… pour que l’internaute commence son expérience de navigation le plus rapidement possible.\n\n\n\nL’ajout du rel= »preload » permet de charger prioritairement certaines ressources.\n\n\n\nVoici comment faire pour précharger une image :\n\n\n\n\nCommencer par dupliquer votre thème pour travailler en preview.\n\n\n\nDans personnaliser le thème > trouver la section où est ajoutée l’image.\n\n\n\nAller chercher cette section dans le code du thème (copié).\n\n\n\nRepérer l’endroit d’insertion de l’image et ajouter dans les attributs : rel=\"preload\"\n\n\n\nVérifier sur le site > clic droit > inspecter > cliquer sur l’image et regarder si l’attribut rel=preload s’est bien ajouté.\n\n\n\n\nIl faudra répéter l’opération pour les autres éléments à précharger.\n\n\n\nEnsuite,\n\n\n\nChargement paresseux ou lazyload. Les thèmes Shopify le proposent parfois en natif.\n\n\n\nPour ce qui est du lazyload, il consiste à différer le chargement des images jusqu’à ce qu’elles soient visibles.\n\n\n\nLa mise en place de cette optimisation fera l’objet d’un futur article de blog, mais voici la version abrégée :\n\n\n\n\nAjoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.\n\n\n\nMettez à jour les balises d’image en remplaçant src par data-src et en ajoutant la classe lazyload.\n\n\n\n\nVous aurez donc une image standard qui peut ressembler à ceci :\n\n\n\n<img src=\"IMAGE_URL.jpeg\">\n\n\n\nQui ressemblerait maintenant à : <img data-src=\"IMAGE_URL.jpeg\" class=\"lazyload\">\n\n\n\nLa différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C’est tout, c’est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous.\n\n\n\n\n\n\n\nDésinstallation des applications inutilisées\n\n\n\nVeillez à désinstaller toutes les applications que vous n’utilisez pas, et à supprimer tout code restant sur votre site.\n\n\n\nLe mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération.\n\n\n\nChargement conditionnel des scripts d’application\n\n\n\nPar défaut, la plupart des scripts d’application sont ajoutés à votre fichier theme.liquid de sorte qu’ils se chargent sur chaque page, c’est pratique, mais c’est également très lent !\n\n\n\nC’est l’équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour… Ne serait-il pas plus efficace de n’avoir un parapluie que lorsqu’il pleut ?\n\n\n\nAvec les applications, c’est possible grâce au chargement conditionnel.\n\n\n\nEn bref, si une condition est remplie, le script de l’application est chargé.\n\n\n\nPar exemple :\n\n\n\nAvis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement.\n\n\n\nBoutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S’il s’agit uniquement de certains types de pages, chargez-les uniquement sur ces pages.\n\n\n\nIl est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if.\n\n\n\n\nRepérer dans le fichier theme.liquid l’appel à des applications. \"render\" ou \"include\"\n\n\n\nRepérer où ces applications sont utilisées dans le site, puis ajouter les conditions if\n\n\n\n\n{% if template == 'product' %}\n{% include 'ton-app' %}\n{% endif %}\n\n\n\nOu pour des pages spécifiques :\n\n\n\n{% if page.handle == 'contact' %}\n{% render 'ton-app' %}\n{% endif %}\n\n\n\nMaintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c’est nécessaire.\n\n\n\n\nPour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.\nDocumentation du langage open source .liquid\n\n\n\nAller encore plus loin (perfectionnistes)\n\n\n\nSi vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :\n\n\n\nOptimiser les vidéos\n\n\n\nL’objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison. \n\n\n\n\nRéduire les fichiers vidéo avec l’outil en ligne : videosmaller.com\n\n\n\nAjouter le lazyloading natif : loading=\"lazy\" à la main s’il n’y a que quelques vidéos.\n\n\n\n\n<iframe src="video-player.html" title="..." loading="lazy"></iframe>\n\n\n\nOn pourrait aussi l’ajouter dynamiquement à tous les iframes d’un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog.\n\n\n\n{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}\n\n\n\nSi vous vous n’êtes pas servi d’une iframe (ex: Vidéos YouTube) mais d’une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu’une url, et il faudra ajouter l’attribut preload=\"none\" pour différer le chargement de cette manière :\n\n\n\n<video style="max-width:100%; height:auto;" src="video.mp4"\npreload="none"\n</video>\n\n\n\nOptimiser et limiter les polices (font)\n\n\n\nSur l’outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site.\n\n\n\n\nJe recommande d’utiliser 1 voire 2 polices Maximum en plus de la police d’écriture ‘Open Sans’.\n\n\n\nDans le code, identifier où les polices sont appelées (normalement theme.liquid) et ajouter l’attribut « preload » pour précharger vos fichiers de police en priorité. <link rel=\"preload as=\"font\">\n\n\n\nUtiliser la valeur ‘swap’ qui indique au navigateur d’utiliser la police de secours pour afficher le texte jusqu’à ce que la police personnalisée ait été entièrement téléchargée. Pour l’ajouter sur les polices internes et externes : \n\nPolices système en local : Directement dans les fichiers où l’on configure les polices (ex : font.css), vous devrez ajouter à la class, la valeur : font-display: swap\n\n\n\nGoogle Fonts : Dans le cas d’une implémentation des polices Google, il suffit d’ajouter au script qui se trouve dans le header : <link href=\"https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap\" rel=\"stylesheet\">\n\n\n\n\n\n\nMinification de JS et CSS\n\n\n\nLa minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n’en citer que quelques-uns.\n\n\n\nPour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress.\n\n\n\nSinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css.\n\n\n\nAsynchroniser/différer les scripts non essentiels\n\n\n\nSi vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu’ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d’être exécuté.\n\n\n\nCe diagramme explique les différences dans la façon dont ils sont chargés :\n\n\n\nAsynchroniser/différer les scripts CSS/JS non-essentiels\n\n\n\nIl s’agit d’une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n’est pas votre métier.\n\n\n\nRegrouper les scripts de suivis dans Google Tag Manager\n\n\n\nGoogle Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d’ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio… il est recommandé de les intégrer dans GTM et d’appeler ce seul script de suivi dans la balise <head>.\n\n\n\n\nAller sur Pagespeed\n\n\n\nRegarder dans Diagnostic s’il y a la ligne > Réduire l’impact du code tiers\n\n\n\nS’il y a plusieurs scripts, les migrer vers GTM.\n\n\n\nImplémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid.\n\n\n\n\n<!-- Google tag (gtag.js) -->\n <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>\n\n\n\nIndications sur les ressources / préchargement\n\n\n\nLes indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes.\n\n\n\nChacune a un objectif différent :\n\n\n\n\nPreload : Récupérer une ressource critique pour la page actuelle avant que la page ne commence à s’afficher.\n\n\n\nPrefetch : Récupérer les ressources qui ne sont pas nécessaires pour la page actuelle, mais qui le seront probablement pour la page suivante, par exemple la feuille de style.\n\n\n\nDNS-Prefetch : Réduit la latence en effectuant une recherche DNS à l’avance vers un domaine à partir duquel vous allez charger les ressources. Notez que cette opération est effectuée après le chargement de la page actuelle.\n\n\n\nPreconnect : Pour les cas où vous prévoyez de récupérer le contenu d’un domaine spécifique dans les 10 secondes. Semblable à DNS-Prefetch mais cela effectue également les liaisons à trois voies TCP (TCP handshake) et la négociation TLS.\n\n\n\n\nIls peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :\n\n\n\n<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n<link rel="preconnect" href="//cdn.shopify.com">\n\n\n\nConclusion\n\n\n\nShopify est une plateforme assez rapide qui optimise automatiquement la vitesse.\n\n\n\nMais avec un grand nombre d’images, des thèmes inefficaces et une liste interminable d’applications à installer, il est facile d’alourdir votre site web et de le rendre lent.\n\n\n\nNe visez pas un score de rapidité parfait, c’est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions.\n\n\n\nToutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique.\n\n\n\nSi vous avez besoin d’aide, nous offrons ce service à nos clients SEO, alors n’hésitez pas à nous contacter ici.\n\n\n\nBonne chance pour la vitesse et la conversion de votre site.","paragraphs":["Introduction au temps de chargement","Mise à jour 2026","Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion… autant de conséquences d’une page qui répond lentement. L’optimisation de la vitesse du site est l’une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d’utilisateurs. ","Deux études le prouvent : ","Dans un communiqué, le géant Amazon déclare qu’une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.","L’outil d’analyse Semrush relève lui aussi, qu’un retard de chargement d’une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA.","En moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C’est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO.","Découvrez les meilleures méthodes pour accélérer la réponse de vos pages.","Comment accélérer le temps de réponse des pages ?","Afin de pouvoir comparer l’avant / après optimisation, pensez à faire des captures d’écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix.","Votre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l’ordre de chargement des ressources sur la page analysée.","Waterfall : Ordre et vitesse de chargement des ressources","Les essentiels :","Choisir un thème Shopify léger","Le choix d’un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l’inverse, un thème plus léger permettra à votre site d’être plus performant à l’avenir.","Bien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site.","Réduisez le poids de vos visuels","Notre objectif est d’avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l’envoi d’une image dans votre site, veillez à ces 5 points :","1 – Choisir le format approprié","En fonction du type d’image, choisissez le format qui convient :","Il faut favoriser le format WEBP, c’est la meilleure option.","S’il y a besoin de transparence, du PNG en cherchant à compresser le plus possible.","Si pas de transparence, dans tous les autres cas, du JPEG en compressant avec les recos qui suivent.","Pour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.","Pour les images avec du texte, on favorisera le format PNG compressé ou WEBP.","Quel est le meilleur format d’image selon shopify ?\nShopify : documentation officielle","2 – Redimensionnez à taille réelle","Si vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l’erreur de les envoyer tels quels.","Redimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG, 1 à 1,5 fois la taille réelle du conteneur dans le navigateur (cela peut être 2 fois les dimensions indiquées pour couvrir les écrans rétina).","Utilisez srcset, qui charge conditionnellement la bonne taille d’image en fonction de l’appareil.","Si vous avez l’avertissement « Images surdimensionnées » dans l’outil Shopify Analyzer, cette solution srcset résoudra ce problème.\nKalys – Agence SEO 100% Shopify","Srcset permet d’afficher l’image en taille 1x sur les écrans normaux et 2x sur les écrans rétina.","Srcset peut aussi redimensionner l’image selon différentes tailles d’écran.","3 – Utilisez la compression","Choisir le bon format de fichier n’est qu’une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d’images à 80 / 90% de leur qualité :","Grandes images (banner, slider…) : 200 KO maximum","Petites images (produits, descriptions…) 80 KO maximum","J’ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :","Taille des images divisée par 2 après compression d’images","Vous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable.","La réduction d’une image à 80 / 90% de sa qualité initiale ne se voit pas à l’œil nu. Voici un exemple d’une image de 68ko puis de 39ko après compression.","Heureusement, c’est facile à faire. Avec une application Shopify, vous pouvez automatiser l’ensemble du processus. Voici nos préférées :","Payantes :","Hyperspeed – 49$ / Mois. C’est la rolls des app ! Elle regroupe tout ce qui est important pour la vitesse de chargement.","Tiny IMG – 3$ / Mois. 5000 images sur 2an, c’est celui qu’on utilise le plus.","Smart SEO – 10$ / mois, 1000 images / mois, d’autres fonctionnalités très intéressantes.","Gratuites :","Gratuit est mort mais derrière lui, il a quand même laissé :","SEO Image Optimizer – 50 images gratuites / mois, choix du niveau de compression, rétroaction, optimise tous types d’images en automatique. En gratuit c’est notre préféré.","Tiny IMG – 50 images gratuites / mois, rétroaction, optimise tous types d’images en automatique.","Dans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d’applications supplémentaires afin de réduire les temps de chargement.","4 – Remplacer les GIF par des images statiques","Une tendance que nous avons observée sur les boutiques Shopify les plus lentes est l’utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs.","Cependant, les ressources GIF sont extrêmement volumineuses.","Nous avons vu des cas où l’utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible.","Cependant, si vous tenez quand même à utiliser des images animées, 2 choix s’offrent à vous :","Compresser le GIF","Utiliser un autre format d’images animées plus léger (par ex. LottieFiles)","5 – Preload et Lazyload","En général, lorsqu’une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?","Les pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d’entre elles sont visibles même après le chargement de la page. Beaucoup d’entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles.","Tous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel=\"preload\". L’objectif est d’avoir un chargement prioritaire du logo, des images d’en-têtes, background, icon, polices d’écriture, script css ou js… pour que l’internaute commence son expérience de navigation le plus rapidement possible.","L’ajout du rel= »preload » permet de charger prioritairement certaines ressources.","Voici comment faire pour précharger une image :","Commencer par dupliquer votre thème pour travailler en preview.","Dans personnaliser le thème > trouver la section où est ajoutée l’image.","Aller chercher cette section dans le code du thème (copié).","Repérer l’endroit d’insertion de l’image et ajouter dans les attributs : rel=\"preload\"","Vérifier sur le site > clic droit > inspecter > cliquer sur l’image et regarder si l’attribut rel=preload s’est bien ajouté.","Il faudra répéter l’opération pour les autres éléments à précharger.","Ensuite,","Chargement paresseux ou lazyload. Les thèmes Shopify le proposent parfois en natif.","Pour ce qui est du lazyload, il consiste à différer le chargement des images jusqu’à ce qu’elles soient visibles.","La mise en place de cette optimisation fera l’objet d’un futur article de blog, mais voici la version abrégée :","Ajoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.","Mettez à jour les balises d’image en remplaçant src par data-src et en ajoutant la classe lazyload.","Vous aurez donc une image standard qui peut ressembler à ceci :","<img src=\"IMAGE_URL.jpeg\">","Qui ressemblerait maintenant à : <img data-src=\"IMAGE_URL.jpeg\" class=\"lazyload\">","La différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C’est tout, c’est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous.","Désinstallation des applications inutilisées","Veillez à désinstaller toutes les applications que vous n’utilisez pas, et à supprimer tout code restant sur votre site.","Le mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération.","Chargement conditionnel des scripts d’application","Par défaut, la plupart des scripts d’application sont ajoutés à votre fichier theme.liquid de sorte qu’ils se chargent sur chaque page, c’est pratique, mais c’est également très lent !","C’est l’équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour… Ne serait-il pas plus efficace de n’avoir un parapluie que lorsqu’il pleut ?","Avec les applications, c’est possible grâce au chargement conditionnel.","En bref, si une condition est remplie, le script de l’application est chargé.","Par exemple :","Avis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement.","Boutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S’il s’agit uniquement de certains types de pages, chargez-les uniquement sur ces pages.","Il est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if.","Repérer dans le fichier theme.liquid l’appel à des applications. \"render\" ou \"include\"","Repérer où ces applications sont utilisées dans le site, puis ajouter les conditions if","{% if template == 'product' %}\n{% include 'ton-app' %}\n{% endif %}","Ou pour des pages spécifiques :","{% if page.handle == 'contact' %}\n{% render 'ton-app' %}\n{% endif %}","Maintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c’est nécessaire.","Pour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.\nDocumentation du langage open source .liquid","Aller encore plus loin (perfectionnistes)","Si vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :","Optimiser les vidéos","L’objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison.","Réduire les fichiers vidéo avec l’outil en ligne : videosmaller.com","Ajouter le lazyloading natif : loading=\"lazy\" à la main s’il n’y a que quelques vidéos.","<iframe src="video-player.html" title="..." loading="lazy"></iframe>","On pourrait aussi l’ajouter dynamiquement à tous les iframes d’un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog.","{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}","Si vous vous n’êtes pas servi d’une iframe (ex: Vidéos YouTube) mais d’une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu’une url, et il faudra ajouter l’attribut preload=\"none\" pour différer le chargement de cette manière :","<video style="max-width:100%; height:auto;" src="video.mp4"\npreload="none"\n</video>","Optimiser et limiter les polices (font)","Sur l’outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site.","Je recommande d’utiliser 1 voire 2 polices Maximum en plus de la police d’écriture ‘Open Sans’.","Dans le code, identifier où les polices sont appelées (normalement theme.liquid) et ajouter l’attribut « preload » pour précharger vos fichiers de police en priorité. <link rel=\"preload as=\"font\">","Utiliser la valeur ‘swap’ qui indique au navigateur d’utiliser la police de secours pour afficher le texte jusqu’à ce que la police personnalisée ait été entièrement téléchargée. Pour l’ajouter sur les polices internes et externes :","Polices système en local : Directement dans les fichiers où l’on configure les polices (ex : font.css), vous devrez ajouter à la class, la valeur : font-display: swap","Google Fonts : Dans le cas d’une implémentation des polices Google, il suffit d’ajouter au script qui se trouve dans le header : <link href=\"https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap\" rel=\"stylesheet\">","Minification de JS et CSS","La minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n’en citer que quelques-uns.","Pour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress.","Sinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css.","Asynchroniser/différer les scripts non essentiels","Si vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu’ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d’être exécuté.","Ce diagramme explique les différences dans la façon dont ils sont chargés :","Asynchroniser/différer les scripts CSS/JS non-essentiels","Il s’agit d’une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n’est pas votre métier.","Regrouper les scripts de suivis dans Google Tag Manager","Google Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d’ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio… il est recommandé de les intégrer dans GTM et d’appeler ce seul script de suivi dans la balise <head>.","Aller sur Pagespeed","Regarder dans Diagnostic s’il y a la ligne > Réduire l’impact du code tiers","S’il y a plusieurs scripts, les migrer vers GTM.","Implémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid.","<!-- Google tag (gtag.js) -->\n <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>","Indications sur les ressources / préchargement","Les indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes.","Chacune a un objectif différent :","Preload : Récupérer une ressource critique pour la page actuelle avant que la page ne commence à s’afficher.","Prefetch : Récupérer les ressources qui ne sont pas nécessaires pour la page actuelle, mais qui le seront probablement pour la page suivante, par exemple la feuille de style.","DNS-Prefetch : Réduit la latence en effectuant une recherche DNS à l’avance vers un domaine à partir duquel vous allez charger les ressources. Notez que cette opération est effectuée après le chargement de la page actuelle.","Preconnect : Pour les cas où vous prévoyez de récupérer le contenu d’un domaine spécifique dans les 10 secondes. Semblable à DNS-Prefetch mais cela effectue également les liaisons à trois voies TCP (TCP handshake) et la négociation TLS.","Ils peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :","<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n<link rel="preconnect" href="//cdn.shopify.com">","Conclusion","Shopify est une plateforme assez rapide qui optimise automatiquement la vitesse.","Mais avec un grand nombre d’images, des thèmes inefficaces et une liste interminable d’applications à installer, il est facile d’alourdir votre site web et de le rendre lent.","Ne visez pas un score de rapidité parfait, c’est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions.","Toutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique.","Si vous avez besoin d’aide, nous offrons ce service à nos clients SEO, alors n’hésitez pas à nous contacter ici.","Bonne chance pour la vitesse et la conversion de votre site."],"content_blocks":[{"id":"heading-1","type":"core/heading","heading":"Introduction au temps de chargement","plain_text":"Introduction au temps de chargement","html":"\n

Introduction au temps de chargement

\n"},{"id":"paragraph-2","type":"core/paragraph","heading":"","plain_text":"Mise à jour %%currentyear%%","html":"\n

Mise à jour %%currentyear%%

\n"},{"id":"paragraph-3","type":"core/paragraph","heading":"","plain_text":"Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion... autant de conséquences d'une page qui répond lentement. L'optimisation de la vitesse du site est l'une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d'utilisateurs. ","html":"\n

Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion... autant de conséquences d'une page qui répond lentement. L'optimisation de la vitesse du site est l'une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d'utilisateurs. 

\n"},{"id":"paragraph-4","type":"core/paragraph","heading":"","plain_text":"Deux études le prouvent : ","html":"\n

Deux études le prouvent : 

\n"},{"id":"paragraph-5","type":"core/paragraph","heading":"","plain_text":"Dans un communiqué, le géant Amazon déclare qu'une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.","html":"\n

Dans un communiqué, le géant Amazon déclare qu'une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.

\n"},{"id":"paragraph-6","type":"core/paragraph","heading":"","plain_text":"L'outil d'analyse Semrush relève lui aussi, qu'un retard de chargement d'une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA.","html":"\n

L'outil d'analyse Semrush relève lui aussi, qu'un retard de chargement d'une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA.

\n"},{"id":"paragraph-7","type":"core/paragraph","heading":"","plain_text":"En moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C'est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO.","html":"\n

En moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C'est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO.

\n"},{"id":"paragraph-8","type":"core/paragraph","heading":"","plain_text":"Découvrez les meilleures méthodes pour accélérer la réponse de vos pages.","html":"\n

Découvrez les meilleures méthodes pour accélérer la réponse de vos pages.

\n"},{"id":"heading-9","type":"core/heading","heading":"Comment accélérer le temps de réponse des pages ?","plain_text":"Comment accélérer le temps de réponse des pages ?","html":"\n

Comment accélérer le temps de réponse des pages ?

\n"},{"id":"paragraph-10","type":"core/paragraph","heading":"","plain_text":"Afin de pouvoir comparer l'avant / après optimisation, pensez à faire des captures d'écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix.","html":"\n

Afin de pouvoir comparer l'avant / après optimisation, pensez à faire des captures d'écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix.

\n"},{"id":"paragraph-11","type":"core/paragraph","heading":"","plain_text":"Votre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l'ordre de chargement des ressources sur la page analysée.","html":"\n

Votre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l'ordre de chargement des ressources sur la page analysée.

\n"},{"id":"image-12","type":"core/image","heading":"","plain_text":"Waterfall : Ordre et vitesse de chargement des ressources","html":"\n
\"Analyse
Waterfall : Ordre et vitesse de chargement des ressources
\n"},{"id":"heading-13","type":"core/heading","heading":"Les essentiels :","plain_text":"Les essentiels :","html":"\n

Les essentiels :

\n"},{"id":"heading-14","type":"core/heading","heading":"Choisir un thème Shopify léger","plain_text":"Choisir un thème Shopify léger","html":"\n

Choisir un thème Shopify léger

\n"},{"id":"paragraph-15","type":"core/paragraph","heading":"","plain_text":"Le choix d'un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l'inverse, un thème plus léger permettra à votre site d'être plus performant à l'avenir.","html":"\n

Le choix d'un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l'inverse, un thème plus léger permettra à votre site d'être plus performant à l'avenir.

\n"},{"id":"paragraph-16","type":"core/paragraph","heading":"","plain_text":"Bien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site.","html":"\n

Bien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site.

\n"},{"id":"heading-17","type":"core/heading","heading":"Réduisez le poids de vos visuels","plain_text":"Réduisez le poids de vos visuels","html":"\n

Réduisez le poids de vos visuels

\n"},{"id":"paragraph-18","type":"core/paragraph","heading":"","plain_text":"Notre objectif est d'avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l'envoi d'une image dans votre site, veillez à ces 5 points :","html":"\n

Notre objectif est d'avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l'envoi d'une image dans votre site, veillez à ces 5 points :

\n"},{"id":"heading-19","type":"core/heading","heading":"1 - Choisir le format approprié","plain_text":"1 - Choisir le format approprié","html":"\n

1 - Choisir le format approprié

\n"},{"id":"paragraph-20","type":"core/paragraph","heading":"","plain_text":"En fonction du type d'image, choisissez le format qui convient :","html":"\n

En fonction du type d'image, choisissez le format qui convient :

\n"},{"id":"list-21","type":"core/list","heading":"","plain_text":"Il faut favoriser le format WEBP, c'est la meilleure option.\n\n\n\nS'il y a besoin de transparence, du PNG en cherchant à compresser le plus possible.\n\n\n\nSi pas de transparence, dans tous les autres cas, du JPEG en compressant avec les recos qui suivent.\n\n\n\nPour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.\n\n\n\nPour les images avec du texte, on favorisera le format PNG compressé ou WEBP.","html":"\n\n"},{"id":"quote-22","type":"core/quote","heading":"","plain_text":"Quel est le meilleur format d'image selon shopify ?\nShopify : documentation officielle","html":"\n
\n

Quel est le meilleur format d'image selon shopify ?

\nShopify : documentation officielle
\n"},{"id":"heading-23","type":"core/heading","heading":"2 - Redimensionnez à taille réelle","plain_text":"2 - Redimensionnez à taille réelle","html":"\n

2 - Redimensionnez à taille réelle

\n"},{"id":"paragraph-24","type":"core/paragraph","heading":"","plain_text":"Si vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l'erreur de les envoyer tels quels.","html":"\n

Si vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l'erreur de les envoyer tels quels.

\n"},{"id":"list-25","type":"core/list","heading":"","plain_text":"Redimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG, 1 à 1,5 fois la taille réelle du conteneur dans le navigateur (cela peut être 2 fois les dimensions indiquées pour couvrir les écrans rétina).\n\n\n\nUtilisez srcset, qui charge conditionnellement la bonne taille d'image en fonction de l'appareil.","html":"\n\n"},{"id":"quote-26","type":"core/quote","heading":"","plain_text":"Si vous avez l'avertissement \"Images surdimensionnées\" dans l'outil Shopify Analyzer, cette solution srcset résoudra ce problème.\nKalys - Agence SEO 100% Shopify","html":"\n
\n

Si vous avez l'avertissement \"Images surdimensionnées\" dans l'outil Shopify Analyzer, cette solution srcset résoudra ce problème.

\nKalys - Agence SEO 100% Shopify
\n"},{"id":"image-27","type":"core/image","heading":"","plain_text":"Srcset permet d'afficher l'image en taille 1x sur les écrans normaux et 2x sur les écrans rétina.","html":"\n
\"srcset
Srcset permet d'afficher l'image en taille 1x sur les écrans normaux et 2x sur les écrans rétina.
\n"},{"id":"image-28","type":"core/image","heading":"","plain_text":"Srcset peut aussi redimensionner l'image selon différentes tailles d'écran.","html":"\n
\"srcset
Srcset peut aussi redimensionner l'image selon différentes tailles d'écran.
\n"},{"id":"heading-29","type":"core/heading","heading":"3 - Utilisez la compression","plain_text":"3 - Utilisez la compression","html":"\n

3 - Utilisez la compression

\n"},{"id":"paragraph-30","type":"core/paragraph","heading":"","plain_text":"Choisir le bon format de fichier n'est qu'une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d'images à 80 / 90% de leur qualité :","html":"\n

Choisir le bon format de fichier n'est qu'une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d'images à 80 / 90% de leur qualité :

\n"},{"id":"list-31","type":"core/list","heading":"","plain_text":"Grandes images (banner, slider...) : 200 KO maximum\n\n\n\nPetites images (produits, descriptions...) 80 KO maximum","html":"\n\n"},{"id":"paragraph-32","type":"core/paragraph","heading":"","plain_text":"J'ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :","html":"\n

J'ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :

\n"},{"id":"image-33","type":"core/image","heading":"","plain_text":"Taille des images divisée par 2 après compression d'images","html":"\n
\"compression
Taille des images divisée par 2 après compression d'images
\n"},{"id":"paragraph-34","type":"core/paragraph","heading":"","plain_text":"Vous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable.","html":"\n

Vous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable.

\n"},{"id":"paragraph-35","type":"core/paragraph","heading":"","plain_text":"La réduction d'une image à 80 / 90% de sa qualité initiale ne se voit pas à l'œil nu. Voici un exemple d'une image de 68ko puis de 39ko après compression.","html":"\n

La réduction d'une image à 80 / 90% de sa qualité initiale ne se voit pas à l'œil nu. Voici un exemple d'une image de 68ko puis de 39ko après compression.

\n"},{"id":"paragraph-36","type":"core/paragraph","heading":"","plain_text":"Heureusement, c'est facile à faire. Avec une application Shopify, vous pouvez automatiser l'ensemble du processus. Voici nos préférées :","html":"\n

Heureusement, c'est facile à faire. Avec une application Shopify, vous pouvez automatiser l'ensemble du processus. Voici nos préférées :

\n"},{"id":"paragraph-37","type":"core/paragraph","heading":"","plain_text":"Payantes :","html":"\n

Payantes :

\n"},{"id":"list-38","type":"core/list","heading":"","plain_text":"Hyperspeed - 49$ / Mois. C'est la rolls des app ! Elle regroupe tout ce qui est important pour la vitesse de chargement.\n\n\n\nTiny IMG - 3$ / Mois. 5000 images sur 2an, c'est celui qu'on utilise le plus.\n\n\n\nSmart SEO - 10$ / mois, 1000 images / mois, d'autres fonctionnalités très intéressantes.","html":"\n\n"},{"id":"paragraph-39","type":"core/paragraph","heading":"","plain_text":"Gratuites :","html":"\n

Gratuites :

\n"},{"id":"paragraph-40","type":"core/paragraph","heading":"","plain_text":"Gratuit est mort mais derrière lui, il a quand même laissé :","html":"\n

Gratuit est mort mais derrière lui, il a quand même laissé :

\n"},{"id":"list-41","type":"core/list","heading":"","plain_text":"SEO Image Optimizer - 50 images gratuites / mois, choix du niveau de compression, rétroaction, optimise tous types d'images en automatique. En gratuit c'est notre préféré.\n\n\n\nTiny IMG - 50 images gratuites / mois, rétroaction, optimise tous types d'images en automatique.","html":"\n\n"},{"id":"paragraph-42","type":"core/paragraph","heading":"","plain_text":"Dans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d'applications supplémentaires afin de réduire les temps de chargement.","html":"\n

Dans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d'applications supplémentaires afin de réduire les temps de chargement.

\n"},{"id":"heading-43","type":"core/heading","heading":"4 - Remplacer les GIF par des images statiques","plain_text":"4 - Remplacer les GIF par des images statiques","html":"\n

4 - Remplacer les GIF par des images statiques

\n"},{"id":"paragraph-44","type":"core/paragraph","heading":"","plain_text":"Une tendance que nous avons observée sur les boutiques Shopify les plus lentes est l'utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs.","html":"\n

Une tendance que nous avons observée sur les boutiques Shopify les plus lentes est l'utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs.

\n"},{"id":"paragraph-45","type":"core/paragraph","heading":"","plain_text":"Cependant, les ressources GIF sont extrêmement volumineuses.","html":"\n

Cependant, les ressources GIF sont extrêmement volumineuses.

\n"},{"id":"paragraph-46","type":"core/paragraph","heading":"","plain_text":"Nous avons vu des cas où l'utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible.","html":"\n

Nous avons vu des cas où l'utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible.

\n"},{"id":"paragraph-47","type":"core/paragraph","heading":"","plain_text":"Cependant, si vous tenez quand même à utiliser des images animées, 2 choix s'offrent à vous :","html":"\n

Cependant, si vous tenez quand même à utiliser des images animées, 2 choix s'offrent à vous :

\n"},{"id":"list-48","type":"core/list","heading":"","plain_text":"Compresser le GIF\n\n\n\nUtiliser un autre format d'images animées plus léger (par ex. LottieFiles)","html":"\n
    \n
  1. Compresser le GIF
    2. \n\n\n\n
  2. Utiliser un autre format d'images animées plus léger (par ex. LottieFiles)
    3. \n
\n"},{"id":"heading-49","type":"core/heading","heading":"5 - Preload et Lazyload","plain_text":"5 - Preload et Lazyload","html":"\n

5 - Preload et Lazyload

\n"},{"id":"paragraph-50","type":"core/paragraph","heading":"","plain_text":"En général, lorsqu'une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?","html":"\n

En général, lorsqu'une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?

\n"},{"id":"paragraph-51","type":"core/paragraph","heading":"","plain_text":"Les pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d'entre elles sont visibles même après le chargement de la page. Beaucoup d'entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles.","html":"\n

Les pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d'entre elles sont visibles même après le chargement de la page. Beaucoup d'entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles.

\n"},{"id":"paragraph-52","type":"core/paragraph","heading":"","plain_text":"Tous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel=\"preload\". L'objectif est d'avoir un chargement prioritaire du logo, des images d'en-têtes, background, icon, polices d'écriture, script css ou js… pour que l'internaute commence son expérience de navigation le plus rapidement possible.","html":"\n

Tous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel=\"preload\". L'objectif est d'avoir un chargement prioritaire du logo, des images d'en-têtes, background, icon, polices d'écriture, script css ou js… pour que l'internaute commence son expérience de navigation le plus rapidement possible.

\n"},{"id":"image-53","type":"core/image","heading":"","plain_text":"L'ajout du rel=\"preload\" permet de charger prioritairement certaines ressources.","html":"\n
\"preload
L'ajout du rel=\"preload\" permet de charger prioritairement certaines ressources.
\n"},{"id":"paragraph-54","type":"core/paragraph","heading":"","plain_text":"Voici comment faire pour précharger une image :","html":"\n

Voici comment faire pour précharger une image :

\n"},{"id":"list-55","type":"core/list","heading":"","plain_text":"Commencer par dupliquer votre thème pour travailler en preview.\n\n\n\nDans personnaliser le thème > trouver la section où est ajoutée l'image.\n\n\n\nAller chercher cette section dans le code du thème (copié).\n\n\n\nRepérer l'endroit d'insertion de l'image et ajouter dans les attributs : rel=\"preload\"\n\n\n\nVérifier sur le site > clic droit > inspecter > cliquer sur l'image et regarder si l'attribut rel=preload s'est bien ajouté.","html":"\n
    \n
  1. Commencer par dupliquer votre thème pour travailler en preview.
    2. \n\n\n\n
  2. Dans personnaliser le thème > trouver la section où est ajoutée l'image.
    3. \n\n\n\n
  3. Aller chercher cette section dans le code du thème (copié).
    4. \n\n\n\n
  4. Repérer l'endroit d'insertion de l'image et ajouter dans les attributs : rel=\"preload\"
    5. \n\n\n\n
  5. Vérifier sur le site > clic droit > inspecter > cliquer sur l'image et regarder si l'attribut rel=preload s'est bien ajouté.
    6. \n
\n"},{"id":"paragraph-56","type":"core/paragraph","heading":"","plain_text":"Il faudra répéter l'opération pour les autres éléments à précharger.","html":"\n

Il faudra répéter l'opération pour les autres éléments à précharger.

\n"},{"id":"paragraph-57","type":"core/paragraph","heading":"","plain_text":"Ensuite,","html":"\n

Ensuite,

\n"},{"id":"image-58","type":"core/image","heading":"","plain_text":"Chargement paresseux ou lazyload. Les thèmes Shopify le proposent parfois en natif.","html":"\n
\"lazyload\"
Chargement paresseux ou lazyload. Les thèmes Shopify le proposent parfois en natif.
\n"},{"id":"paragraph-59","type":"core/paragraph","heading":"","plain_text":"Pour ce qui est du lazyload, il consiste à différer le chargement des images jusqu'à ce qu'elles soient visibles.","html":"\n

Pour ce qui est du lazyload, il consiste à différer le chargement des images jusqu'à ce qu'elles soient visibles.

\n"},{"id":"paragraph-60","type":"core/paragraph","heading":"","plain_text":"La mise en place de cette optimisation fera l'objet d'un futur article de blog, mais voici la version abrégée :","html":"\n

La mise en place de cette optimisation fera l'objet d'un futur article de blog, mais voici la version abrégée :

\n"},{"id":"list-61","type":"core/list","heading":"","plain_text":"Ajoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.\n\n\n\nMettez à jour les balises d'image en remplaçant src par data-src et en ajoutant la classe lazyload.","html":"\n
    \n
  1. Ajoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.
    2. \n\n\n\n
  2. Mettez à jour les balises d'image en remplaçant src par data-src et en ajoutant la classe lazyload.
    3. \n
\n"},{"id":"paragraph-62","type":"core/paragraph","heading":"","plain_text":"Vous aurez donc une image standard qui peut ressembler à ceci :","html":"\n

Vous aurez donc une image standard qui peut ressembler à ceci :

\n"},{"id":"paragraph-63","type":"core/paragraph","heading":"","plain_text":"<img src=\"IMAGE_URL.jpeg\">","html":"\n

<img src=\"IMAGE_URL.jpeg\">

\n"},{"id":"paragraph-64","type":"core/paragraph","heading":"","plain_text":"Qui ressemblerait maintenant à : <img data-src=\"IMAGE_URL.jpeg\" class=\"lazyload\">","html":"\n

Qui ressemblerait maintenant à : <img data-src=\"IMAGE_URL.jpeg\" class=\"lazyload\">

\n"},{"id":"paragraph-65","type":"core/paragraph","heading":"","plain_text":"La différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C'est tout, c'est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous.","html":"\n

La différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C'est tout, c'est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous.

\n"},{"id":"heading-66","type":"core/heading","heading":"Désinstallation des applications inutilisées","plain_text":"Désinstallation des applications inutilisées","html":"\n

Désinstallation des applications inutilisées

\n"},{"id":"paragraph-67","type":"core/paragraph","heading":"","plain_text":"Veillez à désinstaller toutes les applications que vous n'utilisez pas, et à supprimer tout code restant sur votre site.","html":"\n

Veillez à désinstaller toutes les applications que vous n'utilisez pas, et à supprimer tout code restant sur votre site.

\n"},{"id":"paragraph-68","type":"core/paragraph","heading":"","plain_text":"Le mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération.","html":"\n

Le mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération.

\n"},{"id":"heading-69","type":"core/heading","heading":"Chargement conditionnel des scripts d'application","plain_text":"Chargement conditionnel des scripts d'application","html":"\n

Chargement conditionnel des scripts d'application

\n"},{"id":"paragraph-70","type":"core/paragraph","heading":"","plain_text":"Par défaut, la plupart des scripts d'application sont ajoutés à votre fichier theme.liquid de sorte qu'ils se chargent sur chaque page, c'est pratique, mais c'est également très lent !","html":"\n

Par défaut, la plupart des scripts d'application sont ajoutés à votre fichier theme.liquid de sorte qu'ils se chargent sur chaque page, c'est pratique, mais c'est également très lent !

\n"},{"id":"paragraph-71","type":"core/paragraph","heading":"","plain_text":"C'est l'équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour... Ne serait-il pas plus efficace de n'avoir un parapluie que lorsqu'il pleut ?","html":"\n

C'est l'équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour... Ne serait-il pas plus efficace de n'avoir un parapluie que lorsqu'il pleut ?

\n"},{"id":"paragraph-72","type":"core/paragraph","heading":"","plain_text":"Avec les applications, c'est possible grâce au chargement conditionnel.","html":"\n

Avec les applications, c'est possible grâce au chargement conditionnel.

\n"},{"id":"paragraph-73","type":"core/paragraph","heading":"","plain_text":"En bref, si une condition est remplie, le script de l'application est chargé.","html":"\n

En bref, si une condition est remplie, le script de l'application est chargé.

\n"},{"id":"paragraph-74","type":"core/paragraph","heading":"","plain_text":"Par exemple :","html":"\n

Par exemple :

\n"},{"id":"paragraph-75","type":"core/paragraph","heading":"","plain_text":"Avis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement.","html":"\n

Avis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement.

\n"},{"id":"paragraph-76","type":"core/paragraph","heading":"","plain_text":"Boutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S'il s'agit uniquement de certains types de pages, chargez-les uniquement sur ces pages.","html":"\n

Boutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S'il s'agit uniquement de certains types de pages, chargez-les uniquement sur ces pages.

\n"},{"id":"paragraph-77","type":"core/paragraph","heading":"","plain_text":"Il est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if.","html":"\n

Il est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if.

\n"},{"id":"list-78","type":"core/list","heading":"","plain_text":"Repérer dans le fichier theme.liquid l'appel à des applications. \"render\" ou \"include\"\n\n\n\nRepérer où ces applications sont utilisées dans le site, puis ajouter les conditions if","html":"\n
    \n
  1. Repérer dans le fichier theme.liquid l'appel à des applications. \"render\" ou \"include\"
    2. \n\n\n\n
  2. Repérer où ces applications sont utilisées dans le site, puis ajouter les conditions if
    3. \n
\n"},{"id":"kevinbatdorfcode-block-pro-79","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"{% if template == 'product' %}\n{% include 'ton-app' %}\n{% endif %}","html":"\n
{% if template == 'product' %}\n{% include 'ton-app' %}\n{% endif %}
\n"},{"id":"paragraph-80","type":"core/paragraph","heading":"","plain_text":"Ou pour des pages spécifiques :","html":"\n

Ou pour des pages spécifiques :

\n"},{"id":"kevinbatdorfcode-block-pro-81","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"{% if page.handle == 'contact' %}\n{% render 'ton-app' %}\n{% endif %}","html":"\n
{% if page.handle == 'contact' %}\n{% render 'ton-app' %}\n{% endif %}
\n"},{"id":"paragraph-82","type":"core/paragraph","heading":"","plain_text":"Maintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c'est nécessaire.","html":"\n

Maintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c'est nécessaire.

\n"},{"id":"quote-83","type":"core/quote","heading":"","plain_text":"Pour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.\nDocumentation du langage open source .liquid","html":"\n
\n

Pour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.

\nDocumentation du langage open source .liquid
\n"},{"id":"heading-84","type":"core/heading","heading":"Aller encore plus loin (perfectionnistes)","plain_text":"Aller encore plus loin (perfectionnistes)","html":"\n

Aller encore plus loin (perfectionnistes)

\n"},{"id":"paragraph-85","type":"core/paragraph","heading":"","plain_text":"Si vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :","html":"\n

Si vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :

\n"},{"id":"heading-86","type":"core/heading","heading":"Optimiser les vidéos","plain_text":"Optimiser les vidéos","html":"\n

Optimiser les vidéos

\n"},{"id":"paragraph-87","type":"core/paragraph","heading":"","plain_text":"L'objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison.","html":"\n

L'objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison.

\n"},{"id":"list-88","type":"core/list","heading":"","plain_text":"Réduire les fichiers vidéo avec l'outil en ligne : videosmaller.com\n\n\n\nAjouter le lazyloading natif : loading=\"lazy\" à la main s'il n'y a que quelques vidéos.","html":"\n\n"},{"id":"kevinbatdorfcode-block-pro-89","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"<iframe src="video-player.html" title="..." loading="lazy"></iframe>","html":"\n
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
\n"},{"id":"paragraph-90","type":"core/paragraph","heading":"","plain_text":"On pourrait aussi l'ajouter dynamiquement à tous les iframes d'un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog.","html":"\n

On pourrait aussi l'ajouter dynamiquement à tous les iframes d'un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog.

\n"},{"id":"kevinbatdorfcode-block-pro-91","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}","html":"\n
{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}
\n"},{"id":"paragraph-92","type":"core/paragraph","heading":"","plain_text":"Si vous vous n'êtes pas servi d'une iframe (ex: Vidéos YouTube) mais d'une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu'une url, et il faudra ajouter l'attribut preload=\"none\" pour différer le chargement de cette manière :","html":"\n

Si vous vous n'êtes pas servi d'une iframe (ex: Vidéos YouTube) mais d'une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu'une url, et il faudra ajouter l'attribut preload=\"none\" pour différer le chargement de cette manière :

\n"},{"id":"kevinbatdorfcode-block-pro-93","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"<video style="max-width:100%; height:auto;" src="video.mp4"\npreload="none"\n</video>","html":"\n
<video style="max-width:100%; height:auto;" src="video.mp4"\npreload="none"\n</video>
\n"},{"id":"heading-94","type":"core/heading","heading":"Optimiser et limiter les polices (font)","plain_text":"Optimiser et limiter les polices (font)","html":"\n

Optimiser et limiter les polices (font)

\n"},{"id":"paragraph-95","type":"core/paragraph","heading":"","plain_text":"Sur l'outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site.","html":"\n

Sur l'outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site.

\n"},{"id":"list-96","type":"core/list","heading":"","plain_text":"Je recommande d'utiliser 1 voire 2 polices Maximum en plus de la police d'écriture 'Open Sans'.\n\n\n\nDans le code, identifier où les polices sont appelées (normalement theme.liquid) et ajouter l'attribut \"preload\" pour précharger vos fichiers de police en priorité. <link rel=\"preload as=\"font\">\n\n\n\nUtiliser la valeur 'swap' qui indique au navigateur d'utiliser la police de secours pour afficher le texte jusqu'à ce que la police personnalisée ait été entièrement téléchargée. Pour l'ajouter sur les polices internes et externes : \n\nPolices système en local : Directement dans les fichiers où l'on configure les polices (ex : font.css), vous devrez ajouter à la class, la valeur : font-display: swap\n\n\n\nGoogle Fonts : Dans le cas d'une implémentation des polices Google, il suffit d'ajouter au script qui se trouve dans le header : <link href=\"https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap\" rel=\"stylesheet\">","html":"\n\n"},{"id":"heading-97","type":"core/heading","heading":"Minification de JS et CSS","plain_text":"Minification de JS et CSS","html":"\n

Minification de JS et CSS

\n"},{"id":"paragraph-98","type":"core/paragraph","heading":"","plain_text":"La minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n'en citer que quelques-uns.","html":"\n

La minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n'en citer que quelques-uns.

\n"},{"id":"paragraph-99","type":"core/paragraph","heading":"","plain_text":"Pour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress.","html":"\n

Pour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress.

\n"},{"id":"paragraph-100","type":"core/paragraph","heading":"","plain_text":"Sinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css.","html":"\n

Sinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css.

\n"},{"id":"heading-101","type":"core/heading","heading":"Asynchroniser/différer les scripts non essentiels","plain_text":"Asynchroniser/différer les scripts non essentiels","html":"\n

Asynchroniser/différer les scripts non essentiels

\n"},{"id":"paragraph-102","type":"core/paragraph","heading":"","plain_text":"Si vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu'ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d'être exécuté.","html":"\n

Si vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu'ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d'être exécuté.

\n"},{"id":"paragraph-103","type":"core/paragraph","heading":"","plain_text":"Ce diagramme explique les différences dans la façon dont ils sont chargés :","html":"\n

Ce diagramme explique les différences dans la façon dont ils sont chargés :

\n"},{"id":"image-104","type":"core/image","heading":"","plain_text":"Asynchroniser/différer les scripts CSS/JS non-essentiels","html":"\n
\"asynchroniser
Asynchroniser/différer les scripts CSS/JS non-essentiels
\n"},{"id":"paragraph-105","type":"core/paragraph","heading":"","plain_text":"Il s'agit d'une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n'est pas votre métier.","html":"\n

Il s'agit d'une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n'est pas votre métier.

\n"},{"id":"heading-106","type":"core/heading","heading":"Regrouper les scripts de suivis dans Google Tag Manager","plain_text":"Regrouper les scripts de suivis dans Google Tag Manager","html":"\n

Regrouper les scripts de suivis dans Google Tag Manager

\n"},{"id":"paragraph-107","type":"core/paragraph","heading":"","plain_text":"Google Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d'ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio... il est recommandé de les intégrer dans GTM et d'appeler ce seul script de suivi dans la balise <head>.","html":"\n

Google Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d'ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio... il est recommandé de les intégrer dans GTM et d'appeler ce seul script de suivi dans la balise <head>.

\n"},{"id":"list-108","type":"core/list","heading":"","plain_text":"Aller sur Pagespeed\n\n\n\nRegarder dans Diagnostic s'il y a la ligne > Réduire l'impact du code tiers\n\n\n\nS'il y a plusieurs scripts, les migrer vers GTM.\n\n\n\nImplémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid.","html":"\n
    \n
  1. Aller sur Pagespeed
    2. \n\n\n\n
  2. Regarder dans Diagnostic s'il y a la ligne > Réduire l'impact du code tiers
    3. \n\n\n\n
  3. S'il y a plusieurs scripts, les migrer vers GTM.
    4. \n\n\n\n
  4. Implémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid.
    5. \n
\n"},{"id":"kevinbatdorfcode-block-pro-109","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"<!-- Google tag (gtag.js) -->\n <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>","html":"\n
<!-- Google tag (gtag.js) -->\n    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
\n"},{"id":"heading-110","type":"core/heading","heading":"Indications sur les ressources / préchargement","plain_text":"Indications sur les ressources / préchargement","html":"\n

Indications sur les ressources / préchargement

\n"},{"id":"paragraph-111","type":"core/paragraph","heading":"","plain_text":"Les indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes.","html":"\n

Les indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes.

\n"},{"id":"paragraph-112","type":"core/paragraph","heading":"","plain_text":"Chacune a un objectif différent :","html":"\n

Chacune a un objectif différent :

\n"},{"id":"list-113","type":"core/list","heading":"","plain_text":"Preload : Récupérer une ressource critique pour la page actuelle avant que la page ne commence à s'afficher.\n\n\n\nPrefetch : Récupérer les ressources qui ne sont pas nécessaires pour la page actuelle, mais qui le seront probablement pour la page suivante, par exemple la feuille de style.\n\n\n\nDNS-Prefetch : Réduit la latence en effectuant une recherche DNS à l'avance vers un domaine à partir duquel vous allez charger les ressources. Notez que cette opération est effectuée après le chargement de la page actuelle.\n\n\n\nPreconnect : Pour les cas où vous prévoyez de récupérer le contenu d'un domaine spécifique dans les 10 secondes. Semblable à DNS-Prefetch mais cela effectue également les liaisons à trois voies TCP (TCP handshake) et la négociation TLS.","html":"\n\n"},{"id":"paragraph-114","type":"core/paragraph","heading":"","plain_text":"Ils peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :","html":"\n

Ils peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :

\n"},{"id":"kevinbatdorfcode-block-pro-115","type":"kevinbatdorf/code-block-pro","heading":"","plain_text":"<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n<link rel="preconnect" href="//cdn.shopify.com">","html":"\n
<span role="button" tabindex="0" data-code="<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n
<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n<link rel="preconnect" href="//cdn.shopify.com">
\n"},{"id":"heading-116","type":"core/heading","heading":"Conclusion","plain_text":"Conclusion","html":"\n

Conclusion

\n"},{"id":"paragraph-117","type":"core/paragraph","heading":"","plain_text":"Shopify est une plateforme assez rapide qui optimise automatiquement la vitesse.","html":"\n

Shopify est une plateforme assez rapide qui optimise automatiquement la vitesse.

\n"},{"id":"paragraph-118","type":"core/paragraph","heading":"","plain_text":"Mais avec un grand nombre d'images, des thèmes inefficaces et une liste interminable d'applications à installer, il est facile d'alourdir votre site web et de le rendre lent.","html":"\n

Mais avec un grand nombre d'images, des thèmes inefficaces et une liste interminable d'applications à installer, il est facile d'alourdir votre site web et de le rendre lent.

\n"},{"id":"paragraph-119","type":"core/paragraph","heading":"","plain_text":"Ne visez pas un score de rapidité parfait, c'est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions.","html":"\n

Ne visez pas un score de rapidité parfait, c'est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions.

\n"},{"id":"paragraph-120","type":"core/paragraph","heading":"","plain_text":"Toutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique.","html":"\n

Toutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique.

\n"},{"id":"paragraph-121","type":"core/paragraph","heading":"","plain_text":"Si vous avez besoin d'aide, nous offrons ce service à nos clients SEO, alors n'hésitez pas à nous contacter ici.","html":"\n

Si vous avez besoin d'aide, nous offrons ce service à nos clients SEO, alors n'hésitez pas à nous contacter ici.

\n"},{"id":"paragraph-122","type":"core/paragraph","heading":"","plain_text":"Bonne chance pour la vitesse et la conversion de votre site.","html":"\n

Bonne chance pour la vitesse et la conversion de votre site.

\n"}],"sections":[{"id":"heading-1","heading":"Introduction au temps de chargement","content":"Introduction au temps de chargement"},{"id":"paragraph-2","heading":"Paragraph","content":"Mise à jour %%currentyear%%"},{"id":"paragraph-3","heading":"Paragraph","content":"Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion... autant de conséquences d'une page qui répond lentement. L'optimisation de la vitesse du site est l'une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d'utilisateurs. "},{"id":"paragraph-4","heading":"Paragraph","content":"Deux études le prouvent : "},{"id":"paragraph-5","heading":"Paragraph","content":"Dans un communiqué, le géant Amazon déclare qu'une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes."},{"id":"paragraph-6","heading":"Paragraph","content":"L'outil d'analyse Semrush relève lui aussi, qu'un retard de chargement d'une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA."},{"id":"paragraph-7","heading":"Paragraph","content":"En moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C'est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO."},{"id":"paragraph-8","heading":"Paragraph","content":"Découvrez les meilleures méthodes pour accélérer la réponse de vos pages."},{"id":"heading-9","heading":"Comment accélérer le temps de réponse des pages ?","content":"Comment accélérer le temps de réponse des pages ?"},{"id":"paragraph-10","heading":"Paragraph","content":"Afin de pouvoir comparer l'avant / après optimisation, pensez à faire des captures d'écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix."},{"id":"paragraph-11","heading":"Paragraph","content":"Votre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l'ordre de chargement des ressources sur la page analysée."},{"id":"image-12","heading":"Image","content":"Waterfall : Ordre et vitesse de chargement des ressources"},{"id":"heading-13","heading":"Les essentiels :","content":"Les essentiels :"},{"id":"heading-14","heading":"Choisir un thème Shopify léger","content":"Choisir un thème Shopify léger"},{"id":"paragraph-15","heading":"Paragraph","content":"Le choix d'un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l'inverse, un thème plus léger permettra à votre site d'être plus performant à l'avenir."},{"id":"paragraph-16","heading":"Paragraph","content":"Bien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site."},{"id":"heading-17","heading":"Réduisez le poids de vos visuels","content":"Réduisez le poids de vos visuels"},{"id":"paragraph-18","heading":"Paragraph","content":"Notre objectif est d'avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l'envoi d'une image dans votre site, veillez à ces 5 points :"},{"id":"heading-19","heading":"1 - Choisir le format approprié","content":"1 - Choisir le format approprié"},{"id":"paragraph-20","heading":"Paragraph","content":"En fonction du type d'image, choisissez le format qui convient :"},{"id":"list-21","heading":"List","content":"Il faut favoriser le format WEBP, c'est la meilleure option.\n\n\n\nS'il y a besoin de transparence, du PNG en cherchant à compresser le plus possible.\n\n\n\nSi pas de transparence, dans tous les autres cas, du JPEG en compressant avec les recos qui suivent.\n\n\n\nPour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.\n\n\n\nPour les images avec du texte, on favorisera le format PNG compressé ou WEBP."},{"id":"quote-22","heading":"Quote","content":"Quel est le meilleur format d'image selon shopify ?\nShopify : documentation officielle"},{"id":"heading-23","heading":"2 - Redimensionnez à taille réelle","content":"2 - Redimensionnez à taille réelle"},{"id":"paragraph-24","heading":"Paragraph","content":"Si vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l'erreur de les envoyer tels quels."},{"id":"list-25","heading":"List","content":"Redimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG, 1 à 1,5 fois la taille réelle du conteneur dans le navigateur (cela peut être 2 fois les dimensions indiquées pour couvrir les écrans rétina).\n\n\n\nUtilisez srcset, qui charge conditionnellement la bonne taille d'image en fonction de l'appareil."},{"id":"quote-26","heading":"Quote","content":"Si vous avez l'avertissement \"Images surdimensionnées\" dans l'outil Shopify Analyzer, cette solution srcset résoudra ce problème.\nKalys - Agence SEO 100% Shopify"},{"id":"image-27","heading":"Image","content":"Srcset permet d'afficher l'image en taille 1x sur les écrans normaux et 2x sur les écrans rétina."},{"id":"image-28","heading":"Image","content":"Srcset peut aussi redimensionner l'image selon différentes tailles d'écran."},{"id":"heading-29","heading":"3 - Utilisez la compression","content":"3 - Utilisez la compression"},{"id":"paragraph-30","heading":"Paragraph","content":"Choisir le bon format de fichier n'est qu'une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d'images à 80 / 90% de leur qualité :"},{"id":"list-31","heading":"List","content":"Grandes images (banner, slider...) : 200 KO maximum\n\n\n\nPetites images (produits, descriptions...) 80 KO maximum"},{"id":"paragraph-32","heading":"Paragraph","content":"J'ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :"},{"id":"image-33","heading":"Image","content":"Taille des images divisée par 2 après compression d'images"},{"id":"paragraph-34","heading":"Paragraph","content":"Vous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable."},{"id":"paragraph-35","heading":"Paragraph","content":"La réduction d'une image à 80 / 90% de sa qualité initiale ne se voit pas à l'œil nu. Voici un exemple d'une image de 68ko puis de 39ko après compression."},{"id":"paragraph-36","heading":"Paragraph","content":"Heureusement, c'est facile à faire. Avec une application Shopify, vous pouvez automatiser l'ensemble du processus. Voici nos préférées :"},{"id":"paragraph-37","heading":"Paragraph","content":"Payantes :"},{"id":"list-38","heading":"List","content":"Hyperspeed - 49$ / Mois. C'est la rolls des app ! Elle regroupe tout ce qui est important pour la vitesse de chargement.\n\n\n\nTiny IMG - 3$ / Mois. 5000 images sur 2an, c'est celui qu'on utilise le plus.\n\n\n\nSmart SEO - 10$ / mois, 1000 images / mois, d'autres fonctionnalités très intéressantes."},{"id":"paragraph-39","heading":"Paragraph","content":"Gratuites :"},{"id":"paragraph-40","heading":"Paragraph","content":"Gratuit est mort mais derrière lui, il a quand même laissé :"},{"id":"list-41","heading":"List","content":"SEO Image Optimizer - 50 images gratuites / mois, choix du niveau de compression, rétroaction, optimise tous types d'images en automatique. En gratuit c'est notre préféré.\n\n\n\nTiny IMG - 50 images gratuites / mois, rétroaction, optimise tous types d'images en automatique."},{"id":"paragraph-42","heading":"Paragraph","content":"Dans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d'applications supplémentaires afin de réduire les temps de chargement."},{"id":"heading-43","heading":"4 - Remplacer les GIF par des images statiques","content":"4 - Remplacer les GIF par des images statiques"},{"id":"paragraph-44","heading":"Paragraph","content":"Une tendance que nous avons observée sur les boutiques Shopify les plus lentes est l'utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs."},{"id":"paragraph-45","heading":"Paragraph","content":"Cependant, les ressources GIF sont extrêmement volumineuses."},{"id":"paragraph-46","heading":"Paragraph","content":"Nous avons vu des cas où l'utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible."},{"id":"paragraph-47","heading":"Paragraph","content":"Cependant, si vous tenez quand même à utiliser des images animées, 2 choix s'offrent à vous :"},{"id":"list-48","heading":"List","content":"Compresser le GIF\n\n\n\nUtiliser un autre format d'images animées plus léger (par ex. LottieFiles)"},{"id":"heading-49","heading":"5 - Preload et Lazyload","content":"5 - Preload et Lazyload"},{"id":"paragraph-50","heading":"Paragraph","content":"En général, lorsqu'une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?"},{"id":"paragraph-51","heading":"Paragraph","content":"Les pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d'entre elles sont visibles même après le chargement de la page. Beaucoup d'entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles."},{"id":"paragraph-52","heading":"Paragraph","content":"Tous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel=\"preload\". L'objectif est d'avoir un chargement prioritaire du logo, des images d'en-têtes, background, icon, polices d'écriture, script css ou js… pour que l'internaute commence son expérience de navigation le plus rapidement possible."},{"id":"image-53","heading":"Image","content":"L'ajout du rel=\"preload\" permet de charger prioritairement certaines ressources."},{"id":"paragraph-54","heading":"Paragraph","content":"Voici comment faire pour précharger une image :"},{"id":"list-55","heading":"List","content":"Commencer par dupliquer votre thème pour travailler en preview.\n\n\n\nDans personnaliser le thème > trouver la section où est ajoutée l'image.\n\n\n\nAller chercher cette section dans le code du thème (copié).\n\n\n\nRepérer l'endroit d'insertion de l'image et ajouter dans les attributs : rel=\"preload\"\n\n\n\nVérifier sur le site > clic droit > inspecter > cliquer sur l'image et regarder si l'attribut rel=preload s'est bien ajouté."},{"id":"paragraph-56","heading":"Paragraph","content":"Il faudra répéter l'opération pour les autres éléments à précharger."},{"id":"paragraph-57","heading":"Paragraph","content":"Ensuite,"},{"id":"image-58","heading":"Image","content":"Chargement paresseux ou lazyload. Les thèmes Shopify le proposent parfois en natif."},{"id":"paragraph-59","heading":"Paragraph","content":"Pour ce qui est du lazyload, il consiste à différer le chargement des images jusqu'à ce qu'elles soient visibles."},{"id":"paragraph-60","heading":"Paragraph","content":"La mise en place de cette optimisation fera l'objet d'un futur article de blog, mais voici la version abrégée :"},{"id":"list-61","heading":"List","content":"Ajoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.\n\n\n\nMettez à jour les balises d'image en remplaçant src par data-src et en ajoutant la classe lazyload."},{"id":"paragraph-62","heading":"Paragraph","content":"Vous aurez donc une image standard qui peut ressembler à ceci :"},{"id":"paragraph-63","heading":"Paragraph","content":"<img src=\"IMAGE_URL.jpeg\">"},{"id":"paragraph-64","heading":"Paragraph","content":"Qui ressemblerait maintenant à : <img data-src=\"IMAGE_URL.jpeg\" class=\"lazyload\">"},{"id":"paragraph-65","heading":"Paragraph","content":"La différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C'est tout, c'est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous."},{"id":"heading-66","heading":"Désinstallation des applications inutilisées","content":"Désinstallation des applications inutilisées"},{"id":"paragraph-67","heading":"Paragraph","content":"Veillez à désinstaller toutes les applications que vous n'utilisez pas, et à supprimer tout code restant sur votre site."},{"id":"paragraph-68","heading":"Paragraph","content":"Le mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération."},{"id":"heading-69","heading":"Chargement conditionnel des scripts d'application","content":"Chargement conditionnel des scripts d'application"},{"id":"paragraph-70","heading":"Paragraph","content":"Par défaut, la plupart des scripts d'application sont ajoutés à votre fichier theme.liquid de sorte qu'ils se chargent sur chaque page, c'est pratique, mais c'est également très lent !"},{"id":"paragraph-71","heading":"Paragraph","content":"C'est l'équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour... Ne serait-il pas plus efficace de n'avoir un parapluie que lorsqu'il pleut ?"},{"id":"paragraph-72","heading":"Paragraph","content":"Avec les applications, c'est possible grâce au chargement conditionnel."},{"id":"paragraph-73","heading":"Paragraph","content":"En bref, si une condition est remplie, le script de l'application est chargé."},{"id":"paragraph-74","heading":"Paragraph","content":"Par exemple :"},{"id":"paragraph-75","heading":"Paragraph","content":"Avis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement."},{"id":"paragraph-76","heading":"Paragraph","content":"Boutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S'il s'agit uniquement de certains types de pages, chargez-les uniquement sur ces pages."},{"id":"paragraph-77","heading":"Paragraph","content":"Il est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if."},{"id":"list-78","heading":"List","content":"Repérer dans le fichier theme.liquid l'appel à des applications. \"render\" ou \"include\"\n\n\n\nRepérer où ces applications sont utilisées dans le site, puis ajouter les conditions if"},{"id":"kevinbatdorfcode-block-pro-79","heading":"Kevinbatdorf/code-block-pro","content":"{% if template == 'product' %}\n{% include 'ton-app' %}\n{% endif %}"},{"id":"paragraph-80","heading":"Paragraph","content":"Ou pour des pages spécifiques :"},{"id":"kevinbatdorfcode-block-pro-81","heading":"Kevinbatdorf/code-block-pro","content":"{% if page.handle == 'contact' %}\n{% render 'ton-app' %}\n{% endif %}"},{"id":"paragraph-82","heading":"Paragraph","content":"Maintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c'est nécessaire."},{"id":"quote-83","heading":"Quote","content":"Pour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.\nDocumentation du langage open source .liquid"},{"id":"heading-84","heading":"Aller encore plus loin (perfectionnistes)","content":"Aller encore plus loin (perfectionnistes)"},{"id":"paragraph-85","heading":"Paragraph","content":"Si vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :"},{"id":"heading-86","heading":"Optimiser les vidéos","content":"Optimiser les vidéos"},{"id":"paragraph-87","heading":"Paragraph","content":"L'objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison."},{"id":"list-88","heading":"List","content":"Réduire les fichiers vidéo avec l'outil en ligne : videosmaller.com\n\n\n\nAjouter le lazyloading natif : loading=\"lazy\" à la main s'il n'y a que quelques vidéos."},{"id":"kevinbatdorfcode-block-pro-89","heading":"Kevinbatdorf/code-block-pro","content":"<iframe src="video-player.html" title="..." loading="lazy"></iframe>"},{"id":"paragraph-90","heading":"Paragraph","content":"On pourrait aussi l'ajouter dynamiquement à tous les iframes d'un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog."},{"id":"kevinbatdorfcode-block-pro-91","heading":"Kevinbatdorf/code-block-pro","content":"{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}"},{"id":"paragraph-92","heading":"Paragraph","content":"Si vous vous n'êtes pas servi d'une iframe (ex: Vidéos YouTube) mais d'une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu'une url, et il faudra ajouter l'attribut preload=\"none\" pour différer le chargement de cette manière :"},{"id":"kevinbatdorfcode-block-pro-93","heading":"Kevinbatdorf/code-block-pro","content":"<video style="max-width:100%; height:auto;" src="video.mp4"\npreload="none"\n</video>"},{"id":"heading-94","heading":"Optimiser et limiter les polices (font)","content":"Optimiser et limiter les polices (font)"},{"id":"paragraph-95","heading":"Paragraph","content":"Sur l'outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site."},{"id":"list-96","heading":"List","content":"Je recommande d'utiliser 1 voire 2 polices Maximum en plus de la police d'écriture 'Open Sans'.\n\n\n\nDans le code, identifier où les polices sont appelées (normalement theme.liquid) et ajouter l'attribut \"preload\" pour précharger vos fichiers de police en priorité. <link rel=\"preload as=\"font\">\n\n\n\nUtiliser la valeur 'swap' qui indique au navigateur d'utiliser la police de secours pour afficher le texte jusqu'à ce que la police personnalisée ait été entièrement téléchargée. Pour l'ajouter sur les polices internes et externes : \n\nPolices système en local : Directement dans les fichiers où l'on configure les polices (ex : font.css), vous devrez ajouter à la class, la valeur : font-display: swap\n\n\n\nGoogle Fonts : Dans le cas d'une implémentation des polices Google, il suffit d'ajouter au script qui se trouve dans le header : <link href=\"https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap\" rel=\"stylesheet\">"},{"id":"heading-97","heading":"Minification de JS et CSS","content":"Minification de JS et CSS"},{"id":"paragraph-98","heading":"Paragraph","content":"La minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n'en citer que quelques-uns."},{"id":"paragraph-99","heading":"Paragraph","content":"Pour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress."},{"id":"paragraph-100","heading":"Paragraph","content":"Sinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css."},{"id":"heading-101","heading":"Asynchroniser/différer les scripts non essentiels","content":"Asynchroniser/différer les scripts non essentiels"},{"id":"paragraph-102","heading":"Paragraph","content":"Si vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu'ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d'être exécuté."},{"id":"paragraph-103","heading":"Paragraph","content":"Ce diagramme explique les différences dans la façon dont ils sont chargés :"},{"id":"image-104","heading":"Image","content":"Asynchroniser/différer les scripts CSS/JS non-essentiels"},{"id":"paragraph-105","heading":"Paragraph","content":"Il s'agit d'une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n'est pas votre métier."},{"id":"heading-106","heading":"Regrouper les scripts de suivis dans Google Tag Manager","content":"Regrouper les scripts de suivis dans Google Tag Manager"},{"id":"paragraph-107","heading":"Paragraph","content":"Google Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d'ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio... il est recommandé de les intégrer dans GTM et d'appeler ce seul script de suivi dans la balise <head>."},{"id":"list-108","heading":"List","content":"Aller sur Pagespeed\n\n\n\nRegarder dans Diagnostic s'il y a la ligne > Réduire l'impact du code tiers\n\n\n\nS'il y a plusieurs scripts, les migrer vers GTM.\n\n\n\nImplémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid."},{"id":"kevinbatdorfcode-block-pro-109","heading":"Kevinbatdorf/code-block-pro","content":"<!-- Google tag (gtag.js) -->\n <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>"},{"id":"heading-110","heading":"Indications sur les ressources / préchargement","content":"Indications sur les ressources / préchargement"},{"id":"paragraph-111","heading":"Paragraph","content":"Les indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes."},{"id":"paragraph-112","heading":"Paragraph","content":"Chacune a un objectif différent :"},{"id":"list-113","heading":"List","content":"Preload : Récupérer une ressource critique pour la page actuelle avant que la page ne commence à s'afficher.\n\n\n\nPrefetch : Récupérer les ressources qui ne sont pas nécessaires pour la page actuelle, mais qui le seront probablement pour la page suivante, par exemple la feuille de style.\n\n\n\nDNS-Prefetch : Réduit la latence en effectuant une recherche DNS à l'avance vers un domaine à partir duquel vous allez charger les ressources. Notez que cette opération est effectuée après le chargement de la page actuelle.\n\n\n\nPreconnect : Pour les cas où vous prévoyez de récupérer le contenu d'un domaine spécifique dans les 10 secondes. Semblable à DNS-Prefetch mais cela effectue également les liaisons à trois voies TCP (TCP handshake) et la négociation TLS."},{"id":"paragraph-114","heading":"Paragraph","content":"Ils peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :"},{"id":"kevinbatdorfcode-block-pro-115","heading":"Kevinbatdorf/code-block-pro","content":"<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">\n<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">\n<link rel="dns-prefetch" href="//cdn.shopify.com">\n<link rel="preconnect" href="//cdn.shopify.com">"},{"id":"heading-116","heading":"Conclusion","content":"Conclusion"},{"id":"paragraph-117","heading":"Paragraph","content":"Shopify est une plateforme assez rapide qui optimise automatiquement la vitesse."},{"id":"paragraph-118","heading":"Paragraph","content":"Mais avec un grand nombre d'images, des thèmes inefficaces et une liste interminable d'applications à installer, il est facile d'alourdir votre site web et de le rendre lent."},{"id":"paragraph-119","heading":"Paragraph","content":"Ne visez pas un score de rapidité parfait, c'est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions."},{"id":"paragraph-120","heading":"Paragraph","content":"Toutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique."},{"id":"paragraph-121","heading":"Paragraph","content":"Si vous avez besoin d'aide, nous offrons ce service à nos clients SEO, alors n'hésitez pas à nous contacter ici."},{"id":"paragraph-122","heading":"Paragraph","content":"Bonne chance pour la vitesse et la conversion de votre site."}],"media":{"primary_image":"https://kalys.fr/wp-content/uploads/vitesse-de-chargement-site-shopify.jpg"},"relations":[{"rel":"canonical","href":"https://kalys.fr/vitesse-de-chargement/"},{"rel":"alternate","href":"https://kalys.fr/vitesse-de-chargement/llm","type":"text/html"},{"rel":"alternate","href":"https://kalys.fr/vitesse-de-chargement/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://kalys.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}