Tag Archives: optimisation

Utiliser HTML5 boilerplate pour optimiser son site

28 Juil

Vous avez récemment découvert HTML5 boilerplate mais malheureusement, votre site tourne en production et vous ne pouvez pas le modifier de manière profonde pour le rendre en HTML5 ?

Pas de soucis, vous pouvez très bien utiliser HTML5 boilerplate pour optimiser les performances de votre site web !

En effet, il faut savoir que Google tient compte du temps d’affichage de vos pages web pour vous placer dans ses résultats de recherche. Plus votre site s’affiche rapidement et mieux il est considéré par Google.

Il est donc intéressant d’avoir quelques pistes à exploiter pour tirer profit d’une parties des bonnes pratiques suggérées dans boilerplate.

Optimiser son .htaccess

Les gains les plus flagrants que vous pourrez obtenir (outre l’optimisation de votre code exécuté côté serveur, sujet que je n’aborderai pas ici), se situent dans le fichier .htaccess de votre site.

C’est en effet lui qui va pouvoir éduquer votre serveur apache pour renvoyer des pages et fichiers optimisés ou simplement dire au navigateur de piocher dans son cache pour reprendre des fichiers qu’il a déjà !

Avant d’aller plus loin, vérifiez que les modules suivants sont actifs dans votre configuration d’apache : mod_headers, filter_module, mod_expires, mod_setenvif et mod_deflate.

Une fois prêt, suivez le guide !

Associez les fichiers à des MIME types standards afin de mieux les gérer via le .htaccess :

# ———————————————————————-
# Proper MIME type for all files
# ———————————————————————-
# Audio
AddType audio/ogg oga ogg
AddType audio/mp4 m4a
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
# Proper svg serving. Required for svg webfonts on iPad
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
# Webfonts
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff
# Assorted types
AddType image/x-icon ico
AddType image/webp webp
AddType text/cache-manifest appcache manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall xpi
AddType application/octet-stream safariextz
AddType text/x-vcard vcf

Ensuite, activez la compression des fichiers compressibles :

# ———————————————————————-
# Gzip compression
# ———————————————————————-
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding « gzip,deflate » env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare COMPRESS
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
  FilterChain COMPRESS
  FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Activez l’expiration du cache dans un futur lointain. Les ETags sont aussi désactivés dans ce bout de code car cette technique (pas très efficace) n’est plus nécessaire pour gérer le cache des fichiers.

Faites attention : Activer cette expiration dans le futur peut entraîner des problèmes inattendus du côté de vos visiteurs. En effet, puisque le cache des fichiers de votre site aura une durée de vie plus longue que prévu, si vous faites des modifications de CSS ou d’images, vos visiteurs ne verront pas les changements directement, à moins d’ajouter un argument du style ?v=2011.07.28, qui sera mis à jour avec la date courante à chaque modification de vos fichiers.

# ———————————————————————-
# Expires headers (for better cache control)
# ———————————————————————-
# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
# <script src= »application.js?20100608″>
# Additionally, consider that outdated proxies may miscache
# If you don’t use filenames to version, lower the CSS and JS to something like
# « access plus 1 week » or so.
<IfModule mod_expires.c>
  ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault « access plus 1 month »
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest « access plus 0 seconds »
# Your document html
  ExpiresByType text/html « access plus 0 seconds »
# Data
  ExpiresByType text/xml « access plus 0 seconds »
  ExpiresByType application/xml « access plus 0 seconds »
  ExpiresByType application/json « access plus 0 seconds »
# Feed
  ExpiresByType application/rss+xml « access plus 1 hour »
  ExpiresByType application/atom+xml « access plus 1 hour »
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon « access plus 1 week »
# Media: images, video, audio
  ExpiresByType image/gif « access plus 1 month »
  ExpiresByType image/png « access plus 1 month »
  ExpiresByType image/jpg « access plus 1 month »
  ExpiresByType image/jpeg « access plus 1 month »
  ExpiresByType video/ogg « access plus 1 month »
  ExpiresByType audio/ogg « access plus 1 month »
  ExpiresByType video/mp4 « access plus 1 month »
  ExpiresByType video/webm « access plus 1 month »
# HTC files (css3pie)
  ExpiresByType text/x-component « access plus 1 month »
# Webfonts
  ExpiresByType font/truetype « access plus 1 month »
  ExpiresByType font/opentype « access plus 1 month »
  ExpiresByType application/x-font-woff « access plus 1 month »
  ExpiresByType image/svg+xml « access plus 1 month »
  ExpiresByType application/vnd.ms-fontobject « access plus 1 month »
# CSS and JavaScript
  ExpiresByType text/css « access plus 1 year »
  ExpiresByType application/javascript « access plus 1 year »
  ExpiresByType text/javascript « access plus 1 year »
  <IfModule mod_headers.c>
    Header append Cache-Control « public »
  </IfModule>
</IfModule>
# ———————————————————————-
# ETag removal
# ———————————————————————-
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for
# static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

Voila, c’est à peut près tout, avec ces paramètres, votre site gagnera en réactivité et sera aimé de vos visiteurs et de Google !

N’hésitez pas à explorer et tester des techniques données dans HTML5 boilerplate pour en apprendre encore plus !

Publicités