7 conseils pour accélérer votre site Web aujourd'hui
Tout le monde aime une petite animation de chargement cool, non? Mais si ce divot dure plus d'une seconde ou deux, il 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. Il est de votre devoir de vous assurer que le design n'est pas seulement agréable visuellement mais également 100% fonctionnel. Si votre site traîne quelque peu, vous pouvez cesser de vous inquiéter maintenant car nous avons sept conseils pour vous aider à accélérer votre site Web avec de petits ajustements à la conception. (Assurez-vous de visiter chacun des sites Web présentés dans le message; ils ont fière allure et se chargent rapidement.)
Explorez Envato Elements
1. Faites attention aux animations
L'animation dans la conception de sites Web est l'une des tendances «it» de 2015. Ne vous laissez pas distancer par la création de fichiers massifs qui ne se chargent tout simplement pas. Commencez avec des touches animées plus petites lorsque vous commencez à travailler avec ce type d'effet et passez à des animations plus grandes après avoir une bonne idée de leur fonctionnement et de votre environnement de site Web.
La clé des animations n'est pas de charger un tas de fichiers vidéo sur votre site Web. Plus l'animation est petite, plus il est facile de créer quelque chose avec une petite empreinte. Alors par où commencer?
Faites quelque chose de simple et amusant, comme créer un survol animé. Avoir un bouton changer de couleur ou agrandir est un effet astucieux qui vous aidera à maîtriser le CSS et à avoir une bonne idée de l'animation de base avant de passer à des éléments plus grands. Vous pouvez également envisager des animations de chargement AJAX ou parallaxe. Ce qui est bien avec l'une de ces options, c'est que cela vous donne le temps de charger des éléments sans que l'utilisateur ne s'en aperçoive. Parce que les éléments se chargent au fur et à mesure que les utilisateurs défilent, vous gagnez quelques secondes précieuses pour tout préparer.
2. Optimiser les images
Avec le nombre d'écrans HD et rétine 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 les gère efficacement.
Connaissez vos types de fichiers. Les formats de fichiers les plus courants pour les images sur le Web sont JPG, PNG, GIF et SVG.
- JPG: Idéal pour les photos, la taille des fichiers JPG peut varier de minuscule à énorme. Lorsque vous enregistrez des fichiers JPG pour une utilisation sur un site Web, assurez-vous d'enregistrer un fichier optimisé. (Dans Adobe Photoshop, vous pouvez optimiser les images pour le Web à l'aide des paramètres d'exportation sous Fichier> Exporter> Exporter sous.)
- PNG: utilisez ce format de fichier pour les images contenant du texte, afin que le lettrage soit bien rendu. Il s'agit généralement d'un fichier assez petit.
- GIF: le format de fichier préféré pour les éléments animés plus petits, tels que l'image de style meme animé toujours populaire. 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 tout, des icônes aux logos.
3. Utilisez le code si possible
Vous pourriez être tenté de créer un tas d'icônes et d'images astucieuses pour votre site Web et de les charger comme élément individuel. Cela peut provoquer des problèmes. Utilisez plutôt du code pour appeler ces éléments lorsque cela est possible.
Utilisez également CSS pour charger des images d'arrière-plan. Cela «forcera» votre site à charger tout le reste avant l'arrière-plan, afin que les utilisateurs puissent commencer à voir immédiatement d'autres éléments et du texte sur le site. W3Schools propose un tutoriel génial et simple sur la façon de procéder.
Il existe de nombreux outils tels que les icônes Font Awesome et de nombreuses 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 a une collection particulièrement agréable 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 coincé entre la qualité vidéo, le contenu vidéo et la vitesse et devrez faire un sacrifice quelque part.
Les meilleures vidéos sont super courtes - seulement quelques secondes - et bouclent pour que l'action ne s'arrête pas. Vous n'avez pas besoin non plus d'inclure du son ou d'autres effets.
Vous pouvez essayer quelques autres astuces pour réduire autant que possible 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 sembler soigné, mais ne nécessitera pas autant de bande passante.
- Considérez une vidéo de taille inférieure au plein écran.
- Abandonnez la lecture automatique, ce qui peut «inciter» les utilisateurs à penser 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 élément de «curseur» vidéo ou modifiez manuellement les vidéos selon 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. Réfléchissez 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 construits de la même manière. Bien que vous ayez probablement plus de chance avec une option premium - dont certaines vous permettent de «désactiver» les éléments inutilisés - examinez de près le code et créez pour vous assurer que ce n'est pas la chose qui embourbe votre site.
6. Surveillez vos plugins
Avez-vous une tonne de plugins ou d'applications tierces liées à 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 et à identifier les problèmes et à supprimer ou reconfigurer ces plugins. (Un problème commun est souvent les plugins 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 pour l'aider à fonctionner rapidement. Parmi les éléments qui peuvent être compressés figurent les fichiers CSS et JavaScript, les images et la vidéo (en redimensionnant) et le site en utilisant un outil tel que GZIP.
Les fichiers minifiés sont le meilleur moyen pour les plugins et la création de fichiers plus petits. Vous souhaitez également vérifier comment le code est conçu au sein du site. Pour une vitesse maximale, tout le JavaScript doit être contenu dans un seul fichier et tous les CSS doivent être contenus 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 également la vitesse de votre site.)
Conclusion
Votre site se charge-t-il assez rapidement? Sinon, il est temps de le modifier pour respecter les temps de chargement optimaux. (Si vous devez penser à cette question, votre site ne sera probablement pas assez rapide.)
Les sites Web doivent être rapides pour que les utilisateurs puissent interagir immédiatement. Plus le chargement de la page prend du temps, quel que soit l'appareil, 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 .
