Accéder au contenu principal

Le cache, un outil pour limiter l'utilisation des serveurs et de la bande passante

Il y a plusieurs types de caches mais il y a principalement deux catégories. Le cache navigateur qui va permettre d'optimiser le temps de chargement d'une page en stockant des données sur l'ordinateur du client et le cache serveur qui va permettre de générer du contenu statique sur le serveur et permettre de limiter le recours aux bases de données et de limiter la création de contenu à chaque demande de page.

Influencer le comportement du navigateur


Si votre serveur apache est installé avec le mod_expires, vous pouvez définir des délais d'expiration de votre contenu. C'est à dire le délai pendant lequel le navigateur peut conserver votre contenu. Il n'y a pas de formule magique et la configuration que vous devez choisir dépend grandement du contenu que vous fournissez. Cependant, en règle générale, on a tendance à dire que les images sont peu modifiées une fois en ligne.

Les directives s'écrivent comme suit dans le .htaccess par exemple :

ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

ou

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Vous trouverez plus d'information sur le site d'apache.
J'ai testé ça groupé à la minification des css et javascript sur une solution personalisé, le retour est suffisant pour un site ayant ce volume de visites. 

Stocker du contenu statique sur votre serveur dynamique


Penser sa logique de cache

En fonction des possibilités qu'offre votre serveur, votre framework ou votre CMS, votre logique de cache peut être différente. Elle dépend également de la portée du site et de son contenu. Je ne pense pas qu'il soit nécessaire d'avoir recours au cache pour un site dont l'audience est limitée pour des raisons de popularité. Par contre, si votre audience est large mais que vous peinez à vous positionner dans les moteurs de recherche à cause de la lenteur d'accès à vos pages, il est temps d'agir.
Une des première choses tout de même reste la compression du contenu javascript et css. Ensuite, si vous avez un blog, il peut être intéressant de cacher les pages en entier afin de limiter les recours à la base de données. Cela peut être fait simplement en générant les pages en html et en recréant le cache à chaque édition afin de garder des menus à jour.
Dans le cas d'une boutique ou si vous avez des participations d'utilisateur, la technique de cache devra inclure une notion de séparation des composants de la page. Vous pourrez par exemple cacher les menus, les textes qui ne peuvent être éditer par les utilisateurs lambda, la mise en page... Il n'est par contre pas judicieux de cacher le prix ou le stock dans le cas d'une boutique car ils sont fonction de plusieurs facteurs.

Utiliser les outils appropriés pour le stockage


En fonction du volume de visites et de votre infrastructure vous devrez choisir un stockage adéquat. Pour un site générant peu de visites, un stockage sous forme de fichier suffit, surtout si vous générez le cache de page entière. Dans le cas d'un site générant un nombre important de visites avec des appels à la base de données récurent, on préféra un système de gestion de base de données scalable qui permet des performances nettement meilleures que sur un système de fichiers. J'en ai fait l'expérience avec Magento et je peux affirmer que les temps de chargements sur deux sites à moyen et gros volumes s'en sont ressentis. L'utilisation de Redis a permis de délocaliser la charge serveur d'offrir des temps de réponse dignes des boutiques en question. Cela s'est très vite ressenti au niveau de l'indexation et enfin des ventes. Cela dit, il est nécessaire de choisir le CMS en fonction de ses besoins et de l'adapter au fur et à mesure.
Aujourd'hui, j'ai tenté l'expérience full page cache avec un wordpress sur un serveur mutualisé d'OVH, nous allons voir ce que ça donne. Pour info, le site est http://www.banques-assurances.fr/ et avant mise en cache, le robot de google mettait en moyenne 736 millisecondes pour accéder à une page.

Commentaires

Posts les plus consultés de ce blog

[PHP] Faire un petit MVC avec des routes

Pour bon nombre de petits projets, il n'est pas nécessaire de taper dans les frameworks MVC comme Zend ou Symphony qui sont très lourds et un petit truc maison doit suffire. Je vais essayer de donner quelques tuyaux pour pouvoir faire son MVC maison avec des routes qui dirigent vers les contrôleurs et les actions. Tout d'abord, il faut créer un fichier index.php à la racine de votre site qui va contenir le lien vers tout ce dont vous avez besoin pour faire vos routes. Ensuite, vous devez créer un dossier controlleur (si vous voulez reproduire la faute de frappe de l'exemple) dans lequel vous aurez tous vos contrôleurs. Vous pouvez éventuellement diviser ce dossier en plusieurs dossiers distincts qui contiendront les différentes parties de votre site. Veillez à appeler vos classes en rapport avec vos règles de is_callable. Dans mon exemple, le chemin vers le dossier est en minuscule et la première lettre du fichier est en majuscule. Par exemple : la classe /controlleur/fron

[jQuery-ui] Mettre en place plusieurs boutons coulissants

Ce blog est crée à cause du mal que j'ai eu autant de mal en anglais qu'en français à trouver les ressources me permettant de mettre en place des boutons coulissants qui interagissent entre eux et qui soient un peu customisés. Comme un exemple vaut souvent mieux que de longs discours, je voulais faire le simulateur de crédit disponible sur http://www.meilleur-credit.org/ . Pour cela, il fallait que le changement de montant ou de durée puisse influer sur la mensualité. J'ai eu recours pour me simplifier la vie à jQuery-UI (comme User Interface) qui permet d'avoir des boutons coulissants (appelés Sliders dans la langue de Shakespeare ou Seek bars pour l'interface android). La mise en place graphique La mise en place est assez simple pour avoir une apparence standard mais elle se complique un peu si on veut une apparence plus personnalisée. J'ai essayé de dire à mon graphiste que je m'en foutais mais vous savez, vous développeurs, comment ils son

Injecter des icônes font-awesome via JavaScript

Les icônes de font-awesome sont traduites en SVG ( Scalable Vector Graphics) à la volée grâce à un script. Le problème quand on injecte du HTML dans le DOM est que le script ne s'exécute pas correctement et l'icône n’apparaît pas. Pour palier à cela, il est possible d'utiliser un générateur de ressources qui est embarqué dans la librairie font-awesome. Pour éviter au script de s'exécuter sur des icônes qui se répètent, la librairie comprend un script qui permet de traduire une seule fois l'image en SVG pour être réutiliser dans des listes. Comme disent les anglo-saxons, et voilà ! Il y a d'autres exemples d'utilisation :  https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols