Tistory 基本皮肤性能测试

在轮流应用 Tistory 免费皮肤时，这次我决定自己制作一个皮肤。

在制作皮肤的过程中，我一直在 Google 的 PageSpeed Insight 上进行测试，但无论如何，分数都很难超过 50 分。

选择了一个已经预先优化的皮肤，想法是修改该皮肤的 CSS 可能更容易，因此决定测试基本皮肤的性能。

1. 测试环境

为了保持测试环境的一致性，我新做了一个博客。

该帖子中间包含了一些文字、10 张照片和 1 张地图。

使用的插件有 YouTube、响应式网页皮肤图片最小化、插入之前的发布文章和更多分类文章，共 4 个。

测试使用了 Google 的 PageSpeed Insights。

可以查看该地址的性能、搜索指标等多种内容。

2. hello world

想要测试除了皮肤的 HTML 和 CSS 之外的基本服务器响应时间。

即使对皮肤进行再多优化，如果服务器响应时间慢，也无济于事。

因此，在皮肤编辑中删除了所有 HTML、CSS，只输出标签为 <h1> 的 hello world。

像下面这样....

这样做之后，访问该地址，可以确认仅输出了 hello world!

然后在 PageSpeed Insights 上输入了这个地址。

1) 移动环境

在移动环境中的性能得分为 78 分。

问题是该页面仅简单输出 h1 标签的 hello world!

这意味着即使对网站进行了再多优化，只要使用 Tistory 的服务器，移动环境中的得分超越 78 分是不可能的。

下面是测量项目的详细内容。

从第一内容绘制到最后内容绘制大约需要 3.3~4.2 秒。

简单来说，服务器加载 CSS、min.js 等 JavaScript 需要 1.7 秒，仅输出 hello world 需要 4.1 秒。

在移动中优化可能需要妥协。

2) 桌面环境

在桌面上的分数几乎接近 100 分。

可能是因为在移动头文件的情况下，为提供移动环境而传输了更多 JavaScript。

具体内容不太想了解，就跳过了。

接下来，我们测试一下各个皮肤的分数。

需要注意的是，以下分数不是绝对值。

测试时的服务器环境、网络环境可能导致分数有所变动。

3. 皮肤测试

1) Letter

2) Magazin

3) Book Club

4) #1

5) #2

6) Odyssey

7) Poster

8) Portfolio

9) Square

10) Whatever

4. 结果整理

1) 皮肤简单评分比较

手机和桌面上得分最高的是 Square。

这可能是因为它是基本皮肤中最简单的。

2) 移动详细评分项

3) 桌面详细评分项

13. 结果分析及结论

综上所述，Tistory 基本皮肤的性能处于中等水平。

得分较高的 Square 反而在可访问性和建议上得分较低，而在可访问性和建议上得分最高的是 #1 皮肤。搜索引擎优化由于大多数图片缺少 alt 值而得到 92 分。

如果你对前端有一定的理解，建议修改 Square 的可访问性和建议。如果没有这种经验，选择其他任何一个表现相似的皮肤即可。

移动优化目标设定为 78 至 50 分，桌面优化目标为 70 至 90 分比较合适。

希望你取得好成绩。