网站加载图片速度慢如何优化

wfc_666
  • 643

图片描述

图片描述

图片描述

如图所示,中间那张图是我们官网http://www.yofoody.com/的加载时间线(已经去掉了每次的缓存),上下两张是其它网站做为对比的。我发现我们网站加载类似大小的图片所花费的时间较长,甚至有十倍之多,请问这是前端的问题还是服务器带宽的问题,如何优化加载速度呢?
另外,我们公司官网加载速度确实很慢,老板让我做优化,请问各位有没有前端速度优化的方法提供一下,我自己研究使用,非常感谢。

各位大神可以帮小弟分析一下我们官网的问题吗,关于加载速度,图片压缩大小方面的,网址上面有了,非常感谢。

回复
阅读 31.2k
12 个回答

图片优化,无非压缩、合并、CDN、缓存、延时加载、独立域名

1.走动态资源和静态资源分离,
图片走,img.test.com/image/logo.png
css走,css.test.com/css/index.css
js走, js.test.com/js/index.js

2.图片全部采用CDN解析,缓存住

从你的截图可以看出网站的所用图片太大,需要压缩,另外小的一些图片可以做成雪碧图或者直接生成base64编码嵌入网页中,还有现在在网站上可以使用webp,不过这个貌似在移动端用的多,你可以看看

可以试试七牛图片处理链接

大的图片最好压缩一下,小图片可以放在一个雪碧图上边用,一般都是200k以内比较好

图片大了,可以试着把图片放到阿里OSS或者七牛上

快慢永远是相对的,建议检查以下:
1、压缩图片、js、css,色彩较少的建议用git格式
2、开启服务器的gzip、open-cache
3、有条件时,可以把不需要程序渲染的文件加入CDN
4、根据具体的业务需求,可以考虑异步加载图片,避免影响用户操作
5、如果做了多级nginx代理,建议在对外的nginx服务中开启静态资源缓存,避免每次去子服务器获取
6、根据具体业务需求,考虑页面是否确实需要加载这么多图片

优化网站性能,需要前后端同时考虑,甚至包括设计。

Manix
  • 5
新手上路,请多包涵

可以采用动态添加的方式,先让图片容器加载一个动效,css就可以实现一个loading,然后设置几秒之后动态添加一个图片地址,new IMage的方式添加地址,据说效果不错,你可以试试,关键是图片你得处理一下,你那图片有点大

煌过煌
  • 3
新手上路,请多包涵

我的网站也是,这和带宽和服务器空间都有影响;然后可以设缓存和图片压缩;http://www.thdni.com

firefly
  • 2
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏