Optimiser et rendre son site web plus rapide

Aujourd’hui, je vais vous expliquer en quelques manipulations simples, comme optimiser votre site web. Je ne vais pas vous expliquer comment l’optimiser à 100%, mais au moins à 95% dirons-nous. J’ai choisi de garder des manipulations simples, les 5% d’optimisations restants sont des méthodes assez compliquées, le rapport temps passé/optimisation n’étant pas optimal, j’ai décidé de les occulter.

De plus, je me concentre ici uniquement sur des optimisations apache (via .htaccess) + site web, pas des optimisations au niveau du serveur, plus compliquées.

Comment allons-nous travailler ?

On ne va pas faire des F5 pour vérifier que le site est plus rapide. On utilisera le site WebPageTest, qui vous fournira une analyse précise de votre site web, avec des conseils, et surtout une note à la clé, sur 100. Plus votre note est élevée, plus votre site est optimisé.

1. Réduire les dépendances

Si votre site affiche une vidéo Youtube, des avatars Gravatar, des discussions Disqus, des fonts Google, des « J’aime » ou des « +1 », et j’en passe et des meilleurs, c’est autant de ralentissement pour votre site. Vous aurez beau optimiser au maximum votre site, vous serez dépendant de la rapidité d’affichage de ces services externes. Demandez-vous si vous en avez vraiment besoin, et hébergez vous-même au maximum ce qui est possible : récupérer les polices, hébergez une image « J’aime » renvoyant sur Facebook au lieu d’utiliser leur propre bouton (en plus, vous gagnerez en respect de la vie privée), etc…

2. Utiliser un CMS léger

Ca peut paraître bête, mais un CMS léger est beaucoup plus rapide et facile à optimiser. Je vais prendre pour exemple le blog de Mitsu (désolé ;) ), qui tourne sous WordPress et celui de SebSauvage qui tourne sous Blogotext. WordPress étant une usine à gaz, au contraire de Blogotext qui est très léger.

Mitsu obtient un score de 67% :

 

 

Il existe des exceptions, en particulier avec l’utilisation de CloudFare, qui est une sorte de cache général pour votre site, tout en évitant les attaques DDOS (très efficace d’ailleurs).

On peut voir par exemple que Korben, tournant sous WordPress, avec CloudFare, obtient un score honorable de 92% :

 

CloudFare a cependant l’énorme inconvénient de gérer tout votre trafic, et étant une société américaine…

3. Gziper son site

Vous pouvez fournir des pages gzipées à votre visiteur. Pas d’inquiétude, c’est complètement transparent, le serveur envoit le contenu compressé, et votre navigateur se charge de le décompresser à la volée.

Il vous suffit de rajouter cette ligne dans le .htaccess à la racine de votre site :

AddOutputFilterByType DEFLATE application/javascript text/css text/html

Cela compressera tout le javascript, css et html.

Faites un test WebPagetest, vous devriez déjà avoir augmenté votre score.

4. Utiliser le cache du navigateur

Je ne vais pas vous expliquer comment mettre en place un cache de fichiers html. Je trouve ça contraignant de tout mettre en cache, surtout au niveau des commentaires, c’est le bordel entre les pages à jour ou pas.

Les navigateurs de vos visiteurs ont tous un cache, autant l’utiliser !

Rajouter au .htaccess à la racine de votre site :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault « access plus 10 years »
ExpiresByType text/css « access plus 10 years »
ExpiresByType text/js « access plus 10 years »
ExpiresByType text/javascript « access plus 10 years »
ExpiresByType application/javascript « access plus 10 years »
ExpiresByType application/x-shockwave-flash « access plus 10 years »
ExpiresByType image/png « access plus 10 years »
ExpiresByType image/gif « access plus 10 years »
ExpiresByType image/jpg « access plus 10 years »
ExpiresByType image/jpeg « access plus 10 years »
ExpiresByType image/x-icon « access plus 10 years »
ExpiresByType text/html « access plus 1 seconds »
ExpiresByType application/xhtml+xml « access plus 1 seconds »
</IfModule>

Ainsi, à chaque chargement de page, tout ne sera pas retéléchargé, c’est du gain de temps de gagné !

5. A propos des jpg

Compressez vos images en qualité 80%, optimisez-les et faites des jpg progressive ! L’image s’affichera avant qu’elle soit terminée d’être téléchargée, c’est beaucoup plus propre pour la mise en page et donne une impression de rapidité.

Pour ce faire, voilà par exemple sous GIMP comment procéder, à l’enregistrement d’un jpg :

 

Conclusion

Ainsi, avec ces quelques manipulations simples à mettre en place, j’ai pu obtenir un score de 93% :

 

Le score augmenterait encore un peu (94%) sans les vidéos Youtube sur la home, où leurs miniatures ne sont pas en jpg progressive. Autrement dit, j’obtiens un score similaire voire supérieur que Korben qui utilise un service de cache professionnel…

Optimiser votre site web, outre la fierté d’avoir un site rapide, permet également d’alléger votre serveur, surtout si vous êtes sur un mutualisé sans grandes ressources.