在Next.Js中使用AMP 加速行動版載入速度

什麼是加速版流動網頁(AMP)?

AMP代表「加速版流動網頁」。它是一個開源Web組件框架(Web Components),由Google和其他幾家技術和出版公司聯合發起。使用 AMP,可以創建幾乎可以立即加載的簡單移動網站。 AMP 的特點是減少了 JavaScript 和 CSS 元素,並使用了內容傳遞網路(CDN - Content Delivery Network)。

AMP 採用一種簡化形式的 HTML 來加速和改進移動頁面的功能,限制了 HTML/CSS 和 JavaScript。某些與標準網頁代碼兼容的標籤不能與 AMP 一起使用。 為了加快 Google 搜索的加載速度,大多數 AMP 頁面由 Google 緩存。

Google聲稱,搜索中提供的 AMP 頁面通常會在不到一秒的時間內加載,並使用常規頁面十分之一的數據。

如何在Next.js中使用AMP?

在我們可以將 AMP 組件添加到我們的網頁之前,我們需要將我們的頁面配置為 AMP 頁面。如果為true,則意味著您的頁面將是純AMP版本,如果為"hybrid" (AMP混合版本),則該頁面將同時具有 AMP 版本和 HTML 版本。

純AMP網頁版本 (amp: true)

要啟用純AMP網頁版本,將const config = { amp: true }添加到您的頁面例如page.tsxpage.jsx

export const config = { amp: true } function Page(props) { return <h3>我的第一個AMP頁面!</h3> } export default Page

純AMP頁面版本不會在客戶端運行任何 Next.js 或 React 代碼。該版本使用 AMP Optimizer 自動優化,將性能提高多達 42%,用戶可以很快地載入頁面。以及具有用戶可訪問(優化)版本的頁面和搜索引擎可索引(未優化)版本的頁面。

AMP混合版本 (amp: “hybrid”)

在AMP混合版本,你的頁面將同時具有 AMP 版本和 HTML 版本(通過將 ?amp=1 添加到 URL)。要使用混合版本,首先我們載入useAmp hook 套件以及將const config = { amp: 'hybrid' }添加到您的頁面例如page.tsxpage.jsx

import { useAmp } from 'next/amp' export const config = { amp: 'hybrid' }

之後我們可以使用useAmp() hook,這個可以幫助我們檢查頁面是否amp模式,若果是amp我們可以有條件地渲染對應的component元件:

import { useAmp } from 'next/amp' export const config = { amp: 'hybrid' } function Page(props) { const isAmp = useAmp() return ( <div> <h3>我的第一個AMP頁面!</h3> {/* 有條件地渲染對應的component元件 */} {isAmp ? ( // 如果是AMP頁面 <amp-img width="300" height="300" src="/my-img.jpg" alt="an amp image" layout="responsive" /> ) : ( // 如果是非AMP頁面 <img width="300" height="300" src="/my-img.jpg" alt="an normal image" /> )} </div> ) } export default Page