web性能优化权威指南_Web优化终极指南（提示和最佳实践）

Web优化是Web开发和维护的重要组成部分，但也是网站管理员经常忽略的内容。 只要考虑一下您可以节省的钱，以及在完成正确的选择后，它可能如何帮助增加读者人数和访问量。

如果您到目前为止尚未对网站（或博客）进行任何优化，或者只是好奇它如何帮助您加快网站访问速度，请查看我们汇总的优化提示列表。

为了更好的可读性，我们将内容分为3个部分–分别是服务器端优化 ， 资产优化 （包括CSS，Javascript，图像等Web组件）和平台 ，我们将重点关注WordPress优化 。 在最后一节中，我们引入了一些我们认为有用的链接。 跳转后的完整列表。

优化：服务器端

1. 选择一个体面的虚拟主机

   您的虚拟主机帐户与您要执行的优化没有直接关系，但是我们认为选择正确的虚拟主机帐户非常重要，因此我们决定首先引起您的注意。 托管帐户是您的网站/博客的基础，安全性，可访问性（cPanel，FTP，SSH），服务器稳定性，价格和客户支持均在其中发挥重要作用。 您需要确保自己处于良好状态。

2. 分别托管资产

   当我们提到资产时，我们指的是不需要服务器端处理的Web组件，例如图像和静态脚本 。 其中包括任何Web图形，图像，Javascript，级联样式表（CSS）等。不必单独托管资产，但是当博客流量激增时，通过此实现，在服务器稳定性方面，我们已经看到了巨大的成果。

3. 用GZip压缩

   简而言之，无论何时发出HTTP请求，内容都会从服务器端传输到客户端（反之亦然）。 压缩要发送的内容会大大减少处理每个请求所需的时间。

   GZip是执行此操作的最佳方法之一，并且会根据您使用的服务器类型而有所不同。 例如，Apache 1.3用途mod_zip ，Apache的2.x使用mod_deflate模块 ，并在这里是你如何在Nginx的做到这一点。 以下是一些非常好的文章，可让您熟悉服务器端压缩：

   • 通过启用Apache文件压缩来加速网站
   • 使用mod_gzip和Apache压缩Web输出
   • 如何使用GZIP压缩优化您的网站
   • ASP的服务器端压缩

4. 减少重定向

   网站管理员一直都在进行URL重定向（无论是Javascript还是META重定向）。 有时，其目的是将用户从旧页面引导到新页面，或仅将用户引导至正确的页面。 每个重定向都会创建一个附加的HTTP请求和RTT （往返时间）。 重定向次数越多，用户到达目标页面的速度就越慢。

   推荐阅读 ： 避免通过Google Code进行重定向 ，可以使您对此事有个很好的了解。 本文还建议了一些实用的方法来最小化重定向以提高服务速度。

5. 减少DNS查找

   据雅虎！ 开发人员网络博客 ，DNS（域名系统）需要大约20-120毫秒才能解析给定主机名或域名的IP地址，并且浏览器在适当完成此过程之前无法执行任何操作。

   作者Steve Souders建议将这些组件划分为至少两个但不超过四个主机名，这样可以减少DNS查找并允许高度并行下载。 阅读有关该文章的更多信息。

优化：资产（CSS，JavaScript，图像）

1. 将多个Javascript合并为一个

   http://www.creatype.nl/javascript/prototype.js
           http://www.creatype.nl/javascript/builder.js
           http://www.creatype.nl/javascript/effects.js
           http://www.creatype.nl/javascript/dragdrop.js
           http://www.creatype.nl/javascript/slider.js

   通过将URL更改为单个文件：

   http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

   通过操作.htaccess并使用PHP。 点击这里阅读更多。

2. 压缩Javascript和CSS

   
   

   在线压缩它们！

   
   还有一些Web服务，使您可以在线手动压缩Javascript和CSS文件。 以下是我们认识的几个：
   • compressor.ebiene （ Javascript ， CSS ）
   • javascriptcompressor.com （ Javascript ）
   • jscompress.com （ Javascript ）
   • CleanCSS （ CSS ）
   • CSS优化器 （ CSS ）

3. 自定义标题到期/缓存

   
   信用： httpwatch

   通过使用自定义的Expiry标头，当同一用户第二次重新加载页面时，您的Web组件（例如图像，静态文件，CSS，Javascript）跳过了不必要的HTTP请求。 它减少了所需的带宽，并明确帮助更快地提供页面。

   • 雅虎！ 开发人员网络博客–添加Expires标头
   • 如何在Apache 1.3中为图像添加有效的过期标题
   • HTTP缓存
   • Web作者和网站管理员的缓存教程

4. 卸载资产

   通过卸载，我们的意思是将Javascript，图像，CSS和静态文件与托管网站的主服务器分离，并将它们放置在另一台服务器上或依赖于其他Web服务。 通过将资产卸载到其他可用的Web服务上，使服务器主要用于PHP处理，我们在Hongkiat看到了显着的改进。 以下是一些有关卸载在线服务的建议：

   • 图片 ： Flickr ， Smugmug ，付费托管*
   • Javascripts ： Google Ajax库 ， Google App Engine ，付费托管*
   • Web表单 ： WuFoo ， FormStack
   • RSS ： Google Feedburner
   • 调查与民意调查 ： SurveyMonkey ， PollDaddy

   *付费托管 –付费服务始终具有更好的可靠性和稳定性。 如果您的网站一直在要求提供资产，则需要确保资产状况良好。 我们建议使用Amazon S3和Cloud Front 。

5. 处理网络图像

   图片是您网站的重要组成部分。 但是，如果不能适当地优化它们，则它们可能会成为负担，最终导致每天无法预测地使用大量带宽。 以下是一些优化图片的最佳做法 ：

   • 优化PNG图像 Smashing Magazine上的人们描述了一些巧妙的技术，可以帮助您优化PNG图像。
   • 针对Web进行优化 –您需要了解的事情（格式），了解有关Jpeg，GIF，PNG以及如何保存网络图像的更多信息。
   • 不缩放图像始终练习为每个图像插入width和height 。 另外，不要仅因为需要在网络上使用较小版本的图像而按比例缩小图像。 例如 ：不要通过更改width和height ，将网站的200×200像素图像强制缩放为50×50像素。 取而代之的是50×50像素。

   使用Web服务和工具进行优化 。 好消息是，您无需成为Photoshop专家即可优化图像。 有很多Web服务和工具可以帮助您完成工作。

   • Smush.it
     
     可能是最有效的在线图像优化工具之一。 甚至还有一个WordPress插件 ！
   • JPEG和PNG剥离器 Windows工具，用于从JPG / JPEG / JFIF和PNG文件中剥离/清除/删除不必要的元数据（垃圾）。
   • Online Image Optimizer可让您轻松地优化gif，动画gif，jpg和png，以便它们通过Dynamic Drive尽可能快地加载到您的网站上
   • SuperGIF毫不费力地缩小您的所有GIF图像和动画。
   • 还有更多

6. 处理CSS

   现代网站使用CSS作为样式以及外观的基础。 CSS不仅为更改提供了极大的灵活性，而且在所需代码方面也较少。 但是，如果它们的编码不正确，则可能适得其反。 这是一些清单，或者是一些指南，可确保您对CSS进行了适当的优化：

   • 使您的Elements的孩子与后代保持一致如何使用CSS选择器保持标记干净。
   • 保持CSS简短当它们使用相同的样式时，代码越短越好。 这是您可能需要的CSS速记指南 。
   • 使用CSS Sprite
     
     CSS Sprite技术通过将多个（或全部）图像组合到一个图像文件中并使用CSS background-position属性控制其输出来减少每次加载页面时的HTTP请求。 这里有一些有用的指南和技术来创建CSS Sprites：
     • 在线CSS Sprite Generator
     • 最佳的在线和离线CSS Sprites Generator
   • 一次使用每个声明在优化CSS文件时，可以采用的最强大的措施之一就是一次使用每个声明。
   • 减少CSS文件的数量原因很简单，当请求一个网页时，您拥有CSS文件越多，它发出的HTTP请求就越多。 例如，不要像下面那样拥有多个CSS文件：

     您可以将它们合并为一个CSS：

   • 用于检查，清理和优化CSS文件的有用工具即使您完全不了解CSS编码，也可以使用一些有用的工具来优化CSS代码。
   • 清洁和优化CSS的7条原则代码优化不仅是最小化文件大小，还在于组织合理，整洁高效。
   • 优化CSS的最佳实践认为本文更像是一项学术练习，而不是实际的优化技巧。

WordPress优化

我们会不时监控，基准测试和分析WordPress博客的性能。 如果网站运行缓慢，我们需要知道原因。 这是我们已经完成的一些基本更改，我们认为这些更改将显着提高WordPress博客的速度。

1. 缓存您的Worpress博客

   WP-Cache是一个非常高效的WordPress页面缓存系统，可让您更快地访问站点并做出响应。 我们还建议使用WP Super Cache ，它比前面提到的插件增强了，并且也做得很好。

2. 停用并删除未使用的插件

   当您发现博客加载速度非常缓慢时，请查看您是否安装了许多插件。 他们可能是罪魁祸首。

3. 删除不必要PHP标签

   如果您查看主题的源代码，则会发现很多类似以下的标签：

   它们几乎可以替换为不会导致服务器负载的文本内容。 查看Michael Martin的13个标记以从WordPress Blo g中删除

• 加快WordPress速度的3种最简单方法 John Pozadzides分享了他的博客如何在Digg流量高峰期间顺利航行。
• 最大化MAX性能的13个出色的WordPress速度提示和技巧如果您发现WordPress网站的性能不佳，可能是由于流量大或您不知道的隐藏问题而导致的，请尝试以下几件事。
• 40个WordPress优化技巧幻灯片中的优化技巧。 40分钟内获得40条提示。

最后但并非最不重要的…

以下是一些有用的Web服务和工具，可为您提供更广阔的视野和更好的分析，以帮助您进行Web优化。

• YSlow分析网页，并根据一组高性能网页的规则提出改进网页性能的方法 。 它为您提供了一个很好的主意，以使网站加载速度更快。

  （需要Firebug ）

  
  

• 类似于Yahoo! YSlow ，Google Page Speed是一个开放源代码的Firebug插件，用于评估网站性能以及如何改善它们。 （需要Firebug ）

  
  

• 
  

• Google Web优化器
• 15种帮助您快速开发网页的工具
• 15多个提示，以加快您的网站并优化代码！

翻译自: https://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/