Augmentez le temps de chargement des pages.

Bien que Squarespace ait mis en place un certain nombre de mesures pour assurer des temps de chargement rapides, le contenu ajouté à votre site a un impact sur la rapidité de son chargement. Par exemple, les pages contenant de nombreuses images peuvent se charger lentement, en particulier sur les appareils mobiles et avec des connexions plus lentes.

Dans la mesure du possible, limitez la taille de chaque page de votre site à 5 Mo au maximum.

Utilisez ce guide pour vérifier la taille des pages individuelles et pour obtenir la taille de votre page dans cette plage idéale. Cela permet de réduire le temps de chargement de votre site. Pour en savoir plus sur les problèmes courants liés au temps de chargement d’un site, consultez l’article Mon site se charge lentement.

Vérifier la vitesse de chargement des pages

Pour avoir une idée du temps de chargement de votre site, utilisez des outils tels que Pingdom, GTMetrix, PageSpeed Insights de Google ou l’outil d’inspection intégré de votre navigateur. Par exemple, vous pouvez procéder comme suit avec Google Chrome :

1. Ouvrez les Outils de développement.
2. Cliquez sur l’onglet Réseau.
3. Actualisez la page pour afficher le temps de chargement.

Notez que ces outils sont idéaux si vous possédez un site codé à partir de zéro, plutôt qu’un site créé à l’aide d’un CMS. Comme les sites Squarespace utilisent un CMS, certains outils peuvent renvoyer des faux négatifs. Si vous voyez une erreur ou si la vitesse est inférieure à la moyenne lors de l’utilisation de ces outils, cela ne signifie pas nécessairement qu’il y a un problème avec votre site.

Vérifier la taille de votre page

Si le chargement d’une page prend plus de temps que vous ne le souhaiteriez, vérifiez sa taille.

Pour ce faire, vous pouvez utiliser les outils de développement Chrome :

1. Ouvrez Google Chrome. Si vous êtes connecté(e) à Squarespace, déconnectez-vous ou ouvrez une fenêtre de navigation privée.
2. Ouvrez un nouvel onglet.
3. Ouvrez les outils de développement Chrome. Raccourcis :

• Mac - ⌘ + Option + J
• Windows - Ctrl + Maj + J

1. Dans le même onglet, ouvrez la page que vous souhaitez vérifier. Laissez le panneau Outils de développement ouvert.
2. Dans les outils de développement, cliquez sur l’onglet Réseau. Si aucune information n’apparaît dans cet onglet, actualisez la page.
3. Vérifiez la taille totale de la page en bas de l’écran. Dans l’exemple ci-dessous, il est affiché « 1,0 Mo transféré(s). »
4. Cliquez sur la colonne Taille pour trier le contenu de la page par taille. Cette action affiche les parties de la page qui occupent le plus de mémoire et qui sont susceptibles de la ralentir, en particulier sur mobile. Le contenu le plus volumineux sera probablement les images. Cliquez sur le nom du fichier pour afficher l’image.

Vous devez viser une taille de page de 5 Mo au maximum. 1 Mo est la taille la plus sûre pour les connexions cellulaires. Si la taille de votre page est supérieure, consultez nos conseils ci-dessous pour la réduire.

Réduire la taille de votre page

Comme le contenu de la plupart des pages se charge simultanément, le chargement des pages contenant beaucoup de contenu prend plus de temps. Si la taille d’une page dépasse 5 Mo, la suppression de contenu ou la réduction de la taille de vos images peut permettre un chargement plus rapide.

Pour réduire le contenu d’une page :

• Assurez-vous qu’il n’y a pas plus de 60 blocs par page. Pour supprimer un bloc d’une page, consultez l’article Supprimer des blocs.
• Si la page comporte plusieurs sujets, divisez-la en plusieurs pages. Cela peut également permettre aux visiteurs de trouver plus facilement les informations dont ils ont besoin et d’améliorer le SEO de votre site.
• Réduisez le nombre de vidéos. Le contenu incorporé, tel que les vidéos YouTube ou Vimeo, peut augmenter les temps de chargement, en particulier sur les appareils mobiles. Répartissez plutôt les vidéos sur plusieurs pages à l’aide de liens pour aider les visiteurs à naviguer d’une page à l’autre.
• Si la page de destination de votre blog se charge lentement, utilisez des extraits de blog pour ajouter des aperçus de chaque billet, plutôt que d’afficher leur texte intégral.
• Si votre site utilise des pages Index empilées (version 7.0), réduisez le nombre de sections, en particulier les sections contenant des galeries.

Accélérer le chargement des images

Le chargement des grandes images et des pages contenant beaucoup d’images peut prendre un certain temps. En suivant certaines bonnes pratiques, vous pouvez accélérer le chargement des pages contenant beaucoup d’images.

Réduire la taille des images

Les images ne doivent pas dépasser 500 Ko, avec une largeur de 1 500 pixels à 2 500 pixels. Pour charger un fichier image plus petit, redimensionnez l’image à l’aide d’un logiciel de retouche d’image tiers avant de charger le fichier. Un compresseur d’images tel que JPEGmini peut aider à réduire la taille des fichiers sans affecter la qualité. Pour découvrir d’autres conseils sur les images, consultez l’article Formater vos images en vue d’un affichage sur le Web.

Conseil : optimisez la taille des images en connectant l’extension TinyIMG. TinyIMG remplace les images trop grandes par des versions compressées, ce qui accélère le chargement des pages tout en préservant la qualité de l’image. Bien que nous travaillions avec des services tiers pour garantir le bon fonctionnement des Squarespace Extensions, nous ne fournissons pas d’assistance pour les extensions. Nous pouvons vous aider à connecter ou à déconnecter vos extensions. Pour toute autre question, contactez directement le fournisseur d’extensions.

Ne pas surcharger les galeries

Limitez les galeries à 50 images chacune. Considérez les sections Galerie, les blocs Galerie et les pages Galerie comme des vitrines, plutôt que comme des inventaires complets.

Utiliser des images au format .jpg

Dans la mesure du possible, utilisez le type de fichier image .jpg. Limitez le nombre de fichiers .gifs ou d’animations.

Activer le chargement Ajax (version 7.0)

Si votre site utilise la version 7.0 et que votre template prend en charge cette option, activez le chargement Ajax. Ajax rend le chargement des pages plus rapide et plus fluide. Il est idéal pour les pages riches en contenu, telles que les pages Blog et les pages Galerie.