Analyse de qualité et performance web

http://zestedesavoir.com
Rapport généré le 27 oct. 2016 15:46:29
Télécharger le rapport
VISITEUR SIMULÉ : Chrome Paris 8.0/1.5Mbps (Latence : 50 ms) Modifier

Requêtes

36

Poids

546ko

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

0.30sec

Début affichage

0.63sec

Fin chargement

1.50sec


Erreurs navigateur 0OK
Speed Index: 682

Technologies :

Google Font API

MathJax

Modernizr

Nginx

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

Volume de données 

0/100

Activez la compression des ressources

En compressant vos ressources avec "gzip" ou "deflate", vous pouvez réduire le nombre d'octets envoyés sur le réseau.

Autorisez la compression des ressources suivantes afin de réduire le volume de données transférées de 96.1 Ko (réduction de 67%).

Cette page est retournée par un serveur Nginx. Vérifiez s'il utilise bien le module ngx_http_gzip_module.


 
Voir plus
Optimisation du rendu 

0/100

1 dépendance critique détectée

La défaillance d’un fournisseur de contenu externe peut rendre indisponible votre site.

Les Single Point Of Failure

Un Single Point Of Failure (SPOF) front-end se caractérise par une dépendance critique d'une page web à un contenu externe, susceptible d'empêcher totalement l’affichage de la page en cas de problème avec le fournisseur externe.

Par exemple, si votre page web appelle un script bloquant hébergé sur les serveurs de Google, votre page se trouve dépendante de toute défaillance provenant de l'appel à ce script. Voir notre article sur les SPOF pour en savoir plus.

Que faire pour éviter les SPOF ?

Éliminez ces dépendances autant que possible, même si elles concernent des fournisseurs renommés. Si vous devez faire appel à un contenu externe, assurez-vous que l'appel est effectué de manière asynchrone, et que vous disposez de fallbacks (alternatives en cas d’échec), afin de maîtriser le comportement de la page en cas de panne d'un service externe.


Nous nous assurons ici que la page analysée ne dépend pas de manière critique de ressources externes parmi les plus connues (googleapis, typekit, etc). Il s’agit en effet de cas de Single Point Of Failure front-end

La ressource suivante constitue un SPOF pour cette page :

  • //fonts.googleapis.com/css?family=Source+Sans+Pr[...]Pro:400,700|Merriweather:400,700


 
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:

  • 7 balise(s) <h2>
  • 18 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
Sécurité 

0/100

Cette page est exposée à des attaques du type "clickjacking"

Ne permettez pas à des personnes malveillantes d'intégrer vos pages sur leur site.

Clickjacking

Ce type d'attaque consiste à intégrer votre page sur un site malveillant via des balises <frame> ou <iframe>. Ainsi il est possible de faire croire à un internaute qu'il est sur votre propre page. L'internaute peu averti sera en confiance et sera potentiellement amené à saisir des informations que le site malveillant sera à même d'intercepter.

Vous devez donc indiquer quels domaines sont autorisés à intégrer votre page.

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

Configurez votre serveur de telle sorte que la réponse de la ressource principale contienne l'en-tête HTTP "X-Frame-Options".

Trois types de valeurs peuvent être définies :

  • DENY pour refuser toute frame ou iframe intégrant la page
  • SAMEORIGIN pour n'autoriser que les frames provenant du même nom de domaine
  • ALLOW-FROM uri pour préciser les domaines pouvant intégrer la page dans une frame (non compatible avec tous les navigateurs (EN))

  • L'en-tête "X-Frame-Options" n'est pas configuré sur cette page, vous êtes plus facilement exposé au clickjacking.


     
    Voir plus
    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 a annoncé son souhait de voir à terme tous les sites utiliser une connexion HTTPS. La société a ainsi ajouté ce critère dans ces algorithmes chargés du référencement. Voir l'annonce de Google sur le sujet (EN).

    La mise en place du HTTPS sur un site provoque parfois quelques réticences (coût, impact sur les performances...). Mais ces limitations sont de moins en moins vraies aujourd'hui, et la généralisation du HTTPS semble inéluctable.

    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 !

    Vous pouvez mettre en place HTTPS dès maintenant, notamment grâce à Let's Encrypt, une autorité de certification délivrant gratuitement des certificats.


     
    Voir plus
    Volume de données 

    82/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 5.2 Ko (réduction de 18%).

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

    0/100

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

    http://zestedesavoir.com/static/css/main.e0ba6d8c519f.css

    • .home .home-header: "background" surcharge la propriété "background-color" (ligne 2, col 142410)
    • .home .home-header: "background" surcharge la propriété "background-color" (ligne 2, col 142410)
    • .home .home-header: "background" surcharge la propriété "background-color" (ligne 2, col 142410)


     
    Voir plus
    Sécurité 

    0/100

    Bloquez la totalité du contenu lorsqu'une attaque XSS est suspectée

    Assurez-vous que le navigateur du client fasse son maximum pour prévenir d'une attaque de type XSS.

    Les attaques XSS

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

    Les navigateurs récents disposent de filtres intégrés pour détecter une possible attaque et prévenir l'internaute. Cette fonctionnalité peut cependant être désactivée par le client. Il est conseillé de forcer l'exécution de ces filtres. De plus, dans le cas d'une attaque XSS, il est préférable que l'utilisateur n'ait accès à aucun contenu de la page, afin de prévenir tout risque.

    La solution : configurer un en-tête HTTP "X-XSS-Protection"

    Ajoutez l'en-tête HTTP "X-XSS-Protection" avec "1; mode=block" pour valeur (1 pour indiquer l'activation, et mode=block pour préciser que toute la page doit être bloquée en cas de problème).


    La protection XSS n'est pas activée sur cette page.


     
    Voir plus
    Accessibilité 

    0/100

    1 bouton 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
    Qualité 

    0/100

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

    http://zestedesavoir.com/static/css/main.e0ba6d8c519f.css

    • .content-container input .disabled, .content-container input... (ligne 2, col 6623)
    • .content-container .disabled, .content-container [disabled],... (ligne 2, col 13174)
    • .content-container .disabled, .content-container [disabled],... (ligne 2, col 13199)
    • .content-container .disabled:not(.submitted), .content-conta... (ligne 2, col 13405)
    • .hidden {display: none!important} (ligne 2, col 23692)
    • .header-logo-link {background-image: url("../images/logo-mob... (ligne 2, col 30606)
    • .dropdown .dropdown-list>li.dropdown-empty-message {backgrou... (ligne 2, col 34508)
    • .dropdown .dropdown-link-all:first-child {border-top: 0!impo... (ligne 2, col 35320)
    • et 54 autres


     
    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.5 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é 

    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,55 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 : 47,58% du poids total
    • Images : 37,93% du poids total
    • Polices de caractères : 8,00% du poids total
    • CSS : 4,71% du poids total
    • Textes : 1,79% 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, mais 12 sont vides

    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 12 balises img et elles ont toutes un attribut alt.

    Attention, notez cependant que 12 de vos images contiennent un attribut alt, mais ils sont vides :

    • <img src="/media/galleries/2906/6c378f8f-0bb7-4338-929a-b5cdda3d00de.png.228x228_q95_crop.png" alt="" class="featured-resource-illu">
    • <img src="/media/galleries/1907/dc95c4ca-df43-4b26-9bb0-68b32887ea3a.png.228x228_q95_crop.jpg" alt="" class="featured-resource-illu">
    • <img src="/media/galleries/2906/2dc3cffe-0b42-41d6-bcc2-1db31e17f927.jpg.228x228_q95_crop.jpg" alt="" class="featured-resource-illu">
    • <img src="/media/galleries/1907/47f109f2-a4ad-491f-be0b-f87a91b67c70.png.228x228_q95_crop.jpg" alt="" class="featured-resource-illu">
    • <img src="/media/galleries/1907/2ec48ec5-219b-465e-aeb0-4ac610577b7d.png.228x228_q95_crop.jpg" alt="" class="featured-resource-illu">
    • <img src="/media/galleries/3148/9a178f86-a0eb-4475-aa82-526c534973ae.png.96x96_q95_crop.png" alt="">
    • <img src="/media/galleries/3209/94742efe-ac56-43a2-baf5-b427443c609a.png.96x96_q95_crop.png" alt="">
    • <img src="/media/galleries/305/ed13b8b3-1b2e-481e-8417-d02a943abd19.png.96x96_q95_crop.png" alt="">
    • <img src="/media/galleries/1577/03e38164-01b5-4d8e-839e-827f771e8825.png.96x96_q95_crop.jpg" alt="">
    • <img src="/media/galleries/3604/06c4bcad-e6a4-4857-8c2e-0f2d12ec5e34.png.96x96_q95_crop.png" alt="">
    • <img src="/media/galleries/3642/c370752c-bb95-42d5-bc5a-dfe12896b4de.png.96x96_q95_crop.png" alt="">
    • <img src="/media/galleries/2884/bfefc3ab-c276-4357-acab-cac7e9cfba4e.png.96x96_q95_crop.png" 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

    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 :

    Zeste de Savoir est un site de partage de connaissances sur lequel vous trouverez des tutoriels de tous niveaux, des articles et des forums d'entraide animés par et pour la communauté.


     
    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 :

            
            Zeste de Savoir
        


     
    Voir plus