En février 2019, ouest-france.fr a été désigné par le Journal du Net comme le site de presse le plus rapide avec un Speed Index de 4214 sur mobile. C’est l’agence rennaise artwaï, en place chez Ouest-France depuis 2016, qui est en charge, entre autres, de la performance web.
Frédéric Pineau, directeur technique de l’agence, nous explique comment son équipe a mis en place de bonnes pratiques en s’appuyant sur la solution Dareboost.
Contexte et problématique de la presse quotidienne
Le modèle économique d’un média historique se base principalement sur les abonnements, complétés par des revenus publicitaires. La transition numérique vers la lecture d’articles en ligne est venue inverser la donne. Même s’il existe quelques exemples de médias sans publicité ne vivant que des abonnements (comme par exemple Mediapart), Ouest-France a elle dû faire face à une transition numérique – toujours en cours – pour trouver un équilibre.
L’objectif d’audience du site est primordial pour rentabiliser la publicité. Dès lors, la performance web est un point prépondérant pour développer et conserver cette audience.
Comment a débuté ce chantier d’optimisation des performances web de Ouest-France ?
En octobre 2016, Ouest-France décide de confier à artwaï l’intégration des pages web. La priorité est l’amélioration des performances du site ouest-france.fr.
Nous avons donc commencé par réaliser un état des lieux complet du site. Dareboost a notamment permis d’analyser les pages et plus généralement toute la chaîne (du site de développement au site de production, en passant par le site de préproduction) mais aussi par extension, les outils de développement, notamment le rendu des préprocesseurs CSS et JavaScript (comme Gulp, par exemple). Nous avons mis en place plusieurs sondes pour faire cet état des lieux et surtout constater les gains obtenus par nos interventions.
Mais avant d’intervenir réellement sur le code, nous avons réalisé un plan d’action. Avec les différents intervenants, nous nous sommes réunis pour définir les priorités et les actions courantes d’intégration web à traiter. À partir de là, nous avons mis en place une équipe de 3 à 4 personnes sur place pour traiter tous ces points.
Concrètement, quelles techniques ont été mises en œuvre ?
Nous avons commencé par optimiser le site existant (version desktop) basé sur Drupal. À ce moment-là, Ouest-France privilégiait son application native à la version mobile de son site. Et comme vu pendant l’état des lieux, nous ne pouvions optimiser le site mobile sans le refondre.
Le conseil d’artwaï a été de refondre le site en responsive et non plus en deux versions de sites. Mais pour des questions de priorité, il a fallu attendre un peu de temps pour cette refonte.
Notre premier angle d’attaque a été de réduire le nombre de requêtes. Tout d’abord les fichiers JavaScript (qui étaient nombreux) ont été minifiés, compressés et même factorisés, notamment en supprimant les nombreux doublons du framework jQuery. Ce qui impliquait donc également d’adapter le code JavaScript pour être compatible avec la version retenue de jQuery.
Nous avons aussi reporté certaines requêtes Ajax après le chargement, conditionnées par les actions de l’utilisateur. En effet, ces requêtes ne sont utiles que lorsque l’utilisateur en a besoin ! En fait, ce n’est plus ni moins que du Lazy Loading que nous avons appliqué à ces appels mais aussi aux images, et bien sûr à certains contenus embarqués (vidéo, iframe, etc.).N’hésitez pas à consulter l’article de Dareboost dédié au Lazy-Loading des images.
Avec ces quickwins, nous avons très rapidement placé Ouest-France sixième du classement de la web performance du JDN.
Le Speed Index desktop est ainsi passé de 3155 ms avant notre intervention à 1897 ms.
Ensuite, nous nous sommes attaqués au poids. Tout d’abord nous avons nettoyé le code HTML, supprimé les scripts et les styles inline, les commentaires HTML et revu la sémantique des balises… en s’assurant que notre code soit bien valide en HTML 5.
Coté CSS, nous avons mis en place une chaîne de production basée sur Sass et Gulp en préprocesseur.
Tout cela a permis que Ouest-France passe en tête du classement desktop avec un Speed Index de 1521 ms.
En quoi Dareboost vous a-t-il facilité la tâche ?
En entreprise ne progresse que ce qui est mesuré ! Nous avons donc commencé par mettre en place un référentiel stable et objectif des performances web. Tous nos tests de performance s’appuient sur Dareboost, soit via l’interface, soit via l’API.
Le monitoring est essentiel. Puisque nos centres de services sont en livraison continue, les alertes sur ce monitoring nous permettent de remonter immédiatement toute baisse de performance.
Les outils proposés par Dareboost nous ont donc considérablement aidé dans cette tâche. Avec un partenaire indépendant, nous avions aussi la garantie d’avoir des mesures impartiales. Enfin, Dareboost étant un service externe (Software as a Service) nous n’avons donc pas besoin de maintenir un système de sondes en interne.
Comment avez-vous continué à maintenir une bonne performance web face aux évolutions du site web et des technologies ?
Comme dit précédemment le monitoring au quotidien est essentiel.
Toutefois nous avons aussi intégré à nos réunions mensuelles de pilotage, les indicateurs de Dareboost. Nous analysons toutes les fluctuations des indicateurs afin d’en connaître la cause. À chacune de ces réunions, nous fixons des objectifs en prévoyant les charges et moyens nécessaires, tout en consolidant les budgets de performance définis ensemble.
C’est ce qui nous permet de suivre les indicateurs et d’impliquer le client dans la démarche.
La refonte du site a-t-elle permis de débloquer des sujets supplémentaires ? pour quels résultats ?
Le Front du site a été refondu dès juin 2017. Tout le code a été pensé pour la performance, le respect des normes, le SEO et l’accessibilité.
Nous avons donc ainsi pu gagner encore quelques points en desktop en passant sous la barre de 1000 en Speed Index.
Ce fut surtout l’occasion d’enfin attaquer la version mobile du site, puisqu’il est codé de manière responsive et mobile first.
Nos efforts ont commencé à payer en mobile à partir de janvier 2018 jusqu’à être classé 3e toujours sur le classement de la performance web du JDN en décembre dernier.
Quelles sont vos prochaines pistes d’amélioration ?
Sur le plan technique, nous comptons passer le site d’Ouest France en Progressive Web App. Cela rapprochera l’expérience utilisateur du site mobile de celle de l’application native.
Culturellement, nous voulons faire connaître la problématique de la web performance auprès des prestataires externes qui fournissent des services dont dépendent les pages du site (third party).
Pour mieux mesurer l’impact des contenus et services externes, rappelons que Dareboost propose une fonctionnalité de blacklist / whitelist et supporte également nativement les Custom Timings pour la mise en place d’indicateurs personnalisés sur vos pages web.
Présentation d’artwaï
Fondée 2005, artwaï est une agence web basée à Rennes, composée de 13 collaborateurs et d’un réseau d’experts indépendants, représentant 30 équivalents temps plein (ETP).
Avec 3 cœurs de métiers (intégration web, centre de service et web performance) artwaï offre un large panel de prestations : site internet, application web, audit, optimisation, POC, maintenance et formation. Frédéric – en tant que directeur technique – met un point d’orgue à expérimenter toutes les solutions qu’artwaï préconise auprès de ses clients. Le site artwai.com est à la fois un outil pédagogique avec son blog mais aussi un démonstrateur du savoir-faire d’artwaï qui se targue d’obtenir la note de 100 % sur Dareboost !