Analyse de qualité et performance web

http://sifa.fr
Rapport généré le 1 juin 2016 13:31:18

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

Requêtes

39

Poids

1.22Mo

HTML CSS Scripts Images Autres
Timeline / Waterfall

Premier octet

1.49sec

Début affichage

2.23sec

Fin chargement

3.21sec


Erreurs navigateur 1Critiques
Speed Index: 2327

Technologies :

Apache

Google Analytics

Google Font API

PHP

PrestaShop

Twitter Bootstrap

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

Qualité 

0/100

1 ressource a une extension non cohérente avec le contenu réel

L'extension d'une ressource permet de repérer facilement le type de contenu qui y est associé. Vous n'avez aucun intérêt à indiquer une extension différente du type réel d'un fichier.

Ainsi, une ressource nommée ressource.js devra être associée à un en-tête HTTP Content-Type ayant pour valeur application/javascript. Vous pouvez vérifier la valeur de l'en-tête Content-Type à l'aide d'un outil de debug, comme Firebug.


Sur cette page, une ressource indique une extension qui n'est pas en adéquation avec son Content-Type observé :


 
Voir plus
Nombre de requêtes 

0/100

1 redirection a nécessité 299 millisecondes de chargement

Les redirections déclenchent des allers-retours évitables sur le réseau, et allongent le temps de chargement de la page.

Redirections HTTP

Une redirection HTTP permet d'indiquer que le contenu souhaité est accessible depuis une autre URL. Plusieurs requêtes sont alors envoyées successivement pour récupérer la ressource cible. Les redirections HTTP se distingue grâce à leur code de retour, compris entre 300 et 399. Vois les spécifications des redirections HTTP.

Que faire ?

Permettez à l'utilisateur d'accéder directement à votre contenu, sans passer par les redirections, ou déterminez et améliorez ce qui provoque ces temps de chargement trop importants sur vos redirections. Voir les recommandations données par Google.


1 redirection a été trop longue pour accéder au bon contenu :


 
Voir plus
Référencement (SEO) 

0/100

Définissez au moins des balises <h1> et <h2>

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). Les balises h4, h5, h6 servent uniquement à améliorer la présentation de votre contenu.
Cette page contient:

  • 3 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.

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 (fichier .htaccess par exemple), 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.


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


 
Voir plus
Google Font API 

0/100

Vous devriez charger les polices caractères de Google en une seule fois

L'API de Google Font permet de minimiser le nombre de requêtes pour récupérer les polices de caractères que vous souhaitez.

Les polices de caractères avec Google Font

Cette page utilise des polices de caractères mises à disposition par Google afin d'améliorer son rendu.

Comment les récupérer ?

Il est possible de charger les polices caractères de Google en une seule requête. Par exemple, si votre code ressemble à ceci :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:normal,italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster:bold,bolditalic">

Il est préférable de le remplacer par la forme suivante, qui récupèrera le même contenu en une seule fois :

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:normal,italic|Lobster:bold,bolditalic">

Dans votre cas, une optimisation est possible pour les requêtes suivantes :


 
Voir plus
Optimisation du rendu 

0/100

Évitez d'utiliser les @import CSS

L'utilisation de l'instruction CSS @import permet d'ajouter des feuilles de style. En réalité, les navigateurs internet ne peuvent pas les télécharger en parallèle, et cela peut ajouter un délai dans l'affichage de la page. Il faut plutôt utiliser la balise link. En savoir plus.

Les feuilles de style externes suivantes ont été incluses dans cdn2.sifa.fr/themes/default-bootstra[...]ce4a2b96_all.css à l'aide de @import :

  • //fonts.googleapis.com/css?family=Open+Sans


 
Voir plus

Saviez-vous que ?

Optimisation du rendu 

Les 10 ressources les plus lentes de la page

Le temps total de chargement de la page est de 3.2 secondes. 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
Volume de données 

Cette page charge 1,22 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 :

  • Images : 73,16% du poids total
  • Polices de caractères : 9,94% du poids total
  • JavaScript : 7,53% du poids total
  • Textes : 5,61% du poids total
  • CSS : 3,76% du poids total

Par ailleurs, voici les 10 les plus lourdes qui sont téléchargées lors du chargement de votre page :


 
Voir plus
Référencement (SEO) 

Cette page comporte 14 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 à de nombreux liens, vous pouvez demander aux algorithmes de référencement de ne s'intéresser qu'à certains d'entre eux, en ajoutant un attribut rel=nofollow sur ceux qui ne sont pas pertinents (ex: publicités).

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

  • 12 liens internes (85,71%)
  • 2 liens externes "follow" (14,29%)
  • Aucun lien externe "nofollow" (0,00%)


 
Voir plus

Bravo ! Vous respectez les bonnes pratiques suivantes

Référencement (SEO) 

100/100

Vos balises <img> contiennent toutes un attribut alt, mais 1 est vide

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

Attention, notez cependant que 1 de vos images contient un attribut alt, mais il est vide :

  • <img src="https://cdn3.sifa.fr/modules/themeconfigurator/img/b12701b9bcabc4224c4909b41706f12d6ef1b7b5_sifa-imagetop2.jpg" class="item-img " title="" alt="" width="381" height="219"/>

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', '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 n'avez pas de script inline trop long sur cette page.


 
Voir plus
Qualité 

100/100

Aucun tableau imbriqué n'a été trouvé

La balise table ne doit être utilisée que pour représenter des données ordonnées. Pour gérer la mise en page, il est recommandé d'utiliser des instructions CSS.

Pour représenter des données complexes, vous pouvez vous appuyer sur des propriétés comme colspan et rowspan.

Aucune imbrication de tableaux (balises table) n'a été trouvée.


 
Voir plus
Apache 

100/100

La version de votre serveur Apache n'est pas exposée

Vous utilisez Apache, mais nous n'avons pas détecté quelle version. Une personne malveillante aura plus de mal à attaquer votre site, car elle ne saura pas quelle version utilise votre serveur Apache. C'est une bonne pratique.

Il y a deux valeurs à vérifier dans votre configuration pour que la version soit cachée: ServerSignature et ServerTokens.

# Cacher la version dans l'en-tête HTTP 'Server'.
# exemple: afficher uniquement "Server: Apache"
ServerTokens Prod
# Ne pas ajouter de ligne contenant
# le nom et la version du serveur
# à la fin de chaque réponse.
ServerSignature Off

Cependant, gardez en tête que le meilleur moyen de se prémunir d'attaques est de régulièrement mettre à jour votre serveur Apache.


 
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 :

Expert en pièces détachées automobile depuis plus de 50 ans, basés à Arnouville dans le 95, Val d'Oise.


 
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