3 KB 的博客首页，我是如何做到的？

[kkocdko]

迫于权重没有 V 站高，而且注册不满 300 天，希望各位到 本人博客 去看看，顺便求个 Star：kblog - GitHub

这并不是一篇网络上泛滥的“前端体积优化”文章。

百尺竿头，更进一步！本文以我的博客为例，介绍极限控制页面体积的奇技淫巧。

成果预览

眼见为实，本人博客首页 的网络传输总体积为 2.6 KB。

仓库是 kblog - GitHub ，各位给个 ⭐ 呗~

[jellybool]

这域名劝退

[kkocdko]

啊哈？域名怎么了，太长了么

[anxn]

SEO 友好吗？

[kkocdko]

@anxn 非常友好，虽然是 SPA，但生成的依然是静态页面（可以试试禁用 JavaScript ），但是国内的百度之流实在没办法。
由于这个域名是新换的，所以目前收录还在进行，之前用 GitHub Pages 的时候 Bing 和 Google 的收录都不错

[stimw]

确实很快啊...单纯作为博客来说体验是不错的...

[xiaopc]

提一句，CSS 通配选择器性能可不高

[wtks1]

作为博客来说，这个加载速度相当优秀了，感知非常明显

[keith1126]

很棒的文章，前端原来可以玩得这么有趣

[kkocdko]

@xiaopc 确实，平常当然不会这么写，然而为了追求极限体积，牺牲那不到一毫秒的解析时间还是值得的~

[hronro]

强啊，我当年高中毕业的时候，连 Hello World 都不会。

顺带一说，你都上了 HTTP2 + Server Push 了，其实不打包反而性能更好

[Kmmoonlight]

东西挺好 就是 右上角那个 返回顶部的按钮 好像只有在顶部的时候才会出现

[h404bi]

精简的最终归宿终将是 raw txt 。写得挺好的

[kkocdko]

@hronro 不打包主要是缓存粒度的问题，这里打包后体积很小，经过测试，性能还是略有优势的。

另外，使用 gzip 或 brotil 压缩的时候，打包后压缩率会比多个文件分别压缩要更好一些~

[kkocdko]

@Kmmoonlight 向下滚动顶栏隐藏，向上滚动一下，顶栏就会出现了~

[ZeawinL]

看看能不能混个友联 https://someexp.com/

[kkocdko]

@ZeawinL Yeah, https://kkocdko.site/about/#links
给你的 Repo 发了个 PR，如果没问题的话就合并下呗

[qq316107934]

Lighthouse 的 Performance 和 Best Practice 已经 100 了，可以的；才高三毕业，未来可期啊

[xtx]

厉害厉害，高考考得怎么样

[shuax]

强啊，无敌

[cue]

考得怎么样？

[ajaxfunction]

不错不错，值得学习

[jookr]

https://fatfatpig.com/
这个博客比楼主强一丢丢

[7gugu]

cool👍不过为了高速加载还是摒弃了一部分的易用性，感觉有得有失吧。

[1if5ty3]

楼主考的如何呀，想报哪个学校呢。

[ijrou]

哦，首页博客啊

[kkocdko]

@cue @1if5ty3
考砸了 emmm，上不了 211 。。。别提了别提了

[kkocdko]

@jookr 也不错呀

[zmc]

用过楼主精简的迅雷很不错，现在怎么没了？

[youthcould]

@zmc 对啊，我说怎么这么熟悉呢

[lysS]

30ms 和 100ms 能有什么区别。。。。

[Austin2035]

我的首页是 12kb，但是加载速度比你快的多了。

[v2k9]

如果要极限控制主页体积，只放超链接，不加任何特效不就够了吗？

为了速度，这种牺牲大部分性能和渲染的尝试的意义是什么？

[kkocdko]

@lookcos 我没钱买国内的服务器啊😆

[encro]

我以为 UV 3K 呢

[kkocdko]

@v2k9 “V2EX 是 way to explore 和 way too extreme 的缩写。前者是我们每天都产生的探索世界的好奇心，而后者，是我们将一件事情做到极致的态度和决心。”

[Lemeng]

强强，支持一下

[cyrbuzz]

支持一下。

有几个疑问：

1.为什么将所有资源打包在一起是一个比分块走的更远的选择？一般来说除非加载的这个文件所有内容都会在当前页面立马展示出来否则的话并没有感觉到比分块更好的地方？

2. 直接写 data URL 的缺点很明显，不利于维护。

3. 分域名加载区分移动端和 PC 端 CSS 直接可以省一半？

[webshe11]

极客 虽然我自己用不着 但是应当表示支持

[iPhone9]

你用的 node 几，我刚刚运行就报错了。

[kkocdko]

@cyrbuzz
1. 首先，当前的代码已经非常精简，用 Chrome 的 Coverage 工具可以看到，首页的代码利用率已经达到了 78%，分块并不能带来明显的改善。其次，这样打包能让生成的静态页面更简练，页内跳转的时候加载量更小一些。

2. 所以我并没有选择用 data-xxx 自定义属性。

3. 这么做只节省了不到 70 个字符（可以看下源码，在 CSS media 查询的块里头）。相比于增加的复杂度，以及域名不同带来的 SEO 优化问题，个人认为当前方案更好些。至于使用 UserAgent 判断用户设备，这就无法使用静态托管实现了。

总之，的确是有很多可以继续优化的地方。但是很多时候这些优化方法都需要动态特性，都掣肘于：我想白嫖 Vercel 的免费静态托管。

[kkocdko]

@iPhone9 具体报了什么错？这边 Fedora 34 + NodeJS 16 正常。也许你用的是 14 ？我试了下，14 好像不支持 String.prototype.replaceAll
你可以升级 node 或者代码改为使用全局正则来解决：.replace(/#/g, "%23");

[iPhone9]

是的，我用的 14，就是这个错误，我改成 replace 就行了

[timwu]

速度确实飞快，博客部署在哪里？
另外，作为奇技淫巧的补充： https://instant.page/
欢迎访问 https://wzw.pub
测个速，我这域名应该比 LZ 要好一些。。

[irytu]

顺便做成 PWA 咋样

[iPhone9]

@jookr 这服务器是在哪里，多少钱一个月。

[DiamondYuan]

似乎没有 minify ?

[iPhone9]

lz 的服务器是哪里买的，ping 值很低。

[LiKanKan]

小白表示 头一回这么快打开一个个人博客

[harwck]

我的 4.3k ，感覺也差不多

[Cbdy]

赞，很快

P.S. 反馈一个交互上的小 Bug，当在第一页 /最后一页的时候，还是可以点击向前翻页 /向后翻页按钮，但实际起的是似乎是刷新效果

[poorcai]

不错，样式也喜欢，点了个 star

[lunatic5]

速度是真快

[SilentDepth]

@xiaopc #6 有实验数据可以支持这个结论吗？

[yiqiao]

楼主才高三啊，🐂🍺

[vcode]

牛批

[shuxhan]

y1s1，能优化到这个地步很牛逼了，点个赞，我的也只是简单做了静态化处理，然后尽量减少图片的存在。https://shuxhan.com

[JoJoJoJ]

快是快，但是这么丑怎么用

[RockShake]

已经优化的不太像 Material Design 了

[rebnonu]

弟弟牛逼，来北航把

[misaka19000]

贴下我的，刚刚看了下首页大小是 4.8kb

https://www.nosuchfield.com/

[kkocdko]

@RockShake 确实。。。我也觉得有点违背 MD

[uricc]

快是快，但是这么丑怎么用

[goodryb]

看了下博文好像都没有日期

[cheung]

羡慕你的 ID，不会有人跟你抢！！

[hiplon]

分享我的 https://vnf.cc 无 js，好像也是 10kb 以内，lighthouse 好像接近 100 分

[zcjfesky]

挺好的，别理楼里的杠铃们，加油，后生可畏

[xiaopc]

@SilentDepth
https gist github com xiaopc 4546b4d38ce9f57969c5eb48423ed354
（没验证手机号，发不出来地址）
不过现代浏览器已经对通配选择器有很大的优化了，在大部分简单的页面上，一长串复杂选择器反而比通配选择器更慢

[kkocdko]

@xiaopc
1. 用 JS 动态生成内容比较好些，省得写一大串。
2. CSS 选择器的性能一直以来都有争论，样式更改导致的重绘才是重点。如果受影响的元素太多，使用通配选择器会导致不必要的，且几乎无法通过优化避免的计算。
3. 这个项目的大多数页面，元素数量甚至只有两位数，且少有样式更改的动作，几乎所有元素都只会被渲染一次。相较于牺牲这一点点性能，扣出几个字节的体积更加重要🤣。

[stkstkss]

我放个图片多少 kb 啊

[stkstkss]

优化方法写出来???

[7gugu]

@stkstkss 楼主写博文里面了。

[AllenHua]

还是高中生，惭愧惭愧，楼主未来可期。

但我第二次访问链接被重置

[xiaopc]

@kkocdko
这个测试页面参考的是「"The CSS Universal Selector Is Slow And Should Be Avoided" - Yet Another Lie 」（发不出链接🌚），作者测试的结果是通配选择器反而更快...
根据 ta 的测试代码，改成了一个通配选择器更慢的场景。至于为什么不用 js 生成，当然是为了控制变量，排除 js 的性能开销。
不过确实，CSS 解析时间不该是页面性能优化的重点。
（ Vercel 在国内部分地区访问速度越来越慢了

[xrr2016]

强啊👍

[zzzzqqw]

你这个网站经常连不上啊（不挂代理的情况下），体积虽小，速度优势却难显现出来，是什么情况谁知道 @我一下，盲猜是服务器在国外的导致的

[xiaopc]

@zzzzqqw 因为在 Vercel 托管的，从本月初起 Vercel 在内地的可用性急转直下（手头甚至被🧱了一个域名，DNS 污染）

顺便在楼里问下，有没有内地访问速度快点的静态文件托管服务啊

[kkocdko]

@xiaopc 呐？这会导致我的域名也被墙么？有点慌。
coding 的那个托管好像还行，腾讯的 9 元每年要备案。。。gitee 最近因为百年的事似乎不让开通

[SomeBottle]

很有意思的文章，star 奉上~

[v2esand]

体验很好

[alphanow]

在 kb 级别的体量下，其实文件传输速度的重要性已经小于连接延迟了。托管在 github 再套个 jsDeliver 的效果可能更好。

[pytth]

www.likeyuns.com

[kkocdko]

@alphanow 可是能怎么套？ jsDelivr 没法自定义域名啊？

[mlboy]

发现作者的 NB 之处是今年高考

[leusion]

@jookr 老哥你的图挂了 https://fatfatpig.com/seo/

[kkocdko]

@xiaopc 今天换上了阿里云的 OSS，似乎还不错，我这边 ping 是 20 ms，香港的服务器免备案，每月 5 GB 免费流量够用。
国外我试了下 Vercel 比阿里云香港更快，所以境外解析到 Vercel，境内用阿里云 OSS 。
除域名外，0 元完美白嫖~