Monitoring et réseaux sociaux

30mar/111

Comment améliorer la rapidité et l’ergonomie de mon site – 2

Vous souhaitez améliorer votre positionnement sur les moteurs de recherche ou simplement augmenter votre taux de conversion de visiteur en acheteur sur votre site e-commerce voici des conseils pour améliorer la rapidité de votre site Web :

Analyser la rapidité de son site

WPO

Comme le suggère le processus WPO :

  • – Evaluation
  • – Benchmark
  • – Monitoring
  • – Optimisation

Avant d’optimiser la performance de son site Internet il faut préalablement commencer par l’étape 1, l’évaluation :

Voici des outils qui vous permettront d'évaluer la vitesse de votre site Internet:

Performance, un outil en ligne

Tester la rapidité de votre site Internet en ligne sur http://www.monitoring-transactionnel.com/performance

Vous obtiendrez des résultats comme ceux ci :

  1. Voyage SNCF
  2. Rue du commerce
  3. Le bon coin
  4. Google

Page Speed

Page Speed est un plugin pour le navigateur Firefox. Vous pouvez le télécharger ici :

http://code.google.com/intl/fr/speed/page-speed/

Il est nécessaire l'installer le plugin Firebug pour utiliser Page Speed :

https://addons.mozilla.org/fr/firefox/addon/1843/

L'utilisation est très simple.

Démarrez Firefox sur le site que vous souhaitez analyser, dans notre cas : http://www.monitoring-transactionnel.com/

Lancez Firebug en appuyant sur F12 :

Page Speed + Firebug + Firefox

Page Speed + Firebug + Firefox

Selectionnez l'onglet Page Speed, puis cliquez sur 'Démarrer l'analyse'.

Dans mon cas, Page Speed m'informe que pour améliorer la performance de mon site il faut absolument:

  • Combiner les javascripts
  • Spécifier une date d'expiration pour les images
  • Minifier le CSS
  • Utiliser un domaine sans cookies pour les images

Ensuite en orange, Page Speed me conseil également de :

  • Combiner les CSS
  • Minifier le HTML
  • Utiliser un google analytics asynchrone
  • Supprimer le CSS non utilisé
  • Raccourcir les sélecteurs CSS

Page Speed vous indique votre score. Garder ce chiffre comme référence afin de pouvoir faire des comparaisons ultérieurement.

Voici une capture en exemple :

Score Page Speed

Score Page Speed

Yslow

Yslow est un outil très proche de PageSpeed.

Comme PageSpeed c'est un plugin pour le navigateur Firefox. Vous pouvez le télécharger ici :

http://developer.yahoo.com/yslow/

Comme Page Speed, il est nécessaire d'installer Firebug :

https://addons.mozilla.org/fr/firefox/addon/1843/

Lancez Firebug en appuyant sur F12 :

Yslow + Firebug + Firefox

Yslow + Firebug + Firefox

Yslow + Firebug + Firefox

Selectionnez l'onglet Yslow, puis cliquez sur Run Test.

Dans mon cas, Yslow m'informe que pour améliorer la performance de mon site il faut absolument:

  • Configurer les ETags pour les javascript, css et les images
  • Spécifier une date d'expiration pour les javascript, css et les images
  • Utiliser un CDN pour les javascript, css et les images

Ensuite en orange, Yslow me conseille également de :

  • faire moins de requête HTTP
  • mettre les javascript à la fin du document.
exemple de résultat Yslow

exemple de résultat Yslow

Quelques conseils avant de commencer l'optimisation

L'optimisation de la vitesse d'affichage d'un site internet est une question de bon sens. Voici quatre règles qu'il faut toujours garder à l'esprit :

  • Cibler vraiment la page (ou l'ensemble de pages) prioritaire devant être optimisée. Seules les pages  stratégiques méritent d'être optimisées.
  • Un site rapide est un site qui ne charge que très peu d’éléments. Si vous avez plusieurs CSS sur votre page essayez de les regrouper. Faites de même pour les javascripts.
  • Si vous avez de nombreuses images pour faire des bordures arrondies, des dégradés, des ombres, ... Jetez un oeil aux possibilités offerte par CSS3. Vous pourrez ainsi remplacer de nombreuse petites images par quelques lignes simples de CSS : ombres, bordures arrondies, dégradé, fonte 'non-standard'
  • Evitez le plus possible les appels vers des widgets extérieurs (twitter, facebook). Chaque appel à un élément extérieur (javascript, anlytics, css, iframe, webservice, ...) rend votre page complètement dépendante des indisponibilités et des latences de ces éléments.

Améliorer la rapidité de son site en PHP

Il existe des techniques assez simples pour améliorer la rapidité d'un site en PHP.

J'explique dans cet article comment nous avons amélioré la rapidité du site http://www.monitoring-transactionnel.com/ lorsque il était hébergé sur nos serveurs PHP.

Maintenant notre site est hébergé sur un serveur Java, tout le travail d'optimisation serveur est à refaire, mais autant vous faire cadeau des résultats de mes anciennes recherches.

PHP Minfy

http://code.google.com/p/minify/

PHP Minify permet de grouper l'ensemble des CSS(et Javascript) dans un seul fichier.

Il s'occupe également de minifier les CSS (et les JS), c'est à dire d'enlever les commentaires, les espaces, les sauts de lignes...Il s'occupe également de fournir une version compressée (format zip) de votre unique ficher CSS (et JS).

Pour l'utiliser c'est très simple, décompresser l'archive dans votre répertoire php, faîtes pointer votre navigateur dans ce répertoire, et laissez vous guider.

La seule contrainte sera de remplacer vos nombreuses balises css (et javascript) par celles proposées par PHP Minify.

Grâce à cette astuce le score PageSpeed de http://www.monitoring-transactionnel.com/ est passé de 77/100 à 88/100, et le score Yslow de 81/100 à 83/100

PHP Minify

PHP Minify

.htacess d'apache

Mettre en cache les images, javascript, css, ...

Pour éviter que votre navigateur télécharge à chaque visite l'ensemble des images, des javascripts, des css, ...      Yslow et Page Speed vous conseille de configurer les caches serveurs.

Pour cela rien de plus simple, avec Apache. Editer le fichier .htaccess qui doit se trouver à la racine de votre site et ajouter :

 # 480 weeks
<filesmatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"="">
Header set Cache-Control "max-age=290304000, public"
</filesmatch>

# 2 DAYS
<filesmatch "\.(xml|txt)$"="">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesmatch> 

# 2 HOURS
<filesmatch "\.(html|htm)$"="">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesmatch>

Pour activer la compression gzip :

Afin de réduire le temps de téléchargement de vos pages HTML, on va demander à Apache de faire de la compression.Pour cela il suffit d'ajouter dans le .htaccess les lignes suivantes :

 # Performance boost
SetEnv REGISTER_GLOBALS 0
SetEnv ZEND_OPTIMIZER 1
SetEnv MAGIC_QUOTES 0

# Commenter la ligne ci-dessous si plantage
#php_flag zlib.output_compression on

# Activer le filtre
SetOutputFilter DEFLATE 

# Certains navigateurs ne peuvent pas avoir GZIP (les vieux)
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Certains navigateurs ne peuvent pas avoir GZIP (les vieux)
BrowserMatch ^Mozilla/4\.0678 no-gzip

# On ne veut pas d'IE
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# On ne compresse pas les images, elles le sont déjÃ|
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

Grâce à cette technique le score page speed de http://www.monitoring-transactionnel.com/ est passé de 88/100 à 91/100 et le score Yslow de 83/100 à 88/100

Vous n'avez plus qu'à mettre en pratique

A bientôt

Remplis sous: Actus, Uptime 1 commentaire
Testez gratuitement la performance de votre site web :
8mar/110

Analyser la vitesse de son site Internet

Le temps de chargement trop long est lennemi du site web

Le temps de chargement trop long est l'ennemi du site web

Après le lancement d’un service de Monitoring Transactionnel en Octobre, Pingwy société spécialisée dans la surveillance d’applications Internet, propose un nouvel outil d’analyse de la performance web afin d’apporter son concours aux entreprises (web marchands) soucieuses de la qualité perçue par l’internaute.

Vous êtes persuadé que votre site est rapide. Qu’en pensent vos visiteurs ?

Tant mieux car la lenteur excessive d’un site est sanctionnée immédiatement par la fuite des internautes. Par ailleurs depuis l’année dernière Google prend en compte la vitesse de chargement des pages pour effectuer le classement de ses résultats. Il est donc primordial de surveiller la rapidité de votre site web, la vitesse de chargement de vos pages internet.

Pour vous aider dans l’optimisation de la performance de votre site utilisez le process W.P.O Web Performance Optimisation.

Le Web Performance Optimisation est un process par étapes  (Evaluation – Benchmark – Monitoring- Optimisation) , qui complété  par des outils , permet d’améliorer l’ergonomie de son  site internet et favorise un meilleur référencement sur Google.

L’outil d’analyse de la rapidité web,  Pingwy vous accompagne en particulier dans l’étape « évaluation » mais également « benchmark » du process Web Performance Optimisation.

Rien de plus simple pour utiliser Pingwy Performance, et découvrir la rapidité de votre site web.  Il vous suffit d’indiquer l’URL de votre site et de valider l’information.

http://www.monitoring-transactionnel.com/performance

Le service vous retourne alors les résultats suivants :

Données Chiffrées : Temps total de chargement, nombre total de fichiers, taille totale des fichiers le nombre d’erreurs détectées.

Composition de la page: Temps de chargement par type de fichiers, répartition des fichiers par type , taille et quantité.

Le temps de chargement par étape (page blanche, premier aperçu de la page, navigation  possible dans la page.

Toutes ces informations sont complétées par la vision complète de tous les éléments téléchargés avec des précisions comme (DNS lookup, connectig, sending, waiting, receiving, DOM loaded, page loaded)           .

Il ne vous reste plus qu’à tester votre site sans oublier de vous comparer à vos concurrents !

Vous avez réalisé le test, Bravo !

Bien sur, ce test vous apporte des résultats à un instant T ; mais savez-vous comment votre site évolue dans le temps ? Connaissez-vous sa performance au quotidien ?

La plupart des sites ont des performances très variables en fonction de l’heure de la journée, de la période de l’année, des campagnes en cours (fêtes pour les sites de e-commerce, période post estivale pour les sites de e-voyage….) des mises à jour de sites….

Passez donc à l’étape « Monitoring » ! En effet pour savoir comment évolue votre site dans le temps, Pingwy vous propose d’effectuer une analyse de rapidité, périodiquement, à fréquences rapprochées afin de suivre l’évolution de vos performances web .

Enfin, en relation directe avec la vérification au quotidien de la disponibilité et du bon fonctionnement de vos applications web, Pingwy vous adresse également des rapports d’analyse et de synthèse. Ces rapports de performance sont une aide précieuse pour une meilleure gestion de vos services et vous aident à franchir l’étape « Optimisation » du Web Performance Optimisation.

N’oubliez pas que la vitesse de chargement est un critère essentiel pour un bon référencement

Remplis sous: Actus, Uptime Aucun commentaire
Testez gratuitement la performance de votre site web :
1mar/110

Politique de l’internet : les géants luttent et votre site web trinque

Une partie du réseau Cogent (source:www.cogentco.com)

Une partie du réseau Cogent (source:www.cogentco.com)

L'affaire Megavideo, vous en avez entendu parler ? On en a déjà discuté ici ou et Orange, l'opérateur historique est au coeur de la tempête.

En cause sa politique de peering avec le géant américain Cogent. Le peering, qu'est-ce que c'est et à quoi ça sert ? Vous le savez, Internet est un réseau de réseaux informatique, et lorsque vous naviguez sur un site internet, des dizaines d'unités d'informations (les paquets) transitent entre ces réseaux depuis votre ordinateur jusqu'au serveur web du site en question, qui vous répond en retour etc etc. On dit que les paquets empruntent des routes.

Comme vous dans votre voiture en plein milieu du Gers un samedi d'août, les paquets connaissent leur destination (grâce au système DNS). Et comme vous, ils ont besoin d'être guidés jusqu'à leur destination, en empruntant la route la plus efficace. Pour faire transiter ces paquets au coeur et entre leurs réseaux, les opérateurs ont mis en place des technologies complexes et ont été contraints, dès l'origine, d'établir des politiques d'échange de trafic de paquets pour fluidifier le trafic. Sans ces accords (dit de peering ou de transit), Internet n'existerait pas et vous seriez sûrement connectés aux seuls sites de votre région.

Dans l'affaire qui nous intéresse, Cogent accuse Orange de ne pas avoir augmenté ses niveaux de trafic de peering depuis 2004. Aux heures où les sites américains sont beaucoup consultés (Cogent est un gros pourvoyeur vers l'Amérique du Nord), on se retrouve donc à essayer de faire passer le trafic de l'autoroute A7 un samedi d'août sur une route cantonale. Et devinez quoi ? Ca coince...

Lorsque vous avez un site web ou un blog hebergé sur les réseaux d'Orange, il y a donc fort à parier qu'un certain nombre d'internautes américains ou anglais auront beaucoup de difficultés à accéder à votre site, et que les perfomances en seront très nettement dégradées.

Je vous entends scander : Un exemple ! Un exemple ! et je m'empresse d'accéder à votre demande...

Chez Pingwy, nous somme soucieux de la qualité de service que nous proposons à nos clients. Notre service de monitoring transactionnel est basé sur des sondes disposées de par le monde, et celle-ci doivent être irréprochables. Aussi, quand nous voyons des graphes de ce type dans les interfaces de nos clients, ça nous fait grincer des dents :

cogent-opentransit

Les temps de navigation sur ce site depuis l'Angleterre sont préoccupants

En bleu, les temps de navigation sur le site web d'un de nos clients depuis l'Angleterre. En rouge depuis Paris. Et oui, les temps affichés sont bien en secondes... La différence est frappante, avec des performance réduites d'un facteur 10. Pour trouver la cause de ce problème, nous avons mis en place divers outils qui nous ont montrés que cela ne pouvait venir de notre sonde. En poussant plus loin les recherches, nous nous sommes aperçus que les clients impactés par ce problème étaient tous sur des réseaux Orange. En observant les routes empruntés par nos paquets, nous avons identifié que le problème de performance se situait exactement à la jonction des deux réseaux Cogent et Orange.

Surveiller la performance de son site web est donc primordial, par exemple lors d'un changement d'hébergeur, car vous êtes totalement dépendant d'une part de la qualité de son réseau, et d'autre part de la qualité des routes par lesquelles transiteront les paquets de vos internautes.

Vous rencontrez les mêmes problèmes ? Faites nous part de votre expérience et de vos observations...

Remplis sous: Uptime Aucun commentaire
Testez gratuitement la performance de votre site web :