Comment concevoir une interface conçue pour la vitesse

Votre site web est lent? Être honnête. Pourrait-il être plus rapide? Les utilisateurs exigent des sites Web qui se chargent rapidement et continuent de fournir du contenu sans retard. Si votre site Web est le moins en retard pour répondre à cette demande, les utilisateurs peuvent quitter votre site (et ne jamais revenir).

Aujourd'hui, nous allons rechercher des moyens de nous assurer que l'interface de votre site Web est conçue pour être rapide, de sorte que vous n'ayez plus jamais à vous soucier du temps de chargement des pages.

Testez votre site web

Avant de vous arrêter, il n’ya 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 régulièrement pour s'assurer que tout fonctionne correctement. (De plus, il décompose les performances sur les appareils mobiles et de bureau et propose des suggestions d'amélioration.)

Le rapport contient trois recommandations (à corriger, à envisager et à adopter) pour les éléments suivants:

  • Mise en cache du navigateur
  • Optimisation de l'image
  • Réponse du serveur
  • Scripts et CSS au dessus du pli
  • Compression
  • Redirections
  • Minification de CSS, HTML et JavaScript
  • Priorisation du contenu visible

Vider les plugins inutiles

Vous retenez des plugins ou des add-in que vous n'utilisez tout simplement pas? Il est temps de les jeter.

Même les éléments qui ne sont pas utilisés ralentissent votre site. (Cela est particulièrement vrai si vous travaillez avec un système tel que WordPress.)

Passez en mode nettoyage et supprimez tous les plugins inutilisés. Pensez également aux plug-ins utilisés et assurez-vous de les utiliser ou de contribuer à l'expérience globale de l'utilisateur, à moins de trouver une meilleure option.

En plus du nombre de plugins, la qualité est également une préoccupation. N'ajoutez pas n'importe quel ancien plugin à votre site web. Essayez de trouver des éléments qui fournissent une valeur réelle et sont très bien cotés. Des éléments obsolètes et obsolètes peuvent également faire glisser votre site vers le bas.

Partager uniquement au besoin

Pendant que nous réfléchissons aux plugins, combien de boutons de partage de médias sociaux avez-vous sur votre site Web? Maintenant, répondez honnêtement: de combien avez-vous réellement besoin?

Trop de ces boutons peuvent être déroutants pour les utilisateurs - combien vont en fait partager sur plusieurs plates-formes de toute façon - et ralentir la vitesse et le temps de chargement. (Cela est particulièrement vrai pour ceux qui essaient de savoir combien de mentions aiment ou partagent déjà un message avec des requêtes qui fonctionnent dans les deux sens.)

Choisissez un ou deux réseaux sur lesquels vous êtes actif et où les utilisateurs se connectent régulièrement à votre site Web et inclut ces boutons. Fossé le reste. Ils ne font que gêner.

Méfiez-vous de la surcharge d'image

Vidéo, illustrations, photos et animations? Oh mon! Tous ces éléments visuels géniaux peuvent augmenter les temps de chargement. Choisis sagement.

Avant d’ajouter un élément visuel à la conception de votre site Web, comparez-le avec 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'allez pas trop loin et téléchargez des 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 (particulièrement si votre site Web continue à se développer).

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 au format SVG (format vectoriel mis à l'échelle) si une police d'icônes ne fonctionne pas. Utilisez autant de HTML et de CSS? Magic? comme vous le pouvez et ne le cognez pas 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.

Prendre une charge avec des outils rétrécissants

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 rétrécissants.

Si vous n'êtes pas sûr de votre capacité à dimensionner et à réduire, ou si vous n'obtenez pas le résultat souhaité, essayez l'une de ces options pour réduire la taille des fichiers au minimum.

  • 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 empaquette les fichiers pour une compression optimale
  • Minify Your CSS réduit la taille globale du code et comprend une API
  • SpriteMe transforme les images d'arrière-plan en image-objet CSS pour enregistrer les requêtes HTTP.
  • CSS Compressor réduit la taille globale du code

Il suffit de le cacher

Activer la mise en cache sur votre site Web.

Si vous ne le faites pas, vos utilisateurs paient le prix. Quelques personnes pourraient encore soutenir 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 de pages afin que le navigateur se souvienne? le site quand 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 pour accéder à des sites Web plus volumineux.

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 inutilisées et des données enregistrées. Vous n'êtes pas obligé de tout garder. Purgez les éléments qui ne font plus partie du plan de votre site Web.
  • Ne pas hotlink des images. Extraire des images du site Web (et du serveur) de quelqu'un d'autre sur le vôtre est une mauvaise idée. Et c'est lent. Il en va de même pour presque toute autre demande de fichier externe. Utilisez-les uniquement lorsque cela est nécessaire.
  • Corriger les liens. Les liens brisés peuvent ne pas ralentir votre site, mais ralentissent la connexion que les utilisateurs établissent entre votre site et d'autres lieux, ce qui peut être tout aussi mauvaisPrenez l’habitude de vérifier et de corriger les liens brisés.
  • Gardez tout à jour. Si vous utilisez une plateforme telle que WordPress, prenez les mises à jour. Si vous utilisez un thème ou des éléments en boîte 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 contre les menaces potentielles. (Et rien n'est plus lent qu'un site piraté ou infecté par des logiciels malveillants.)

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 à la conception de l'interface afin que votre site Web soit conçu pour la vitesse.