Aller au contenu
Invision Board France

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


Retour utilisateur

Commentaires recommandés



Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Ajouter un commentaire…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement

×
×
  • Créer...

Information importante

En utilisant ce site, vous êtes d’accords avec nos Conditions d’utilisation. Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookies, sinon nous supposerons que vous êtes d’accord pour continuer.