Google Lighthouse - SEO Tool - TPIsoftware

Lighthouse 是由Google 所提供的一個開源工具，主要用來檢測網站使用者體驗、效能與SEO 等等項目。

目前Lighthouse 提供5 個SEO 相關指標的檢測結果， ... 當您輸入電子信箱、訂閱本公司之「電子報」時，我們會向您蒐集、處理、利用的個資為您的「電子信箱」以及「提交日期」，當您輸入電子信箱並送出時，即表示您同意我們使用您的個資，為保障您的權益，關於更多相關政策更新資訊，請務必閱讀我們的「隱私權政策」、「使用條款」及「免責聲明」。

如您不同意本網站之「隱私權政策」、「使用條款」及「免責聲明」，您可以隨時「取消訂閱」，謝謝您。

關閉 取消訂閱昕力資訊電子報 取消訂閱 關閉 關閉 是否確定取消註冊？將會永久刪除您在本站的帳號與資訊。

確定 取消 公告系統 × 目前無公告 首頁 網頁技術 GoogleLighthouse-SEOTool GoogleLighthouse-SEOTool 吳巧婷ChloeWu 2021/05/2117:59:04 0 680 什麼是Lighthouse? Lighthouse是由Google所提供的一個開源工具，主要用來檢測網站使用者體驗、效能與SEO等等項目。

目前Lighthouse提供5個SEO相關指標的檢測結果，並即時反饋性能檢測報告讓使用者了解當前網站SEO的簡單情況及建議改善的方式。

使用Lighthouse的方法 Chrome線上擴充功能程式 開發人員工具 使用命令工具運行 方法一Chrome線上擴充功能程式 Step.1 安裝Chrome線上擴充功能程式 Step.2 訪問想要檢測的網站，點擊右上角的Lighthouse圖示 Step.3 點擊右上角設定按鈕，可以選擇要檢測的裝置模式以及項目 Step.4 點擊Generatereport按鈕，開始進行檢測 Step.5 最後會產出一份SEO報告，報告會列出各項SEO分數以及問題點，並建議如何改善 Step.6 點選右側選單，可以輸出檢測報吿 ◊使用GoogleExtension版本的Lighthouse，它產生的ReportViewer是會藉由Server去訪問的，因此如果是沒對外開放的測試機或以local端執行的網站要進行測試就會無法使用。

方法二開發人員工具 Step.1 打開ChromeDevTools(開發人員工具)，點選Lighthouse Step.2 右邊區塊一樣可以選擇要檢測的裝置模式以及項目，之後按下Generatereport進行檢測 Step.3 最後會直接在開發人員工具上列出SEO報告 ◊採用DevTools(開發人員工具)的好處是可以針對於一些未實際架在Server上的網頁做檢測，例如在測試機上或是以local端方式開啟的網站也能使用這個方法檢測，但因為ChromeExtension可能會影響效能的評分，所以建議使用無痕模式檢測，Chrome版本也必需要是60以上。

方法三使用命令工具運行 Step.1 安裝Node.js，支援版本5以上 Step.2 全域安裝Lighthouse npminstall-glighthouse Step.3 查看可用的輸入和輸出選項 lighthouse--help Step.4 針對欲檢測的頁面運行Lighthouse檢測 //預設裝置模式為mobile lighthouse /** *--preset=desktop裝置模式設定為desktop模式 *--view檢測完成後自動開啟檢測報告 */ lighthouse--preset=desktop--view Step.5 檢測完成後同時也會產出一份檢測報吿(html檔)，預設存於使用者根目錄底下 Lighthouse目前提供的5項檢測指標 網站效能 網站無障礙 網站最佳實踐 SEO ProgressiveWebAPP(PWA) 網站效能 主要反映在客戶端與伺服器端上的溝通 網站無障礙 當使用非典型裝置（桌機/手機/平板）類的輔助裝置觀看網站時，使用者能否順暢的使用 網站最佳實踐 程式碼的優化，例如是否使用緩存機制及是否用了不推薦的語法 SEO 網頁搜尋引擎最佳化，例如方面的資料有沒有設定完整，有沒有確實加上alt屬性等等都會被納入評測 ProgressiveWebAPP(PWA) 提供更好的使用者體驗，目前有兩項指標：可安裝、PWA最佳化。

要達到可安裝，至少要使用HTTPS、有ServiceWorker和manifest三個項目。

PWA最佳化，則可以參考項目底下的細節 ◊漸進式網絡應用程式(PWA)是一種普通網頁或網站架構起來的網絡應用程式，但它可以以傳統應用程式或原生移動應用程式形式展示給用戶，結合了現代化瀏覽器提供的功能與行動裝置的體驗優勢。

想更深入了解PWA可以參考：WhatareProgressiveWebApps? GoogleLighthouseVSGooglePageSpeed PageSpeed主要針對網站效能的部分，提出檢測結果及建議；Lighthouse則是針對效能、無障礙、最佳實踐、SEO、PWA等五項指標 PageSpeed檢測使用的數據是真實數據(Fielddata)，比較能貼近使用者真實的經驗；Lighthouse使用的則是實驗數據(Labdata)，是在實驗環境中用預先準備好的設備和網路設定收集的資料，用這種資料可以確保一致性及偵錯效能問題時更順利 Google 網站效能 網站無障礙 網站最佳實踐 SEO PWA 檢測數據 PageSpeed V X X X X 真實數據 Lighthouse V V V V V 實驗數據   參考資料： https://noob.tw/lighthouse/ https://developers.google.com/web/tools/lighthouse https://shawnlin0201.github.io/Optimization/Optimization-001-lighthouse/ https://medium.com/@OPTASY.com/google-pagespeed-vs-lighthouse-how-are-they-different-and-which-tool-should-you-use-3f03270c674 0 點數申請 文章標題 : GoogleLighthouse-SEOTool 申請項目 : 檔案上傳 請選擇審查人員 暫存 確認 吳巧婷ChloeWu 相關文章 使用RxJS:range完成信用卡有效日期選項 解析TypeScript宣告檔案中的路徑別名-ResolvepathaliasinTypeScriptdeclarationfiles 如何使用OverflowTool製作UserFlow? 陣列排序Sort()與C3.js視覺資料處理 AngularRouterGuard CSS：快速製作毛玻璃效果 最新文章 我把CSS變成Photoshop了！我跟mix-blend-mode剛認識 CSS霓虹燈閃爍文字 CSS：文字漸層與鏤空遮罩效果 SpringCloud--Hystrix圖形化Dashboard搭建及實作 BTrace簡介 CSS&SVG::BlobAnimation 最熱門文章 同作者文章 確定 取消 × 登入