Audit - RemiMoustey/to-do-list-app GitHub Wiki

Globalement, l’application met plus de temps à se charger sur un mobile que sur un ordinateur de bureau.

Le temps que met la première image ou le premier texte à s’afficher sur la page est assez rapide, que ce soit sur ordinateur ou sur mobile.

En revanche, il subsiste quelques points noirs lors du chargement. En effet, si le premier élément se charge rapidement, le temps nécessaire pour que l’utilisateur puisse pleinement interagir avec toutes les fonctionnalités du site web est nettement plus important. Il conviendra d’être attentif sur ce point lors du scaling de notre application. De la même façon, l’élément le plus lourd nécessite un temps de chargement supérieur à la normale.

En outre, contrairement à notre application, l’application concurrente utilise des outils tiers, comme Google Analytics, ce qui tend à augmenter son temps de chargement. Il y a notamment une balise <script> appelant un service de Twitter de manière synchrone, ce qui tend à allonger le temps de chargement.

Les publicités sont bien gérées par l’application. Elles sont chargées de façon asynchrone et le temps de chargement est faible.

Ces différentes anomalies de durée de chargement peuvent être évitées en réduisant le temps d’exécution du JavaScript. C’est la cause principale des ralentissements. Pour atteindre cet objectif, il faut tout d’abord ajouter l’attribut « async » ou « defer » dans les balises script situées dans l’en-tête de la page HTML, pour lui permettre de continuer de se charger, ce que le site concurrent a fait. De notre côté, nous avons placé les appels au JavaScript au bas de l’élément body, ce qui a l’avantage de charger le JavaScript plus vite sur les vieux navigateurs. Mais une amélioration pourrait tout de même être apportée : plus il y a de fichiers JavaScript à charger, plus le chargement de la page est long.

Il serait alors intéressant de concaténer tous les fichiers JavaScript en un seul côté serveur afin de n’avoir qu’une seule requête. De plus, minifier les fichiers JavaScript et CSS améliorerait encore le temps de chargement de la page. Cela signifie supprimer les espaces, les sauts de lignes, les commentaires… Des outils en ligne réalisent cette tâche comme celui-ci.

Il faudrait aussi s’assurer que les textes sont visibles pour l’utilisateur, même lors du chargement des différentes polices. Pour cela, il est bien d’ajouter une ou plusieurs polices par défaut déjà présentes dans le navigateur en plus des polices personnalisés que ce dernier devra télécharger lors d’une première visite sur l’application. Pour que cette application soit une PWA, il serait nécessaire d'ajouter un viewport.

Concernant les publicités et même si leur chargement est géré efficacement, il est possible, pour des raisons de sécurité, de les charger via le protocole HTTPS plutôt que HTTP.

Ces éléments doivent être pris en compte dans le développement de notre application pour répondre à un possible scaling.