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

标签: WEB 编程开发 网站优化 | 发表时间:2015-02-04 13:12 | 作者:codeceo
出处:http://www.codeceo.com

优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键。

下面我将介绍几个优化网站加载网页速度的简单方法,一起来看一下。

1.服务器响应时间

即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果。当涉及到提高网站的速度,服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的小贴士。

  • 有独立的服务器,而不是选择共享/托管服务器。
  • 提高Web服务器的质量。
  • 移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。

2.浏览器缓存

浏览器缓存可以减少HTTP请求,从而反过来提高网站的加载速度。下面就是如何利用浏览器缓存的代码示例:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

注意:如果过期时间与文件挂钩,而此时文件中的内容需要更改的话,那必须先重命名文件,以便浏览器可以获取新添加的代码。

3.gzip压缩

gzip压缩是一个压缩实用程序,我们可以用它来快速加载网站。它的工作原理是在发送HTML和CSS文件到互联网浏览器之前,先压缩文件大小。允许mod_defalte模块启用Gzip压缩,下面是如何使用它的代码示例:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

4.异步脚本

还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本,网站访问者也不再需要不得不按捺下性子,等待所有的脚本加载完之后才能呈现页面。在异步模式中,脚本是在后台下载的。通常,我们会将第三方脚本作为异步脚本,因为下载这些脚本时常会让网站速度变得非常慢。

<script async src="http://www.yoursite.com/script.js"></script>

5.内容分发网络(CDN)

内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。要是有网站访问者请求文件和网页时,就可以直接从就近的网站服务器发送过来(也可以是从负载最小的服务器)。

6.优化JavaScript、HTML和CSS

优化JavaScript和CSS也可以提高一个网站的网页速度,而且这个方法非常简单。优化JavaScript、HTML和CSS就是删除所有不必要的空格和注释,从而减小文件大小。下面是一些最小化JavaScript和CSS的流行工具,非常有用。

7.置于顶部的样式表和底部的脚本

将样式表放在顶部有助网站的迅速加载,因为这样可以使得网页渐进式呈现。一般地,所有的互联网浏览器都支持在给定时间内并行下载两个组件(图像、样式和脚本)。但是通常而言,霸道的脚本会在并行下载时会阻止其他的下载,直到脚本下载完毕。

8.避免阻塞型的JavaScript和CSS

在浏览器呈现网页之前,它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中,如果遇到了脚本,此过程就会中止,转而先执行脚本,完了才会继续原先的活动。因此建议避免阻塞型的JavaScript,尤其是外部脚本。

阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript,或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上,同时需要确保CSS的优化。

9.JavaScript的延迟解析

为了加载网页,浏览器必须解析所有的<script>标记内容,从而增加了网站的加载时间。通过延迟解析脚本,那么就可以减少初始网站的加载时间了。

10.启用Keep Alive

当用户通过浏览器请求网页时,浏览器首先需要访问HTML文件。然后它才能读取这些文件,并请求与其他资料相关联(此处的资料可以是CSS,JavaScript,也可以是任何相关的图像)。

如果“Keep Alive”选项被禁止,那么下载网站的进程通常就会增加,从而拖累了网站速度。启用KeepAlive的另一个好处是,它可以减少CPU的使用。

语法: KeepAlive On

11.图像和文件格式

图像对于任何网站都非常有价值,因为它能传达一些强有力的信息给网站的访问者。最常见的图像格式是GIF、JPEG、PNG等。每种格式都有其长处和局限。建议使用JPEG格式,而不是GIF和PNG图像,除非图像包含Alpha因子或者是透明的。

12.优化代码:不使用内联CSS

内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作,给网站管理员带来各种不便,还会进一步增加网页的大小。

13.文件分离

网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是,这么做可以提高服务器的稳定性,特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件,这样可以增加并行下载的数量。

14.尽量减少HTTP请求

还有一种简单的优化网页速度的方法是,减少HTTP请求。当一个网站一下子收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间。那么,又该如何减少HTTP请求?请见以下步骤。

  • 减少网站上的对象数量。
  • 最小化网站上的重定向数量。
  • 使用CSS Sprites技术(只要你需要的那部分图片内容)。
  • 结合JavaScripts和CSS。

上述建议已被证明在优化网站的页面加载速度上非常有效。总之,炫彩夺目的图形,有趣的内容和更好的导航可以帮助你获得更多的网站访问者,但更快的网页加载速度则能帮助你留住他们。

相关 [优化 网站 加载] 推荐:

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

- - 码农网
优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键. 下面我将介绍几个优化网站加载网页速度的简单方法,一起来看一下. 即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果.

利用HTTP Cache来优化网站

- scourgen - 博客园-首页原创精华区
用户总是讨厌等待,面对加载的Video和页面,是非常糟糕的用户体验. 所以如何利用Cache来优化网站,值得深入研究. 缓存是一个到处都存在的用空间换时间的例子. 通过使用多余的空间,我们能够获取更快的速度. 用户在浏览网站的时候,浏览器能够在本地保存网站中的图片或者其他文件的副本,这样用户再次访问该网站的时候,浏览器就不用再下载全部的文件,减少了下载量意味着提高了页面加载的速度.

网站性能优化工具大全

- - 前端观察
网站性能优化(WPO)已经成为一个非常重要的话题了,越来越多的互联网公司开始有WPO的职位,而相关技能也是对前端开发工程师的重要技术要求之一. 国外大牛Steve Souders在参加 WebPerfDays London期间,收集了大量常用的网站性能优化工具,这里和大家分享下. Performance Analyzer (收费).

如何优化网站信息架构

- - 钛媒体网
最近突然想写个专题类的文章,关于如何让用户更方便快捷地在网站上寻找到他们需要的信息,当然不能脱离博客的主题——网站数据分析,所以这里主要介绍的是如何通过网站分析来优化网站,实现用户对信息的快速获取,首先介绍的是网站的信息架构. 关于信息架构,网站设计的同学才是专家,我在这里只是班门弄斧,根据大学里面阅读的信息架构类文献资料的一些残存的记忆,再加上这几天临时抱佛脚的简单温习,在这里表述一下我的一点拙见.

网站页面优化策略

- - 月光博客
  网站的页面优化,也即网页优化是对网页的程序、内容、版块、布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关的关键词能有好的排位. 使网站更容易被搜索引擎收录,提高用户体验和转化率进而创造价值. 下面主要从网站代码、标签、正文等几个方面来讲述网站的页面优化.

【译】18个网站优化技巧

- - 淡忘~浅思
快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的. 网站页面的加载速度也是衡量网站性能的一个重要因素. 如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更大的代价. 页面的加载速度会对用户的行为和转化率产生很大的影响. 有哪些简单的方式可以优化加载速度呢.

Netflix的网站优化经验

- - 程序师
Netflix团队首先要做的一件事是改进他们的整体前端架构. 改版前的netflix.com网站对于服务端生成html标记与客户端的增强这两个过程进行了严格的分离,采用这一设计的主要原因在于前后端所使用的编程语言不同. 服务端主要使用Java的技术栈以生成基本的html页面,而在浏览器端的工作则主要是通过jQuery等JavaScript库的使用为服务端生成的html添加一些客户端的行为.

Android工具库xUtils1.9.8发布-orm性能优化,图片加载优化...

- - 开源中国社区最新新闻
感谢关注xUitls的网友最近一段时间给予的热心反馈,xUtils近期做了很多细节优化之后,功能和api已经稳定.         1.9.8主要更新内容:.         * orm模块添加列类型转换接口,支持自定义类型字段作为列映射;.         * bitmap模块优化默认参数,取消默认动画,加载更快速.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.

浏览器的加载与页面性能优化

- 彦强 - 百度泛用户体验
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.