咨询下大家，你们都是怎么做性能优化和易用性优化的呢？

作为 Web 应用，网页的加载速度无疑是至关重要的。而这其中，首屏加载更是重中之重。因为加载时间越长就意味着等待时间越长，这样用户流失的几率就越大。上个月末，我上线了自己的独立产品「星光图床」。页面内容也在逐步的迭代，经过几个版本的迭代，资源变得复杂起来，最直观的影响就是加载速度，从体感来讲，就是一句话：没有之前快了！

经过对代码和资源加载等等的分析，然后逐个优化。再尝试了一下生成测试报告：

• stardots.ink 性能报告-PC 端
  
• stardots.ink 性能报告 - 移动端
  
  

这次的报告较之前有了一定的进步，但是就移动端而言，还有挺长的路要走。这次的优化主要内容是：

• 将同步阻塞性的资源改为异步或延迟加载
  
• 减小资源/包体大小
  
• 考虑去除非必要内容
  
• 修复一些影响加载和渲染的 bug
  

另外，Web 站点相较于应用 APP，用户粘性也相对弱一些。就拿最基本的启动来说，应用 APP 直接从桌面点击图标就启动了，就一个步骤。而 Web 站点需要：1.打开浏览器，2.输入 URL，3.点击完成。即便是收藏了书签，省了输入 URL 的步骤，也还有找书签的步骤。

在过去，有不少的产品已然发现了这个问题，因此，他们的产品通常会有一个功能：一键加入收藏夹。到现在，你可能还会在搜索引擎上搜到相关的 js 代码，然而对现代浏览器已经不再有效。时代在进步，产品也在进步，不少的产品开始推出引导浮窗或类似的手段引导用户将网页添加桌面快捷方式...
好在，技术在进步，标准也在进步，浏览器也在进化：PWA 闪亮登场。

PWA，渐进式 Web 应用。这项技术，让你的站点具有 APP 化的能力。一些复杂的计算也可以从主流程剥离出来，做独立计算。这样性能得到了质的提升。从使用的感受来讲，最直观的就是让你的 Web 站点 “像” APP 一样，从一个桌面图标，直接启动。

你可以将重资源做本地缓存，这样启动就能丝滑流畅，而不是像以前一样，即便是从桌面快捷方式打开，也要重新加载一遍。

小小的按钮，大大的作用：

觉得有意思？去体验一下呗： https://stardots.ink

我在这里不过是抛砖引玉，大家都有哪些魔法银弹或者 “奇淫巧技” 不妨来分享分享，一起进步啊

如果大家对星光图床的 PWA 技术实现细节感兴趣，欢迎留言，要是感兴趣的人多，我就再单独开一篇帖子来分享。