页面加载速度优化的12个建议

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷。那么该如何补救,提高网站页面的加载速度呢?

报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验。网站运营人员可以通过这些建议来解决页面加载速度难题。编译如下:

1、合并Js文件和CSS

JS代码CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度。

2、Sprites图片技术

Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用CSSSprites能很好地减少网页的http请求,从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵,很早就有了,在很多大型网站都有用到,特别是一些所有页面都存在的图标用得比较多,很好的提升加载速度。

3、压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都可以在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

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

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。

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

网站主要考虑可用性的重要性,一个功能按钮要提前加载出来,用户进入下载页,一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片,谁能忍受?

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

其实这个和上面一条是差不多的,都是从用户体验速度着手,跳过了网页的整体加载速度。速度没变,只是让一些行为按钮提前,Call-to-Action按钮一般习惯设计在页面底部,这样的习惯对于用户来说并不总是好的,购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。

7、图片格式优化

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

8、使用 Progressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一个特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的,快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户,这无疑有很好的体验。

9、精简代码

这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。

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

网页中有很多脚本是在页面完全加载完前都不需要执行的,可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的甲苯,往往更多的是一些第三方脚本,这样的有很多,比如评论、广告、智能推荐、百度云图、分享等等,这些完全可以等主体内容加载完后再执行。

11、使用AJAX

AJAX即“Asynchronous Javascript +XML“,是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。

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

自动化的页面性能优化也就是借助工具了,网站提速工具有很多,这里Radware推荐了自家的RadwareFastView,也算Radware给自家做了一个广告,这里不多说了。

以上就是Radware给出的12个页面加载速度优化建议,加入了个人的一些建议。

欢迎关注木木SEO博客:http://blog.sina.com.cn/mumuhouzi微信公众号:mumuseo

注:相关网站建设技巧阅读请移步到建站教程频道。

时间: 2024-10-01 01:04:58

页面加载速度优化的12个建议的相关文章

页面加载速度优化

1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度. 2.Sprites图片技术 Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来.这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整

前端页面加载速度优化---Ngnix之GZIP压缩

gzip on; #开启Gzip gzip_static on;#是否开启gzip静态资源 #nginx对于静态文件的处理模块,该模块可以读取预先压缩的gz文件,这样可以减少每次请求进行gzip压缩的CPU资源消耗.该模块启用后,nginx首先检查是否存在请求静态文件的gz结尾的文件,如果有则直接返回该gz文件内容.为了要兼容不支持gzip的浏览器,启用gzip_static模块就必须同时保留原始静态文件和gz文件.这样的话,在有大量静态文件的情况下,将会大大增加磁盘空间.我们可以利用nginx

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

优化页面加载速度的方法

1. 优化图像 图像对于吸引访客的关注是很重要的.但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上.这无疑增加了页面的加载时间,因此很可能让用户离开你的网站.所以,优化图像是非常必要的. 过大的图像需要的下载时间更多,因此要确保图像尽可能的小.可以使用图像处理工具如PS来减小颜色深度.剪切图像到合适的尺寸等. 2. 去掉不必要的插件 一个非常值得关注但经常被忽略的因素是你网站安装的插件.如今,大量免费的插件诱导网站开发者添加很多不必要的功能.您安装的每个插件都需要服务器处理

10种优化页面加载速度的方法——转

小于2秒的页载入时间被认为是优良的,而且高达4秒是可接受的.而大于5秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验.这里列出了10种方法,可以快速提升你网站的性能. 1. 优化图像 图像对于吸引访客的关注是很重要的.但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上.这无疑增加了页面的加载时间,因此很可能让用户离开你的网站.所以,优化图像是非常必要的. 过大的图像需要的下载时间更多,因此要确保图像尽可能的小.可以使用图像处理工具如PS来减小颜色深度.剪切图

基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的: 2. 静态文件本地缓存有两种方式 HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,很多文章讲的比较详细,推荐:https://www.cnblogs.com/chinajava/p/5

网站加载速度优化的14个技巧

下面我将介绍几个优化网站加载网页速度的简单方法,一起来看一下. 1.服务器响应时间 即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果.当涉及到提高网站的速度,服务器响应时间起着重要的作用.下面是一些提高服务器响应时间的小贴士. 有独立的服务器,而不是选择共享/托管服务器. 提高Web服务器的质量. 移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态. 2.浏览器缓存 浏览器缓存可以减少HTTP请求,从而反过来提高网站的加载速度.下面就是如何利用浏览器缓存的代

Unity3d插件SmoothMoves加载速度优化

我们游戏是使用Unity3d做的2D游戏,角色特效等都使用SmoothMoves来制作(在国内估计也算奇葩一朵吧,据说燃烧的蔬菜也是SmoothMoves作的),游戏中的所有的资源--角色.特效.技能ICON.角色ICON.音效等几乎都使用assetbundles来实现. 问题:加载一场战斗的时间大概要30s左右!!! 解决方案关键字:依赖打包.数据块共享.冗余数据剔除 优化后:5s左右 :) 1. 依赖打包 1.1 使用AssetDatabase.GetDependencies()接口可以查看