Share
Dans ce tutoriel, je vais vous montrer comment améliorer les performances de vos pages Web en utilisant in-view.js. Cette bibliothèque JavaScript signale que quelque chose a défilé dans la fenêtre et nous aidera à charger dynamiquement nos images selon leurs besoins..
Les performances Web sont importantes, en particulier si votre site Web cible des pays en développement où les connexions sont lentes et les forfaits de données coûteux. Quelques tâches de base que nous entreprenons couramment pour améliorer les performances de nos sites Web incluent la minimisation des fichiers JavaScript et des feuilles de style, le «gzipping» des ressources, la compression de la taille des images, après quoi tout est prêt. Mais sommes nous?
Temps de chargement des pages et chronologie de l'inspecteur du navigateurL'exemple d'inspecteur ci-dessus montre une seule page chargeant 24 images dans une fenêtre de taille mobile à une vitesse 3G normale. Et comme on peut le constater, le chargement de la page est terminé en 11 secondes environ! C'est très lent, car nous avons affaire à une page simple ne contenant que quelques images et une feuille de style. La page n'est pas encore polluée par des annonces, ni des scripts de suivi qui ajoutent généralement un lest supplémentaire à la page..
Il ne faut pas oublier non plus qu’il s’agit simplement d’une émulation. Il ne prend même pas en compte la configuration du serveur, la latence et d’autres obstacles techniques. La performance pourrait être encore pire en réalité.
Alors, comment pouvons-nous améliorer les performances de chargement de page?
Tout d'abord, nous avons un certain nombre d'images. La raison pour laquelle notre page se charge lentement est parce que toutes les images s’inondent lors du chargement initial de la page. Si vous regardez de plus près l'image précédente, vous verrez que cela ne se produit pas en parallèle: quelques images ne commencent à se charger qu'une fois que d'autres sont en cours de rendu, ce qui enlève la page dans son ensemble..
Si nous avons un grand nombre d’images sur une seule page, nous pouvons envisager de charger ces images. asynchrone et seulement lorsque l'utilisateur en a besoin. Cela permet au navigateur de terminer le chargement de la page visualisable sans avoir à attendre que toutes les images soient rendues, ce qui économise finalement la bande passante de l'utilisateur..
Pour suivre, récupérez le fichier index-starter.html du référentiel. Il existe également un fichier css / styles-starter.css que vous pouvez également utiliser..
Pour commencer, nous devons remplacer les sources d’image par une très petite image, de préférence codée en base64, afin d’éviter toute requête HTTP supplémentaire. Nous utilisons cette image comme espace réservé avant de servir l'image réelle. Cela étant dit, nous devons également stocker la source de l'image réelle dans un attribut personnalisé nommé données-src.
Une fois que vous avez fait cela et actualisé la page, vous devriez trouver les images sont actuellement vides et leurs dimensions ne correspondent pas nécessairement à celles de vos images finales..
Alors corrigeons les styles.
Les images que nous souhaitons utiliser sont définies sur 800 x 550 pixels. Nous allons diviser la hauteur de l'image (800px) par la largeur de l'image (500px) et multipliez-le par 100%. Utilisez le résultat pour définir le rembourrage du pseudo-élément du conteneur d'image. Enfin, nous devons définir la position de l’image sur absolu et réglez la hauteur maximale sur 100%, donc ça ne va pas augmenter la hauteur.
figure position: relative; figure img top: 0; gauche: 0; position: absolue; hauteur maximale: 100%; figure: before padding-top: 69,25%; // (554/800) * 100%
À ce stade, les dimensions de l'image doivent être correctes. Cependant, la source d'images réelle réside toujours dans un attribut personnalisé, de sorte que le navigateur ne peut pas encore récupérer d'images..
L'image est à son rapport approprié, mais l'image est encore chargée.Notre prochaine étape consistera à ajouter du JavaScript qui chargera l’image..
Tout d'abord, nous devons charger in-view.js sur la page. Comme mentionné, cette bibliothèque légère (qui ne dépend pas de jQuery ou d'une bibliothèque principale telle que Waypoints) détecte si un élément est à l'intérieur ou à l'extérieur de la fenêtre du navigateur..
Créez maintenant un nouveau fichier JavaScript dans lequel nous allons écrire notre code JavaScript et le charger après in-view.js, comme suit:
La bibliothèque in-view.js expose les en vue() fonction qui prend un sélecteur comme argument. Dans ce cas, nous allons passer le figure élément; l'élément qui enveloppe les images. La raison pour laquelle nous avons sélectionné l'élément wrapper est que nous allons ajouter quelques classes pour effectuer des transitions de style. Cette opération est plus facile lorsque la classe est sur l'élément wrapper plutôt que sur l'image elle-même. Par conséquent:
Accentsconagua
inView ('figure')Ensuite, nous utilisons le .sur() méthode pour lier l'élément avec le entrer event pour vérifier si l'élément est dans la fenêtre. En outre, in-view.js expose également le sortie événement qui fait le contraire; cela détecte quand l'élément est sorti de la fenêtre.
inView ('figure') .on ('enter', fonction (figure) var img = figure.querySelector ('img'); // 1 if ('non défini'! == typeof img.dataset.src) / / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener ('load', function () figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (function () figure.classList.remove ('is-loading'); figure.classList.add ('est-chargé') ;, 300);););le entrer event déclenchera une fonction qui aura les effets suivants:
figure.données-src attribut.est en cours de chargement à l'emballage, figure, élément.données-src attribut.est en cours de chargement classe avec le est chargé classe.Comme vous pouvez le voir dans le code ci-dessus, nous avons introduit deux nouvelles classes est en cours de chargement, et est chargé. Nous utilisons le est en cours de chargement classe pour ajouter une animation spinner pendant le chargement de l’image. Nous utilisons ensuite le est chargé classe, comme son nom l'indique, pour ajouter l'effet de transition à l'image lorsque celle-ci est complètement chargée.
figure.is-chargé img animation: fadeIn 0,38s linéaire 1s en avant; figure.is-loading position: relative; figure.is-loading: after contenu: "; display: bloc; couleur: #ddd; taille de la police: 30px; text-indent: -9999em; débordement: masqué; largeur: 1em; hauteur: 1em; border-radius : 50%; marge: auto; position: absolue; haut: 50%; gauche: 50%; marge gauche: -0.5em; marge supérieure: -0.5em; transformation: translateZ (0); animation: chargement de 1.7s facilité infinie; @ images clés chargement 0% transformation: pivoter (0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 5%, 95% box-shadow: 0 -0,83em 0 -0,43em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 10%, 59% box-shadow: 0 -0.83em 0 -0.487em -0.087em -0.825em 0 -0,42em, -0,173em -0,812em 0 -0,44em, -0,256em -0,789em 0 -0,46em, -0,297em -0,775em 0 -0,477em; 20% box-shadow: 0 -0,83em 0 -0,4em, -0,338em -0,758em 0 -0,42em, -0,555em -0,617em 0 -0,44em, -0,671em -0,488em 0 -0,46em, -0,749em -0,34em 0 -0,477em; 38 % box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0. 74em 0 -0,42em, -0,645em -0,522em 0 -0,44em, -0,775em -0,297em 0 -0,46em, -0,82em -0,09em 0 -0,477em; 100% transformer: rotate (360deg); box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; @keyframes fadeIn 0% opacity: 0; 100% opacité: 1;
Espérer le meilleur, mais prévoir le pire. Donc, juste au cas où JavaScript est désactivé (cas rare, mais parfaitement possible), nous devons nous assurer que l'image sera toujours affichée. Utilisez le élément avec la source d'image pointant immédiatement sur la source d'image réelle.
Nous sommes tous ensemble! Actualisez la page et si nous inspectons la chronologie du réseau dans DevTools, nous constatons que la vitesse de la page a été considérablement améliorée, car nous ne chargeons que ce qui est visible pour les utilisateurs..
plus rapide!Le chargement de la page est maintenant terminé en 1,95 seulement à la vitesse 3G normale; plus de 500% d'amélioration de la vitesse!
Dans ce didacticiel, nous avons étudié comment améliorer le chargement de page en rendant les images uniquement lorsque l'utilisateur les voit. Cette méthode est communément appelée «chargement paresseux» et peut considérablement améliorer les performances de votre site Web..
Il existe de nombreuses bibliothèques JavaScript et plugins jQuery qui le font, alors pourquoi opter pour in-view.js? Personnellement, in-view.js est le genre de script que je recherche depuis le moment où il n’essaie pas d’en faire trop. Il ne gère qu'une chose et le fait bien. Ce type de bibliothèque donne plus de contrôle et une plus grande flexibilité.
Par exemple, nous pouvons non seulement utiliser in-view.js pour effectuer un chargement différé, mais également pour effectuer des opérations telles que le défilement infini, par exemple en affichant un formulaire de souscription flottant lorsque l'utilisateur atteint la fin de la page (take jetez un coup d’œil à la démo pour voir cela en action), ou créez un plan de montage vertical sans avoir à insérer une autre bibliothèque JavaScript. Dites-nous comment vous l'utilisez!
Formulaire d'abonnement flottant, animé lorsque l'utilisateur atteint la fin de la page