javascript - 多图网页如何提高加载速度?
迷茫
迷茫 2017-04-10 13:09:53
[JavaScript讨论组]

最近用个闲置域名做了个所有苹果产品的时间线(只是搭个框架,很多细节还没修改)。
现在遇到的问题就是我觉得加载速度不够快,请问还有什么好的优化和改进方案么?

webpage: 941am.com
Host: 用的免费github pages

现在的方案: 考虑到图片比较多,比较了lazy load plugin 和 unveil.js 之类先择了unveil.js

以下是pingdom测试的加载时间的截图:

谢谢!

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(1)
怪我咯

出现这个问题的时候, 首先要反问自己一句 "what? 为什么加载会慢?"
先找出问题, 才能解决问题 F12 > Network.

  1. 优化图片格式 [ shattered.png (135KB), osx_main.png (746 KB) ... ]
    它们不是 Alpha通道的图片 为什么要用无损的PNG格式.

  2. 优化图片尺寸 [ ios7_main.jpg (99.7 KB) ... ]
    需要多大就加载多大, 别有事没事的在首页放HD高清图.
    对于Retina屏, 资源图片使用CSS判断加载 / 文章图片尽量使用 Retina.js 或者判断用户头.

  3. 优化图片大小 [ osx_main.png (746 KB) ... ]
    图片先压缩, 或者上传后服务器处理.

  4. 优化加载 [ GET√ ]
    在页面图片较多时, 延迟加载是十分明智的. 在实际应用中能够减少 60% 流量.

  5. 缓存 [ GET 1/2? ]
    像这种展示类更新不频繁的网站, 直接 max-age=31536000.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号