简体   繁体   English

优化以减少网站加载时间

[英]Optimizations to reduce website loading time

可以对网站进行哪些重要的优化以减少加载时间?

Remove/Minimize any bottlenecks on the server side. 删除/最小化服务器端的任何瓶颈。 For this purpose, use a profiler like Xdebug or Zend Debugger to find out where your application is doing expensive and slow operations. 为此,请使用Xdebug或Zend Debugger等分析器来查找应用程序执行昂贵且运行缓慢的位置。 Implement caching where possible. 尽可能实现缓存。 Use an OpCode Cache. 使用OpCode缓存。 If this still isn't fast enough consider investing in more CPU or RAM or SSDs (depending on whether you are CPU, IO or Memory bound) 如果这仍然不够快,可以考虑投资更多CPU或RAM或SSD(取决于您是CPU,IO还是内存限制)

For general server/client side optimizations, see the Yahoo YSlow! 对于一般服务器/客户端优化,请参阅Yahoo YSlow! User Guide . 用户指南

It basically sums it up to: 它基本上总结为:

  1. Minimize HTTP Requests 最小化HTTP请求
  2. Use a Content Delivery Network 使用内容分发网络
  3. Add an Expires or a Cache-Control Header 添加Expires或Cache-Control标头
  4. Gzip Components Gzip组件
  5. Put StyleSheets at the Top 将StyleSheets放在顶部
  6. Put Scripts at the Bottom 把脚本放在底部
  7. Avoid CSS Expressions 避免使用CSS表达式
  8. Make JavaScript and CSS External 使JavaScript和CSS外部
  9. Reduce DNS Lookups 减少DNS查找
  10. Minify JavaScript and CSS 缩小JavaScript和CSS
  11. Avoid Redirects 避免重定向
  12. Remove Duplicate Scripts 删除重复的脚本
  13. Configure ETags 配置ETag
  14. Make AJAX Cacheable 使AJAX可以缓存
  15. Use GET for AJAX Requests 使用GET进行AJAX请求
  16. Reduce the Number of DOM Elements 减少DOM元素的数量
  17. No 404s 没有404s
  18. Reduce Cookie Size 减少Cookie大小
  19. Use Cookie-Free Domains for Components 使用Cookie免费域进行组件
  20. Avoid Filters 避免过滤器
  21. Do Not Scale Images in HTML 不要在HTML中缩放图像
  22. Make favicon.ico Small and Cacheable 使favicon.ico小巧且可缓存

Also see the comments contributed below, as they contain some additional useful information for other users. 另请参阅下面提供的评论,因为它们包含其他用户的一些其他有用信息。

Before attempting any optimizations first you need to be able to profile, get FireBug for Firefox. 在首先尝试任何优化之前,您需要能够分析,获取FireBug for Firefox。 Then you can run some analysis that will tell you exactly what to do using YSlow . 然后,您可以运行一些分析,告诉您使用YSlow做什么。 Fundamental things that you should do are listed here . 这里列出你应该做的基本事情。

Here are a few "best practice" things: 这里有一些“最佳实践”的东西:

  • Caching CSS, JavaScript, images, etc. 缓存CSS,JavaScript,图像等
  • Minifying Javascript files. 缩小Javascript文件。
  • gzip content. gzip内容。
  • Place links to JavaScript files, JavaScript code, and links to CSS files at the bottom of your page when possible. 尽可能放置指向JavaScript文件,JavaScript代码以及页面底部CSS文件链接的链接。
  • Load only what is necessary. 只加载必要的东西。
  • For an existing website, before you do any of this determine where your bottlenecks are with tools like Firebug and as someone else mentioned YSlow (I highly recommend this tool). 对于现有网站,在您执行任何此类操作之前,请确定使用Firebug等工具以及其他人提及YSlow(我强烈推荐此工具)的瓶颈所在。

There are two sides you can care about, when optimizing : 在优化时,您可以关注两个方面:

  • The server side : what matters is generating the ouput faster 服务器端:重要的是更快地产生输出
  • The client side : what matters is getting all that has to be displayed faster. 客户端:重要的是让所有必须更快地显示。

Note : we, as developpers, often think about optimizing the server-side first... Which in most cases only represents less than 10% percent of the loading-time of the page ! 注意:作为开发人员,我们通常会首先考虑优化服务器端...在大多数情况下,这只占页面加载时间的不到10%!


On the server side, you'll generally want to : 在服务器端,您通常希望:

  • profile, to determine what's long 简介,以确定什么是长的
  • optimize your SQL queries, and reduce their number 优化您的SQL查询,并减少它们的数量
  • use caching 使用缓存

For more informations, you can take a look to the answer I gave some time ago to this question : Optimizing Kohana-based Websites for Speed and Scalability 有关更多信息,您可以查看我之前给出的这个问题的答案: 优化基于Kohana的网站以提高速度和可扩展性


On the client side, the biggest gains are generally achieved by : 在客户端,最大的收益通常是通过以下方式实现:

  • Reducing the number of HTTP requests -- the easiest way being to reduce the number of JS/CSS/images files, by combining several files into one 减少HTTP请求的数量 - 通过将多个文件合并为一个来减少JS / CSS /图像文件数量的最简单方法
  • Compressing CSS/JS/HTML, using for instance Apache's mod_deflate . 使用例如Apache的mod_deflate压缩CSS / JS / HTML。

About that, there is a lot of great stuff on Yahoo's Exceptional Performance : they've released lots of good pratices and tools, such as yslow . 关于这一点, 雅虎的卓越性能有很多很棒的东西:他们发布了许多优秀的实践和工具,比如yslow

The simple options I can think of are: 我能想到的简单选择是:

  1. Gzip (x)html, so a compressed file should arrive more quickly to the user Gzip(x)html,因此压缩文件应该更快地到达用户
  2. minify the CSS 缩小CSS
  3. minify the JS 缩小JS
  4. use caching where possible 尽可能使用缓存
  5. use a content-delivery network 使用内容分发网络
  6. use a tool, such as yslow to identify bottlenecks and further suggestions 使用yslow等工具来识别瓶颈和进一步的建议

definitely want to look at caching, as round trips to DB are expensive. 肯定想看看缓存,因为到DB的往返是昂贵的。 also, minify JS 另外,缩小JS

install firebug and pagespeed plugin follows all the pagespeed directives (until possible) and be happy http://code.google.com/intl/it/speed/page-speed/ 安装firebug和pagespeed插件遵循所有的pagespeed指令(直到可能)并开心http://code.google.com/intl/it/speed/page-speed/

anyway the most importante optimization in my experience is to reduce the number of HTTP requests to a minimum... 无论如何,根据我的经验,最重要的优化是将HTTP请求的数量减少到最少......

We recently did this on our web site. 我们最近在我们的网站上做了这个。 Here we outlined nine techniques that seemed to have the highest impact with the least difficulty: http://mentormate.com/blog/easy-ways-speed-website-load-time/ 在这里,我们概述了九种技术,这些技术似乎影响最小,难度最小: http//mentormate.com/blog/easy-ways-speed-website-load-time/

The first optimisation is: Decide if it is slow, and if not, don't bother. 第一个优化是:确定它是否很慢,如果不是,请不要打扰。

This is trickier than it sounds, because it's not like testing a desktop app or game. 这比听起来更棘手,因为它不像测试桌面应用程序或游戏。 A game is slow if when you play it on the target hardware, the frame rate is too low. 如果在目标硬件上播放时游戏速度很慢,则帧速率太低。 This is very easy to measure. 这很容易衡量。

A web site is trickier, because you, as the developer, are probably using a local test system with a very fast network. 一个网站比较棘手,因为作为开发人员,您可能正在使用具有非常快速网络的本地测试系统。 Even when you use your staging / system test servers, you're probably still on the local network. 即使您使用登台/系统测试服务器,您可能仍在本地网络上。 Even your production servers are in all likelihood, on the same continent. 甚至您的生产服务器也很可能位于同一个大陆上。

The same is possibly not true for quite a lot of your users. 对于很多用户来说,情况可能并非如此。

Therefore the options which exist are: 因此,存在的选项是:

  • Find out by asking your users, whether they find it to be slow 通过询问您的用户,他们发现它是否很慢
  • Simulate a high latency environment and test it yourself (or your QA team) 模拟高延迟环境并自行测试(或您的QA团队)
  • Guesswork 臆测

The latter is not recommended. 不建议使用后者。

An option which the holier-than-thou Yahoo Web Sites performance book (which yes, is a book you can buy) doesn't mention a lot is HTTPS. 除了雅虎网站表现书(是的,是一本可以买到的书)之外的一个选项并没有提到很多,那就是HTTPS。 Most web applications which handle important data run mostly or entirely over HTTPS, which changes the rules of the game rather a lot. 处理重要数据的大多数Web应用程序大部分或全部通过HTTPS运行,这会更改游戏规则。 Remember to do all testing with it enabled. 记得在启用它的情况下进行所有测试。

i wrote some things about, see: 我写了一些关于的事情,请看:

Google page speed test optimization Google页面速​​度测试优化

As already mentioned, you can use Yslow or PageSpeed firefox extension. 如前所述,您可以使用Yslow或PageSpeed firefox扩展。 But you can also use GTmetrix , an online service scanning your page with both tools. 但您也可以使用GTmetrix ,这是一种使用这两种工具扫描您的页面的在线服务。

Features I like / use: 我喜欢/使用的功能:

  • soft, clean and usable presention 柔软,干净,可用的表现
  • comparison with another page. 与另一页进行比较。 It's really interesting to see where are your friends / competitors. 看到你的朋友/竞争对手在哪里真的很有趣。

(by the way, i'm not related to gtmetrix !) (顺便说一句,我与gtmetrix无关!)

To reduce network traffic, you can minify static files, such as CSS and Javascript, and use gzip compression on generated content. 要减少网络流量,您可以缩小静态文件(如CSS和Javascript),并对生成的内容使用gzip压缩。 You can also try using tools such as optipng to reduce the size of images. 您还可以尝试使用optipng等工具来减小图像的大小。

However, the first step to take is to actually analyse what's taking all of the time -- whether it's sending the bits over the network, or actually generate the content to send. 但是,要采取的第一步是实际分析所有时间内的内容 - 无论是通过网络发送比特,还是实际生成要发送的内容。 There's no point making your CSS files 10% smaller if it takes a minute to generate each HTML page. 如果生成每个HTML页面需要一分钟,那么将CSS文件缩小10%是没有意义的。

不要在代码中使用空格。

负载平衡有助于减少巨大的加载时间。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM