博客从能打开到快速:前端性能清单
先测量首屏时间
不要凭感觉优化。使用浏览器性能面板记录首次内容绘制、最大内容绘制和交互延迟,找到真正占用时间最长的资源。
给图片一个明确尺寸
封面图和文章图片应使用合适尺寸,并设置宽高属性,避免加载后页面跳动。响应式页面优先按实际显示宽度加载图片。
控制 JavaScript 数量
删除未使用的库,脚本使用延迟加载,统计、评论和搜索等功能按需引入。动画只是点缀,不应阻塞内容渲染。
优化字体与样式
使用系统字体或只加载真正需要的字重。CSS 放在头部,小图标优先使用字体或 SVG,避免为了几个图标加载整套资源。
用好浏览器缓存
静态资源使用版本参数或内容哈希,设置合理的缓存时间。主题更新后要确保访客不会长期拿到旧文件。
最后用移动网络条件重新测试一次。桌面端很快不代表手机用户有同样体验,而博客的很多读者都在手机上看文章。