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 40.0 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 envoie 5ko 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.

    Ci-dessous la liste des cookies utilisés sur cette page :

    Nom de domaine : demo.prestarocket.com
    • PrestaShop-596f13efd82c0c8d21503ae086906423: 5ko répartis sur 31 requête(s)


     
    Voir plus
    Prestashop 

    Distribuer les ressources de la page via plusieurs sous-domaines

    Cette page contient moins de 50 ressources provenant de demo.prestarocket.com ou de ses sous-domaines, cette technique ne devrait pas trop influer sur ses performances. Nous vous conseillons tout de même de vérifier ses apports.

    Un navigateur web limite le nombre de requêtes envoyées simultanément à un même nom de domaine. Pour faciliter la parallélisation des requêtes, vous pouvez utiliser des sous-domaines.

    Une fois les sous-domaines mis en place du côté de votre hébergeur, il suffit de vous rendre sur l'interface d'administration de Prestashop, et de renseigner les nouvelles adresses dans la section Media servers. Prestashop se chargera de répartir les ressources à travers ces sous-domaines.


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

    Bravo ! Vous respectez les bonnes pratiques suivantes

    Accessibilité 

    100/100

    La langue de la page est spécifiée

    Votre page possède un attribut lang qui permet aux liseuses d'écran de prendre correctement en charge votre site.


     
    Voir moins
    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
    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