网站SEO优化托管 第1篇
对于许多网站来说,在页面加载完毕后,图像会是视图中的最大元素。这种情况的常见示例包括首图、大型轮播或横幅图像
改善这些类型的图像进行加载和渲染所需的时间将直接提升 LCP 的速度。实现方式:
首先考虑不使用图像。如果图像与内容无关,请将其删除。
有时,在某个 CSS
或 JavaScript
文件中声明或使用的重要资源可能会比所期望的要晚一点被获取,例如深藏在应用程序众多 CSS 文件中的某个字体。
知道某个特定资源应该被优先获取,请使用来更加及时地获取该资源
多种类型的资源都可以进行预加载,但您应该首先侧重于预加载关键资产,例如字体、首屏图像或视频,以及关键路径 CSS 或 JavaScript
压缩文本文件
压缩诸如 Gzip
和 Brotli
之类的算法可以显著缩减在服务器和浏览器之间传输的文本文件(HTML
、CSS
、JavaScript
)大小。所有浏览器都有效支持 Gzip
,而 Brotli
几乎可以在所有较新的浏览器中使用,并能提供更好的压缩结果。
首先,检查您的服务器是否已经自动压缩文件。大多数托管平台、CDN 和反向代理服务器在默认情况下都会对资产进行压缩编码,或者使您能够轻松配置资产。
如果您需要对服务器进行修改来使其压缩文件,请考虑使用 Brotli
,而不是 gzip
,因为 Brotli
可以提供更好的压缩率。
选择您要使用的压缩算法后,请在构建过程中提前压缩资产,而不是在浏览器请求时实时压缩资产。这样能够最大限度地减少服务器开销并防止在发出请求时出现延迟,尤其是在使用高压缩比的情况下。
使用 Service Worker
缓存资产
Service Worker
可用于缓存任何静态资源,并在收到重复请求时将资源直接提供给浏览器,而无需通过网络。
使用 Service Worker
预缓存关键资源可以显著减少资源加载时间
网站SEO优化托管 第2篇
必要资源(预加载、解析)
非必要资源(延迟加载)
渲染速度:服务端渲染(SSR)【尤其需要搜索引擎优化(SEO)】
就近访问: 当用户请求访问某个静态资源时,CDN 会自动将用户请求路由到离用户最近的边缘服务器。这样可以减少网络延迟,提高资源的加载速度。
负载均衡: CDN 使用负载均衡算法确保各个边缘服务器之间的负载均衡,避免某个服务器过载,提高整体性能。
网站SEO优化托管 第3篇
削减 CSS
: CSS
文件可以包含空格、缩进或注释等字符。这些字符对于浏览器来说都不是必要的,而对这些文件进行削减能够确保将这些字符删除。使用模块打包器或构建工具,那么可以在其中包含一个相应的插件来在每次构建时削减 CSS 文件:对于 webpack5
:css-minimizer-webpack-plugin i
使用 Chrome
开发者工具中的代码覆盖率Coverage 查找网页上任何未使用的 CSS
。
对于任何初始渲染时不需要的 CSS
,使用 loadCSS
来异步加载文件,这里运用了rel=_preload_
和onload
。
元素的rel
属性的preload
值允许你在HTML的中声明获取请求,指定页面将很快需要的资源,你希望在页面生命周期的早期开始加载这些资源,在浏览器的主线程启动之前。
把用于首屏内容的任何关键路径 CSS 直接包括在中来将这些
CSS
进行内联。