Comment concevoir une interface conçue pour la vitesse
Votre site Web est-il lent? Être honnête. Cela pourrait-il être plus rapide? Les utilisateurs exigent des sites Web qui se chargent rapidement et continuent de fournir du contenu sans décalage. Si votre site Web prend le moins de retard pour répondre à cette demande, les utilisateurs pourraient abandonner votre site (et ils pourraient ne jamais revenir).
Aujourd'hui, nous allons chercher des moyens de vous assurer que votre interface de site Web est conçue pour la vitesse, de sorte que vous n'aurez plus jamais à vous soucier des temps de chargement des pages.
Explorez Envato Elements
Testez votre site Web
Avant de vous arrêter à «il n'y a aucun moyen que mon site Web soit lent», testez-le. Google dispose d'un excellent outil que tout le monde peut utiliser pour tester n'importe quel site Web en entrant l'URL.
Vous obtenez un rapport astucieux qui vous indique à quelle vitesse votre site se déplace et où il pourrait être amélioré. C'est une bonne idée d'exécuter le test périodiquement pour vous assurer que tout fonctionne correctement. (De plus, il réduit les performances sur les appareils mobiles et de bureau et propose des suggestions d'amélioration.)
Le rapport formule trois recommandations - à corriger, à considérer comme correctives et acceptées - pour les éléments suivants:
- Mise en cache du navigateur
- Optimisation d'image
- Réponse du serveur
- Scripts et CSS au-dessus du pli
- Compression
- Redirige
- Minification de CSS, HTML et JavaScript
- Hiérarchisation du contenu visible
Vider les plugins inutiles
Conservez-vous des plugins ou des ajouts que vous n'utilisez tout simplement pas? Il est temps de les jeter.
Même les éléments qui ne sont pas utilisés réduisent la vitesse de votre site. (Cela est particulièrement vrai si vous travaillez sur un système tel que WordPress.)
Passez en mode nettoyage et supprimez tous les plugins inutilisés. Vous devriez également envisager de penser aux plugins utilisés et vous assurer que vous les utilisez réellement ou qu'ils contribuent à l'expérience utilisateur globale, sinon trouver une meilleure option.
En plus du nombre de plugins, la qualité est également une préoccupation. N'ajoutez pas simplement un ancien plugin à votre site Web. Essayez de trouver des éléments qui fournissent une valeur réelle et qui sont très bien notés. Des éléments anciens et obsolètes peuvent également faire glisser votre site vers le bas.
Partager uniquement au besoin
Pendant que nous pensons aux plugins, combien de boutons de partage de médias sociaux avez-vous sur votre site Web? Répondez maintenant honnêtement: de combien en avez-vous réellement besoin?
Trop de ces boutons peuvent prêter à confusion pour les utilisateurs - combien vont en fait partager sur plusieurs plates-formes - et ralentir les vitesses et le temps de chargement. (Cela est particulièrement vrai pour ceux qui essaient de déterminer le nombre de likes ou de partages déjà publiés avec des requêtes s'exécutant dans les deux sens.)
Choisissez un ou deux réseaux où vous êtes actif et où les utilisateurs se connectent régulièrement à votre site Web et incluent ces boutons. Laissez tomber le reste. Ils ne font que gêner.
Méfiez-vous de la surcharge d'image
Vidéo, illustrations, photos et animations… oh, la la! Tous ces excellents éléments visuels peuvent augmenter les temps de chargement. Choisis sagement.
Avant d'ajouter un élément visuel à la conception de votre site Web, pesez sa valeur par rapport à d'autres éléments. Fournit-il quelque chose aux utilisateurs? Si oui, continuez. Sinon, pourquoi utilisez-vous cet élément de conception?
Vous devez optimiser toutes les images de manière appropriée pour le Web. En règle générale, les images doivent être aussi grandes que nécessaire. N'exagérez pas et ne téléchargez pas de photos en taille réelle. Cela prend un peu de travail sur le front-end, mais vous serez heureux de l'avoir fait plus tard (en particulier si votre site Web continue de croître).
Profitez également d'autres astuces. Essayez les polices d'icônes plutôt que les icônes basées sur des images. Convertissez les éléments en SVG (format vectoriel à l'échelle) si une police d'icône ne fonctionne pas. Utilisez autant de «magie» HTML et CSS que vous le pouvez et n'embourbez pas le site avec des éléments qui se chargent sous forme de photos tels que des boutons, des flèches et d'autres outils d'interface utilisateur.
Décompressez avec les outils de rétrécissement
Les petits fichiers sont la clé de la vitesse maximale. L'équilibre réside dans l'idée que les écrans haute résolution vous permettent de partager et de présenter du contenu de qualité supérieure. C'est là qu'interviennent les outils de rétrécissement.
Si vous ne vous sentez pas confiant dans votre capacité à dimensionner et à réduire - ou si vous n'obtenez tout simplement pas le résultat souhaité - essayez l'une de ces options pour réduire les fichiers aux plus petites tailles utilisables.
- WP Smush réduit les images pour les utilisateurs de WordPress
- Kraken compresse les images pour tous les utilisateurs
- TinyPNG réduit encore plus la taille du format commun
- Gzip regroupe les fichiers pour une compression optimale
- Réduisez votre CSS réduit la taille globale du code et comprend une API
- SpriteMe transforme les images d'arrière-plan en sprite CSS pour enregistrer les requêtes HTTP
- CSS Compressor réduit la taille globale du code
Il suffit de le mettre en cache
Activez la mise en cache sur votre site Web.
Si vous ne le faites pas, vos utilisateurs en paient le prix. Il y a encore quelques personnes qui pourraient faire valoir le contraire, mais la valeur pour les utilisateurs l'emporte sur ces arguments. Votre site Web doit être rapide.
Un cache crée un fichier temporaire à partir des pages afin que le navigateur «se souvienne» du site lorsqu'un utilisateur revient. Il réduit l'utilisation de la bande passante, la charge du serveur et le temps de latence (réel ou perçu). Les utilisateurs vous remercieront, en particulier lorsqu'il s'agit d'accéder à des sites Web plus massifs.
Nettoyez-le régulièrement
Tout comme vous devez nettoyer votre maison régulièrement, vous devez nettoyer et entretenir la base de données, les liens et les fichiers de votre site Web.
Voici les éléments de la liste de contrôle de nettoyage de votre site Web:
- Optimisez votre base de données. Au fil du temps, votre base de données peut être obstruée par des révisions, des photos hors d'usage et des données enregistrées. Vous n'êtes pas obligé de tout garder. Purgez les éléments qui ne font plus partie de votre plan de site Web.
- Ne pas créer de liens hypertexte avec les images. Tirer des images du site Web (et du serveur) de quelqu'un d'autre vers le vôtre est juste une mauvaise idée. Et c'est lent. Il en va de même pour presque toutes les autres demandes de fichiers externes. Utilisez-les uniquement lorsque cela est nécessaire.
- Corrigez les liens. Les liens brisés peuvent ne pas ralentir votre site, mais cela ralentit la connexion que les utilisateurs établissent de votre site vers d'autres endroits, ce qui peut être tout aussi mauvais. Prenez l'habitude de rechercher et de corriger les liens rompus.
- Gardez tout à jour. Si vous utilisez une plate-forme telle que WordPress, prenez les mises à jour. Si vous utilisez un thème ou des éléments encadrés de tout type, la même chose est vraie. Les mises à jour peuvent contenir des correctifs qui contribuent à la vitesse et protègent votre site Web des menaces potentielles. (Et rien n'est plus lent qu'un site piraté ou infecté par un malware.)
Conclusion
Parcourez maintenant la liste ci-dessus et revenez à l'outil Pagespeed Insights de Google. Exécutez-le à nouveau. Avez-vous remarqué une différence?
Rien ne rendra un utilisateur plus heureux et plus susceptible de revenir sur votre site Web qu'une expérience formidable et rapide. Pendant toutes les phases de la conception visuelle, n'oubliez pas de penser également à la conception de l'interface afin que votre site Web soit conçu pour la vitesse.
