PhotoDeck vs alternatives : optimiser la vitesse de chargement

Ce billet, écrit par les développeurs derrière le logiciel sur lequel se base PhotoDeck, est un brin technique. Mais c’est pour une cause importante : la vitesse de votre site. Il s’agit d’une amélioration qui vient d’être apportée, mais surtout, c’est une illustration de notre philosophie et du travail qui fait que les sites PhotoDeck sont plus rapides que les autres.

JavaScript est un composant essentiel du code qui fait fonctionner votre site, tout comme HTML et CSS. Chaque fois que vous ouvrez un site sur Internet, vous chargez son code JavaScript. Souvent, une grosse quantité.

Il est donc important que ce code soit chargé rapidement. Il est également important qu’il soit compact et bien conçu, de sorte que l’ordinateur ou le téléphone du visiteur puisse non seulement le charger rapidement, mais également l’exécuter aussi vite que possible. Du code optimisé fait moins travailler l’appareil, nécessite moins d’énergie, et cela a un impact sur l’utilisation de la batterie, et dans l’absolu, sur l’environnement.

Nous venons de terminer un projet pour optimiser encore davantage le code JavaScript sur les sites PhotoDeck. Le mot « optimisation » est peut-être un euphémisme vus les résultats, nous y reviendrons dans un instant.

(Allez directement aux résultats principaux si vous êtes pressés)

La plupart des sites web s’appuient sur des librairies de code publiques. Elles offrent des fonctions-clés toutes prêtes, et il est plus facile pour un développeur de simplement assembler ces blocs de constructions et d’ajouter du nouveau code par-dessus.

Ces librairies externes sont extrêmement pratiques, mais leur taille est importante, et elles ralentissent le site. De plus, elles évoluent au fil du temps (notamment pour s’adapter aux nouvelles capabilités des navigateurs et à cause de problèmes de sécurité), et les développeurs web doivent constamment mettre à jour leur propre code en conséquence. Cette maintenance est si exigeante que peu s’en préoccupent.

Comme presque tout le monde, nous avons utilisé des librairies publiques depuis notre lancement en 2010. À l’inverse de presque tout le monde, nous avons toujours mis à jour le code et maintenu sa sécurité.

Mais nous sommes toujours à l’affût de moyens d’accélérer nos sites encore davantage - ils ont depuis le début été les plus rapides des alternatives, et ce n’est pas un hasard.

Voici donc la news du jour : nous avons donné un coup de hache aux librairies externes et les avons remplacés par notre propre code optimisé.

Les résultats, comparés aux concurrents

Nous avons réduit la taille du code JavaScript sur les sites PhotoDeck de 32 %. Non seulement il se charge bien plus rapidement, mais comme il est mieux intégré, il est également beaucoup plus léger à exécuter pour les navigateurs.

Maintenant, le JavaScript sur un site PhotoDeck pèse juste 48 Ko. C’est environ la taille d’une vignette de photo.

Mettons cela en perspective en comparant une simple page Contact hébergée sur un site PhotoDeck avec une page similaire sur des sites mis en avant par trois de nos principaux concurrents. Ces alternatives à PhotoDeck sont des « leaders » basés aux USA et il ne fait que peu de doute que vous les connaissiez.

• PhotoDeck : 48 Ko
• Concurrent A : 650 Ko, librairies non mises à jour depuis 2012, avec 6 failles de sécurité connues
• Concurrent B : 470 Ko, librairies non mises à jour depuis 2014, avec 5 failles de sécurité connues
• Concurrent C : 750 Ko, librairies non mises à jour depuis 2014
• Nous pourrions continuer facilement…

En moyenne sur ce petit échantillon, le code JavaScript sur un site PhotoDeck est douze fois plus léger.

Pourquoi est-ce important ?

La vitesse de chargement est chose très importante, mais comme nous ne sommes pas du genre à « vendre du vent », soyons clairs : cette optimisation va accélérer votre site, mais ce ne sera pas une révolution pour vos clients ni votre référencement sur Google (un site PhotoDeck était déjà exceptionnellement rapide avant cette nouvelle amélioration).

Pourtant, il y a d’autres aspects.

La sécurité, naturellement. Davantage de code signifie des risques accrus.

L’expérience du visiteur sur les pages du site, également. L’utilisation directe de nouvelles technologies récentes dans les navigateurs, au lieu de librairies externes, résulte en une exécution plus fluide et rapide.

De manière générale, l’obésité et la non-maintenance du code sont des indicateurs de négligence et de fragilité - pour toute une plateforme.

C’est ici que nous revenons à notre philosophie : nous n’aimons pas les déchets. Nous aimons quand les choses sont propres, rapides, robustes, et ne consomment pas davantage de ressources que nécessaire.

Il y a de la beauté dans l’optimisation, et c’est chose juste à faire !

Note

Pour vérifier par vous-même les résultats ci-dessus (ou pour comparer avec un autre site), ouvrez simplement les outils de développement dans le navigateur de votre ordinateur, et sous l’onglet Network, cliquez sur le filtre JS, cochez la case pour désactiver le cache, puis rechargez la page. Vous verrez les totaux en bas de la fenêtre. Lorsqu’il y a un Captcha, nous l’avons exclus par soucis d’équité de comparaison, de même que les trackeurs. Les failles de sécurité sont identifiées à l’aide de l’outil Lighthouse dans Chrome.