Analyse de qualité et performance web

http://formation-wordpress.net/
Rapport généré le 10 févr. 2015 06:07:20
Télécharger le rapport
94%
Beau boulot !
Plus qu'un petit effort
6

Problèmes

1

Améliorations

59

Succès


Voir les priorités

Screenshot


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

Requêtes

15

Poids

125ko

Timeline / Waterfall

Premier octet

0.13sec

First paint

Non
disponible

Fin chargement

0.48sec


Erreurs navigateur 0OK

Technologies :

Google Font API

jQuery

Nginx

PHP

Varnish

WordPress


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 

34/100

Vous pouvez réduire certains fichiers CSS (minification)

En compressant votre code CSS, vous pouvez libérer de nombreux octets de données et réduire les délais de téléchargement et d'analyse.

Réduisez la taille des ressources CSS suivantes afin de gagner 2.1 Ko (réduction de 23%).

Ressources provenant de "formation-wordpress"
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.

De nombreux outils existent pour minifier des fichiers CSS. C'est le cas de YUI Compressor ou cssmin.js, recommandés par Google.

Par ailleurs, WordPress dispose de plusieurs plugins très utiles pour minifier vos ressources. Vous pouvez notamment utiliser des plugins populaires comme WP Rocket ou encore W3 Total Cache.


 
Voir plus
Sécurité 

0/100

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

Il est primordial de garantir 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.


Aucune CSP n'a été détectée sur cette page : elle est plus facilement exposée à des attaques de type XSS.


 
Voir plus
Qualité 

0/100

Aucune favicon n'est définie

Vous n'avez pas défini de favicon sur cette page. Vous devriez en mettre une en place dans la balise head, comme indiqué ci-dessous :

<link rel="icon" type="image/png" href="/path/favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/path/favicon.ico" /><![endif]-->

Une Favicon est une petite image fournissant une icône à un site web. Elle est située à la racine du serveur et le navigateur la demandera toujours. Il est préférable de ne pas répondre par un code HTTP 404 (ressource non trouvée).

De plus ce fichier sera demandé pour chaque nouvelle page: il faut le mettre en cache pour qu'il ne soit demandé qu'une seule fois. En savoir plus.


 
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
Référencement (SEO) 

0/100

Améliorez la lecture de votre site par les réseaux sociaux

En aidant l'intégration dans les réseaux sociaux, vous renforcez le référencement de vos pages.

Les propriétés Open Graph

Plusieurs propriétés permettent aux réseaux sociaux d'en savoir plus sur le contenu de la page. Nous vous recommandons d'utiliser au moins les quatre propriétés suivantes :

  • <meta property="og:title" content="The title" />
  • <meta property="og:type" content="The type" />
  • <meta property="og:url" content="http://url.com/" />
  • <meta property="og:image" content="http://image.jpg" />

Ces informations permettent d'améliorer le lien entre votre page et les différents résaux sociaux, notamment Facebook, ce qui constitue un plus en terme de référencement. En savoir plus sur les propriétés Open Graph.

Cette page utilise des propriétés Open Graph. Cependant, les propriétés suivantes sont manquantes :

  • <meta property="og:image" content="http://image.jpg" />


 
Voir plus
Référencement (SEO) 

0/100

Le contenu de la balise <title> risque d'être tronqué

La balise title doit faire moins de 55 caractères (voir plus d'informations). Celle-ci en fait 59:

Formation WordPress - Clone d'un site hébergé par WPServeur


 
Voir plus

Saviez-vous que ?

WordPress 

Gérer le cache avec WordPress

WordPress dispose de plusieurs plugins très utiles pour améliorer la gestion du cache. Voir la liste des plugins disponibles.

Vous pouvez notamment utiliser des plugins populaires comme WP Rocket, WP Super cache ou encore W3 Total Cache.


 
Voir plus
WordPress 

Veillez à la configuration de vos plugins WordPress

L'utilisation d'un CMS comme WordPress implique l'installation et la configuration de plusieurs plugins. Dans certains cas, ces ajouts peuvent ralentir le temps de chargement de la page.

Vous devriez tester le plugin WordPress Plugin Performance Profiler (P3) pour améliorer la configuration de vos plugins, et ainsi augmenter les performances de votre site.


 
Voir plus

Des partis tiers utilisent le sélecteur jQuery $("#id test") plutôt que $("#id").find("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 d'infomations sur l'apport en performances de cette technique.


 
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
Optimisation du rendu 

 
Voir plus
Volume de données 

Cette page charge 0,12 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 :

  • JavaScript : 38,50% du poids total
  • Polices de caractères : 34,83% du poids total
  • Images : 9,21% du poids total
  • CSS : 7,47% du poids total
  • Autres : 6,73% du poids total
  • Textes : 3,26% 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

Bravo ! Vous respectez les bonnes pratiques suivantes

jQuery 

100/100

Eléments dépréciés dans la version 1.10

Vous n'utilisez ni fonctions, ni propriétés dépréciées pour votre version de jQuery. C'est une bonne pratique.

Les fonctions dépréciées indiquent que leur usage doit être évité : elles seront supprimées dans les versions à venir.


 
Voir plus
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 l'article de Steve Souders sur le sujet.

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 de Steve Souders. À 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

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

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

Site test de vitesse pour WP Serveur - Hébergement WordPress de haute qualité

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
Politique de cache 

100/100

La durée du cache est supérieure à 48h

En permettant la conservation de vos ressources statiques plusieurs jours en cache, vous diminuez la charge de votre serveur.

Certaines de vos ressources utilisent l'en-tête HTTP Expires pour disposer d'une politique de cache efficace, ce qui correspond à une bonne pratique. Cependant, vous devriez envisager d'améliorer sa configuration pour profiter au mieux des mécanismes de cache.

Quelle configuration adopter ?

Nous vous conseillons de paramétrer l'en-tête Expires afin que la date mentionnée soit comprise entre 2 jours et 1 an.


Vos ressources sont mises en cache durant au moins 2 jours grâce à l'en-tête 'Expires'.


 
Voir plus
Volume de données 

100/100

Vos images sont diffusées à la bonne échelle

Félicitations ! Aucun redimensionnement d'image n'a été détecté.

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

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


 
Voir plus