网页优化方案

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

2014-05-27 10:05 来源：木木SEO博客 编辑：雪萍【纠错】0人评论

 

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

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

一、合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享的文件，这样不只能简化代码，并且在执行JS文件的时候，若是JS文件比较多，就须要进行屡次“Get”请求，延长加载速度，将JS文件合并在一块儿后，天然就减小了Get请求次数，提升了加载速度。

二、Sprites图片技术

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

三、压缩文本和图片

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

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

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

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

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

六、从新布置Call-to-Action按钮

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

七、图片格式优化

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

八、使用 Progressive JPEGs

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

九、精简代码

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

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

网页中有不少脚本是在页面彻底加载完前都不须要执行的，能够延迟加载和执行非必要脚本。这些脚本能够在onload事件以后执行，避免对网页上重要 内容的呈现形成影响。这些脚本多是你本身网页的甲苯，每每更多的是一些第三方脚本，这样的有不少，好比评论、广告、智能推荐、百度云图、分享等等，这些 彻底能够等主体内容加载完后再执行。

十一、使用AJAX

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

十二、自动化的页面性能优化

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

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

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