Optimiser un site sur les pages perso de Free

Les Pages Perso Chez Free

Par Al, le , dans Éviter les problèmes. / Dernière modification : le par Al.
Tags : PHP, Apache, MySQL, PostgreSQL, Tutoriaux

Quelques trucs et astuces pour optimiser un site sur les pages perso de Free.

Généralités

Bien que les connexions Internet haut débit se généralisent rapidement, une grande partie des visiteurs des sites Web utilisent des connexions dont la bande passante est limitée (blocage FAI, terminaux mobiles et tablettes, zones rurales…). Il est essentiel de concevoir des sites Web légers, se chargeant rapidement sur tous les terminaux et ne surchargeant les pas les serveurs de Free. Ces modifications sont relativement simples à mettre en place pour la majorité d’entre-elles.

Il est utile de :

  • Vérifier que le code (X)HTML, CSS, XML, XSL est valide ;
  • Des scripts PHP et Javascripts dont le code est optimisé, « débuggé » et répondant aux critères d'interopérabilité ;
  • Mettre les résultats des requetes PHP/MySQL en cache de fichiers statiques ;
  • Utiliser le doctype HTML5 pour les documents servis au format text/html ;
  • Préciser le charset des ressources textuelles dans les en-têtes HTTP ;
  • Compresser, minifier et concaténer les ressources textuelles externes (CSS, Javascript), conserver les copies de travail sur votre machine) ;
  • Ne pas utiliser de frame/iframe (utiliser des inclusions par SSI ou PHP) ;
  • Proposer, sur les sites en production, des ressources textuelles débarrassées du code « inutile » (commentaires, indentation, etc. Conservez les copies de travail sur votre machine) ;
  • Inclure le code Javascript et CSS dans des fichiers externes, appelés depuis le <head> de vos pages HTML ou inclus directement dans le <head>, si il est peu volumineux ;
  • Présenter les formules et équations mathématiques dans le format MathML, lisible nativement par presque tous les navigateurs ;
  • Placer un fichier favicon.ico à la racine de votre compte (de moins de 2 Ko), même si ce fichier est vide ;
  • Optimiser les fichiers images inclus dans les pages Web et en préciser les dimensions (vous pouvez toujours proposer des liens vers les fichiers en haute définition en consultation ou téléchargement) ;
  • Ne pas utiliser de formats de fichiers dépréciés (.bmp…) si cela vous est possible ;
  • Utiliser les data URI encodés en base64 ou les fichiers MHTML pour les fichiers images à bon escient ;
  • Limiter le nombre de requêtes par page (il est parfois nécessaire de réaliser des compromis entre design et rapidité de chargement).
  • Proposer les ressources en téléchargement dans des fichiers compressés (.zip, .7z, .tgz, .tbz…), si celles-ci le permettent et ne sont pas déjà optimisées (par exemple : fichiers PDF, PNG, JPG) ;
  • Optimiser régulièrement les tables de vos bases SQL afin d'en réduire les temps d'accès ;
  • Utiliser des index pour accèder plus rapidement aux informations enregistrées dans vos bases.

Respect des standards

Il est essentiel de présenter aux visiteurs des pages respectueuses des standards du « Web » si l'on souhaite améliorer la rapidité d'affichage des pages du site. En respectant les standards, les navigateurs n'ont pas besoin de perdre du temps à rechercher comment afficher une page non valide du mieux possible. Prêtez également une grande attention à la syntaxe de votre code html, car les balises ne sont pas que des « marqueurs » de code, elles ont également un « sens » (d'où le terme de « syntaxe » HTML).

Il s'agit de l'une des optimisations les plus simples à réaliser.

Liens utiles

Bien utiliser les caches

Bien que le serveur Apache de Free ne permette pas de modifier les header HTTP pour ajouter des directives propres comme, par exemple, Cache-Control, certaines astuces peuvent améliorer sensiblement les performances d'affichage et de réponse du site internet. Il est notamment possible d'utiliser des balises meta name="http-equiv" content="<directive>" en remplacement des directives Header set du serveur Apache.

Liens utiles

La compression des pages web

Tout est expliqué sur une page de ce site. Elle présente les procédures pour compresser les ressources statiques et les ressources générées dynamiquement (grâce à GZip et PHP).

Liens utiles

Les jeux de caractères (charset)

Généralement, les ressources HTML, XML et CSS indiquent leur codage de caractère dans la ressource elle-même. Il est donc important de placer la balise meta name="Content-Type" content="text/html; charset=<charset>" juste après la balise <head> des documents html ; @charset "<charset>"; dans les feuilles de styles CSS ou <?xml version="1.0" encoding="<charset>"?> au début des documents xml. Cette méthode à l'immense avantage de permettre de connaître le codage des documents, même sans serveur HTTP (c'est-à-dire depuis un disque dur, une clef USB, etc.). Elle peut cependant être améliorée pour accélérer le rendu de la page dans le navigateur en précisant le codage du document reçu directement dans les en-têtes HTTP. Cette accélération du rendu sera particulièrement sensible dans le cas de site présentant un très grand nombre de feuilles de styles CSS et de scripts javascripts.

La méthode la plus rapide et la plus simple est d'utiliser la directive AddDefaultCharset <charset> dans votre fichier .htaccess. Cette directive ajoutera automatiquement à l'en-tête Content-Type, pour l'ensemble des extensions de ressources textes « communes » (.html, .txt, .css, .js…), le charset correspondant (par exemple Content-Type: application/x-javascript; charset=iso-8859-15).

Si vous utilisez la compression de ressources statiques par GZip (ou des extensions non « communes », il faudra obligatoirement passer par la directive AddCharset <charset> .<extension associée> qui permet de définir un charset spécifique pour un type de fichier (par exemple AddCharset iso-8859-15 .xml).

Dans le cas de scripts PHP, il est tout à fait possible de passer par la directive AddCharset associée à l'extension idoine ou alors de préciser le charset directement dans le code PHP via <?php header('Content-Type: <content-type>; <charset>'); ?>.

Il s'agit de l'une des optimisations les plus simples et rapides a mettre en œuvre, mais aussi une de celles qui donnent le plus de résultats.

Liens utiles

Les langues et les sites multilingues

Considérations préliminaires

Il est possible de préciser, si on le souhaite, la langue des fichiers pour accélérer la sélection automatique de la meilleure langue pour répondre à la requête des visiteurs.

La quasi totalité des schémas de documents utilisées sur le web permettent de préciser, dans le document – ou la structure de celui-ci –, la langue du contenu. Cependant, préciser les langues directement dans la réponse HTTP de la ressource offre certains avantages : sélection de l'audience du site, délivrance des ressources correspondantes aux langues lues par les visiteurs automatiquement (sans passer par des scripts PHP), etc. Elles peuvent poser cependant quelques problèmes si l'association des ressources et des langues n'est pas réalisée correctement car les visiteurs pourraient ne pas pouvoir accéder correctement au site internet visité. En effet, toute requête provenant d'un client demandant une langue autre que celle(s) spécifiée(s) ne recevra pas le code HTTP/1.1 200 OK (correspondant à une ressources automatiquement choisie par le serveur), mais le code HTTP/1.1 406 Not acceptable accompagnée d'une page listant l'ensemble des ressources correspondantes pour l'URI demandée (langage, compression et encodage). L'utilisateur devra alors choisir manuellement entre celles-ci. Si ceci n'est pas très problématique pour les pages web (car elles sont affichées dans le navigateur, il est impossible de réaliser ce choix pour les feuilles de styles css ou les fichiers javascripts (car le serveur Apache de Free ne supporte pas la directive ForceLanguagePriority Fallback, qui n'est pas autorisée). Il faut donc proscrire l'utilisation de la directive DefaultLanguage, sauf si le site est uniquement constitué de documents qui ne sont pas « inclus » dans la page côté client (uniquement des pages html, au sens large, avec le code CSS et javascript inclus dans la page).

Deux cas se présentent : les ressources dynamiques et les ressources statiques.

Les ressources dynamiques (scripts PHP)

Il est très facile de préciser la langue d'un fichier PHP. Pour cela, il faut simplement ajouter dans la première ligne du fichier la ligne <?php header('Content-Language: <code langue>'); ?>. Il est également possible de préciser, via les directives du serveur Apache, la langue d'un fichier PHP (cf. ci-après).

Les ressources statiques

Les ressources statiques peuvent très facilement être associées à des langues spécifiques.

Toutefois, il faut limiter cette association aux seuls documents html, xml ou txt (et javascript selon les cas). Il ne sert en effet à rien de proposer des feuilles de styles CSS en anglais ou français car ce langage de programmation est « multilingue ».

Quelques cas particuliers :

Les fichiers javascript et CSS. Ceux-ci ne doivent généralement pas être associés à une langue spécifique, sauf si ils présentent des inclusions de textes dans telle ou telle langue.

Les fichiers textes. Ceux-ci ne doivent généralement pas être associés à une langue spécifique, sauf si ils présentent des inclusions de textes dans telle ou telle langue. Certains fichiers textes ne doivent en aucun cas être associés à une langue (fichiers robots.txt ou crossdomain.xml par exemple).

Les fichiers XML. Ceux-ci ne doivent généralement pas être associés à une langue spécifique, sauf si ils présentent des inclusions de textes à afficher dans telle ou telle langue. Les fichiers de plan de site (sitemap.xml) ne sont généralement associés à aucune langue. Ils peuvent cependant être associés à des langues spécifique dans le cadre de site multilingues, afin de permettre l'indexation en fonction de la langue, lors de la recherche sur un site de moteur de recherche.

Afin d'associer une langue à un type de ressource via Apache, il est possible d'utiliser plusieurs méthodes : AddLanguage, DefaultLanguage et LanguagePriority dans un fichier .htaccess.

Par exemple :

AddLanguage fr .fr.html
AddLanguage en .en.html
AddLanguage fr .fr.js
AddLanguage en .en.js
…
LanguagePriority fr en

Dans cet exemple, on spécifie que les pages HTML et les fichiers javascripts sont rédigées en langue française ou anglaises (avec une préférence pour le français) ; comme précédemment, à adapter à vos besoins (en n'utilisant que ce qui vous est nécessaire).

Il est également possible de préciser la langue du document en incluant dans le nom du fichier, avant l'extention, le code langue correspondant : fichier.<code langue>.<code langue> (par exemple fichier.fr.htz et fichier.fr.html, pour une version française ; fichier.en.htz et fichier.en.html pour la version anglaise des mêmes documents). Dans ce cas, il n'est pas nécessaire de préciser de langue dans le fichier .htaccess, le serveur se chargeant de délivrer le contenu correspondant à la langue de la requête. Toutefois, si une(des) langue(s) est(sont) précisées par la directive LanguagePriority, celle(s)-ci sera(seront) considérée(s) comme la(les) langue(s) principale(s) du site.

Liens utiles

Utilisez de jolies URL

Souvent appelées pretty URL, clean URL, Semantic URL, user-friendly URL, SEO-friendly URL, la génération d'URL sans query string est utile sur les pages perso de Free. En effet, les serveurs de Free n'acceptent pas les Rewrite Rules et empêchent donc la redirection des URL avec query string depuis Apache. Utiliser de jolies URL vous permet de les rediriger facilement le cas échéant.

En outre, ces URL sont plus facilement mémorisables par les visiteurs de votre site.

Liens utiles

Optimisation côté serveur Apache

Apache est un logiciel serveur puissant, capable de réaliser un très grand nombre de tâches et d'actions. Vous n'avez sans doute pas besoin que l'ensemble de ces fonctionnalités soient actives. Ainsi, il ne sert à rien d'activer le parsing de fichier PHP si votre site est uniquement constitué de ressources statiques. De même, si vous n'utilisez pas les directives SSI, vous n'avez pas besoin que le serveur vérifie chaque fichier pour vérifier si elles sont présentes ou non avant de l'envoyer au client.

L'ensemble de ces gains est certes minime, et dépendra essentiellement de la charge imposées par vous-même et vos colocataires sur l'ensemble des ressources du serveur. Il faut notamment prêter attention aux directives Options.

Liens utiles

Passage à PHP 5.1.3

Pour accélérer sensiblement la vitesse de génération de vos pages dynamiques, il est possible d'utiliser PHP 5.1.3 en plaçant, dans un fichier .htaccess situé à la racine de votre site, la ligne php 1.

Un fichier favicon.ico à la racine de votre compte

Quand le navigateur va parcourir votre page HTML, il doit normalement rencontrer, dans votre <head>, une ligne de code similaire à :

<link rel="icon" type="image/ico" href="/favicon.ico"/>

Ce code indique au navigateur l’emplacement de votre fichier favicon (ce fichier peut-être au format ICO, JPG ou PNG). Or, si vous n’indiquez rien, le navigateur est configuré pour réaliser une requête sur le fichier favicon.ico, à la racine de votre site. Si il est présent, pas de problème. Par contre, si le fichier n’existe pas, alors votre navigateur va aboutir sur le fichier favicon.ico de Free, qui pèse plusieurs kilooctets et ne peut pas être mise en cache par le navigateur.

Cet oubli amène donc une contre performance importante car le fichier favicon.ico de Free sera téléchargé à chaque requête sur une page Web de votre site, cela ralentira l'affichage de votre site et augmentera la charge des serveurs de Free.

Liens utiles

Utilisation de CDN

Il est possible d'accélérer le chargement de vos pages ou le téléchargement de vos fichiers statiques (archives ZIP, fichiers PDF, vidéos, etc.) en utilisant un CDN (Content Delivery Network).

La majorité des CDN nécessitent la modification des entrées DNS de vos sites Web pour transmettre le contenu de votre site de manière transparente. Une telle modification n'est pas possible sur les pages perso, mais il vous est possible de bénéficier tout de même des avantages d'un CDN via les services de CoralCDN (CDN « traditionnel » reposant sur 300 à 400 serveurs P2P), CDNjs (sans doute le plus rapide et le plus complet des CDN gratuits), SwarmCDN (un nouveau CDN P2P basé sur les technologies WebRTC : le cache des navigateurs de vos visiteurs devient votre CDN. De nombreux plugins ou modifications sont présentées sur le net pour les principaux CMS sont disponibles), Google Hosted Libraries (un CDN « traditionnel » offrant les librairies javascripts les plus courantes) ou jsDelivr (un CDN « traditionnel » offrant les ressources les plus fréquemment utilisées par les webmasters et les développeurs.

De nombreux plugins pour les principaux CMS sont disponibles). Il suffit pour cela de modifier le code des pages de votre site en conséquence.

Ainsi, pour charger l'image de l'organisation d'une « grappe » de serveurs, par exemple, à travers le CDN de CoralCDN, il suffit de préciser dans le fichier CSS l'URL de l'image sur le site, en ajoutant l'extension .nyud.net à notre nom de domaine :

http://les.pages.perso.chez.free.fr.nyud.net/public/orga-hebergement-pp-free.svgz

Attention cependant, il existe certaines restrictions (bande passante, taille des fichiers, etc.). Si ces limitations sont atteintes, les fichiers sont alors servis directement depuis votre site.

De même, pour charger la librairie Javascript JQuery dans une page Web, par exemple, à travers le CDN de CDNjs, il suffit de préciser dans le fichier de la page Web correspondante (de préférence avant la balise </body>) :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Certains fournisseurs d'accès ou réseaux d'entreprises peuvent bloquer ces CDN (les ressources proposées via ces services ne seront pas accessibles à vos utilisateurs si tel est le cas).

Liens utiles

Liens et ressources utiles pour l'optimisation