我们所说的web，无非就是html，css(web font, image)，JavaScript。
HTML优化建议：
1. 尽量不要用table进行布局。
2. 尽量用最新的带有语义的h5标签，这样在解析跟渲染时更快。
3. 使用块传输数据，web服务器响应头设置：Transfer-Encoding: chunked
4. 预处理DNS，DNS缓存。可以通过link标签增加rel=“dns-prefetch”,如：<link rel="dns-prefetch" href="//google-analytics.com" >
5. html压缩：
a. 删除所有空白字符，包括spaces，tabs，newline等。
b. 删除简单值的引号。
c. 删除可选的关闭标签，如：</body>,</p>,</li>
d. 尽量使用短一点的id标识
CSS优化建议：
1. 用外部CSS文件。
2. 异步加载CSS,可以借助loadCSS，AsyncLoader等这些工具。或者动态创建link标签实现。
3. 压缩CSS文件，包括web字体的压缩。
4. 尽可能早的加载web字体，可以在html文件的style标签定义字体，如下：
<style>
@font-face{
font-family: my-font;
src: url(my-font.woff);
}
</style>
5. 可以使用FontFace API动态加载字体。
JAVASCRIPT优化建议：
1. JS压缩。
2. 异步加载，可以借用requireJS，可以动态创建script标签。
3. <script>:js在加载时会阻塞其他资源的下载渲染；<script defer>:js在加载时不会阻塞其他资源的下载渲染，js加载完不会立即执行，而是等到所有其他资源下载完成js才会执行，适合js有其他依赖的情况；<script async>:js在加载时不会阻塞，js加载完会立即执行，执行的时候回阻塞。
4. DOMContentLoaded事件会在load事件之前触发。
IMAGE：
1. 给img标签设置宽度高度可以提升渲染性能，如：<img src="logo.png" width="300" height="100" alt="Logo">
2. 对于小图标可以使用data url方式内联加载。转换为base64后的字符大小一般会比图片本身大30%，但有web服务器一般启用gzip，gzip会压缩base64进行传输，所以结果反而甚至会小很多。
3. 选择正确的图片格式及图片压缩率，新的图片格式：jpeg-xr，webp，apng
4. 合并图片减少请求数，需考虑图片个数与合并后图片的大小平衡问题，一般不要超过10个图片的合并。
总结：
1. 服务器端支持http/1.1，支持压缩(gzip等)。
2. 尽量减少请求数量，实现资源共享。
3. 支持块传输，以便尽可能早解析html并发现内联的请求。
4. 支持DNS缓存，预查询DNS。
5. 尽可能减少CSS文件大小及个数（CSS压缩）
6. 使用新的高性能的js加载工具，如requirejs。
7. 优化图片的大小，减少网络占用。