Cas client

Calendly sans le widget, un agenda cinq fois plus rapide.

Un organisme de bilan de compétences recevait ses demandes de rendez-vous par le widget Calendly intégré à son site. Sur mobile, l’agenda mettait plusieurs secondes à apparaître, et une partie des visiteurs repartaient avant de le voir. Nous l’avons remplacé par un agenda codé sur mesure, branché directement sur l’API de Calendly.

Par Publié le

Parler de votre projet

Ce que nous avons construit

  • Les créneaux lus par l’API

    Le site interroge Calendly depuis le serveur et affiche les disponibilités dans sa propre page, sans charger l’iframe ni les scripts de Calendly.

  • Un cache qui absorbe les pics

    Les créneaux sont gardés en mémoire une minute : une campagne qui envoie des centaines de visiteurs ne déclenche pas autant d’appels à Calendly.

  • La réservation sans quitter le site

    Le rendez-vous est créé par l’API avec les réponses du visiteur. Si le créneau vient d’être pris, il voit aussitôt les créneaux à jour, au lieu d’une erreur.

  • Des réservations mesurées

    Chaque rendez-vous remonte dans Google Analytics et Meta, et la provenance de la campagne est transmise à Calendly.

  • Une protection anti-robot

    Cloudflare Turnstile, limites par adresse et par e-mail, verrou contre les doubles réservations. La clé d’accès à Calendly ne quitte jamais le serveur.

  • Un plan de secours

    Si Calendly ne répond pas, le visiteur bascule sur la page Calendly classique avec ses informations déjà remplies : aucune demande perdue.

Notre démarche

  1. Mesurer

    Chronométrer l’agenda existant sur ordinateur et sur mobile, en réseau ralenti.

  2. Reproduire

    Recréer le parcours de réservation à l’identique, questions comprises, à partir de l’API.

  3. Sécuriser

    Protéger le formulaire, gérer chaque erreur et prévoir le retour vers Calendly.

  4. Comparer

    Mesurer les deux versions dans les mêmes conditions avant la mise en ligne.

Résultats

Ce que le visiteur gagne

  • Avant : 3,5 s Après : 0,64 s pour afficher la première date cliquable sur ordinateur
  • Avant : 5,1 s Après : 1,16 s sur mobile, en réseau ralenti
  • Avant : 46 Après : 5 requêtes réseau pour afficher l’agenda

Chiffres barrés : avec le widget Calendly. Mesures au banc d’essai, médiane de cinq passages, widget Calendly contre agenda sur mesure.

Frises de chargement

Le chargement du widget Calendly, image par image.

Le même agenda Calendly, chargé de deux façons : le widget Calendly intégré tel quel, avec son script et son iframe, et notre agenda sur mesure qui lit les créneaux par l’API Calendly. Nous avons filmé l’écran d’un téléphone, cache vide, sur trois qualités de réseau. Chaque vignette montre ce que voit le visiteur à l’instant indiqué : c’est là que se voit pourquoi le widget Calendly paraît lent sur mobile.

Connexion rapide fibre ou Wi-Fi, sans bridage

7,7× plus rapide : première date cliquable en 0,90 s au lieu de 6,87 s.

Version 0 s 1 s 2 s 3 s 4 s 5 s 6 s 7 s 8 s
Widget Calendly6,87 s Widget Calendly, 1 s : chargement en cours Widget Calendly, 2 s : chargement en cours Widget Calendly, 4 s : chargement en cours Widget Calendly, 5 s : chargement en cours Widget Calendly, 6 s : chargement en cours Widget Calendly, 7 s : agenda affiché, dates cliquables Widget Calendly, 8 s : agenda affiché, dates cliquables
Agenda sur l’API0,90 s Agenda sur l’API, 1 s : agenda affiché, dates cliquables Agenda sur l’API, 2 s : agenda affiché, dates cliquables Agenda sur l’API, 3 s : agenda affiché, dates cliquables Agenda sur l’API, 4 s : agenda affiché, dates cliquables Agenda sur l’API, 5 s : agenda affiché, dates cliquables Agenda sur l’API, 6 s : agenda affiché, dates cliquables Agenda sur l’API, 7 s : agenda affiché, dates cliquables Agenda sur l’API, 8 s : agenda affiché, dates cliquables
  • Rien de cliquable
  • Première date cliquable

4G rapide 9 Mb/s, 165 ms de latence

8,2× plus rapide : première date cliquable en 0,92 s au lieu de 7,62 s.

Version 0 s 1 s 2 s 3 s 4 s 5 s 6 s 7 s 8 s
Widget Calendly7,62 s Widget Calendly, 1 s : chargement en cours Widget Calendly, 2 s : chargement en cours Widget Calendly, 4 s : chargement en cours Widget Calendly, 5 s : chargement en cours Widget Calendly, 7 s : chargement en cours Widget Calendly, 8 s : agenda affiché, dates cliquables
Agenda sur l’API0,92 s Agenda sur l’API, 1 s : agenda affiché, dates cliquables Agenda sur l’API, 2 s : agenda affiché, dates cliquables Agenda sur l’API, 3 s : agenda affiché, dates cliquables Agenda sur l’API, 4 s : agenda affiché, dates cliquables Agenda sur l’API, 5 s : agenda affiché, dates cliquables Agenda sur l’API, 6 s : agenda affiché, dates cliquables Agenda sur l’API, 7 s : agenda affiché, dates cliquables Agenda sur l’API, 8 s : agenda affiché, dates cliquables
  • Rien de cliquable
  • Première date cliquable

4G lente 1,6 Mb/s, 562 ms de latence

12,9× plus rapide : première date cliquable en 1,62 s au lieu de 20,9 s.

Version 0 s 3 s 6 s 9 s 12 s 15 s 18 s 21 s 24 s
Widget Calendly20,9 s Widget Calendly, 3 s : chargement en cours Widget Calendly, 6 s : chargement en cours Widget Calendly, 9 s : chargement en cours Widget Calendly, 12 s : chargement en cours Widget Calendly, 21 s : agenda affiché, dates cliquables Widget Calendly, 24 s : agenda affiché, dates cliquables
Agenda sur l’API1,62 s Agenda sur l’API, 3 s : agenda affiché, dates cliquables Agenda sur l’API, 6 s : agenda affiché, dates cliquables Agenda sur l’API, 9 s : agenda affiché, dates cliquables Agenda sur l’API, 12 s : agenda affiché, dates cliquables Agenda sur l’API, 15 s : agenda affiché, dates cliquables Agenda sur l’API, 18 s : agenda affiché, dates cliquables Agenda sur l’API, 21 s : agenda affiché, dates cliquables Agenda sur l’API, 24 s : agenda affiché, dates cliquables
  • Rien de cliquable
  • Première date cliquable

Banc d’essai

Les mesures en détail.

Étape du chargement Connexion rapide 4G rapide 4G lente
Widget API Widget API Widget API
Réponse du serveur (TTFB) 0,39 s 0,69 s 0,31 s 0,68 s 0,75 s 0,80 s
Première date cliquable 6,87 s 0,90 s 7,62 s 0,92 s 20,9 s 1,62 s
Écart sur 7 passages 5,86 s à 9,15 s 0,73 s à 1,43 s 7,18 s à 9,27 s 0,84 s à 1,49 s 20,5 s à 21,9 s 1,49 s à 2,82 s
Requêtes avant la première date 62 4 64 4 38 4
Données avant la première date 4,9 Mo 54 Ko 4,9 Mo 54 Ko 4,0 Mo 54 Ko
Requêtes au total 74 5 73 5 60 5
Domaines tiers contactés 21 0 21 0 17 0
Gain sur la première date 7,7× plus rapide 8,2× plus rapide 12,9× plus rapide

Réponse du serveur : la page du widget n’est qu’un fichier statique, celle de l’agenda lit d’abord les créneaux sur le serveur, ce qui lui coûte quelques dixièmes de seconde. Le widget, lui, reporte ce travail sur le téléphone du visiteur.

Domaines tiers : services contactés hors du site et de sa mesure d’audience.

Faites appel à nous quand

  • votre page de rendez-vous met plusieurs secondes à afficher l’agenda sur mobile
  • vos campagnes payantes envoient leurs visiteurs vers un widget qui se charge après la page
  • vous voulez mesurer les réservations dans Google Analytics ou Meta sans dépendre du suivi de l’outil
  • l’agenda doit reprendre l’apparence de votre site plutôt que celle de l’outil

Questions fréquentes

Vos questions, nos réponses.

Faut-il quitter Calendly ?

Non. Calendly reste l’outil de l’équipe : agendas, confirmations et rappels ne changent pas. Seul l’affichage sur le site change.

Que se passe-t-il si Calendly ne répond pas ?

Le visiteur est envoyé vers la page Calendly classique, avec ses informations déjà saisies. La demande n’est pas perdue.

Pourquoi le widget Calendly est-il lent sur mobile ?

Le widget charge l’application Calendly entière dans une iframe : près de 5 Mo de scripts et une soixantaine de requêtes vers une vingtaine de services tiers, avant d’afficher la première date. Sur notre banc d’essai, il faut près de 7 secondes en connexion rapide et près de 21 secondes en 4G lente.

Comment accélérer le chargement de Calendly ?

Retarder le widget ou précharger ses domaines fait gagner peu, car le téléphone télécharge toujours la même application. Ce qui change l’ordre de grandeur, c’est d’afficher les créneaux soi-même : le site les lit par l’API Calendly et montre son propre agenda, prêt en moins d’une seconde sur notre banc d’essai.

Peut-on personnaliser le calendrier Calendly aux couleurs de son site ?

Le widget n’accepte que quelques réglages de couleurs. Un agenda branché sur l’API Calendly se dessine comme le reste du site : polices, couleurs, textes, questions et mise en page sont libres.

L’intégration de l’API Calendly fonctionne-t-elle avec WordPress ?

Oui, c’est notre cas le plus courant : l’agenda est intégré au thème du site et la clé d’accès à Calendly reste sur le serveur, jamais dans la page.

Est-ce possible avec un autre outil de rendez-vous ?

Oui, dès lors que l’outil propose une API pour lire les disponibilités et créer un rendez-vous. Nous le vérifions au cadrage.

Un projet en tête ? Parlons-en.

Parler de votre projet