首屏作为直面用户的第一屏，其重要性不言而喻，如何加快加载的速度是非常重要的一课。
本文讲解的是：笔者对自己搭建的个人博客网站的速度优化的经历。
效果体验地址：
1. 用户期待的速度体验2018 年 8 月，百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到：页面的首屏内容应在 1.5 秒内加载完成。
也许有人有疑惑：为什么是 1.5 秒内？哪些方式可加快加载速度？以下将为您解答这些疑问！
移动互联网时代，用户对于网页的打开速度要求越来越高。百度用户体验部研究表明，页面放弃率和页面的打开时间关系如下图所示：
根据百度用户体验部的研究结果来看，普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢，用户就会失去耐心而选择离开，这对用户和站长来说都是一大损失。
百度搜索资源平台有 “闪电算法” 的支持，为了能够保障用户体验，给予优秀站点更多面向用户的机会，“闪电算法”在 2017 年 10 月初上线。
闪电算法 的具体内容如下：
移动网页首屏在 2 秒之内完成打开的，在移动搜索下将获得提升页面评价优待，获得流量倾斜；同时，在移动搜索页面首屏加载非常慢（3 秒及以上）的网页将会被打压。
2. 分析问题未优化之前，首屏时间居然大概要 7 - 10 秒，简直不要太闹心。
开始分析问题，先来看下 network ：
主要问题：
第一个文章列表接口用了 4.42 秒
其他的后端接口速度也不快
另外 js css 等静态的文件也很大，请求的时间也很长
我还用了 Lighthouse 来测试和分析我的网站。
Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
未优化之前：
上栏内容分别是页面性能、PWA（渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO 五项指标的跑分。
下栏是每一个指标的细化性能评估。
再看下 Lighthouse 对性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间：
从上面可以看出，主要问题：
图片太大
一开始图片就加载了太多
知道问题所在就已经成功了一半了，接下来便开始优化之路。
网页速度优化的方法实在太多，本文只说本次优化用到的方法。
2.1 前端优化本项目前端部分是用了 react 和 antd，但是 webpack 用的还是 3.8.X 。
2.1.1 webpack 打包优化因为 webpack4 对打包做了很多优化，比如 Tree-Shaking ，所以我用最新的 react-create-app 重构了一次项目，把项目升级了一遍，所有的依赖包都是目前最新的稳定版了，webpack 也升级到了 4.28.3 。
用最新 react-create-app 创建的项目，很多配置已经是很好了的，笔者只修改了两处地方。