Amélioration de la vitesse au détriment de ne pas travailler avec JS désactivé
J'ai une galerie d'images qui charge actuellement les images à l'aide de balises img standard et comme il a beaucoup de grandes images, il se charge assez lentement.
Je peux accélérer les choses en demandant au script de la galerie de charger dynamiquement les images après le chargement de la page. J'ai testé cela et il y a un gain de performances significatif. Le problème est qu'en faisant cela, l'image ne se charge pas si l'utilisateur a désactivé JS.
La question est donc la suivante: est-ce un compromis valable pour gagner en performances au détriment de la page ne fonctionne pas si JS est désactivé?
Dans ce cas spécifique, je pense que je vais utiliser la balise noscript, mais que faire si je n'avais pas le contrôle de la sortie html (disons dans un CMS).
Quelques réflexions rapides:
- Reconcevoir votre interface utilisateur afin que vous n'ayez pas besoin de charger plus de N images. Par exemple, introduisez la pagination.
- De nombreux navigateurs ne rendent que des images visibles par l'utilisateur. Pensez à cacher les autres images en les déplaçant hors écran ou dans une div avec débordement: caché ou quelque chose.
- Chargez les N premières images sur pageload puis les autres par la suite. Le chargement des images restantes nécessiterait javascript, et vous pourriez ajouter une balise noscript qui ajoute la pagination pour les quelques utilisateurs qui n'ont pas activé JS.
- Selon le type d'images que vous traitez, combinez les images dans une feuille Sprite et chargez-les toutes en tant qu'images d'arrière-plan en utilisant background-position en CSS pour afficher uniquement les bonnes parties. Le temps de chargement initial sera lourd, mais peut être mis en cache.
En fin de compte, je ne peux pas répondre si l'arrêt de JS est un compromis valable parce que je ne sais pas quel est votre public. J'aurais besoin de plus d'informations. Dans la plupart des cas, avec les sites Web sur lesquels j'ai travaillé, nous avons tendance à tendre vers une amélioration progressive. Le troisième exemple de ma liste serait donc celui que je choisirais probablement.
Et si au lieu d'exiger que JS accélère le chargement des images, vous chargez les images à la fin d'une autre page de sorte que lorsque vous souhaitez afficher la galerie, elles soient déjà chargées. Vous voulez simplement vous assurer que les images sont après tout le contenu important et que vous utilisez les mêmes noms pour pouvoir les mettre en cache.
Si vous vouliez vous en tenir au chargement avec JS, je recommanderais de vérifier d'abord JS et d'utiliser la charge dynamique s'ils prennent en charge JS, et de retomber sur une norme s'ils n'ont pas JS.
Vous pouvez le faire progressivement. C'est-à-dire que le HTML initial génère des balises IMG, comme il le fait maintenant. Mais immédiatement en charge, votre jQuery se déclenche et remplace dynamiquement les balises IMG par vos chargeurs personnalisés. Le meilleur des deux mondes.
Même les grandes entreprises commencent à exiger Javascript. Par exemple, si Javascript est désactivé dans IE, saviez-vous que vous ne pouvez même pas télécharger Google Chrome? Le bouton Accept and Install Ne fonctionne pas. Ils montrent simplement ce bout de texte en haut de l'écran:
Vous avez besoin d'un navigateur compatible JavaScript pour télécharger ce logiciel. Cliquez ici pour obtenir des instructions sur la façon d'activer JavaScript dans votre navigateur.
Personnellement, je pense que l'exigence Javascript est une erreur de leur part pour ce scénario, mais je m'égare.
Bien sûr, cela dépend de votre public, mais au cours des deux dernières années, j'ai également créé pas mal d'interfaces Web qui nécessitent Javascript pour fonctionner.
La seule préoccupation restante est le référencement. Si vous souhaitez que les images de votre galerie soient indexées par Google, vous en aurez besoin pour apparaître dans le HTML.
La question "Que faire si Javascript est désactivé" est une question qui devrait être autonome. Alors que vous devez vous assurer que votre application/site est toujours utilisable avec JS désactivé, vous devez également penser à qui est votre public. Honnêtement, nous sommes en 2010 et les développeurs Web ne devraient même pas avoir besoin de réfléchir à ce problème (je n'en ai plus).
Utilisez des analyses pour déterminer si vos utilisateurs ont activé/désactivé JS. Si c'est moins de 5% de vos utilisateurs ne perdent même pas de temps sur une solution de contournement.