Outils

Piwik s’appelle maintenant Matomo

Publié le par Matthias Wulkow
Matomo

Le très célèbre logiciel Piwik s'appelle dorénavant Matomo. A priori, rien d'autre ne change.

Piwik - Matomo est sans doute l'application web open source la plus répandue pour analyser les visites de sites web et de boutiques en ligne.

SaaS Web propose depuis des années déjà l'utilisation gratuite de cet outil avec ses hébergements CMS et eshop (comme WordPress ou TYPO3 par exemple).

 

Testez le chargement de votre site avec webpagetest.org

Publié le par Anne-Gaële Wulkow

Toujours plus vite

Le souci de vitesse de chargement d’un site Web n'est pas un nouveau paramètre : depuis le début du Web, le temps de chargement d'une page est un facteur important de succès : à l'époque la bande passante d'une connexion Internet était si faible, souvenez-vous il y a 20 ans, les modems 57k étaient souvent ce qu'il y avait de mieux. Du coup, une page ne devait pas peser plus de quelques centaines de kilo-octets pour pouvoir être chargée convenablement. Aujourd'hui, les connexions de 50 MBit ou plus ne sont pas rares.

Avec l'augmentation de la bande passante, la situation s’est raisonnablement relâchée, du moins en théorie. L'utilisation croissante d'appareils mobiles et d'écrans toujours plus grands à haute résolution (il y a 20 ans, les plus grands avaient une diagonale de 19" avec 1.200 x 800 pixels, aujourd'hui, 27" avec 2.560 x 1.440 pixels ou plus) propulse le site opérateur dans une situation similaire à celle d'il y a vingt ans : plus de bande passante, mais de plus en plus de données sont transmises - c'est un peu le même problème que l’on rencontre avec la batterie de nos smartphones : elles sont de plus en plus puissantes, mais les appareils consomment de plus en plus d'énergie...

La vitesse de chargement en tant que facteur de classement (Ranking-Faktor)

Aujourd'hui, le temps de chargement prend une nouvelle dimension : les moteurs de recherche, notamment Google, intègrent le temps de chargement dans le calcul de l'index. Autrement dit, plus un site Web est lent, moins il sera bien positionné dans les résultats de recherche. Dès lors, les développeurs ont bien pris en compte ce paramètre, autrefois quelque peu délaissé.

Facteurs qui influencent le temps de charge

Il existe plusieurs niveaux où les optimisations peuvent être ressenties sur le temps de chargement. D'une part le niveau infrastructure qui regroupe l'hébergement et les techonologies employées et d'autre part le site web en soi, c'est-à-dire sa structure et ses contenus.

Niveau d'hébergement : infrastructure, serveur Web, mise en cache (caching)

  • Infrastructure : d'une manière générale, il y aura des différences signifiantes en hébergeant votre site sur un serveur dédié ou sur un hébergement mutualisé - à priori, le site en dédié sera plus performant et surtout plus stable sur toute la durée de vie, la performance n'étant pas partagée avec d'autre sites (plus ou moins gourmants). La vitesse de chargement est aussi en étroite relation avec la connexion Internet du centre de données et la façon dont les routeurs sont connectés aux serveurs. L'infrastructure du datacenter n'influence pas que la vitesse mais aussi ce l'on appelle le délai avant le premier octet (Time to first Byte) : il s’agit du temps nécessaire au premier octet du serveur pour arriver au client.
  • Serveur Web : le serveur Web peut également jouer un rôle dans l'optimisation. En général, les serveurs Web avec Nginx sont plus rapides qu'Apache – cependant, avec un peu de configuration, cela n’est pas systématiquement le cas. Le choix du logiciel a donc une influence sur la vitesse. Les paramètres tels que keep alive augmentent aussi de manière significative le temps de chargement, car la connexion au serveur Web ne doit pas être „renégociée“ après chaque requête HTTP.
  • La mise en cache est un sujet complexe car il existe plusieurs niveaux de mise en cache (CDN, HTTP reverse proxy comme Varnish Cache, local cache, cache de base de données comme memcached ou Redis, ...). La mise en cache est l'un des moyens les plus efficaces pour réduire le temps de chargement, en fonction de la manière dont elle est utilisée. Il convient de noter que tout ne peut pas toujours être mis en cache - les pages avec une fréquence élevée de changement comme, par exemple, les portails d'information qui souhaitent que les visiteurs voient toujours les dernières nouvelles.

Niveaux du site : HTML / JS / CSS, éléments média

  • Sans même évoquer un HTML défectueux, avoir une structure de page correcte joue un grand rôle. La structure HTML d'un document doit toujours être aussi légère que possible, et une imbrication bizarre doit, autant que possible, être évitée. Ainsi, si ce n'est pas absolument nécessaire, les éléments HTML ne devraient pas être insérés via Javascript.
  • Les éléments multimédias, c'est-à-dire les images, doivent toujours être optimisés pour l'appareil - une grande image utilisée pour un PC de bureau doit être chargée dans une version plus petite pour un affichage sur smartphone.

Vérification de la vitesse de votre site Internet avec www.webpagetest.org

webpagetest.org permet à quiconque de mesurer et d'analyser le temps de chargement de son site Web gratuitement (accessible publiquement).

C'est aussi simple que ça

Pour commencer une analyse du site Web, vous avez seulement besoin de :

  • URL : entrez l'URL du site, de préférence en incluant https et les www, sinon le renvoi existant sera inclus dans le temps de chargement.
  • Lieu : d’où la mesure doit-elle être effectuée ? La localisation géographique joue également un rôle important - même si webpagetest.org intègre un facteur de correction dans les résultats
  • Navigateur : il peut être important de savoir quel navigateur est testé. Selon l'emplacement choisi, les options proposées peuvent différer. Vous pouvez également sélectionner les navigateurs mobiles.
  • Nombre de tests : il est recommandé d'effectuer plusieurs tests pour obtenir une moyenne plus significative.
  • Vue répétée : il s'agit du temps de chargement si un client (navigateur) charge une deuxième fois une page pour permettre de mieux considérer les mises en cache - il est recommandé de sélectionner la première vue et la vue répétée.

Vue d'ensemble des résultats

6 indicateurs (A à F - A est la meilleure note) sont utilisés pour une évaluation rapide des résultats.

Voici la signification des 6 indicateurs :

  1. Premier octet (First Byte Time) : il s’agit de la durée de réception du premier octet du serveur Web. Cette valeur ne peut pas être modifiée de votre part. La valeur dépend essentiellement de l'environnement d'hébergement physique (centre de données, serveur) et de l'utilisation actuelle des systèmes.
  2. Keep-alive enabled : option du serveur Web qui maintient la connexion entre le serveur et le navigateur ouverte évitant ainsi que la négociation TCP soit renouvelée à chaque fois. Une page Web a souvent 100 éléments ou plus à charger - une optimisation à priori légère mais qui peut faire la différence.
  3. Compress transfer : il s’agit également d’un paramètre de serveur Web. Le serveur Web peut compresser les données afin que moins de données soient transférées. Les navigateurs modernes peuvent gérer la transmission de données compressées sans exception.
  4. Compress images : ici, les opérateurs du site sont en demande. L'indicateur montre à quel point les images chargées sont compressées. La taille peut-elle être réduite (sans perte de qualité) ?
  5. Contenu statique du cache (Cache static content) : les éléments affichés proviennent-ils du cache ou proviennent-ils directement du serveur Web ?
  6. Utilisation du CDN (Effective use of CDN) : le contenu provient-il d'un CDN (Content Delivery Network) ?

Résultats de performance

Le tableau supérieur montre d'autres valeurs indispensables à prendre en compte comme le résultat du test de vitesse. Ici, la vitesse de l'affichage du site est décomposée en niveaux pour mieux identifier où sont les temps de chargement.

  • Load Time : temps de chargement de la page du site Web. La partie Fully Loaded mesure le temps de chargement plus 2 secondes, pour permettre aux éléments chargés via Javascript d'être pris en compte.
  • Premier octet (Time to First Byte - TTFB)  : temps nécessaire pour le premier octet du serveur au navigateur lorsque le site Web est appelé pour la première fois.
  • Démarrer le rendu (Start Render) : le temps nécessaire au navigateur pour commencer à afficher le site Web.
  • Indice de vitesse (Speed Index) : l'indice de vitesse est une valeur permettant d'évaluer la vitesse mesurée. Plus cette valeur est petite, mieux c'est. Voici quelques informations détaillées sur la façon de calculer cet index : https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Détails - diagramme en cascade

Dans le diagramme en cascade, il est très facile de voir combien de demandes sont générées par le chargement de la page et à quelle vitesse les demandes individuelles sont traitées. Sur la base de codes couleurs, les demandes peuvent également être classées selon leur type : requête DNS, HTML/texte, JavaScript/texte, image ou autre type de contenu.

Détail du contenu

La section "Content Breakdown" est particulièrement intéressante pour voir les relations (quantité en nombre de fichiers ou en kilo-octets) entre texte, CSS, Javascript et images. Cela permet également de déterminer plus facilement où se situe le plus grand effet de levier lorsqu'il s'agit de définir des priorités pour l'optimisation.

Analyse d'images

L'élément relativement nouveau "Image Analysis" permet l'analyse de fichiers d'images. Cet élément vérifie chaque image, évalue la compression et la note (A-F). Il est également possible d'utiliser le service cloud moyennant des frais, mais sans obligation. Vous pouvez faire les optimisations vous-même - il existe de nombreux programmes d'édition d'image qui peuvent être utilisés à cette fin. Il y a aussi un article dans ce blog sur l'optimisation de l'image.

Un outil professionnel gratuit

webpagetest.org est un projet mature qui peut vraiment aider à l'optimisation de site Web. On apprécie particulièrement sa gratuité et son utilisation sans inscription. Parfois, vous devrez patienter un peu pour que votre demande d'analyse soit faite... vous n'êtes pas la seule personne à utiliser ce service.

WordPress : Créer des formulaires de contact avec, en option, l’envoi d’une copie à l’expéditeur

Publié le par Anne-Gaële Wulkow

Mailto ou formulaire de contact – telle est la question.

Dois-je proposer sur la page d'accueil de mon site Web un formulaire de contact ou tout simplement une adresse e-mail cliquable pour accéder au programme de messagerie installé localement ? Pour répondre à la question il faut se mettre à la place du visiteur : que préfère t-il ? Quelles expériences ont été faites à ce jour ?

Mailto - Web 1.0

Mailto représente le paramètre de l'attribut href dans la balise d'ancrage adresse mail l’adresse mail avec laquelle le navigateur est chargé d'appeler le client de messagerie par défaut et TO: le champ pré-rempli avec l’adresse spécifiée. Il est également possible de prédéfinir d'autres domaines tels que l’objet ou même le contenu du courrier.

Exemple : adresse mail avec les champs pré-remplis .

Etant donné que les champs blancs href et d'autres caractères spéciaux ne sont pas autorisés, ils doivent être remplacés par des codes hexadécimaux (% 20 = espace, %27 = apostrophe).

Très bien ! Mais attention, cela n’est pas dénué de problèmes :

  • Si aucun programme de messagerie électronique est installé sur l'appareil, rien ne se passe (le navigateur s’ouvrira si, par exemple, l'utilisateur utilise Gmail). Néanmoins, l'adresse étant indiquée, le message peut être envoyé à une date ultérieure.
  • Des robots d'exploration malveillants analysent les sites de fond en comble pour trouver des adresses de courrier électronique et les utiliser ensuite pour envoyer des spams (ou pour utiliser l'adresse comme expéditeur). Cependant, une adresse de type info@ - est quasiment toujours spécifiée et est de toute façon utilisée par les spammeurs.
  • Si vous voulez obtenir certaines informations d’une personne en particulier comme un numéro client ou des paramètres XY qui vous permettent d'identifier à quelle équipe interne le message est adressé, la méthode du mail cliquable ne vous mène malheureusement pas très loin...

Formulaires de contact 1.0

Les formulaires de contact n’existent pas depuis hier. La qualité a été améliorée de manière significative, cela s’explique sûrement du fait qu’il y ai de plus en plus de propriétaires de sites Web, utilisant un CMS (WordPress pour la plupart), et s’appropriant ce genre d'extension.

Revenons aux anciens types de formulaires de contact : beaucoup contenaient des bugs et généralement aucune validation n’était prévue (l’envoi d’un formulaire vide était souvent possible) ; c’est pourquoi nous avions des doutes quant à la bonne livraison des messages. De plus, l'expéditeur ne recevait que rarement une copie de son message.

Créer des formulaires de contact conviviaux avec Gravity Forms

En utilisant WordPress, vous avez accès à de nombreux plugins dédiés aux formulaires, comme par exemple Contact Form 7. Ce dernier est très populaire (plusieurs millions d'installations actives à ce jour) et digne de confiance. Cependant nous allons vous donner un exemple de construction de formulaire de contact avec Gravity Forms qui est un plugin particulièrement ergonomique mais qui nécessite l'achat d'une licence. Je precise à ce stade que l'utilisation de Gravity Forms est gratuite avec les tarifs d’hébergement WordPress managé de SaaS Web.

Que peut-on attendre d'un formulaire de contact moderne ?

Liste non exhaustive des fonctionnalités. Tout d'abord, du côté de l'utilisateur du formulaire :

  • Responsive Layout, le formulaire est adapté à tous les appareils de visualisation
  • Champs clairement identifiés, indiquant aussi s'ils sont obligatoires ou facultatifs
  • Stockage des données déjà saisies pour la validation, validation dynamique possible sans possibilité de soumettre le formulaire sans que les champs obligatoires n’aient été remplis correctement.

Qu'en est-il de l’accessibilité ?

  • Pour les personnes utilisant un clavier au lieu d'une souris, il est pratique de pourvoir naviguer d'un champ à un autre avec la touche TAB
  • Pour améliorer l'expérience d'utilisaton des personnes handicapées qui utilisent des lecteurs d'écran, ajouter des balises HTML spécialisées

Du côté de l'opérateur :

  • Création facile du formulaire
  • Champ avec sélection pré-programmée des fonctions (champ de texte, champ réservé aux adresses e-mail, téléphone, multi-sélection ...) et la validation appropriée du champ
  • Validation obligatoire Oui / Non
  • Logique conditionnelle : visibilité d’un champ spécifique sous condition qu’un autre soit complété
  • Assembler des champs par glisser-déposer
  • Envoi des données de formulaire à un opérateur ou une tierce personne
  • Affichage d’une confirmation de livraison à l’expéditeur - éventuellement, rediriger l'utilisateur vers une autre page
  • L’expéditeur a la possibilité de recevoir une copie des données saisies

Pour les designers et les administrateurs :

  • Les champs du formulaire peuvent être étendues avec des classes CSS pour faciliter la mise en page du formulaire
  • Eventuellement une fonction Honeypot/Captcha

 

Créer un formulaire de base

Après avoir installé Gravity Forms, vous pouvez créer votre premier formulaire - donnez-lui un nom. Ensuite, déterminez les champs.

  • Étape 1 : Créer une case à cocher si l'utilisateur veut obtenir une copie par e-mail
  • Étape 2 : Créer la notification ainsi que la logique pour envoyer la copie si la case a été cochée

Option d'installation pour obtenir une copie de données

L’étape 1 doit être effectuée dans la page de création du formulaire.

Déplacez, d’un clic de souris, l’élément Cases à cocher de la droite vers l’emplacement souhaité. Par défaut 3 cases sont proposées, vous en supprimez donc 2 et indiquez votre phrase, par exemple "Envoyez-moi une copie des données du formulaire de contact". Vous pouvez cocher la case, ainsi elle sera pré-cochée dans le formulaire.

Pour la deuxième étape, sélectionnez les éléments internes du formulaire sous « Paramètres »> « Notification ».

Ici, nous avons défini les paramètres suivants :

  • Nom : ce champ est obligatoire, mais sans grande importance
  • Envoyer à : « Sélectionner un champ »> « E-mail » de la liste déroulante; si vous avez nommé le champ E-mail de façon différente, sélectionnez dans la liste, bien sûr, le nom que vous lui avez donné. Veuillez noter que le champ e-mail est évidemment un champ obligatoire.
  • De : nom de l’expéditeur: les utilisateurs verront alors le nom de l'expéditeur de l'e-mail
  • Votre e-mail : celui-ci peut être modifié
  • Objet : tout simplement l’objet de l'e-mail
  • Message : insérez ici votre texte. Il est possible d'insérer des champs préalablement remplis. Pour ce faire, cliquez sur l'icône à droite de l'éditeur visuel. Bien sûr, vous pouvez également ajouter un message d'accueil ou tout autre texte.
  • Logique conditionnelle : cocher la case pour activer la logique. Ensuite, sélectionnez le champ qui doit être rempli comme condition.

Gravity Forms, c’est si simple !

En fait, on peut aussi éviter du travail, ne pas demander à l'utilisateur du formulaire s'il souhaite recevoir une copie, mais tout simplement de le faire... mais je pense qu'un utilisateur, surtout s'il a fait de mauvaises expériences dans le passé, ne va pas s'attendre à recevoir un double et se sentira donc peut-être gêné d'utiliser le formulaire.

Pour en revenir à la question du début de l'article concernant le choix entre le formulaire de contact ou l’adresse email, pourquoi ne pas proposer les deux et laisser le choix au visiteur ?

OpenProject, mode d’emploi – première partie

Publié le par Anne-Gaële Wulkow

A l’occasion du lancement de la nouvelle version d’OpenProject (version 7), nous avons choisi de mettre cette application à l’honneur en lui consacrant un article dans notre Blog !

Nous allons vous présenter les 6 briques majeures qui font OpenProject managé. En ajoutant le terme « managé » à OpenProject, j’ajoute la sérénité et la tranquillité d’esprit : ne vous souciez pas de sa maintenance ; SaaS Web s’en occupe.

Tout d’abord, nous mettrons l’accent sur les 4 briques indispensables à la bonne utilisation du logiciel en détaillant les principales fonctionnalités puis nous nous pencherons sur 2 briques « d’accompagnement » plus qu’utiles pour une bonne prise en main de l’outil et surtout assurer une mise à jour en continue. En fil rouge, nous vous présenterons les nouveautés de la version 7.

Destiné essentiellement aux PME et startups, OpenProject est une application open source de gestion de projet. CRM, ventes, planification, suivi, collaboration, facturation, paiement…cet outil vous permet de ne plus rien laisser au hasard.

CONCEPTION    DÉFINITION&PLANNING   EXECUTION   CONTRÔLE

Nous allons voir en détails les outils disponibles à chaque étape de gestion de projet.

1. La conception de votre projet.

Un projet démarre souvent autour d’une idée, d’un brainstorming ou alors en réaction à un concurrent ou au tendance du marché.

Une fois les idées collectées et les premières guidelines définies, créez votre projet et éventuellement des sous-projets puis venez y intégrer autant de tâches que nécessaire. Appelées Work Package, ces tâches permettent de définir clairement toutes les actions à réaliser pour développer le projet.

Comprendre en détail ce qu’est un Work Package et les éléments qui le composent est indispensable à l’utilisation d’OpenProject : une fois assimilé, vous aurez déjà réalisé plus de la moitié du chemin.

Work package : Sous-ensemble d’un projet qui peut être affecté à une équipe ou à une personne spécifique pour l’exécution d’une action : tâches, bugs, repère et plus encore. Un Work Package a un type, un identifiant et un sujet.

Au niveau de la gestion d’un projet, d’autres attributs peuvent être ajoutés, tels que le responsable de la réalisation du travail, le nom de la version à laquelle un paquet de travail est affecté, le nombre de tâches affectées pour évaluer la taille du projet ect…

Nouveau : Il peut être difficile d’appréhender toutes les informations contenues dans un Work Package sur un petit écran, aussi la version 7 offre la possibilité de passer en mode Zen. En cliquant sur l’icône du mode Zen, masquez la navigation de côté et d’en-tête et affichez uniquement les informations du Work Package. Le mode Zen active également le mode plein écran du navigateur.

Prenons un exemple : votre objectif est de créer un site Web pour un client et d’assurer tout le suivi de la conception jusqu’à la facturation.

La 1ère action pourrait être : créer un site Web dont une des étapes pourrait être de créer la navigation du site Web.

A chaque action, vous devez définir s’il s’agit :

  • d’une tâche (Task) – action concrète à réaliser par une ou plusieurs personnes pour une date définie. Par exemple : créer la navigation du site Web
  • d’un bug – là aussi il s’agit d’une action bien précise à mener dans un temps imparti. Par exemple : corriger le lien de la page www.

L’ensemble des tâches et des bugs sont indiqués dans la timeline (chronologie ou ligne du temps) du projet sous forme de phase ou de repère.

  • Phase – Work Packages avec différentes dates de début et de fin.

Par exemple : créer le concept du site Web.

  • Jalon ou repère (Milestone) – Work Packages avec des dates de début et de fin identiques.

Par exemple : Tester les fonctions du site Web.

Un statut défini la progression de chaque action : en cours, programmé, terminé…

Nouveau : Une dernière nouveauté concernant les Work Packages : la possibilité de filtrer ces derniers par date (par exemple, Date de début, Date d’échéance, Créé le, Mise à jour) est maintenant incluse dans l’option de filtrage en fonction d’une date fixe.

2. La définition & le planning du projet

Plusieurs outils sont à votre disposition pour suivre et gérer votre projet : la timeline (ligne du temps), le calendrier et la roadmap (feuille de route). Pour chacun de ces outils, vous êtes libre de modifier les éléments que vous souhaitez y voir figurer.

La timeline de votre projet vous permet d’avoir une vision globale de votre projet. D’un coup d’œil, identifiez quelle équipe ou quelle personne délivrera tel ou tel Work Package. Vous pouvez rapidement repérer les retards ou les manquements. Il vous est tout à fait possible de créer et de suivre plusieurs projets simultanément dans une seule ligne du temps.

Nouveau : La timeline fait partie des éléments enrichis dans la nouvelle mouture OpenProject. Celle-ci est encore plus interactive et conviviale. Alors que la version précédente nécessitait plusieurs étapes pour chaque mise à jour, la nouvelle timeline permet une création et une mise à jour rapide des éléments directement dans celle-ci par glisser-déposer. Aussi, il est désormais possible de mettre en relation 2 Work Packages différents et de voir visuellement, dans la timeline, ces relations.

L’ensemble des phases et des actions à mener est automatiquement indiqué dans un module Calendar qui permet d’afficher et d’utiliser un calendrier dans un projet.

Visualisez facilement l’état d’avancement avec la roadmap. La page d’aperçu de la Roadmap affiche les versions classées par ordre alphabétique et les Work Packages qui leur sont assignés.

Obtenez un aperçu des étapes suivantes, des versions, ect… Vérifiez le statut des livrables et le temps alloué (time tracking) pour différentes actions.

Le time tracking est également un module. Il permet aux utilisateurs de consigner le temps passé sur chaque Work Package. Une fois que le module de suivi du temps est activé, le temps passé sur chaque action peut être enregistré via le menu d’action d’un Work Package.

Vous retrouverez dans notre prochain article les étapes finales de la gestion du projet : son exécution et le contrôle de celui-ci. En prime, nous nous pencherons sur l’accompagnement assuré par SaaS Web.

A bientôt !

PS : nous remercions l’équipe OpenProject qui nous a autorisé à utiliser les captures d’écrans utilisées dans cet article.