售前咨询
技术支持
渠道合作

网页优化之减少页面加载时间的技巧

1、重复的HTTP请求数量应尽量减少

(1)减少调用其他页面、文件的数量。

(2)在使用css格式时,常会采用background载入图形文件,而每个background的图像都会产生1次HTTP 请求,为了让页面生动活泼大量使用background来加载背景图,可以采用css的1个有用的background-position属 性来加载背景图加以改善,将需要频繁加载的多个图片合成为1个单独的图片,加载时采用:background:url(….) no-repeat x-offset y-offset的形式加载,图片加载的HTTP请求缩减为1个。

background:url(….) no-repeat x-offset y-offset

2、压缩Javascript、CSS代码

、一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,可以在百度里搜索一下 关键字“css代码压缩”,或者“js代码压缩”将会发现有很多网站都提供这样的功能,当然了你也可以自己写程序来做这个工作,如果你会的话。就拿我们这 个网站来说吧。刚开始上传这个网站的时候,我的很多Css代码都没有压缩,后面发现了这个问题,我就上网找了相关的网站的压缩代码的功能,最后就把很多 CSS文件都压缩了。这个压缩比率还是比较高的,一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。

3、在文件头部放置css样式的定义

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

4、在文件末尾放Javascript脚本

网页文件的载入是从上到下加载的,很多Javascript脚本执行效率较低,或者在网页前面都不需要执行的,如果将这些脚本放置到页面比较靠前的位置, 可能导致网站内容载入速度下降或加载不了,将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。

5、css、javascript改由外部调用

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

6、尽可能减少DCOM元素

尽可能减少网页中各种<>元素数量,例如<table>的冗余很严重,而我们完全可以用<div>取代之。

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

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

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

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

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires 30d;#设置30天过期

}

location ~ .*\.(js|css)?$

{

expires 1h;#设置1小时过期

}

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

内容分发网络的价值在于它可以获取网站的静态文件,如CSS文件、图片和JavaScript文件,并通过与用户的物理位置更接近的Web服务器来分发这些文件。较短的距离就代表更快的加载时间。

CDN的一些代表性的例子有AWS CloudFront、Fastly或Cloudflare。CDN的另一个好处是,通过减少带宽,用户还可以降低由于流量而导致的停机时间中断的风险。无论从哪个方面来看,使用CDN带来的都是双赢的结果。

10、服务器启用gzip压缩功能

将要传输的文件压缩后传输到客户端再解压,在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用,也可用代码直接设置传输文件头,增加gzip的设置,也可从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。服务器性能不是很好的网站,要慎重考虑。

11、Ajax采用缓存调用

Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的

<script src=”xxx.js?{VERHASH}”,

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

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

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

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

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

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

15、合理使用Flush

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

    <!– css, js –>

</head>

<?php flush();?>

<body>

… <!– content –>

16、避免采用301、302转向

当浏览器、代理或搜索引擎派出的”爬虫”对某一页面或网址请求调用时,该调用页面或网址所在的网络服务器将会检查一个名为.htaccess的文件。该文件包含如何处理特定请求的指令,并在安全性上扮演关键角色。用户可对该文件进行修改,通过这个文件来通知浏览器、代理或”爬虫”,被调用页面属于临时移走 (302重定向)还是永久性移走(301重定向)。我们也可以通过网络托管服务而不是.htaccess’文件来实现301/302永久性重定向。

17、优化图片文件

统计数据显示,如果网站在3秒钟之内还没有加载成功,那么大多数用户都会选择关闭。由于图片在Web页面的可下载字节空间中占大多数,所以如果能够成功的对图片进行优化,那么Web页面的下载时间也会大大的减少。

确保图片正确优化的最佳方法之一是采用正确的大小和格式(JPEG、GIF或PNG)。目标是在不牺牲质量的情况下尽可能减少文件的大小,现在Web上有许多工具可以帮助解决这个问题。

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

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

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

20、配置ETags

ETag,全称为:Entity Tag,意思是实体标签,从名字上看,是对于某种实体的一个标识。它属于HTTP协议的一部分,也就是所有的Web服务器都应该(也确实能)支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”,客户端(浏览器)来请求的时候,可以比较,如果ETag一致,则表示该资源并没有修改过,客户端(浏览器)可以使用自己缓存的版本。

21、缓存

缓存是一种用于临时存储Web页面以减少带宽和提高性能的机制。当访问者到达站点时,站点会提供一个缓存的版本,除非在最后一次缓存中发生了变化。这节省了服务器的时间,并且使事情变得更快。启用浏览器缓存将使重复访问者更快、更快捷。

22、保持代码轻巧

重要的是尽可能缩小代码的数量,这意味着将HTML、JavaScript和CSS代码库压缩到更少的文件中,以优化它们的运行方式。例如,如果移动站点有5个JavaScript文件,浏览器将会发出5个单独的HTTP请求来获取它们。为了避免阻塞和等待时间,另一种方法是缩小并将这5个文件合并成一个精简的文件。

23、复核虚拟主机

另一个减少网站页面加载时间的简单方法是与你的主机提供商核实一下你的包是什么类型的。共享的主机帐户通常包括与其他数十家公司共享服务器空间,这些公司的网站速度受到使用服务器的人数的影响。如果是这种情况,那么可能是时候考虑一个专用服务器,该服务器只供你一个人占用。

欢迎各位小伙伴们继续补充。


GDCA一直以“构建网络信任体系,服务现代数字生活”的宗旨,致力于提供全球化的数字证书认证服务。其自主品牌——信鉴易®TrustAUTH® SSL证书系列,为涉足互联网的企业打造更安全的生态环境,建立更具公信力的企业网站形象。

上一篇:

下一篇:

相关新闻

 

领取优惠
免费预约

申请试用SSL证书

提交成功!

咨询客服