开始折腾：被生活逼着跑起来
我这个人就是闲不住，前阵子看着各种游戏官网一个比一个花哨，但是打开慢得要命，心里就窝火。尤其是那个加载动画，转个没完，用户体验差到家了。我当时就拍了拍大腿，我说不行，我得自己弄一个，就算是个假游戏，它的官网也得干净利索。
我的目标很简单：极致的加载速度，一眼就能看明白内容，而且手机端必须舒服。我把这个项目起名叫“生命竞赛”，听起来有点大，但就是想借这个名头，逼着自己把一个完整的项目流程跑一遍，不给自己留后路。
从哪里开始？我没去找什么复杂的框架，我就是图个快。我决定用最老实的方式——纯静态网页，HTML5加CSS3，一点点硬写。我连设计稿都没画，直接在草稿纸上圈圈画画，把网站的基本结构给定了下来：顶部的导航栏、中间的巨幅宣传图、下方的核心介绍区，以及最底下的版权信息。
捋代码，找模板，先跑起来再说
要从零开始写一套漂亮又响应式的CSS，那太耗时间了。我承认，我直接跑去Github上扒拉了一个开源的扁平化模板。我不是全盘照抄，我就是想看看别人是怎么处理栅格系统的，尤其是那个移动端折叠效果，得搞清楚。
我扒下来的这个模板，看着挺顺眼，但是代码里塞了一堆我不认识的JS动画库，我都看不懂。我当时就决定：统统删掉！ 我把所有那些花里胡哨的特效JS文件，一个不留，全部咔嚓掉了。我就是要证明，一个好的官网，不需要那些拖泥带水的玩意儿。
然后我就开始往里面塞内容。我把“生命竞赛”定义成一个追求速度和策略的游戏，所以页面的主色调我选了深蓝和亮黄，看着有种速度感。图片素材我都是自己拍的，一些是城市里高速公路的照片，一些是老式秒表的特写，用PS简单调了个对比度，就直接往里塞了。
- 第一步：处理图片。我把所有图片都用工具压了一遍，确保单张图片大小不超过100KB。这是速度的保证，不能妥协。
- 第二步：定制字体。我发现系统默认字体太丑了，又去网上找了个好看的无衬线字体，但是只导入了常用的那几个字重，生怕拖慢了速度。
- 第三步：重写CSS。虽然用了模板，但是我把所有的ID和Class名都改了，用回自己习惯的命名方式。这就像给别人家的毛坯房重新装修，看着顺眼多了。
被适配问题折腾得够呛
最让我抓狂的还是适配。我在电脑上看着挺完美的，但是一用我的旧手机打开，文字就挤在一起，图片直接撑爆了屏幕。那个响应式布局的逻辑，我来来回回看了好几遍，还是没搞明白哪里出了问题。
我对着浏览器的开发者工具，把屏幕尺寸从320像素到1920像素，一点点拖动，盯着那些错位的元素，那两天我几乎没睡我发现问题出在某个图片容器的宽度上，它用了固定的像素值，而不是百分比。我把所有固定像素的宽度和高度，全部改成了相对单位，这一下才算是松了口气，起码在主流设备上看起来都正常了。
内容区块的设计，我参考了现在流行的“卡片式”布局，把游戏的核心特色，比如“极速挑战”、“策略规划”、“多人模式”这些，都做成了独立的卡片，鼠标放上去会有一个细微的阴影变化。这个小小的交互，我只用了三行CSS代码就实现了，比那些动不动就加载大几百KB库的网站强多了。
为什么这回我没偷懒
我能这么耐心地把这个假官网从头到尾抠完，是因为最近在工作上受了点刺激。我接了个外包，对方要求一个功能巨多，但是又没人用的管理后台。我提议功能精简，先保证核心流程的流畅，结果对方嫌弃我的设计“不够大气”。
我当时就觉得，做东西不能只图面子，得图里子。一个官网，它的使命就是快速、准确地传达信息。花里胡哨都是累赘。这个“生命竞赛”的官网，就是我用来证明“简洁就是效率”的一个实践记录。
当我把所有的代码压缩，合并了CSS和JS文件（只剩那一点点），然后上传到我的小服务器上，第一次打开时，页面几乎是秒开的。看着控制台里那个不到1秒的加载时间，我心里那叫一个痛快。我没用什么CDN，没用什么黑科技，就是老老实实地优化了文件大小和加载顺序，结果比那些大厂的官网还要快。这个实践记录我得好好保留着，以后跟别人争论的时候，我直接把这个官网扔过去，就比速度，别的都不用说了。