Analyse de qualité et performance web

http://spots.augusta.edu/caubert/
Rapport généré le 16 août 2018 03:06:11
Télécharger le rapport
92%
Beau boulot !
Plus qu'un petit effort
2

Problèmes

1

Améliorations

82

Succès


Voir les priorités

Screenshot


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

Requêtes

7

Poids

214ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.38sec

Début affichage

0.83sec

Fin chargement

2.15sec


Erreurs navigateur 0OK
Speed Index: 881

Technologies :

IIS

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

Vous devriez utiliser une connexion sécurisée (HTTPS)

HTTPS vise à garantir la confidentialité et la sécurité des échanges : la communication étant chiffrée le protocole protège des écoutes clandestines, mais aussi d’une altération des données.

Google multiplie les actions en faveur du HTTPS. Après avoir ajouté ce critère dans ses algorithmes de référencement (voir l’annonce - en anglais), Google a fait progressivement évoluer Chrome pour mettre en valeur l’absence d’un contexte sécurisé dans différents cas de collecte d’informations provenant des utilisateurs. Les autres navigateurs suivent également cette tendance.

La mise en place du HTTPS sur un site provoque parfois quelques réticences (coût, impact sur les performances, compatibilité avec les partenaires techniques…). Mais le marché a évolué et nombre de ces craintes sont désormais injustifiées. Le passage à HTTPS doit être envisagé.

Comment mettre en place le protocole HTTPS ?

Vous devez mettre en place un certificat obtenu auprès d'une autorité de certification fiable. Renseignez vous notamment auprès de votre hébergeur qui peut vous aider à obtenir ce certificat. La page suivante devrait par ailleurs vous aider dans votre démarche de migration vers le protocole HTTPS.

Un certificat gratuit ? Let's Encrypt !

Let's Encrypt est une autorité de certification gratuite, automatisée et open source. De nombreux hébergeurs proposent d’activer la génération et le renouvellement automatique de certificats gratuits directement depuis l’interface d’administration de votre domaine. Contactez votre hébergeur pour plus d’informations.


 
Voir plus
Volume de données 

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

0/100

Le fichier robots.txt doit être défini

Facilitez au maximum la découverte de votre site par les robots en leur indiquant quelles URLs ne doivent pas être explorées.

Fichier robots.txt

Ce fichier est placé à la racine du site et est interprété par les robots en charge du référencement de votre site. Il délivre des instructions pour indiquer les pages à explorer par les robots.

Notez que ces instructions sont données à titre indicatives. Un robot quelconque ne sera pas bloqué par les restrictions du fichier.

Nous n'avons pas détecté de fichier robots.txt sur ce site, vous devriez le mettre en place à l'adresse suivante :


 
Voir plus

Saviez-vous que ?

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
Nombre de requêtes 

Répartition des ressources par domaine

Cette page charge ses ressources depuis 1 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
spots.augusta.edu 2608 1454 214 7


 
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 :


 
Voir plus
Référencement (SEO) 

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

  • 17 liens internes (37,78%)
  • 28 liens externes "follow" (62,22%)
  • Aucun lien externe "nofollow" (0,00%)


 
Voir plus
Volume de données 

Cette page charge 214 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 :

  • Polices de caractères : 77,34% du poids total
  • Images : 12,89% du poids total
  • CSS : 7,75% du poids total
  • Textes : 2,02% du poids total

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


 
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

Nombre de requêtes 

100/100

Vos fichiers CSS sont bien répartis

Chaque requête HTTP représente un coût en terme de performance (roundtrip time, utilisation de bande passante...).

Il est ainsi préférable de faire une requête vers un fichier de 50ko de données plutôt que 10 requêtes vers des fichiers de 5ko.

Quelle répartition adopter ?

Répartissez vos styles en les intégrant directement dans votre code HTML ou en les regroupant dans des fichiers de taille plus conséquente. Nous vous conseillons l'emploi de cette dernière méthode pour profiter des mécanismes de cache.

Sur cette page, vous effectuez des requêtes vers des fichiers CSS à bon escient.


 
Voir plus
Sécurité 

100/100

Une règle CSP base-uri est définie

Modifiez la politique de sécurité pour limiter les valeurs possibles de l’élément <base>.

Pourquoi préciser une directive base-uri ?

Votre page contient des liens relatifs. Pour transformer ces liens relatifs en URLs complètes, le navigateur se basera sur l'URL de la page.

En cas d’attaque de type XSS (Cross-Site Scripting), un attaquant pourrait injecter un élément <base> de toute pièce dans vos pages dans l’optique de détourner une partie de votre trafic vers un autre site web. Définissez une politique de sécurité limitant les domaines possibles dans les valeurs d’un élément <base>.

Comment limiter les valeurs possibles pour l'élément <base> ?

Pour cela, configurez votre serveur afin que votre en-tête HTTP Content-Security-Policy contienne une définition pour la directive base-uri.

Apache :

<IfModule mod_headers.c>
Header set Content-Security-Policy "default-src 'self' ; img-src 'self' data:; script-src 'self' cdnjs.cloudflare.com/ajax/libs/html5shiv/; style-src 'self' 'unsafe-inline'; base-uri 'self'; base-uri 'self';"
</IfModule>

Nginx :

add_header Content-Security-Policy "default-src 'self' ; img-src 'self' data:; script-src 'self' cdnjs.cloudflare.com/ajax/libs/html5shiv/; style-src 'self' 'unsafe-inline'; base-uri 'self'; base-uri 'self';"

En savoir plus sur la directive base-uri.


 
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>
  • 5 balise(s) <h2>
  • 3 balise(s) <h3>


 
Voir plus