在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~

如何对图片加载进行优化是前端经久不衰的话题，也是工程调优的一小部分，大部分业务场景下对图片元素的展示都是直接使用原生的img标签，而NextJS封装的Image组件可以说是图片加载的典范

next.js 建议我们使用 next/image 渲染图片： Next.js 在这个组件内部对图片进行了缓存处理，接下来我们通过阅读源码对这个过程进行解读。

我在做一些`H5`单页（活动页）的时候，像我这种最求极致加载速度，且不喜欢用第三方库的人，所以决定自己动手做一些`无依赖`、`精简高效`的东西，然后按需应用在实际项目中，同时为了比百度上搜到更好用的代

深夜，一阵刺耳的手机铃声把我吵醒，我迅速的把手机按成静音，看下屏幕，是我几年前带过的一个妹子的电话，看着熟睡的老婆孩子，我蹑手蹑脚地走到厨房接通了电话。 一接通，就传来一阵哭泣声：“师傅，我找不

Chrome Devtool Performance 是大家常用的页面性能分析工具，当你使用它来分析页面加载性能的时候会生成如下图所示的报告。 图中包含了以下几个重要的时间点：DCL, L, FP, FCP, FMP, LCP。这里我把前两个和后面几个分开来讲，因为它们分属于不…

将项目中新增/修改的图片文件自动转换成webp格式并提交，在这里面学习git的钩子函数，node的子进程函数execSync等

图片压缩是一个博客系统很常见的需求, 个人站点「昆仑虚」目前使用的是 TinyPNG 提供的 API 来实现图片压缩的, 偶然间看到了 sharp 方案...

大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等 | 副业赚钱~ 「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、