日期:2013-2-17 来源:GBin1.com
不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的用户来说,可能并不是一个问题。但是对于那些网速并不理解的用户来说,可能会是一个非常头疼的问题。
首先我们看一个页面内容大小的饼图:
那么如何优化你的网页呢?
优化图片
这个绝对是显而易见的,可以看到图片占据的页面内容分量最重。在现代网页设计中,图片绝对占据了大部分的内容。你需要针对你的页面重新定义图片大小。这能够有效地帮助你减少页面大小。而且,这里有很多的功能能够帮助你针对图片减肥,例如,Smush.it和TinyPNG
压缩CSS和Javascript代码
有效地压缩CSS和javascript代码能够有效地减少页面大小,你可以删除空格优化代码。当然,压缩代码对于代码阅读不是非常有用,但是一般作为产品环境来说,我们通过这种方式可以有效地减少页面加载时间。
避免使用@import
@import CSS语法允许你加载其它的CSS文件。有时间非常有帮助,但是它并不是和主文件一起下载的,所以可能会增加页面加载时间。建议使用link标签,这样会更加高效。
减少HTTP请求次数
减少HTTP请求次数可以帮助你有效的增加网站加载速度。你可以使用如下方式:
1. 融合文件
将不同的样式表文章合成一个文件可以减少http请求的次数。同样对于javascript来说也适用。
2. 使用CSS sprites
使用sprites可以帮助你把多个图片文件放置到一个文件里,这样可以减少图片下载的次数。
利用浏览器缓存
可能你的网站中包含了一些并不常常变化的文件。例如,图片,CSS,javascript等等。如果让浏览器来缓存文件的话可以帮助你增加网页加载速度。通常我们使用web服务器的配置来达到效果,如下:
比较简单的方式是更新服务器的.htaccess文件。如下是代码:
.......
via gbtags
相关推荐
互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度...这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。
我现在在同一个界面上要绘制350个 LinearBar 每隔15秒刷新一次数据,现在的问题 是控件生成和数据刷新其实所用的时间都只是1秒左右,但是界面绘制太慢了,附程序,求界面加载速度优化
Webspeed 使用 phantomjs 来衡量网页的加载性能。 它可以用作独立的命令行工具,也可以用作节点应用程序的 API。 安装 $ npm install webspeed 这也会安装 phantomjs,无需单独安装! 用法 命令行 要用作 CLI,请...
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,...
android 图片加载优化 解决的OOM异常
magento加速,magento优化图片、加载速度免费插件
如何加快ie浏览器的网页加载打开速度?.docx
PreLoader: Make your activity launch faster changelog 中文文档 Pre-load data before Activity opens, and display data on UI after UI initialization....You can start a PreLoader everywhere and start to ...
QML中Image控件升级版,利用预解释和预读取,提升图片加载速度
在ie地址栏中打开一个网址,那么在这个网页加载过程中,pagetest窗口会显示网页中各个元素的加载时间和总时间。 如果要重复多次的测试网页,每测同一个页面的时候需要清空缓存,否则测试时间不准。清缓存建议...
IE8 网页加载速度变慢怎么办-.docx
学会这11招提高网页加载速度不是问题.docx
主要介绍了详解vue项目首页加载速度优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
图片作为网页的基本元素是影响页面加载速度的关键因素之一,和图片相关的技术也有很多CSS Sprites(图片合并)、延迟加载、图片渐进增强等等,本文分享网页图片优化的实用工具和技巧
在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽。那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最...
这样的话网站做得再难看批判者进不来不是白搭嘛,于是针对web页面加载速度的优化迫在眉睫。基于博主以前优化过其他网站,于是博主准备把这次的优化过程记录下来分享给大家借鉴。先来看优化前的页面:加载时间8.18s,...
Glide 4加载GIF 优化方案
移动H5前端性能优化指南.zip 加载优化 图片优化 CSS优化 渲染优化
网页的加载速度是评估网站质量一个重要指标,网页载入速度会极大地影响网站的流量和访问,本文与大家分享下提高网站加载速度的初步简单技巧方式,由此需求的朋友可以学习下