全国|切换城市 小程序开发 · APP开发 · 网站建设首选小二CMS,专业高端品牌企业网站制作设计公司,欢迎来电:198-1095-0281 网站软件开发首选小二CMS
NEWS CENTER

互联网资讯

小二CMS · 专注企业数字化转型的资讯与干货

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

2014-12-03 850 阅读 互联网资讯 字号
文章摘要

网友上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些。

核心要点
网友上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些。因此我觉得我们有必要去提高网页的打开速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!下面给出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的那种翻页后载入方式。
文章声明

本文标题:20点提高网站访问速度缩短网页加载时间!

文章内容来源于网络,文章表达观点不代表本站观点,文章版权归原作者所有。若有侵权,请联系本站站长处理!

小二CMS介绍

我们立足合肥,业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队,专注于将前沿技术通过高效简捷的途径呈现给客户,量身打造优质解决方案。我们致力于通过持续努力,成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴,协助客户在新经济时代敏锐捕捉商机,拓展发展空间,构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统,提供从官网搭建、品牌推广到运营增长的一站式服务,助力中小企业低门槛拥有专业级互联网阵地。

了解全部业务
小二CMS微信二维码
扫码咨询 · 关注微信

这篇文章对你有帮助吗?

你的每一次鼓励,都是我们持续打磨优质内容的动力

全部评论
0
ABOUT US

关于我们

以 AI 驱动创新,以品质铸造口碑

关于我们

小二CMS一家融合AI人工智能与前沿互联网技术的数字化解决方案服务商,专注于高端网站建设、微信小程序开发、移动端应用研发及企业数字化转型服务。我们将AI技术深度融入产品研发与服务流程,通过智能算法、大模型应用与自动化工具,为客户提供更高效、更精准的数字化解决方案。

自2013年成立以来,我们已成功交付3000+个精品项目,服务客户遍布金融、零售、制造、教育、医疗、互联网等多个行业领域。我们拥有资深的技术团队与丰富的实战经验,在AI智能应用、复杂业务建模、高性能架构设计、跨平台开发及企业级安全保障等方面具备专业能力。

我们相信,AI不是替代人,而是赋能人。选择小二CMS,就是选择一支懂技术、懂AI、更懂您业务痛点的数字化创新团队。让我们以AI之力,将您的品牌愿景与市场机遇转化为可落地的数字现实,共同驱动业务增长与品牌价值升级。

3000+ 精品项目 12年 行业深耕 98% 客户满意
我们的优势
01
AI深度融合大模型+智能自动化
02
十三年深耕专注高端网站建设
03
全栈技术能力前后端+跨平台开发
04
资深策划团队深度洞悉行业需求
05
SEO深度优化搜索引擎友好排名
06
完善售后体系全程无忧技术支持
07
数据安全保障多重防护体系
08
弹性架构灵活支持二次开发
我们的不同

我们是一支充满激情与创造力的团队,痴迷代码,沉醉设计,深耕AI技术。我们坚信:技术不是冰冷的工具,而是驱动商业增长的核动力。

AI先行

将AI融入产品与服务全流程

品质至上

客户第一,追求卓越用户体验

彼此成就

客户的成功,才是我们真正的成功

产品演示

产品演示二维码

请使用微信扫描二维码

查看产品演示

QQ 客服

扫码添加好友 · 专属客服在线

QQ二维码
QQ号:460623785

微信客服

扫码添加 · 一对一专属服务

微信二维码
微信号:yanboss0901
PROFESSIONAL SERVICE

联系我们

选择最适合您的方式 · 专属顾问 7×24 在线为您服务

微信客服

扫码添加 · 一对一专属服务

微信二维码
微信号 yanboss0901

QQ 客服

扫码添加 · 专属客服在线

QQ二维码
QQ号 460623785

电话咨询

工作日 9:00-21:00 · 极速响应

立即拨打

在线客服

智能 + 人工 · 即时沟通

遇到问题?点击进入在线客服,智能助手与人工顾问随时为您解答。

进入在线客服
微信咨询
QQ咨询
电话咨询
在线客服
回到顶部
预约演示 · FREE DEMO

预约产品演示

留下联系方式,顾问将尽快为您安排一对一演示

信息严格保密,仅用于与您联系

提交成功

我们已收到您的预约,顾问将尽快与您联系。