给客户开发的一个自媒体网站，首页比较多图片, 首次装载竟然差不多有6M, 时间14秒，急需优化。
优化前
利用Chrome 提供的lighthouse工具, 测试出来瓶颈在图片下载那里. 因为很多图片都是由编辑上传的原始图片, 一般都是几百K, 相对来说都偏大了.
图片下载流量是大头
根据工具的提示, 统一将所有下载的图片都转换成webp格式, 达到了压缩图片下载的效果, 对比起来效果, 每张图片居然缩小了差不多10倍, 真是喜人哪.
举例说明:
原图
压缩后差10倍
最终的结果就是网站首页的下载容量从5.9M下降到2.3M, 减少了60%的下载量, 页面装载时间缩短到4.32秒, 客户对这个提升表示比较满意.
优化后
学海无涯，在学习的道路上，你并不孤单，希望本文可以帮助到相关的人，我是物流IT人，刘宇，谢谢，再见。
故事起因： 给客户开发的一个自媒体网站，首页比较多图片, 首次装载竟然差不多有6M, 时间14秒，急需优化。 分析...
目前很多网站网站广泛使用Webp格式的图片，主要是因为Webp格式体积更小，但是多数图片编辑软件不支持这种格式，比...
把网站的图片升级到WebP格式吧
文章摘自本家网站 捷搜索 之 什么是WebP图片？什么是 WebP 格式图片？WebP 是由谷歌（google...
seo博客网站关键词泗阳seo、泗阳网站优化、泗阳seo优化首页排名没了网站是否被降权K了。这两天seo博客关键词...
如何为网站选择正确的图片格式栅格/位图与矢量图有损和无损JPEGGIFPNGSVGSVG格式优点WebP总结 译者...
webp格式来压缩首页 banner图的大小
网站基础内链优化1、 给网站logo加上链接自己网站首页的链接地址。这样对于网站来说就为自己的网站增加了一个内部链...
webP介绍 WebP是一种现代图像格式，可为Web上的图像提供出色的无损和有损压缩。使用WebP，网站管理员和W...
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成...
本文标题：2018-07-27 网站优化:利用webp格式减少了网站首页6
本文链接：https://www.haomeiwen.com/subject/mqvwmftx.html
网友评论