Le projet "Accélération des pages mobiles" (AMP) de Google a récemment contribué à faire en sorte que les sites Web deviennent plus rapides. Avec une bonne technique et un réseau de distribution de contenu puissant, Google a directement rendu les sites améliorés par AMP plus rapides. Cependant, AMP a également travaillé indirectement en nous encourageant à examiner les optimisations et les meilleures pratiques que contient AMP. Même si vous n'êtes pas sur le point de rendre votre site Web compatible AMP, il est utile de comprendre AMP comme une liste de tâches à effectuer pour optimiser un site Web non-AMP..

L'une des optimisations de cette liste est une technique appelée "chargement paresseux", que nous avons vue en action dans notre récent article sur l'utilisation des AMP.  élément personnalisé. Avec cette technique, lorsqu'un visiteur arrive pour la première fois sur une page, seules les images situées dans la fenêtre ou à proximité sont chargées. Le reste se déclenche lorsque le visiteur défile.

Le chargement paresseux permet au visiteur de commencer à consulter du contenu plus rapidement, et la vitesse de chargement améliorée peut booster votre classement dans les moteurs de recherche. Plus vous avez d'images sur une page, plus vous gagnez en améliorations de la vitesse.

Dans ce didacticiel, nous verrons comment déployer le chargement paresseux sur des sites Web non-AMP à l'aide d'un script appelé Layzr.js. Nous allons reproduire la fonctionnalité des AMP élément aussi étroitement que possible, mais nous allons également travailler avec certaines des fonctionnalités spécifiques à Layzr.

Commençons!

1. Configuration de base

Dans le cadre de l'article "Projet AMP: vos sites seront-ils plus rapides?" J'ai créé une mise en page de base contenant cinq images. Pour vous permettre de faire des comparaisons entre l’utilisation d’AMP et le chargement par vous-même, nous allons recréer cette même mise en page à cinq images. Je vais vous montrer comment exécuter divers tests de vitesse de chargement plus tard dans ce tutoriel..

Dans les fichiers source joints à ce didacticiel, vous trouverez la version AMP de la mise en page et la version complète de ce que vous allez créer ici. Les deux sont inclus pour vous aider à décider quelle approche vous convient le mieux.

À mesure que nous parcourons tout, je vous recommande de tester votre travail avec les outils de développement Chrome (F12) avec le Réseau onglet ouvert, Désactiver le cache vérifié, et étranglement réglé à 3G régulière. Ceci simule une connexion mobile moyenne, vous montrant un graphique de chaque chargement d'image en temps réel, et vous aidera à avoir une vision claire du fonctionnement de votre chargement paresseux..

Lorsque vous actualisez la page à des fins de test, maintenez la touche enfoncée. recharger bouton, ce qui fera apparaître une liste déroulante avec différentes options. Choisir Cache vide et rechargement dur simuler complètement un visiteur arrivant sur votre site la première fois.

Créer un shell HTML

Commençons par les bases. Tout d’abord, créez un dossier pour héberger votre projet et créez un fichier nommé index.html.

Ouvrez-le pour édition et ajoutez le code suivant:

         
Bienvenue sur le Web chargé paresseux
  

Avec le code ci-dessus, nous obtenons simplement un shell HTML en place, et incluant un peu de CSS pour assurer la corps et les images n'ont pas de lacunes inattendues autour d'eux. 

Nous incluons aussi marge: 0 auto; de sorte que les images que nous ajoutons plus tard seront centrées.

Charger Layzr

Le script layzr.js contient deux sources CDN pratiques que vous pouvez charger - nous en utiliserons une provenant de Cloudfare.

Ajoutez ce code à votre code HTML, avant la fermeture étiquette.

Si vous préférez ne pas charger le script à partir d'un CDN, vous pouvez le télécharger et suivre les instructions à l'adresse suivante: https://github.com/callmecavs/layzr.js#download.

Instancier Layzr

Maintenant que Layzr est chargé, nous devons le faire exécuter lors du chargement de la page. Pour ce faire, ajoutez ce code après la scénario balises que vous venez d'insérer dans la section précédente:

Ce code crée d'abord une instance utilisée pour contenir Layzr, puis une fois le contenu DOM de la page chargé, elle utilise cette instance pour activer les fonctionnalités de Layzr..

Votre code global devrait maintenant ressembler à ceci:

         
Bienvenue sur le Web chargé paresseux
    

2. Ajouter des images (résolution normale)

Avec Layzr chargé et prêt à fonctionner, nous pouvons commencer à ajouter des images pour qu'il puisse fonctionner comme par magie. Vous pouvez utiliser les images de votre choix. Toutefois, si vous souhaitez utiliser les exemples de code exacts que vous voyez aux étapes suivantes, vous pouvez télécharger les fichiers source joints à ce didacticiel. Vous y trouverez un images dossier que vous pouvez copier et coller dans votre propre projet.

Pour ajouter des images lors de l’utilisation de Layzr, vous utiliserez une img élément, mais au lieu d'utiliser le src attribut que vous utiliserez données normales ainsi:

S'assurer que les images ont de la hauteur

Pour que tout script de chargement paresseux fonctionne, il doit connaître la hauteur de toutes les images d'un site afin de pouvoir choisir celles qui doivent être chargées (car elles sont dans la fenêtre ou à proximité) et celles qui doivent attendre..

La difficulté réside toutefois dans le fait qu’une image n’a aucune hauteur jusqu’à ce qu’elle soit entièrement chargée dans une page. Cela signifie que si nous voulons que le chargement paresseux fonctionne, nous avons besoin d’un moyen de donner à la page des informations sur la hauteur de l’image. avant les images sont chargées.

Nous allons couvrir deux méthodes pour y parvenir, une pour les images de taille fixe et une pour les images réactives. Donner de la hauteur aux images en les fixant est la méthode la plus simple, il suffit d’ajouter la taille et largeur les attributs.

Allez-y maintenant et ajoutez img éléments au-dessus de vos balises de script, en utilisant le données normales attribut, et notamment la taille et largeur, pour chaque image que vous voulez charger.

Cette méthode de taille fixe permettra au chargement différé de fonctionner, mais elle empêchera les images de réagir, ce qui n’est pas idéal. Nous verrons comment donner aux images un peu plus tard la hauteur et la réactivité.

3. Définir un seuil de chargement

Par défaut, Layzr importera uniquement les images visibles au moment du chargement. Cependant, les visiteurs auront une expérience plus fluide si les images suivantes sont également préchargées (juste en dehors de la fenêtre d'affichage).

Pour ce faire, définissez une option nommée seuil lors de l'instanciation du script. La façon dont cela fonctionne est que vous fournissez une valeur qui représente un pourcentage de la hauteur de la fenêtre. Si vous définissez une valeur de 100, cela représenterait 100% de la hauteur de la fenêtre de visualisation, par exemple. 1200px. Dans ce cas, tout élément hors écran situé à moins de 1200 pixels de la fenêtre sera également chargé..

Par exemple, si vous avez deux grandes images, si l’une d’elles est poussée juste en dehors de la fenêtre et si votre seuil est défini sur 100, les deux images se chargeront:

Pour définir une valeur de seuil, remplacez cette ligne dans votre code:

instance de const = Layzr ()

… avec ça:

instance de const = Layzr (seuil: 100)

Vous pouvez remplacer cette valeur par celle qui convient le mieux aux sites que vous avez créés. Comme point d’intérêt, il semblerait que le seuil de chargement paresseux d’AMP soit à peu près équivalent à 200.

4. Ajouter des images Retina / HiDPI

L’un des avantages de Layzr est qu’il est très simple d’ajouter des images pour les appareils haute résolution. Tout ce que vous avez à faire est d’inclure l’attribut rétine de données. Par exemple:

Mettre à jour tous les img éléments de votre code HTML pour inclure des images de la rétine, comme ceci:

5. Espaces réservés d'image réactive et prévention du refoulement

Rendre les images chargées paresseuses sensibles peut être une proposition délicate. Comme nous l'avons mentionné précédemment, pour déterminer le moment de charger des images, Layzr doit d'abord connaître leur hauteur. Parce que les images sensibles changent leurs dimensions tout le temps, leur hauteur est imprévisible.

En plus de cela, nous souhaitons également que notre mise en page comporte un élément empêchant la refusion. La redistribution correspond à ce qui se produit lorsqu'une image termine son chargement et passe de l'absence de taille à une prise de place soudaine dans la mise en page, ce qui provoque le déplacement de tout ce qui l'entoure. Cela peut être très frustrant pour les visiteurs qui essaient de se concentrer sur votre contenu uniquement pour le faire sauter autour de la page..

Nous pouvons résoudre ces deux problèmes en ayant des espaces réservés réactifs dans la page, à la taille correcte pour chaque image. Les espaces réservés veilleront à ce que la mise en page n'ait pas besoin d'être redistribuée et donneront également des hauteurs à travailler avec Layzr. Nous nous baserons sur une technique ingénieuse tirée de cet article de Thierry Koblentz intitulé "A List Apart" sur "Créer des ratios intrinsèques pour la vidéo"..

La seule condition est que vous ayez besoin de connaître le format de chaque image que vous publiez à l'avance, car le CSS redimensionnera les images en fonction du format spécifié..

Ajouter une enveloppe de rapport d'aspect

La première chose que nous allons faire est d’ajouter un div wrapper autour de notre première image cette div deviendra notre espace réservé. Nous allons redimensionner le div lui-même avec CSS, puis en définissant l'image à l'intérieur pour le remplir horizontalement et verticalement.

Nous allons donner le div un nom de classe qui représente le format de l'image qu'elle contiendra. Dans notre exemple, la première image mesure 960 pixels de large sur 640 pixels de haut, déterminons donc le rapport de format qui le rend.

640 (notre hauteur) correspond aux deux tiers de 960 (notre largeur), ce qui signifie que pour 2 unités de hauteur, l’image a 3 unités de largeur. Les proportions sont généralement exprimées en largeur hauteur, comme dans le cas du bien connu 16: 9. Le rapport de notre premier exemple d'image est 3: 2.

Pour représenter ce format, nous allons donner à notre wrapper div le nom de la classe ratio_3_2.

Ajouter un style de rapport d'aspect standard

Maintenant, nous allons ajouter le CSS pour que tout cela fonctionne.

Entre l'existant balises dans la tête de votre index.html fichier, ajoutez ce code:

 div [classe ^ = "ratio _"] position: relative; largeur: 100%; 

Ce sélecteur va prendre notre ratio_3_2 classe, mais il prendra également toute autre classe qui commence par rapport_. Cela signifie que nous pouvons créer plus de classes plus tard pour prendre en charge différents formats.

Dans ce style, nous nous assurons que notre enveloppe s'étire toujours à 100% de la largeur de son parent. Nous mettons également à position: relative; comme cela va absolument positionner l'image à l'intérieur, vous verrez pourquoi un peu plus tard.

Donne le rapport hauteur / largeur du wrapper

Maintenant, nous allons ajouter ce code spécifique à notre ratio_3_2 classe seulement:

 .ratio_3_2 / * padding-top: calc (100% * (2/3)); * / padding-top: 66,666667%; 

le rembourrage valeur il y a ce qui nous permet de garder notre emballage div au rapport d'aspect que nous voulons. Quelle que soit la largeur du div, ce rembourrage gardera la hauteur à 66,666667% de cette quantité (deux tiers), conservant ainsi notre format d'image 3: 2.

Pour déterminer quel pourcentage mettre ici, déterminez quelle est la hauteur de votre ratio d'aspect lorsqu'il est exprimé en pourcentage de la largeur. Vous pouvez le faire avec le calcul:

100% * (hauteur / largeur)

Pour notre ratio 3: 2, cela rend: 100% * (2/3) = 66,666667%

Vous pouvez calculer à l'avance le pourcentage correct pour le format d'image souhaité, ou si vous préférez, vous pouvez utiliser le code CSS. calc () fonctionne comme indiqué dans l'exemple ci-dessus:

rembourrage en haut: calc (100% * (2/3));

Remplir le wrapper de format d'image avec une image

Notre encapsuleur va maintenant conserver les dimensions souhaitées quelle que soit la largeur de la fenêtre. Il ne reste plus qu’à faire en sorte que l’image contenue à l’intérieur remplisse l’emballage, héritant ainsi de ses dimensions..

Nous ferons cela en positionnant absolument toute image imbriquée dans un rapport_ emballage classé div, en le plaçant dans le coin supérieur gauche de l'emballage, puis en l'étirant à 100% en hauteur et en largeur, comme suit:

 div [class ^ = "ratio_"]> img position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; 

Vérifiez votre première image et vous devriez voir maintenant qu’elle s’étend sur la largeur de la fenêtre, mais elle sera réduite à l’ajustement lorsque vous redimensionnez, tout en conservant son rapport de format.

Ajouter des ratios d'aspect supplémentaires

Vous aurez probablement des images avec toutes sortes de formats d’aspect différents et vous voudrez pouvoir les adapter. Dans les exemples d’images que nous travaillons dans ce didacticiel, les trois premières ont un rapport de forme de 3: 2, mais les quatrième et cinquième sont au 16: 9..

Pour en tenir compte, ajoutez une nouvelle classe nommée en fonction du rapport de format, c.-à-d.. ratio_16_9, avec un correspondant rembourrage valeur:

 .ratio_16_9 / * padding-top: calc (100% * (9/16)); * / padding-top: 56,25%; 

Allez-y et ajoutez des proportions div encapsule tout le reste des images, en utilisant les classes appropriées pour chacune d’elles en fonction de leur taille. Vous pouvez également supprimer le la taille et largeur attributs de vos images car ils vont tous être remplacés par notre CSS.

Rechargez l'aperçu de votre navigateur et redimensionnez la fenêtre d'affichage: vous devriez maintenant trouver toutes vos images réactives tout en conservant leur fonctionnalité de chargement paresseux, sans rediffusion.

6. Ajouter srcset

Layzr prend également en charge l'attribut srcset. Dans les navigateurs prenant en charge srcset, il sera utilisé de préférence par rapport à données normales et rétine de données.

Plutôt que d'utiliser la suite srcset attribut, cependant, il devrait être précédé de Les données- tout comme les autres attributs que nous avons utilisés jusqu'à présent. 

Mettez à jour le code de votre première image pour:

Pour que cela fonctionne, accédez à l'aperçu de votre navigateur, réduisez la fenêtre d'affichage jusqu'à une largeur inférieure à 320 pixels, rechargez et regardez le panneau de réseau. Vous devriez voir la plus petite version de votre image se charger en premier. Augmentez ensuite la taille de la fenêtre et vous devriez voir les versions moyenne et grande se charger au fur et à mesure..

Le dossier des images fourni dans les fichiers source comprend les versions petite, moyenne et grande de chaque image. Mettez à jour votre code pour les utiliser tous dans votre srcset de données attributs tels que:

Ajouter une animation de chargement

Nous avons presque terminé, mais pour créer une dernière couche de vernis, nous allons ajouter une animation de chargement. Cela aidera les visiteurs à indiquer quelles parties de la mise en page agissent comme des espaces réservés pour les images et si ces images sont en cours de chargement..

Nous utiliserons un pur chargeur CSS, une version légèrement modifiée de ce grand stylo par Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Pour éviter d’avoir besoin de balises supplémentaires, notre animation de chargement sera contenue dans un :après psuedo-element attaché à chaque wrapper de ratio d'aspect. Ajoutez ce qui suit à votre CSS:

 div [class ^ = "ratio _"]: after content: "; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: .5rem double # 444; border-left: .5rem double blanc; position: absolue; haut: calc (50% - 2rem); gauche: calc (50% - 2rem); animation: spin 0,75s linéaire infini; @keyframes spin 0% transformation: pivoter (0deg); 100% transformation: rotation (360deg);

Le code ci-dessus crée une petite icône de chargeur en forme de cercle, le centre et le fait tourner à 360 degrés en cercle toutes les 0,75 secondes..

Nous allons également ajouter une couleur d’arrière-plan gris foncé à nos enveloppes de rapport d’aspect pour les distinguer facilement du reste de la mise en page. Ajoute ça couleur de fond: # 333; ligne comme suit:

 div [classe ^ = "ratio _"] position: relative; largeur: 100%; couleur de fond: # 333; 

Enfin, nous devons simplement nous assurer que notre chargeur ne se positionne pas au-dessus de nos images. Pour ce faire, nous allons ajouter la ligne z-index: 1; à nos images, en les décalant sur une couche au-dessus des chargeurs:

 div [class ^ = "ratio_"]> img position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; z-index: 1; 

Actualisez votre page maintenant et vous devriez voir votre animation de chargement en action.

Votre code final

Avec tout ce qui précède terminé, votre code devrait maintenant ressembler à ceci:

         
Bienvenue sur le Web chargé paresseux
 
  
 
  
 
  
 
  
 
  
    

Emballer

Vous avez maintenant complètement implémenté le chargement paresseux à la main, avec autant que possible une parité avec AMP.

AMP effectue automatiquement certaines tâches, par exemple la gestion de la préservation du rapport de format sur les images sensibles, mais d'un autre côté, le fait de procéder soi-même permet un contrôle accru, tel que la définition de son propre seuil de chargement..

J'espère que ce processus vous a aidé à choisir l'approche que vous préférez.

Petits techniciens avec câbles réseau, Kirill_M / Photodune.

Merci à Michael Cavalea pour son excellent script! Pour en savoir plus sur Layzr.js, visitez: https://github.com/callmecavs/layzr.js