Comment améliorer les performances d’un site Internet ?

Quelques éléments que nous mettons régulièrement en œuvre chez Creabilis pour optimiser les performances d’un site Internet, que ce soit un site internet de vente en ligne, un site vitrine, corporate ou un blog, mais également un site mobile, ou le back end d’une application mobile.

Le cache de page

L’exécution des lignes de code php, la connexion à la base de données (mysql ou autre) et l’exécution des requêtes sql prennent du temps processeur et de la mémoire serveur Le fonctionnement d’un cache de page est le suivant :

  • Lors du premier appel le serveur « génère la page » une première fois en exécutant le php, les requêtes  sql, les appels fichiers, …
  • Le système de cache capture la page html résultat et la stocke sur disque.
  • Pendant la durée de vie du cache (à ajuster en fonction de la fréquence de changement) le système de cache sert la page « statique » aux internautes réduisant drastiquement la charge serveur et le temps de réponse.

Nous avons pu constater sur certaines pages un temps de réponse divisé par 50 ! Nous réglons en général la durée de vie des pages entre 12H et 3 jours.

Le seul inconvénient : le e-marchand doit prendre en compte ce composant et vider le cache des pages concernées s’il souhaite que l’actualisation soit immédiate.

Bien entendu, les pages dynamiques par essence (caddie, disponibilité de produit, formulaire de contact) ne seront pas mises en cache.

Techniquement, le système de cache dépend du cms que vous utilisez, voici nos recommandations :

Compression gzip

La compression gzip des données lors du transfert http permet de réduire la quantité de données transférée pour les éléments de type texte : pages html, css, javascript, web fonts, …

La compression réduit d’environ 50 à 60% le poids et donc le temps de téléchargement.

Elle n’a pas contre aucun impact sur les images car elles sont déjà compressées : jpeg, png, gif.

Pour le mettre en place, on utilise le module apache mod_deflate via la directive AddOutputFilterByType, exemple :

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Pour vérifier que la compression fonctionne, il suffit de vérifier la présente du header Content-Encoding:gzip dans la réponse http.

Minify javascript et css

Cette technique côté serveur permet de combiner plusieurs fichiers javascript et CSS en un seul, limitant le nombre de requêtes HTTP nécessaires.  Minify supprime également les caractères non indispensables comme les espaces et les sauts de lignes mais également les commentaires. Minify peut également réécrire les variables pour les raccourcir.

Le fichier généré est beaucoup plus petit que l’original.

Nous utilisons le projet Minify en php5 https://code.google.com/p/minify/

Soigner le cache navigateur

Le cache navigateur (Internet explorer, Chrome, Safari, Firefox) n’est pas forcément un ennemi ;-) Il peut être très utile pour accélérer le chargement des pages d’un site internet complet : la seconde page visitée comporte généralement une bonne partie d’éléments déjà chargés : logo, image de fond, css, icones, javascripts, webfonts .

Pour cela, il convient de le soigner et de lui indiquer les durées de vie des différents éléments du site et donc le « forçer » à mettre en page ces éléments :

  • Les pages html : durée de vie courte, voir nulle pour les pages dynamiques php non mise en cache.
  • Les images : durée de vie longue
  • Les css et javascripts : durée de vie longue

Pour cela, le module apache mod_expires permet de le définir facilement :

ExpiresByType text/html                 « access plus 0 seconds »
ExpiresByType image/jpeg                « access plus 1 week »
ExpiresByType text/css                  « access plus 1 week »

Mettre en œuvre un CDN ou Content Delivery Network

Cette technique un peu pointue consiste à déporter les ressources statiques (images, css, javascript, web fonts) sur un domaine différent (ou un sous-domaine différent) qui peut être sur le même serveur web ou (encore mieux) sur un second serveur.

Plusieurs avantages :

  • Les navigateurs sont limités à X téléchargements simultanés par nom de domaine (HTTP 1.1 limité à 2 connexions et HTTP 1.0 limité à 4 connexions), en multipliant les noms de domaines (sans abuser) vous augmentez le nombre de téléchargements en parallèle.
  • Ce second domaine n’ayant pas à lancer le module php (5 à 10Mo par processus) il est plus léger.
  • Les cookies et en particulier les cookies de session ne transitent plus inutilement : gain de bande passante mais également de ressource serveur qui n’a pas à monter en mémoire les données de session.
Attention à ne pas provoquer de surchauffe si les différents noms de domaine sont sur le même serveur physique : à ajuster donc finement.
Exemple à découvrir chez Label Art ou les images sont sur http://img.label-art.fr/

Images gérées en Sprites CSS

Plusieurs images (en général les icones du site) sont regroupées dans une seule image et sont par la suite découpées et ajustées en css.

Cela permet de réduire le nombre d’images à charger et donc de gagner sur la latente nécessaire à chaque connexion http. Cela allège également le nombre de processus serveur.

Exemple avec cette image sur le site internet stores et moustiquaires :

Pour finir

Il est possible de mesurer le niveau de performance d’un site via l’excellent service GT Metrix : http://gtmetrix.com/

Il combine les outils de Yahoo (Yslow) et de Google (Page speed).

L’ensemble de ces optimisations permettent d’augmenter drastiquement le nombre de visiteurs simultanés de votre site internet, mais également de réduire leur temps d’attente. Souvenez vous qu’un internaute lambda n’attends généralement pas plus de 4 secondes avant de décider de … changer de site, s’il est trop long.

JF

Comment éviter d’être considéré comme spammeur

Nous vous proposons un article de notre partenaire AltoSpam proposant un service innovant de passerelle anti-spam et serveur de messagerie sortant.

Régulièrement, nos clients nous demandent comment faire pour que les e-mails soient correctement interprétés par les anti-spams. Dans cet article, nous allons vous présenter les règles à respecter pour éviter d’être considéré comme un spammeur, notamment lors de la réalisation de vos newsletters et campagnes d’e-mailing. Ces règles sont classées en deux catégories : celles applicables au mail proprement dit et celles liées au serveur de messagerie. Dans cette liste, les recommandations spécifiques à l’emailing et aux newsletters seront suivies du caractère « * ».

1) En ce qui concerne le mail :
- Ecrivez le plus simplement possible sans caractères trop originaux. Evitez notamment de remplacer des lettres par des équivalents visuels par exemple « ! » pour « i » ou « / » pour « v ».
- Utilisez une adresse email spécifique pour l’émission des emailings et si possible diffusez sur un domaine différent du domaine habituel *
- L’adresse email utilisée pour envoyer des emails doit pouvoir recevoir des réponses et le nom de domaine doit vous appartenir. Surtout n’usurper pas l’identité d’un tiers.
- Utilisez impérativement pour vos emailings une base d’adresses de destinataires qualifiée (c’est le plus important), si par hasard une des adresses email de votre liste correspond à un spamtrap, vous vous retrouveriez immédiatement blacklisté. *
- Utilisez un codage HTML correct, surtout dans les newsletters (ne faites surtout pas du copier/coller de Word) *
-  Évitez la présence de fortes sommes d’argent dans le contenu du mail, ou les chiffres importants assimilables à de grosses sommes d’argent.
- Evitez d’intégrer dans votre email de longues URL ou des URL trop compliquées contenant des caractères spéciaux ou un trop grand nombre de consonnes successives, par exemple.
- Evitez les signatures de mail comportant des imagettes,
- Evitez trop de majuscules dans le sujet du message (ne pas mettre tout le sujet en majuscules),
- N’utilisez pas de liens non symétriques (Anchor  != URL) tel le nom du lien qui ne correspondrait pas à son pointeur (par exemple en html les codes de ce type :  <a href=http://www.toto.com>http://www.tata.com</a> ).

2) En ce qui concerne le Serveur de messagerie :
- Le serveur de messagerie doit impérativement être entièrement nommé (FQDN). Il ne doit pas s’appeler « mail » mais: « mail.domaine.com ».
- Assurez-vous que votre adresse IP pointe bien sur votre serveur de messagerie au sens Reverse DNS.  (Pour vérifier cela, faites simplement un « ping -a » sur votre adresse IP).
- La correspondance entre reverse IP et nom FQDN du serveur est la configuration idéale.
- Configurez sur le domaine utilisé pour l’expédition les IP autorisées à envoyer des emails dans les champs SPF
- Evitez d’utiliser une connexion internet de type : adsl particulier (free, sfr, orange,… ) pour votre serveur de mails. Toutes ces adresses sont dites DUL et sont systématiquement blacklistées.
- N’utilisez pas la même IP publique pour l’envoi des mailings que celle de  votre serveur de mails (afin d’éviter de bloquer sa messagerie à cause d’un emailing irresponsable) *
- Respectez la RFC 2369 qui normalise des champs d’en-tête afin de faciliter la gestion de newsletters. Ajoutez notamment les champs : « List-Unsubscribe: » et « List-Owner: » dans vos newletters. *

Si vous n’êtes pas en mesure de respecter toutes ces règles, notamment au niveau de la configuration de votre serveur de messagerie, vous pouvez aussi utiliser un relais SMTP sortant pour expédier vos emails. Pour information, ALTOSPAM propose ce type de services sous forme d’option : ALTOSPAM MailOut, qui de plus, vous assure de ne pas être vecteur de virus en contrôlant tous les messages émis par trois antivirus.

Merci à Stéphane pour cet excellent article. Référence de l’article : http://www.altospam.com/actualite/2008/10/eviter-detre-considere-comme-spammeur/ par

En complément, nous recommandons cet article du capitaine commerce : « ecommerce : Les 11 facteurs impactant la Délivrabilité »

http://www.capitaine-commerce.com/2013/02/12/33286-les-11-facteurs-impactant-la-delivrabilite/

Grosse panne Paypal pour les sites e-commerce : perturbations dans les validations de commande

Le système de paiement Payal a connu une panne mondiale entre dimanche et ce matin provoquant une absence de réception des notifications de paiement (IPN) sur les boutiques en ligne ou un délai important entre le paiement et la notification correspondante.

Tout semble rentré dans l’ordre ce matin.

Il est recommandé de pointer tous les paiements entre paypal et Ornéa et s’assurer qu‘il n’y a pas de paiement en double ou de paiement sans commande (dans ce cas, utilisez la validation manuelle des commandes.

L’explication sur le site de paypal ici :
https://www.x.com/content/resolved-issue-receiving-instant-payment-notifications-ipns-jan-27

1) Tout d’abord, les notifications de paiement n’ont tout simplement pas été envoyés aux sites de vente en ligne :
« We are experiencing a system issue affecting Instant Payment Notifications (IPN) on the Live Site. Merchants may not be currently receiving IPNs for transactions. We are working towards resolving this issue. »

2) Puis, les notifications de paiement ont été envoyé avec un délai important, ce qui explique la validation très tardive de la commande.
« UPDATE 4: the majority of IPNs are still delayed »

3) Après résultion, paypal a décidé d’envoyer toutes les notifications qui ne sont pas passées avec un delai :
« We are also estimating that missing IPNs for transactions processed between Jan 27, 11:04 PM PST (Jan 28, 7:04 AM GMT)  and Jan 28, 10:47 AM PST (Jan 28, 6:47 PM GMT) will be delivered within the next 24 hours. »

La panne s’est terminée ce matin 9H25 GMT :
« This issue has been resolved as of Jan 29, 1:25 AM PST (Jan 29, 9:25 AM GMT). »

Si vous souhaitez un article en français voici :
http://www.generation-nt.com/paypal-probleme-paiement-actualite-1686752.html
« Des sites qui tirent parti de PayPal font état d’erreurs intermittentes dans le traitement des paiements avec la non-réception des notifications instantanées de paiement. Cela peut alors conduire à un délai pour le traitement d’un paiement. »

Pas mal de remontées sur twitter :
https://twitter.com/search?q=ipn%20paypal&src=typd

Sur notre facebook :
https://www.facebook.com/creabilis

Bilan e-commerce 2011 : 22% de croissance, mais les petits e-marchands dévissent

Selon l’étude présentée le 30 janvier par la Fevad (La Fédération du e-commerce et de la vente à distance) l’e-commerce ne connait pas la crise, les chiffres de 2011 :

  • 30,7 millions d’internautes français ont acheté en ligne, 11% de progression.
  • Les achats sur internet s’élèvent à 37,7 milliards d’euros, 22% de plus que 2010.
  • Le panier moyen baisse de 1% sur un an à 90 € contre  91€ en 2010, mais seulement 86€ pour les fêtes de Noël.

Autre fait marquant, le nombre de sites d’e-commerce a dépassé les 100 000 boutiques en ligne, 100 400 actifs recensés exactement, soit une progression de 23%.

L’e-commerce sur mobile : le m-commerce commence à séduire de plus en plus de français. Pour les sites internet concernés par l’étude, le chiffre d’affaire sur mobile représentent 3% des ventes en ligne pour Noël et 2% sur l’ensemble de l’année 2011.

Il convient cependant de relativiser ces chiffres avec une simple division, calculons le CA  moyen par site :

2011 : 37,7 Mds/100400 = 375 k€/an

2010 : 30,9 Mds/82400 = 375 k€/an

Et oui, le chiffre d’affaires moyen par site, lui n’a pas augmenté.

Le top 15 des sites de vente en ligne français :

Toujours selon la Fevad, sur 4 ans, les sites moyens et gros (de 100 à plus de 10 000 transactions/mois) ont multiplié par 3 le nombre de transactions. Donc, à périmètre constant (le chiffre d’affaires moyen n’ayant pas bougé), il faut malheureusement en conclure que les petits sites à moins de 100 transactions/mois ont devissés.

C’est une tendance importante, les internautes se déportent massivement vers les plus gros sites, les amazon, fnac, CDiscount, La Redoute, … poussés par des budgets publicitaires colossaux. Les petits sites doivent redoubler d’effort et d’ingéniosité pour se démarquer, se faire une place face aux gros, qui sont de plus en plus gros au détriment des petits.

Chez Creabilis, nous travaillons avec une poignée de marchands de taille moyenne, mais la plupart sont des petits : les fameux sites à moins de 100 commandes/mois. Pour ceux là, les temps sont difficiles, la crise est bien là, mais ils s’accrochent, se réinventent, et nous sommes tous les jours admiratifs devant leur énergie et de leur optimisme sans faille.

Source : http://www.fevad.com/espace-presse/37-7-milliards-d-euros-depenses-en-ligne-22-par-rapport-a-2010

JF

L’utilité d’un blog de marque ?

Les avantages du blog de marque sont colossaux :
- Opportunité de communiquer auprès de ses clients.
- Se faire connaitre au sein de la blogosphère.
- Améliorer efficacement son référencement naturel sur Google.

 

Pourquoi un blog est-il meilleur pour le SEO alors qu’il est beaucoup plus facile et interactif de monter une page Facebook ?
- Les liens externes facebook sont en nofollow, c’est à dire que facebook indique à google via un attribut html de ne pas suivre les liens : en conséquence, les liens n’ont aucune valeur pour Google.
- La taille du texte d’un statut facebook est très très limité, il est impossible de développer un argumentaire correct.
- Sur votre blog, vous êtes chez vous, vous fixez les règles. Sur facebook, vous n’êtes que locataire et donc totalement dépendant des changements de politique de Mark Zukerberg, et le le p’tit gars est plutôt joueur ;-)

Ceci étant dit, du point de vue marketing et service client, il est tout à fait justifié et même ultra conseillé de créer sa page Facebook, j’aborde ici uniquement l’aspect seo.

Comment le blog de marque améliore mon référencement Google ?
- C’est facile et rapide d’écrire quelques lignes, il n’y a pas besoin de structurer et soigner la forme comme sur un argumentaire de fiche produit, le ton est plus libre et le plaisir d’écrire plus fort : la fréquence et le volume de texte produit est donc plus important que sur le site de marque. Et ça, google aime. Google apprecie les sites qui bougent, avec beaucoup de textes, de liens, de mots-clés. Bref, Google aime les blogs.
- Bien entendu, les articles des blogs vont contenir des liens en dofollow (c’est l’inverse du nofollow) vers votre site, voir des liens profonds (vers une page interne), et ça, google aime aussi.
- Attention à soigner le texte du lien que l’on appelle l’ancre, et évitez à tout prix le « cliquez ici ». L’ancre doit être variée et contenir les mots-clés principaux, en relation avec le sujet du billet. Le nombre de liens doit être raisonable entre 5 et 10 par exemple.

Je vous propose une belle illustration avec le lancement ce mois-ci du blog de Café Négril et un premier billet savoureux sur un café en grain exceptionnel provenant du Mexique.

Le meilleur logiciel de CMS pour monter un blog est bien entendu le logiciel open source WordPress, avec 54% de part de marché sur les cms selon une étude w3 Techs.

Chez Creabilis, nous pouvons monter votre blog de marque, mais surtout lui faire une beauté, c’est à dire lui designer un template sur-mesure, aux couleurs de votre marque. Quelques exemples chez Label-art avec le blog d’Elisa sur http://blog.arvibel.fr/, le blog d’1air2lune bijoux,  ou le tout récent blog des faucons pèlerins d’Albi.

JF

Comment l’arrivée de free mobile va impacter l’e-commerce en 2012 ?

Cela n’a échappé à personne : free a révolutionné le marché du mobile avec ses deux forfaits révolutionnaires complets et pas chers. Mais quel impact sur l’e-commerce et les sites web ?

Tout d’abord, côté accès Internet 3G illimité, Free a multiplié le Fair Use (la limite d’utilisation par mois) par 3 : il est généralement de 1Go chez les concurrents, 3Go chez free.

Autre information qui vous a peut-être échappé, il est également possible d’accéder à internet en 3G avec le forfait à 2 euros : cela coute seulement 1,99€ pour un crédit de 20Mo valable 1 mois. Au-delà du crédit c’est 6 centimes/Mo. Ce forfait à 2 euros est la vrai révolution de free, car se forfait va séduire tous les réfractaires, ceux qui ont des cartes prépayés voir même aucune ligne mobile, les adolescents, la mamie du Cantal ou de l’Aveyron, etc.

Donc pour environ 4€ par mois, soit l’équivalent de quelques cafés, le grand public de masse va pouvoir envoyer 60 sms, appeler 1H et surtout surfer sur Internet.

Maintenant, passons aux usages. Il est clair qu’une fois l’accès internet en 3G enfin abordable, il faut s’équiper d’un smartphone pour bien l’utiliser : iPhone, Samsung Android pour les plus courants, mais aussi les windows phones, blackberry, …

Le premier usage de ces nouveaux entrants est bien sur la communication avec sa tribu : sms, mms, mais aussi email sur mobile et messageries intégrées (WhatsApp, Apple Messages, Msn Messenger, …) mais aussi via le réseau social tout bleu : facebook bien sur.

Le second usage est le jeu, un petit angry birds pour passer le temps, c’est tellement plus hype que le solitaire ;-).

Puis viens la consommation d’information : actualités, bourse, e-banking, twitter et c’est là que l’on devient accro à son mobile et que le temps par jour passé sur ces petites bebêtes explose et prépare un terrain favorable à l’e-commerce que l’on peut déjà appeler le m-commerce.

Oui, car on a vite fait de passer de la consommation passive d’informations ou du divertissement à l’acte d’achat : ça commence bien sur par un morceau sur iTunes, une application à 2€ (tiens, le retour de ce prix psychologique) sur l’AppStore ou l’android market. Puis c’est au tour d’un billet sur Voyages Sncf, un iPhone d’occasion sur Le bon coin, et enfin, un vrai achat d’impulsion : par exemple sur vente privée ou La Redoute : le m-commerce est lancé : l’acte d’achat est tellement plus rapide,fun, addictif, cool, facile, tendance, sensuel (rayez la mention inutile) sur un smartphone.

Mais alors, en quoi Free change la donne du m-commerce ?

Tout simplement car le volume critique de mobinautes justifiant le développement d’une boutique mobile va être atteint courant 2012 avec l’explosion des abonnés que nous prévoyons.

En effet, le seuil de rentabilité est depuis longtemps atteint pour les géants de l’e-commerce, que représente 10 ou 20 K€ pour développer une appli ou un site mobile pour une boutique faisant plusieurs millions de CA par mois ? Pas grand-chose, mais pour une tpe, un pure player, un e-marchand de niche, un commerçant de quartier ce budget est énorme et a justifié jusqu’alors de refuser en bloc l’idée même d’investir l’Internet Mobile.

Par contre, si l’envie (et non le besoin) de se lancer elle est bien réelle, surtout dans la période d’euphorie qu’est la découverte de son premier iPhone, iPad ou autre Samsung Note et les sensations nouvelles et naturelles de la navigation tactile (certains se reconnaitrons) : nous le constatons toutes les semaines en discutant avec nos clients e-marchands.

C’est je crois le bon moment de se poser la question de sa stratégie mobile, de se renseigner sur les technologies, les perspectives de CA et les budgets. Faut-il choisir entre site mobile ou application ? Le paiement sur mobile, ça se passe comment ? Va-t-on devoir tailler dans le gras du formulaire d’inscription ? Ma newsletter : ça donne quoi sur un écran mobile ? C’est quoi un QR Code ? Comment et ou se faire connaitre ?
Chez Creabilis, nous sommes dans cette dynamique, nous sommes là pour répondre à ces questions et affiner avec vous votre stratégie mobile, vous conseiller, vous accompagner et bien entendu, développer votre site ou application mobile. Alors, et si on en parlait ?

JF.

Le nouveau twitter est sorti

Twitter a annoncé sa plus grosse mise à jour depuis sa création en 2006, l’objectif est clairement de simplifier l’accès aux nouveaux venus pour qui les termes #hashtag, retweet, ou FF sont proches du mandarin traditionnel.

Au menu :

- Un nouvel accueil plus clair, avec plus d’infos : c’est très bien fait. Le menu secondaire passe de la droite à la gauche.

- Un nouvel onglet « Connecter » regroupant tous vos messages, mentions, retweet, plus simple que l’ancien système.

- Les nouveaux profils : plus de choses, des photos, …

- Une nouvelle version des applis mobiles pour iPhone/iPad et Adroid. Au passage, j’utilise quotidiennement l’appli iPad qui est bien supérieure en terme ergonomique et en réactivité que le site Web.

Plus d’infos sur le site officiel http://fly.twitter.com/

Creabilis propose dans sa palette de services la création et la gestion de compte twitter pour les e-marchands, mais également la création de pages Facebook ou page d’entreprise Google Plus.