当过大的图片、缓慢的主机等明显问题都解决后，其余的速度提升就要从前端代码着手，即浏览器如何接收、读取和显示您的页面。在 ANGLIA，每个项目都会依循一套固定清单。以下是影响最大的几个项目。
1. 聪明地压缩与合并
代码压缩 (Minification) 会移除 CSS、JavaScript 和 HTML 中的空格、註解和多余字元，通常能在不改变页面外观的情况下明显缩小档案。配合伺服器端压缩，传输速度更快。不过合并档案时要小心：在现代网络环境下，几个组织良好的档案，有时比一个庞大並阻塞其他资源的合并档案载入得更有效率。
2. 移除阻塞渲染的资源
浏览器预设会暂停渲染，直到下载並处理完页面头部的 CSS 和 JavaScript。解决方法是将首屏所需的少量关键 CSS 内嵌，其余稍后载入，並为非必要的脚本加上 defer 或 async 属性。访客能更快看到内容，直接改善 LCP 分数，详情可参考我们谈核心网页指标与 CDN的文章。
3. 延迟载入摺位以下的内容
位于三个萤幕之外的图片或影片，在访客捲动到该处之前根本无需下载。原生延迟载入 (Lazy Loading) 会等这些资源接近可视范围才载入。但请注意：切勿对主横幅或首屏内容使用延迟载入，否则会拖慢访客最想看到的部分。关于图片格式与尺寸，可参阅我们有关网站图像优化及图片压缩的文章。
4. 管好网页字体
自订字体会增加不少负担，尤其是拥有数千字的中文字体。只使用所需的字重，尽可能裁切字体子集，並设定后备字体，让文字即时显示，而不是在字体下载期间一片空白。这同时能避免最终字体载入时版面跳动，有助改善 CLS 分数。若版面位移由其他原因造成，我们有关 CSS Grid 与 Flexbox 错误的指南是很好的补充。
5. 善用快取，让内容更接近用户
回头客不应重复下载沒有变动的档案。请设定合理的快取标头、为档案加上版本号以确保更新能顺利生效，並透过内容传递网络提供静态资源。我们的快取策略与 CDN 优化文章有更详细的说明。
6. 减少 JavaScript 体积
笨重的前端函式库是互动反应迟缓的常见原因。选择合适的方案相当重要，详见我们比较 jQuery 与现代框架的文章。很多时候，最快的方法就是不载入页面用不上的代码。
为何定制开发更容易做到
这些优化大多需要存取底层代码，而这正是模板平台往往限制的部分。通用主题附带大量您可能永远用不上的功能和样式，这些多余的负担很难移除。这也是我们阐述定制网站长远表现通常优于现成模板的原因之一。
您目前的网站能通过这份清单吗？欢迎向 ANGLIA 查询前端审核服务。我们累积逾 20 年经验、完成超过 5,000 个项目，深知哪里最容易找到速效改善。请浏览我们的网页设计服务页面，或发送讯息开始讨论。
