Analyse de qualité et performance web

https://sylvainmetayer.fr
Rapport généré le 14 nov. 2018 21:28:22

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 ?

    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é 

    Attention aux commentaires au sein du code source

    Ne transmettez à vos internautes que les données dont ils ont besoin.

    Pages web et commentaires dans le code source

    Les commentaires dans le code source sont indispensables aux développeurs : ils permettent de détailler une portion de code complexe, et aident à naviguer plus efficacement dans le DOM. Cependant, il n'y a aucun intérêt à communiquer ces informations à vos utilisateurs. Les seuls commentaires dont la présence est justifiée sur le navigateur de l'internaute sont ceux permettant la compatibilité de votre site sur toutes les plateformes (exemple : rendre le site compatible avec Internet Explorer 8).

    Veillez donc à ne pas y exposer des données sensibles pouvant permettre à une personne malveillante de corrompre votre système. Par ailleurs, rien ne justifie que des blocs de code soient transmis à vos visiteurs.


     
    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
    Référencement (SEO) 

    Cette page comporte trop de descriptions

    La page doit disposer d'une description unique.

    Utilisation de la description par les moteurs de recherche

    Lorsqu'elle est bien configurée, la description de la page se retrouve directement dans les résultats de recherche:

    Cette description vous permet de maîtriser au maximum l'affichage sur les résultats des moteurs de recherche, et d'améliorer le taux de clics vers votre page. En savoir plus.

    Comment définir la description d'une page ?

    La description de la page est renseignée grâce à la balise <meta name="description" content="description de la page">, qui doit être placée dans la balise <head>, au début du code.

    2 balises <meta> description ont été détectées :

    • Développeur à Bordeaux
    • Portfolio - Sylvain METAYER

    Vérifiez si vous n'utilisez pas plusieurs fois cette balise au sein de votre code. Si ce n'est pas le cas, ce problème peut être lié à notre moteur de règles, notamment si vous utilisez des redirections ou le préchargement de liens (https://developer.mozilla.org/fr/docs/FAQ_sur_le_pr%C3%A9chargement_des_liens).


     
    Voir plus
    Volume de données 

    Cette page charge 112 ko de données

    Une page chargeant trop de données 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 : 87,35% du poids total
    • Textes : 7,39% du poids total
    • CSS : 5,26% du poids total

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


     
    Voir plus
    Référencement (SEO) 

    Cette page comporte 14 liens

    Il existe 2 grands types de liens :

    • les liens internes, qui font référence aux pages du même nom de domaine
    • les liens externes, qui pointent vers d'autres sites (doivent être pertinents et pointer vers des contenus de qualité)

    Si vous faites référence à de nombreux liens, vous pouvez demander aux algorithmes de référencement de ne s'intéresser qu'à certains d'entre eux, en ajoutant un attribut rel=nofollow sur ceux qui ne sont pas pertinents (ex: publicités).

    Voici la répartition des 14 liens contenus dans la page :

    • 8 liens internes (57,14%)
    • 6 liens externes "follow" (42,86%)
    • Aucun lien externe "nofollow" (0,00%)


     
    Voir plus

    Bravo ! Vous respectez les bonnes pratiques suivantes

    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
    Accessibilité 

    100/100

    Aucun élément vide détecté

    Les éléments <p>, <li>, <button>, <legend>, <caption>, <figcaption> and <quote> ne doivent pas être vides car s'ils le sont, certains lecteurs d'écran auront des difficultés à interpréter leur présence.

    Supprimez ces éléments vides de votre code ou décorez-les avec l'attribut aria-hidden pour que les lecteurs d'écran les ignorent.

    <p aria-hidden="true"></p>


     
    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