Analyse de qualité et performance web

http://demo.prestarocket.com
Rapport généré le 7 mai 2015 11:28:25
Télécharger le rapport
96%
Impressionnant !
Pourquoi s'arrêter là ?
1

Problèmes

6

Améliorations

72

Succès


Voir les priorités

Screenshot


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

Requêtes

40

Poids

615ko

Timeline / Waterfall

Premier octet

0.47sec

First paint

Non
disponible

Fin chargement

1.21sec


Erreurs navigateur 0OK

Technologies :

Apache

Google Font API

Modernizr

Prestashop

PHP


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

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

    Désactivez la détection automatique du type des ressources

    Protégez-vous de l'exploitation malveillante du MIME Sniffing.

    Le MIME sniffing

    Les navigateurs Internet Explorer et Chrome disposent d'une fonctionnalité dite de "MIME-Type sniffing", qui consiste à détecter automatiquement le type d'une ressource web. Ainsi, une ressource déclarée comme étant une image pourra être interprétée comme un script si tel est son contenu.

    Une personne malveillante pourrait profiter d'un envoi de fichier sur votre site par exemple pour injecter du code malveillant. Nous vous conseillons de désactiver le MIME-Type sniffing pour limiter les effets de l'envoi d'un tel fichier.

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

    L'en-tête HTTP "X-Content-Type-Options" associé à la valeur "nosniff" vous permet de vous prémunir du risque d'une mauvaise interprétation de vos ressources.


    Sur cette page, une ressource risque d'être mal interprétée :

    Note : vous ne pouvez pas modifier directement ces fichiers, car ils proviennent de partis tiers. Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en accord avec la bonne pratique.


     
    Voir plus
    Politique de cache 

    0/100

    Supprimez les paramètres de requête des ressources statiques

    Les ressources dont l'URL comporte un "?" ne sont pas mises en cache par les serveurs proxy de mise en cache. Supprimez la chaîne de la requête et encodez les paramètres dans l'URL pour les ressources suivantes :


     
    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.


     
    Voir plus
    Politique de cache 

    49/100

    N'utilisez 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', 'dareboost.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 devriez créer une ressource distincte pour ce script :

    • var CUSTOMIZE_TEXTFIELD = 1;
      var FancyboxI18nClose = 'Fermer';
      var FancyboxI18nNext = 'Suiv.';
      var FancyboxI18nPrev = 'Préc.';
      var added_to_wis...


     
    Voir plus
    Volume de données 

    81/100

    1 image est redimensionnée via un attribut width/height

    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

    L'utilisation des attributs width et height dans les balises img pour réduire la taille d'affichage d'une image n'est pas une alternative recommandée.

    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.

    Ne redimensionnez pas l'image suivante :


     
    Voir plus

    Saviez-vous que ?

    Volume de données 

    Cette page charge 0,59 Mo de données, diminuez ce poids

    Une quantité importante de données implique une charge plus importante sur le réseau et un temps de chargement plus élevé.

    Situer le poids de mon site web

    En novembre 2014, le poids moyen des 1 000 pages les plus visitées dans le monde était de 1795ko. Cette moyenne ne cesse d'augmenter au fil du temps, dû à une vonlonté de rendre les sites internet plus attrayant en ajoutant des images et du javascript.

    Comment réduire le poids de ma page ?

    Lorsque vous optimisez votre site, posez vous toujours cette question : cette portion de code est-elle indispensable pour que l'utilisateur puisse visualiser et utiliser la page ? Seul ce type de contenu doit être chargé en priorité. Pour tout autre contenu (plugins de réseaux sociaux, publicités, contenu additionnel pour les pages longues...), un effort d'optimisation est à faire pour reporter leur chargement (chargement asynchrone, lazy-loading...).

    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, nous avons établi la répartition du poids de la page par type de ressources :

    • Images : 48,97% du poids total
    • Polices de caractères : 29,07% du poids total
    • JavaScript : 15,97% du poids total
    • CSS : 4,40% du poids total
    • Textes : 1,60% du poids total

    Par ailleurs, voici les 10 plus grosses ressources qui transitent sur le réseau, et qui sont nécessaires au chargement de la page :


     
    Voir plus
    Référencement (SEO) 

    Cette page comporte 148 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 à plusieurs pages, vous pouvez demander aux algorithmes de référencement de ne s'intéresser qu'à certaines d'entre elles, en ajoutant un attribut rel=nofollow sur les liens les moins pertinents.

    Voici la répartition des 148 liens contenus dans la page :

    • 136 liens internes (91,89%)
    • 11 liens externes "follow" (7,43%)
    • 1 liens externes "nofollow" (0,68%)


     
    Voir plus
    Sécurité 

    39 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 "prestarocket"
    Ressources provenant de partis tiers

    Note : vous ne pouvez pas modifier directement ces fichiers, car ils proviennent de partis tiers. Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en accord avec la bonne pratique.


     
    Voir plus
    Optimisation du rendu 

    Vos 10 ressources les plus longues à charger

    Votre temps total de chargement est de 1.2 secondes. Voici les 10 ressources les plus longues à se charger :

    Pour rappel, le temps moyen de chargement pour les 1 000 sites les plus visités dans le monde est de 6.0 secondes.

    Pour en savoir plus, vous pouvez consulter la timeline.

    Cette page utilise Prestashop. En savoir plus pour optimiser les performances de votre site.


     
    Voir plus
    Prestashop 

    Cryptez vos cookies avec mcrypt

    Améliorez la sécurité de vos cookies en autorisant leur cryptage par Prestashop. Il suffit d'activer l'option Use Rijndael with mcrypt lib dans l'interface d'administration de votre site. Par ailleurs, veillez à ce que votre PHP soit bien compilé avec l'extension mcrypt. Sinon, pensez à l'ajouter.


     
    Voir plus
    Prestashop 

    Il est possible d'activer Memcached

    Memcached est un système de cache situé au niveau de la mémoire vive de votre serveur. Pensez à l'installer et à l'activer via l'interface d'administration de votre site. Il vous permettra d'accélérer les requêtes de bases de données PHP.


     
    Voir plus

    Bravo ! Vous respectez les bonnes pratiques suivantes

    Nombre de requêtes 

    100/100

    Vous utilisez des sprites CSS pour vos images

    Combiner les petites images dans une sprite CSS réduit le nombre de fichiers que le navigateur doit télécharger et accélère donc le chargement de votre page.

    Les sprites CSS

    Une sprite CSS est un fichier unique dans lequel plusieurs petites images sont regroupées, positionnées les unes à côté des autres. L'affichage de chaque petite image au sein de votre page se fait ensuite par l'application de styles CSS. Une seule requête est alors nécessaire pour récupérer l'ensemble des images. Cette technique est à utiliser uniquement pour les petites images, comme des icônes par exemple, afin que la sprite CSS ne soit pas trop lourde.

    Exemple

    Voici un exemple de sprite CSS, regroupant plusieurs icônes :

    exemple de sprite CSS

    La page applique par ailleurs les styles associés à la sprite, du type :

    .sprite {
    background-image: url(img/sprite.png);
    background-repeat: no-repeat;
    display: block;
    }

    .sprite-browsers-firefox {
    width: 31px;
    height: 28px;
    background-position: -74px 0;
    }

    Il reste à définir la bonne classe dans votre fichier HTML, et l'icône apparaît :

    <span class="sprite sprite-browsers-firefox"></span>
    Comment créer une sprite CSS ?

    Des outils facilitent leur création qui peut se révéler complexe. Par exemple :

    Vous obtenez alors votre sprite CSS avec les styles à appliquer.


     
    Voir plus
    Volume de données 

    100/100

    28 images sont chargées

    Ne chargez en priorité que les images nécessaires au bon fonctionnement de la page.

    Page web et images

    Les images représentent un enjeu majeur pour les pages web. Elles sont trop souvent mal optimisées et impactent fortement le poids total de la page.

    Il est donc nécessaire de charger uniquement les images en priorité. Le chargement des autres images doit être différé.

    Comment différer les images non prioritaires ?

    Pour différer le chargement de contenu afin de ne pas augmenter le temps total de chargement de la page, vous pouvez par exemple vous renseigner sur le "lazy-loading".

    Nous vous conseillons de charger moins de 70 images pour respecter cette bonne pratique.


     
    Voir plus
    Optimisation du rendu 

    100/100

    Vous interprétez et exécutez vos scripts une seule fois

    Une librairie ou un script externe sont le plus souvent destinés à être appelé une seule fois par page. Cependant l'utilisation de widgets par exemple peut conduire à plusieurs exécutions inutiles si aucune précaution n'est apportée.

    Duplication de scripts

    Il est de plus en plus courant de voir des scripts utilisés plusieurs fois au sein d'une même page. Le cas le plus courant est l'intégration de widgets de réseaux sociaux, qu'il est parfois utile de retrouver à plusieurs endroits sur la page pour améliorer son taux d'engagement par exemple. Il ne s'agit pas d'une mauvaise pratique en soit, il faut cependant veiller à certains critères afin de ne pas voir le temps de chargement de la page s'allonger.

    Que se passe-t-il si un script est inclu 2 fois dans le code ? Combien de fois est-il chargé ? Interprété ? Exécuté ?

    La plupart des navigateurs web récents ne téléchargent qu'une seule fois un script inclu 2 fois. Une exception subsiste : Firefox, qui chargera le fichier autant de fois qu'indiqué si aucune politique de cache efficace n'est configurée.

    Outre cette exception, les problèmes de performances vont se ressentir au moment de l'interprétation et l'exécution des scripts. En effet, si le script est mentionné 3 fois dans le code, il sera exécuté 3 fois, et ce sur tous les navigateurs.

    Pour plus de détails, n'hésitez pas à consulter cet article sur le sujet (EN).

    La solution

    Il reste tout de même une solution pour pouvoir utiliser un script plusieurs fois sans l'interpréter et l'exécuter plus d'une fois. Vous devez écrire du code JavaScript, qui vérifie si le script est présent. Si oui, il l'utilise, sinon, il l'injecte afin de l'utiliser.

    Prenons l'exemple du widget Facebook, toujours tiré de l'article ci-dessus. À chaque fois que vous voulez intégrer cette fonctionnalité dans votre page, il est nécessaire d'inclure le code suivant :

    (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    Notez en gras la ligne de vérification de la présence du script dans le document. Le script est alors inclu, interprété et exécuté uniquement lors du premier appel dans la page. Les autres appels tomberont dans le cas de la ligne mise en valeur, et ne feront donc qu'utiliser le script déjà inclu et exécuté.


     
    Voir plus
    Référencement (SEO) 

    100/100

    La balise <title> a une taille adéquate

    Cette page définit un titre qui contient moins de 55 caractères (voir plus d'informations) :

    Theme et Module Prestashop - Demo


     
    Voir plus
    Sécurité 

    100/100

    Présence d'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.

    Apache logo La CSP peut se configurer avec Apache. Assurez vous tout d'abord que le module mod_headers est bien activé. Ensuite, dans votre configuration, vous pouvez indiquer votre politique de sécurité en adéquation avec votre cas. Ci-dessous un exemple :

    <IfModule mod_headers.c>
    Header set Content-Security-Policy "script-src 'self' https://www.google.com"
    </IfModule>

    Dans cet exemple, la page n'accepte que les scripts provenant du même nom de domaine et de google.com.


    Cette page définit une CSP, qui lui permet de s'assurer de l'origine de ses ressources.


     
    Voir plus
    Référencement (SEO) 

    100/100

    Votre <meta> "description" a une taille cohérente

    Cette page définit une <meta> description qui contient moins de 300 caractères:

    Theme et Module Prestashop pour boutiques performantes

    La description est utilisée dans les résultats fournis par les moteurs de recherche (Search Engine Results Page - SERP), tel Google, pour indiquer un court texte informatif sur la page :

    Les moteurs de recherche coupent la description à 300 caractères environ. Vous ne serez pas pénalisé par Google si votre texte est trop grand, mais tous les mots indiqués au delà de ce seuil seront ignorés. En savoir plus.


     
    Voir plus