誰需要 AMP？使用 Layzr.js 簡化延遲載入回應影像的過程
- PHPz原創
- 2023-09-08 11:09:071422瀏覽
Google 的「加速行動頁面」(AMP) 專案最近幫助影響網站變得更快。憑藉良好的技術和強大的內容分發網絡，Google 直接使 AMP 增強的網站更快。然而，AMP 也透過鼓勵我們查看 AMP 包含的最佳化和最佳實踐來間接發揮作用。即使您不打算讓您的網站相容 AMP，將 AMP 了解為優化非 AMP 網站的待辦事項清單也很有用。
此清單中的最佳化之一是一種稱為「延遲載入」的技術，我們在最近關於使用 AMP 的
延遲載入可以讓訪客更快開始與內容互動，而增強的載入速度可以提高您的搜尋引擎排名。頁面上的圖像越多，獲得的速度提升就越大。
在本教學中，我們將了解如何使用名為的腳本在非 AMP 網站上部署延遲載入Layzr.js。我們將盡可能複製 AMP 的 <amp-img></amp-img> 元素的功能，但我們也將使用 Layzr 特有的一些功能。
我們開始吧！
1. 基本設定
作為文章「AMP 專案：它會讓您的網站更快嗎？」的一部分我創建了一個包含五個圖像的基本佈局。為了讓您能夠比較使用 AMP 和自己部署延遲加載，我們將重新建立相同的五個映像佈局。我將在本教程後面向您展示如何運行各種加載速度測試。
#在本教學隨附的來源檔案中，您將找到佈局的 AMP 版本，以及您將在此處製作的完整版本。兩者都包含在內，以幫助您決定哪種方法最適合您。
在我們逐步完成所有操作時，我建議您使用Chrome 開發者工具(F12) 測試您的工作，並開啟網路選項卡，選取停用快取 ，並將限制設為常規3G。這會模擬平均移動連接，向您即時顯示每個圖像加載的圖表，並將幫助您清楚地了解延遲加載的運行情況。
刷新頁面進行測試時，按住重新載入按鈕，這將出現一個下拉式選單會顯示不同的選項。選擇清空快取並硬重新載入以完全模擬訪客首次到達您的網站。
建立 HTML Shell
讓我們從基礎知識開始。首先，建立一個資料夾來存放您的項目，並在其中建立一個名為 index.html 的檔案。
打開它進行編輯並添加以下程式碼：
<!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>
透過上面的程式碼，我們只是獲得了一個 HTML shell，並包含了一些 CSS，以確保頁面的 body 和圖像周圍沒有任何意外的間隙。
我們也包含 margin: 0 auto; ，以便我們稍後新增的圖片將會居中。
載入 Layzr
layzr.js 腳本有兩個方便您載入的 CDN 來源 - 我們將使用來自 Cloudfare 的一個。
將此程式碼新增至您的 html 中，位於結束
以上是誰需要 AMP？使用 Layzr.js 簡化延遲載入回應影像的過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！