Quelques astuces pour accélérer le chargement de votre site (et faire des économies de bande passante)

Plus le temps passe et plus votre site consomme de bande passante ? Et oui, c’est le risque à prendre lorsque l’on devient populaire !

Voici donc quelques astuces pour réduire votre consommation de bande passante et, par le biais de quelques optimisations, accélérer la vitesse de votre site pour le confort de vos visiteurs.

L’optimisation fait partie d’un tout : images, code, feuilles de style, requêtes SQL… tout joue sur la navigation et la réactivité du site.

Refuser l’accès à certains moteurs de recherche

Certains moteurs de recherche sont très gourmands et ne vous apportent que des visiteurs furtifs : les moteurs d’images par exemple se font un malin plaisir d’indexer toutes vos images qui apparaîtront dans une page de résultats sans vraiment de contrepartie.

Vous pouvez les exclure de votre site à l’aide du fichier robots.txt avec:

User-agent: Googlebot-Image
Disallow: /Code language: HTTP (http)

Limiter la fréquence des visites de certains moteurs de recherche

MSN Bot est de loin le moteur de recherche le plus gourmand en bande passante : sur un mois, il avale plus de 2 Go de bande passante sur SkyMinds.net…

Pour freiner les ardeurs de l’affreux jojo, vous pouvez lui imposer un délai en secondes entre l’archivage de chaque page. Voici le code à placer dans votre fichier robots.txt :

User-agent: msnbot
Crawl-delay: 120Code language: HTTP (http)

Optimiser les feuilles de style

Il est également utile de compresser votre feuille de style CSS, étant donné qu’elle est appelée sur toutes vos pages.

Il existe plusieurs sites de compression mais pour obtenir une CSS compressée qui reste lisible, je vous conseille d’utiliser CSS Compressor par CSS Drive.

Assurez-vous que toutes vos feuilles de style sont appelées dans la partie HEAD de vos pages, cela permet à vos pages de s’afficher progressivement.

Sous WordPress, appelez vos feuilles de style dans vos plugins via wp_head. Une fonction CSS() contenant l’adresse d’une feuille de style est appelée comme ceci :

add_action('wp_head', 'CSS'));Code language: JavaScript (javascript)

Optimiser les javascripts

Il est recommandé de placer vos scripts JavaScript dans des fichiers externes, de manière à ce qu’ils soient gardés dans le cache de votre navigateur, comme les CSS.

Pour compresser votre code javascript, JS Minifier est un très bon outil. Mieux vaut placer vos fichiers JS à la fin de vos pages afin de ne pas en ralentir le chargement.

Sous WordPress, appelez vos fichiers JS dans vos plugins avec wp_footer. Une fonction JS() contenant l’adresse d’un script javascript est appelée comme ceci :

add_action('wp_footer', 'JS'));Code language: JavaScript (javascript)

Compresser les données au niveau du serveur avec mod_gzip

Si votre serveur Apache contient le mod_gzip, vous allez pouvoir compresser vos données au niveau du serveur avant de les envoyer au client.

Cela peut réduire la taille de vos fichiers de 20% à 50% selon le type de fichiers.

Voici un petit exemple de ce qui tourne sur SkyMinds.Net – le code est à placer dans votre fichier .htaccess :

#Activation du mod_gzip
mod_gzip_on Yes
mod_gzip_can_negotiate Yes

# Ajout d'un suffixe d'extension pour les fichiers précompressés
mod_gzip_static_suffix .gz
AddEncoding gzip .gz
mod_gzip_update_static No

# Status de mod_gzip
mod_gzip_command_version '/mod_gzip_status'

# Répertoire de travail pour les fichiers temporaires et le cache compression.
# Tailles en bytes.
mod_gzip_temp_dir /home/mjbiscay/tmpgzip
mod_gzip_keep_workfiles No
mod_gzip_minimum_file_size 500
mod_gzip_maximum_file_size 500000
mod_gzip_maximum_inmem_size 60000

# Version HTTP du client
# Valeurs : 1000 = HTTP/1.0, 1001 = HTTP/1.1
mod_gzip_min_http 1000

# Méthodes HTTP à prendre en charge
mod_gzip_handle_methods GET POST

# Mozilla/4.0[678] ne sait pas se servir de gzip convenablement. A exclure.
mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"

# Types de fichiers à compresser : HTML, JS, CSS, CGI 
# et listing des répertoires Apache
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.shtml$
mod_gzip_item_include file \.php$
mod_gzip_item_include mime ^text/html$
mod_gzip_item_include file \.txt$
mod_gzip_item_include mime ^text/plain$
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
mod_gzip_item_include mime ^text/css$
mod_gzip_item_include file \.pl$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^httpd/unix-directory$

# Les images sont déjà compressées, cela ne fait rien gagner.
mod_gzip_item_exclude mime ^image/

# Permet d'éliminer l'entête 'Transfer-encoding: chunked' et 
# de réunir tous les paquets en un seul morceau compressable.
mod_gzip_dechunk Yes

# Ajoute la taille des entêtes HTTP au document requis pour 
# connaître la taille totale de la requête.
mod_gzip_add_header_count Yes

# Envoie l'entête HTTP 'Vary' HTTP, utilisé pour les proxies. 
# Ne pas modifier !
mod_gzip_send_vary YesCode language: PHP (php)

Gérer le cache des éléments des pages avec mod_expires

Encore un autre module Apache qui pourra vous aider à ne pas servir au client des fichiers contenus dans le cache de son navigateur et qui n’ont pas été modifiés depuis leur dernier accès.

Le mod_expires permet de réduire les échanges HTTP d’environ 30%.

# Activation de mod_expires
ExpiresActive on

# Les documents suivants expireront 1 mois, 15 jours et 2h 
# après la date de leur dernier accès.
# Tous les autres types de documents expireront dans 2 ans.
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType text/plain "access plus 1 month 15 days 2 hours"
ExpiresByType text/javascript "access plus 1 month 15 days 2 hours"
ExpiresByType text/css "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "access plus 1 month 15 days 2 hours"
ExpiresByType image/jpeg "access plus 1 month 15 days 2 hours"
ExpiresByType image/png "access plus 1 month 15 days 2 hours"
ExpiresDefault "access plus 2 years"Code language: PHP (php)

Faites le ménage dans vos plugins WordPress

Si vous utilisez WordPress, sachez que quasiment chaque nouvelle version intégre un plugin déjà existant. Regardez donc si vous ne pouvez pas vous passer de quelques plugins lorsque vous effectuez votre mise à jour.

Vous pouvez également nettoyer le code de plugins existants : pourquoi intégrer du code CSS et AJAX sur toutes les pages du site alors que ce code n’est utilisé que sur une page contact par exemple ?

Exemple : ne pas inclure une fonction dans l’interface d’administration.

if( !is-admin() ) {
  add_filter('the_category', 'TechnoratiTags');
}Code language: JavaScript (javascript)

Exemple : n’appeler une fonction que sur une seule page ou article.

add_filter('wp_header', 'addHeaderCSS');
function addHeaderCSS() {
  if( is_single() || is_page() ) {
    /* code */
  }
}Code language: JavaScript (javascript)

Nettoyage du code

Surveillez vos logs afin de traquer toute erreur potentielle dans le chemin des fichiers ou plugins.

Passez en revue vos requêtes SQL afin de ne sélectionner que les champs dont vous avez besoin (i.e : plus de SELECT * FROM table systématiques !) afin de gagner en temps de calcul.

Sous FireFox, je vous recommande l’outil d’inspection du code (clic droit > Inspecter), véritable petit bijou pour contrôler votre code en complémentarité de l’extension Web Developer. Vous aurez toutes les cartes en main pour optimiser votre site.

Vous devriez gagner quelques (dizaines de) kilo-octets, qui se traduiront pour vous en une économie de bande passante et de vitesse d’affichage améliorée pour tous vos visiteurs. Tout le monde préfère un site rapide !

Articles conseillés :

• JavaScript : afficher du contenu dans un bloc DIV après un délai défini
• De l’importance du cahier des charges du développement web
• Se désabonner des listes syndicales de l’Éducation Nationale
• Ajouter des notes de bas de page élégantes et sémantiques
• Vanilla JS : identifier l’élément plus large que le viewport
• jQuery : comment ajouter !important à une propriété CSS