优化网页图片
http://www.iteye.com/news/27175
在最近的几年里,Web网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的用户来说,可能并不是一个问题。但是对于那些网速并不理解的用户来说,可能会是一个非常头疼的问题。
首先我们看一个页面内容大小的饼图:
![](http://dl.iteye.com/upload/attachment/0080/5751/ee49ab84-c6d7-3069-9a2d-e91d5c103514.png)
一、网页优化
1. 优化图片
这个绝对是显而易见的,可以看到图片占据的页面内容分量最重。在现代网页设计中,图片绝对占据了大部分的内容。你需要针对你的页面重新定义图片大小。这能够有效地帮助你减少页面大小。而且,这里有很多的功能能够帮助你针对图片减肥,例如,Smush.it和TinyPNG
2. 压缩CSS和Javascript代码
有效地压缩CSS和JavaScript代码能够有效地减少页面大小,你可以删除空格优化代码。当然,压缩代码对于代码阅读不是非常有用,但是一般作为产品环境来说,我们通过这种方式可以有效地减少页面加载时间。
3. 避免使用@import
@import CSS语法允许你加载其它的CSS文件。有时间非常有帮助,但是它并不是和主文件一起下载的,所以可能会增加页面加载时间。建议使用link标签,这样会更加高效。
4. 减少HTTP请求次数
减少HTTP请求次数可以帮助你有效的增加网站加载速度。你可以使用如下方式:
- 融合文件:将不同的样式表文章合成一个文件可以减少http请求的次数。同样对于JavaScript来说也适用。
- 使用CSS sprites:使用sprites可以帮助你把多个图片文件放置到一个文件里,这样可以减少图片下载的次数。
5. 利用浏览器缓存
可能你的网站中包含了一些并不常常变化的文件。例如图片、CSS、JavaScript等等。如果让浏览器来缓存文件的话可以帮助你增加网页加载速度。通常我们使用web服务器的配置来达到效果,如下:
![](http://dl.iteye.com/upload/attachment/0080/5753/9e524550-7061-3d73-9f06-9228ff02251d.png)
比较简单的方式是更新服务器的.htaccess文件。代码如下:
- <IfModule mod_expires.c>
- # Enable Expirations
- ExpiresActive On
- # Default Expiration Time
- ExpiresDefault "access plus 1 month"
- # Expiration for Images
- ExpiresByType image/gif "access plus 1 month"
- ExpiresByType image/png "access plus 1 month"
- ExpiresByType image/jpg "access plus 1 month"
- ExpiresByType image/jpeg "access plus 1 month"
- # Expiration for CSS
- ExpiresByType text/css "access plus 1 month”
- # Expiration for JavaScript
- ExpiresByType application/javascript "access plus 1 month"
- </IfModule>
二、网页加载速度测试工具
1. pagespeed
pagespeed是来自Google的一个工具,可以帮助你分析web页面并且告诉你如何优化来提高效率。当然,你可以作为chrome的扩展来使用。
![](http://dl.iteye.com/upload/attachment/0080/5755/240e146d-f684-32ea-8ab3-2eede74745ab.png)
2. speed tracer
另外一个来自于Google的工具,允许你更深层次的查看页面性能。
![](http://dl.iteye.com/upload/attachment/0080/5757/94d3b6f6-9989-34e7-8da1-e2ff6f8015a4.png)
3. YSLOW
一个浏览器的扩展,和pagespeed非常类似,拥有页面评分和等级。并且给你一些相关的推荐和解决方案。
![](http://dl.iteye.com/upload/attachment/0080/5759/04a42fb2-44c9-3d34-a2c4-ec4371892423.png)
4. 浏览器内建的开发者工具
很多浏览器例如,chrome和firefox都拥有自己内建的性能优化工具。可以帮助你了解页面加载的情况。
![](http://dl.iteye.com/upload/attachment/0080/5761/0d565a9d-64f0-38bb-aae9-4071bad02d37.png)
相关文章
- selenium使用谷歌浏览器自带手机模拟器运行H5网页
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正 wpf Listbox 实现按住ctrl键来取消选中 详解C#的协变和逆变 C#效率优化(1)-- 使用泛型时避免装箱
- Web网页自动化实战《4.获取所有酒店的名字、价格、评分信息,并写入文件》上篇
- 网页直接访问链接不让安全中心拦截
- 《众妙之门——网页设计专业之道》——1.5 平面主义
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性
- 《HTML5+CSS3网页设计入门必读》——1.6 再次联手
- 《HTML5+CSS3网页设计入门必读》——2.9 闪亮的新工具:JavaScript API
- 《HTML5+CSS3网页设计入门必读》——6.4 使用Web字体
- 2015第34周二能收发邮件但不能打开网页解决方法
- 《Clojure数据分析秘笈》——1.9节从网页中抓取文本数据
- Qt音视频开发41-文件推流(支持网页和播放器播放并切换进度)
- web scraper 抓取网页数据的几个常见问题
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)(转)
- 网页上的内容无法复制和下载?一行代码教你解决
- JavaScript 刷新或关闭网页时弹窗确认