为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕容708150 2019-03-05 13:14:09
如题祥述:作为前端开发的我,做了一个公司网站,所有的静态页面都以写好(其实都是静态页面)。上线服务器,却是各种问题:1、网站字体加载特别慢,估计要个三四秒才能出来,主要是用了个性字体(Pingfang SC,里面的三个,每个都是10M左右),公司的网站的也就5M的速度吧,当然很慢。最后跟UI沟通了,为了稍好的用户体验,还是选择了系统字体。请问:如果你们碰到如此问题都是如何处理的?2、图片加载很慢,UI给的图,有的是.svg格式,有的是.png格式,大小大一点的都有2M-3M,小一点的也有500KB——800KB。解决办法:在线压缩了下,普遍在200KB以下,用的是在线压缩,还算能接受。这个网站好像能让图片多压缩几次,之后后面压缩的大小没减少多少,所以也就只压缩了一次。请问:图片压缩是UI来做,还是前端的工作,如果是前端的话,有没有更好的压缩工具?3、其实主要是上述文件影响了加载速度。其他也有问题,比如:网站还有些其它文件pdf有必要压缩吗?那些CSS、js也要压缩吗?第一次做网站,没什么经验,希望能得到你的指教!!!
查看完整描述

3 回答

?
杨__羊羊

TA贡献1943条经验 获得超7个赞

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


查看完整回答
反对 回复 2019-03-27
?
人到中年有点甜

TA贡献1895条经验 获得超7个赞

  1. 一般在进入设计阶段前就要沟通好,文字密集的区域保持默认字体(一般约定为雅黑),个别标题可以偶尔上点美术体,但最好前期沟通好。另外版权的问题也要考虑。

  2. 我都是自己切图、自己压缩,这块如果也让设计来做的话,沟通上可能会比较麻烦,因为除非这个设计对前端这块非常了解,否则切出来的东西可能会和你要的东西不太一样,而且压缩的结果可能也会不太理想(但尽量不要二次压缩,尤其是JPEG这种有损格式),那么与其把时间浪费在沟通上、还不如自己动手。另外,熟悉一些ps/设计类的知识,设计阶段中与设计沟通时也会带来一定的便利。至于工具么我觉得没什么太好的,一般用TinyPNG主要就是压缩效果好但是不太方便(没记错的话是50张还是20张来着),如果用批量工具做的话就会反过来了,挺方便但是压缩效果不太好(其实主要原因是TingPNG是经过算法优化后的有损,好多工具都是无损所以肯定效果会略逊于前者)……想用的话可以去看看企鹅家的WeFlow(常用的压缩都有)、limitPNG(这个我觉得可能是无损的王者了……不过极限无损耗时略长所以建议你试试有损模式)

  3. 图片一般压缩到300k左右(也看网站和具体情况,比如移动端小一点最好、纯色没过渡用PNG8、色彩比较多图片分辨率大得用JPEG、矢量风格宜用PNG,这些得知道点);PDF的话一般客户端主要是下载,所以大小别太过分就行了(当然压缩一下也没坏处,如果你知道怎么压缩的话);至于HTMLCSSJS,压缩有两种做法:一种是在你编译时加个压缩&trim多余字符的插件(当然也可以用一些工具手动搞),另一种,也可以在服务器这端来做些处理,比如Nginx就有对应的插件(没记错的话阿里的Tengine是自带的,原生Nginx得额外引入一下),另外我记得是阿里的OSS吧,用做服务器的时候也可以进行对应预处理,总之目的就是在用户端接收到的页面已经是处理后的了。


查看完整回答
反对 回复 2019-03-27
  • 3 回答
  • 0 关注
  • 404 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信