关于首页卡首屏这个让人脑壳瓜子疼的老大难问题，其实不单单是咱们普通用户看着干着急，就连好多做网站搞技术的，也是天天琢磨着怎么才能让这个首页，哎对，就是一打开网站那个最先蹦出来的页面能够嗖嗖地一下子就跑到大家眼睛前头来，一点都不磨磨蹭蹭的！毕竟，现在的人哪，谁还有那么多闲工夫在那儿等？是不是？所以说，把这个首页卡首屏的时间使劲往少里抠，往短里缩略，那可真是太重要了，可不是一般二般得重要，简直就是网站能不能留住人的第一道坎儿，过了，人家才有可能继续看下去，过不去，啪嗒一下关了，找别家去
那这首页卡首屏到底是个啥意思？让我想想啊……，想起来了！它大概、可能、差不多就是说，咱们用鼠标也好，手指也好，点那个网址，或者点那个应用里头的图标，然后一直到那个咱们最想看的，那个最重要的，唉呀妈反正就是一打开就盼着看到的那个首页最上头、最先出来的那一块实实在在的内容，能清清楚楚、完完整整地显示在咱们眼前，这个过程，对，没错！就是这个从点下去到看见东西的整个过程，所花掉的那一点点时间，万一这个时间稍微那么长了那么一丁点儿，超过了那么一小会儿，咱们就会觉得，哎呀烦死了，怎么还没出来？这破东西是不是卡住了？这种让人心里头直痒痒、干跺脚的感觉，那就是咱们平常说的“卡首屏”
要搞定这个让人着急的卡首屏问题，有这么些门道，我给你数数看啊：
1. 图片可得好好弄弄！ 你们知道吗？这图片，有时候那些设计师为了好看，做出来的图片老大老大的，一个图片恨不得有好几兆，甚至十几兆那么老重！你想，那么老重的东西，从服务器那边慢吞吞地挪，哦不，是传过来，能快得了吗？肯定快不了！所以，把那些图片，特别是首屏上必须要显示的图片，给它“瘦瘦身”，就是把.file size（唉呀妈我也不知道中文咋说那个词儿，就是那个文件大小！）给它弄得小一点，小一点再小一点！用那个叫什么……哦对，压缩！用压缩工具给它压一压，最好是那种压完了看着跟原来没啥大区别的压缩方法；还有，现在不是有种叫WebP的图片格式，听说比以前那些老格式像是JPG、PNG啊什么的，同样清楚的情况下，能小好多好多！另外，可以试试“懒加载”，就是说，先把首屏能看到的图片赶紧弄出来，那些滚一滚鼠标轮子才能看到的下面的图片，可以慢慢慢慢地，等咱们看的时候才开始传，这样一开始的时候，脑子……也就是服务器跟浏览器就不用一下子干那么多活得
2. 代码也不能乱糟糟的！ 有回我瞅见，有些程序员小哥哥小姐姐写代码，噼里啪啦写了一大堆，也不管有用没用，一股脑儿全塞进去了，有些代码，调来调去的，可复杂了！那些没用的，可以切掉的Css样式啊还有脚本，就别让它们跟着首屏一块儿加载凑那个热闹了！还有现在都讲究那个什么“分割代码”，就是把首屏必须得有的基础样式代码、运行功能的小脚本，跟那些可要可不要、或者 later 才用得上的东西分离开来，让浏览器先把最重要的那一点点赶紧处理了，剩下的慢慢来，不着急！甚至，还有个法子，叫“关键CSS内联”，就是把首屏渲染的时候，眼睛一闭一睁必须得有的那些Css样式，直接写到那个HTML文件里头，这样浏览器不用自己再专门跑出去拐个弯儿找CSS文件了，那肯定又能快一丢丢
3. 别让网页的东西一拥而上全都同时塞进来！ 这就好比开车堵马路，如果上班高峰，大家都想一块儿往前挤，那肯定堵得水泄不通，是不是这个理儿？浏览器加载网页资源也是这么个情况！所以，尽量让那些不是特别急着立马就要用上的外部老天爷知道是什么的各种资源，像是各种奇奇怪怪样子的字体——就是那些文字看起来漂漂亮亮的效果——还有一些第三方的统计工具，或者不着急启动的插件小广告之类什么咚咚锵……唉记不住那么多了！可以让它们稍微等一等，等首屏都舒舒服服地站稳脚跟了，稳稳当当显示好了之后，它们再慢慢来，不就行了！或者也可以问问浏览器，让浏览器自己瞅情况去加载那个文件，就是用个啥……哦一个叫动态创建的标签去调用它，或者用那个async、defer……算了，不说那些专业词儿了，反正就是别让那群“不着急”的把道儿给占了！
4. 服务器那边的速度也得跟上趟儿！ 这个，咱们普通用户可能自己没法子直接动手去改，得求着那些网站的运维大哥、或者帮忙建网站的代理商给弄弄！你想想，如果服务器本身就慢吞吞的，跟个睡着了的老蜗牛似的，别人怎么催也快不了，就像是那个水池子放水，龙头如果本身就开那么一点点，那个水，滴答滴答的，猴年马月才能放满一池子呢对不对？所以得让服务器壮实在了，跑得快一点！还有那个叫C-D-N的东西……唉呀妈天天听人家说，好像是能把网站的水一下子放到好多个地方去，全国甚至全世界到处都有，咱们点的时候就从离咱们最近的那个地方拿水——哦不，是拿数据，那肯定嗖嗖地快对？这个CDN现在可流行了，必须用上，不用白不用（哦不对，是肯定得花钱买好的用才行的！
5. HTTP请求也别老是跟那儿要东西烦人家！ 浏览器跟网站服务器之间通信，有点像两个人聊天借东西，浏览器说哎给我个这，服务器说好给你；浏览器又说哎给我个那，服务器又说好给你……每次这么你一嘴我一嘴地要，也挺费工夫的！所以，如果情况允许的话，可以把那些东一个西一个小零碎的CSS文件，或者脚本文件，给它们凑吧凑、打打包，变成一个……或者顶多两三个大包！这样一来，要东西的次数不就少多了？服务器那边也能安安生生地一次性把东西给全了，对！还有那个“缓存”也得好好利用起来！就是说，咱们头一次把东西拿过来之后，浏览器偷偷存起来一部分，攒起来，下次再要一样的或者差不多的东西，就不用白不用……哦不，是就不用再麻烦服务器重新拿了，直接从自己肚子……哦不对，是本地存的地方翻翻，自己拿出来用，那得多快
大家老问，怎么知道自己家网站首屏快不快，或者说那个卡首屏问题有没有解决好一点？这个我还真门儿清！有好几个免费的、在线就能用的小工具蛮好用的！我想想都是啥来着？哎呀……让我多琢磨琢磨……！那个谷歌家的，叫 的东西挺好用的，直接把网址输进去，然后它就呜啦呜啦给你分析一通，优点是啥缺点是啥，恨不得把你网站扒层皮似的看得清清白白，还告诉你怎么做能得高分；国内还有个360，哦不，是站长工具里也多半有类似测速、测性能的这种分析项目；浏览器自己也挺能干的，那个按F12呼出来的开发者……啥啥东西控制台里头，那一块，好像可以录一段页面加载的一整个过程，一条一条的 线给你看得明明白白……唉呀妈反正工具挺多，自己去摸索试试总能找到几个趁手的用！
首页卡首屏这个问题，就象是我们房子进门的门面或者脸，要是进门第一眼看到的就是乱七八糟、还得等老半天才慢悠悠出来景象，那整个体验一下子就完了，彻底砸锅了！所以，从图片上、代码上、加载顺序、后端服务器快不快、缓存怎么设啊等等好多好多个角度，一点一点地改进，一点一点优化，这个过程可能麻烦点，得有点耐心，像绣花似的慢慢抠，但只要不停下改进的脚步，一定能越弄越好，让大家一打开眼就见喜，看啥都顺顺利利的！
