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
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 Je m'explique prenez le cas de cette image :
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
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 là.
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 .
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é .
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.
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
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.