Chrome 推出Lighthouse 前端稽核功能- 為了更好的SEO 與使用 ...
文章推薦指數: 80 %
Chrome 開發團隊不斷開發與改進瀏覽和最佳化體驗功能。
在Google I/O '17 開發者大會上向外界展示了很多重要的演化,其中一部分是有關Chrome DevTool,因此作為前端開發 ...
RecentPosts
Magento2設定Braintree金流(Sandbox模式)
Photoshop【超簡單系列】NeuralFilters-超縮放
Categoryattribute無法存入表單為0值
如果使用Cloudflare取IP的問題和解決方法
Photoshop【超簡單系列】NeuralFilters-彩色化
文章分類
Shopify
Magento
Magento2開源版
Magento2商業版
電子商務
Zendesk
Mailchimp
Akeneo
PIM
Oracle
網站技術與設計
Adobe教學
前端開發
後端開發
網站測試
Wordpress
行銷與實用好文
最新動向
文章彙整文章彙整
SelectMonth
April2022 (5)
March2022 (12)
February2022 (4)
January2022 (1)
December2021 (6)
November2021 (1)
October2021 (7)
September2021 (7)
August2021 (11)
July2021 (7)
June2021 (14)
May2021 (11)
April2021 (6)
March2021 (6)
February2021 (12)
January2021 (8)
December2020 (13)
November2020 (7)
October2020 (15)
September2020 (7)
August2020 (14)
July2020 (2)
June2020 (17)
May2020 (14)
April2020 (17)
March2020 (21)
February2020 (4)
January2020 (2)
December2019 (4)
November2019 (3)
October2019 (7)
September2019 (11)
August2019 (13)
July2019 (2)
June2019 (10)
May2019 (14)
April2019 (11)
March2019 (8)
February2019 (9)
January2019 (14)
December2018 (16)
November2018 (20)
October2018 (22)
September2018 (30)
August2018 (22)
July2018 (36)
June2018 (24)
May2018 (21)
April2018 (12)
March2018 (32)
February2018 (15)
January2018 (15)
December2017 (39)
November2017 (15)
October2017 (13)
September2017 (13)
August2017 (14)
July2017 (4)
June2017 (16)
May2017 (15)
April2017 (9)
March2017 (7)
February2017 (6)
January2017 (12)
December2016 (14)
November2016 (6)
October2016 (12)
September2016 (11)
August2016 (18)
July2016 (12)
June2016 (16)
May2016 (9)
April2016 (10)
March2016 (15)
February2016 (14)
January2016 (18)
December2015 (21)
November2015 (32)
October2015 (24)
September2015 (28)
August2015 (25)
July2015 (26)
June2015 (23)
May2015 (15)
April2015 (18)
March2015 (16)
February2015 (21)
January2015 (17)
December2014 (22)
November2014 (20)
October2014 (15)
September2014 (13)
August2014 (11)
July2014 (12)
June2014 (9)
May2014 (10)
April2014 (11)
March2014 (6)
January2014 (1)
November2013 (5)
October2013 (2)
關於歐斯瑞
Back
工作機會
Magento
Back
Magento解決方案
Back
Magento服務
MagentoOpenSource
MagentoCommerce
MagentoCommerceCloud
MagentoOMS
MagentoXMiraklB2B2C商城
MagentoforB2B/B2E
Magento內部系統串接
Back
ERP管理系統整合
PIM商品管理系統整合
POS系統整合
CRM客戶管理系統整合
Magento外部系統串接
Back
各國金流系統
第三方客服系統
Magento健檢中心
Back
Magento1升級Magento2
Magento維運服務
MagentoforHeadless&PWA
Back
MagentoforHeadless&PWA
Shopify
企業電商顧問
Back
電商轉換率分析CRO
網站速度優化
AWS主機伺服器建置維運服務
成功經驗
Back
客戶成功案例
客戶回饋
新知分享
Back
Magento
Shopify
聯絡我們
Chrome推出Lighthouse前端稽核功能–為了更好的SEO與使用者體驗ByAstralWeb4yearsagoNoComments首頁 / 行銷與實用好文 / Chrome推出Lighthouse前端稽核功能–為了更好的SEO與使用者體驗
Chrome開發團隊不斷開發與改進瀏覽和最佳化體驗功能。
在GoogleI/O’17開發者大會上向外界展示了很多重要的演化,其中一部分是有關ChromeDevTool,因此作為前端開發者自然也受其影響。
Chrome60在DevTool中加入了很多新的項目,而最令人驚喜的是全新的Audits面板。
新的Audits面板基於Lighthouse,它提供了一整套全面的測試環境来评估網頁的品質。
稽核類別分別是網站的效能、無障礙程度、漸進式網路應用程式相容性等等,並提供改善網站品質的明確方法。
“這款工具正如其名(Lighthouse代表「燈塔」),可以「協助您避免觸礁」。
”–截至google中文網站管理員–中文網誌
在本文中,我們將研究一下Lighthouse,簡單說明它的架構!
另外提供GoogleI/O’17開發者大會有關Lighthouse的一段演講:
StayingofftheRocks:UsingLighthousetoBuildSeaworthyProgressiveWebApps(GoogleI/O’17)
使用入門
執行Lighthouse有三種方式:
1.使用開發者工具(Devtools)的Audits(Chrome版本需60或更高)–圖片截至google中文網站管理員–中文網誌
2.或安裝LighthouseChrome擴充功能後,進入希望稽核的網站後,點選Lighthouse擴充功能圖示,按下Generatereport便可以開始檢查,簡單又直覺
3.或直接進入https://developers.google.com/web/tools/lighthouse/run
輸入想要稽核的網站URL
執行後會跑出報表顯示各個項目的結果與分析,一共有五大類別
Performance:網站的效能
網頁在瀏覽器上下載和顯示的速度。
性能優化是提高網頁效能的技術領域。
ProgressiveWebApp:WebApp分析項目(PWA)
為了幫助團隊創造最好的體驗,Lighthouse整理了一份詳細的清單,列舉出想要
創建一個BaselinePWA需要滿足的條件。
Accessiblity:網頁無障礙(非典型使用者體驗)
某些使用者以不同於預期的方式拜訪網頁或進行交互,而網頁無障礙類別則測試於屏幕閱讀器能力和其他輔助技術是否能在頁面中正常運作。
BestPractices:網站最佳實踐
最佳實踐類別提供一些建議,使頁面現代化,並避免性能陷阱。
例如應用程序缓存,HTTPS使用,不推薦使用的API,用户權限請求等等。
這部
分包含“失敗和通過的測試列表”。
SEO:網頁搜尋引擎最佳化
使搜尋引擎能夠更容易找到網站,適當調整網站內容讓引擎更容易建檔。
報告頂部的分數是每個類別的總分。
其餘部分是決定得分的每一測試項目的具體描述。
每個類别分析结果都會以適當的结構展示在指定的面板中。
而這些評分標準和優化項目可以視為Google的網頁最佳實踐建議!
參考網站:
https://webmaster-tcn.googleblog.com/2018/02/lighthouse-chrome-seo.html
https://developers.google.com/web/tools/lighthouse/
RecentPosts
Magento2設定Braintree金流(Sandbox模式)
Photoshop【超簡單系列】NeuralFilters-超縮放
Categoryattribute無法存入表單為0值
如果使用Cloudflare取IP的問題和解決方法
Photoshop【超簡單系列】NeuralFilters-彩色化
文章分類
Shopify
Magento
Magento2開源版
Magento2商業版
電子商務
Zendesk
Mailchimp
Akeneo
PIM
Oracle
網站技術與設計
Adobe教學
前端開發
後端開發
網站測試
Wordpress
行銷與實用好文
最新動向
文章彙整文章彙整
SelectMonth
April2022 (5)
March2022 (12)
February2022 (4)
January2022 (1)
December2021 (6)
November2021 (1)
October2021 (7)
September2021 (7)
August2021 (11)
July2021 (7)
June2021 (14)
May2021 (11)
April2021 (6)
March2021 (6)
February2021 (12)
January2021 (8)
December2020 (13)
November2020 (7)
October2020 (15)
September2020 (7)
August2020 (14)
July2020 (2)
June2020 (17)
May2020 (14)
April2020 (17)
March2020 (21)
February2020 (4)
January2020 (2)
December2019 (4)
November2019 (3)
October2019 (7)
September2019 (11)
August2019 (13)
July2019 (2)
June2019 (10)
May2019 (14)
April2019 (11)
March2019 (8)
February2019 (9)
January2019 (14)
December2018 (16)
November2018 (20)
October2018 (22)
September2018 (30)
August2018 (22)
July2018 (36)
June2018 (24)
May2018 (21)
April2018 (12)
March2018 (32)
February2018 (15)
January2018 (15)
December2017 (39)
November2017 (15)
October2017 (13)
September2017 (13)
August2017 (14)
July2017 (4)
June2017 (16)
May2017 (15)
April2017 (9)
March2017 (7)
February2017 (6)
January2017 (12)
December2016 (14)
November2016 (6)
October2016 (12)
September2016 (11)
August2016 (18)
July2016 (12)
June2016 (16)
May2016 (9)
April2016 (10)
March2016 (15)
February2016 (14)
January2016 (18)
December2015 (21)
November2015 (32)
October2015 (24)
September2015 (28)
August2015 (25)
July2015 (26)
June2015 (23)
May2015 (15)
April2015 (18)
March2015 (16)
February2015 (21)
January2015 (17)
December2014 (22)
November2014 (20)
October2014 (15)
September2014 (13)
August2014 (11)
July2014 (12)
June2014 (9)
May2014 (10)
April2014 (11)
March2014 (6)
January2014 (1)
November2013 (5)
October2013 (2)
00000
歐斯瑞-一個對網路世界充滿熱情的團隊
歐斯瑞提供免費電商知識,並協助各大類型之企業
電商諮詢建置與
Magento和
Shopify相關的電商專案。
立即聯繫我們
上一篇文章小心!他們正盯著你!6種Google服務會收集的數據下一篇文章電商創業第一步–商業模式(下)推薦文章電商想做問卷分析來自動推薦商品該怎麼起頭(上)2022-03-25 0ForkingWorkflow的介紹2022-02-21 0線上購物拿到真的台幣回饋金-Shopback現金回饋!2022-02-15 0LINEPaySandbox申請2021-12-15 0Category: 行銷與實用好文Tags: Google教學,google工具,行銷與實用好文
留下回應取消回覆
你的電子郵件地址不會被公開.姓名*
電子郵件*
網站
維運服務
延伸文章資訊
- 1Google Lighthouse – SEO Glossary | Searchmetrics
Lighthouse is an open source tool for running technical website audits. The tool was developed by...
- 2網路優化不可不知的測評工具Lighthouse, PageSpeed Insights ...
Google Extensions Lighthouse
- 3Google Lighthouse - SEO Tool - TPIsoftware
Lighthouse 是由Google 所提供的一個開源工具,主要用來檢測網站使用者體驗、效能與SEO 等等項目。目前Lighthouse 提供5 個SEO 相關指標的檢測結果, ...
- 4What Is Google Lighthouse and How to Use It? - Elegant ...
Google Lighthouse is a free, open-source tool that can help you improve your website's speed, per...
- 5Chrome 推出Lighthouse 前端稽核功能- 為了更好的SEO 與使用 ...
Chrome 開發團隊不斷開發與改進瀏覽和最佳化體驗功能。在Google I/O '17 開發者大會上向外界展示了很多重要的演化,其中一部分是有關Chrome DevTool,因此作為前端開發 ...