南京SEO|南京网络公司|南京网站优化|南京网站建设|南京网站制作|南京做网站|浩浪网络|中商网|

南京网站优化:13个简单步骤

今年早些时候,雅虎性能团队的史蒂夫Souders发表了一系列的前端性能优化优化页的“规则”

本教程介绍一种实用的,例如为基础的方法来执行这些规则。它有针对性的对web开发的一个小预算,谁最有可能使用共享的主机,并下工作,这样的设置的种种限制。共享主机难以发挥Apache的配置 - 有时甚至是不可能的 - 所以我们看看你可以做些什么,由于某些共同的限制,并假设你的主机上运行PHP和Apache。

本教程分为四个部分:

  1. 基本的优化规则
  2. 优化资产(图像,脚本和样式)
  3. 具体到脚本的优化
  4. 具体到风格的优化
积分和建议读

本文不打算详细解释雅虎的性能规则,所以你会做得很好,为更好地理解其重要性,通过他们自己的阅读,他们背后的推理规则,以及如何来。这里的问题的规则列表:

 

  1. 少的HTTP请求
  2. 使用内容交付网络
  3. 添加Expires头
  4. Gzip已组件
  5. 置于顶部的CSS
  6. 移动脚本的底部
  7. 避免CSS表达式
  8. 使JavaScript和CSS外部
  9. 减少DNS查找
  10. 缩小的JavaScript
  11. 避免重定向
  12. 删除重复的脚本
  13. 配置ETag的
 

你可以阅读这些规则雅虎 开发者网络站点。你也可以看看这本书由史蒂夫Souders“高性能网站陶依尔Tenni锐博客的性能研究文章

基本的优化规则

减少下载大小

减少下载大小是不是即使在雅虎的规则列表 - 可能是因为它是如此明显。不过,我不认为这伤害重申一点 - 让我们称它为#0条。

当我们看一个简单的网页,我们看到:

  • 一些HTML代码
  • 所引用的HTML不同的页面组件(资产)

资产是图片,脚本,样式,也许一些诸如Flash动画或Java小程序(记得那些?)外部媒体。因此,当涉及到下载大小,你的目标应该有尽可能轻巧的所有资产 - 这也延伸到页面的HTML内容的意见。创建精益HTML代码往往意味着使用(语义)的标记,这也与SEO(搜​​索引擎优化)的努力,是一个网站创建过程中的必要组成部分的重叠。作为最专业的Web开发人员都知道,一个良好的标记的主要特点是,它只是描述的内容,而不是介绍页面(无布局表!)。任何布局或表象元素应转移到CSS。

这里是一个很好的方法为导航菜单HTML标记的一个例子:

<ul id="menu"> <LI> <a href="home.html">首页</ A> </李> <LI> <a href="about.html">关于</ A> </ LI> <LI> <a href="contact.html">联系</ A> </ LI> </ UL>

这种标记应提供“挂钩”,以便为有效​​利用的CSS菜单看,然而,你想让它 - 这是否意味着加入花哨的子弹,边界,或翻转,或放入一个水平菜单的菜单项。标记是最小的,即有更少的字节下载;它的语义,这意味着它描述的内容(一个导航菜单链接的列表);和最后,是最小的,它也给你1搜索引擎优化的优势:它是普遍同意搜索引擎喜欢了,他们索引的网页的内容标记的比例。

一旦你确定你的标记是轻量级和语义,你应该去通过自己的资产,并确保他们也最小尺寸。例如,检查是否有可能更压缩图像,而不会失去太多的质量,或选择不同的文件格式,让你更好的压缩。如的工具PNGOUTpngcrush是一个很好的地方开始。

少的HTTP请求

减少HTTP请求的结果是影响最大,最重要的优化技术如果你的时间是有限的,你只能完成一个优化的任务,挑这一个。HTTP请求通常是最“昂贵”的活动,同时显示您的网页浏览器执行。因此,你应该确保你的页面,使尽可能少的要求。

你怎么能去,同时保持您的网页的丰富性?

  • 结合脚本和样式表:你有几个<SCRIPT>标签在你的头上呢?好吧,合并成一个JS。文件,并保存您的访问者往返;然后做相同的CSS文件。
  • 使用影像精灵:这种技术可以让你合并成一个几个图像,并使用CSS来显示只有一部分,这是需要的图像。五年或十年的图像合并成一个单一的文件时,你,你已经是一个巨大的节能在请求/响应的开销
  • 避免重定向:重定向又增加了客户端-服务器的往返,以便立即处理您的网页后,收到的初步反应,而不是浏览器将不得不作出另一个请求,并等待第二个响应。
  • 避免帧:如果您使用框架,浏览器要求至少有三个HTML页面,而不是只有一个-那些的框架以及每个帧。

你已经有了现在的基础。总之,使你的网页,其资产规模较小,并结合他们可以使用更少的资产。如果你在这方面只优化集中,您和您的访问者会注意到一个显着的改善。

现在让我们来探讨一些更详细的建议雅虎,看到什么其他的优化​​,可以提高性能。

优化资产

使用内容交付网络

一个内容交付网络(CDN)是一个在不同地理位置的网络服务器。每个服务器都有一个站点的文件副本。当您的网站的访问者请求一个文件,该文件提供从最近的服务器(或这是遇到的负载最轻的时候)。

此设置可以在您的网页的整体表现有显着影响,但不幸的是,使用一个CDN可以是昂贵的。正因为如此,它可能不是你愿意做一个个人博客,但它可能是有用的,当一个客户要求你建立一个网站,很可能体验到大容量的交通。一些最广为人知的CDN提供商Akamai公司亚马逊,通过它的S3服务

有在市场上的一些非盈利的CDN;检查CDN Wikipedia文章,看看你的项目可能有资格使用其中之一。例如,一个免费的非盈利同行同行的CDN是CDN的珊瑚,这是非常容易的集成到您的网站。对于这个CDN,你一个网址,并追加“nyud.net”的主机。下面是一个例子:

http://example.org/logo.png~~V

变为:

http://example.org.nyud.net/logo.png~~V

举办​​不同域上的资产,但减少DNS查找

您的访问者的浏览器后下载的HTML页面,并想通了,还需要许多组件,它开始下载这些组件。浏览器限制同时下载的数量,可以采取地方 ;按照HTTP/1.1规范,每个域的限制是两个资产。

因为存在这种限制每个域的基础上,你可以使用多个域(或简单地使用子域)来承载你的资产,从而增加了并行下载的数量。大多数共享主机将允许您创建子域。即使您的主机上放置数子域,你可以创建(一些限制你最多五)限制,它并不重要,因为你不会需要利用太多的子域,看到一些显着的性能改善。

然而,作为第#9个国家,你也应该减少DNS查找的数量,因为这些也可以是昂贵的。浏览器为每一个域或子域承载页面资产,将需要进行DNS查询。所以你有多个域,您的网站更将放缓DNS查找。雅虎的研究表明,两到四个领域是一个最佳的数目,但你可以自己决定什么是最好的为您的网站。

作为一般指引,我建议你使用一个域,为您的资产托管的HTML页面和其他两个领域。下面是一个例子:

  • www.sitepoint.com - 承载仅HTML(和可能的内容图像)
  • i1.sitepoint.com - 承载JS,CSS和一些图片
  • i2.sitepoint.com - 承载大部分网站的图片

不同的托管服务提供商可能会提供不同的接口,创建子域和理想,他们应该提供一个选项,指定目录保存子域文件。例如,如果您的规范域www.sitepoint.com,它指向/家庭/ sitepoint / htdocs中,理想情况下你应该能够创建可通过管理控制面板,或通过创建一个子域i1.sitepoint.com(符号链接中的文件系统),它指向相同的文件夹,/家/ sitepoint / htdocs中这样,您就可以保持在同一位置的所有文件,就像他们在您的开发环境,但他们引用使用一个子域。

然而,一些主机可能会阻止您创建子域,或者可能会限制你的能力,指向文件系统上的特定位置。在这种情况下,你只有真正的选项是物理资产复制到新的位置。不要试图创造一些在这种情况下,重定向 - 它只会使事情变得更糟,因为它创建了两个要求每个图像。

如果您的托管服务提供商不允许的所有子域,你总是有选择购买更多的领域和使用它们纯粹主机资产 - 毕竟,这正是很多大网站。雅虎使用域yimg.com,亚马逊amazon.com图像SitePoint有sitepointstatic.com。如果您拥有多个网站,或管理您客户的网站主办的,你可能会考虑购买两个域,如网域,i1.com和网域,i2.com,并利用他们你保持所有网站主办的组成部分。

地方资产上无Cookie的域名

如果您设置了大量的饼干,会增加您的网页的请求头的大小,因为每个请求发送这些cookie。此外,你的资产可能不使用的cookies,因此所有这些信息可多次派出没有理由的客户。有时,这些头文件,甚至可能比所要求的资产规模更大 - 这当然是极端的情况下,但它发生。考虑那些小图标,或者笑脸,不到一半的KB下载,并要求他们与1kB的HTTP头的价值。

如果您使用子域来承载您的资产,您需要确保设置的cookies,您对您的规范域名(如www.example.org)和顶级域名(如example.org)。这样,你的资产子域将cookie的自由。如果你试图改善现有站点的性能,你已经设置你的cookies顶级域名,您可以考虑对新领域的托管资产的选项,而不是子域。

分裂域间的资产

这完全取决于你的资产,你决定主办i1.example.org和你决定举办i2.example.org - 在这一点上有没有明确指示。只要确保你不随机对每个请求的域名,因为这会导致相同的资产被下载两次 - 一次从i1和一次从I2。

你可以瞄准你的资产分割文件大小均匀,或由一些其他的标准,使您的网页感。您也可以选择把所有内容的图像(那些在你的HTML <img /> i1和所有布局的图像(那些引用CSS的标记)的背景图像:网址())I2,虽然在某些情况下,这种解决方案可能不是最优的。在这种情况下,浏览器会下载和处理CSS文件,然后,根据需要应用该规则,将有选择地下载样式表只需要图像其结果是,通过CSS中引用的图像可能不会立即下载,所以资产服务器上的负载可能无法平衡。

决定分裂资产的最佳方式是通过实验,你可以使用Firebug的 “净面板监测资产在下载序列,然后再决定你应该如何跨域传播的组件,以加快下载过程。

 

论坛和博客上配置DNS查找

既然你的目标应该有每页不超过4个的DNS查找,它可能是棘手的集成第三方的内容,如Flickr图片或第三方服务器上托管的广告。此外,(您的网页上放置盗链图片<img />标签的SRC属性指向另一个人的服务器上的文件)不仅窃取从其他站点的带宽,而且还损害了自己的网页的性能,造成额外的DNS查找。

如果您的网站包含用户生成的内容(如论坛,例如),您可以很容易地防止多个DNS查找,因为用户可能会发表位于Web上的任何地方的图像。你可以写一个脚本,每个图像的复制到您的服务器从用户的职位,但这种方法可以得到相当复杂。

旨在为低挂水果。例如,在phpBB论坛软件,您可以配置用户是否需要虫他们的头像图片,或将它们上传到您的服务器。在这种情况下,上传的头像将导致更好地为您的网站的性能。

使用的过期

为最佳性能,静态的资产应该是完全静态的。这意味着,应该是没有动态生成的脚本或样式,或<IMG>标签指向脚本生成动态图像。如果你有这样的需要-例如,你想生成图形包含访问者的用户名-动态生成的,可以采取“脱机”,结果缓存为静态图像。在这个例子中,你可以一次生成图像时,成员国签署了。然后,您可以存储在文件系统上的图像,并写入到数据库中的图像的路径。一种替代方法可能涉及调度自动化过程(一个cron作业,在UNIX)产生动态组件,并保存为静态文件。

拥有完全静态的资产您要设定的到期日为这些文件的头球攻门,在不远的将来的日期,所以,当资产被下载一次,它是由浏览器缓存和从来没有要求再次(或至少不为很长一段时间,因为我们将看到在某一时刻)。

在Apache中设置的过期头很简单:添加一个。htaccess的文件,其中包含的i1和i2子域的根文件夹下面的指令:

在ExpiresDefault“修改加10年”ExpiresActive

这些指令的第一个使一代的过期头。第二个设定的截止日期至10年后,该文件的修改日期,转换到10年后,复制到服务器上的文件。你也可以使用设置“访问,加上10年”,这将届满10年后首次用户请求的文件,该文件。

如果你愿意,你甚至可以设定每个文件类型的到期日期:

在ExpiresByType应用程序/ x JavaScript的ExpiresActive“的修改,加上2年”ExpiresByType文本/ CSS“的修改加5年”

欲了解更多信息,请检查Apache文档mod_expires

名资产

与技术问题,我们只是看着(设置过期头到遥远的未来日期)发生时,你要修改该网页上的资产,如图像。如果你只是上传到Web服务器的更改的图像,新的游客将收到更新的形象,但不会回头客。他们会看到旧的缓存版本,因为你已经指示他们的浏览器从来没有为这个图象再问。

解决的办法是修改资产的名称-但它与一些维护的障碍。例如,如果你有几个CSS定义指向img.png,和你的图像进行修改,并重新命名它img2.png,你必须找到所有的点在你的样式表,在该文件已被引用,和更新以及。对于较大的项目,你可能会考虑写一个工具,自动为你做这。

你需要来命名你的资产时要使用一个命名约定。例如,你可能会:

  • 一个划时代时间戳追加到文件名 ​​,例如img_1185403733.png
  • 从您的源代码控制系统(例如CVS或SVN),如使用的版本号img_1.1.png
  • 手动增加一个文件名 ​​(例如,当你看到一个文件名 ​​为编号img1.png,只需保存修改后的图像img2.png)。

这里有没有一个正确的答案 - 你的决定将取决于你的个人喜好,您的网页的具体情况,项目的大小和您的团队,等等。

如果你使用CVS,这里是一点点的PHP功能,可以帮助你从CVS中存储的文件中提取的版本:

函数getVersion($){$ CMD ='CVS日志H%'; $ CMD = sprintf的(CMD元文件); EXEC($ CMD,$ RES); $ VERSION = TRIM(str_replace函数(头: ','',$水库[3]));返回的版本;} / /例如使用$ ='img.png“; $ new_file ='IMG_的”文件。getVersion(文件)。“PNG”;

服务gzip压缩内容

大多数现代浏览器了解gzip压缩(压缩)的内容,因此,一个不良页面的目的应是为所有的压缩内容。由于大多数图像,SWF文件和其他媒体文件已经被压缩,你不必担心他们压缩。

然而,你做什么,需要护理服务的客户端脚本,压缩的HTML,CSS和任何其他类型的文本内容。如果你的XMLHttpRequest返回XML(或JSON或纯文本)的服务,确保您的服务器gzips内容以及。

如果您打开在Firebug的Net面板(或使用LiveHTTPHeaders,或者其他一些数据包嗅探器),您可以验证的内容被压缩,寻找一个响应的Content-Encoding头,在下面的例子所示:

例如要求:

获取/ 2.2.2/build/utilities/utilities.js HTTP/1.1的主机:yui.yahooapis.com的User-Agent:顶端Mozilla/5.0(Windows的,U;的Windows NT 5.1; EN-US; RV:1.8.1.5)壁虎/ 20070713 Firefox/2.0.0.5的Accept-Encoding:GZIP,DEFLATE

例如响应:

HTTP/1.x 200确定最后修改时间:周三4月18日17点36分33秒时间各有不同的Accept-Encoding内容类型:应用程序/ X-JavaScript的内容编码:gzip压缩的Cache-Control:max-age的= 306470616到期日:2017年4月16日0时01分52秒GMT日期:星期一7月30日21时18分十六秒世界标准时间的Content-Length:22657连接:保持活动

这一要求,在浏览器告诉服务器它理解gzip和deflate编码(接受编码:gzip,DEFLATE)和服务器响应的Content-Encoding:gzip的 GZIP编码的内容()。

还有一个疑难杂症,当谈到服务gzip压缩内容:你必须确保代理不要让你的方式。如果ISP的代理缓存压缩内容和服务,其所有客户,很可能是有人用的浏览器不支持压缩将收到您的压缩内容。

为了避免这种情况,你可以使用的因人而异的Accept-Encoding响应头告诉代理缓存只为客户发送相同的Accept-Encoding请求头响应。在上面的例子中,浏览器支持gzip和deflate,服务器响应的任何代理服务器和客户端之间的一些额外的信息说,GZIP编码的内容好吗任何客户端发送相同的Accept-Encoding内容。

这里有一个额外的问题:某些浏览器(IE 5.5以上的IE 6 SP 1,例如)声称,他们都支持gzip,但实际上遇到问题阅读(微软下载网站支持网站上所描述的)。如果你使用这些浏览器的人关心(他们通常占不到1%的网站的访问者),您可以使用不同的页眉- 高速缓存控制:私人 -缓存完全消除代理。另一种方法,以防止代理缓存是使用的标题有所不同:*

以gzip或以减缩?

如果你的两个混淆的浏览器发送的Accept-Encoding值,认为DEFLATE作为另一种编码内容的方法是不太流行的浏览器之间的。这也是低效率的,因此是首选的gzip。

确保您发送gzip压缩内容

好吧,现在让我们来看看你可以做些什么来开始为gzip压缩内容,按照你的主机允许。

选项​​1:Apache版本mod_gzip超过2

如果你使用Apache 1.2和1.3,mod_gzip模块为了验证Apache的版本,你可以检查Firebug的净面板,并寻找任何请求的服务器响应头。如果没有看到它,你可以检查你的供应商的文档或创建一个简单的PHP脚本来呼应此信息到浏览器,像这样:

<?PHP的echo apache_get_version();?

服务器头签名,你可能还可以看到mod_gzip版本,如果它被安装。它可能看起来像这样的事情:

服务器:Apache/1.3.37(Unix)编程mod_gzip/1.3.26.1a ......

好吧,我们已经建立,我们要压缩所有的文本内容,PHP脚本的输出,静态的HTML页面,JavaScript代码和样式表,然后将它们发送到浏览器。为了实现这mod_gzip,创建在您网站的根目录。htaccess的文件,其中包括以下:

mod_gzip_on是mod_gzip_item_include MIME ^应用程序/ x-JavaScript的$ mod_gzip_item_include MIME ^应用程序/ json $ mod_gzip_item_include MIME文本/ * $ mod_gzip_item_include文件HTML美元mod_gzip_item_include文件\ \。$ mod_gzip_item_include文件\。JS $ \ mod_gzip_item_include文件。CSS美元mod_gzip_item_include文件\。TXT美元mod_gzip_item_include文件\ XML元mod_gzip_item_include文件\ JSON元头追加不同的Accept-Encoding

第一行允许mod_gzip。接下来的三行设置压缩基于MIME类型。下一节做同样的事情,但是文件扩展名的基础上。最后一行设置因人而异的Accept-Encoding值。

如果你想发送各有不同,*头,使用:

报头中设置不同*

需要注意的是一些托管服务提供商将不允许你使用的指令。如果是这样的话,希望你应该能够取代这个最后一行:

mod_gzip_send_vary论

这也将设置各不相同的Accept-Encoding

意识到可能有一个GZIP最小尺寸条件,因此,如果您的文件太小(小于1KB,​​例如),他们可能没有gzip压缩的,即使你已经配置一切正常。如果发生此问题,您的主机已决定gzip压缩过程中的开销非常小的文件是不必要的。

选项​​2:Apache 2.0的mod_deflate模块

如果你的主机上运行的Apache 2,您可以使用mod_deflate模块。尽管它的名字,mod_deflate模块还使用gzip压缩。要配置mod_deflate模块,您的htaccess的文件添加以下指令

AddOutputFilterByType DEFLATE文字文本/ HTML / CSS文本/纯文本/ XML应用程序/ X-JavaScript应用程序/ JSON头追加变化接受编码

 

选项3:php.ini中

理想情况下,我们希望Apache以处理gzip压缩的内容,但不幸的是,有些托管服务提供商可能不会允许它。如果您的托管服务提供商是其中之一,它可能允许您使用自定义的php.ini文件。如果您将php.ini中目录中的文件,它会覆盖这个目录及其子目录的PHP配置设置。

如果你不能使用Apache的mod_gzip或mod_deflate模块模块,您可能仍然能够使用PHP压缩内容。为了解决工作,你必须配置你的Web服务器,使所有静态的HTML,JavaScript和CSS文件是由PHP处理。这意味着更多服务器的开销,但取决于你的主机,它可能是你唯一的选择。

在您添加以下指令。htaccess的文件:

AddHandler的应用程序/ x-httpd的PHP。CSS AddHandler的应用程序/ x-httpd的PHP。HTML的AddHandler申请/设为x-httpd-php的。JS

这将确保PHP将处理这些文件(或静态)。如果它不工作,你可以尝试重命名的文件有1 。PHP扩展(如example.js.php,等)来实现相同的结果。

现在,创建一个在与下列内容相同的目录中的php.ini文件:

[PHP] zlib.output_compression =在zlib.output_compression_level = 6 auto_prepend_file =的“pre.php”记录short_open_tag = 0

这使压缩和压缩级别设置为6。压缩级别范围从0到9,其中9是最好的(最慢)的压缩值。最后一行设置了一个文件名 ​​为pre.php在每个脚本的开头,如果你键入<PHP包括“pre.php”的执行;?>在每个脚本的顶部。你需要这个文件,以设置的Content-Type头,因为有些浏览器可能不喜欢它,当您发送一个CSS文件,例如,文本/ HTML内容类型头。

记录short_open_tag设置为禁用​​PHP短标记(<?......?><?PHP吗?>)。这是很重要的,因为PHP会试图把<?XML作为PHP代码在你的HTML标签。

最后,创建的的文件pre.php与以下内容:

<$路径= PATHINFO($ _SERVER [“SCRIPT_NAME”]);($ ['延伸'] =='CSS'){头(“内容类型:文本/ CSS”);}($路径['延伸'] =='JS'){头(内容类型:应用/ X-JavaScript的');}?

此脚本会被执行之前,每个文件有1 。PHPHTML,JSCSS文件扩展名。对于HTML和PHP文件,默认的内容类型text / html的是好的,但JavaScript和CSS文件,我们改变它使用PHP的header函数。

选项3(备选案文2):在PHP设置的。htaccess

如果你的主机允许你设置在你的PHP设置的。htaccess文件,那么你就不再需要使用的php.ini文件来配置你的压缩设置。相反,在PHP中设置。htaccess中使用php_valuephp_flag)。

在修改从上面的例子来看,我们将有相同pre.php文件,没有的php.ini文件,修改后的htaccess文件。包含以下指令:

AddHandler的应用程序/设为x-httpd-php的CSS AddHandler的应用程序/ x-httpd的PHP HTML的AddHandler申请/设为x-httpd-php的。JS php_flag zlib.output_compression:php_value zlib.output_compression_level php_value auto_prepend_file“pre.php”php_flag short_open_tag的值为关闭

选项​​4:在脚本压缩

如果您的托管服务提供商不允许你使用php_value 的。htaccess文件,他们也不会允许你使用一个自定义的php.ini文件,你的最后一招就是修改脚本手动包括的共同pre.php文件的是将压缩的照顾。这是最优先选择,但有时你可能没有其他选择。

如果这是你唯一的选择,你会被使用的。htaccess文件,它包含上述方案3中列出的指令,或者你不得不重新命名每一个JSCSS文件(和。XML。HTML,等)有一个PHP扩展在每个文件的顶部添加<PHP包括pre.php“?>和创建文件的pre.php,包含以下内容:

<PHP的ob_start(“ob_gzhandler”); $ PATH = PATHINFO($ _SERVER [“SCRIPT_NAME”]);($ ['延伸'] =='CSS'){标题(“内容类型:文本/ CSS ');}($ ['延伸'] =='JS'){头(内容类型:应用/ X-JavaScript的');}

正如我指出,这是最少的一切有利的选择 - 你应该首先尝试选择1或2,如果他们不工作,可以考虑选择3或4,或两者兼而有之,这取决于你的主机允许。

一旦你建立自由主机许可的程度,你可以使用你已经压缩静态文件,Apache的相关设置来实现所有的技术。例如,刚才我向您展示了如何设置Expires头。那么,你知道吗?有些主机不会允许它。如果您发现自己在这种情况下,您可以使用PHP的header函数来设置过期头从你的PHP脚本。

这样做,你可能会添加到您的pre.php这样的文件的东西:

<PHP头(“到期日:星期一,25月12日2017年05:00:00 GMT”);?>

禁用ETag的

本规则的应用潜力,实施上述规则时,可能会遇到的麻烦相比,是很容易的。你只需要以下内容添加到您的htaccess的文件

FileETags无

请注意,此规则适用于在服务器场中的网站。如果你使用一个共享的主机,你可以跳过这一步,但我建议你这样做,无论是因为:

  • 主机内部改变他们的机器。
  • 你可能会改变主机。
  • 它是如此简单。

使用CSS精灵

使用的技术称为CSS sprites的,可以组合成一个单一的形象几个图像,然后使用CSS的background-position属性只显示您需要的图像。该技术是不打算使用内容的图像(那些出现在HTML <img />标签,如在照相 ​​馆的照片),但目的是用于与观赏性和装饰性的图片。这些图像将不会影响页面的基本可用性,通常引用的样式表中,为了保持HTML的精益(规则#0)。

让我们看一个例子。我们将采取两个图像。首先是help.png ;第二rss.png从这些,我们将创建第三个形象,sprite.png,其中包含两个影像。

两个图像文件合并成一个单一的形象

由此产生的图像往往是规模较小,比这两个文件的大小的总和,因为图像文件相关的开销只包含一次。以显示第一张图片,我们会使用下面的CSS规则:

#帮助{背景图像:网址(sprite.png);背景位置:8px-8px;宽度:16px的;高度:16px的;}

要显示的第二幅图像,我们会使用以下规则:

RSS#{背景图像:网址(sprite.png);背景位置:8px-40px;宽度:16px的高度:16px的;}

乍一看,这种技术可能看起来有点怪,但它确实有用的减少HTTP请求的数量。结合这种方式更多的图像,更好,因为你请求的开销大大切割。对于这种技术使用中的“野生”的例子,看看这个图片,在雅虎的网页,或从谷歌的一个

为了迅速产生的sprite图像,无需计算像素坐标,随时使用CSS精灵发电机的工具,我已经开发。关于CSS sprites的更多信息,请务必阅读戴维Shea的文章,题为CSS精灵:图像切片的吻死亡

使用后负荷预负荷和内联资产

如果你是一个负责任的Web开发人员,你可能已经坚持关注点分离和使用演示和行为的JavaScript的HTML内容,CSS。虽然这些页面的不同部分,应在单独的文件保存在任何时候,性能方面的原因,有时可能会考虑打破了你的索引页(家)的规则。主页应该永远是您的网站上最快的页面-许多第一次的游客可能会留下您的网站,无论它包含哪些内容,如果他们发现网页加载缓慢。

当访问者在到达您的网页与一个空缓存,最快的方式提供的页面是只有一个请求,并没有单独的组件。这意味着脚本和样式内嵌(GASP)!它实际上可能有内嵌的图像以及(虽然它不支持在IE浏览器),但是这可能考虑的事情太多。除了 ​​语义上不正确,使用内嵌脚本和样式,防止这些组件被缓存,所以一个很好的策略,将在后台加载组件后已加载主页-与名称略有混乱的后负荷预压技术。让我们看一个例子。

让我们假设该文件包含您的主页被命名的home.html,分散整个网站的许多其他内容的HTML文件,并且所有这些内容的网页,使用一个JavaScript文件,mystuff.js,其中只有一小部分是需要的网页。

你的战略可能是在内嵌的home.html mystuff.js和地方采取的是由网页使用JavaScript的一部分然后,一次的home.html已完成加载,以预负荷幕后的请求mystuff.js这样,当用户点击您的内容网页,JavaScript的已经交付给浏览器和缓存。

再次,这种技术是由一些大男孩:谷歌和雅虎在其网页内嵌脚本和样式,他们还使用后负荷预压。如果您访问谷歌的网页,它加载一些HTML和一个单一的形象- “标志。然后,一旦主页已完成加载,有请求得到精灵的形象,它实际上不是直到第二个页面加载需要-一个显示搜索结果。

雅虎的搜索页面执行有条件预装载-页面没有自动加载额外的资产,但等待用户开始在搜索框中键入。一旦你开始打字,它几乎可以保证你提交一个搜索查询。当你做,你会降落在搜索结果页,其中包含一些已经为你缓存的组件。

预加载图像,可以做一个简单的JavaScript线:

新的Image()的src ='image.png“;

预加载JavaScript文件,使用的JavaScript include_DOM技术和创建一个新<SCRIPT>标签,像这样:

VAR JS = document.createElement方法(脚本); js.src ='mysftuff.js; document.getElementsByTagName('头')[0] appendChild(JS);

这里的CSS版本:

VAR CSS = document.createElement方法(“链接”); css.href ='mystyle.css'; css.rel =“样式表”; document.getElementsByTagName('头')[0] appendChild(CSS)。;

在第一个例子,形象要求,但从来没有使用过,因此它不会影响当前的页面。第二个例子中,脚本添加到页面上,以及正在下载的是,它将会被解析和执行。同样,也将应用于页面的CSS - 。如果这是不可取的,你还可以预先加载的资产使用XMLHttpRequest。

JAVASCRIPT的优化

潜水到JavaScript代码和微优化每个函数和每个循环之前,让我们先看看什么大的图片项目,我们可以解决很容易,可能有一个网站的性能显着的影响。下面是JavaScript文件的影响,对您网站的表现有改善的一些准则:

  1. 合并“ 。js文件。
  2. 缩小或混淆脚本。
  3. 放置在页面底部的脚本。
  4. 删除重复。
 

JS文件合并“ 

按照基本规则,你的目标应该为你的JavaScripts,使尽可能少的要求;理想,这也意味着,你应该只有一个JS。文件。这个任务是采取一切简单。JS脚本文件和他们放入一个单一的文件。

虽然单个文件的方法是在大多数情况下,建议,有时你可能获得两个脚本一些好处 - 1,是需要尽快在页面加载的功能,和另一个,可以在页面等待先载入的功能。在这两个文件可能是可取的另一种情况是当您的网站使用一块跨多个页面的功能 - 共享的脚本可以存储在一个文件中(因此从页面缓存),以及,一个特定的脚本页面可以存储在第二个文件。

缩小或混淆脚本

现在,你已经合并了你的脚本,你可以继续和缩小或混淆他们。Minifying意味着消除一切,这是没有必要的-如注释和空白。混淆更进一步,涉及重新命名和重新排列函数和变量,使他们的名字是短,使脚本非常难以阅读。混淆经常被用来作为保持JavaScript源代码的一个秘密的方式,但如果你的脚本是在网络上提供的,它永远是100%的秘密。阅读更多关于微小在混淆Douglas Crockford的主题有用的文章

在一般情况下,如果你GZIP的JavaScript,你已经在文件的大小作出了巨大收益,你只获得小minifying和/或混淆脚本的额外的好处。平均,单独使用gzip压缩可能会导致在节约75-80%,而gzip压缩和minifying可以给你节省80%-90%。此外,当你改变你的代码,以缩​​小或模糊,还有一个风险,你可能会引入错误。如果你并不过分担心有人偷你的代码,你也许可以忘记模糊,只是合并和缩小,甚至只是合并脚本(但总是GZIP他们!)。

为JavaScript微小的优秀工具是JSMin,它也有一个PHP的端口等等。一个混淆工具是帕克 -一个免费的在线工具,顺便说一下,使用jQuery的

改变你的代码以合并和缩小,应该成为一个额外的,在您的网站发展过程中的单独的步骤。在开发过程中,你应该使用尽可能多的JS文件,您认为合适的,然后是准备去住,合并和缩小的版本取代你的“正常”的脚本时,该网站。你甚至可以为你做这个开发工具。下面,我就已经包含了一个小工具,它只是这例子。这是一个命令行脚本,使用JSMin的PHP端口:

<?PHP包括“jsmin.php的”; array_shift($ argv中);的foreach($ $ ARGV文件){回声'/ *',文件'* /';回声JSMin ::缩小(file_get_contents($文件) ),“\ N”;}>?

很简单,不是吗?你可以保存它compress.php和运行如下:

$ PHP compress.php source1.js source2.js source3.js> result.js

这将合并和缩小的文件source1.jssource2.jssource3.js成一个文件,称为result.js

上面的脚本是非常有用的,当你合并和缩小站点部署过程中的一个步骤。另一种,懒惰的选项是做苍蝇一样-退房埃德艾略特的博客后本博客文章由SitePoint的保罗Annesley一些想法。

许多第三方JavaScript库提供的压缩形式,以及在一个缩小的版本。因此,您可以下载和使用图书馆的创建者所提供的缩小的版本,然后只担心自己的脚本。要记住的东西是您使用任何第三方库的许可。即使你可能相结合,精缩所有的脚本,你应该沿着代码仍然保留各图书馆的版权声明。

在页面的底部的地方脚本

第三拇指规则,按照有关的JavaScript优化,脚本应该被放置在页面底部,结束</ BODY>标记尽可能接近什么原因?由于脚本的性质(他们可能会改变页面上的任何东西),浏览器阻止所有下载时,他们遇到的<script>标签。因此,直到脚本下载和解析,没有其他的下载将开始。

放置在底部的脚本是一种方法来避免这种负面的阻断作用。有几个<SCRIPT>尽可能标签的另一个原因是,每次遇到脚本的浏览器启动它的JavaScript解析引擎。这可能是昂贵的,因此解析最好每页只发生一次。

删除重复

关于JavaScript的另一个准则,以避免包括两次相同的脚本。也许这听起来像是奇怪的意见(为什么你会不会做到这一点吗?),但它发生:例如,如果一个大型网站使用多个服务器端包含,包括JavaScript文件,这是可以想象的,这两个可能翻倍。重复的脚本会导致浏览器的解析引擎被启动了两次,并可能(在某些版本的IE),甚至第二次要求文件。重复的脚本也可能是一个问题,当你使用第三方库。让我们假设你有一个传送带部件和你从不同的网站下载图片库部件,他们都使用了jQuery。在这种情况下,你要确保你没有错误,包括jQuery的两倍。此外,如果您使用,确保你不包括一个图书馆,包括两次例如,实用的DOM(DOM-min.js),事件工具(事件min.js)和“ utilities.js库,其中既包含DOM和事件。

CSS的优化

合并和缩小

对于你的CSS文件,你可以遵循的准则,我们讨论的JavaScripts:缩小和合并成一个单一文件的所有样式表,以最大限度地减少下载大小和发生的HTTP请求数。所有文件合并成一个,是一个简单的任务,但微小的工作可能会有点困难,特别是如果你使用CSS黑客针对特定的浏览器 - 因为一些黑客利用浏览器在解析错误,他们也可能会欺骗你minifier实用工具。

您可能会决定不通过最小化样式表(和相关的微小后重新测试)的麻烦。毕竟,如果你决定为合并和gzip压缩的样式表,这已经是一个不错的优化。

如果你决定以缩小CSS,除了选择手动最小化(只需删除注释和空白),你可以使用一些可用的工具,如CSSTidy,PEAR的HTML_CSS库(http://pear.php.net/ /包/ HTML_CSS),或SitePoint的自己除尘我选择器Firefox插件

在页面顶部的地方风格

最好是你的单,gzip压缩(和可选缩小的)样式表放置在HTML文件的开头,在<HEAD>节-这是你通常把它无论如何。原因是,大多数浏览器(Opera是一个例外)将不会在页面上呈现的东西,直到所有的样式表得到应有的下载和解析。此外,从CSS中引用的图像都将被下载CSS解析除非是完整的。所以最好早在页面上尽可能包括CSS。

您可能会认为,虽然分布在不同的域的图像。从CSS链接的图像不会被下载,直到后来,在此期间,你的页面可以使用可用的下载窗口,要求从域承载的CSS图像,并暂时“闲置”的内容图像。

潘基文表达

IE浏览器允许JavaScript表达式,CSS中,像这样的:

#内容{左:表达(document.body.offsetWidth)的}

你应该避免的原因JavaScript表达式。首先,他们不支持所有的浏览器。他们还伤害“关注点分离”。而且,当涉及到性能,表达式是坏,因为他们正在重新计算每个页面呈现或调整大小时,或者干脆当你滚动你的鼠标在页面。使表达更便宜的方法 -你可以缓存后,他们最初计算值,但你可能关闭简单,以避免他们更好。

性能优化工具

有许多工具可以帮助你在你的性能优化任务。最重要的是,你要监视加载页面时发生了什么事,让你能作出明智的决定。试试这些实用程序:

总结

哇!如果你做到了这到目前为止,你现在知道了不少关于如何处理网站优化项目(更重要的是,如何建立与心灵的表现,你的下一个网站)。记得拇指的一般规则,当谈到优化,你应该集中精力最大的影响,反对“微优化”项目。

你可以选择不执行上面讨论的所有建议,但你仍然可以通过相当差异,注重真正的低挂的果实,如:

  • 结合组件更少的HTTP请求 - JavaScript文件,样式表和图像(使用CSS sprites)
  • 为所有的文本内容,包括HTML,脚本,样式的XML,JSON的,纯文本,在gzip压缩格式
  • minifying和放置在底部的脚本和样式表在文件的顶部
  • 使用组件的单独Cookie的域

好运优化的努力 - 这是非常有益的,当你看到的结果! 

2009-2012 南京网络公司 [苏ICP备10078920号]
公司地址:南京市莫愁路侯家桥10号7楼 电话:025-66075152  手机:13951880339
官方网站:http://www.seoole.com/ 官方博客:浩浪网络官方博客 南京网络公司 南京网站设建设