Analyse de qualité et performance web

http://www.epe-chartres.com
Rapport généré le 14 nov. 2017 06:04:27
Télécharger le rapport
VISITEUR SIMULÉ : Chrome Paris 8.0/1.5Mbps (Latence : 50 ms) Modifier

Requêtes

132

Poids

3.26Mo

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.86sec

Début affichage

1.77sec

Fin chargement

4.68sec


Erreurs navigateur 1Critiques
Support d'HTTP/2 : 99%
Speed Index: 4309

Technologies :

AddThis

Joomla

MooTools

Nginx

PHP

Twitter Bootstrap

jQuery

spin.js


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 

0/100

Cette page charge 3,26 Mo de données, diminuez ce poids

Le poids de votre page est important, ce qui 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 : 74,38% du poids total
  • JavaScript : 16,77% du poids total
  • CSS : 3,94% du poids total
  • Polices de caractères : 3,67% du poids total
  • Textes : 1,12% du poids total
  • JSON : 0,13% 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
Sécurité 

0/100

N'utilisez pas de contenus mixtes

Cette page utilise le protocole HTTPS, et pour des raisons de sécurité, toutes ses ressources devraient être récupérées en utilisant le protocole HTTPS. Cependant, nous avons détecté des ressources chargées sur du simple HTTP. De telles ressources sont appelées des contenus mixtes (Mixed Contents).

La ressource suivante est un contenu mixte :

Sur certains navigateurs, le site ne sera plus indiqué comme sécurisé. Voici un exemple de l'impact d'un mixed content sur Chrome 55 :

Pire encore, le navigateur bloquera les ressources concernées s'il considère que la ressource peut interagir avec la page (scripts, css, iframes, etc). Pour éviter cela, vous devriez corriger le problème au plus vite.

Pour en savoir plus sur les contenus mixtes, vous pouvez lire cet article sur ce sujet.


 
Voir plus
Volume de données 

0/100

Optimisez vos images sans perte de qualité

En choisissant un format approprié pour vos images et en les compressant, vous pouvez libérer de nombreux octets de données.

Optimisez les images suivantes afin de réduire leur taille de 689.1 Ko (réduction de 32%).

Les images peuvent comporter des données inutiles à leur utilisation sur le web, ce qui peut augmenter considérablement leur poids. Des outils existent pour supprimer automatiquement ces données, sans perte de qualité, et ainsi réduire le poids de vos images.

Nous vous conseillons donc de supprimer les données inutiles grâce par exemple à jpegtran (format JPEG), OptiPNG (format PNG) ou ImageRecycle.


 
Voir plus
Nombre de requêtes 

0/100

1 redirection a nécessité 343 millisecondes de chargement

Les redirections déclenchent des allers-retours évitables sur le réseau, et allongent le temps de chargement de la page.

Redirections HTTP

Une redirection HTTP permet d'indiquer que le contenu souhaité est accessible depuis une autre URL. Plusieurs requêtes sont alors envoyées successivement pour récupérer la ressource cible. Les redirections HTTP se distingue grâce à leur code de retour, compris entre 300 et 399. Vois les spécifications des redirections HTTP.

Que faire ?

Permettez à l'utilisateur d'accéder directement à votre contenu, sans passer par les redirections, ou déterminez et améliorez ce qui provoque ces temps de chargement trop importants sur vos redirections. Voir les recommandations données par Google.


1 redirection a été trop longue pour accéder au bon contenu :


 
Voir plus
Référencement (SEO) 

0/100

Ajoutez un titre <h1> dans votre page

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:

  • 4 balise(s) <h2>
  • 6 balise(s) <h3>


 
Voir plus
Sécurité 

0/100

Il manque une politique de sécurité sur la provenance de vos ressources

Il est primordial de restreindre la provenance des contenus d'une page en vous prémunissant d'attaques de type XSS (Cross-Site Scripting).

Les attaques XSS

Une attaque de type XSS (Cross-Site scripting) a pour objectif d'injecter un contenu sur la page.

Pour accroître votre protection contre ces attaques, mettez en place une politique de sécurité qui va expliciter au navigateur web les serveurs qui sont autorisés à délivrer des ressources pour former la page. Si le navigateur effectue une requête vers un serveur non autorisé, il doit en informer l'internaute.

La solution : configurer un en-tête HTTP "Content-Security-Policy" (CSP)

Pour spécifier une politique de sécurité sur la provenance de vos ressources, 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, la page se charge correctement à condition que tous les scripts proviennent de l'hôte courant ou de https://apis.google.com.

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

Saviez-vous que ?

Qualité 

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

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

#0060bf #0088ee #0b55c4 #111111 #15253c #15497c #162335 #162c40 #171c26 #171c27 #282828 #285b01 #29abe2 #33b61c #3875d7 #3aa655 #3d3d3d #404040 #428bca #429e00 #464646 #474747 #484848 #48691b #4ecdc4 #545454 #54c401 #555555 #575757 #577f20 #595959 #5a8320 #5a8406 #5f9936 #606060 #616161 #61c46f #663300 #6ac212 #6b6b6b #6b95e7 #6f951e #729a1d #737373 #7ba428 #7e7e7e #82c250 #888888 #919191 #9fcfff #a0d039 #a2a2a2 #ad8b66 #ae0000 #afafaf #b5b5b5 #b5dbfb #b7d2f2 #b8b8b8 #bf0000 #c25412 #c3c3c3 #c3d2e5 #c4c4c4 #cbcbcb #cce9a5 #d0d0d0 #d4d4d4 #d6edb6 #d9d9d9 #d9edff #dbe7f8 #ddedbc #dedede #e06614 #e0e0e0 #e1e1e1 #e4e4e4 #e66000 #e6c0c0 #e6e6e6 #e7663f #e8e8e8 #e8edf1 #e8f4d7 #e9322d #eaeaea #ebebeb #ececec #ef593b #efe7b8 #eff8ff #f0f0f0 #f0f2f3 #f2f2f2 #f2f9e5 #f4f4f4 #f8b9b7 #f9f9f9 #faebcc #fcf8e3 #feabab #fef8e1 #feffde #ffdfdf #ffffd5 rgba(0,0,0,0.075) rgba(0,0,0,0.1) rgba(0,0,0,0.2) rgba(0,0,0,0.4) rgba(0,0,0,0.7) rgba(0,0,0,0.9) rgba(134,181,34,0.7) rgba(225,225,225,0.7) rgba(240,242,243,0.5) rgba(240,82,91,0.7) rgba(255,255,255,0.03) rgba(255,255,255,0.1) rgba(255,255,255,0.7) rgba(255,255,255,0.8) rgba(9,4,3,0.86)


 
Voir plus

Utiliser des extensions dédiées à la performance

Essayez différentes extensions pour optimiser les performances de votre site. La communauté Joomla met à votre disposition plusieurs extensions gratuites pour combiner vos fichiers, les compresser, etc.

Vous pouvez par exemple vérifier les bénéfices apportés par des extensions comme jbetolo ou JCH Optimize.


 
Voir plus
Sécurité 

4 cookies ne sont pas sécurisés

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 :

m.addthis.com/live/red_lojson/300lo.json?si=5a0a[...]s.oln9_34563489975688720

  • set-cookie: di2=aUmZ}7?S7:v6Hq;Path=/;Domain=.addthis.com;Expires=Sun, 09-Dec-2018 06:04:13 GMT
  • set-cookie: bt2=5a0a875d001Ks0002;Path=/;Domain=.addthis.com;Expires=Sat, 28-Jul-2018 06:04:13 GMT
  • set-cookie: uid=5a0a875dd38ee87f;Path=/;Domain=.addthis.com;Expires=Sun, 09-Dec-2018 06:04:13 GMT
  • set-cookie: vc=2;Path=/;Domain=.addthis.com;Expires=Sun, 09-Dec-2018 06:04:13 GMT


 
Voir plus
Optimisation du rendu 

Les ressources les plus lentes de la page

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

Voici les 10 requêtes les plus lentes, 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é 

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

www.epe-chartres.com/templates/jsn_dona_pr[...]css/template_pro.css

  • #jsn-header .jsn-modulec[...]line.search-menu label {color: #fff} (ligne 210, col 2)
  • .template-full-width {-webkit-box-sizing: border-box} (ligne 236, col 2)
  • .template-full-width {-moz-box-sizing: border-box} (ligne 237, col 2)
  • .template-full-width {box-sizing: border-box} (ligne 238, col 2)
  • div.jsn-modulecontainer [...]-mainmenu ul {visibility: visible\9} (ligne 698, col 2)
  • div.jsn-modulecontainer [...]-sidemenu ul {visibility: visible\9} (ligne 853, col 2)
  • ul#jsn-sitetools-menu li ul {visibility: visible\9} (ligne 1071, col 2)
  • #jsn-page .button {filte[...]m.microsoft.gradient(enabled=false)} (ligne 1496, col 2)
  • .button:hover, .button:a[...]m.microsoft.gradient(enabled=false)} (ligne 1514, col 2)

www.epe-chartres.com/modules/mod_bt_smarts[...]/tmpl/css/chosen.css

  • .chzn-container-single .[...] white), color-stop(0.99, #eeeeee))} (ligne 90, col 3)
  • .chzn-container-single .[...]ter bottom, white 85%, #eeeeee 99%)} (ligne 91, col 3)
  • .chzn-container-single .[...]ter bottom, white 85%, #eeeeee 99%)} (ligne 92, col 3)
  • .chzn-container-single .[...]ent(bottom, white 85%, #eeeeee 99%)} (ligne 93, col 3)
  • .chzn-container-single .[...]dient(top, #ffffff 85%,#eeeeee 99%)} (ligne 94, col 3)
  • .chzn-container-single .[...]dient(top, #ffffff 85%,#eeeeee 99%)} (ligne 96, col 3)
  • .chzn-container-multi .chzn-choices {height: 1%} (ligne 130, col 3)
  • .chzn-rtl .chzn-search i[...] white), color-stop(0.99, #eeeeee))} (ligne 319, col 3)
  • et 5 autres

https://www.epe-chartres.com/ (inline 0)

  • div.jsn-modulecontainer [...]ainmenu ul ul {margin-left: 220px\9} (ligne 9, col 5)
  • div.jsn-modulecontainer [...]menu-flipback ul ul {right: 220px\9} (ligne 15, col 5)
  • #jsn-pos-toolbar div.jsn[...]inmenu ul ul {margin-right: 220px\9} (ligne 21, col 5)

https://www.epe-chartres.com/templates/jsn_dona_pro/css/custom.css

  • body.jsn-mobile .jsn-con[...]-content {width: calc(100% - 145px)} (ligne 2254, col 3)
  • body.jsn-mobile .jsn-con[...]-content {width: calc(100% - 135px)} (ligne 2446, col 3)

www.epe-chartres.com/templates/jsn_dona_pr[...]youts/jsn_mobile.css

  • #jsn-menu [id*="jsn-pos-[...]ons-base.png) left -756px no-repeat} (ligne 287, col 4)

www.epe-chartres.com/plugins/system/pagebu[...]/css/pagebuilder.css

  • .pb-layout-thumbs {display: block} (ligne 467, col 5)


 
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

Compatibilité 

100/100

Le plugin Silverlight n'est pas utilisé

Le plugin Silverlight est considéré comme obsolète en 2015, et n’apporte rien par rapport à ce qui peut être fait nativement avec le HTML5. Son utilisation vous expose à des soucis de compatibilité et peut renvoyer des signaux négatifs à vos utilisateurs (exemple : le navigateur qui indique qu’un contenu a été bloqué car susceptible d’être dangereux).

Félicitations, cette page ne nécessite pas le plugin Silverlight.


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

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 utilise Joomla. Vous pouvez configurer une <meta> description par defaut dans la partie "Global Configuration" de l'interface d'administration. Par ailleurs il est préférable de mettre une <meta> description différente pour chaque page via l'onglet "publication" lors de l'édition d'une catégorie ou d'un article.

Cette page définit une <meta> description :

Eglise Protestante Evangélique La Bonne Nouvelle de Chartres. Une communauté chaleureuse pour découvrir ensemble La Parole de DIEU et son action dans nos vies. Bienvenue et bonne visite !


 
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 :

Accueil - Eglise Protestante Evangélique - La Bonne Nouvelle de Chartres


 
Voir plus