马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网页制作 > 提高网页加载速度的一些方法和技巧

提高网页加载速度的一些方法和技巧

时间:2016-07-24   文章来源:马海祥博客   访问次数:

网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问。

提高网页加载速度的一些方法和技巧-马海祥博客

我们在访问一些网站时,总是感觉页面加载的速度不够快,这是什么原因导致的呢?作为网站的开发者又能做哪些网站优化来提高页面的加载速度呢?

以下马海祥博客总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨以此为参考对网页做些初步优化。

1、使用良好的结构

可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器要下载更多代码。

所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。

如果您确实不得不使用XHTML,试着尽可能对它进行优化。

2、不要使布局超载

坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则(具体可查看马海祥博客《提高网站速度的6种网站前端优化方法》的相关介绍)。

3、不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中,美观的按钮更加具有吸引力,但是它们的加载速度很慢。

此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化,当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。

4、检查cookie使用情况

设置一个较早的 expire 日期或者根本不设置 expire 日期,会缩短响应时间。

要在 PHP 语言中设置 cookie 的 expire 日期,使用以下代码:

<?php
 $expire = 2592000 + time();
 // Add 30 day’s to the current time
 setcookie(userid, “123rrw3”, $expire);
?>

这段代码设置cookie userid,并将 expire 日期设置为自当前日期之后30天。

5、不要包含不必要的JavaScript代码,尽可能将其外部化

应该明智地使用JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度,缩短JavaScript下载时间的另一种方式是使用外部文件,而不是包含脚本内联,这种方法也适用于CSS,因为浏览器会缓存外部化的文本,而(在HTML页面自身中)以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。

6、尽可能避免使用表格

表格被用作网页的主要构建块,但是作为页面布局元素,使用表格现在被认为是糟糕的做法,有时候,您必须使用表格(并且它们被认为是显示表格数据的出色实践),如果是这样,明确地指定表格单元格、行和列的宽度和高度,否则,浏览器必须执行许多操作来计算如何显示它们,这会降低页面加载速度。

7、删除任何不必要的元素

可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容,考虑将网页分为2个、3个或更多的独立页面。

8、一些优化网页的技巧

可以使用许多方法来优化您的网页,包括压缩JavaScript文件,使用超文本传输协议(Hypertext Transfer Protocol,HTTP)压缩,以及设置图像大小。

例如:访客点击访问这样一个目录地址:http://www.mahaixiang.cn/SEO/,去打开这个目录下的index.html文档,当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录,但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直接加载默认文档index.html或index.php就行了,这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用(更多的技巧,可查看马海祥博客《提升网站页面打开速度的12个建议》的相关介绍)。

9、压缩和缩小JavaScript文件

您可以使用 GNU zip (gzip) 来完成此任务,因为许多浏览器都支持这种压缩算法。

另一种替代方法是缩小文件,这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格,它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。

10、使用HTTP压缩,并始终使用小写的div和类名

可以使用HTTP压缩来减少服务器与浏览器之间的通信量,可以在Apache中配置HTTP压缩(.htaccess 文件),或者可以将其包含到页面中(对于PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。

但是请注意:不是所有浏览器都支持压缩,即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载,要在 Apache 中启用地毯式(blanket)压缩(即压缩所有文本和 HTML),使用以下命令:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。

另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名,由于大小写敏感性,并且使用的是无损压缩,<header> 与 <Header> 不同,它们被压缩为两个不同的标记。

11、设置图像大小

与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。

你会给每个图片加上height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示,如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度,所以在固定图片大小的情况下最好都使用上长和宽属性。

12、将CSS图像映射用于装饰功能

使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者,您可以使用某种名为 CSS sprites 的工具,CSS sprites可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素,您使用 CSS 来选择(通过调用某些位置和维度)用于特定元素的映射。

13、尽可能延迟脚本加载

一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。

通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。

如果将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

14、按需加载 JavaScript 文件

要按需加载 JavaScript,使用 import() 函数。

function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms;
  $import(src + seed);
}

15、验证函数加载

也可以验证一个函数是否被加载,如果没有,加载 JavaScript 文件。

验证函数是否被加载:

if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('http://www.yourfastsite.com/myfile.js');
}

注意:可以使用 defer 属性,但不是所有浏览器(包括 Firefox)都支持它。

16、优化 CSS 文件

DIV+CSS是现在流利的网页布局方式,DIV定义了元素,CSS控制显示效果,所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中,并且CSS文件代码也有很多行,我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容,如重复定义样式、空格等来瘦身。

据马海祥的经验来说,如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度,与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小(更多的技巧可查看马海祥博客《网站CSS代码优化的7个原则》的相关介绍)。

另外,使用外部文件代替内联定义来适应浏览器的缓存机制。

17、使用内容分布网络

内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法,当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。

此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。

18、对资产使用多个域来增加连接

CDN 的另一个优势是它们是独立的域,因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。

然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

19、在合适的时候使用 Google Gears

使用Google Gears是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序,但是也允许将页面元素持久化到用户的计算机上,因此,频繁加载但未进行更新的内容可以存储在 Gears 数据库中,该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库(而不是服务器)直接加载。

20、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG以最佳的文件大小提供了出色的质量,因此,如果进行选择的话,应该尽可能使用 PNG 图像(想用其他格式的站长,可查看马海祥博客《JPG、PNG和GIF图片的基本原理及优化方法》的相关介绍)。

21、保持 Ajax 调用简短、准确

当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时,这些技术为处理页面请求和响应提供了一种革命性方法。

然而,拨号用户可能从来没机会体验其真正的优势,因为在许多情形下,Ajax 需要在浏览器与服务器之间大量通信,因此,如果您能够保持 Ajax 调用简短和准确,可以避免用户花费无止尽的时间来等待元素刷新或响应。

22、进行一次较大的 Ajax 调用并在本地处理客户机数据

如果不能进行简短的 Ajax 调用,或者如果这些调用不能提供期望的结果,可以考虑一种替代方法:进行一次大的 Ajax 调用来获取所需的一切内容,然后让客户机在本地处理数据。通过这种方式,客户机只需等待一次(获取传入的数据),但是在此之后(当浏览器与服务器之间没有必要通信时),处理速度将更快。当然,还有大量 Ajax 优化技术,在此,马海祥就不一一列出了。

23、在沙箱中测试代码

还有一个经常被遗忘的常用技巧,尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试,但是有时候测试会使他们不那么重视维护任务,或者新功能添加得太快,并且未经过充分考虑或测试,结果,余下的脚本减缓了应用程序的速度。

如果您添加一项新功能,可以首先在沙箱里(完全脱离了应用程序的其余部分)进行测试,查看它作为单个函数的行为。通过这种方式,您可以反复检查,并分析性能和响应时间,无需考虑 Web 应用程序的其余部分。

然后,当新功能的行为符合预期时,可以将其引入到应用程序的其余部分中,运行其他测试,保证功能本身的行为符合预期。

24、分析站点代码

在许多场景中,自我反省是一个不错的建议,幸运的是,在开发过程中,我们可以使用工具来帮助反省,并尽可能客观地进行实践,像 JSLint(参见 参考资源)这样的工具的价值是无法衡量的,尽管其站点宣称它“可能令您备受挫折”,因为它向您提供了所有的潜在代码缺陷,这些缺陷不但使调试更加困难,而且可能导致更长的响应时间。

25、检查孤立的文件和丢失的图像

检查孤立的文件和丢失的图像是一种明智之举,大部分 Web 开发人员都会检查错误的文件引用,但是这里仍然需要说明一下,丢失的文件容易引起各种问题,因为它们会导致“The image/page cannot be displayed”之类的错误消息。

但是在网页速度优化方面,它们具有更大的缺陷:当浏览器寻找丢失的或孤立的文件时,它会消耗资源,这不可避免地会导致页面处理速度变慢。因此,请检查孤立或丢失的文件,包括拼写错误的文件名。

26、优化图像

图像能吸引访客的注意,但是每一张图片都需要从服务器下载到访客的电脑中,这无疑增加了页面的加载时间(具体可查看马海祥博客《实现网页图片预加载效果的3种技术方法》的相关介绍)。

因此,必须优化图像,优化方法包括适当减小图片尺寸,降低图片的颜色深度。

27、去掉不必要的插件

一些免费的插件能够增强网页的功能,但是如果添加了过多的插件,就会增加服务器的负担和页面加载时间。

在构建页面时,去掉不必要的插件,用一些内置的功能来代替插件。

28、减少DNS查询

DNS查询需要花费较长时间来返回IP地址,而浏览器在查询结果返回之前不会做任何操作,具有多种网络元素的页面,需要进行多次的DNS查询,花费的时间更长。

对此,马海祥的建议是减少不同域名的数量,就会减少DNS的查询,从而加速页面加载速度。

29、减少使用重定向

重定向增加了额外的HTTP请求,甚至有时候链向多个域名或是不存在的页面,大大的增减了延迟时间,因此要减少重定向。

30、使用内容分发网络CDN

服务器在处理大流量的数据是十分困难的,这最终导致页面加载速度变慢。CDN是位于全球不同地方的高性能网络服务,它会复制你网站的静态资源,并以最有效的方式来为访客服务,使用CDN,可以提升页面的加载速度。

31、把CSS文件放在页面头部,JS文件放在底部

把CSS文件放在头部可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源,把JS文件放在页面底部可以避免代码执行前的等待时间,从而提升页面的加载速度。

32、利用浏览器缓存

浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能,访客再次访问时,直接从缓存中读取内容而不需要重新加载,优化网站的缓存系统会降低网站的带宽和托管费用。

33、使用CSS Sprites整合图像

图像始终是网站优化时的顽疾,可以使用CSS Sprites来整合多个图像到几个输出文件,从而减少下载资源的往返次数和延迟,从而提高页面的加载速度。

34、压缩整合CSS、JS文件减少HTTP请求次数

压缩会移除一些不必要的字符,从而帮助减少文件大小和网页后续的加载时间。

现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接,所以当访问一个网页时浏览器需要多次向服务器请求这些文件,在请求和加载之间会产生不少的时间差,特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明显影响网页的加载速度。

所以,我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标,一次请求一个大图片比多次请求小图片速度要快不少。

同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

35、启用GZIP压缩

在服务器上压缩网站的页面能很好地提升网站访问速度,GZIP可以帮我们完成压缩必要资源,从而给用户发送最小的HTML文件和CSS/JS等资源。

36、服务器抗压能力

服务器抗压能力通常指的是服务器所能承受的最大访问人数,这是一个硬件指标,不过也可以通过对软件和页面的优化来提高服务器的抗压能力。

这里的服务器主要包括两项,一个是http的服务器(apache或者iis),还有一个是数据库服务器。

这是所说的优化主要是有效减少服务器的连接数、提高程序执行效率,比如静态化页面或者使用缓存可以减少数据库的压力,减少页面连接数可以减少http服务器的压力等,还可以通过安装一些软件或者模块来达到这个目的,比如zend的php加速引擎,以及apc等。

马海祥博客点评:

许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素,因此,你网站的页面加载时间是至关重要的,从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wyzz/1589.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 网页速度   加载速度  

上一篇:新手制作网页过程中必知的10个要点
下一篇:初学者学习网站制作必须要注意的一些事项

您可能还会对以下这些文章感兴趣!

  • 提高网站速度的6种网站前端优化方法

    最近有几个同事开通了个人博客,但却抱怨说因为的买的虚拟空间,所以个人博客网站打开速度很慢。对于这种现象,按照一般的情况来看,一个网站的访问打开速度的快与慢,全是看这个网站使用的空间配置,要是这个空间主机的配置不错,那么你的网站访问速度就会很快;相反,……【查看全文

    阅读:4951关键词: 提高网站速度   网站前端优化   优化方法   日期:2013-05-06
  • 如何利用dreamweaver工具批量制作网页模板

    对于网页模板的出现,可以说在很大程度上节省了美工和程序人员的工作时间,并大幅度提高了工作效率,一个合格的网页模板的确让我们可以有一条更好的路径对待一些低端的客户,能够快速的去完成我们的一些任务,而且这也是网页模板的理念所在。特别是大规模对网站进行更新……【查看全文

    阅读:1831关键词: dreamweaver   制作网页   网页模板   日期:2014-06-28
  • 网页制作过程中常用的20个功能代码

    一个好的网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。那么在网页制作过程中有哪些代码功能能使我们的网站更加的个性化呢? 1、让背景图不滚动 IE浏览器支持一个Body属性……【查看全文

    阅读:2687关键词: 网页制作   网页功能代码   网页代码   日期:2014-01-13
  • 初学者学习网站制作必须要注意的一些事项

    很多新手在网上浏览网页时,一定会看到不少设计独特、创意新颖、页面诱人的个人网页,遇到这些网页你也一定会驻足停留、仔细欣赏一番,同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头。如果你确实有这个想法,那就请你继续看完下面的内容,下面提供的要……【查看全文

    阅读:976关键词: 初学者   网站制作   日期:2017-02-11
  • 如何制作一个响应式网页?

    总体来说,响应式网页设计是一种新的网页设计思路,我们需要满足不同设备下的浏览模式,达到俱佳的体验效果。所以要想做好一个响应式网页,首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是……【查看全文

    阅读:4967关键词: 响应式网页   网页制作   如何制作网页   响应式设计   日期:2013-09-18
  • 移动端手机网站页面制作的25个设计要点

    对于移动用户来说,往往很容易忘记菜单选项,因此,你应该把自己最关键的“行为召唤”内容放置在一个醒目的位置上,这样用户就能轻松看到。所以,你需要让最重要的“行为召唤”内容占据到网站的主体部分上,用户就能够快速完成相关任务,另外,如果要继续执行下一个任务……【查看全文

    阅读:12889关键词: 移动端   手机网站   页面制作   设计要点   移动网站   日期:2014-05-05
  • 提高网页加载速度的一些方法和技巧

    许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素,因此,你网站的页面加载时间是至关重要的,从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加……【查看全文

    阅读:6310关键词: 网页速度   加载速度   日期:2016-07-24
  • 网页制作中代码关于seo的18个小技巧

    网页设计 是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。 随着浏览器和W3C标准一致性的改善,XHTML/XML(可扩展标识语言)与CSS(层叠样式表)共同用作网页内……【查看全文

    阅读:960关键词: 网页制作   网页制作代码   seo技巧   日期:2012-10-09
  • 网站制作之前构建开发环境的具体操作步骤

    在制作网站,特别是开发网站数据库之前,首先应该认真构建好Dreamweaver MX 2004+ASP.NET开发环境。对于学习的新手,由于网上的配置方法都是很久之前的,及时性不高,环境配置往往令人很头疼,我初学php配置环境时配置了2个晚上,每次总是会出现这样或那样的问题,所以……【查看全文

    阅读:764关键词: 网站制作   日期:2017-06-27
  • 新手制作网页过程中必知的10个要点

    一个好的网站网页不光只是看起来好看而已,还要是用户友好型的,通常来说,一个干净、简单的网页设计最终会成为一个可用性高的网页设计,因为它在与用户的交互中不会使其产生混淆,当页面上有太多网站功能和组件时,将会分散网站用户的注意力而失去原本浏览网站的目的……【查看全文

    阅读:2218关键词: 制作网页   网页制作   日期:2014-11-30
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

如何利用极客精神优化网站的网络组件和代码 一个完整的企业网站首页应该具备什么因素?