Analyse de qualité et performance web

https://sylvainmetayer.fr
Rapport généré le 14 nov. 2018 21:28:22
Télécharger le rapport
VISITEUR SIMULÉ : Chrome Paris 8.0/1.5Mbps (Latence : 50 ms) Modifier

Requêtes

7

Poids

112ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.19sec

Début affichage

0.40sec

Fin chargement

1.13sec


Erreurs navigateur 0OK
Support d'HTTP/2 : 100%
Speed Index: 416

Technologies :

Jekyll

Varnish


Partagez ce rapport par email

N'hésitez pas à diffuser ce rapport auprès de vos collaborateurs,
soit en copiant son URL depuis la barre d'adresse, soit en cliquant ci-dessous :

Partager le rapport par e-mail

Bonnes pratiques et conseils :

Ce que vous pouvez améliorer

Volume de données 

22/100

1 image est redimensionnée côté navigateur

Une page récupérant une image plus grande que celle réellement affichée charge inutilement un volume de données trop important.

Redimensionnement d'images

Le redimensionnement d'une image côté navigateur pour en réduire la taille d'affichage n'est pas recommandé.

Fournissez directement vos images aux dimensions d'affichage utilisées sur votre site. Vous évitez ainsi l'envoi de données inutiles sur le réseau, ce qui diminue le temps de chargement de la page.

Responsive design ? Images Retina ?

Le responsive design ou encore l'utilisation d'images retina ne jutifient pas un redimensionnement d'images. Même dans ces cas, différentes méthodes existent afin de délivrer vos images aux bonnes tailles. Nous vous conseillons de lire les ressources suivantes :

Ne redimensionnez pas l'image suivante :


 
Voir plus
Sécurité 

0/100

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

Protégez votre site Web contre les attaques attaques de type XSS (Cross-Site Scripting) en mettant en place une politique restrictive de sécurité du contenu.

Les attaques XSS

Les attaques XSS sont un type d'attaque dans laquelle des données malveillantes sont malicieusement ajoutées aux sites Web. Le nombre de vulnérabilités permettant ces attaques est assez important, c'est pourquoi il est aussi utile de les prévenir que de limiter leurs effets néfastes.

Vous pouvez protéger vos pages contre ces attaques en limitant l'exécution à des portions de code identifiées par le domaine auquel elles appartiennent, ou légitimées par un identifiant d'intégrité. Le code ne correspondant pas à cette politique de sécurité ne sera pas exécuté et l'utilisateur sera informé.

Configurer un en-tête HTTP "Content-Security-Policy" (CSP)

Pour prévenir ou limiter les dégâts potentiels d’une attaque XSS, 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, seuls les scripts provenant de l'hôte courant ou de https://apis.google.com seront exécutés.

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.


 
Voir plus
Sécurité 

0/100

Cette page est exposée à des attaques du type "clickjacking"

Ne permettez pas à des personnes malveillantes d'intégrer vos pages sur leur site.

Clickjacking

Ce type d'attaque consiste à intégrer votre page sur un site malveillant via des balises <frame> ou <iframe>. Ainsi il est possible de faire croire à un internaute qu'il est sur votre propre page. L'internaute peu averti sera en confiance et sera potentiellement amené à saisir des informations que le site malveillant sera à même d'intercepter.

Vous devez donc indiquer quels domaines sont autorisés à intégrer votre page.

Comment se prémunir du Clickjacking ?

Il y a deux méthodes permettant de se protéger contre cette attaque.

1/ Utilisez un en-tête HTTP "X-Frame-Options". Configurez votre serveur de telle sorte que la réponse de la ressource principale contienne l'en-tête HTTP "X-Frame-Options".

Trois types de valeurs peuvent être définies :

  • DENY pour refuser toute frame ou iframe intégrant la page
  • SAMEORIGIN pour n'autoriser que les frames provenant du même nom de domaine
  • ALLOW-FROM uri pour préciser les domaines pouvant intégrer la page dans une frame (non compatible avec tous les navigateurs (EN))
  • 2/ Définissez une directive frame-ancestors explicite dans votre politique de sécurité. Cette approche, plus récente et supportée par moins de navigateurs, vous permettra cependant d’autoriser plusieurs domaines plutôt qu’uniquement le domaine courant. Configurer cette directive avec la valeur 'none' revient à mettre en place l’en-tête X-Frame-Options: DENY.

    Quelle approche choisir ? Si vous n’avez que le domaine courant à autoriser, mettez en place les deux politiques de sécurités pour une meilleure compatibilité avec les anciens navigateurs. Si vous souhaitez autoriser plusieurs domaines à intégrer le vôtre, privilégiez la directive de sécurité "frame-ancestors".


    Ni l'en-tête "X-Frame-Options" ni la directive "frame-ancestors" ne sont définis sur cette page, vous êtes plus facilement exposé au clickjacking.


     
    Voir plus
    Optimisation du rendu 

    0/100

    Évitez d'utiliser des <meta> http-equiv

    Les en-têtes HTTP sont plus performants que les metas http-equiv.

    Les balises <meta http-equiv=""/>

    Les metas http-equiv permettent de communiquer au navigateur web des informations équivalentes à celles d'en-têtes HTTP. Par exemple, la meta <meta http-equiv="content-type"/> aura la même portée que l'en-tête HTTP Content-Type.

    Deux points n'encouragent pas à l'utilisation des metas http-equiv :

    • passer par la meta nécessite d'interpréter le début de la page HTML, ce qui en terme de performances est plus lent que de passer par les en-têtes HTTP
    • si l'en-tête HTTP est déjà présent, la meta est ignorée
    Dans quel cas les <meta http-equiv=""/> sont utiles ?

    Un seul cas peut justifier la présence de ces metas : si vous n'avez pas accès à la configuration de votre serveur, et donc des en-têtes HTTP.

    Nous vous conseillons cependant d'utiliser un serveur configurable, pour établir un site le plus performant possible.


    Cette page contient 1 balise meta http-equiv. Vous devriez la remplacer si possible :

    • X-UA-Compatible


     
    Voir plus
    Politique de cache 

    60/100

    Adoptez une politique de cache plus longue dans 2 requêtes

    En permettant la conservation de vos ressources statiques plusieurs jours en cache, vous diminuez la charge de votre serveur.

    L'entête expires

    Certaines de vos ressources utilisent l'en-tête HTTP Expires pour disposer d'une politique de cache efficace, ce qui correspond à une bonne pratique. Cependant, vous devriez envisager d'améliorer sa configuration pour profiter au mieux des mécanismes de cache. L'en-tête HTTP Expires se présente sous la forme suivante :

    Expires: Thu, 25 Dec 2014 20:00:00 GMT

    Lorsque vous mettez en production une nouvelle version de votre site, pensez bien à renommer les ressources statiques ayant été modifiées (versioning). En effet, si vous ne changez pas leur nom, vos utilisateurs garderont les ressources stockées en cache, correspondant à l'ancienne version. Ils risquent alors de se retrouver dans une version instable de votre page. Par exemple :

    maressource.min.20140101.js

    Voir les recommandations de Yahoo! sur le sujet.

    Quelle configuration adopter ?

    Nous vous conseillons de paramétrer l'en-tête Expires afin que la date mentionnée soit comprise entre 2 jours et 1 an par rapport à aujourd'hui.


    Cette page contient 2 ressources n'ayant pas une date d'expiration assez lointaine :


     
    Voir plus
    Qualité 

    0/100

    2 propriétés CSS sont surchargées par des shorthand

    Le CSS comporte quelques pièges (EN) pouvant engendrer des effets de bords indésirables sur vos styles.

    La surcharge de propriétés en CSS

    Pour une même règle CSS, si 2 propriétés identiques sont spécifiées, la dernière surchargera toutes les autres. La possibilité de définir des propriétés "raccourcies" (shorthand) peut parfois prêter à confusion dans ce contexte. Par exemple, "border" se réfère à toutes les bordures d’un élément, et revient à définir "border-top", "border-right", "border-left" et "border-bottom". Ainsi, avec le code suivant :

    .maClasse {
    border-color:red;
    border:5px solid; // border reprend la couleur par défaut
    }

    La propriété "border-color" se retrouve surchargée par "border", la couleur reprend donc la valeur par défaut.

    Évitez les effets de bord

    Avoir de telles surcharges en place présence un risque, puisque la surcharge n’est pas explicite et peut donc être un effet de bord. Si le style obtenu est celui désiré, alors la propriété qui est ainsi surchargée est donc inutile, supprimez la (cela réduira également le poids du CSS).


    Les fichiers suivants disposent de règles surchargeant une propriété via une propriété raccourcie :

    https://sylvainmetayer.fr/assets/css/style.css

    • body: "font" surcharge la propriété "line-height" (ligne 193, col 1)
    • .tags > .list > .item: "margin" surcharge la propriété "margin-bottom" (ligne 286, col 1)


     
    Voir plus

    Saviez-vous que ?

    Qualité 

    1 propriété CSS est surchargée

    Il est souvent inutile de définir 2 fois la même propriété au sein d’une même règle : la seconde surchargera la première.
    Cela risque de nuire à la lisibilité du code CSS. Supprimer les propriétés surchargées inutilement réduira également le poids du fichier.

    Comment améliorer ce point ?

    Supprimez l'une des occurences de la propriété en cause. Par exemple, si votre fichier dispose des propriétés suivantes :

    .maClasse {
    margin: 20px;
    ...
    margin: 10px;
    }

    Vous devriez envisager leur réécriture de la manière suivante :

    .maClasse {
    margin: 10px;
    }

    Les fichiers suivants définissent plusieurs fois la même propriété dans une règle. La gestion de fallbacks (EN) peut justifier une duplication.


    Assurez-vous que les propriétés remontées ici sont maîtrisées :

    https://sylvainmetayer.fr/assets/css/style.css

    • abbr[title] {text-decoration: underline dotted} (ligne 34, col 80)


     
    Voir plus
    Qualité 

    5 sélecteurs CSS sont dupliqués

    Utiliser plusieurs fois le même sélecteur sur des blocs déclaratifs différents au sein d’un même fichier CSS peut nuire à la lisibilité et à la maintenabilité du code. C’est également une source d’optimisation, puisque regrouper ces éléments au sein d’une même règle réduit le poids du fichier et réduit le temps nécessaire avant le rendu.

    Le modèle object CSS (CSSOM)

    Les règles CSS permettent d’appliquer des propriétés de mise en forme sur des éléments ciblés de votre code HTML.

    Pour ce faire, le navigateur construit sa propre modélisation avec le code CSS qu'il a récupéré : le modèle objet CSS (CSSOM). Cette transformation se fait en plusieurs étapes: lecture du fichier, conversion des chaînes de texte en jetons, transformation de ces jetons en objets avec propriétés et règles et organisation des éléments dans un modèle arborescent. Ces opérations se dérouleront d'autant plus vite que le code CSS aura été rédigé de manière simple et non-redondante.

    Comment améliorer mes règles CSS ?

    Pour des raisons de maintenance autant que de performance, regroupez au sein d’une même règle les sélecteurs CSS dupliqués.
    Par exemple, si votre fichier dispose des règles suivantes :

    .maClasse {
    margin: 0;
    }
    ...
    .maClasse{
    border: 1px solid black;
    }

    Vous devriez envisager leur réécriture de cette manière :

    .maClasse {
    margin: 0;
    border: 1px solid black;
    }

    Si la duplication des sélecteurs est héritée d’un processus historique ou qu’elle est justifiée par un besoin de maintenance, vous pouvez envisager l’utilisation d’un outil de minification CSS capable de faire cette transformation automatiquement.


    18 caractères peuvent être économisés. Les fichiers suivants définissent des sélecteurs identiques dans des règles différentes :

    https://sylvainmetayer.fr/assets/css/style.css

    • a (2 fois)
    • b, strong (2 fois)
    • h1 (2 fois)
    • hr (2 fois)
    • body (2 fois)


     
    Voir plus
    Qualité 

    2 sélecteurs semblent superflus

    Parfois, l'écriture de certains sélecteurs s'avère inutile en CSS. Par exemple, dans la règle suivante :

    body div .maClasse {}

    L'élément body n'apporte aucune précision pour sélectionner les éléments souhaités. Vous préférerez alors la forme suivante :

    div .maClasse {}

    De la même sorte, pas besoin de préciser le sélecteur <ul> si vous précisez un <li> juste derrière.

    Élément considérés comme potentiellement redondants : ul li, ol li, table tr, table th, body.

    Les fichiers suivants définissent des sélecteurs superflus :

    https://sylvainmetayer.fr/assets/css/style.css

    • ul li (ligne 212, col 1)
    • ol li (ligne 212, col 1)


     
    Voir plus
    Sécurité 

    Votre certificat SSL

    Votre certificat SSL expirera le 12/02/2019. Mettez à jour votre certificat avant cette date.

    Que se passera-t-il si mon certificat expire ?

    Laisser expirer un certificat peut avoir des conséquences pour les utilisateurs finaux qui verront alors de nombreux messages d’erreur ou d’alerte durant leur navigation sur le site, les avertissant à juste titre de risques de fraude, de vol d’identité ou d’interception du trafic. Ces alertes peuvent avoir un impact très négatif sur la perception par l’utilisateur du domaine visité.


     
    Voir plus
    Qualité 

    Le mot clé !important est utilisé 4 fois

    Le mot clé !important s’approche d’un hack permettant d’interdir toute surcharge d'une propriété définie. Si parfois il peut s’avérer utile, cela doit rester exceptionnel !

    Si vous en abusez, songez à revoir votre structure de code CSS. Dans ce conseil, vous êtes pénalisé au delà de 10 utilisations de ce mot clef.


    Voici la liste des !important détectés :

    https://sylvainmetayer.fr/assets/css/style.css

    • .footer-main > .link > .icon {width: 15px !important} (ligne 319, col 32)
    • .footer-main > .link > .icon {fill: #aaa !important} (ligne 319, col 56)
    • .footer-main > .link > .icon:hover {fill: #4b0082 !important... (ligne 320, col 38)
    • .star > .url > .title {width: auto !important} (ligne 347, col 25)


     
    Voir plus
    Accessibilité 

    Aucune balise <noscript> n'est définie

    Lorsque la page utilise des scripts, il est souvent conseillé de définir au moins une balise noscript. Celle-ci est nécessaire pour afficher un message lorsque le JavaScript est désactivé par l'utilisateur.

    <script  type="text/javascript">
    document.write('Hello World!')
    </script>
    <noscript>Your browser does not support JavaScript!</noscript>


     
    Voir plus

    Bravo ! Vous respectez les bonnes pratiques suivantes

    Qualité 

    100/100

    Vos images PNG ne sont pas compressées (gzip/deflate)

    La compression a un coût, du côté du serveur et du navigateur client. Il ne faut donc l'activer que si elle est efficace.

    PNG et compression

    Les images au format png ne supportent pas la compression gzip. Il est donc inutile d'effectuer des opérations de compression au niveau de votre serveur, et de décompression au niveau client pour ce type de ressources.


    Cette page n'essaie pas de compresser les images. C'est une bonne pratique.


     
    Voir plus
    Optimisation du rendu 

    100/100

    Votre réponse HTML n'est pas trop lourde

    Pourquoi réduire la quantité de code présente dans une page web ?

    Avant de pouvoir être affichée, une page web doit, entre autres, être téléchargée, analysée et modélisée en un document compréhensible par le moteur de rendu. Si la quantité de code présenté dans la page est trop importante, ces étapes sont ralenties et le rendu, retardé.

    Comment réduire la quantité de code ?

    Votre réponse HTML ne devrait contenir que les ressources immédiatement nécessaires à l’affichage de la zone visible de la page. Déplacez les informations inline dans des fichiers externes (JS pour les scripts, CSS pour les styles, requêtes asynchrones pour des contenus additionnels) et simplifier la structure de votre page web.


     
    Voir plus
    Référencement (SEO) 

    100/100

    Vos balises <img> contiennent toutes un attribut alt

    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. Ils 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 1 balise img qui définit un attribut alt.

    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).


     
    Voir plus
    Politique de cache 

    100/100

    Cette page ne contient pas de scripts inline trop longs

    Vous devriez permettre la mise en cache de tout script ayant une taille non négligeable, afin de réduire le temps de chargement de vos pages.

    Scripts inline / mise en cache

    Les scripts dits "inline" permettent d'intégrer facilement de petites portions de scripts directement dans le code HTML. Exemple :

    <script type="text/javascript">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']...,'/analytics.js','ga');
        ga('create', 'UA-11111111-1', 'monsite.com');
    </script>

    En procédant ainsi, vous évitez d'effectuer une requête vers le serveur pour récupérer la ressource. Les scripts inline représentent alors un gain de performance pour intégrer de petits scripts.

    Dès lors qu'un script dispose d'une taille assez conséquente, nous vous conseillons de l'externaliser et d'effectuer une requête pour le récupérer. Cela vous permettra de bénéficier des mécanismes de cache sur la ressource.

    Que faire ?

    Externalisez vos scripts de plus de 1 500 caractères dans un ou des fichiers distincts.

    Vous n'avez pas de script inline trop long sur cette page.


     
    Voir plus
    Référencement (SEO) 

    100/100

    Cette page définit 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).
    Cette page contient:

    • 1 balise(s) <h1>
    • 1 balise(s) <h2>


     
    Voir plus
    Compatibilité 

    100/100

    Aucune balise frameset, frame ou noframes détectée

    Ces balises sont aujourd'hui à proscrire, car elles présentent des problèmes pour la cohérence de navigation, le référencement, ou encore la sauvegarde de pages dans les favoris d'un navigateur.

    Aucune de ces balises n'est détectée sur cette page.

    L'utilisation de la balise iframe est préférée.


     
    Voir plus