<<Back/Retour

Optimisation de site web - Bourges Jazz Festival

Le 30 janvier 2020
450 visiteurs

J’ai ralis le mini-site du BourgesJazzFestival (http://www.bourgesjazzfestival.org/) et j’explique ici les choix techniques :

Choix du format

Le site est compos d’une seule et mme page (one page site) car les informations transmettre sont excessivement concises de prime abord.

Choix de la techno

Le site est dvelopp en pure HTML CCS et javascript, car il n’y a pas d’interaction avec une base de donnes ou autre systme externe.
Cela permet de soulager l’empreinte carbone de ce site par une diminution des couches utiles (pas de serveur d’application ou de serveur de base de donnes).
Cela limite aussi grandement les risques de piratage un problme hbergeur.
J’ai choisi de me baser sur un gabarit HTML5Up pour sa simplicit et ses possibilits.
J’ai donc inclus les lments dans la page, modifi les images, adapt le CSS.

Choix de l’optimisation

Les diffrents lments ont t choisis afin d’assurer une page se chargeant rapidement, avec tout de mme 321ko. Les contraintes graphiques et visuelles incluses dans le gabarit HTML utilis imposent du javascript, qui a tendance augmenter la taille des pages.
Chaque image a t pass au site tinyPNG, diminuant le poids global de celle-ci d’environ 65%.
Les feuilles de styles ont t expurges d’un maximum de dclarations inutiles (car les feuilles de style initiales prvoient des pages complmentaires et donc des styles diffrents).
Je n’ai volontairement pas compress le HTML ni le CSS pour des soucis de maintenance facilite.
Un plan d’accs devait tre inclus dans la page, ce qui en insrant un iframe ajoutait environ 500ko de donnes). J’ai donc fait le choix d’inclure une image du plan, cliquable pour atteindre la carte interactive (uMap).

Choix de la compatibilit

Le site a t dvelopp avec firefox, puis test sur Internet Explorer et Edge, puis sur smartphone.
Le ct responsive des pages a t test en redimensionnant les diffrentes fentres.
La validation des codes HTML et CSS a t vrifie grce aux validateurs du W3C (Nu et jigsaw).
L’aspect accessibilit a t teste sommairement par le site aChecker.

Choix du rfrencement

Bien que peu usit par les grands moteurs de recherche, l’inclusion d’une balise meta keywords a t faite.
Une balise mta description a t insre.
Le titre de la page a t pens.
L’utilisation smantique des balises (H1, H2 notamment) a t respecte.

<<Back/Retour