Tout le monde aime une petite animation de chargement cool, non? Mais si cette durée dure plus d'une seconde ou deux, cela ne fait qu'attirer l'attention sur le fait que le site Web se charge lentement. Et c'est un tueur de site Web.
Les utilisateurs s'attendent à ce que les sites Web se chargent rapidement et efficacement. Vous devez vous assurer que la conception est non seulement esthétique, mais également fonctionnelle à 100%. Si votre site traîne un peu, vous pouvez cesser de vous inquiéter car nous avons sept astuces pour vous aider à accélérer votre site Web en apportant de petites modifications à la conception. (Assurez-vous de visiter chacun des sites Web présentés dans l'article; ils ont fière allure et chargent très rapidement.)
1. Soyez prudent avec les animations
L'animation dans la conception de sites Web est l'un des "ça". tendances de 2015. Ne vous laissez pas distancer en créant des fichiers volumineux qui ne se chargeront tout simplement pas. Commencez avec de petites touches animées lorsque vous commencez à travailler avec ce type d'effet, puis passez à de plus grandes animations après avoir bien compris leur fonctionnement et leur utilisation dans la structure globale de votre site Web.
La clé des animations ne charge pas beaucoup de fichiers vidéo sur votre site Web. Plus l'animation est petite, plus il est facile de créer quelque chose avec un faible encombrement. Alors par où commencez-vous?
Faites quelque chose de simple et amusant, comme créer un état de survol animé. Le fait de changer de couleur ou d'élargir un bouton est un effet astucieux qui vous aidera à maîtriser le CSS et à vous familiariser avec l'animation de base avant de passer à des éléments plus volumineux. Vous pouvez également envisager des animations AJAX ou de chargement de parallaxe. Ce qui est bien avec l’une ou l’autre de ces options, c’est que cela vous laisse le temps de charger des éléments sans que l’utilisateur ne le remarque même. Comme les éléments se chargent lorsque les utilisateurs défilent, vous gagnez quelques précieuses secondes pour que tout soit prêt.
2. Optimiser les images
Avec le nombre d'écrans HD et de rétines disponibles pour les utilisateurs, vous pourriez être tenté de charger toutes vos images en taille réelle à haute résolution lorsque vous construisez votre site web. Ne tombez pas dans ce piège. La plupart de ces images sont probablement trop volumineuses pour que votre site puisse les gérer efficacement.
Connaissez vos types de fichiers. Les formats de fichier les plus courants pour les images sur le Web sont les suivants: JPG, PNG, GIF et SVG.
- JPG: Idéaux pour les photos, les fichiers JPG peuvent avoir une taille allant de très petite à énorme. Lorsque vous enregistrez des fichiers JPG pour une utilisation de site Web, veillez à enregistrer un fichier optimisé. (Dans Adobe Photoshop, vous pouvez optimiser les images pour le Web à l'aide des paramètres d'exportation définis dans Fichier> Exporter> Exporter en tant que.)
- PNG: Utilisez ce format de fichier pour les images contenant du texte afin que le lettrage soit bien rendu. C'est typiquement un fichier plutôt petit.
- GIF: Le format de fichier préféré pour les éléments animés plus petits, tels que la très populaire image animée de style meme. Mais attention, ce format de fichier peut devenir lourd si vous ne faites pas attention.
- SVG: Si vous avez besoin d’une image vectorielle pour le Web, c’est la meilleure option. Il peut être utilisé pour n'importe quoi, des icônes aux logos.
3. Utilisez le code si possible
Vous pourriez être tenté de créer un ensemble d'icônes et d'images astucieuses pour votre site Web et de charger chacune d'elles en tant qu'élément individuel. Cela peut causer des problèmes. À la place, utilisez du code pour appeler ces éléments lorsque cela est possible.
Utilisez CSS pour charger des images d’arrière-plan. Cela va? Forcer? votre site pour charger tout le reste avant l’arrière-plan, afin que les utilisateurs puissent voir d’autres éléments et du texte sur le site immédiatement. W3Schools propose un tutoriel simple et efficace pour savoir comment procéder.
Il existe de nombreux outils, allant des icônes Font Awesome à d’autres bibliothèques CSS et JavaScript, que vous pouvez utiliser pour créer de superbes éléments avec des effets amusants et légers. (CSS Design Awards propose une collection particulièrement intéressante de 30 boutons et éléments de formulaire à essayer.)
4. Gardez les vidéos courtes
Un autre élément de conception Web à la mode est l’utilisation de la vidéo en plein écran sur votre page d’accueil. Cela peut être un autre piège de temps de chargement. Vous vous retrouverez pris entre la qualité vidéo, le contenu vidéo et la vitesse et devrez faire un sacrifice quelque part.
Les meilleures vidéos sont très courtes (quelques secondes à peine) et tournent en boucle pour que l'action ne s'arrête pas. Vous n'avez pas besoin d'inclure le son ou d'autres effets non plus.
Vous pouvez essayer quelques autres astuces pour réduire au maximum la taille de votre fichier.
- Pensez à une superposition de couleurs ou à un flou sur une vidéo de résolution inférieure. Il peut toujours paraître soigné, mais ne nécessite pas autant de bande passante.
- Envisagez une vidéo dont la taille est inférieure au plein écran.
- Fossé la lecture automatique, qui peut? Truc? Les utilisateurs pensent que votre site se charge plus rapidement qu’il ne l’est.
- Ne restez pas coincé avec de longues vidéos. Si vous souhaitez afficher plusieurs clips vidéo, envisagez un curseur? Curseur? Élément ou modifier manuellement les vidéos sur un calendrier afin que les utilisateurs voient quelque chose de nouveau chaque fois qu'ils visitent le site. (Peu importe la qualité de votre clip, peu d'utilisateurs regarderont plus de quelques secondes, alors ne sacrifiez pas le temps de chargement pour des clips plus longs.)
5. Pensez au thème
Si vous utilisez WordPress ou un autre système de gestion de contenu avec un thème, n'oubliez pas que tous les thèmes ne sont pas conçus de la même manière. Alors que vous aurez probablement plus de chance avec une option premium - dont certaines vous permettent de? Éteindre? éléments inutilisés - examinez attentivement le code et construisez-le pour vous assurer que ce n'est pas ce qui gâche votre site.
6. Regardez vos plugins
Avez-vous une tonne de plugins ou d'applications tierces liés à votre site? Les utilisez-vous tous activement? Assurez-vous de désactiver les plugins inutilisés pour optimiser l'efficacité.
Les utilisateurs de WordPress peuvent profiter du plugin Performance Profiler pour voir quels plugins sont actifs et comment ils fonctionnent. Cela peut vous aider à résoudre les problèmes, à identifier les problèmes et à supprimer ou reconfigurer ces plugins. (Un problème commun est souvent le plugin de partage social.)
7. Compresser, Compresser, Compresser
Non seulement les composants individuels de votre site Web doivent être compressés, mais vous pouvez également compresser le site dans son ensemble afin de le maintenir rapidement opérationnel. Parmi les éléments pouvant être compressés figurent les fichiers CSS et JavaScript, les images et les vidéos (en les redimensionnant) et le site en tant que tout en utilisant un outil comme GZIP.
Les fichiers minifiés sont le meilleur moyen de créer des plugins et de créer des fichiers plus petits. Vous souhaitez également vérifier la manière dont le code est conçu sur le site. Pour un maximum de rapidité, tout le JavaScript doit être contenu dans un fichier et tout le CSS doit être contenu dans un autre fichier. (Une autre remarque: l'endroit où vous placez ce code compte également. Liez CSS en haut de la page et JavaScript en bas pour augmenter la vitesse de votre site.)
Conclusion
Le chargement de votre site est-il assez rapide? Si ce n'est pas le cas, il est temps de le modifier afin de respecter les temps de chargement optimaux. (Si vous devez réfléchir à cette question, votre site n’est probablement pas assez rapide.)
Les sites Web doivent être rapides pour que les utilisateurs puissent interagir immédiatement. Plus le chargement de la page est long, quel que soit le périphérique, plus il est probable que les utilisateurs abandonnent complètement le site. Prenez donc quelques minutes aujourd'hui ou cette semaine et parcourez cette liste pour vous assurer que votre site fonctionne à un niveau optimal.
Source de l'image: Mohammed Al-Sultan.