Jump to content
Invision Board France
Sign in to follow this  

Comment améliorer la rapidité de son site ? (optimiser)


Onerrac
  • La rapidité d'un site est très importante car une page qui met du temps à charger fait fuir l'internaute. Dans ce cas que faire pour empêcher cette tragédie gloups.gif ? C'est simple, optimiser son site afin de le rendre plus fluide ! Commençons...

     

    La première chose à faire est d'effectuer un scan du site afin de voir là où le bât blesse, pour cela je vous conseil le site Gtmetrix.

    Prenons le cas hum disons de http://www.invisionboard.fr/ wink.png

    Que voyons nous au résultat du scan ?

Specify image dimensions :

 

Aille le site est à zéro, c'est une erreur effectuée souvent et qui pourtant prend 10 secondes ! Que faut-il faire ? C'est simple indiquer la dimension des images. Quand nous tapons l'adresse du site celui-ci charge la page d'accueil et lorsque cette information n'est pas précisée il doit effectuer des demandes supplémentaires pour connaître la taille des images. Donc n'oubliez pas d'indiquer width="X" height="X" avant src ou dans votre CSS wink.png

 

 

Combine images using CSS sprites :

 

Aille à nouveau à 0 ! Là ça devient un tout petit peu plus compliqué mais c'est entièrement faisable.

Première chose à faire est de remplacer toutes les petites images (y compris les remplacements du thème) et de les convertir en code (base64) qui intégrera directement le code source.

Et non je ne suis pas fou humhum.png Je m'explique prenez le cas de cette image :

 

coins.png

 

donc son code est :

<img width="32px" height="32px" src="http://www.invisionboard.fr/forums/ccs_files/icons/coins.png" />

en langage base64 le code sera :

<img width="32px" height="32px" src="data:image/png;base64,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" />

Je sais hein.gif

 

Décortiquons ce code :

 

data:image/png;base64, = Ce code est à placer au début de chaque image base64, remplacer le rouge par l'extension de votre image (gif, jpg,...). Le reste est le code de l'image même, pour l'obtenir il suffit d'utiliser un convertisseur comme celui .

 

Mais quel est l'avantage de cette technique ? Et bien c'est simple, les images ça met du temps à charger (encore des demandes serveur) alors que quand elles sont sous forme de code et bien elles chargent en même temps que la page fou.gif.

 

L'idée aussi des sprites images est de limiter le nombre d'images, prenons exemple d'un système d'image qui change au survol de la souris via un mouseover.

Qu'est ce qui se passe dans ce cas là, le serveur charge la première image et au survol de la souris, il charge la deuxième.

 

Alors qu'avec le système de sprites image, vous créez une image (ou utilisez un générateur) avec en haut la première partie (celle qui est tout le temps là) et en bas la deuxième partie (celle qui apparait au survol). Le truc c'est que vous cacherez la partie du bas et au survol vous décalerez l'image afin de faire apparaitre juste la partie du bas en cachant celle du haut. Voici comme exemple mon logo, sur l'img j'ai mis class="LOGOS" et dans le css :

#LOGOS{background:url("/LOGOS.png") 0 0 no-repeat; width: 429px; height: 118px; }/* on décale l'image de fond de la hauteur du lien, soit 168 px */#LOGOS:hover,#LOGOS:active,#LOGOS:focus{ background-position:0 -168px; width: 429px; height: 118px; }

Quel est l'avantage de ce système ? Le serveur n'a qu'une image à charger !

 

 

Leverage browser caching :

 

C'est pas zéro mais c'est pas terrible. Ceci précisera au serveur combien de temps les éléments du site doivent rester en cache et qui dit en cache dit ne plus devoir être chargé donc gain de rapidité bien.gif.

 

Nous allons procéder via .htaccess, ouvrez celui-ci et ajoutez y :

<IfModule mod_expires.c>ExpiresActive OnExpiresDefault "access plus 7200 seconds"ExpiresByType image/jpg "access plus 1 week"ExpiresByType image/jpeg "access plus 1 week"ExpiresByType image/png " access plus 1 week "ExpiresByType image/gif "access plus 1 week"ExpiresByType image/svg+xml "access plus 1 week "AddType image/x-icon .icoExpiresByType image/ico "access plus 1 week"ExpiresByType image/icon "access plus 1 week"ExpiresByType image/x-icon "access plus 1 week"ExpiresByType text/css "access plus 1 week"ExpiresByType text/javascript "access plus 1 week"ExpiresByType text/html "access plus 7200 seconds"ExpiresByType application/xhtml+xml "access plus 7200 seconds"ExpiresByType application/javascript "access plus 1 week"ExpiresByType application/x-javascript "access plus 1 week"ExpiresByType application/x-shockwave-flash "access plus 1 week"</IfModule>

Le temps entre guillemets est à modifier selon votre site et sa fréquence de mise à jour.

 

 

Defer parsing of JavaScript :

 

Là c'est plus délicat, il faut que vous preniez chaque part de votre code ayant <script> et y ajouter async ou defer donc <script async> ou <script defer>. Cela servira à expliquer au serveur qu'il peut continuer à charger la page même si le script n'est pas entièrement chargé. Vous pouvez également déplacer ces scripts afin de les placer le plus bas possible dans le code.

 

:excl: Il faut faire code par code et vérifier ensuite qu'il fonctionne toujours correctement car certains codes ne fonctionneront plus avec la modification ou à cause du déplacement :.

 

 

Optimize images :

 

C'est simple optimisez les images, personnellement j'ouvre l'image avec gimp et je la sauvegarde à 70% de sa qualité donc la qualité reste bonne mais l'image est beaucoup plus légère.

 

 

 

Voilà lorsque vous aurez déjà accomplis tout ça, vous devriez voir nettement la différence bien.gif

Sign in to follow this  


User Feedback

Recommended Comments

Merci beaucoup d’avoir pris le temps de rédiger cet article.

J’aime beaucoup l’exemple. ;)

 

Par contre j’ai changé la catégorie, car selon moi c’est un sujet technique.

Share this comment


Link to comment
Share on other sites


Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.