Pour améliorer son référencement et améliorer la rapidité de son site internet, il existe plusieurs points à ne pas négliger.
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.
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
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
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.
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
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é.
- 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.
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.
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
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.
- 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.
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
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>