Tag Archives: tutoriel

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 !

Html5 boilerplate : La boîte à outil du bon intégrateur

29 Juin

Pour bien se lancer dans le HTML5, il est important de disposer des bons outils dès le départ !

Html5 boilerplate logoHtml5 boilerplate fait partie de ces bijoux qu’on est bien content d’avoir dans ses favoris.

Ce projet met à votre disposition une architecture de base (Html5, CSS, htaccess, outils de compilation, etc…) vous permettant de disposer très vite d’un site valide, et regroupant toute une série de best practices connues sur le web.

Trois versions sont disponibles :

  • Stripped – Version sans commentaire ni aide
  • Documented – Version commentée avec des astuces
  • Custom – Version personnalisée en fonction de vos besoins (type de serveur, librairie javascript à utiliser, etc…)

Je vous conseille dans un premier temps la version Documented qui vous permettra de vous faire la main dessus, de l’adapter à vos besoins et d’enlever le superflu.

Tour du propriétaire

Une fois l’archive téléchargée et décompressée, vous pouvez commencer.

Le fichier index.html contient une structure de base pour votre code, il vous reste à placer votre markup, en oubliant pas la sémantique des nouvelles balises introduites en Html5 !

Un fichier CSS se charge d’appliquer des styles identiques sur chaque navigateur sans affecter le comportement des autres balises (à l’inverse d’un CSS reset).

Un fichier .htaccess est présent pour vous servir de base de réflexion, et savoir comment optimiser chaque requête effectuée sur le serveur.

Plusieurs astuces se trouvent dans le fichier html, le css et dans le .htaccess, ces astuces permettent de combler des manquements de certaines navigateurs et assurent une compatibilité maximale avec ceux-ci.

Un build script est fourni, il permet de compresser automatiquement les images, css et html. Je n’ai malheureusement pas encore eu l’occasion de tester ce script mais je le ferai dès que possible et rédigerai un article à ce sujet tellement il est intéressant pour accélérer l’affichage de votre site !

Une fois votre template html terminé, n’oubliez pas de le valider au W3C !

Conclusion

Html5 boilerplate est la référence si vous voulez débuter un site en Html5 dès maintenant sans vous heurter à différents problèmes de compatibilité.

La base des utilisateurs grandit de jour en jour et les mainteneur du dépôt Github sont très actifs et très ouverts, le projet évolue donc dans le bon sens.

En revanche, l’entièreté des scripts n’est pas facile à appréhender pour un débutant voire même un utilisateur confirmé. Le build script est très puissant mais encore trop jeune et pas toujours facile à adapter à un projet déjà existant…