如何检查页面放慢了什么？

Question

我正在开设一个网站，可以在这里找到： http://odesktestanswers2013.com/Metareviewer

索引似乎异常缓慢（加载时浏览器速度变慢），即使Yslow似乎没有看到任何特别错误，并且我的php microtime返回一个很好的值。

我应该研究的其他事情是什么？

Answer 1

使用Chrome开发者工具，网络标签显示：

...您页面中加载内容的时间表。

这里还有许多良好的做法。其中一些也可以使用谷歌Chrome的审核工具（F12菜单）进行标记，但在我看来最重要的是：

• 使用CDN提供公共库代码。你真的需要自己主持Jquery吗？ （侧面咆哮，你真的需要jquery吗？）
• 您的JavaScript文件需要很长时间才能加载，因为它们都作为单独的HTTP调用提供。您可以将它们组合成一个JavaScript文件，并将它们缩小以节省大量带宽。
• Foundation.css 非常大 - 不是大型CSS文件存在问题，但看起来CSS文件中有超过2000条规则不存在在您的网站上使用。你需要这个档案吗？
• CACHE所有这些 - 有26个HTTP请求，未缓存，这意味着每个点击您网站的人都必须下载所有内容，每个请求。
• 如果您在服务器上启用gzip压缩，整个带宽可以减少大约三分之二（甚至更好，实施SPDY，但这是一种社区较少的新技术）。
• 看一下http://caniuse.com - 现代浏览器中支持很多CSS技术，而不需要-webkit或-moz ，这可以节省大量的kebabbobytes

如果我可以在您的网站上更改一件事......

说到这一切，上面的每一点都会对你网站的速度造成很小的（但累积的）差异，但最好先攻击最坏的犯罪者。

查看网络图。虽然下载了所有JavaScript，但它阻止了网站的其余部分下载。

如果您懒惰，只需将其全部移至文档正文的末尾即可。这样，页面的其余部分将在JavaScript必须之前下载，但如果以特定样式编程，这可能会损害脚本的执行。

希望这有帮助。

Answer 2

您还应该考虑使用http://www.webpagetest.org/

这是对网站性能进行基准测试的最佳工具之一。

Answer 3

您可以使用此网站（http://gtmetrix.com/）分析原因并将其修复。该网站提供了原因以及优化格式的js和css等解决方案。

根据本网站的报告，您需要优化图像并缩小js和css文件。优化的图像和js和css文件可以从这个站点下载。

Answer 4

使用谷歌浏览器 - ＆gt; F12 - ＆gt;联网并检查页面中使用的每个资源的连接，发送，接收等时间。

看起来你的CSS和JS脚本有很长的连续性和等待时间。

Answer 5

你可以使用chrome和firefox上最好的add-one

YSlow分析网页，并根据一系列高性能网页规则提出改善效果的方法。

上面是firefox add-one的链接，你也可以搜索chrome并免费提供。

Answer 6

Yslow为您提供有关您网站前端的详细信息。很可能你有一个在后台循环一次到多次的脚本。

如果您怀疑代码序列在服务器端挂起，那么您需要执行堆栈跟踪以精确查明开销发生的位置。

我建议使用New Relic。

Answer 7

尝试使用Opera。右键单击 - ＆gt;检查元素 - ＆gt;探查。 期待检查元素 - ＆gt;错误。