Analyse de qualité et performance web

https://www.doctoome.com/
Rapport généré le 17 nov. 2016 14:22:21
Télécharger le rapport
98%
Impressionnant !
Pourquoi s'arrêter là ?
0

Problèmes

2

Améliorations

85

Succès


Voir les priorités

Screenshot


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

Requêtes

14

Poids

611ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.33sec

Début affichage

0.63sec

Fin chargement

1.79sec


Erreurs navigateur 0OK
Speed Index: 847

Technologies :

AngularJS

Google Analytics

Modernizr

Nginx

PHP

Twitter Bootstrap


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

Qualité 

0/100

Le mot clé !important est utilisé 66 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://www.doctoome.com/styles/frontend/main.6c384238.css

  • *, :after, :before {background: 0 0!important} (ligne 1, col 2101)
  • *, :after, :before {color: #000!important} (ligne 1, col 2126)
  • *, :after, :before {box-shadow: none!important} (ligne 1, col 2147)
  • *, :after, :before {text-shadow: none!important} (ligne 1, col 2173)
  • img {max-width: 100%!important} (ligne 1, col 2460)
  • .btn>.caret, .dropup>.btn>.caret {border-top-color: #000!imp... (ligne 1, col 2594)
  • .table {border-collapse: collapse!important} (ligne 1, col 2662)
  • .table td, .table th {background-color: #fff!important} (ligne 1, col 2717)
  • et 58 autres


 
Voir plus
Qualité 

30/100

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

Les règles CSS

Les règles CSS permettent de sélectionner un ensemble d'éléments du DOM (votre html), et de leur appliquer des propriétés de mise en forme.

Comment améliorer ce point ?

Il vous suffit de regrouper au sein d’une même règle les sélecteurs.
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 volontaire (architecture propre à votre code, etc), vous pouvez envisager l’utilisation d’un outil de minification CSS capable de faire cette transformation automatiquement.


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

https://www.doctoome.com/styles/frontend/main.6c384238.css

  • input[type=checkbox], input[type=radio] (3 fois)
  • .form-control (2 fois)
  • hr (2 fois)
  • .popover (2 fois)
  • table (2 fois)
  • .page-header (2 fois)
  • .container, .container-fluid (2 fois)
  • a (2 fois)
  • et 6 autres


 
Voir plus

Saviez-vous que ?

Sécurité 

Votre serveur ne devrait pas pouvoir communiquer en HTTP alors qu'il dispose d'une connexion HTTPS

Prémunissez vous d'attaques du type "man in the middle" en vous assurant de communiquer uniquement en HTTPS avec le serveur.

L'en-tête HTTP Strict Transport Security (HSTS)

Lorsque vous communiquez avec un serveur via une connexion sécurisée, il est recommandé que toutes les requêtes envoyées vers ce serveur utilisent le protocole HTTPS. L'en-tête HTTP HSTS permet d'indiquer au navigateur que toutes les requêtes envoyées vers le domaine concerné doivent se faire via HTTPS. Ainsi si l'URL est présentée sous la forme "http://...", le navigateur web va automatiquement la remplacer par "https://...".

Nous vous conseillons cependant de ne mettre en place cet en-tête à l'unique condition que votre site entier desserve ses ressources en HTTPS.

Aucun en-tête HSTS n'a été détecté sur cette page.


 
Voir plus
Volume de données 

1 domaine envoie 370 octets de cookies

Les cookies HTTP sont utilisés pour le suivi d'un utilisateur pour personnaliser sa visite. Les cookies HTTP sont envoyés via des en-têtes HTTP par le serveur Web au navigateur. Ensuite, à chaque accès à la page par le navigateur, le cookie reçu lors de la première requête est renvoyé au serveur. Le client est alors reconnu. En savoir plus.

Sur cette page, 1 nom de domaine envoit 370 octets de cookies :

Nom de domaine : doctoome
  • PHPSESSID: 286 octets répartis sur 11 requête(s)
  • _ga: 81 octets répartis sur 3 requête(s)
  • _gat: 3 octets répartis sur 3 requête(s)


 
Voir plus
Optimisation du rendu 

Les ressources les plus lentes de la page

Le temps total de chargement de la page est de 1.8 secondes. Voici les 10 requêtes les plus lentes, qui constituent des points de vigilance :

Voici les requêtes les plus lentes provenant de partis tiers, et qui constituent des points de vigilance :

Un temps de réponse excessif peut indiquer un traitement important demandé au serveur destinataire de la requête, une ressource trop lourde, ou bien un problème réseau temporaire.

Pour plus d'informations sur le détail du chargement de la page, consultez la timeline.


 
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.doctoome.com/styles/frontend/main.6c384238.css

  • table th[class*=col-] (ligne 1, col 30952)


 
Voir plus
Qualité 

18 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.doctoome.com/styles/frontend/main.6c384238.css

  • .caret {border-top: 4px solid\9} (ligne 1, col 55492)
  • .dropdown-menu {border: 1px solid rgba(0,0,0,.15)} (ligne 1, col 55828)
  • .dropup .caret, .navbar-[...] .caret {border-bottom: 4px solid\9} (ligne 1, col 57850)
  • .modal.fade .modal-dialo[...]-out,-webkit-transform .3s ease-out} (ligne 1, col 91768)
  • .modal-content {border: 1px solid rgba(0,0,0,.2)} (ligne 1, col 92129)
  • .tooltip {text-align: start} (ligne 1, col 93288)
  • .popover {text-align: start} (ligne 1, col 94659)
  • .popover {border: 1px solid rgba(0,0,0,.2)} (ligne 1, col 94735)
  • et 10 autres


 
Voir plus
Qualité 

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

Vous avez défini 138 couleurs, et 49 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 :

#012141 #012e5b #020506 #08141a #101010 #222222 #262626 #323232 #4593bd #5e5e5e #67b168 #737373 #7cbfda #888888 #a6a6a6 #a6e1ec #adadad #afd9ee #c0a16b #c1e2b3 #c3c3c3 #c4e3f3 #c9e2b3 #ce8483 #d0d0d0 #d0e9c6 #d3e7f0 #dcecf3 #e0e0e0 #e4b9b9 #e4b9c0 #e8e8e8 #ebcccc #ebebeb #eceff1 #f15340 #f36958 #f7e1b5 #f7ecb5 #f7f7f7 #f8f8f8 #f9f9f9 #faf2cc #ffff00 rgba(0,0,0,0.05) rgba(0,0,0,0.15) rgba(0,0,0,0.175) rgba(0,0,0,0.6) rgba(114,173,205,0.6)


 
Voir plus
Sécurité 

4 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 vigilence 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 :

Ressources provenant de "doctoome"
Ressources hébergées par un parti tiers

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é 

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

Cette page comporte 25 liens

Une stratégie de liens efficace sur votre page améliorera son référencement.

Notez qu'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 25 liens contenus dans la page :

  • 22 liens internes (88,00%)
  • 3 liens externes "follow" (12,00%)
  • Aucun lien externe "nofollow" (0,00%)


 
Voir plus
Volume de données 

Cette page charge 0,61 Mo 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 :

  • JavaScript : 40,86% du poids total
  • Images : 27,06% du poids total
  • Autres : 15,60% du poids total
  • Polices de caractères : 11,25% du poids total
  • CSS : 4,62% du poids total
  • Textes : 0,61% 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
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

Accessibilité 

100/100

Aucun bouton de cette page n'est vide

L'utilisateur doit être informé de l'action qui sera déclenchée s’il clique sur un bouton.

L'élément <button> ne peut être vide. Vous devez y indiquer du texte, ou encore une image avec un texte alternatif pour permettre à tous vos internautes d'être informés des conséquences de l'action.

Exemple :

<button>
Télécharger
</button>


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

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 :

Le réseau social de la santé


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

100/100

Un titre est défini sur cette page

La page doit disposer d'un titre unique.

Utilisation du titre par les moteurs de recherche

Lorsqu'il est bien configuré, le titre de la page se retrouve directement dans les résultats de recherche :

L'utilisation d'un titre adapté est un critère important pour le référencement. De plus, il vous permet de maîtriser au maximum l'affichage sur les pages de résultats, et d'intégrer les mots clés sur lesquels vous souhaitez que votre site ressorte.

Comment définir le titre d'une page ?

Le titre de la page est renseigné grâce à la balise <title>, qui doit être placée dans la balise <head>, au début du code.


Cette page définit bien un titre via la balise title.

Voici le titre défini :

Le réseau social de la santé - Doctoome


 
Voir plus