le guide pour l'optimisation de votre site Web

Cet article est divisé en sous-sections pour chaque optimisation, au cas où vous voulez sauter l’autour.

Image

En tant que développeur web, les images n'étaient pas quelque chose que je pensais. Je savais que l'ajout d'images de haute qualité à un 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 la page.

La principale chose que j'ai faite pour optimiser les images était 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 peut-être que ce n'est pas pour vous non plus.

Le service que j'ai utilisé pour compresser les images était Optimizilla, un site facile à utiliser où vous téléchargez vos images, sélectionnez le niveau de compression que vous voulez, 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 ralentit considérablement les temps de chargement.

Optimizilla est à peine le seul choix pour votre image compression needs. Some standalone, open-source software vous pouvez utiliser ImageOptim pour Mac ou FileOptimizer pour Windows. Si vous préférez compresser en phase de développement de votre site en utilisant des outils tel que Gulp et WebPack qui devraient faire l'affaire.

Peu importe combien vous faites, aussi longtemps que vous le faites. Les gains de performance valent bien l'effort minimal.

Selon votre cas d'utilisation, il peut également être intéressant 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 dans si j'utilise l'un ou l'autre est 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 plonger plus profondément dans les avantages et les inconvénients des deux.

De plus, Google a sorti un format webp assez mignon, mais comme il n'est pas encore supporté par tous les navigateurs, j'hésite à l'utiliser.

Gardez un œil pour un soutien supplémentaire à l'avenir!

Video

vimeo offre une excellente plateforme pour l'hébergement de vidéos où elles dégradent la qualité vidéo pour des connexions plus lentes et compressent vos vidéos pour optimiser les performances.

Vous pouvez également héberger vos vidéos sur Youtube, tout en configurant les vidéos selon les besoins de votre site.

Gzip

Longue histoire courte, gzip est un format de compression de fichier que la plupart des navigateurs comprennent et qui peut fonctionner dans les coulisses sans que l'utilisateur ait même besoin de savoir ce qui se passe.

En fait, il existe des paquets pour ajouter de la compression explicitement dans votre code serveur, ce qui vous permet de profiter des avantages du gzipping en échange de quelques lignes de code. En utilisant ce middleware de compression,

Il est utile de vérifier si votre service d'hébergement fournit une option gzip.

Minifier vos ressources

La minification consiste à supprimer des caractères inutiles du code sans affecter son fonctionnement (espaces, 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 obscurcir votre code, ce qui rend plus difficile la détection de points faibles de sécurité par les pirates informatiques.

Ces jours-ci, la minification est généralement effectuée dans le cadre du processus de développement avec Webpack ou Gulp ou une alternative.

Cependant, ces outils de développement peuvent avoir une certaine courbe d'apprentissage, donc si vous cherchez des alternatives plus faciles, Google recommande HTML-Minifier pour HTML, CSSNano pour CSS,et UglifyJS pour Javascript.

Le cache du navigateur

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 n'étais pas au courant, jusqu'à ce que Google me le dise, que certaines de mes ressources n'étaient pas mises en cache de manière appropriée en raison d'en-têtes manquants sur la réponse HTTP que j'envoyais de mon serveur.

Réseau de distribution de contenu

Un réseau de distribution de contenu, ou CDN, est un réseau qui permet aux utilisateurs du monde entier d'être géographiquement plus proches de votre contenu.

Si un utilisateur doit charger une grande image du Japon, mais que votre serveur se trouve aux États-Unis, cela prendra plus de temps que si vous aviez un serveur à Tokyo.

Un CDN vous permet de profiter d'un ensemble de serveurs proxy situés partout dans le monde, ce qui permet de charger votre contenu plus rapidement, quel que soit l'emplacement de votre utilisateur final.

Certains CDN populaires incluent CloudFront et CloudFlare.

En conclusion

Il n'y a pas de solution unique pour accélérer votre site, et vous devrez prendre les meilleures décisions 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 lourdeur, puis commencer les spécifiquement.

J'espère que vous avez trouvé quelque chose d'utile dans cet article! j'ai encore beaucoup à apprendre dans ce domaine.

Si vous avez d'autres conseils ou recommandations, laissez-les dans les commentaires !