Home > Article > Web Front-end > Who needs AMP? Simplify the process of lazy loading responsive images with Layzr.js

Who needs AMP? Simplify the process of lazy loading responsive images with Layzr.js

PHPzOriginal: 2023-09-08 11:09:071414browse

Google’s Accelerated Mobile Pages (AMP) program has recently helped make websites faster. With good technology and a strong content delivery network, Google directly makes AMP-enhanced websites faster. However, AMP also works indirectly by encouraging us to look at the optimizations and best practices that AMP contains. Even if you don't plan to make your site AMP-compatible, it's useful to understand AMP as a to-do list for optimizing non-AMP sites.

One of the optimizations on this list is a technique called "lazy loading," which we saw in action in our recent article on using AMP's custom element. With this technique, only images in or near the viewport are loaded when a visitor first arrives on the page. As the visitor scrolls down, the rest of the page is triggered to load.

Lazy loading allows visitors to start interacting with content faster, and enhanced loading speeds can improve your search engine rankings. The more images you have on the page, the bigger the speed boost you'll get.

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

In this tutorial, we will learn how to deploy lazy loading on a non-AMP website using a script called Layzr.js. We'll replicate the functionality of AMP's <amp-img></amp-img> element as much as possible, but we'll also use some features specific to Layzr.

let us start!

1. Basic settings

As part of the article "The AMP Project: Will It Make Your Website Faster?" I created a basic layout with five images. To enable you to compare using AMP versus deploying lazy loading yourself, we'll recreate the same five image layouts. I'll show you how to run various loading speed tests later in this tutorial.

In the source files that come with this tutorial, you'll find the AMP version of the layout, as well as the full version you'll make here. Both are included to help you decide which method is best for you.

As we step through it all, I recommend that you test your work using the Chrome Developer Tools (F12) and open the Network tab with Disabled checked Cache and set the limit to regular 3G. This simulates an average mobile connection, shows you a graph of each image loaded in real time, and will help you get a clear picture of how lazy loading is performing.

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

When refreshing the page to test, press and hold the Reload button, which will bring up a drop-down menu showing different options. Choose Clear Cache and Hard Reload to completely simulate a visitor arriving at your site for the first time.

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

Create HTML Shell

Let’s start with the basics. First, create a folder to house your project and create a file inside it called index.html.

Open it for editing and add the following code:

<!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>

With the code above, we just get an HTML shell and include some CSS to make sure there aren't any unexpected gaps around the page's body and images.

We also include margin: 0 auto; so that the image we add later will be centered.

Load Layzr

The

layzr.js script has two CDN origins for you to load easily - we'll be using the one from Cloudfare.

Add this code to your html, just before the closing

The above is the detailed content of Who needs AMP? Simplify the process of lazy loading responsive images with Layzr.js. For more information, please follow other related articles on the PHP Chinese website!

css chrome html auto 继承 JS dom 选择器 position margin padding background github https 搜索引擎

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can JavaScript be used for Android development?Next article：Can JavaScript be used for Android development?

See more

Who needs AMP? Simplify the process of lazy loading responsive images with Layzr.js

1. Basic settings

Create HTML Shell

Load Layzr

Related articles