联系我们
0592-2203787
提高网页加载速度方法与技巧
发布时间: 06/23/2016 02:49:20  点击数: 2
几年前,谷歌的仅仅因为网页加载时间多了0.5秒,流量就下降了20%。

你还觉得这种情况不算糟糕?如果一个网页在3秒钟之内无法加载,那么会失去接近一半的流量。所以现在精明的网站运营商会将网页加载速度控制在1秒钟以内。

加载速度问题在移动端上却显得很严重,在移动端上,处理能力有限,连接速度参差不齐。根据杰赢网络公司专家的理论,在移动端上,如果网页加载速度超过5秒,那么74%的人会离开该网页。

如今,移动端的使用已经超过电脑端,所以提升加载速度也不能仅限于电脑网页。

关键是什么?如果页面无法加载,没有人会进行购买行为的转化!诚然,标题非常重要,这点也是很明确的。设计优美的网页也是应该的,社交平台也是增加公信力的关键。但是这些并不能加快网页加载速度,所以用户也就不会转化购买行为。

以下是厦门杰赢解决网页加载速度的几点建议。

一、使用良好的结构

可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 和 标记),这意味着浏览器要下载更多代码。所以,事情都有两面性,尝试在您的网页中使用较少的 XHTML 代码,以减小页面大小。如果您确实不得不使用 XHTML,试着尽可能对它进行优化。

二、不要使布局超载

坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则。

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

使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力,但是它们的加载速度很慢。此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化(search engine optimization,SEO)。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。

四、检查cookie使用情况

设置一个较早的 expire 日期或者根本不设置 expire 日期,会缩短响应时间。要在 PHP 语言中设置 cookie 的 expire 日期,使用以下代码:

$expire = 2592000 + time();

// Add 30 day’s to the current time

setcookie(userid, “123rrw3”, $expire);

?>

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

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

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

六、尽可能避免使用表格

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

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

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

八、一些优化网页的技巧

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

九、压缩和缩小 JavaScript 文件

您可以使用 GNU zip (gzip) 来完成此任务,因为许多浏览器都支持这种压缩算法。另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格。它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。

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

可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩(.htaccess 文件),或者可以将其包含到页面中(对于 PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。但是请注意:不是所有浏览器都支持压缩。即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式(blanket)压缩(即压缩所有文本和 HTML),使用以下命令:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的 

元素和类名。由于大小写敏感性,并且使用的是无损压缩, 与 不同,它们被压缩为两个不同的标记。

十一、设置图像大小

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

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

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

十三、尽可能延迟脚本加载

一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

十四、按需加载 JavaScript 文件

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

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);

}

十五、验证函数加载

也可以验证一个函数是否被加载,如果没有,加载 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)都支持它。

十六、优化 CSS 文件

如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小。另外,使用外部文件代替内联定义来适应浏览器的缓存机制。

十七、使用内容分布网络

内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。

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

CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

十九、在合适的时候使用 Google Gears

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

二十、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG 以最佳的文件大小提供了出色的质量。因此,如果进行选择的话,应该尽可能使用 PNG 图像。

厦关于厦门杰赢网络科技有限公司 http://www.jeawin.com

厦门杰赢网络科技有限公司(Jeawin)系中国外贸网络营销服务标杆企业,专注正规、专业、高效的外贸网络营销方式方法研究并拥有丰富外贸营销推广经验,自公司创始以来,为香港台湾与及中国内陆大公司等许多外贸企业进行外贸网站推广,小公司也因为跟杰赢合作迈进世界大门,杰赢为中国外贸企业的全球化营销提供一站式解决方案及咨询服务。400-918-8880。
 

新闻
技术支持
其它导航