Analyse de qualité et performance web

http://www.opengateway.fr
Rapport généré le 10 mai 2017 16:34:43

90%
Beau boulot !
Plus qu'un petit effort
2

Problèmes

8

Améliorations

72

Succès


Voir les priorités

Screenshot


VISITEUR SIMULÉ : Chrome London 10.0/2.0Mbps (Latence : 28 ms) Modifier

Requêtes

15

Poids

327ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.37sec

Début affichage

0.83sec

Fin chargement

1.17sec


Erreurs navigateur 0OK
Support d'HTTP/2 : 93%
Speed Index: 837

Technologies :

Apache

Google Font API

Google PageSpeed

Piwik

jQuery


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

Optimisation du rendu 

0/100

Différez l'utilisation du code JavaScript

Lorsque le navigateur web rencontre du code JavaScript en interprétant le code source d’une page web, cela peut ralentir considérablement l’affichage de la page, surtout s’il est nécessaire de télécharger un script externe.

Différez au maximum l’utilisation du Javascript pour assurer un début rapide de l’affichage de la page.

Que faire ?

Utilisez si possible l'une des techniques suivantes pour des appels à des fichiers externes :

  • utilisation de l'attribut async
  • utilisation de l'attribut defer
  • ajout du script dans le DOM en JavaScript, lors de l'évènement onload
  • placer les scripts à la fin de votre code source (idéalement à la fin du <body>)

120.6 Ko du code JavaScript sont analysés lors du chargement initial de la page. Différez l'analyse de ce code pour éviter de bloquer l'affichage de la page.


 
Voir plus
Optimisation du rendu 

0/100

Spécifiez un jeu de caractères

Aucun jeu de caractères n'est spécifié dans les en-têtes HTTP des ressources suivantes. La spécification d'un jeu de caractères permet d'accélérer l'affichage des pages dans le navigateur.

Spécifier le jeu de caractères utilisé par la page dans l'en-tête HTTP Content-Type permet au navigateur de commencer son analyse tout de suite.


 
Voir plus
Qualité 

0/100

1 ressource ne définit pas le type de son contenu

Chaque ressource peut définir le type de son contenu afin de faciliter leur interprétation par les navigateurs web.

Vous n'avez aucun intérêt à dissimuler le type d'une ressource.

Nous vous conseillons de définir un en-tête HTTP Content-Type sur toutes les ressources de la page.

1 ressource de la page devrait préciser son type :


 
Voir plus
Qualité 

0/100

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


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

www.opengateway.fr/media/plg_jchoptimize/a[...]ed.cf.GMGfnwRxjT.css

  • ul.nav.menu li span.nav-header (5 fois)
  • div.tag-category ul.thum[...].label-info[href], .badge-info[href] (5 fois)
  • a:hover, a:focus (4 fois)
  • blockquote (4 fois)
  • #k2Container span.catItemAddLink a.modal (4 fois)
  • .img-polaroid, .item-ima[...]eItemIntrotext a.moduleItemImage img (4 fois)
  • a (4 fois)
  • .favnav .navigation li a[...]pan.nav-header[class*=" fa-"]:before (4 fois)
  • et 161 autres

https://www.opengateway.fr/ (inline 0)

  • .retina-logo (4 fois)
  • ul.menuhorizontal li a, [...]uhorizontal-right li span.nav-header (2 fois)
  • #fav-containerwrap (2 fois)
  • .favnav .navigation .nav[...]nav-pills .nav-child span.nav-header (2 fois)
  • .slogan (2 fois)


 
Voir plus
Qualité 

0/100

5 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 :

www.opengateway.fr/media/plg_jchoptimize/a[...]ed.cf.GMGfnwRxjT.css

  • a.backtop i: "padding" surcharge la propriété "padding-right" (ligne 1, col 172981)
  • ul.list-square li:before: "padding" surcharge la propriété "padding-right" (ligne 1, col 239975)
  • ul.list-circle li:before: "padding" surcharge la propriété "padding-right" (ligne 1, col 240777)
  • ul.list-color li:before: "padding" surcharge la propriété "padding-right" (ligne 1, col 241577)
  • ul.list-dark li:before: "padding" surcharge la propriété "padding-right" (ligne 1, col 242403)


 
Voir plus
Qualité 

0/100

Le mot clé !important est utilisé 193 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 :

www.opengateway.fr/media/plg_jchoptimize/a[...]ed.cf.GMGfnwRxjT.css

  • * {color: #000!important} (ligne 1, col 3021)
  • * {text-shadow: none!important} (ligne 1, col 3042)
  • * {background: transparent!important} (ligne 1, col 3069)
  • * {box-shadow: none!important} (ligne 1, col 3102)
  • img {max-width: 100%!important} (ligne 1, col 3455)
  • .visible-phone {display: none!important} (ligne 1, col 107548)
  • .visible-tablet {display: none!important} (ligne 1, col 107587)
  • .hidden-desktop {display: none!important} (ligne 1, col 107626)
  • et 184 autres

https://www.opengateway.fr/ (inline 0)

  • span.itemImage img, span.catItemImage img, span.tagItemImage... (ligne 1, col 4061)


 
Voir plus

Saviez-vous que ?

Optimisation du rendu 

Les ressources les plus lentes de la page

Le temps total de chargement de la page est de 1.2 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é 

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

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

Préférez le sélecteur jQuery $("#id").find("test") plutôt que $("#id test")

Vos sélecteurs ne commencent pas par des identifiants (#id). Pensez à les utiliser si vous êtes amenés à manipuler des éléments du DOM: jQuery sélectionnera ainsi les éléments via document.getElementById(), qui est le sélecteur le plus performant.

Par ailleurs, si vous souhaitez informer d'autres sélections après l'identifiant, il sera préférable de les placer dans un find():

// fast
$( "#container div.element" )
// super-fast
$( "#container" ).find( "div.element" );


 
Voir plus
Volume de données 

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

  • Images : 27,80% du poids total
  • JavaScript : 20,27% du poids total
  • CSS : 16,98% du poids total
  • Polices de caractères : 13,61% du poids total
  • Textes : 1,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

Bravo ! Vous respectez les bonnes pratiques suivantes

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 3 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
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

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>
  • 2 balise(s) <h2>


 
Voir plus
Apache 

100/100

La version de votre serveur Apache n'est pas exposée

Vous utilisez Apache, mais nous n'avons pas détecté quelle version. Une personne malveillante aura plus de mal à attaquer votre site, car elle ne saura pas quelle version utilise votre serveur Apache. C'est une bonne pratique.

Il y a deux valeurs à vérifier dans votre configuration pour que la version soit cachée: ServerSignature et ServerTokens.

# Cacher la version dans l'en-tête HTTP 'Server'.
# exemple: afficher uniquement "Server: Apache"
ServerTokens Prod
# Ne pas ajouter de ligne contenant
# le nom et la version du serveur
# à la fin de chaque réponse.
ServerSignature Off

Cependant, gardez en tête que le meilleur moyen de se prémunir d'attaques est de régulièrement mettre à jour votre serveur Apache.


 
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 :

Prestataire informatique pour les entreprises. Spécialiste du numérique nous vous accompagnons dans vos projets en répondant à vos besoins.


 
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