SEO私馆

原创知识、有效实用、促进思考、学习交流

网站优化客户端渲染(CSR)的技术方法

我们给网站做SEO和AEO/GEO的时候,首先要优化前端及客户端的访问速度,这直接会影响性能的指标水平,从而影响AI及搜索(生成)引擎的认可度,但是优化客户端的重点在于渲染层面,所以会涉及到加载、读性、响应等事项。

压缩资源

可以针对网站的前端代码进行压缩,比如使用Webpack/Vite等构建工具开启JS/CSS压缩(Terser、CSSNano),移除空格和注释,而且有些建站程序自带Gizp压缩功能,也可以服务端开启Gzip或是Brotli,设置还可以启用HTTP层的传输压缩效率。

资源预加载

网站可以直接使用<link rel="preload"> 预加载对首屏至关重要的字体、CSS或是JS,有利于避免瀑布流的阻塞和拥挤,较大程度了加快了页面访问的速度,这也是很常见的优化方法,而且风险很低,但是不要预加载图片,因为可能会拖慢网速。

链接预连接

巧妙正确的使用<link rel="preconnect">,这可以提前建立与服务器、CDN的连接,有利于加快页面的响应速度,如果网站需要多级或是外部的链接,那么还可以使用<link rel="dns-prefetch">提前做DNS解析,如:图片域名、资源链接。

图片懒加载

如果网站或是页面有较多的图片,那么可以使用loading="lazy" 属性让图片进入视口前不加载网络请求,避开了图片抢占优先加载主要资源的网络请求,从而加快整个页面的加载及访问的速度,这个优化措施是很利于大图和多图的网站,并且也不影响图片的正常显示。

加载优先性

大多数网站应该优先加载CSS文件,然后是JS文件,这是为了首先完整的读取页面的渲染效果,避免AI搜索引擎出现解析失败,如果JS文件放置CSS前面,那就有可能因为JS代码及函数导致堵塞CSS的渲染,甚至会影响整体的响应速度,所以要注意资源的加载优先性。

缓存策略

网站可以设置静态资源强缓存,如:JS/CSS和字体文件 ,甚至可以设置长久的 Cache-Control(例如一年)缓存,但是更新之后要能自然失效,避免缓存问题导致搜索引擎和生成引擎抓取到不一致的资源,从而导致判断异常,如果JS文件需要功能性的更新,那就用版本符合进行缓存。

减少JavaScript的主线程工作量

网站可以把非关键的初始化逻辑用requestIdleCallback推迟到浏览器空闲时执行,避免过大的DOM操作和长时间的同步循环,用Web Worker处理纯数据运算,对频繁触发的事件(滚动、输入)使用防抖/节流,甚至也可以使用缓存值,但是要注意不能报错。

结语:提前加载、优先读取、预链资源、压缩资源、多层缓存,这些是网站优化客户端必要的技术措施,甚至还可以规范及整理前端代码,以达到加快页面响应和访问的速度,所以也要明确的进行仔细操作,切勿出错。