在网络如此发达的今天，用户最满意的网页响应时间应该是2-4秒，如果等待超过10秒，99%的用户会关闭这个网页，网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡,所以优化是必须的，那该如何优化呢？

一、减少HTTP请求

首先减少请求的典型例子就是雪碧图(Sprites/精灵图)了,把小图片合成大图片就是精灵图本质，然后通过CSS的background-position背景图片定位即可定位到对应的小图片，各大官网都有运用。

其次是字体图标，这个相对于雪碧图会更加灵活，每新增图标不需要重新换图片，而且颜色可以自定义，但也是有弊端的，就是只能做一些简单的图标，更复杂的还得用雪碧图。

最后，你还可以通过合并JS脚本和CSS样式表实现。

二、使用CDN

内容分发网络（Content Delivery Network，简称CDN）是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。

简单的说就是通过离你最近的节点去访问网站资源，如果是第一次访问节点没有资源就会下载到对应节点，第二次你再访问的时候，对应节点就会直接把缓存的内容返回给你的网页显示。

而且在优化性能时，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器，同时可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

三、CSS和JS的位置会影响页面效率

CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快地将 CSS 传输到用户的设备，否则，（在页面渲染之前，）用户只能看到一个空白的屏幕。

css在加载过程中不会影响到DOM树的生成，但是会影响到Render树（渲染树）的生成，进而影响到layout（布局）。

所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。

js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

最后，建议都使用外部的JavaScript和CSS，内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就可以缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。当然如果引入外链需要注意缓存问题，即修改后需要改变版本号参数形如<script src = "index.js?v=1.1.01"></script>

四、懒加载和压缩图片或内容

图片懒加载是现在最常用的性能优化手段之一，对于首屏用不到的图片，我们完全可以使用懒加载在用户下拉到对应位置的时候再进行加载，避免网页打开时一下子加载过多资源。

压缩就是减少体积，建议使用PS自己导出时选择适合的品质。