使用 Lighthouse 來檢查網站設定，為了更好的 SEO 以及瀏覽體驗

王思元 11:26 上午網站

從新聞得知有這個工具，GoogleChrome Lighthouse 是一套開源自動化工具，用來協助檢查網站 (Website) 或是網路應用程式 (Web App) 的質量 (quality)，從讀取效能 (performance)、網頁親和力 (accessibility)、實作方法 (best-practices) 以及到搜尋引擎最佳化設置 (search engine optimization, SEO) 等等的檢查，更多關於各項評比分數可以參考官方文件：Lighthouse Scoring Guide。

附註：後來有搜尋到網頁工具，不需要安裝任何套件便可使用：Run Lighthouse。

安裝 Lighthouse 與初次使用

從官方使用入門手冊中，使用 Lighthouse 共有幾種方法，最簡單的方式莫過於是直接安裝其擴充功能，直接進入 ChromeStore Lighthouse，點選加入 Chrome 便可完成安裝。

接著，進入到有興趣的網站，點選 Lighthouse 擴充功能的圖示，按下 Generate report 便可以開始檢查，並在完成後產生報表。

點選 Lighthouse 擴充功能的按鈕

接著等 Lighthouse 完成測試檢查。

等待 Lighthouse 完成分析

查看各項結果與分析。

Lighthouse 分析後的各項報告

共有五大項報告分數，整理如下：

Performance：效能
- 使用者載入此 Web 所需花的時間
Progressive Web App：PWA
- Web App 分析項目，由於部落格目前沒計畫改成 Web App，僅參考部分檢查項目…
- 關於 PWA 資訊可以參考這篇文章：Progressive Web App 會是未來趨勢嗎？
Accessiblity：網頁親和力 (網頁無障礙)
- 關於用戶體驗的操作項目，例如文字大小、顏色對比、UI 操作等等設計
- 更多可參考這份文件：Google Web Fundamentals Guides: Accessibility
Best Practices：網站實作方法
- 使用較 “現代化” 的網頁技術，例如使用 Https、不使用已廢棄 API 等等
SEO：網頁搜尋引擎最佳化
- 若搜尋引擎能夠更容易找到網站，適當調整網站內容讓引擎更容易建檔是必要的

分析檢查項目

分析報告中有列出所有的檢查項目，並很好的列出哪些項目有通過，哪些項目沒有，並且附贈很好的說明連結，因此這邊只列出 dev.twsiyuan.com 檢查未通過的項目，並且筆記之後如何調整與修改，若要讓分數全部達到 100，那應該是非常辛苦的工作。

關於 SEO：

Document doesn’t use legible font sizes
- 網頁沒有清晰的字體大小，在手機排版中共有 61.74 % 的文字小於 16px，會使得手機用戶看不太清楚
- 需要調整整個部落格版面，感覺有點大的工程，應該要到 Google Analysis 看看有多少訪客是採用手機瀏覽，再決定是否要調整

關於 Best Practices：

Browser errors were logged to the console: 1
- 瀏覽器錯誤顯示在 Console，目前是因為 HTTPS 混合 HTTP 資源所導致的 Mixed Content 錯誤
- 由報告中是因為網頁載入 http://twsiyuan.com/blog/favicon/manifest.json 這一個非 HTTPS 的資源，是網站 Favicon 設定，考慮直接移除
Manifest’s short_name will be truncated when displayed on homescreen
- 網站設定名稱過長，當網站被加入到手機螢幕，其名稱可能會被截斷
- 完全問號項目檢查，也許是因為網站標題過長，且又沒有額外設定簡短名稱所造成的吧？這個先忽略不管

關於 Accessiblity：

Elements Use Attributes Correctly
- HTML 元素應正確使用參數
- 報告中列出是 Image elements do not have [alt] attributes，檢查發現是網頁項目圖沒有加入 alt，需要調整部落格版面
Elements Have Discernable Names
- HTML 元素應具有可辨別的名稱
- 報告中列出是 Links do not have a discernable name Link text，檢查發現是這些連結的文字都是 READ MORE，並不是一個唯一的連結文字，也許直接移除 READ MORE？
Elements Describe Contents Well
- 主要是 <frame> or <iframe> elements do not have a title，這是因為 facebook 粉絲頁的 iframe 所造成的，記得這是 javascript 產生的，要如何調整呢？
Color Contrast Is Satisfactory
- 顏色對比應合適
- 報告中所列的元素都是日期以及文章標籤顏色對比不夠，白色背景與淺灰色的字體確實需要調整顏色
Page Specifies Valid Language
- 頁面應標示有效語言
- <html> element does not have a [lang] attribute，這就需要調整部落格版面了

關於 Progressive Web App：

大多數的檢查因為沒有實作其功能，檢查都是失敗的 (Audit error)，因此這部分跳過

關於 Performance：

使用無痕模式測試可排除其他 Chrome extensions 的影響
在 Blogger 能調整的事情很少，幾乎只能放棄這個大項的測試啊
- 都需要改伺服器設定才行，我們沒有這個權限…
Opportunities 項目中列出可減少大小的資源項目
- 目前報告中的機會都是跟圖片資源有關，通常修改成 jpg 格式，或是在把圖片尺寸變更小的話…
- 注意到有張圖 403 KB 的 png 格式，可以改成 jpg 那可以省下不少空間啊
- Reduce render-blocking stylesheets
  - 這部分是因為瀏覽器讀取外部 CSS 檔案需要等待完成後，才能繼續處理分析之後的網頁原始碼…
  - 如果改成 async 非同步載入 CSS 便不會有這個議題…但這也是大工程呢
- Reduce render-blocking scripts
  - 與上述 CSS 相同，得載入外部 Javascript 後，才能繼續處理分析之後的網頁原始碼…
  - 不過網站用到的大部分 javascript，大多都已載入非同步，使用 require.js 來管理，但還是得等 require.js 載完才行…
- Unused CSS rules
  - 移除沒有使用到的 CSS 規則
  - 部落格採用 Bootstrap，這有點難處理，先不考慮調整
- Minify JavaScript
  - 最小化 javascript 檔案
  - 原來還有 javascript 沒有被最小化，標記可調整