Chrome Canary的功能對技術SEO的影響

Chrome如何推出新功能

Canary是Google Chrome的早期版本。Google將其功能分為四個稱為發行通道的階段進行發佈。這些通道包括Canary、Dev、Beta和Stable。<br/><br/>在Android、Mac、Windows和Linux上,Chrome Canary、Beta和Dev可以同時安裝。Chrome工程師會在真實用戶身上測試新功能,以查看是否遇到任何問題,然後再將該功能發佈到下一個通道。Canary首先獲得更新,在太平洋標準時間每天淩晨2點發佈更新內容</a>。<br/><br/>你可以獲取最新的功能、流覽器實驗和Web平臺API。更新還包括錯誤修復、流覽器改進、代碼清理以及安全性方面的改進。在正式向3</a>2億用戶發佈之前,這些功能在六周的發佈週期內進行反覆運算優化。<br/><br/>使用者可以在自己的網站、Web應用程式、內容管理系統</a>(CMS)、主題和外掛程式上測試即將推出的功能,並報告錯誤並提供對新功能的回饋意見。並非所有功能都能通過Canary階段,這個實驗性流覽器由流覽器愛好者、開發人員、企業用戶和技術SEO專業人士</a>使用。

chrome canary針對專業開發者的定位可能限制了其市場規模和用戶基礎。

Chrome DevTools 是一個在瀏覽器內測試網站的診斷工具</a>包。開發者可以使用這些工具</a>來測試、建構和維護網站,並且能夠測量頁面速度</a>表現。瀏覽器工具</a>可以在不同條件下測試網站的性能,讓你更早地修復問題</a>。<br/><br/>對於開發者來說,這些工具</a>幾乎和瀏覽器本身一樣重要。你不需要等待漫長且昂貴的爬行過程結束;你可以立即使用 Canary 找到技術上的 SEO</a> 問題並加以處理。

設置Chrome Canary進行SEO

網站需要在不同地點、設備和網絡上表現良好。DevTools讓您可以模擬在不同地方以及較慢的速度下進行瀏覽。在Chrome的設定中,將Canary設置為使用Googlebot用戶代理進行瀏覽。<br/><br/>看看Google加載網站時看到了什麼。不要讓瀏覽器擴展影響您測試的準確性。下載Canary作為一個專門用於技術SEO審核</a>和調試的單獨的瀏覽器。<br/><br/>

在Canary中插入並掃描技術SEO問題

Chrome DevTools讓你可以深入瞭解網站的內部運作。它能在幾秒鐘內進行測試並列印出詳細的性能報告,但一開始可能會讓你感到不知所措。技術性</a>的SEO專家</a>以與汽車修理工檢查車子故障相同的方式來檢視網站;我們將網站插入和掃描瀏覽器工具</a>,並分析它們的加載和響應情況。<br/><br/>使用Canary,你可以記錄和測量關鍵時刻,如頁面加載、導航和用戶互動。還可以獲取狀態碼、核心Web指標(CWV)讀數、瀑布圖和時間軸等等。有時,在Canary中進行故障排除只會指向問題的一個徵兆而不是問題本身。<br/><br/>更強大的工具</a>提供了高級讀數,但故障排除過程仍然是相同的。

使用Google Chrome Canary進行技術SEO審核

Google希望網站加載速度</a>快,但如果Googlebot無法理解主要內容</a>,該頁面的排名就不會很好。DevTools可以測量和幫助調試網站的傳遞和性能。使用Canary來審核和調試Javascript、CSS和CWV問題。<br/><br/>立即使用DevTools檢查您的頁面和範本。這有助於瞭解網站如何</a>引導訪問者和Google的爬蟲程式。檢查內部鏈接</a>、內容重複</a>、錯誤鏈接、丟失圖像和404頁面</a>。<br/><br/>檢查您的頁面元數據</a>是否完整且優化。尋找結構化數據</a>問題,並調查因JavaScript渲染問題而未被Google索引的內容</a>。限制網絡設置以檢查不同Web條件下的延遲情況,並分析網站運行時性能以識別瓶頸。<br/><br/>尋找優化內容</a>傳遞的機會。檢查網站資源如何</a>加載和呈現。不是所有資源都相等-更好的資源交付可以改善用戶體驗</a>。<br/><br/>

其他的SEO DevTools工作流程

需要幫助為SEO</a>做商業案例嗎?使用數據來證明技術SEO</a>的價值。對比你的競爭對手</a>,基準網站性能和內容</a>交付。使用Canary跟上您的網站變化。<br/><br/>禁用JS設置以調試Javascript SEO問題</a>。進行移動設備測試。進行可及性檢查。<br/><br/>遠程無頭瀏覽器測試。進行程式化DevTools瀏覽器測試和自動化。

Chrome瀏覽器開發生態系統

Chrome的軟體開發策略運用了多種滾動和並行部署方式。這種方法使得它可以進行A/B測試和容量測試。Chrome的工程師們自動化了功能回退,避免了冷啟動和停機時間。<br/><br/>這是一個簡化的流程,提供了細細微性的瀏覽器版本控制。要確保跟蹤每個通道上功能的演變。閱讀特性摘要並理解它們可以解決哪些業務問題。<br/><br/>加入到討論中吧!Chromestatus.com追蹤功能的進展情況。訂閱Chrome開發者博客以隨時瞭解最新的Chrome工具</a>和庫。

Chrome DevTools中的新性能洞察面板

職業運動員觀看比賽片段以瞭解自己的表現。類似地,性能洞察面板讓您重播並分享網頁加載的錄影。這個新的面板隨Chrome 102一同推出。<br/><br/>它是性能面板的精簡更新版本,可提供有關瀏覽器渲染的見解,而無需深入瞭解技術知識。該面板具有用於測量頁面加載CWV性能的簡單用戶介面。它提供可操作的頁面見解,找出阻塞渲染的請求、佈局偏移等問題。<br/><br/>未來版本將擴展使用案例,例如測試互動性。您可以分享關鍵呈現路徑中的網絡延遲,並顯示GPU活動以查明導致您網站延遲的丟幀情況。在提交工單時,節省開發人員一些時間並附上性能錄影。<br/><br/>立即向他們展示您頁面上存在哪些問題以激發行動。

Chrome DevTools中的新錄音面板更新

錄音機面板是一個實驗性功能,提供用戶流程洞察。它通過性能面板記錄多步驟用戶流程的運行效能。使用此功能來審核主要網站用戶流程的性能。<br/><br/>大多數用戶在網站加載後與其互動。因此,將用戶的點擊、滾動和導航等互動行為記錄下來是一個好主意。可以在模擬的網絡環境中記錄和編輯您的用戶流程。<br/><br/>還可以記錄電子商務</a>結帳流程,並通過設置不同的加入購物車步驟來測量結帳性能。還可以腳本化頁面加載、按鈕或鏈接點擊等互動行為,並測量其核心 Web Vitals(CWV)。Google列出了對幾種用戶輸入屬性的支援。<br/><br/>它自動檢測ARIA和CSS選擇器。您還可以添加常見JS和CSS框架使用的自定義data-*選擇器。最新版本Chrome 108已擴展支援XPath和文本選取器。<br/><br/>頁面可能加載很快,但運行緩慢-而糟糕的用戶體驗</a>會影響對您品牌的感知。確保訪問者不因點擊時出現卡頓而放棄使用網站。將主要用戶流程錄音匯出到流行的前端測試工具</a>的不同格式中。<br/><br/>使用JSON匯出來編輯流程,然後再將其導入錄音機並觀看重播。使用Chrome擴展還支援自定義腳本的匯出。支持將錄音匯出到Google的Node.js Puppeteer庫中使用。<br/><br/>您還可以與Cypress、Nightwatch、Sauce Labs和TestCafe一起使用它們。

用Puppeteer自動化無頭瀏覽器測試

無頭瀏覽是指在沒有瀏覽器使用者介面的情況下訪問網站</a>。您可以在計算機的背景中啟動 Chrome 並操作瀏覽器工具</a>。Puppeteer Chrome 是一個運行在 DevTools 協議上的 API。<br/><br/>Puppeteer 也可以通過無頭模式運行瀏覽器測試,而不使用 Chrome 的使用者介面。建立自動定期 CWV 測試,並在不同設備和網絡上捕獲頁面加載的截圖。開發人員可以自動化表單提交和 UI 測試。<br/><br/>自動化頁面速度</a>性能報告。Chrome 讓您工作更智慧、更省時,在進行 Canary 技術 SEO</a> 審核時也是如此。

在Chrome Canary上測試Web平台API

Chrome工程團隊發布了實驗性API。協力廠商工具</a>和企業依賴這些API進行測試新功能。原始測試就像特性開關,可以切換並且不一定會被納入穩定版本的Chrome中。<br/><br/>功能提案檔提供了相關背景說明,並解釋它們如何</a>幫助使用者。在chromestatus.com上可以查看Chrome特性開關和API的狀態。開發人員使用API進行自動化的網頁性能測試。<br/><br/>真實用戶監控(RUM)分析提供商使用Chrome的API追蹤並報告真實用戶的CWV(核心網頁價值)。Chrome是基於Chromium開源項目建立的,錯誤追蹤在Chromium錯誤追蹤器上進行。

對於流暢頁面導航的前後緩存測試

現代瀏覽器最近新增了一種功能,使用一種新型快取可以更快地載入頁面。回前/回後 (bfcache) 快取在您訪問網頁時會在瀏覽器的記憶體中捕捉該頁面的快照。它重新載入頁面時不需要向伺服器發出新的網絡請求。<br/><br/>當使用者返回到之前訪問過的頁面時,他們可以享受更快速的頁面載入體驗。由於從 bfcache 載入比傳統 HTTP 快取更快,因此它可以幫助訪客節省下載額外資料的時間。Chrome 96 穩定版中已推出了在「應用程式」面板上進行 bfcache 測試的功能。<br/><br/>它會檢查是否正在部署回前/回後快取功能。

修正來自bfcache瀏覽器功能的分析報告不足

瀏覽器優化技術bfcache是自動的,但它會影響CWV(核心網頁效能指標)。分析工具</a>可能會低估頁面瀏覽次數,因為頁面從bfcache加載。你的分析工具</a>是否設置了檢測頁面從bfcache加載的功能?請測試你的網站以確保重要頁面是否使用了bfcache。<br/><br/>同時注意當你的頁面不再從bfcache提供服務時。

利用性能API識別阻礙渲染資源

RUM工具</a>以前沒有一種簡單的方法來檢查資源是否阻止了渲染。Chrome 107推出了Performance API的新功能,可以識別阻止渲染的資源。這個更新幫助RUM使用者節省時間並優化渲染路徑。<br/><br/>性能面板可以幫助識別像CSS這樣延遲網站加載的阻塞資源。當瀏覽器遇到樣式表時,它會暫停頁面加載直到完成讀取檔。在瀏覽器能夠渲染和繪製網站之前,它需要理解頁面的佈局和設計。<br/><br/>開發人員可以幫助最小化重新計算、樣式化和重繪,以預防</a>網站變慢。

相關數據:

• 根據similarweb,截至2021年7月,chrome在全球市場的佔有率為65.22%。 來源: similarweb
• 根據statcounter的數據,截至2021年6月,chrome在美國市場的佔有率為49.64%。 來源: statcounter
• 根據statcounter的數據,截至2021年6月,chrome在英國市場的佔有率為60.59%。 來源: statcounter
• 根據statcounter的數據,截至2021年6月,chrome在日本市場的佔有率為81.11%。 來源: statcounter
• 根據statcounter的數據,截至2021年6月,chrome在法國市場的佔有率為57.97%。 來源: statcounter
• 根據statcounter的數據,截至2021年6月,chrome在台灣市場的佔有率為75.15%。 來源: statcounter

Core Web Vitals未來已來

Google擁有86%的搜尋引擎</a>市場份額,Chrome佔全球瀏覽器市場份額的66%。Google於2020年推出了網頁性能核心Web Vitals(CWV)指標,以幫助量化網頁的用戶體驗</a>。首次輸入延遲(FID)是一個CWV,用於衡量網頁的互動性。<br/><br/>自從它作為一項指標首次推出以來,人們已經在改善其網站的FID - 今天他們做得非常好。92%的網站現在對於移動用戶具有良好的FID評分,而桌面用戶則達到100%。但是,FID只測試首次用戶互動,並不能衡量初始頁面加載之後的用戶體驗</a>。<br/><br/>根據Jeremey Wagner表示:“Chrome使用情況表明90%的使用者活動發生在初始頁面加載之後。” Google最近在Google I/O 2022上推出了實驗性質的Interaction to Next Paint(INP)指標 - 它可能很快取代FID成為CWV互動性指標。INP提供了更準確的互動用戶體驗</a>圖像。<br/><br/>它捕捉點擊、觸摸、鍵盤和滾動選項卡等操作活動,並測量每次交互發生時頁面的平均響應時間。HTTP存檔報告顯示TBT與INP相比FID有較強的相關性</a>。Google繼續對INP進行實驗和改進。<br/><br/>當Google超越FID時,優化了INP的網站將具有競爭優勢。您的網站是否已為INP成為CWV並影響排名做好準備?