[ad_1]
讓我們從爆炸開始。
Googlebot 不是你的想法
SEO專家指的是Googlebot，它在前幾代人中保留了一種奇怪的崇敬形式，供無所不知的神靈和看不見的力量使用。
它具有戲劇性，給故事增添了色彩，但過分簡化了Googlebot的真實身份。
Googlebot只是一個用戶代理。它是請求的標識符–來電顯示的花哨版本。
請求收到響應後，Googlebot的工作就結束了，可以關閉以請求下一個URI。收集的響應在出現在SERP中之前，它通過一系列服務和流程來運行。
雜亂無章的用戶代理獲得了所有榮耀，但是我們需要談一談繁瑣的工作，這是一種隱藏的結構，可構建您的網站，讓Google像人一樣體驗它：渲染。
什麼是渲染？
呈現是Googlebot檢索頁面，運行代碼並評估內容以了解網站布局或結構的過程。
然後，在呈現過程中Google收集的所有信息將用於將您網站內容的質量和價值與其他網站以及人們在Google搜索中搜索的內容進行比較。
每個網頁都有兩種狀態-在它們之間呈現
每個網頁都有兩種狀態：
- 初始HTML。
- 呈現的HTML。
兩國之間的網站可能大不相同。
初始HTML首先出現。它是伺服器的響應。它包含HTML以及指向構建頁面所需的資源（如JavaScript，CSS和圖像）的鏈接。要自己查看初始HTML，請查看頁面源代碼。
渲染的HTML被更廣泛地稱為DOM，即Direct Object Model的縮寫。每個網頁都有一個DOM。它表示初始HTML以及HTML調用的JavaScript所做的任何更改。要查看DOM，請在瀏覽器中打開瀏覽器的開發人員工具，然後點擊控制台標籤。
如果您想輕鬆找出兩者之間的區別，可以使用Chrome擴展程序之類的工具 查看渲染的源 將突出顯示從一種狀態更改為另一種狀態的線。
了解HTML和DOM之間的區別是解決JS SEO的關鍵
當內容在初始HTML和DOM之間更改時，它是客戶端JavaScript更改頁面。 （的JavaScript 可以在其他地方執行，但我們稍後會解決。）
這些更改表明在用戶的瀏覽器中正在執行JavaScript。當在用戶瀏覽器中執行JavaScript時，我們稱其為客戶端渲染（CSR）。
這會使您的網頁處於危險之中。如果在執行過程中出現問題，則這些JavaScript更改可能永遠不會發生。 JavaScript是一個複雜的過程，並且是您網站上最昂貴的資源。
聽起來像是開發人員問題，對不對？
不是。
SEO專業人士在遊戲中擁有豐富的皮膚。
Google無法索引無法呈現的內容
為了排名，我們必須被索引。為了被索引，我們必須渲染。
如果無法呈現內容，那麼它就不會有助於Google了解或提升您的網站。
讓我們看一個使用快樂，健康的JavaScript的網站。
一切似乎井井有條。這似乎是一個權威的電子商務網站，對它的主題了解很多。
現在，讓我們帶走由JavaScript生成的內容。您可以通過在「網站設置」中阻止JavaScript來在任何網站上執行此操作。
錢幣。
強調該網站許可權的所有產品均已消失。
說我們了解書籍和向您的網站真正了解的受眾群體之間是有區別的。
想像一下，如果那是您努力優化並想要排名的內容。
這是更好的情況之一。
即使沒有JavaScript，我們仍然對該頁面試圖實現的意圖有基本的了解。我們知道品牌名稱，並且仍然可以找到網站上其他頁面的有用鏈接。
來玩個遊戲。
打開頁面並查看頁面源。您能說出該網站的內容嗎？
如果您無法根據初始HTML識別頁面的內容以及該頁面匹配的搜索意圖類型，那麼搜索引擎也不會。
該頁面將必須經歷呈現過程才能理解。
Google如何渲染（草圖）
渲染不是Hellmouth或Lovecraftian的空白。這是超級馬里奧兄弟級別。
儘可能地困難，但要有明確的步驟和檢查點。
這是具有實用步驟的過程，因此您可以繼續學習！
- URL從爬網隊列中拉出
- 跟隨：選擇一個頁面，任何頁面。
- Googlebot要求URL並下載初始HTML
- 遵循：查看頁面源
- 初始HTML傳遞到處理階段（Google索引服務進行的第一波處理）
- 請繼續：您能告訴我們此頁面的內容嗎？
- 處理階段從初始HTML中提取鏈接
- 後續操作：在Chrome開發人員工具中打開「網路」標籤，然後查看請求總數。這些請求中的每一個都計入您的抓取預算。
- 後續操作：在Chrome開發人員工具中打開「網路」標籤，然後查看請求總數。這些請求中的每一個都計入您的抓取預算。
- 這些鏈接返回爬網隊列
- 繼續：打開每個資源。逐一。別作弊。問問自己，資源如何帶來價值。大約有20種資源，您會很生氣。在50種資源中，開始思考這些事物如何以任何有意義的方式做出貢獻。在80種資源中，開始了解網站正在運送的不必要的廢話。提示：為每個標籤保留每個新標籤，並慢慢觀察您的理智失控。
- 抓取資源後，頁面將排隊進行渲染
- 跟隨：閃爍。您可能已經忘記了該怎麼做。
- 資源可用時，請求將從渲染隊列移至渲染器
- 請遵循：嘗試查找原始選項卡的去向。
- 呈現服務使用已爬網的鏈接組裝頁面
- 遵循的步驟：打開開發人員的工具查看DOM並查看資源。或者，如果您丟失了原始標籤，請執行以下操作：使用Google Search Console的URL檢查器呈現頁面。該工具同時執行爬網和渲染。
- 渲染器將渲染的HTML傳遞迴處理
- 遵循以下步驟：查看GSC中可用的渲染HTML。
- Google索引的第二次處理
- 繼續：您能告訴頁面內容嗎？內容是否如此豐富和有價值，足以證明您必須打開才能到達此處的所有選項卡？
- 從呈現的HTML中提取鏈接以將其放入爬網隊列
- 請遵循以下步驟：查找呈現的HTML中可用的鏈接，這些鏈接在伺服器響應中不可用。
- 轉到列表中的下一個URL，然後重複該過程。
很棒的工作！僅130萬億頁，您將是一個合適的機器人！
如何使渲染更有效，更輕鬆
現在，您已經親身體驗了渲染過程（很抱歉，不客氣），讓我們來談談如何使體驗減輕痛苦。
1.注意您如何交付內容
您使用的客戶端資源越多，出現問題的地方就越多。
假設您確實是Googlebot。
請求這些資源時是否提供了錯誤？
現在，資源創建的任何內容都丟失在Internet的沙發上。
希望這並不重要。
2.跳過渲染隊列並在伺服器響應中傳遞關鍵內容
JavaScript必須在某個地方執行。在大多數情況下，它要麼在您的伺服器上，要麼在用戶的瀏覽器中。
在伺服器端執行JavaScript時，我們可以將結果（呈現的內容）以初始HTML的形式發送給用戶。
許多JavaScript框架（例如Angular和React）都具有本機可用的這些功能。
要在伺服器端呈現內容，需要與開發人員合作並了解代碼庫。
請務必注意，您不必是100％的客戶端或100％的伺服器端。相反，應集中精力在重要的時刻發貨。
此處的「關鍵」表示用戶為何訪問該頁面。您需要按頁面模板為您的網站定義。
補充內容，網站頁腳和屏幕外項目等元素可以等待。
初始HTML中的JSON-LD是將Googlebot備忘單傳遞給Googlebot的一種很好的方法，但請確保您也擁有用戶所關心的內容。
3.僅發送您需要的腳本
在2019年 主導成本 現在可以下載腳本數量和CPU執行時間。
每個調用的腳本都必須下載，解析，編譯和執行-不管它是否對頁面內容有所幫助。
Google Chrome瀏覽器具有內置功能，可幫助您查看使用了多少代碼。
如何發現浪費的腳本
- 打開開發人員的工具。
- 單擊右上角的3個點。
- 選擇更多工具，覆蓋率。
- 重新載入頁面。
作為目標，一個健康，有效的頁面應小於1MB。
可能是，性能不佳的登陸頁面可能會掉下一些腳本。如果發現過多的腳本，請與您的開發團隊合作 代碼拆分。
4.將人為體驗優先於閃亮功能
您的收件箱中可能有很多優惠，可以試用具有專有指標的新AI驅動工具，這些指標將您的網站可見性排名為獨角獸。
如果您已經使用其他15個跟蹤像素來衡量效果，則可能不需要新的獨角鯨得分。
第三方腳本可能會對性能，渲染，安全性和用戶隱私產生負面影響。
可以考慮將第三方腳本載入為別人的房門鑰匙。
5.懶惰的圖像和腳本，不阻塞渲染
一幅圖片值一千個字吧？
這是東西1,000個字約為2kb。
根據HTTPArchive，圖片是請求最多的資產， 900kbs 的請求。
延遲載入 從Chrome 76開始受本機支持。只需添加屬性loading =「 lazy」即可以最小的開發票證提供最大的價值。
同樣，您還可以通過添加一個簡單的屬性來非同步載入腳本：
6.保持腳本包很小
如果您的腳本大於50–100 kB，請將其分成單獨的較小的包。
多個較小的捆綁包比單個大型腳本包更有效。
如果您的站點使用HTTP / 2復用，則可以同時進行多個請求和響應。
7.緩存，緩存，緩存
還記得上面的後續練習嗎？想像一下每次都必須返回可重用的JS資源。通過儘可能長時間地緩存資源，可以輕鬆避免該額外步驟。
如果您將JS分成較小的專用於特定功能的捆綁包，則可以更輕鬆地長時間緩存它們。
繼續閱讀 Google的網路基礎知識 然後與您的工程師坐下來，深入了解當前緩存的方式和內容。
8.性能和渲染直接相關
Google使用Chromium進行渲染的原因有很多。其中之一是它可以捕獲關鍵時序-從時間到首位元組（TTFB）到時間到互動式（TTI）的所有內容。
它在載入頁面時捕獲的數據有助於告知所有信息，從對移動設備的友好程度到快速的設計。這兩個都是排名的因素。
您的資源越高效，越高效，頁面呈現的效率就越高。
燈塔 是一個免費的測試工具，可以幫助您確定性能瓶頸。
如果您想深入了解Lighthouse的績效指標， 本指南 分解指標及其組成部分。
9.請記住，沒有一項技術天生就是好壞
JavaScript是一種工具，具有有效的應用程序，可以創建豐富的互動式和個性化體驗。鎚子也是一種工具。
鎚子非常適合用來掛照片，鎚子非常適合用於釘子釘子，但這並不能使鎚子成為家庭修腳的理想選擇。
知道你的指甲之間的區別。不要怪工具。
最好的渲染方式是什麼？這取決於…
這取決於您使用的技術。這取決於您的業務目標是什麼。
對於Google不想回答的問題，它不是註銷的答案。
技術細緻入微。渲染是在它們之間的空間中發生的許多過程之一。
與您可以在關鍵字中進行的所有頁面上優化相比，我們看不到的行為對我們網站的影響更大。
這是您的號召性用語。保持好奇心。問問題。
與您不了解的團隊進行不愉快的會議。問愚蠢的問題。
看起來像主題專家面前的傻瓜。它表明您願意學習。
圖片積分
作者截取的所有屏幕截圖，2019年11月