分享网页加载速度优化的一些技巧?
日期: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文件。如下是代码:
<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的扩展来使用。
2. speed tracer
另外一个来自于google的工具,允许你更深层次的查看页面性能。
3. YSLOW
一个浏览器的扩展,和pagespeed非常类似,拥有页面评分和等级。并且给你一些相关的推荐和解决方案
4. developer tools
很多浏览器例如,chrome和firefox都拥有自己内建的性能优化工具。可以帮助你了解页面加载的情况。
总结
在这篇文章中,我们介绍了相关优化页面加载的技巧,希望对于大家有所帮助。
via gbtags
来源:分享网页加载速度优化的一些技巧?
分享网页加载速度优化的一些技巧?相关推荐
- 【前端开发】25种提高网页加载速度的方法和技巧
尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在 ...
- 页面加载速度优化的12个建议
1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次"Get"请求,延长加载速 ...
- 网站加载速度 优化_您肯定要优化网站的加载速度。 这是如何做。
网站加载速度 优化 Do you remember this iconic scene from a very famous Star Wars Parody? 您还记得著名的<星球大战> ...
- uc点网页显示服务器升级,让uc浏览器网页加载速度提升100%
摘要: 3G的最大特征就是网速的极大提升,而这正是 uc浏览器 手机浏览器的立身之本. 版本升级速度再提升100% 新发布的uc浏览器进一步改进了WAP/WEB网页的加载方式,不仅有效提高了浏览器的跳 ...
- Android开发——H5容器加载速度优化方案
1. 背景介绍 在偏重活动运营的电商App中,受制于App版本审核,具备开发周期短.可灵活发布等特点的H5页面受到青睐,承载了很多重要业务.但App Webview存在令人烦恼的性能问题,特别突出的是 ...
- web前端 网页加载 性能优化大全
web前端 性能优化 - - 如何提高网页加载速度 文章目录 web前端 性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求 浏览器 ...
- 提高网页加载速度的一些方法和技巧
网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问. 以下总 ...
- Web 加载速度优化清单,让你的网站快上加快
网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加.据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页.时间就是生命,干等着,谁愿意平白无故地 +1 ...
- 【PHP】如何提高网页加载速度?
[php]如何提高网页加载速度? 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱 ...
最新文章
- Python+pandas计算数据相关系数(person、Kendall、spearman)
- Linux学习笔记——Linux磁盘管理
- Java Data Base Connection(JDBC)
- boost::gregorian模块实现日期相关的测试程序
- 12.1、自定义Condition
- 数学建模——sas(1)——几种统计方法
- 方正真GBK(字体名称中有GBK且字数达到21003)字体列表
- Excel表格如何根据身份证号计算年龄
- CodeBlocks下载及安装教程(小白图解)
- 各种音视频编解码学习详解之 编解码学习笔记(七):微软Windows Media系列
- oracle裁员原因_如何评价甲骨文(ORACLE)中国区裁员?
- 逃离北京一年后再次回归: 一个PHP工程师的自白
- convert bitset descriptor - cv::Mat
- 有限元形函数及JuliaFEM中的实现方式
- 深入浅出Android性能调优,震撼来袭免费下载!
- 关于外国人报考美国专利代理人的基础介绍
- 计算机蓝屏代码0x000000ED,电脑蓝屏代码0x000000ed解决步骤
- Windows系统提示“telnet不是内部或外部命令,也不是可运行的程序或批处理文件”怎么办
- 自定义 SAP 采购订单屏幕
- 2021-08-28
热门文章
- linux 服务器 重新启动 慢,Linux系统启动缓慢解决方法[阮胜昌]
- as3转换为html5,AS3和HTML5 - 使用正则表达式将字符串解析为数组
- 引入dubbo依赖的版本是多少_Dubbo 项目学习(四) 接口抽取以及依赖版本统一
- java mysql 触发器 存储过程_mysql 触发器 存储过程 java调用
- oracle 怎么读取模板,获取、部署和管理Oracle VM模板
- android su中的字符串,android – 等到su中的命令完成
- flask双向映射语法
- Django 聚合查询
- (9) ebj学习: Jpa的增删查改,CURD方法监听和命名查询
- 计算机常用的数制及编码