自定义列表CSS类是否影响WordPress页面加载速度？如何判断及取舍？

一、怎么判断这些样式对加载速度的影响？ #

• 看CSS文件体积变化：15个这类自定义类，每个新增的代码量大概几十字节，总增量也就几百字节——对于现代网络环境来说，这点大小完全不会拖慢加载速度。你可以直接查看自定义CSS文件的总大小，对比添加前的数值，差异几乎可以忽略。
• 检查渲染性能：打开浏览器开发者工具的「Performance」面板，录制页面完整加载过程，看渲染阶段有没有出现异常延迟。但这类仅通过:before伪元素添加文字符号的样式，没有复杂的计算或绘制逻辑，对渲染性能的影响微乎其微，除非你的页面有成百上千条列表项。
• 对比加载时长：用浏览器「Network」面板，分别查看添加这些类前后CSS文件的加载时间，你会发现几乎没有差异——CSS是并行加载资源，这点体积变化根本不会影响加载进度。

二、要不要移除这些自定义列表类？ #

完全没必要，除非你的页面存在以下极端情况：

• 页面内有**大量（数千条以上）**使用这些自定义类的列表项，可能会在渲染时产生微小的性能波动；
• 你的自定义CSS文件本身已经异常庞大（比如超过几十KB），且你正在极致压缩代码。

如果想优化，更建议提取公共样式减少重复代码，比如把所有自定义列表的公共样式抽出来，只单独定义每个类的符号内容：

/* 所有自定义列表的公共样式 */
.entry-content ul.custom-list {
    list-style: none;
}
.entry-content ul.custom-list li:before {
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    margin-right: 1em;
}

/* 单独定义每个列表的符号 */
.entry-content ul.mango-list li:before { content: '\🥭'; }
.entry-content ul.orange-list li:before { content: '\🍊'; }
/* 其他自定义列表类同理 */

这样做主要是提升代码的可维护性，对加载速度的优化效果非常有限，但胜在更简洁。

内容的提问来源于stack exchange，提问作者Kelsey Todd