如何看懂 PageSpeed Insights 報告並優化 Blogger 網站效能
你是否曾經用 Google 的 PageSpeed Insights 工具測試過自己的部落格，卻對那些分數和建議感到困惑？別擔心，這篇文章將帶你一步步拆解報告，並提供具體的程式碼優化方法，讓你的 Blogger 網站跑得更快！
什麼是 PageSpeed Insights？為什麼它很重要？
PageSpeed Insights 是一個免費工具，用來分析網頁在 行動裝置 和 電腦 上的效能、無障礙功能、最佳實踐和 SEO。
- 網站效能：網站的載入速度，這對使用者體驗和 SEO 排名都至關重要。
- 無障礙功能：網站對身心障礙人士的友善程度，例如螢幕閱讀器是否能正確讀取內容。
- 最佳實踐：網站程式碼是否符合現代網頁開發的標準。
- SEO：網站是否符合搜尋引擎的基本優化原則。
一個高分的網站不僅能讓使用者有更好的瀏覽體驗，也有助於提升網站在 Google 搜尋結果中的排名。
以我的部落格為例：實際的優化步驟
我的部落格使用的是 Genki Free Version 1.0 範本，最初的 PageSpeed Insights 報告顯示效能分數偏低。以下是我如何針對報告中的問題進行程式碼優化：
1. 效能分數偏低：改善載入速度
報告中最常見的問題是「載入大量外部資源」和「未優化的程式碼」。
- 問題分析：我的範本在
<head>標籤中載入了大型的 Font Awesome 圖示庫，並在文件底部載入了多個 jQuery 外掛。這些外部檔案會阻礙網頁的渲染，導致效能分數下降。 - 解決方法：非同步載入 CSS 和 JavaScript
我修改了範本的程式碼，讓瀏覽器能夠在不影響網頁渲染的情況下，非同步地載入這些外部檔案。
修改 Font Awesome 連結：
將這行：
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css' rel='stylesheet'/>修改為：
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/> <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"></noscript>為 JavaScript 腳本添加屬性：
在所有
<script>標籤中加入async或defer屬性。<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script> <script defer='defer' src='//cdn.jsdelivr.net/npm/jquery.theia.sticky.sidebar@1.7.0/dist/jquery.theia.sticky.sidebar.min.js'></script>
2. 程式碼語法警告：修正不必要的程式碼
雖然大多數警告不會影響網站功能，但優化可以讓程式碼更乾淨、更符合現代標準。
- 問題分析：HTML 驗證工具 Nu Html Checker 指出，
<html>標籤中的xmlns屬性不被標準 HTML5 接受，以及空元素（如<meta>）後面的斜線/是多餘的。 - 解決方法：移除多餘的符號
我選擇忽略
xmlns屬性的警告，因為那是 Blogger 範本的必要語法。但對於空元素後面的斜線，我決定將其移除，讓程式碼更符合 HTML5 的規範。修改
<meta>標籤：將這行：
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>修改為：
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'>
3. 無障礙功能與最佳實踐：提升使用者體驗
這兩項分數雖然高，但仍有優化空間，例如為圖片添加 alt 屬性。
- 問題分析：報告建議我為圖片加上替代文字，這對視障使用者和搜尋引擎都非常重要。
- 解決方法：確保圖片有
alt屬性我在上傳圖片時，總是確保填寫
alt屬性，這是一個簡單但極具意義的習慣，它讓圖片在無法顯示時，也能透過文字傳達資訊。
總結：持續優化，才能讓部落格保持在最佳狀態
這三個優化步驟完成後，我的 PageSpeed Insights 分數有了明顯提升。優化網站效能是一個持續的過程，我會定期使用工具檢查，並根據報告中的建議進行微調。
希望這篇筆記對你有幫助。如果你在優化過程中遇到任何問題，隨時都可以再問我！
0 留言