recherche

Maison  >  Article  >  interface Web  >  Qui a besoin d'AMP ? Simplifiez le processus de chargement paresseux des images réactives avec Layzr.js

Qui a besoin d'AMP ? Simplifiez le processus de chargement paresseux des images réactives avec Layzr.js

PHPz
PHPzoriginal
2023-09-08 11:09:071424parcourir

Le projet Accelerated Mobile Pages (AMP) de Google a récemment contribué à rendre les sites Web plus rapides. Grâce à une bonne technologie et à un solide réseau de diffusion de contenu, Google rend directement les sites Web améliorés par AMP plus rapides. Cependant, AMP fonctionne également indirectement en nous encourageant à examiner les optimisations et les meilleures pratiques contenues dans AMP. Même si vous n'envisagez pas de rendre votre site compatible AMP, il est utile de comprendre AMP comme une liste de tâches pour optimiser les sites 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 de l'élément personnalisé Avec cette technique, seules les images dans ou à proximité de la fenêtre d'affichage sont chargées lorsqu'un visiteur arrive pour la première fois sur la page. Au fur et à mesure que le visiteur fait défiler vers le bas, le reste de la page se charge.

Le chargement paresseux permet aux visiteurs de commencer à interagir plus rapidement avec votre contenu, tandis que des vitesses de chargement améliorées peuvent améliorer votre classement dans les moteurs de recherche. Plus vous avez d’images sur la page, plus vous obtiendrez une augmentation de vitesse importante.

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

Dans ce tutoriel, nous apprendrons comment déployer le chargement différé sur un site Web non-AMP à l'aide d'un script appelé Layzr.js. Nous reproduirons autant que possible les fonctionnalités de l'élément <amp-img></amp-img> d'AMP, mais nous utiliserons également certaines fonctionnalités propres à Layzr.

Commençons !

1. Paramètres de base

Dans le cadre de l'article « Le projet AMP : va-t-il rendre votre site Web plus rapide ? » J'ai créé une mise en page de base avec cinq images. Pour vous permettre de comparer l'utilisation d'AMP par rapport au déploiement du chargement paresseux vous-même, nous allons recréer les cinq mêmes dispositions d'image. Je vais vous montrer comment exécuter divers tests de vitesse de chargement plus loin dans ce didacticiel.

Dans les fichiers sources fournis avec ce tutoriel, vous trouverez la version AMP de la mise en page, ainsi que la version complète que vous réaliserez ici. Les deux sont inclus pour vous aider à décider quelle méthode vous convient le mieux.

Pendant que nous passons en revue tout cela, je vous recommande de tester votre travail à l'aide des outils de développement Chrome (F12) et d'ouvrir l'onglet Réseau, de cocher Désactiver le cache et de définir la limite sur 3G régulière. Cela simule une connexion mobile moyenne, vous montre un graphique de chaque image chargée en temps réel et vous aidera à avoir une idée claire des performances du chargement différé.

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

Tout en actualisant la page pour tester, appuyez et maintenez enfoncé le bouton Recharger et un menu déroulant apparaîtra affichant différentes options. Sélectionnez Vider le cache et recharger dur pour simuler complètement un visiteur arrivant sur votre site pour la première fois.

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

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 appelé index.html à l’intérieur.

Ouvrez-le pour le modifier et ajoutez le code suivant : 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layzr.js Lazy Loading</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
    body {
      margin: 0;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    </style>
  </head>
  <body>
    <h1>Welcome to the lazy loaded web</h1>



  </body>
</html>

Avec le code ci-dessus, nous obtenons simplement un shell HTML et incluons du CSS pour nous assurer qu'il n'y a pas d'espaces inattendus autour du body de la page et de l'image.

Nous incluons également margin: 0 auto; afin que l'image que nous ajouterons plus tard soit centrée.

Chargement de Layzr

Le script layzr.js a deux origines CDN que vous pouvez charger facilement - nous utiliserons celle de Cloudfare.

Ajoutez ce code à votre html, juste avant la balise de fermeture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css chrome html auto 继承 JS dom 选择器 position margin padding background github https 搜索引擎
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript peut-il être utilisé pour le développement Android ?Article suivant：JavaScript peut-il être utilisé pour le développement Android ?

Articles Liés

Voir plus