`

20点提高网站访问速度缩短网页加载时间

阅读更多

网友上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些。因此我觉得我们有必要去提高网页的打开速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!下面给出20种方法帮你提高网站访问速度缩短网页加载时间。

  1、减少页面HTTP请求数量

  比较直接的理解就是要减少调用其他页面、文件的数量。

  A.我们在使用css格式控制的时候,经常会采用background载入很多图形文件,每个background的图像至少产生1次HTTP请求,一般我们为了让页面生动活泼会大量使用background来加载背景图,要改善这个状况,可以采用css的1个有用的background-position属性来加载背景图,我们将需要频繁加载的多个图片合成为1个单独的图片,需要加载时,采用以下形式加载即可将这部分图片加载的HTTP请求缩减为1个。

  

网站加载时间 网站访问速度 网站优化 用户体验

 

  B.采用Image maps,这个方法也比较常用,只是限于同1个区域使用。

  C.Inline images,这个方法很少见到,但对于很小很简单的图像却是很实用的,相关语法标准参照:tools.ietf.org/html/rfc2397。

  2、使用CDN(Content Delivery Network)网络加速

  现在国内做CDN加速业务的公司很多,简单讲,就是将你的图片、视频扩散到CDN网络所能到达之处,让用户访问时能就近下载到这些文件,从而达到网络提速的目的,这样做,同时能减轻你自己网站的负载。

  3、添加文件过期或缓存头

  对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲 时间,例如设置24小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或JS不会再重复下载,从而减少了HTTP请求,用户访问速度明显有 所提升,同时服务器负载也会下降。下面给出nginx配置中缓存控制的例子:

  

网站加载时间 网站访问速度 网站优化 用户体验

 

  4、服务器开启gzip压缩

  这个大家都比较了解,即将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的 数据量会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置,也可以从代码角度直接设置传输文件头,增加gzip的设置,也可以从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。

  5、css格式定义放置在文件头部

  这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利,可以在网页逐步呈现的同时仍会保持格式信息,不影响网页美感。

  6、Javascript脚本放在文件末尾

  很多Javascript脚本执行效率低下,或者有的第3方域名脚本出现意外无法载入, 如果将这些脚本放置到页面比较靠前的位置,可能会导致我们自己网站的内容载入速度下降甚至无法正常加载,所以一般将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。

  7、避免使用CSS脚本(CSS Expressions)

  有时为了要css的参数动态改变,可能会采用css expression来实现,但这样做得不偿失,会使用户端浏览器负担明显加重,所以不建议这样做,如果需要改变,可以使用Javascript脚本去实现。

  8、css、javascript改由外部调用

  如果css、js内容比较庞大,尽量不要写到同1个页面中去,改由外部载入比较妥当,因为浏览器本身会对css、js文件进行缓存。

  9、压缩Javascript、CSS代码

  一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,一般可以保留开发版本,利用工具生成生产版本,2个文件比较,一般压缩率能达到50%以上,减少的数据量还是比较可观的。

  我这个博客刚改版完成,各种代码还没有进行优化和压缩,目前yslow评级只能达到D,等有时间进行部分优化,达到C等级应该问题不大。

  10、避免采用301、302转向

  11、养成良好的开发维护习惯,尽量避免脚本重复调用

  12、配置ETags

  13、Ajax采用缓存调用

  这个的使用可以参照Discuz论坛代码,里面对于大量使用的Ajax调用都采用了缓存 调用方式,一般采用附加特征参数方式实现,注意其中的

  

网站加载时间 网站访问速度 网站优化 用户体验

 

  就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信 息。

  14、合理使用Flush

  用户端发送浏览请求后,服务器端一般要花销200-500ms去处理这些请求,在此期间,用户端浏览器处于等待状态,如果要减少用户等待时间,可以在适当的位置使用flush,将已经就绪的内容推送到用户端,这在php中很容易实现例如:

  

网站加载时间 网站访问速度 网站优化 用户体验

 

  15、Ajax调用尽量采用GET方法调用

  实际使用XMLHttpRequest时,如果使用POST方法实现,会发生2次HTTP请求,而使用GET方法只会发生1次HTTP请求。如果改用GET方法,HTTP请求减少50%!

  16、尽可能减少DCOM元素

  这个很好理解,就是尽可能减少网页中各种<>元素数量,例如

  的冗余很严重,而我们完全可以用取代之。

  17、使用多域名负载网页内的多个文件、图片

  记得有资料说明,IE在网页载入过程中,在同1时刻,对同1域名并行加的HTTP请求数 量最高为2个,如果网页需要加载的文件数量超过2个(通常远远超过..),要加快网页访问速度,最好将文件分布到多个域名,例如19楼,其js文件采用独 立的域名,据说百度的图片服务器数量在20台以上。

  18、缩减iframe的使用,如无必要,尽量不要使用

  iframe通常用于不同域名内容的加载,这同时也可能因iframe内容加载速度影响到主网页加载速度,如果可能,把需要加载的内容抓取到本地直接嵌入。如果实在需要iframe加载,采用后载入方式实现。

  19、优化图片文件

  优化图片文件,减小其尺寸,特别是缩略图,一定要按尺寸生成缩略图然后调用,不要在网页中用resize方法实现,虽然这样看到的图片外形笑了,但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图,其真实尺寸有10M之巨…

  普通图像、icon也要尽可能压缩后,可以采用web图像保存、减少颜色数等等方法实现。

  20、当页面内容庞大到一定程度,可以采用分页的方式展现,或者taobao的那种翻页后载入方式。

 

from http://www.admin5.com/article/20141203/574371.shtml

分享到:
评论

相关推荐

    woocommerce-custom-orders-table:将WooCommerce订单数据存储在自定义表中以提高性能

    WooCommerce自定义订单表 该插件通过引入自定义表将所有最常见的订单信息保存在一个正确索引的... 后元表增长得越大,执行查询所需的时间就越长,这可能会减慢您和访问者的查询速度(从而缩短页面加载时间)。 WooC

    Chrome浏览器 v28.0.1500.12 iphone版.zip

    减少了数据流量消耗,缩短了页面加载时间。可通过“带宽管理”设置查看数据流量节省情况。此项功能正在逐步推出,将来所有用户都可以使用。 6.可以访问浏览器历史记录 7.提升了稳定性/安全性,并修复了若干问题 ...

    Preview any link, anywhere - Link Preview-crx插件

    在Internet上加载内容的大部分时间来自浏览器,它花时间在屏幕上绘制图像和内容,而LinkPreview几乎所有花在绘画上的时间都已消失,因此您可以更快地访问内容。 一种更安全的浏览方式。 LinkPreview使用DOMPurify,...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    综上所述,“认我测”在线认证检测系统,率先填补了认证检测领域移动端的空缺,提供了Web浏览器+移动端的双端访问模式,给用户提供了多种访问途径,真正实现了用户和检测机构的随时随地在线下单检测。 关键词:...

    QUI试用版V3.0 quickui

    很大程度缩短页面加载的时间。当然,你用的浏览器版本越高,速度越快。使用IE9或chrome,则会在一瞬间加载完成。另外还对原来大家提出的众多bug进行了修正。 3、新增大量组件 新版本框架新增了很多重要的组件,...

    windows xp注册表优化

    加快局域网访问速度.reg 加快开关机机速度,自动关闭停止响应.reg 加快开机速度副值.reg 加快搜索网上邻居的速度.reg 加快程序运行速度.reg 加快自动更新率.reg 加快菜单显示速度.reg 加快预读能力改善开机速度.reg ...

    dd-wrt fantasia

    更新ipp2p到0.99.17,仅匹配每条连接的前15个数据包,提高过滤速度(当年的东西啦,蛮更新吧,没有精力和能力去修改特征码啦,现在p2p更新太凶喽) 在服务优先级页面用括号注明哪些服务属于ipp2p的过滤器 添加all(ipp2...

    Chromahills网络应用程序「Chromahills Network App」-crx插件

    V1.0-更新了服务器IP列表-添加了两个新服务器-删除了玩家总数错误-修复了较小的拼写问题-添加了令人敬畏的2014年7月31日-V0.9.2(测试版)-修复了所有映像头未显示的现象-缩短了一些JS来缩短加载时间2014年6月9日-V...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

    在具体设计实现该博客网站时,主要考虑了主流博客网站的几个主要功能:(1)博客的注册、登录验证功能(2) 网络用户通过关键字搜索博文功能(3) 最热门博客页面推荐浏览(4) 文章详细内容及相关评论显示(5) 博客页面访问量...

    jquery基础教程高清版PDF.part5.rar

     2.7 访问DOM元素   2.8 小结  第3章 事件——扣动扳机   3.1 在页面加载后执行任务   3.1.1 代码执行的时机选择   3.1.2 基于一个页面执行多个脚本   3.1.3 缩短代码的简写方式   3.2 简单的...

    java面试题

    答:1、主要将各个框架有效的联系起来,缩短实际编程时间。 2、可以将各个框架进行有效的管理和控制,让数据传输安全。 spring的IOC和DI? 答:控制反转和依赖注入是spring的两大基础作用。主要是将所有组件在...

    Jqury基础教程

    3.1.3 缩短代码的简写方式 3.1.4 与其他库共存 3.2 简单的事件 3.2.1 简单的样式转换器 3.2.2 简写的事件 3.3 复合事件 3.3.1 显示和隐藏高级特性 3.3.2 突出显示可单击的项 3.4 事件的旅程 3.5 通过事件...

    C#微软培训资料

    第十二章 域 和 属 性 .139 12.1 域 .139 12.2 属 性 .143 12.3 小 结 .146 第十三章 事件和索引指示器 .148 13.1 事 件 .148 13.2 索引指示器 .151 13.3 小 结 .154 第十四章 继 承 .155 14.1 C#的...

    citrix 中文管理操作手册

    将密钥加载到场中的后续服务器 156 将密钥存储到共享位置 156 将密钥存储到网络位置 156 更改场 157 其他 IMA 加密功能 157 备份密钥 157 检索丢失的密钥 157 禁用 IMA 加密 157 1.8.9. XenApp 服务帐户特权 158 ...

    入门学习Linux常用必会60个命令实例详解doc/txt

    在系统需要挂上大量NFS文件系统时可以加快加载的速度。 -f:通常用于除错。它会使mount不执行实际挂上的动作,而是模拟整个挂上的过程,通常会和-v一起使用。 -t vfstype:显示被加载文件系统的类型。 -n:...

    Habrahabr更新「Habrahabr обновления」-crx插件

    如果启用,那么您的旧帖子(在扩展名安装时间之前有创建时间)将被加载, 4.限制装载和测试的habratopics,页面。只运送您的habratopics的这个页数进行分析 5.重新扫描自己的habratopics频率,秒。多久您的...

    mimir:快速且最少的shell提示

    长目录路径会缩短,而无法访问的路径会以红色突出显示。 使用KUBECONFIG环境变量显示Kubernetes上下文和名称空间信息。 如果在变量值中指定了多个配置文件,则使用第一个具有当前上下文信息的文件。 您可以通过导出...

    新标签「New Tab」-crx插件

    这样可以将页面加载时间缩短大约半秒。 -弃用瓷砖瓷砖不过是精美的书签,而且配置和使用起来也很麻烦。 如果您正在广泛使用图块,请将其移到书签中。 -------------------------------------------------- ---------...

    craigslist弹出对高级用户「craigslist pop for power users」-crx插件

    - 最大限度地缩短您在Craigslist上的时间 安全和安全 - 没有不必要的权限 不断更新和维护 -自由! 请发送电子邮件至:me@craigslistextension.com之前留下不好的评论 - 更新 - 12/7/16 - 3.21 - CL再次更改了代码 ...

Global site tag (gtag.js) - Google Analytics