Analyse de qualité et performance web

Certaines ressources sont très lourdes

---

Les fichiers trop lourds sont à proscrire sur une page web. Assurez vous que tous les éléments du fichier sont nécessaires au chargement de la page. Vous pouvez mettre en oeuvre plusieurs types d'actions :

• 10 de ces fichiers utilisent le format PNG. Il est très certainement préférable de les exporter au format JPEG
• s'assurer que les images sont délivrées aux dimensions d'affichage utilisées sur votre site
• compresser la ressource
• fragmenter la ressource et la répartir sur plusieurs requêtes

Cette page contient 10 fichiers dont la taille est supérieure à 1Mo :

• history.c.yimg.jp//common/background[...]g/bg_pc_mid5.png (3,38Mo)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid3.png (3,23Mo)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid0.png (3,23Mo)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid1.png (3,16Mo)
• et 6 autres

Cette page charge 34,93 Mo de données, diminuez ce poids

---

Le poids de votre page est important, ce qui ralentit sa vitesse d’affichage, d’autant plus sur les connexions bas débit. Cela peut également générer de la frustration pour vos internautes qui sont limités par des forfaits data (voir whatdoesmysitecost.com).

Situer le poids de ma page web

En février 2016, le poids moyen des 100 pages les plus visitées dans le monde était de 1,38Mo.

Comment réduire le poids de ma page ?

Vous pouvez vous reporter à notre catégorie "Volume de données" pour voir quelles sont les optimisations possibles dans votre cas. De manière générale, les images sont souvent à pointer du doigt.

Veillez aussi à construire vos pages web de manière à charger d’abord ce qui est essentiel à l’internaute en priorité (optimisation du chemin critique de rendu).

Pour tout autre contenu (plugins de réseaux sociaux, publicités, contenus situés en bas de page...), il est préférable de différer le chargement (asynchrone, lazy-loading...), pour ne pas pénaliser les contenus prioritaires.

Nous vous conseillons par ailleurs fortement de définir des budgets de performance pour mener à bien vos projets web. Ces budgets sont paramétrables grâce à la fonctionnalité de monitoring de DareBoost.

Afin de vous aider à établir vos priorités d'optimisation, voici la répartition du poids de la page par type de ressources :

• Images : 97,76% du poids total
• JavaScript : 1,38% du poids total
• JSON : 0,59% du poids total
• Textes : 0,18% du poids total
• Polices de caractères : 0,04% du poids total
• CSS : 0,04% du poids total

Par ailleurs, voici les 10 ressources les plus lourdes qui sont téléchargées lors du chargement de votre page :

• history.c.yimg.jp//common/background[...]g/bg_pc_mid5.png (3547 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid3.png (3384 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid0.png (3383 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid1.png (3311 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid4.png (3120 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid2.png (2933 ko)
• history.c.yimg.jp//common/background[...]g/bg_pc_mid6.png (1602 ko)
• history.c.yimg.jp//common/animation/[...]t/animation4.png (1480 ko)
• history.c.yimg.jp//common/animation/[...]t/animation3.png (1172 ko)
• https://history.c.yimg.jp//common/mother/mi_body/mi2.png (1057 ko)

Le format PNG n'est pas le plus adapté pour 1 de vos images

---

Le choix d'un format adapté pour une image permet de réduire son poids.

Le format PNG

Le format d'images PNG est destiné aux images nécessitant la fonctionnalité de transparence, ou encore aux petites images, disposant de peu de détails et de couleurs.

Préférez le format JPEG...

Le principal défaut du format PNG est de ne pas supporter la perte de qualité. En effet, un format tel que JPEG propose de "dégrader" la qualité de l'image sans que cela ne soit perceptible par l'utilisateur. Vous pouvez ainsi diminuer la qualité de l'image d'environ 25% sans que vos utilisateur ne s'en rendent compte.

Une image avec un poids important sera donc sans doute mieux compressée en utilisant le format JPEG.

...ou PNG-8

Dans le cas ou votre image nécessite obligatoirement d'utiliser le mécanisme de transparence, non supporté par le format JPEG, vous devriez convertir votre image PNG "classique", en PNG-8. Ce format, basé sur une palette de 256 couleurs maximum permet de diminuer le poids de l'image sans altérer significativement sa qualité en général. Des outils tels pngquant ou encore tinypng vous aideront dans cette démarche.

Enfin, si la qualité proposée par le format PNG-8 n'est pas satisfaisante pour votre image, vous pouvez vous renseigner sur les techniques avancées possibles (EN) pour obtenir ce comportement sans délivrer une image au format PNG. Par exemple, il est possible de séparer votre image en 2 images JPEG, l'une contenant les données de transparences et l'autre contenant les données liées aux couleurs, et de regrouper l'image côté client à l'aide d'un élément CANVAS.

Pour en savoir plus, n'hésitez pas à consulter cet article sur la compression des images (EN).

Il semble que le format JPEG soit plus adapté pour les images suivantes :

• history.c.yimg.jp//common/background[...]g/bg_pc_mid6.png (2Mo)

Différez l'utilisation du code JavaScript

---

Lorsque le navigateur web rencontre du code JavaScript en interprétant le code source d’une page web, cela peut ralentir considérablement l’affichage de la page, surtout s’il est nécessaire de télécharger un script externe.

Différez au maximum l’utilisation du Javascript pour assurer un début rapide de l’affichage de la page.

Que faire ?

Utilisez si possible l'une des techniques suivantes pour des appels à des fichiers externes :

• utilisation de l'attribut async
• utilisation de l'attribut defer
• ajout du script dans le DOM en JavaScript, lors de l'évènement onload
• placer les scripts à la fin de votre code source (idéalement à la fin du <body>)

1005.1 Ko du code JavaScript sont analysés lors du chargement initial de la page. Différez l'analyse de ce code pour éviter de bloquer l'affichage de la page.

• s.yimg.jp/images/e[...]s.js (519.6 Ko)
• s.yimg.jp/images/e[...]p.js (442.3 Ko)
• staticxx.facebook.[...]n=42 (36.0 Ko de code JavaScript intégré)
• www.facebook.com/v[...]mall (6.2 Ko de code JavaScript intégré)
• internethistory.ya[...].jp/ (508 o de code JavaScript intégré)
• cdn.api.b.hatena.n[...]nter (444 o de code JavaScript intégré)

Définissez au moins des balises <h1> et <h2>

---

Il est recommandé de placer vos mots clés dans les balises de titres (h1 et h2 au minimum). Les moteurs de recherche utilisent les balises h1, h2 et h3 pour le référencement (SEO).
Aucune balise h1, h2 ou h3 n'a été détectée sur cette page.

Il manque une politique de sécurité sur la provenance de vos ressources

---

Il est primordial de restreindre la provenance des contenus d'une page en vous prémunissant d'attaques de type XSS (Cross-Site Scripting).

Les attaques XSS

Une attaque de type XSS (Cross-Site scripting) a pour objectif d'injecter un contenu sur la page.

Pour accroître votre protection contre ces attaques, mettez en place une politique de sécurité qui va expliciter au navigateur web les serveurs qui sont autorisés à délivrer des ressources pour former la page. Si le navigateur effectue une requête vers un serveur non autorisé, il doit en informer l'internaute.

La solution : configurer un en-tête HTTP "Content-Security-Policy" (CSP)

Pour spécifier une politique de sécurité sur la provenance de vos ressources, vous devez configurer votre serveur afin que la réponse de la ressource principale contienne l'en-tête HTTP "Content-Security-Policy".

Voici un exemple d'utilisation de cet en-tête :

Content-Security-Policy: script-src 'self' https://apis.google.com

Dans ce cas, la page se charge correctement à condition que tous les scripts proviennent de l'hôte courant ou de https://apis.google.com.

Le lien suivant vous aidera à en savoir plus sur cet en-tête HTTP. Vous serez alors ammené à utiliser les directives exposées sur ce lien.

Soyez vigilant, si l'en-tête est mal configuré, certains de vos contenus, scripts, ou encore styles pourront être bloqués, ce qui pourrait engendrer des effets de bords non souhaités. De plus, les restrictions s'appliquent à toutes les pages du site. Nous vous conseillons de tester les différentes pages de votre site avant de déployer l'instruction dans votre environnement de production.

Aucune CSP n'a été détectée sur cette page : elle est plus facilement exposée à des attaques de type XSS.

Un script peut être injecté de façon plus optimale

---

L'injection de scripts via l'instruction JavaScript document.write retarde l'affichage d'une partie au moins de votre page et/ou l’interactivité de votre page pour l'utilisateur.

Besoin d'injecter un script ?

document.write est parfois utilisé à tort pour injecter un script. Exemple :

document.write('<script src="' + src + '" type="text/javascript"><\/script>');

Comme indiqué sur cet article (EN), vous devriez plutôt envisager l'utilisation du pattern "createElement-insertBefore" :

var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

Sur cette page, un script est injecté via l'instruction document.write :

Scripts injectés par https://internethistory.yahoo.co.jp/ (inline 3)

• document.write("<scr"+"ipt language=javascript src=https://s.yimg.jp/bdv/yahoo/javascript/csc/20060824/lib2obf_b3.js>

Ajoutez l'attribut alt sur vos balises <img>

---

L'attribut alt est un critère important en terme de référencement (SEO). En effet, les robots d'indexation des moteurs de recherche ne peuvent pas analyser de contenu graphique. Il se servent alors de leur texte alternatif pour répondre aux requêtes des internautes. C'est par exemple le cas pour Google images.

<img src="produit.jpg" alt="Description de mon produit"/>

De plus, l'attribut alt s'avère utile dans d'autres cas:

• utilisation d'un lecteur d'écran (personnes malvoyantes)
• connexion trop lentes pour charger l'image
• affichage d'un contenu dans le cas d'une erreur dans l'attribut src

Vous avez 59 balises img, mais 10 d'entre elles ne définissent pas d'attribut alt :

• <img src="https://s.yimg.jp/images/evt/history/sp/img/loading/icon_loading.png">

• <img src="https://s.yimg.jp/images/evt/history/sp/img/information/txt_image_loading.png" class="text">

• <img class="title_about" src="https://s.yimg.jp/images/evt/history/pc/img/about/ttl_about.png">

• <img src="https://s.yimg.jp/images/evt/history/pc/img/about/mi_logo.png">

• <img src="https://s.yimg.jp/images/evt/history/bnr/680_100.png">

• <img src="https://s.yimg.jp/images/evt/history/pc/img/loading/loader.png">

• <img src="https://s.yimg.jp/images/evt/history/pc/img/loading/loading_text.png" class="text">

• <img src="#" id="main_image">

• <img src="https://s.yimg.jp/images/evt/history/pc/img/information/ttl_nextprev.png">

• <img src="https://s.yimg.jp/images/evt/history/common/img/year/2016.png">

Attention, notez cependant que 2 de vos images contiennent un attribut alt, mais ils sont vides :

• <img src="https://s.yimg.jp/images/evt/history/pc/img/about/main.jpg" alt="">

• <img width=1 height=1 alt="" src="https://b3.yahoo.co.jp/b?P=fo3KnjEyNC6.zzWiB86otAGdMTU5LgAAAADE59Pl&T=154js248v%2fX%3d1496086441%2fE%3d2080466845%2fR%3djp_event%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3djp%2f...

Il reste possible de définir un texte alternatif vide si aucune description ne semble cohérente pour l'image, mais soyez vigilant. Il est préférable de veiller à ce que la majorité de vos images indiquent un texte cohérent. Voir les recommandations du W3C (EN).

Plusieurs éléments utilisent le même identifiant

---

Utiliser un même identifiant pour 2 éléments différents peut entraîner des effets de bord, notamment lors de l'execution de JavaScript ou lors de l'application des règles CSS.

Identifiant d'éléments

Chaque élément d'une page web peut disposer d'un identifiant, défini par l'attribut id :

<p>
  <span id="mySpan1"></span>
</p>

Ces identifiants vous permettent de manipuler les éléments de votre page avec des instructions CSS ou JavaScript.

Que faire ?

Vous devez faire en sorte qu'aucun élément de la page ne dispose du même identifiant. Si vous souhaitez partager des propriétés/comportements entre plusieurs éléments, il faudra utiliser l'attribut class, dédié à cet effet :

<p>
  <span class="mySpans"></span><span class="mySpans"></span>
</p>

L'identifiant suivant est utilisé plusieurs fois dans la page :

• info_image, utilisé 2 fois

1 cookie n'est pas sécurisé

---

Un cookie transmis au navigateur via le protocole HTTPs doit pouvoir transiter uniquement sur une connexion sécurisée (sauf cas particulier).

Les cookies

Les cookies sont placés par le serveur web sur le navigateur web via l'en-tête HTTP Set-Cookie. Le navigateur retransmet ensuite ces informations lors des prochaines requêtes au serveur via l'en-tête HTTP Cookie. Si votre serveur fournit un cookie sur une connexion sécurisée (HTTPs), c’est probablement que ce cookie contient des informations sensibles : vous devez alors garantir qu’il ne pourra pas être exploité sur une connexion non sécurisée.

L'instruction Secure

En ajoutant l'instruction Secure au niveau de l'en-tête HTTP Set-Cookie, le serveur informe au navigateur qu'il n’est autorisé à retransmettre le cookie que sur des requêtes sécurisées. Lire l'article dédié à la sécurisation de cookies sur notre blog pour en savoir plus.

Les cookies suivants ne sont pas sécurisés, vous devriez ajouter l'instruction Secure lors du Set-Cookie :

https://internethistory.yahoo.co.jp/

• set-cookie: B=0iqmvdtciott9&b=3&s=g0; expires=Thu, 30-May-2019 19:34:01 GMT; path=/; domain=.yahoo.co.jp

Un script peut être injecté de façon plus optimale

---

L'injection de scripts via l'instruction JavaScript document.write retarde l'affichage d'une partie au moins de votre page et/ou l’interactivité de votre page pour l'utilisateur.

Besoin d'injecter un script ?

document.write est parfois utilisé à tort pour injecter un script. Exemple :

document.write('<script src="' + src + '" type="text/javascript"><\/script>');

Comme indiqué sur cet article (EN), vous devriez plutôt envisager l'utilisation du pattern "createElement-insertBefore" :

var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

Sur cette page, un script est injecté via l'instruction document.write :

Scripts injectés par https://internethistory.yahoo.co.jp/ (inline 3)

• document.write("<scr"+"ipt language=javascript src=https://s.yimg.jp/bdv/yahoo/javascript/csc/20060824/lib2obf_b3.js>