Optimiser et rendre son site web plus rapide

Aujourd’­hui, je vais vous expli­quer en quelques mani­pu­la­tions simples, comme opti­mi­ser votre site web. Je ne vais pas vous expli­quer com­ment l’op­ti­mi­ser à 100%, mais au moins à 95% dirons-nous. J’ai choi­si de gar­der des mani­pu­la­tions simples, les 5% d’op­ti­mi­sa­tions res­tants sont des méthodes assez com­pli­quées, le rap­port temps passé/optimisation n’é­tant pas opti­mal, j’ai déci­dé de les occul­ter.

De plus, je me concentre ici uni­que­ment sur des opti­mi­sa­tions apache (via .htac­cess) + site web, pas des opti­mi­sa­tions au niveau du ser­veur, plus com­pli­quées.

Comment allons-nous travailler ?

On ne va pas faire des F5 pour véri­fier que le site est plus rapide. On uti­li­se­ra le site Web­Pa­ge­Test, qui vous four­ni­ra une ana­lyse pré­cise de votre site web, avec des conseils, et sur­tout une note à la clé, sur 100. Plus votre note est éle­vée, plus votre site est opti­mi­sé.

1. Réduire les dépendances

Si votre site affiche une vidéo You­tube, des ava­tars Gra­va­tar, des dis­cus­sions Dis­qus, des fonts Google, des “J’aime” ou des “+1”, et j’en passe et des meilleurs, c’est autant de ralen­tis­se­ment pour votre site. Vous aurez beau opti­mi­ser au maxi­mum votre site, vous serez dépen­dant de la rapi­di­té d’af­fi­chage de ces ser­vices externes. Deman­dez-vous si vous en avez vrai­ment besoin, et héber­gez vous-même au maxi­mum ce qui est pos­sible : récu­pé­rer les polices, héber­gez une image “J’aime” ren­voyant sur Face­book au lieu d’u­ti­li­ser leur propre bou­ton (en plus, vous gagne­rez en res­pect de la vie pri­vée), etc…

2. Utiliser un CMS léger

Ca peut paraître bête, mais un CMS léger est beau­coup plus rapide et facile à opti­mi­ser. Je vais prendre pour exemple le blog de Mit­su (déso­lé ;) ), qui tourne sous Word­Press et celui de Seb­Sau­vage qui tourne sous Blo­go­text. Word­Press étant une usine à gaz, au contraire de Blo­go­text qui est très léger.

Mit­su obtient un score de 67% :

 

 

Il existe des excep­tions, en par­ti­cu­lier avec l’u­ti­li­sa­tion de Cloud­Fare, qui est une sorte de cache géné­ral pour votre site, tout en évi­tant les attaques DDOS (très effi­cace d’ailleurs).

On peut voir par exemple que Kor­ben, tour­nant sous Word­Press, avec Cloud­Fare, obtient un score hono­rable de 92% :

 

Cloud­Fare a cepen­dant l’é­norme incon­vé­nient de gérer tout votre tra­fic, et étant une socié­té amé­ri­caine…

3. Gziper son site

Vous pou­vez four­nir des pages gzi­pées à votre visi­teur. Pas d’in­quié­tude, c’est com­plè­te­ment trans­pa­rent, le ser­veur envoit le conte­nu com­pres­sé, et votre navi­ga­teur se charge de le décom­pres­ser à la volée.

Il vous suf­fit de rajou­ter cette ligne dans le .htac­cess à la racine de votre site :

AddOut­put­Fil­ter­By­Type DEFLATE application/javascript text/css text/html

Cela com­pres­se­ra tout le javas­cript, css et html.

Faites un test Web­Pa­ge­test, vous devriez déjà avoir aug­men­té votre score.

4. Utiliser le cache du navigateur

Je ne vais pas vous expli­quer com­ment mettre en place un cache de fichiers html. Je trouve ça contrai­gnant de tout mettre en cache, sur­tout au niveau des com­men­taires, c’est le bor­del entre les pages à jour ou pas.

Les navi­ga­teurs de vos visi­teurs ont tous un cache, autant l’u­ti­li­ser !

Rajou­ter au .htac­cess à la racine de votre site :

<IfMo­dule mod_expires.c>
Expi­re­sAc­tive On
Expi­res­De­fault “access plus 10 years”
Expi­res­By­Type text/css “access plus 10 years”
Expi­res­By­Type text/js “access plus 10 years”
Expi­res­By­Type text/javascript “access plus 10 years”
Expi­res­By­Type application/javascript “access plus 10 years”
Expi­res­By­Type appli­ca­tion/x‑­sho­ck­wave-flash “access plus 10 years”
Expi­res­By­Type image/png “access plus 10 years”
Expi­res­By­Type image/gif “access plus 10 years”
Expi­res­By­Type image/jpg “access plus 10 years”
Expi­res­By­Type image/jpeg “access plus 10 years”
Expi­res­By­Type image/x‑icon “access plus 10 years”
Expi­res­By­Type text/html “access plus 1 seconds”
Expi­res­By­Type application/xhtml+xml “access plus 1 seconds”
</IfModule>

Ain­si, à chaque char­ge­ment de page, tout ne sera pas reté­lé­char­gé, c’est du gain de temps de gagné !

5. A propos des jpg

Com­pres­sez vos images en qua­li­té 80%, opti­mi­sez-les et faites des jpg pro­gres­sive ! L’i­mage s’af­fi­che­ra avant qu’elle soit ter­mi­née d’être télé­char­gée, c’est beau­coup plus propre pour la mise en page et donne une impres­sion de rapi­di­té.

Pour ce faire, voi­là par exemple sous GIMP com­ment pro­cé­der, à l’en­re­gis­tre­ment d’un jpg :

 

Conclusion

Ain­si, avec ces quelques mani­pu­la­tions simples à mettre en place, j’ai pu obte­nir un score de 93% :

 

Le score aug­men­te­rait encore un peu (94%) sans les vidéos You­tube sur la home, où leurs minia­tures ne sont pas en jpg pro­gres­sive. Autre­ment dit, j’ob­tiens un score simi­laire voire supé­rieur que Kor­ben qui uti­lise un ser­vice de cache pro­fes­sion­nel…

Opti­mi­ser votre site web, outre la fier­té d’a­voir un site rapide, per­met éga­le­ment d’al­lé­ger votre ser­veur, sur­tout si vous êtes sur un mutua­li­sé sans grandes res­sources.