使用 lite-youtube-embed 來優化 YouTube 影片嵌入
更新日期： 2024 年 11 月 7 日
lite-youtube-embed 是一個輕量的 YouTube 影片嵌入外掛（plugin），可用於提升網頁效能。
通常嵌入 YouTube 影片會在頁面加載時載入大量資源，而 lite-youtube-embed 則提供了一個高效、簡單的方式。
將影片嵌入轉換為延遲加載，僅在使用者點擊影片時才載入真正的 YouTube 影片內容。
這種做法可以顯著減少頁面的初始加載時間，提升使用者體驗。
lite-youtube-embed 的特點及優點
特點
- 輕量化嵌入：僅在使用者點擊播放按鈕時才載入 YouTube 影片，而不是在頁面加載時就加載所有資源。
- 自定義樣式：提供預設樣式，使用者可以自定義樣式以配合網站風格。
- 無廣告資源佔用：延遲加載的技術避免了 YouTube 圖片資源的預加載，減少了頁面流量消耗。
優點
- 加快頁面載入速度：透過延遲加載影片，減少頁面的初始 HTTP 請求，特別是對於有多個影片的頁面，這一點尤為顯著。
- 提升 SEO 和用戶體驗：網頁加載更快，有助於改善 SEO 排名，並提高訪客的使用體驗。
- 無需複雜設定：操作簡單，僅需少量 HTML 標籤和 JavaScript 文件即可完成嵌入。
如何使用 lite-youtube-embed
以下是使用 lite-youtube-embed 的步驟說明。可以選擇將其下載至本地或透過 CDN 引入。
步驟 1：準備基本的 HTML 結構
在需要嵌入 YouTube 影片的位置，加入以下 HTML 結構：
<lite-youtube videoid="影片ID"></lite-youtube>將 "影片ID" 替換為實際影片的 ID，例如 dQw4w9WgXcQ。此段代碼將建立一個延遲加載的 YouTube 影片嵌入框架。
步驟 2：安裝 lite-youtube-embed
可以選擇以下兩種安裝方式：
1. 本地文件引用
從 GitHub 下載 lite-youtube-embed 的檔案至專案目錄。下載後，在專案目錄中加入以下檔案：
lite-youtube.js：JavaScript 檔案，實現延遲加載。lite-youtube.css：CSS 檔案，用於預設樣式。
在 HTML 中引入這些檔案：
<link rel="stylesheet" href="path/to/lite-youtube.css">
<script src="path/to/lite-youtube.js" defer></script>將 path/to/ 替換為實際檔案路徑。
引入之後，頁面中的 <lite-youtube> 標籤會自動啟用延遲加載功能。
2. 使用 CDN 引用
若希望更簡便的引入方式，可以使用 CDN 版本的 lite-youtube-embed。在 HTML 中加入以下代碼：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.3/lite-yt-embed.js" integrity="sha512-WKiiKu2dHNBXgIad9LDYeXL80USp6v+PmhRT5Y5lIcWonM2Avbn0jiWuXuh7mL2d5RsU3ZmIxg5MiWMEMykghA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.3/lite-yt-embed.css" integrity="sha512-utq8YFW0J2abvPCECXM0zfICnIVpbEpW4lI5gl01cdJu+Ct3W6GQMszVITXMtBLJunnaTp6bbzk5pheKX2XuXQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />這樣即可透過 CDN 引入 lite-youtube-embed，無需下載本地文件。
步驟 3：測試影片加載效果
引入上述文件後，刷新頁面並查看效果。
未點擊播放按鈕時，影片不會載入，點擊影片框後才會載入真正的 YouTube 內容。
總結
lite-youtube-embed 是一個非常有用的外掛，通過延遲加載方式來優化嵌入 YouTube 影片的網頁。
選擇本地文件引用或 CDN 引入均可輕鬆啟用此功能。
透過此方法，可顯著提升頁面加載速度，改善使用者體驗並優化 SEO 表現。