27 mai 2014 | par Marc Akoley dans Pas de commentaire

Combien de fois avez-vous fermé la fenêtre de votre navigateur en tombant sur un site qui met très longtemps à charger son contenu? Si cela vous arrive, dites-vous que la même chose se passe pour l’internaute lambda qui visite vos pages. Cette situation est très dommageable surtout que votre site web est censé délivrer des informations sur votre entreprise et vous permettre de générer des mises en contact.

Le listing ci-dessous vous donne quelques astuces qui vous permettront d’optimiser la vitesse de chargement de votre site internet principalement sur un serveur Apache qui est le serveur HTTP le plus populaire du web et totalise 95 512 314 noms de domaines actifs en mai 2014 (1). Il existe bien entendu des astuces pour serveurs NGinx et IIS qui peuvent faire l’objet d’un prochain article.

1 – Autorisez la compression des ressources

Compression des ressources serveurs pour optimiser le chargement de son siteLa compression des fichiers au format gzip permet de réduire le temps de téléchargement des éléments d’affichage de votre site web. Pour cela, vous devez avoir le mod_deflate activé dans votre configuration serveur. Ce module est activé par défaut sur la plupart des serveurs mutualisés. Il vous suffit d’y faire appel via le code ci-dessous dans le .htaccess à la racine de votre site.

Note : Si vous avez un serveur qui tourne sous une version Apache inférieure à 1.3, seul le mod_gzip est disponible. La documentation officielle Apache vous donne plus d’indications sur le processus (2).

2 – Exploitez la mise en cache dans le navigateur

Activation du cache navigateurPour les internautes réguliers de votre site il est inutile de recharger en intégralité tous les fichiers surtout si ceux-ci n’ont pas changé entre temps. Les types de fichiers les moins modifiés sont : JS, CSS, images, PDF, XLS, DOC etc…. L’activation du cache navigateur permet de ne faire appel qu’aux fichiers modifiés comme les HTML.

Dans le .htaccess, ajoutez le code suivant :

Note: Vous pouvez bien sûr ajuster les délai d’expiration des fichiers en fonction du contenu de votre site. Les variables de temps disponibles sont years – months – weeks – days – hours – minutes – seconds.

3 – Minifier CSS et JS

Minification des ressources Javascript et CSSLa minification des fichiers CSS et JS permet de réduire la taille de ces fichiers et de rendre leur téléchargement plus rapide. Si vous en avez la possibilité, fusionnez vos fichiers CSS et vos fichiers JS (sans faire de mélange des genres bien entendu).
Vous réduirez ainsi le nombre de requêtes HTTP nécessaires pour les charger.

Quelques outils pour minifier vos fichiers :

CSS

JS

Bien entendu des éditeurs de texte comme Notepad++ et Sublime Text proposent des plugins de compression. Il en est de même pour les IDE comme Eclipse et Netbeans.

Note : En minifiant vos fichiers vous risquez de perdre la structure d’indentation, faites en des sauvegardes pour vos développement ultérieurs et mettez en ligne les versions minifiées.

4 – Compresser les images

Compression des images pour optimiser le chargement de son site webLe principe est le même que pour les fichiers CSS et JS : le but est de réduire au maximum le temps de chargement des images qui peut être très long pour les images les plus lourdes.

Pour l’optimisation des images, suivez les recommandations suivantes :

  • Utilisez des images à la bonne taille plutôt que de les redimensionner par HTML;
  • Au format .jpg, vous pouvez compresser entre 80 et 90%;
  • Au format .png, vous pouvez compresser à 8 ou 9;
  • Vous pouvez utiliser le nouveau format WebP qui n’est pour l’instant compatible qu’avec les navigateurs Chrome et Opera.

Attention toutefois à vérifier qu’il n’y a pas trop de bruits autour des images compressées surtout pour les écrans à forte densité type Retina.

Vous pouvez obtenir les bons ratios de compression en utilisant la fonctionnalité « exporter pour le web » de Gimp et Photoshop et pour vos images existantes, les logiciels gratuits Photophiltre ou XNView vous proposent des fonctionnalités de compression de masse.

5 – Réduire le nombre de requêtes http

Réduction des requetes HTTP pour optimiser la vitesse de chargement de son siteNous l’avons mentionné plus haut, réduire le nombre de requêtes peut aider votre site à charger ses pages plus rapidement. Donc en plus de fusionner vos scripts JS et vos feuilles de styles, supprimez les ETag avec le code suivants dans votre .htaccess :

6 – Testez votre site web

Avant de vous lancer dans des optimisations à tout va, étudiez les goulots d’étranglement de votre site. Qu’est-ce qui pose problème dans le chargement des images, le nombre de requêtes http, le poids des fichiers de script etc.

Pour le savoir, vous avez quelques outils qui vous indiquent des éléments d’optimisations comme PageSpeed Insight de Google ou YSlow de Yahoo que vous pouvez découvrir dans cet article sur les outils d’analyse du temps de chargement des sites. Cependant, leur utilisation ne vous exonère pas d’avoir une bonne connaissance de votre serveur pour pouvoir affiner vos réglages notamment au niveau du cache.

En bon développeur ou SEO, vous avez sûrement des petites astuces qui vous permettent d’optimiser les temps de chargement de vos sites ou encore d’augmenter la sécurité de votre fichier .htaccess, n’hésitez pas à partager en commentaire vos astuces pour complétez la liste ci-dessus.

Articles sur la même thématique

Partager :

Passionné de nouvelles technologies et de logiciels Open Source, je suis chargé de référencement et de développement mobile au sein de l’Agence Publika. Vous pouvez me suivre sur Twitter et LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *