五、压缩CSS并提取首屏关键样式
CSS属于阻塞渲染资源。浏览器通常需要下载并解析样式文件后，才能正确显示页面。如果一个页面引用多个主题文件、插件样式和无用模板样式，首屏就会被延迟。
优化时可执行以下步骤：
删除未使用的主题和插件CSS；
合并体积较小的公共样式；
压缩空格、注释和重复规则；
把首屏导航、标题、按钮和产品主图样式作为关键CSS；
避免在CSS中层层使用@import。
Google的web.dev资料指出，CSS会影响整体页面显示速度，压缩CSS文件能够减少传输体积。
六、给非关键JavaScript添加defer或async
直播带货页面经常同时加载聊天工具、倒计时、表单验证、广告统计和社交平台代码。这些脚本如果全部放在页面顶部同步执行，就会暂停HTML解析。
依赖页面结构的脚本可以使用：
<script1 defer src="/js/product-page.js"></script1>
与其他代码没有依赖关系的统计脚本可以评估使用：
<script1 async src="/js/analytics.js"></script1>
MDN说明，async可以让脚本与HTML解析并行下载，defer则通常在文档解析完成后执行。
七、按页面拆分代码，不要全站加载同一个大文件
有些网站把产品展示、会员中心、购物车、直播播放器和物流查询代码全部打包在一个JavaScript文件中。即使客户只访问首页，也需要下载完整功能。
更合理的方法是按页面拆分：
首页只加载首页组件；
产品页加载产品图库和询价功能；
直播页面再加载播放器；
物流查询页面再加载物流接口；
购物车相关代码在用户进入购物车时加载。
代码拆分能够减少首次访问需要下载和执行的内容，也是MDN推荐的延迟加载策略之一。
八、控制字体、直播插件和第三方统计代码
网站速度问题经常隐藏在第三方资源中。一个页面可能同时加载多套字体、多个统计平台、在线客服、地图、社交分享和直播插件。
可以采用以下方法：
中文页面只保留必要字重；
英文页面使用WOFF2字体；
为字体设置font-display: swap；
对直播视频使用封面图，用户点击后再加载播放器；
在线客服延迟到页面主要内容显示后加载；
删除长期不用的像素代码和重复统计代码；
定期检查第三方脚本是否出现超时。
Google建议网站重点关注LCP、INP和CLS，其中良好体验目标包括LCP不超过2.5秒、INP不超过200毫秒、CLS不超过0.1，并以大多数真实访问者的数据作为判断依据。
结语
网站打开慢往往不是单一问题，而是图片过大、脚本阻塞、样式冗余、字体过多、视频提前加载和第三方代码叠加造成的。对于国际电商和直播带货网站，正确做法不是盲目删除图片与视频，而是让重要内容先出现，让非关键内容在需要时再加载。
