Un guide du débutant pour l'optimisation de sites Web

Image reproduite avec l'aimable autorisation de Pexels.

Je suis débutant et j'ai pu atteindre 99/100 dans le classement d'optimisation de Google. Si je peux le faire, vous le pouvez aussi.

Si vous êtes comme moi, vous aimez les preuves. Voici donc les résultats de PageSpeed ​​Insights de Google pour hasslefreebeats, un site Web que je maintiens et que j'ai récemment consacré du temps à optimiser:

Une capture d'écran de mon score PageSpeed ​​Insights.

Je suis assez fier de ces résultats, mais je tiens à souligner que je n'avais aucune idée de la façon d'optimiser un site Web il y a quelques semaines à peine. Ce que je dois partager avec vous aujourd'hui est simplement le résultat de beaucoup de recherches sur Google et de dépannage, des douleurs que je souhaite vous épargner.

Cet article est divisé en sous-sections pour chaque optimisation, au cas où vous souhaiteriez vous déplacer.

Je ne suis en aucun cas un expert, mais je suis convaincu que si vous mettez en œuvre les techniques ci-dessous, vous verrez des résultats!

Images

Image reproduite avec l'aimable autorisation de Pexels (et sûrement optimisée par Medium).

En tant que développeur web débutant, les images n'étaient pas quelque chose auquel je faisais beaucoup attention. Je savais que l'ajout d'images de haute qualité à mon site Web le rendrait plus professionnel, mais je n'ai jamais cessé de considérer les effets qu'ils auraient sur le temps de chargement de ma page.

La principale chose que j'ai faite pour optimiser mes images a été de les compresser.

Avec le recul, cela aurait dû être assez intuitif dès le départ, mais ce n'était pas pour moi, alors ce n'est peut-être pas pour vous non plus.

Le service que j'ai utilisé pour compresser mes images était Optimizilla, un site Web facile à utiliser où vous téléchargez vos images, sélectionnez le niveau de compression souhaité, puis téléchargez l'image compressée. J'ai vu la taille diminuer de plus de 70% pour certaines de mes ressources, ce qui va LONGMENT vers des temps de chargement plus rapides.

Optimizilla n'est guère le seul choix pour vos besoins de compression d'image. Certains logiciels autonomes et open source que vous pouvez utiliser sont ImageOptim pour Mac ou FileOptimizer pour Windows. Si vous préférez compresser à l'aide des outils de construction, il existe des plugins Gulp et WebPack qui devraient faire l'affaire. Peu importe comment vous faites, tant que vous le faites. Les gains de performances valent bien l'effort minimal.

Selon votre cas d'utilisation, il peut également être utile de regarder le format de vos fichiers. D'une manière générale, jpg va être plus petit que png. La principale différence si j'utilise l'un ou l'autre est de savoir si j'ai besoin de transparence derrière l'image: si j'ai besoin de transparence, j'utilise png, sinon j'utilise jpg. Vous pouvez approfondir les avantages et les inconvénients des deux ici.

De plus, Google a sorti un format webp qui est assez doux, mais comme il n'est pas encore pris en charge sur tous les navigateurs, j'hésite à l'utiliser. Gardez l'œil ouvert pour un soutien supplémentaire à l'avenir!

Je n'ai pas fait plus que compresser mes images pour obtenir les résultats que je vous ai montrés ci-dessus, mais si vous souhaitez optimiser davantage, voici un excellent article.

Vidéo

Photo de Terje Sollie de Pexels.

Je n'ai utilisé de vidéo dans aucun de mes projets en cours, je ne vais donc aborder ce sujet que brièvement car je ne pense pas être la meilleure ressource pour cela, en particulier.

C'est l'une de ces situations où je laisserais probablement les pros faire le gros du travail. Vimeo offre une excellente plateforme pour l'hébergement de vidéos où elles dégraderont la qualité vidéo pour des connexions plus lentes et compresseront vos vidéos pour optimiser les performances.

Vous pouvez également héberger vos vidéos sur Youtube, puis utiliser cet outil youtube-dl pour les télécharger depuis Youtube tout en configurant les vidéos en fonction des besoins de votre site Web.

Pour d'autres solutions possibles, consultez Brightcove, Sprout ou Wistia.

Gzip

Tu piges? Zip *: français? Image reproduite avec l'aimable autorisation de Pexels.

Je n'avais aucune idée de ce qu'était gzipping lorsque j'ai déployé mon site Web.

Pour faire court, gzip est un format de compression de fichiers que la plupart des navigateurs comprennent et qui peut s'exécuter en arrière-plan sans que l'utilisateur ne sache même que cela se produit.

Selon l'endroit où vous hébergez votre application, gzipping peut être aussi simple que de basculer un commutateur de configuration pour spécifier que vous souhaitez que votre serveur gzip les fichiers lors de leur envoi. Dans mon cas, mon site Web est hébergé sur Heroku, qui ne propose pas cette option.

Il s'avère qu'il existe des packages pour ajouter explicitement la compression dans le code de votre serveur, ce qui vous permet de profiter des avantages du gzipping en échange de seulement quelques lignes de code. En utilisant ce middleware de compression, j'ai pu réduire la taille de mes bundles Javascript et CSS de 75%.

Il vaut la peine de vérifier si votre service d'hébergement propose une option gzip. Si ce n'est pas le cas, regardez comment ajouter le gzipping à votre code côté serveur.

Minifiant

Ananas minifié gracieuseté de Pexels.

La minification est le processus de suppression des caractères inutiles du code sans affecter sa fonctionnalité (espaces blancs, caractères de nouvelle ligne, etc.). Cela vous permet de réduire la taille du fichier que vous transportez sur Internet. Il est également utile pour brouiller votre code, ce qui rend plus difficile pour les pirates sournois de détecter les points faibles de la sécurité.

De nos jours, la minification est généralement effectuée dans le cadre du processus de construction avec Webpack ou Gulp ou une autre alternative. Cependant, ces outils de construction peuvent avoir un peu de courbe d'apprentissage, donc si vous cherchez des alternatives plus faciles, Google recommande HTML-Minifier pour HTML, CSSNano pour CSS et UglifyJS pour Javascript.

Mise en cache du navigateur

Pas tout à fait comment le navigateur stocke les données, mais c'est aussi proche que possible. Avec l'aimable autorisation de Pexels.

Le stockage de fichiers statiques dans le cache du navigateur est un moyen très efficace d'augmenter la vitesse de votre site Web, en particulier lors des visites de retour du même client. Je ne savais pas, jusqu'à ce que Google me le dise, que certaines de mes ressources n'étaient pas mises en cache correctement en raison d'en-têtes manquants sur la réponse HTTP que j'envoyais depuis mon serveur.

Dès que ma page d'accueil est chargée, une demande est faite à mon serveur pour obtenir des données sur un tas de chansons qui sont ensuite rendues dans un lecteur de musique. Je ne mets pas à jour les chansons sur ce site très souvent, donc cela ne me dérange pas si un utilisateur vient sur mon site et voit les mêmes chansons de la dernière fois qu'il a visité, si cela va charger ma page un peu plus rapidement pour eux.

Afin d'obtenir une amélioration des performances, j'ai ajouté le code suivant à l'objet de réponse de mon serveur (serveur Express / Node):

res.append ("Cache-Control", "max-age = 604800000");
res.status (200) .json (réponse);

Tout ce que je fais ici est d'ajouter un en-tête de contrôle de cache à ma réponse, qui dit qu'après une semaine (en millisecondes), les ressources doivent être téléchargées à nouveau. Si vous mettez à jour ces fichiers plus souvent, un âge maximal plus court peut être une bonne idée.

Réseau de distribution de contenu

Image réelle d'un CDN, gracieuseté de Pexels.

Un réseau de distribution de contenu, ou CDN, est un réseau qui permet aux utilisateurs du monde entier d'être plus proches géographiquement de votre contenu. Si un utilisateur doit charger une grande image depuis le Japon, mais que votre serveur est aux États-Unis, cela prendra plus de temps que si vous aviez un serveur à Tokyo.

Un CDN vous permet de profiter d'un tas de serveurs proxy situés partout dans le monde, permettant à votre contenu d'être chargé plus rapidement, peu importe où se trouve votre utilisateur final.

Je tiens à noter que j'ai pu obtenir les résultats que vous avez vu ci-dessus avant de mettre en œuvre un CDN - je voulais simplement les mentionner car aucun article sur l'optimisation de site Web ne serait complet sans les mentionner. Avoir l'un de ces mauvais garçons sur votre site Web est impératif si vous prévoyez d'avoir une audience mondiale.

Certains CDN populaires incluent CloudFront et CloudFlare.

Divers

Voici quelques conseils supplémentaires pour extraire encore plus de jus:

  • Optimisez votre site Web pour charger d'abord le contenu «au-dessus de la ligne de flottaison» afin d'augmenter les performances perçues de votre site. Une façon courante de le faire est de charger des images paresseuses qui n'apparaissent pas sur la page de destination.
  • À moins que votre application ne dépende de Javascript pour rendre le HTML, comme un site Web construit avec Angular ou React, alors il est probablement sûr de charger vos balises de script au bas de la section du corps de votre fichier HTML. Cela pourrait affecter votre temps d'interactivité, cependant, ce n'est donc PAS une technique que je recommanderais pour chaque situation.

En conclusion

Ce n'est que la pointe de l'iceberg lorsqu'il s'agit d'optimiser votre site Web. Selon la quantité de trafic que vous recevez et le service que vous fournissez, vous pouvez avoir des goulots d'étranglement dans de nombreux domaines différents. Peut-être avez-vous besoin de plus de serveurs, peut-être avez-vous besoin d'un serveur avec plus de RAM, peut-être que votre boucle for à triple emboîtement pourrait utiliser une refactorisation - qui sait?

Il n'y a pas de solution unique pour accélérer votre site, et vous devrez finalement prendre les meilleures décisions pour votre situation en fonction des mesures. Ne perdez pas votre temps à optimiser quelque chose qui n'a pas besoin d'être optimisé. Analysez les performances de votre site pour trouver des goulots d'étranglement, puis attaquez-les spécifiquement.

J'espère que vous avez trouvé quelque chose d'utile dans cet article! Comme je l'ai mentionné, j'ai encore beaucoup à apprendre dans ce domaine. Si vous avez des conseils ou des recommandations supplémentaires, veuillez les laisser dans les commentaires ci-dessous!

Si vous avez aimé cet article, donnez-lui quelques applaudissements et consultez:

  • Outils que j'aurais aimé connaître lorsque j'ai commencé à coder
  • Outils que j'aurais aimé connaître lorsque j'ai commencé à coder: Revisited

Suivez-moi aussi sur Twitter.