Analyse de qualité et performance web

https://www.payplug.com/
Rapport généré le 26 juil. 2015 14:56:21
Télécharger le rapport
VISITEUR SIMULÉ : Chrome Paris 8.0/1.5Mbps (Latence : 50 ms) Modifier

Requêtes

111

Poids

1.07Mo

Timeline / Waterfall

Premier octet

0.51sec

Début affichage

2.77sec

Fin chargement

7.20sec


Erreurs navigateur 0OK
Speed Index: 2944

Technologies :

Apache

Google Analytics

jQuery

jQuery UI

Modernizr

Optimizely

WordPress

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

Politique de cache 

0/100

26 de vos requêtes ne définissent pas de politique de cache avec WordPress ou Apache

Les en-têtes Expires sont indispensables pour une politique de cache efficace, et vont grandement impacter le temps de chargement de vos pages lors des prochaines visites.

L'en-tête expires

Vous pouvez définir une date d'expiration pour chaque ressource : tant que la date n'est pas dépassée, l'utilisateur stocke et utilise la ressource en cache.

La date d'expiration des ressources se paramètre à l'aide de l'en-tête HTTP Expires:

Expires: Thu, 25 Dec 2014 20:00:00 GMT

Vous pouvez indiquer une date d'expiration lointaine pour les ressources statiques (1 an maximum), et plus proche pour des ressources suceptibles d'être modifiées (48h minimum).

Lorsque vous mettez en production une nouvelle version de votre site, pensez bien à renommer les ressources statiques ayant été modifiées. En effet, si vous ne changez pas leur nom, vos utilisateurs garderont les ressources stockées en cache, correspondant à l'ancienne version. Ils risquent alors de se retrouver dans une version instable de votre page. Ce principe, appelé versioning, est par exemple appliqué sur DareBoost.com. Nous intégrons une version aux noms de nos fichiers :

dareboost.min.20140101.js

Voir les recommandations de Yahoo! sur le sujet.

Que faire ?

WordPress dispose de plusieurs plugins très utiles pour améliorer la politique de cache de votre site. Vous pouvez notamment utiliser des plugins populaires comme WP Rocket ou encore W3 Total Cache.

Apache logo Sinon, vous pouvez directement utiliser le module mod_expires sur votre serveur Apache et mettre en place la configuration adéquate.


26 de vos ressources n'ont pas de date d'expiration :


 
Voir plus
Optimisation du rendu 

0/100

Différez l'utilisation du code JavaScript

Le JavaScript bloque l'interprétation de la page par défaut. Vous devez différer au maximum son utilisation afin de favoriser en priorité l'affichage des premiers éléments de la page.

Que faire ?

Assurez vous dans un premier temps que vos scripts sont placés le plus bas possible au sein de la page (idéalement à la fin du <body>). Ensuite, utilisez tant que possible l'une des techniques suivantes pour différer l'analyse de vos fichiers JavaScript :

  • utilisation de l'attribut async
  • utilisation de l'attribut defer
  • ajout du script dans le DOM en JavaScript, lors de l'évènement onload

344.3 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
Accessibilité 

0/100

La langue de la page n'est pas spécifiée

Votre page devrait posséder un attribut lang sur le nœud racine html: cela permettra aux liseuses d'écran de prendre correctement en charge votre site.


 
Voir moins
Volume de données 

68/100

Optimisez vos images sans perte de qualité avec WordPress

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 18.8 Ko (réduction de 4%).

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. Vous pouvez notamment utiliser un plugin comme EWWW Image Optimizer.


 
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
    Nombre de requêtes 

    48/100

    Regroupez 11 fichiers JavaScript

    Chaque requête HTTP représente un coût en terme de performance (roundtrip time, utilisation de bande passante...).

    Il est ainsi préférable de faire une requête vers un fichier de 50ko de données plutôt que 10 requêtes vers des fichiers de 5ko.

    Quelle répartition adopter ?

    Répartissez vos scripts en les intégrant directement dans votre code HTML ou en les regroupant dans des fichiers de taille plus conséquente. Nous vous conseillons l'emploi de cette dernière méthode pour profiter des mécanismes de cache.

    Vous devriez reconsidérer les ressources suivantes :


     
    Voir plus

    Saviez-vous que ?

    Volume de données 

    Cette page charge 1.02 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 : 56.83% du poids total
    • CSS : 19.24% du poids total
    • JavaScript : 18.66% du poids total
    • Textes : 3.32% du poids total
    • Polices de caractères : 0.68% du poids total
    • JSON : 0.10% 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 37 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 37 liens contenus dans la page :

    • 35 liens internes (94.59%)
    • 2 liens externes "follow" (5.41%)
    • 0 liens externes "nofollow" (0.00%)


     
    Voir plus
    Sécurité 

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

    Les ressources suivantes sont hébergées par un parti tiers, il se peut donc qu'elles ne soient pas sous votre responsabilité. 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 7.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.


     
    Voir plus
    Accessibilité 

    Aucune balise <noscript> n'est définie

    Vous devez avoir au moins une balise noscript si vous utilisez des balises script. 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

    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

    34 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) :

    PayPlug - Your payment solution


     
    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:

    Thousands of merchants already use PayPlug. Bed and Breakfasts and... Darnia Cosmétiques accept payment by bank card via PayPlug...

    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