Z-Blog 主题性能优化：CSS 和 JS 加载顺序怎么排

2026-10-04 · zblog · 阅读 16

摘要

主题慢，多半不是 PHP 慢，是资源加载排错了。CSS 在 head，JS 在底部这是最基础的规则，也是最常被破的。CSS 放 head 让浏览器尽早知道页面长什么样，避免无样式闪烁。JS 放 body 结尾，避免阻塞渲染。脚本没用完的 D

主题慢，多半不是 PHP 慢，是资源加载排错了。

CSS 在 head，JS 在底部

这是最基础的规则，也是最常被破的。

CSS 放 head 让浏览器尽早知道页面长什么样，避免无样式闪烁。

JS 放 body 结尾，避免阻塞渲染。脚本没用完的 DOM 之前，页面不该等它。

每个 css 文件都是一个额外请求。主题里挂了七八个 css，串行下载，首屏就慢。

开发时拆开写，上线前合并。Z-Blog 主题一般会在 include 里统一输出，合并这一步放那里做。

必须放 head 的脚本，加 defer。下载并行，执行等 DOM 解析完。

别用 async。async 执行时机不确定，依赖顺序的脚本会出错。

jQuery 这类被别的脚本依赖的库，一定用 defer，不能 async。

引外部字体，首次访问要下载几百 KB，还会因为字体没到而用系统字体显示，然后突然切换。

能用系统字体栈就别引。中文站点尤其如此，一个中文字体包动辄几 MB。

首字节时间、最大内容绘制、布局偏移。

开发者工具里都有现成面板。别凭感觉说快了还是慢了，看数。

清缓存，关掉开发者工具的缓存选项，重新加载。

看网络面板里请求数。主题做到 20 个以内算正常。

超过 40 个，先合并再说别的。

所属专题

标签

2026年10月04日 23:04 前后30天 · 点日期看归档

9月4日 9月5日 9月6日 9月7日 9月8日 9月9日 9月10日 9月11日 9月12日 9月13日 9月14日 9月15日 9月16日 9月17日 9月18日 9月19日 9月20日 9月21日 9月22日 9月23日 9月24日 9月25日 9月26日 9月27日 9月28日 9月29日 9月30日 10月1日 10月2日 10月3日 10月4日 10月5日 10月6日 10月7日 10月8日 10月9日 10月10日 10月11日 10月12日 10月13日 10月14日 10月15日 10月16日 10月17日 10月18日 10月19日 10月20日 10月21日 10月22日 10月23日 10月24日 10月25日 10月26日 10月27日 10月28日 10月29日 10月30日 10月31日 11月1日 11月2日 11月3日