Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Désactive la navigation JS (Turbo Drive) par défaut #1144

Merged
merged 1 commit into from
Jan 14, 2025

Conversation

florimondmanca
Copy link
Collaborator

@florimondmanca florimondmanca commented Jan 13, 2025

En me baladant sur DiaLog sur mon mobile (smartphone Android / Firefox), j'ai remarqué que quand on clique sur un lien, il n'y a pas de "feedback" indiquant que la nouvelle page charge

Donc l'utilisateur attend un certain temps (dépendant de sa connexion) sans aucune indication de chargement, puis la page change tout d'un coup

C'est lié à la navigation par JS qui est orchestrée par Turbo Drive, qui convertit le site en une expérience "SPA-like"

Or un navigateur est parfaitement capable de gérer cette "UX de chargement"

De plus, les recommandations du service public anglais GOV.UK sont de ne pas faire de SPA par défaut, et surtout pas pour des sites de contenus (en gras ce qui nous concerne) :

https://www.gov.uk/service-manual/technology/using-progressive-enhancement#single-page-applications

Single page applications

Do not build your service as a single-page application (SPA). This is where the loading of pages within your service is handled by JavaScript, rather than the browser.

Single page applications rarely bring benefits and can make the service inaccessible because:

  • users of assistive technology would be unaware of changes in context, for example when moving to a new page
  • it would fail to handle focus when moving between pages
  • the user would be unable to navigate using the back or forward buttons in their browser
  • users would be unable to recover from an error, for example if there is an interruption to their network connection

Je propose donc de désactiver Turbo Drive.

NOTA :

  • ça n'impacte pas Turbo Frames ni Turbo Streams, toutes nos UX "interactives" réalisées avec elles ou Stimulus fonctionnent toujours
  • ça n'impacte pas la performance globale lors de la navigation. Le DOM doit toujours être chargé puisque Turbo Drive remplace le <body>. La différence est uniquement dans le chargement des assets, or là le cache fait toujours très bien son boulot

@codecov-commenter
Copy link

codecov-commenter commented Jan 13, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.86%. Comparing base (6765d3a) to head (4b9fa7b).

Additional details and impacted files
@@            Coverage Diff            @@
##               main    #1144   +/-   ##
=========================================
  Coverage     98.86%   98.86%           
  Complexity     1837     1837           
=========================================
  Files           367      367           
  Lines          7931     7931           
=========================================
  Hits           7841     7841           
  Misses           90       90           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Collaborator

@mmarchois mmarchois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'approuve à contre coeur

@florimondmanca
Copy link
Collaborator Author

florimondmanca commented Jan 14, 2025

@mmarchois Je me demandais quelles étaient les "métriques" / "mesures" qui permettraient de trancher la question, et surtout quelle question se posait

De ma compréhension, la seule différence c'est que le chargement de la page a lieu "explicitement" / "au premier plan" au lieu d'être fait "en arrière plan" par JS

Au final il faut toujours charger les mêmes données HTML, et pour les assets, j'ai pu vérifier que le cache était toujours efficace, rien n'est transféré par le réseau en navigant d'une page à l'autre

Capture d’écran du 2025-01-14 14-35-06

De plus je viens de comparer les résultats lighthouse sur la prod et sur la branche, et ils sont identiques

First Contentful Paint
1.8 s
Largest Contentful Paint
2.6 s
Total Blocking Time
10 ms
Cumulative Layout Shift
0.004
Speed Index
1.8 s

Merci pour l'approve en tout cas!

@florimondmanca florimondmanca merged commit bbf6f0f into main Jan 14, 2025
6 checks passed
@florimondmanca florimondmanca deleted the fix/turbo-off branch January 14, 2025 14:02
@mmarchois mmarchois mentioned this pull request Jan 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

A11é : Changements de page non-anoncés
3 participants