怎样提高页面速度
页面速度优化主要有下面几个方向。
- 服务器速度
显而易见，服务器硬件、软件配置、带宽、负载、线路等，都直接影响响应和下载速度。如果发现页面打开过慢，首先要检查的是服务器速度。检查服务器速度，对 SEO来说，搜索引擎自己的工具最权威了，百度资源平台显示的抓取时间，Google Search Console 的服务器反应时间和页面抓取时间都是重要参考。
网上还有不少多点测速工具，读者可以在本书补充资源页面找到链接。使用 CDN 也是提高服务器速度的一个方式。
- 图片压缩
大部分页面需要下载的文件数据量，图片会占至少一半，有时候多到 80%～90%。很多网站的图片文件又没有必要太大，所以压缩图片文件经常是效果最显著的方法之一。
网站上通常使用 jpeg、png、gif、WebP 这几种图片格式。不要使用超出必要尺寸的图片。不要使用超出必要清晰度的图片，在不影响视觉效果的前提下，图片文件经常能压缩高达 60%～70%。
网站自己添加的图片，要用 Photoshop 或专门的图片压缩软件来压缩，网上也有很多免费的线上压缩服务。需要大量上传产品或文章的网站，编辑没有压缩图片的习惯或时间，上传程序要有自动压缩图片的功能。UGC 或平台类网站更要有自动图片压缩机制，千万不要任由用户把数码相机里的原始图片上传到服务器，不加处理就直接显示。
- 启用 GZIP 压缩
字符类文件，如 HTML、CSS、JavaScript 文件，启用 GZIP 压缩，也能大幅降低文件的尺寸（可能高达 90%），减少文件的下载时间。
GZIP 压缩是服务器端设置，页面本身看不出来。如果对是否正确启用了 GZIP 不确定，可以用线上工具测试一下，读者可以参考本书补充资源页面列出的GZIP 压缩测试工具。
在 LAMP 类型服务器，启用对某类文件的 GZIP 压缩，只要在.htaccess 文件加上类似这样指令：
意思是 CSS 和 HTML 文件开启 GZIP。
- Minify 缩减代码
删除一些没必要的空格、回车、注释、字符等，也常常能大幅缩小文件，提高速度。包括 CSS、JavaScript、HTML 代码。没有使用的代码当然更要删除。
- 启用浏览器缓存
页面下载后浏览器可以缓存很多信息，如图片、HTML、CSS、JavaScript，下次用户访问时，缓存里有的文件就不需要再次下载了，减少下载的时间，也减轻服务器的压力。如果不设置缓存过期时间，默认过期时间是一个小时。缓存过期时间是服务器端可
以设置的，不经常变动的文件，如图片、CSS、JavaScript 可将缓存过期时间设置长一点，如一至两个星期，图片甚至设置为一年也问题不大。用户打开页面，如果因为缓存遇到显示不正常的问题，按浏览器刷新按钮就可以强制下载所有文件了。
和 GZIP 压缩一样，页面缓存时间从页面本身看不出来，需要通过工具进行测试，读者可以参考本书补充资源页面列出的页面缓存时间测试工具。
不同服务器设置缓存时间的方法不同，需要参考相应的技术文档。如我比较熟悉的
LAMP 服务器，只需要简单地在.htaccess 文件中加上类似这样的指令：
意思是把 jpg 图片缓存设置为一年。
- 减少 JavaScript，尤其是阻塞渲染的 JavaScript
页面渲染时，浏览器需要先解析 HTML 并构建 DOM 树，如果解析器遇到 JavaScript脚本，就得停止解析，先去执行脚本，执行完再继续解析。如果脚本大，执行慢，渲染就无法开始，页面就无法显示。如果脚本是调用外部文件，还要先等待外部文件请求、下载完毕。如果脚本是第三方外部文件，那就更无法预期和控制下载速度。
所以，在可能的情况下，需要尽量减少，甚至删除这类会阻塞渲染的 JavaScript。如果脚本对渲染页面不是必需的，建议延迟加载。
即使是不会阻塞渲染的脚本，也是能少用就少用。任何脚本都需要时间下载、执行，就算页面内容已经显示，如果因为还在执行脚本造成页面没有互动响应，可能连上下滑动都不行，用户体验也不会好。对需要脚本的功能要仔细考虑：这个功能对用户是必需的吗？对完成转化是必需的吗？不是的话，以拖慢页面速度为代价值得吗？
- 图片懒加载
懒加载（lazy loading），指的是第一屏不需要的图片延迟加载，当用户向下滑动时，下面的图片才加载。懒加载现在是网站设计，尤其是移动页面设计的常用方法。
Chrome 之后的版本已经自动支持浏览器端懒加载了，不再需要页面上的懒加载代码或 JavaScript 库，只需要给图片加上 loading 属性。但考虑到其他浏览器目前状况，还是需要页面本身做好懒加载。
本文档为站内渲染。原始文件本地路径：saas/source/seo-llm/SEO实战密码-markdown-第05章-页面优化-提高页面速度-怎样提高页面速度-42a644.md（仅本地保留，不入库不部署）