平衡图片负载,提升web站点访问体验
最近给分公司做官方网站,内网测试一切ok,发布至云端后,体验惊人——公司外网网速渣渣(十几k~几十k),更加要命的是,网站的高清图,根本就加载不出来,几秒,十几秒过去了,仍然在转圈圈,如下图。。。
于是打开开发者模式,查看了一下图片质量,不看不知道,一看吓一跳:首页4张轮播图,每个都是1M~2M,4张图将近7、8M,再考虑下十几k的渣网速,浏览器也是累的哭出了声。。。
再参考了集团官网的图片,表意良好的全屏轮播图,处理的只有20k~40k左右,这简直是几十倍的的降级处理!怪不得,在渣渣网速下,集团官网4~5秒内也能加载出来了。
最终和美工商议,参考集团官网的图片处理方式,对所有高清大图做了降级处理,由高清处理为‘标清’,大小从原来的1.7M左右压缩至40~50k左右。。。
在网站开发中,以往至考虑了整体设计风格,响应式处理方法等,很少考虑到图片大小对系统的影响,当然,你可以说这是因为网速渣,关我啥事。但,我要说的是,你必须得考虑多种情况下的用户访问体验,毕竟,大多数公司的外网都慢的像蜗牛,这种情况下,你的几M大小的图片,无异于一个庞然大物,占据了相当大的带宽,依然让用户等的心烦气躁,用户可不管他什么网速哦,因为很多一般网站都还能打开,就你的打不开。。。
我们谈体验,谈设计,但不能忘了环境,尤其是网络环境的影响,在为了尽量提升在恶劣网络环境下访问站点的用户体验,应该对大的示意图做清晰度降级处理,因为就普通用户肉眼所见而言,能看清图片示意就行,M级和K级我并不在意,我只希望尽快看到就行!
因此,均衡图片负载和用户体验,也是今后产品设计中一个不容忽略的方面,应在设计筹备阶段,就与美工同事达成一致。
优良设计,让生活更轻松~
平衡图片负载,提升web站点访问体验的更多相关文章
- 使用异步存储提升 Web 应用程序的离线体验
localForage 是一个 JavaScript 库,通过使用简单的.类似 localStorage 风格的 API 实现异步存储,帮助你提升 Web 应用程序的离线经验(通过 IndexedDB ...
- java 网络API访问 web 站点
package cn.magicdu.think.socket; import java.io.BufferedReader; import java.io.InputStreamReader; im ...
- Nginx实战之让用户通过用户名密码认证访问web站点
1.Nginx实战之让用户通过用户名密码认证访问web站点 [root@master ~]# vim /usr/local/nginx/conf/extra/www.conf server { lis ...
- C++模拟Http/Https访问web站点
一.概述 1.Http与Https的区别与联系 在OSI参考模型中Http与Https均属于应用层协议.Http即Hypertext Transfer Protocol,超文本传输协议:而Https为 ...
- 启动Nginx目录浏览功能及 让用户通过用户名密码认证访问web站点
一.启动Nginx目录浏览功能 [root@abcdocker extra]# cat w.conf server { listen 80; server_name IP地址; location / ...
- [转]NGINX-检测客户端是通过电脑还是移动设备访问的,将请求重定向到适配的WEB站点
原文地址:https://blog.51cto.com/10978134/2163757 检测客户端是通过电脑还是移动设备访问的,将请求重定向到适配的WEB站点 此配置方法由Detect Mobile ...
- 工程师技术(三):独立Web站点的快速部署、虚拟Web主机的部署、配置网页内容访问、使用自定Web根目录、配置安全Web服务、部署并测试WSGI站点
一.独立Web站点的快速部署 目标: 本例要求为 http://server0.example.com 配置Web站点,要求如下: 1> 从http://classroom/pub/materi ...
- 构建高性能web站点--读书大纲
用户输入你的站点网址,等了半天..还没打开,裤衩一下就给关了.好了,流失了一个用户.为什么会有这样的问题呢.怎么解决自己站点“慢”,体验差的问题呢. 在这段等待的时间里,到底发生了什么?事实上这并不简 ...
- 构建高可用web站点学习(二)
web站点的缓存学习 缓存在web应用里面十分常见,也有各种各样的缓存,从请求开始一直到代码处理的阶段都可以采取缓存.下面就逐一介绍: 一.客户端缓存(浏览器和http方面) 前端页面缓存主要遵循ht ...
随机推荐
- 排队理论之性能分析 - Little Law & Utilization Law
了解一个系统的性能一般是參考一些度量值(Metric),而怎样计算出这些Metric就是我们要讨论的.Little Law(排队理论:利特儿法则)和Utilization Law是Performanc ...
- MySQL 5.7 Keywords and Reserved Words
https://dev.mysql.com/doc/refman/5.7/en/keywords.html#keywords-5-7-detailed-T
- (19)javaWeb项目名称修改
1,选中项目,[右键]-[Refactor]-[Rename] 在弹出面板中,填写New Name 点击[OK] 2,改变运行时目录名称 选中项目[右键]-[Properties] 在弹框中选择选择[ ...
- mysql14---手动备份
PHP定时完成数据库的备份 1.手动备份数据库(表的)方法 cmd控制台(windows指令): mysqldump –u root –proot 数据库 [表名1 表名2..] > 文件路径 ...
- 获取WiFi MAC地址总结【转】
本文转载自:http://blog.csdn.net/crazyman2010/article/details/50464256 今天对MAC地址的获取做了一些学习,目前网上获取MAC地址的方法主要如 ...
- YTU 2558: 游起来吧!超妹!
2558: 游起来吧!超妹! 时间限制: 1 Sec 内存限制: 128 MB 提交: 70 解决: 22 题目描述 夏天到了,无聊的超妹跑到了落雪湖里抓鱼吃.结果,游到湖的正中 央时被湖边保安看 ...
- YTU 2959: 代码填充--雨昕学矩阵
2959: 代码填充--雨昕学矩阵 时间限制: 1 Sec 内存限制: 128 MB 提交: 112 解决: 50 题目描述 雨昕开始学矩阵了.矩阵数乘规则:一个数k乘一个矩阵A还是一个矩阵,行数 ...
- 【HAOI2007】反素数
[题目链接] 点击打开链接 [算法] 稍加分析可知,问题等价于“求1到n中,因子个数最多的数,若有多个,求最小的” 那么我们该怎么求这个数呢? 约数个数定理 : x = p1^a1p2^a2p3^a3 ...
- RelativeLayout和layout_weight的异曲同工之妙(转载)
转自:http://ericbaner.iteye.com/blog/1161751 Android应用UI开发,对以上布局,可以使用RelativeLayout, 即: Xml代码 <Rela ...
- Ubuntu 12.04 设置终端字体为文泉驿(转载)
转自:http://my.oschina.net/uniquejava/blog/98480 0.说明 在gnome-terminal终端中看习惯了文泉驿微米黑字体,没想到从11.10升级到 ...