请教一个网站各文件压缩问题？

Question

如题祥述：

作为前端开发的我，做了一个公司网站，所有的静态页面都以写好（其实都是静态页面）。上线服务器，却是各种问题：

• 1、网站字体加载特别慢，估计要个三四秒才能出来，主要是用了个性字体（Pingfang SC，里面的三个，每个都是10M左右），公司的网站的也就5M的速度吧，当然很慢。最后跟UI沟通了，为了稍好的用户体验，还是选择了系统字体。

请问：如果你们碰到如此问题都是如何处理的？

• 2、图片加载很慢，UI给的图，有的是.svg格式，有的是.png格式，大小大一点的都有2M-3M，小一点的也有500KB——800KB。

解决办法：在线压缩了下，普遍在200KB以下，用的是在线压缩，还算能接受。这个网站好像能让图片多压缩几次，之后后面压缩的大小没减少多少，所以也就只压缩了一次。

请问：图片压缩是UI来做，还是前端的工作，如果是前端的话，有没有更好的压缩工具？

• 3、其实主要是上述文件影响了加载速度。其他也有问题，比如：网站还有些其它文件pdf有必要压缩吗？那些CSS、js也要压缩吗？

第一次做网站，没什么经验，希望能得到你的指教！！！

Answer 1

一般来说，服务器端开启gzip压缩是一个不错的选择，前端的话也可以将一些不大的图片图标合并（雪碧图，减少请求次数），对于不大的（2M以下）使用base64转码，webpack可以做，js ,css压缩主要是对代码进行合并，去除注释，换行，进行简写，一般都可以交给打包工具，配置设置好就可以了

Answer 2

一般在进入设计阶段前就要沟通好，文字密集的区域保持默认字体（一般约定为雅黑），个别标题可以偶尔上点美术体，但最好前期沟通好。另外版权的问题也要考虑。我都是自己切图、自己压缩，这块如果也让设计来做的话，沟通上可能会比较麻烦，因为除非这个设计对前端这块非常了解，否则切出来的东西可能会和你要的东西不太一样，而且压缩的结果可能也会不太理想（但尽量不要二次压缩，尤其是JPEG这种有损格式），那么与其把时间浪费在沟通上、还不如自己动手。另外，熟悉一些ps/设计类的知识，设计阶段中与设计沟通时也会带来一定的便利。至于工具么我觉得没什么太好的，一般用TinyPNG主要就是压缩效果好但是不太方便（没记错的话是50张还是20张来着），如果用批量工具做的话就会反过来了，挺方便但是压缩效果不太好（其实主要原因是TingPNG是经过算法优化后的有损，好多工具都是无损所以肯定效果会略逊于前者）……想用的话可以去看看企鹅家的WeFlow（常用的压缩都有）、limitPNG（这个我觉得可能是无损的王者了……不过极限无损耗时略长所以建议你试试有损模式）图片一般压缩到300k左右（也看网站和具体情况，比如移动端小一点最好、纯色没过渡用PNG8、色彩比较多图片分辨率大得用JPEG、矢量风格宜用PNG，这些得知道点）；PDF的话一般客户端主要是下载，所以大小别太过分就行了（当然压缩一下也没坏处，如果你知道怎么压缩的话）；至于HTMLCSSJS，压缩有两种做法：一种是在你编译时加个压缩&trim多余字符的插件（当然也可以用一些工具手动搞），另一种，也可以在服务器这端来做些处理，比如Nginx就有对应的插件（没记错的话阿里的Tengine是自带的，原生Nginx得额外引入一下），另外我记得是阿里的OSS吧，用做服务器的时候也可以进行对应预处理，总之目的就是在用户端接收到的页面已经是处理后的了。