相信⼴⼤程序猿们在开发前台⽹⻚时，应该经常会收到推⼴同事提出的各种SEO要求，尤其是需要参与google收录和排名的⼚商，要求更为苛刻。
⽐如，这个标题要⽤h1，这个产品名称要同步展⽰并且出现在⻚⾯⽂档中，对应的公司信息也要同步展⽰，那个推荐词⼀定要同步渲染，确保被搜索爬⾍爬取到…等等。
⼀堆⻚⾯需求，加上好⼏⻚的推⼴SEO需求，是不是听到了就有点头⼤了？此时领导再告诉你，这个⻚⾯要做好性能优化，确保LCP指标优秀， DCL在2秒以内！哇~头⽪发⿇了呀！
想要性能好？简单呀，多做异步！把不在⾸屏、不重要的功能模块统统异步加载，⾸屏加载⻜快，让⽤户体验⻜⼀般的感觉！（除⾮是3G，那可真的⻜不动了）
结果此时推⼴同事说，这些信息都要同步加载，包含在html中，确保爬⾍抓取哟~
好家伙，本就业务繁重的⻚⾯，想异步⽤个爽，直接被推⼴卡住了喉咙。
⻥与熊掌不可兼得，可能说的就是这个场景了。但推⼴需求确实是重中之重，咱们程序猿做技术终究也是要服务业务、产⽣价值的。没有收录和排名，做出好的⻚⾯结果⽤户看不到，还有什么⽤呀是不是？
因此，咱们要找到⼀个平衡点！既能保证性能优化、⼜能确保SEO，两⼿抓两⼿壮！
那么，要怎么寻找这个平衡点呢？其实很简单，还是得要知⼰知彼。程序猿们了解各类SEO需求的重要性，推⼴同事了解性能优化的瓶颈所在，在相互了解痛点的前提下沟通，就可以找出⼀个相对平衡、效果最好的开发⽅案了！
#01
SEO代码对性能的影响
⾸先，作为程序猿，我们要知道SEO代码主要涉及⻚⾯哪些内容：
1. ⻚⾯Url
2. ⻚⾯title、keywords、description
3. 规范⽹址canonical
4. 分享og
5. ⾯包屑
6. 结构化数据
7. h1、h2、h3
8. ⻚⾯内容（产品信息、视频信息、公司信息等）
9. 内链（推荐、⻓尾词等）
最后我们会发现，对⻚⾯加载产⽣性能压⼒的主要集中在⻚⾯内容和内链上。在准备⻚⾯时，同步调的服务和数据越多，⾸屏加载速度也就更慢。⽽结构化数据⼤多是⻚⾯内容的摘要，⼀般来说性能压⼒较⼩，暂时不在考虑之内。
现在我们知道了SEO带来的性能压⼒在哪了，是不是就该分析重要性和对策了？先不急！
#02
根据内容重要性选择合适的页面渲染策略
在此之前，我们要先给推⼴同事们说⼀说现在常⽤的⼏种⻚⾯渲染⽅式，⽅便后续分析处理⽅案：
1. 同步：包含服务端同步渲染、前端 SSR。两者都直接在HTML⻚⾯中返回完整字段，是SEO能⼒最⾼的渲染⽅式。
2. 异步可抓取：⻚⾯初始化加载后，⽴刻请求接⼝由前端渲染数据。⽬前⾕歌爬⾍在⼀定时间内可以抓取到此⽅法渲染的内容，且⾕歌爬⾍⼀般是在实验室环境进⾏抓取，性能相对稳定。但受限于接⼝速度、⽹络，还是会有很低的概率抓取不到
3. ⼈⾍分离：针对爬⾍进⾏同步，针对⽤户进⾏异步可抓取。该技术⽅案可以确保爬⾍对SEO内容的100%抓取，⽤户的⾸屏加载性能也会明显提升，是⽬前最符合性能优化和SEO共同要求的⽅案。但该⽅案也有⼀些不⾜，那就是要维护2份代码（Double！），并且⾕歌要求，⽹⻚对⽤户和爬⾍展⽰的内容应保持⼀致，不确定这种渲染⽅法是否会触线，但最终展⽰内容⼀定是⼀致的。
4. 纯异步：由前端控制调⽤接⼝的时机，⽐如滚动到⼀定位置，或者⽤户触发交互后再调⽤接⼝渲染。这种性能提升最⼤，但对SEO没有任何帮助。
渲染⽅式说完了，该分析平衡⽅案了吧？再等等！有⼀个共识⾮常重要：在SEO代码没有性能压⼒的情况下，⼀定是优先使⽤同步。只有存在性能压⼒、需要取舍时，才会选择⾮同步⽅案，同步渲染永远是最稳妥的。
#03
方案介绍
好了，该说⽅案了~之前我们提到，性能压⼒主要集中在⻚⾯内容和内链上，那我们先从⻚⾯内容说起。
⻚⾯内容有很多种，我们可以从不同内容的重要性⾓度来做分析。
1. 产品信息：Product信息是MIC SEO的核⼼推⼴内容，⽤户搜索的基本都是产品名称，流量⾮常⼤。对此，需要确保产品名称、产品价格、产品描述这些核⼼字段的同步，其他辅助信息可以考虑异步可抓取或纯异步。
2. 视频信息：在视频⻚⾯，视频信息就是SEO的核⼼内容。但仅针对视频url、视频标题等，视频本⾝的加载实际上是可以略微滞后的。⽬前有不少⻚⾯都会要求⾃动播放视频，但同步加载视频资源，对⾸屏性能有较⼤的压⼒。其实可以考虑在⻚⾯初始化加载之后加载视频资源，再由代码控制⾃动播放。此⽅法可以减少视频资源加载对⾸屏性能的负担，也不影响SEO，对⽤户体验的影响也相对较⼩。
3. 公司信息：虽然不是描述Product本⾝的信息，但公司名称、公司展⽰厅链接可以提供内链，增强关联度。针对名称和url优先使⽤同步，其他辅助字段可以考虑异步可抓取或纯异步。
说完⻚⾯内容，就是内链了。不同种类的内链，重要性也有所区别。
1. 推荐：这是⻚⾯SEO对性能压⼒最⼤的模块，因为涉及到搜索服务的调⽤，很多⻚⾯甚⾄不⽌⼀个推荐模块需要SEO。在性能压⼒较⼤且内链重要性较⾼的模块，优先使⽤⼈⾍分离。重要性⼀般的情况下，可以使⽤异步可抓取。
2. ⻓尾词：⽬前内链中最为重要的模块，涉及对⻓尾词的收录和排名。优先使⽤同步，若存在性能压⼒则使⽤⼈⾍分离，综上，我们可以得出结论：在内链上，⻓尾词优先同步，推荐模块优先⼈⾍分离。⻚⾯内容上，产品信息、视频信息优先同步，公司信息核⼼信息也优先同步。具体根据与⻚⾯定位的相关度来衡量SEO重要性。
⼤家可以发现，终究还是需要程序猿和推⼴同事多沟通多了解，毕竟SEO没有标准答案，推⼴同事更多也是依靠经验和数据来推进SEO需求，还是有商量的余地的。这也是我们在职场中的必备技能，只有多了解双⽅所需，换位思考，才能更好地互利共赢嘛~
