Tistory 基本皮肤性能测试

我把 Tistory 的免费皮肤一个个套用着试了一圈，这次干脆决定自己来做一个皮肤。 

在制作皮肤的过程中，我一直用 Google 的 PageSpeed Insights 来测分，但无论怎么弄，都很难把分数提到 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 分之间会比较现实。

那么，祝你一切顺利。