一.减少http的请求数量

每当有人访问您网站上的页面时，浏览器都必须请求大量文件。这些HTTP请求直接影响网页的加载速度。通常，更少的HTTP请求意味着网站加载速度更快。现在，网站的加载速度是搜索引擎排名的重要因素。平均而言，媒体页面加载速度为谷歌的10个结果只是1.65秒。

1.删除不必要的图像

个人认为更多文件意味着更多请求。

删除一些项目中不在使用的图片，当让不要为了减少HTTP服务器请求而牺牲图像。这个想法是删除不必要的图像，而不是减少通常使用的图像数量。

2. 合并CSS和JavaScript文件

就像最小化一样，组合CSS和JavaScript文件也是减少网站总文件大小的一种很好的技术。

这个想法是将所有CSS和JavaScript文件合并为一个单独的文件。
例如，如果您的网站有4个外部JavaScript文件和3个外部CSS文件，则意味着7个请求。
但是，如果将3个CSS文件合并为一个CSS文件，并将4个JS文件合并为一个JS文件，则您的网站将仅发送2个请求，而不是7个。

3. 合并图片

当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能

4. 充分利用缓存

可以把一些数据写在浏览器的缓存中，这样我们获取一些数据就不需要向浏览器发送请求了

二.加快请求速度

预解析DNS
使用HTTP2.0
并行加载

三.图像的处理

1.缩小图像尺寸

我们可能已删除了合理数量的图像。但是，仍然会剩下很多图像。而且您无法摆脱它们。
因此我们的下一步是减少要在网页上使用的图像的文件大小。

我们可以使用shortpixel之类的工具来压缩所用图像的大小。此外，强烈建议使用网络友好的图像。例如，尽可能使用.jpg图像而不是.png。

2.图片懒加载

在一些图片比较多的网站图片是非常多的，如果我们在打开网页的一瞬间就把网站的所有图片加载出来，很有可能造成卡顿和白屏的现象，用户体验变得极其的差。

因为图片真的很多，一瞬间就把网站的所有图片加载出来浏览器短时间内根本处理不完，但是我们打开网站的那一瞬间仅仅只能看到视口内的图片。只去加载视口内的图片，就是懒加载技术。

3.图片预加载

图片预加载，是指在一些需要展示大量图片的网站，将图片提前加载到本地缓存中，从而提升用户体验。

4.渐进式图片

渐进式图片的意思是在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高，尺寸很小，加载很快。在两者之间我们也可以根据需要显示不同画质的版本。

四.利用Webpack来优化前端性能

Webpack详细解说链接: 如何利用Webpack来优化前端性能的？

五.CSS提高页面性能

CSS提高页面性能详细解说链接: CSS如何提高页面性能？

六.减小资源大小

1.压缩html,css,js,图片等文件（Webpack可以进行）
2.开启gzip进行压缩

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

前端如何进行性能优化的方法（详细版本）