无JavaScript其实没有很重要
随着各种静态生成技术的演进,和某种对于“三绿” 的病态追求的神秘的扩散,越来越多的最新最热的个人网站开始标榜自己no js,即可以在禁用js的环境下渲染加载所有内容。同时,css的使用也开始越来越“克制”,有大量模板和网站开始使用纯黑,纯白这种大面积“性冷淡”风格来达到良好的Lighthouse分数。
首先先放本站的分数:

没有很好,但是也没有很差,勉勉强强三绿。个人来说,我非常讨厌那种“死人白”“死人黑”的设计,看起来很无聊而且实际上也对眼睛不友好,这一点都不现代。当然,如果你要做Plain HTML + 衬线字体的话我还是喜欢的,那是另外一种retro的风格,不在攻击范围内。过度使用神秘js动画的网站我也不喜欢,这个是真会导致全球变暖,有些那种hexo或者wordpress喜欢在背景放个线条连连看,鼠标放上去会连线的动画,有些实作的不好的你看久了会导致浏览器OOM并且吃满CPU,用电脑风扇给你造成物理伤害;有的喜欢搞鼠标点点飘出来社会主义核心价值观,网不好的时候就会飘图裂了的图片,令人忍俊不禁;还有的网站喜欢放个硬加载和背景音乐,即使内容已经加载完成也要加载2秒放个动画,当然这些不是今天主要探讨的点。
网站是给人类看的
无论是SEO还是无障碍,都是为了让人类更好地访问和使用网站,而不是为了让搜索引擎或者辅助技术更好地理解网站。过度追求no js和极简设计,都会导致可读性和可用性的降低。如果你选择了no js,你就不能使用overlayscrollbar来优化滚动条,不能使用平滑滚动库来做平滑滚动,失去了全部动态加载的能力。当然这些都是可选项,但是确实会让人看起来不舒服。做no js还会导致你的网站只能依赖form和某些遥测特性来实现获取/提交数据,能用,但是非常别扭。
还有的网站,为了体现使用新特性的性能提升,直接把布局做的非常简单,甚至近似于plain HTML,那性能能不好吗?但是这完全就是没有意义的。你获得了性能,但这一切值得吗?
给图片加模糊
这是一个非常早就有的实践,一个模糊的placeholder比直接慢慢加载一个大图好上非常多。目前来说最佳的实践还是blurhash,但是因为这是在客户端计算的,所以no js不能使用。很多no js网站根本没有想过其他方法来优化,就导致图片的时间一下子回到了十年前。哦对了,有些网站甚至没有处理CLS,导致大图加载的时候直接影响页面布局,体验极差。
处理可能重复播放的动画
CSS动画目前是不能做到仅播放一次的,你必须使用js来帮助其只播放一次。有些网站的css动画会在每次点击时都播放,即使没有产生任何交互,这是反直觉的。如果你一定要no js,那这方面也是做不到的。
处理加载等待
在没有js的环境下你连loading都做不了,只能希望用户的网好到秒切换。
no js并不等于性能好
如果你喜欢在网站后面放一个巨大无比的背景,那么LCP也会爆炸。性能优化是一个系统工程,不能只看某个指标或者某个技术。过度追求no js和极简设计,并不能解决大部分问题。