[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月