Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Optimiser mon site web 📯

Pour améliorer son référencement et améliorer la rapidité de son site internet, il existe plusieurs points à ne pas négliger.

Analyser les performances de son site

Pour analyser les performance d'un site, il existe plusieurs outils gratuits très efficaces et utiles, en voici quelque-uns :

Vérifier la vitesse de chargement d'un site : Google PageSpeed
Vérifier la responsivité d'un site : Google Mobile website speed test
Optimiser davantage : GTmetrix

(Pour plus de sites d'optimisation de site internet, le site Aurone) en propose plusieurs.

Utiliser un reset

Qu'est-ce qu'un reset ?

Un reset est un script à mettre en amont de sa feuille de style css. Il permet d'initialiser les balises html majeures afin qu'elle s'adaptent à tous les navigateurs. Par défaut, les balises html n'ont pas les mêmes paramètres css sur tous les navigateurs d'où l'importance d'utiliser un reset.

Voici un exemple de Reset complet à utiliser

Utiliser un styleguide

Un styleguide ou code typographique est un guide de référence permettant de faire du code propre. Il permet notamment d'éviter de faire de la redondance de code (réutiliser plusieurs fois des classes CSS par exemple).

Il est définit par un classement de classes, par une appellation propre à un code et à un ordre d'attributs.

Il est intéressant de réaliser son propre styleguide à utiliser dans tous ses projets.
Voici quelques exemples de Styleguides

Optimiser les frameworks et librairies css/js

Optimiser le CSS :

Un fichier CSS peut vite peser lourd sur un site, il existe ainsi plusieurs façons de l'optimiser.
Tout d'abord, il peut être judicieux de se tourner vers du less ou du scss qui sont déjà des formes optimisées de CSS.
Cependant faire le choix de minifier son CSS reste encore la meilleure méthode.

Pour cela il existe des générateurs pour minifier automatiquement sa feuille de style CSS.

Optimiser le JS :

De la même façon, un JS minifié pèsera nettement moins sur un site internet et permettra à celui-ci de charger beaucoup plus vite.

minifier automatiquement son script JS

Optimiser les images 📸

Les images sont des éléments presques indispensables dans un site internet, cependant leur utilisation peut vite ralentir un site web lorsqu'on les multiplie. Ainsi quelques règles sont à respecter afin de diminuer au mieux leur poids sans pour autant diminuer leur qualité.

1. Utiliser un format adapté

  • PNG : Il est le plus adapté pour des images grandes et/ou de bonne qualité.
  • JPEG : Il permet d'ajuster correctement l'équilibre entre la qualité et la taille du fichier.
  • GIF: Il est adapté pour les petites images animées.
  • SVG: Il est particulièrement optimisé pour les animations et les images de fonds sur un site web.

Privilégiez donc le fomat PNG pour les images et le format SVG pour les animations et fonds.

2. Utiliser une taille adaptée

Pour des images destinées à être affichées en petit ou coupé sur un site web, autant optimiser celles-ci pour qu'elles s'adaptent parfaitement à ce pour quoi elle vont être utilisées à l'aide d'un logiciel de retouche tel que Photoshop.

3. Diminuer le poids

Enfin, la meilleure façon de diminuer le poids d'une image est d'utiliser un logiciel d'optimisation qui permet de réduire considérablement et rapidement la taille de celle-ci.
Pour cela, je recommande le logiciel mac ImageOptim

Optimiser les vidéos 🎥

On se retrouve souvent confronté à utiliser des vidéos sur un site web, cependant celles-ci ont pour inconvénient d'avoir une taille importante et de ralentir considérablement ce dernier. Ainsi il est indispensable de les optimiser. Heureusement, à l'instar des images, il existe plusieurs moyens pour cela.

1. Utiliser un format adapté

  • mp4 : Il s'agit du format le plus commun, il est compatible avec tout mais pèse souvent très lourd. _ webm : Il s'adapte à tous les navigateurs et est optimisé particulièrement pour le web avec une taille moins importante que le mp4.

Privilégiez donc le fomat webm pour les vidéos de votre site internet.

Optimiser le poids

Enfin pour réduire considérablement la taille de votre fichier, il est nécéssaire de l'optimiser, pour cela, il y a 2 possibilités :

  • Utiliser un logiciel vidéo et convertir celle-ci en H264, réduire le bitrate, diminuer la résolution et le nombre de FPS. ou
  • Utiliser un compresseur en ligne

Mettre en cache 🗂

Afin de réduire la bande passante, il peut être intéressant de mettre certains éléments de son site web en cache, pour cela, il s'agit simplement d'ajouter quelques lignes dans son .htaccess afin d'indiquer quels éléments doivent être mis en cache :

Exemple :

<IfModule mod_headers.c>
  # Prends en compte les polices (formats récents)
  AddType application/x-font-woff .woff
  AddType application/x-font-woff2 .woff2
  # active la mise en cache
  ExpiresActive On
  ExpiresDefault "access plus 1800 seconds"
  # met à 1 an la durée du cache pour les images, le SVG et les polices d’écriture
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
  # met à 1 mois la durée du cache pour les CSS et JS
  ExpiresByType text/css "access plus 1 month"
</IfModule>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment