提升网站页面打开速度的12个建议

我们知道用户都喜欢浏览速度快的网站,不喜欢花费太多的时间等待网页的打开,等待的时间过长,会让用户失去耐心,甚至烦躁时会直接关闭网页,这样就会失去一些潜在的客户了。

其次,从SEO的角度来说,关键字的排名与网页的打开速度也有关系,Google的Web搜索团队曾在官方博客上宣布,将把网站的速度作为PR(PageRank)算法的一个因子,在所有因素都相等的情况下,速度快的网站将排在速度慢的网站前面。同时指出很多网站都没有利用最佳的页面优化技术,页面加载速度都存在很大缺陷。那么,我们该如何补救并提高网站页面的加载速度呢?

1、合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度(具体可查看马海祥博客的《提高网站速度的6种网站前端优化方法》相关介绍)。

用户打开用css设计的网页,css一般被下载用户本地计算机,不像html元素表现标签,每次网站的网页都要调用一次,使用css,只需要一次就好了!另外,css在某些地方可以替代图片,这就是为什么现在提倡div+css的原因!

2、Sprites图片技术

Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用CSSSprites能很好地减少网页的http请求,从而大大的提高页面的性能。

CSSSprites在国内很多人叫css精灵,很早就有了,在很多大型网站都有用到,特别是一些所有页面都存在的图标用得比较多,很好的提升加载速度。

3、压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都可以在大小70%左右。

一般文本压缩用得比较多,通常都是直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

4、延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。

比如:WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。

5、确保功能图片优先加载

网站主要考虑可用性的重要性,一个功能按钮要提前加载出来,用户进入下载页,一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片,谁能忍受(对于其解决方法,大家可通过马海祥博客的《实现网页图片预加载效果的3种技术方法》相关介绍来详细的了解)?

还有个问题需要注意的是:一些人经常忘记写图片的长和宽了,这些标记是告诉浏览器打开图片之前的尺寸,如果能提前设置好图片的height和width,浏览器加载网页时就会保留一块区域,加快整个网页显示速度。

6、重新布置Call-to-Action按钮

其实这个和上面一条是差不多的,都是从用户体验速度着手,跳过了网页的整体加载速度。速度没变,只是让一些行为按钮提前,Call-to-Action按钮一般习惯设计在页面底部,这样的习惯对于用户来说并不总是好的,购买用户需要等到最下面加载出来才能点击下一步操作。

可以调整CTA按钮的位置或使用滑动的图片按钮,很多大型购物网站的加入购物车就是这种类型。

7、图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式,可以节省大量带宽,减少处理时间时间,大大加快页面加载速度,这是一种很常见的做法。

8、使用Progressive JPEGs

Progressive JPEGs图片是JPEG格式的一个特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰,它相当于交织的GIF格式的图片。

高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的,快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户,这无疑有很好的体验。

9、精简代码

这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。

在同等网络环境下,页面越小自然下载时间越快,所以在合理范围内减少页面大小是可以优化下载速度的。而页面大小主要是由HTML的代码量来决定的(当然也可能包括一些css或者js的代码,不过主体还是HTML代码),要想减小页面的大小,就得根据W3C的标准来优化HTML代码结构,去除一些垃圾无意义的代码。

其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。

10、延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完前都不需要执行的,可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的甲苯,往往更多的是一些第三方脚本,这样的有很多,比如:评论、广告、智能推荐、百度云图、分享和点击次数统计等等(具体可查看马海祥博客的《如何解决点击次数影响网页加载速度的问题》所提供的解决方法),这些完全可以等主体内容加载完后再执行。

11、使用AJAX

对于网页的打开,其实是很复杂的过程。从网页的申请打开,到web服务器的响应,编译等动作,然后发回给浏览器,才显示我们面前的文字和图片,多媒体文件等。所以我要尽量减少响应次数,现在ajax在这方面就运用的不错。当然,一个静态页面就例外了,静态页面多注意图片大小和网页设计上就行了。

AJAX即“Asynchronous Javascript +XML“,是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。

12、自动化的页面性能优化

自动化的页面性能优化也就是借助工具了,网站提速工具有很多,相信大家在网上也看到了很多,具体的效果也很难断定,所以这里也就不多说了。

时间: 2024-10-15 01:54:23

提升网站页面打开速度的12个建议的相关文章

网站的打开速度往往被css等文件影响着

我想大家都接触过Javascript和CSS吧,网站大量的特性都会用到Javascript和CSS文件,如果网站做大了,这些文件也会越来越多,这些文件一多了,就要影响到网站打开得速度,怎么解决这个问题呢?减少Javascript和CSS文件的大小,从而提高我们网站打开速度: 如何知道是哪些css.html等文件影响了网站打开速度呢? iis7网站监控 获取严重占用加载时间的JS或者图片.css等html所用文件. 当我们的网站内容多了之后,我们打开自己的网站就会非常的慢,有很多人呢就会换好的服务

影响网站的打开速度因素有哪些?

一般人对网页打开速度的期望是秒,可以忍受长达5秒,另一秒钟会选择关闭网页. iis7网站监控 网站是否被劫持.DNS是否被污染.网站打开速度测试的检查. 如果我们的网站开得很慢,它基本上会被用户抛弃.有很多类似的网站,任何人都想体验好的网站.对于一个网站来说,打开网站的速度比什么都重要,而且解决这个问题其他要简单得多. 网站开放速度慢的原因有四个. 1.过分追求网站的展示效果 2.是网站编码和编程不够简洁. 3.Web服务器中的病毒 4.网站的压缩格式不适合. 原文地址:https://blog

Asp.net项目因Session阻塞导致页面打开速度变慢

发现罪魁祸首是Session阻塞造成的.默认情况下session状态是“可写状态”(EnableSessionState=”true”),即当用户打开任何一个页面时,该页面的Session就会持有一个写锁定,写锁定会阻塞所有的读写锁定,故只有等该页面处理完毕后才释放对应的Session写锁定,在释放之前访问其他页面时将被阻塞住.详细描述如下: 当页面对Session具有可写功能(即页面有<%@ Page EnableSessionState="True" %>标记),此时直

帝国cms提高网站网页打开速度的手段

1.减少页面HTTP请求数量 2.使用CDN(Content Delivery Network)网络加速 3.添加文件过期或缓存头 4.服务器开启gzip压缩 5.css格式定义放置在文件头部 6.Javascript脚本放在文件末尾 7.避免使用CSS脚本(CSS Expressions) 8.css.javascript改由外部调用 9.压缩Javascript.CSS代码 10.避免采用301.302转向 11.养成良好的开发维护习惯,尽量避免脚本重复调用 12.配置ETags 13.Aj

升级到Sharepoint 2013后页面打开速度慢

这个问题现在有了一些新的发现. 首先,我找到了重现客户那里出现的那个复杂SQL语句的方法.这个现象其实是这样的: 当WebApplication的“List View Threshold” 数量大于 文档库中文件个数的时候,如果是非管理员的用户打开文档库,就会出现那样的SQL语句. 当“List View Threshold”数量小于文档库中文件个数的时候,如果是非管理员的用户打开文档库,会得到一个警告说文档库无法打开.而如果是管理员,就可以打开,而且SharePoint会使用另一个比较适合大数

优化Laravel网站打开速度

Laravel是一个功能强大的框架,组件很多,代码也很庞大,它的易用方便是牺牲了性能的,即便如此它仍然是一个优秀的框架,但在正式环境下要做好优化提升网站的打开速度. 1.关闭debug 打开.env文件,把debug设置为false. PHP APP_ENV=local APP_DEBUG=false APP_KEY=base64:sT/aTFeaE13eyao1Raee6jC9Ff+Yle1SE+wtyk0H6B4= 2.缓存路由和配置 php artisan route:cache php

Nginx&mdash;&mdash;使用 Nginx 提升网站访问速度【转载+整理】

原文地址 本文是写于 2008 年,文中提到 Nginx 不支持 Windows 操作系统,但是现在它已经支持了,此外还支持 FreeBSD,Solaris,MacOS X~ Nginx("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器. Nginx 是由俄罗斯人 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru(俄文:Рамблер)站点开发的,第一个公开版本 0.1.0 发布于2004年10月4日.

使用 Nginx 提升网站访问速度(转)

Nginx 简介 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了. Igor 将源代码以类 BSD 许可证的形式发布.尽管还是测试版,但是,Nginx 已经因为它的稳定性.丰富的功能集.示例配置文件和低系统资源的消耗而闻名了. 根据最新一期(08 年 6 月份)的 N

提高网站打开速度的7大秘籍

很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法. 1: 缩小Javascript和CSS文件 如果你的网站大约有50-60%的用户是第一次访客,那么这些人会下载Javascript和CSS,如果这些文件很大浏览器会下载很长时间. 使用压缩工具可以减少Javascript和CSS尽一半的文件大小,如果你有信心使用“命令行”我强烈推荐使用雅虎的YUI压