Comment accélérer votre site web Tilda

Le chargement des sites web fait l'objet d'une attention particulière sur l'internet. C'est pourquoi travailler sur la vitesse de chargement des pages web est devenu une routine pour nous. Nous mettons en œuvre de nouvelles technologies et optimisons les processus techniques. Certaines de ces mises à jour sont visibles pour les utilisateurs, d'autres non. Il s'agit d'un processus continu, et nous sommes déjà fiers des progrès réalisés.

Dans cet article, nous vous proposons une courte liste de contrôle pour améliorer la vitesse de chargement de votre site web à l'aide des outils Tilda existants et en modifiant les paramètres. Nous examinerons chaque point en détail afin que vous puissiez ajuster les paramètres de votre site web par vous-même et le rendre encore plus rapide.

Avant de détailler chaque point, voyons comment vous pouvez évaluer la vitesse de chargement des pages.

De nombreux utilisateurs de Tilda vérifient la vitesse de chargement des pages de leur site web à l'aide du service PageSpeed Insights de Google. Ce service simule le chargement des sites web sur des appareils mobiles et des ordinateurs de bureau, et leur attribue une note d'efficacité.

Il s'agit d'un outil technique conventionnel qui ne reflète pas toujours la vitesse de chargement réelle. D'après notre expérience, les données que Chrome collecte et affiche dans le panneau du développeur sont bien meilleures que celles obtenues par la simulation PageSpeed Insights. C'est pourquoi nous ne recommandons pas de se fier entièrement à PSI, mais de le considérer comme un outil d'analyse complémentaire ou indirect.

Il est préférable de surveiller la vitesse de chargement réelle des pages du site web. Vous pouvez le faire dans les outils de développement de Chrome : ouvrez la console (Option + Ctrl + I / Alt + Cmd + I) et allez dans la barre d'outils Toggle device → onglet Network → rechargez la page que vous voulez évaluer. Les paramètres les plus importants sont DOMContentLoaded, qui indique le temps nécessaire au chargement de la structure de la page, et Load, qui indique le temps nécessaire au chargement de la page avec toutes les tables et tous les styles.

Cette méthode n'est pas parfaite non plus : la simulation 3G rapide de la barre d'outils ne simule pas clairement et correctement le chargement d'un site web sur des appareils mobiles, de sorte que vous devrez vérifier la vitesse de chargement sur des appareils réels et tirer des conclusions sur la base des données.

Tilda dispose d'un grand nombre d'optimisations pour accélérer le chargement des pages. Les sites web de base sans code ou scripts tiers se chargent rapidement. Vous pouvez le constater par vous-même : choisissez un modèleTilda et vérifiez la vitesse de chargement de la page à l'aide de PageSpeed Insights.

Vérifions-la sur un site web réel : Nous avons choisi l'un des modèles de la bibliothèque de modèlesTilda et créé un site web pour une styliste personnelle, Annie, à partir de ce modèle. Estimons sa vitesse de chargement à l'aide de PageSpeed Insights.

Bien entendu, la vitesse de chargement dépend de la complexité du site web, de la présence de blocs spécifiques et de la connexion éventuelle de widgets tiers, de compteurs, de statistiques et d'autres modules complémentaires susceptibles de ralentir le chargement du site web.

Nous avons rédigé cet article afin que vous puissiez comprendre le problème et apprendre à identifier les paramètres qui vous aideront à créer un site web à chargement rapide. Mais vous devez prendre une décision importante : l'application de tous les conseils de la liste de contrôle aura une incidence non seulement sur la vitesse de chargement du site web, mais aussi sur sa conception.

Lazy Load permet aux images de se charger progressivement au fur et à mesure que l'internaute fait défiler la page, et non pas en une seule fois. Ce paramètre est activé par défaut et affecte directement les performances du site web.

Nous voyons souvent des concepteurs qui créent des sites web personnalisés désactiver Lazy Load pour une raison ou une autre - nous vous déconseillons de le faire car cela ralentit le site web.

Assurez-vous que l'option Lazy Load est activée pour votre site web. Pour ce faire, accédez à Paramètres du site → Plus, puis assurez-vous que la case "Désactiver la charge paresseuse pour les images" n'est pas cochée. Vérifiez également que la fonctionnalité n'est pas désactivée dans les paramètres d'image et de forme sur Zero Block.

Lazy Load et l'optimisation manuelle des images sont les deux choses les plus importantes que vous puissiez optimiser. Les images sont l'élément le plus lourd du site web, de sorte que 70 % de la vitesse de chargement de la page en dépend.

Tilda dispose d'une fonctionnalité exclusive : lechargement adaptatifdes images. Il s'agit d'une technologie spéciale de traitement de l'image qui adapte les images à la taille du conteneur du site web en fonction de l'appareil de l'utilisateur. Elle convertit également les images en WebP, le format de nouvelle génération qui compresse l'image sans perte de qualité, de sorte que le site web se charge plus rapidement. La conversion se fait automatiquement sans qu'il soit nécessaire d'effectuer des actions supplémentaires.

Dans certains cas, l'optimisation automatique "à la volée" n'est pas comparable à la compression manuelle des images. Si la vitesse de chargement des pages est cruciale pour vous, nous vous recommandons d'optimiser les images à l'aide de TinyPNG, un service en ligne gratuit qui utilise une technologie de compression de données sans perte pour compresser les images sans perte visible de qualité.

Une autre solution consiste à ajouter des blocs différents pour les versions desktop et mobile du site web et à télécharger des images de tailles et de poids différents. Par exemple, vous pouvez le faire pour la page de couverture de votre site web.

L'algorithme sur Tilda sera le suivant : au chargement de la page, il optimisera l'image "à la volée" et si l'image optimisée prend moins de place que l'image originale, il l'affichera automatiquement. Cela peut se produire lorsque le cache se réchauffe et que le système est encore en train de collecter des statistiques de trafic pour préparer à l'avance les images de résolution nécessaires. L'optimisation manuelle n'est pas un inconvénient et, dans certains cas, elle peut même contribuer à optimiser les images et à augmenter la vitesse de chargement des pages.

Cette catégorie d'optimisations vient en deuxième position en termes de poids et d'importance. Les polices système, telles que Arial ou Georgia, sont disponibles sur tous les ordinateurs. Il existe également des polices enfichables telles que Ubuntu et Roboto.

Si vous souhaitez accélérer votre site web autant que possible, nous vous recommandons de ne pas utiliser de polices personnalisées, mais de choisir l'une des polices système. De cette façon, vous pouvez économiser de 100 à 400 Ko, ce qui est considérable lorsqu'il s'agit du chargement des pages.

Si vous devez utiliser une image de marque ou une identité d'entreprise, vous pouvez utiliser notre nouvelle fonctionnalité : le rendu instantané du contenu. Ce paramètre vous permet d'afficher du contenu sur le site web, que la police de votre marque ait été chargée ou non. Le site web affichera d'abord la police du système, puis, après quelques secondes, une fois la police chargée, le texte sera à nouveau affiché, cette fois dans la police de votre marque.

Cette fonction n'est pas activée par défaut. Si vous accordez plus d'importance à la vitesse de chargement qu'à la fluidité du chargement ou à l'aspect visuel, vous pouvez l'activer dans Paramètres du site → Polices et couleurs → Avancé.

Vérifiez si vous avez connecté des scripts ou des codes tiers, tels que des chats ou un compteur. Sur Tilda, vous pouvez les connecter via le bloc T123. Vérifiez donc si ce bloc figure sur la page ou dans l'en-tête de votre site web.

Selon nos observations, dans 95% des cas, le code ajouté au site web n'est pas optimisé pour la stratégie de chargement et peut fortement ralentir le rendu de la page. C'est pourquoi nous vous recommandons d'éviter d'utiliser des scripts tiers ou de les utiliser avec une connexion correcte.

Si vous ne pouvez pas vous passer de codes tiers, retardez le chargement et l'initialisation des scripts. Les premières secondes de l'affichage de la page sont très importantes, il est donc préférable que rien d'inutile ne soit chargé. Supposons, par exemple, que vous ajoutiez un widget Intercom. Dans ce cas, vous voudrez peut-être connecter et initialiser le script 3 secondes après que le contenu principal a été rendu (les événements "DOMContentLoaded" ou "document ready"). Cette étape permet d'éviter de bloquer le flux de chargement principal et d'accélérer le rendu de la page.

Par exemple, sur Tilda, les compteurs se chargent avec un délai de 2 secondes par défaut. Vous trouverez plus d'informations à ce sujet dans le paragraphe suivant.

L'initialisation différée du compteur est une nouvelle fonctionnalité qui a été récemment mise à la disposition de tous les utilisateurs de Tilda . Pour que le compteur de la page se connecte, le navigateur doit charger un script, analyser le code et l'exécuter. Les fichiers Google Analytics sont assez lourds et ralentissent donc la vitesse d'affichage de la page s'ils sont tous chargés en même temps. C'est pourquoi, par défaut, nous connectons ces compteurs 2 secondes après le chargement de la page.

Vous pouvez vous assurer que ce paramètre n'est pas désactivé dans les Paramètres du site → Analytics.

L'idée semble évidente, mais elle fonctionne : moins il y a d'informations sur la page, plus le chargement est rapide. Examinez votre site web d'un œil critique : est-il vraiment nécessaire de faire figurer toutes les informations et images sur la page, ou est-il possible de la raccourcir ? Par exemple, si vous avez une page très longue (plus de 20 écrans), déplacez une partie du contenu sur une autre page pour augmenter sa vitesse de chargement. C'est un aspect que vous pouvez influencer et ajuster directement.

Les utilisateurs placent parfois une grande photo de couverture sur le premier écran et quatre images plus petites dans le bloc suivant. Dans ce cas, le navigateur doit télécharger cinq images au lieu d'une. C'est pourquoi il est déconseillé de placer trop d'images en haut de la page.

Assurez-vous que votre site web n'est pas exporté ou synchronisé via une API - en d'autres termes, assurez-vous que votre site web se trouve sur les serveurs de Tilda. Si votre site est exporté, assurez-vous que votre serveur web est configuré de manière optimale. S'il est exporté, assurez-vous que votre serveur web est configuré de manière optimale.

Tilda a mis en place une infrastructure interne de qualité, que nous continuons d'améliorer et de développer. Nous avons veillé à beaucoup de choses : des serveurs fiables et rapides, un CDN pour accélérer la diffusion des images, une protection contre les attaques DDoS et plusieurs autres ajustements techniques visant à maximiser la vitesse de chargement des sites web de Tilda .

En ce qui concerne l'hébergement par des tiers, nous ne pouvons pas contrôler la quantité ou la qualité du travail des administrateurs de système. Néanmoins, nous pouvons vous donner quelques conseils sur ce que vous pouvez faire pour accélérer le chargement de votre site web si vous les avez exportés :
- Connectez CDN et affichez les images via un réseau de diffusion de contenu distribué.
- Activez les en-têtes de mise en cache CSS/JS/HTML dans les paramètres du serveur web afin que le navigateur ne les télécharge pas à chaque fois mais les récupère dans le cache.
- Activez la compression Gzip ou Brotli pour les fichiers CSS, JS et HTML.
- Dans les paramètres, activez la compression des fichiers de texte : CSS, JS, HTML.
- Ajoutez un attribut "async" aux scripts JS tiers afin que leur chargement ne ralentisse pas le chargement de la page.
- N'ajoutez les widgets tiers qu'en cas de nécessité, prévoyez un délai d'initialisation de 2 à 3 secondes afin que le contenu de la page ait le temps de s'afficher.

Tilda Les sites web se chargent assez rapidement par défaut. Si vous souhaitez accélérer encore davantage votre site web, suivez les recommandations de la liste de contrôle. Elles vous aideront à créer un site web ultra-rapide, mais vous devrez faire quelques compromis en termes de conception et d'aspect visuel. Nous laissons toujours ces décisions et ces priorités à l'utilisateur.

De notre côté, nous travaillons constamment à l'optimisation de la plateforme et à la mise en œuvre de nouvelles solutions qui rendront votre site web encore plus rapide.