--- title: Chargement progressif slug: Web/Progressive_web_apps/Loading tags: - Chargement translation_of: Web/Progressive_web_apps/Loading original_slug: Web/Progressive_web_apps/Chargement --- {{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}} Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) une Progressive Web App: [Service Workers](en-US/docs/Web/Progressive_web_apps/Offline_Service_workers), [Manifestes Web](/fr/docs/Web/Progressive_web_apps/Installable_PWAs), [Notifications et Push](/fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push). Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources. ## Première visualisation signifiante Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné. Ceci peut être réalisé grâce au chargement progressif — également appelé [Lazy loading](https://en.wikipedia.org/wiki/Lazy_loading). Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience. ## Mise en paquet versus éclatement De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier `bundle.js` peut peser plusieurs megaoctets et un unique paquet `style.css` peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc. Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires. ## Render-blocking resources Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience. Pour corriger ça, nous pouvons, par exemple, ajouter `defer` aux fichiers JavaScript: ```html ``` Ils seront téléchargés et exécutés _après_ que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media: ```html ``` Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie. Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans `style.css` dans la balise `