Analyse de qualité et performance web

https://www.meane.fr
Rapport généré le 14 avr. 2018 14:34:42
Télécharger le rapport
98%
Impressionnant !
Pourquoi s'arrêter là ?
1

Problèmes

0

Améliorations

86

Succès


Voir les priorités

Screenshot


VISITEUR SIMULÉ : Chrome Paris 8.0/1.5Mbps (Latence : 50 ms) Modifier

Requêtes

30

Poids

389ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.35sec

Début affichage

0.50sec

Fin chargement

1.62sec


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

Technologies :

Google Analytics

IIS

Microsoft ASP.NET

jQuery

Windows Server


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

Sécurité 

0/100

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 pour en savoir plus.

Attention : vérifiez que la redirection HTTP vers HTTPS est bien en place sur votre site. Dans le cas contraire, le cookie Secure pourrait ne pas être envoyé lors d'une requête HTTP.

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

https://www.meane.fr/

  • set-cookie: 049044793=ipv=7a576e17fdac8dd4e491d797c2d29ea57932abdb7e21d7769b7855682ded4f22&ips=4652722212&ids=049044793; expires=14/04/2019 16:34:45; path=/; HttpOnly


 
Voir plus
Sécurité 

90/100

Désactivez la détection automatique du type des ressources

Protégez-vous de l'exploitation malveillante du MIME Sniffing.

Le MIME-Type sniffing

Les navigateurs Internet Explorer et Chrome disposent d'une fonctionnalité dite de "MIME-Type sniffing", qui consiste à détecter automatiquement le type d'une ressource web. Ainsi, une ressource déclarée comme étant une image pourra être interprétée comme un script si tel est son contenu.

Une personne malveillante pourrait profiter d'un envoi de fichier sur votre site par exemple pour injecter du code malveillant. Nous vous conseillons de désactiver le MIME-Type sniffing pour limiter les effets de l'envoi d'un tel fichier.

La solution : configurer un en-tête HTTP "X-Content-Type-Options"

Ajoutez dans les réponses de chacune de vos ressources l'en-tête HTTP "X-Content-Type-Options", associé à la valeur "nosniff". Cela vous permettra de vous prémunir du risque d'une mauvaise interprétation de vos ressources.

Les ressources suivantes sont hébergées par un parti tiers, il se peut donc qu'elles ne soient pas sous votre responsabilité. Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en accord avec la bonne pratique.


 
Voir plus
Qualité 

92/100

Séparez vos styles de votre code HTML

Dissocier les balises HTML de leur style améliore la maintenabilité du code et favorise sa factorisation.

Définir les styles CSS

Les styles CSS permettent de mettre en forme la page. Pour les définir, vous disposez de 3 méthodes principales :

  • la déclaration dans un fichier CSS
  • la déclaration dans un bloc "inline" (balises <style>)
  • la déclaration dans un attribut style d'un élément HTML
Que faire ?

Nous vous conseillons de regrouper vos styles CSS au sein de balises <style> ou dans des fichiers CSS dédiés. Ainsi, la partie HTML se charge uniquement de fournir la structure de la page, et sa mise en forme est externalisée. L'attribut style devrait uniquement être généré en cas de besoin par du code JavaScript (exemple : nécessité de connaître la taille de l'écran).


Cette page utilise 1 attribut(s) style :

  • <span style="font-size: 13px;">


 
Voir plus

Saviez-vous que ?

Sécurité 

3 ressources de cette page sont destinées à une utilisation publique

Par défaut, le navigateur n'accepte d'effectuer des requêtes AJAX, ou encore de récupérer des polices web, que sur le nom de domaine de la page. Une police de caractère définie sur toto.com ne pourra donc être utilisée que par les pages de toto.com. Cela évite une mauvaise utilisation de vos ressources par n'importe quel site.

Certaines ressources sont publiques, et veulent explicitement être mise à disposition de chacun (ex: les Google Fonts). Dans ce cas, l'en-tête HTTP Access-Control-Allow-Origin peut-être utilisé, avec la valeur "*". Vous ne devez cependant utiliser cette propriété que si votre ressource a bien pour objectif d'être utilisée par le plus grand nombre. Sinon, nous vous conseillons de garder la valeur par défaut, ou de définir un nom de domaine spécifique dans l'en-tête Access-Control-Allow-Origin.

Vous devriez porter votre vigilance sur les ressources suivantes, qui utilisent un en-tête HTTP Access-Control-Allow-Origin:*. Assurez vous qu'elles sont effectivement destinées à être utilisées par des pages de tous horizons :

Les ressources suivantes sont hébergées par un parti tiers, il se peut donc qu'elles ne soient pas sous votre responsabilité. Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en accord avec la bonne pratique.


 
Voir plus
Sécurité 

Vos ressources tierces sont-elles sécurisées par des contrôles d'intégrité ?

La page charge des contenus provenant de tiers, assurez-vous de l'intégrité de ces données.

Contrôle d'intégrité SRI

Pour vous assurer qu'une ressource provenant d'une tierce partie n'a pas été altérée, utilisez un contrôle d’intégrité SRI (SubResource Integrity). Pour cela, ajoutez l'attribut integrity sur les balises <script> et <link> qui chargent ces ressources. Exemple :

<script src="https://exemple.com/exemple-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous">
</script>

L'attribut integrity a pour valeur une empreinte, correspondant au SHA du contenu souhaité, encodé en base64. Le navigateur comparera alors ce SHA avec celui du contenu téléchargé, pour déterminer si la ressource correspond bien à celle attendue.

Plusieurs outils vous aideront dans la création de cette empreinte. En ligne de commande, vous pouvez utiliser openssl. Des outils en ligne existent par ailleurs, tels que srihash.org ou report-uri.io. En savoir plus sur SubResource Integrity.


 
Voir plus
Qualité 

65% des couleurs définies ne sont utilisées qu'une seule fois

Vous avez défini 63 couleurs, et 41 d’entre elles ne sont utilisées qu’une seule fois (certaines peuvent être très proches, exemple : #FF0000 and #FE0000).

Nous vous conseillons d’harmoniser au maximum les couleurs de votre site afin de simplifier votre CSS mais aussi d’éviter des incohérences dans votre charte graphique.

Les couleurs suivantes ne sont utilisées qu’une seule fois :

#000000 #006621 #0077b5 #06d85f #1e8248 #27303c #2b374d #2e323c #314155 #333366 #3366ff #36303c #3a4a68 #3b5998 #494f5c #555555 #55acee #6600cc #6888ac #6d7a93 #777777 #7c5175 #91758c #990033 #999999 #aaaaaa #bbbbbb #bd081c #cc0000 #cc3366 #da5867 #dd4b39 #f9f9f9 #ffe30b #ffffcc rgba(0,0,0,0) rgba(0,0,0,0.2) rgba(0,0,0,0.3) rgba(0,0,0,0.8) rgba(230,0,0,0.9) rgba(255,255,255,0.7)


 
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
Sécurité 

Votre certificat SSL

Votre certificat SSL expirera le 01/10/2018. 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
Sécurité 

1 cookie peut être altéré par le client

Un cookie doit uniquement être manipulé par le serveur. Il n’est pas recommandé de l’utiliser au niveau du navigateur web.

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.

Vous devez garantir que ces cookies ne peuvent être altérés que par le serveur.

L'instruction HttpOnly

En ajoutant l'instruction HttpOnly au niveau de l'en-tête HTTP Set-Cookie, le serveur informe le navigateur que le cookie ne peut être modifié . Le client se contente de récupérer et retourner le cookie envoyé par le serveur : il transite donc sur le protocole HTTP mais ne peut pas être modifié via du Javascript par exemple. Lire l'article dédié à la sécurisation de cookies pour en savoir plus.

Les cookies pourraient être exploités en cas de faille XSS, vous devriez considérer l’ajout de l'instruction HttpOnly lors du Set-Cookie :

https://www.meane.fr/

  • set-cookie: ASPSESSIONIDCUCATQDA=PGLNJGOAKHJJCANDDAEGJJIP; secure; path=/


 
Voir plus
Nombre de requêtes 

Répartition des ressources par domaine

Cette page charge ses ressources depuis 4 domaines différents. Nous avons extrait pour chaque domaine :

  • Le temps de chargement (cumulé) : délai nécessaire au chargement de toutes les ressources du domaine
  • Le temps de réponse serveur (cumulé) : délai des réponses du serveur (éventuelle connexion TCP + attente de la réception du premier octet)
  • Le poids total des données qui ont été chargées
  • Le nombre de requêtes

Ci-dessous les domaines utilisés lors du chargement de la page :

DomaineTemps total (ms)Temps niveau serveur (ms)Poids (ko)Requêtes
www.meane.fr 6892 6381 372 27
www.google-analytics.com 267 243 0 1
fonts.googleapis.com 257 232 1 1
fonts.gstatic.com 280 206 14 1


 
Voir plus
Qualité 

1 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://www.meane.fr/css/style.css

  • .accordian ul li:hover (ligne 70, col 1)


 
Voir plus
Qualité 

2 propriétés CSS sont surchargées

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://www.meane.fr/ (inline 0)

  • .ribbon {margin: 0 0 10px 0} (ligne 1, col 2695)
  • .ribbon {width: 98%} (ligne 1, col 2713)


 
Voir plus
Volume de données 

Cette page charge 389 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 : 66,17% du poids total
  • JavaScript : 16,84% du poids total
  • Textes : 12,04% du poids total
  • Polices de caractères : 3,71% du poids total
  • CSS : 1,24% du poids total

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


 
Voir plus

En savoir plus sur la performance avec jQuery

jQuery est la librairie JavaScript la plus utilisée aujourd'hui. Rendez votre site plus performant en respectant ses bonnes pratiques. Pour connaître les fondamentaux de la performance jQuery, nous vous conseillons de lire le lien suivant: http://learn.jquery.com/performance/.


 
Voir plus
Référencement (SEO) 

Cette page comporte 61 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 61 liens contenus dans la page :

  • 51 liens internes (83,61%)
  • 8 liens externes "follow" (13,11%)
  • 2 liens externes "nofollow" (3,28%)


 
Voir plus
Volume de données 

Vos images semblent utiliser le Responsive Web Design

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 :

Sur cette page, 1 image est redimensionnée de moins d'1/3 de sa taille. Si le site repose sur du Responsive Web Design, ce redimensionnement peut s'avérer cohérent. C'est pourquoi la ressource suivante n'est pas pénalisée au sein de ce conseil, mais nous vous invitons à y porter une vigilance particulière afin de vous assurer que son redimensionnement n'impacte pas les performances de la page :


 
Voir plus

Bravo ! Vous respectez les bonnes pratiques suivantes

Sécurité 

100/100

La version sécurisée est systématiquement utilisée

Redirigez les utilisateurs utilisant la version HTTP de la page vers HTTPS.

Redirection vers HTTPS

Cette page utilise HTTPS, et sa version HTTP (non sécurisée) ne doit pas être accessible. Sur ce test, nous vérifions si un accès à la page via le protocole HTTP redirige bien vers HTTPS afin de sécuriser la navigation de vos internautes.

Vos utilisateurs accédant à cette page via le protocole HTTP sont systématiquement redirigés vers la version sécurisée de la page.


 
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 38 balises img et elles ont toutes 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
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>
  • 3 balise(s) <h3>


 
Voir plus
Accessibilité 

100/100

La balise <noscript> est définie

Cette page utilise la balise noscript. Celle-ci permet d'afficher un message lorsque le JavaScript est désactivé par l'utilisateur.


 
Voir moins
Référencement (SEO) 

100/100

Une description est définie sur cette page

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.

Cette page définit une <meta> description :

Ressources graphiques et multimédia, astuces logiciels, tutoriels web et conseils SEO, portfolio professionnel, humour et réflexions de comptoir


 
Voir plus
Référencement (SEO) 

100/100

Cette page utilise uniquement des formats d'images standards

Les images au format non standard risquent de ne pas être indexées par les moteurs de recherche.

Seuls certains formats d'images sont considérés comme standards sur le web : jpeg, jpg, png, gif, svg, ico, webp. Vous devriez considérer une alternative à tout autre format.

Par ailleurs, pensez à soigner le texte entourant vos images: certains moteurs de recherche analysent les 10 mots (environ) précédents et suivants l'image, pour restituer son contexte.


 
Voir plus