Optimiser le poids de son site web (CSS séparée,include PHP)

Il existe de multiples techniques pour réduire le poids de ses pages web. Les plus fondamentales passent par l'optimisation du code HTML (supprimer les balises et scripts inutiles) et par l'optimisation des images et illustrations (choix du format, compression).

Nous supposerons dans cet article que ces deux premières étapes ont été correctement réalisées et nous allons nous pencher sur deux autres méthodes qui peuvent avoir un effet très bénéfique sur la lourdeur de votre site web : les Feuilles de Style séparées et l'instruction Include.


La feuille de style CSS

La feuille de style CSS est un outil du web qui devient indispensable si l'on veut donner une présentation de qualité à un site. Elle fait partie des recommandations du W3C qui édite les standards de l'internet.

La feuille de style est de plus en plus couramment employée car son utilité et ses avantages sont considérables : elle permet principalement de dissocier le contenu et la présentation des pages, ce qui les rend compatibles entre les navigateurs, mais aussi accessibles aux handicaps, aux ordinateurs portables, au WAP, ...

Les exemple les plus courants d'utilisation de feuilles de style sont la modification des couleurs des liens survolés, le placement des textes, le changement des polices et des espacements, l'interaction sur la taille et les formes des bordures, ...

Nous n'allons pas apprendre ici à utiliser une feuille de style (vous trouverez à ce sujet des tutoriels sur https://forufr.jeun.fr), mais nous allons plutôt étudier son intérêt pour l'optimisation de votre site web.

Les feuilles de style peuvent êtres écrites directement dans le code html de chaque page, mais aussi dans une feuille séparée, un fichier externe (.css)

Cette seconde solution est de loin la plus avantageuse, car elle présentes trois atouts indéniables :

* Le code HTML de chaque page est très allégé
* Le fichier CSS inclus est placé dans le cache dès la page d'index et cela accélère l'affichage des pages suivantes
* la mise à jour future du site est simplifiée : il suffit de modifier un seul fichier pour changer le site dans son intégralité, quel que soit le nombre de pages.

Comment utiliser une feuille CSS séparée ?

* il faut commencer par écrire ses instructions sur une feuille que l'on peut nommer, par exemple "styles.css)
* cette feuille contiendra uniquement les instructions de style et ne doit pas contenir de balises HTML (notamment HEAD et BODY)
* vous appellerez le fichier à l'aide de ce lien placé dans le HEAD de chacune de vos pages :

Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Voilà, c'est aussi simple que cela !


L'instruction PHP INCLUDE

Conditions requises :

* Pas besoin de notions de programmation
* L'hébergeur doit accepter le langage PHP (l'include PHP ne marchera que si le fichier a une extension .php)
* La structure de votre site est identique à chaque page (exemple : une partie titre, un menu, un pied-de-page)

L'include PHP est un moyen très simple de simplifier considérablement le code des pages et en facilitant la mise à jour future du site.

Supposons que toutes les pages fonctionnent selon un principe proche de celui-ci :

* Une partie "titre" : elle contient votre haut de page (titre, logo, bannière de pub, menu horizontal,...)
* Une partie "menu" : c'est à cet endroit que se trouve votre menu vertical (texte, boutons, scripts dynamiques,...)
* Une partie Principale : le contenu différent de vos pages s'affiche ici
* Une partie "pied" : c'est votre pied de page (copyrights, partenaires, statistiques, ...)

Le principe du Include va être similaire à celui de la feuille de style séparée.

Nous créerons donc les fichiers "titre.htm", "menu.htm" et "pied.htm" : ils seront externes et vont être appelés dans chaque page du site.

Chaque page aura donc la même structure.

La syntaxe d'inclusion est simple : il s'agit d'un petit script PHP de quelques caractères à placer à l'endroit où l'on veut placer le fichier externe (ce fichier peut être au format htm, php, txt,...)

Attention cependant : les fichiers inclus ne doivent pas posséder de balises HEAD ou BODY car ils "appartiennent" au fichier parent et ces balises seraient redondantes et en conflit.

Les avantages de l'instruction Include sont identiques à la Feuille de style séparée, à savoir : un allègement des codes et une mise à jour rapide.

Source : www.alsacreations.com