35

目前我的网站需要几千年才能加载，即使它几乎没有任何内容。我的假设是，这是因为页面上有很多图像和 JavaScript。

有没有办法测试导致加载时间长的原因？

4

17 回答 17

50

在此处测试您的页面PageSpeed Insights - Google Developers，您将看到所有让您的网站更快的建议。

于 2012-12-21T10:31:38.227 回答
28

您可以遵循以下一些基本事项来提高网站速度：

  1. 加载后内容：首先不要加载所有内容，例如 JavaScript 文件、图像、数据。列出您的用户应该首先看到的内容并按该顺序加载。这将减少用户的感知等待时间，因为他们将能够在加载其他内容的同时查看站点的加载部分。
  2. 预加载内容：受益于用户的空闲时间。使用 Ajax 或图像缓存技巧在背景中加载内容，因此用户不会注意到页面仍在“工作”。因为文件已经预加载到浏览器的缓存中，所以当用户加载下一页或视图时，看起来会非常快，因为数据已经存储在本地。（简而言之，发布和预加载内容背后的主要思想是首先向用户展示他们想要的内容，然后在他们需要查看该内容之前在后台加载其他内容。使用 JavaScript 或 jQuery Ajax 加载您的内容并缓存它们。
  3. 优化图像：
    1. 将图像质量降低到人眼无法分辨的程度。您可以牺牲一点图像质量来大大减小文件大小，从而提高下载/加载速度。
    2. 不要使用浏览器缩小图像：不要发送巨大的图像并让浏览器使用 CSS 宽度和高度缩放到明显更小的尺寸。即使您确实想使用一些缩放（例如完全拉伸的背景图像），也可以手动将图像调整为大致正确的大小。
    3. 使用 CSS 替换图像。
    4. 使用 CSS 精灵：将您的小图像组合成一张图像，并使用 CSS 显示正确的部分。
    5. 使图像可缓存。
  4. 将 CSS 放在首位：将 CSS 放在首位让您感觉页面加载速度更快。由于 CSS 被应用为内容的一部分被加载。
  5. 将 JavaScript 放在底部：JavaScript 用于操作 DOM 元素，因此请先加载 DOM 元素，以便首先呈现页面，然后再加载您的脚本。JavaScript 还阻止并行下载。
  6. 缩小JavaScript 和 CSS：缩小 CSS 和 JavaScript 可以将其大小减少到原始副本的 50% 到 30%。
  7. 使用外部 CSS 和 JavaScript：.css 和 .js 文件是可缓存的，因此请使用外部 CSS 和 JavaScript 文件。
  8. 跨域拆分组件：将您的组件拆分为两个或三个域，例如example.comtocom1.example.com和com2.example.com. 这允许您最大化并行下载。不要保留超过 2 到 4 个域，否则会给您造成 DNS 查找损失。
于 2012-12-31T03:57:22.780 回答
24

以下是您可以测试网页的列表：

  1. PageSpeed Insights - 谷歌开发者
  2. 慢
  3. 网页测试
  4. Pingdom 工具
  5. GTmetrix
  6. iWebTool
  7. APM 云监控

此外，为了加快您的页面，您可以使用：

  1. 亚马逊云前
  2. CloudFlare - 有免费计划

1.优化您的图像

知道何时为您的图像使用适当的文件格式。更改为不同的文件格式可以显着减小图像的文件大小。

  • GIF - 适用于徽标等颜色较少的图像。
  • JPEG - 非常适合具有大量颜色和细节的图像，例如照片。
  • PNG - 是您需要高质量透明图像时的选择。

查看这些资源以了解有关优化图像的更多信息：

为了减小图像大小，我推荐TinyPNG

2.不要缩小图像

避免使用比您需要的更大的图像，因为您可以在 HTML 中设置元素的width和height属性。<img>

* 如果您需要 100x100 像素的图像并且您有 700x700 像素的图像，请使用 Photoshop 之类的图像编辑器或这些基于 Web 的图像编辑器之一将图像调整为所需的尺寸。这降低了图像的文件大小，从而有助于减少页面加载时间。

3.压缩和优化您的内容

压缩网站内容的任务可能会对减少加载时间产生巨大影响。使用 HTTP 压缩时，您的所有网页数据都在一个较小的文件中发送，而不是一个包含许多不同文件的请求。有关更多信息，请参阅有关HTTP 压缩的 Wikipedia 文章的 Wikipedia 文章。

您还可以通过组合它们并缩小源代码来优化和压缩您的 JavaScript 和 CSS 文件。

4. 将样式表引用放在顶部

将样式表引用移动到<head>HTML 文档的 有助于您的页面感觉加载速度更快，因为这样做可以让您的页面逐步呈现样式。此外，它是 W3C 标准并没有什么坏处。

5. 将脚本引用放在底部

浏览器只能同时下载每个主机名的两个组件。如果您将脚本添加到顶部，它将在页面初始加载时阻止其下方的任何其他内容。这让人感觉页面加载速度较慢。

为避免这种情况，请将脚本引用尽可能放在 HTML 文档的下方，最好是在结束<body>标记之前。

6. 将 JavaScript 和 CSS 放在外部文件中

如果您的 JavaScript 和 CSS 直接在 HTML 文档中，则每次请求 HTML 文档时都会下载它们。因此，这并没有利用浏览器缓存并增加了 HTML 文档的大小。

始终将 CSS 和 JavaScript 放在外部文件中；这是一种最佳做法，使您的网站更易于维护和更新。

7. 最小化 HTTP 请求

当访问一个新网页时，大部分页面加载时间都花在下载该页面的组件（例如图像、样式表和脚本）上。

通过最大限度地减少网页需要发出的请求数量，它将加载得更快。为了减少对图像的 HTTP 请求，您可以做的一件事是使用CSS sprite组合多个图像。

如果您有多个样式表和 JavaScript 库，请考虑将它们组合起来以减少 HTTP 请求的数量。

8. 缓存你的网页

如果您使用动态生成网页的内容管理系统，您应该静态缓存您的网页和数据库查询，以便减少服务器的压力并加快页面呈现时间。

9. 减少 301 重定向

每次使用 301 重定向时，都会强制浏览器访问新 URL，从而增加页面加载时间。如果可能，请避免使用 301 重定向。

于 2012-12-30T21:28:29.283 回答
8

这里的其他答案很好地详细说明了性能调试工具和提高加载时间的技巧，所以我不会重复它们。

您的主要问题是，在向访问者显示您的主页之前，您完全加载了网站中的所有内容。这是不必要的，并且是导致您的网站加载缓慢的主要因素。

我可以理解您希望尽可能多地预加载，以便当访问者浏览您的网站时，所有内容似乎都会立即加载。但是，您所做的只是将每个部分的小加载时间转移到一个巨大的前期加载时间。如果访问者可能只浏览您网站的一个区域，他们仍然需要为整个网站的加载时间付费，而不仅仅是他们访问的部分。

实现小加载时间的最简单方法是将每个部分拆分为自己的页面，然后仅加载您在该页面上显示的内容。Javascript 和 CSS 等资源通常可以很好地缓存，因此您通常无需担心它们的加载时间会影响主页以外的任何内容。

或者，假设您希望将整个网站保留在一个页面上，您需要使用 Javascript 将各个子部分动态添加到页面，一旦您的主页所需的所有内容都完成加载并且进度条已隐藏。是的，如果访问者快速点击一个子部分，他们会看到其内容正在加载，但如果他们只对您的“联系我”部分感兴趣，他们将能够更快地获得他们需要的信息甚至没有注意到其他部分尚未完全加载。

那，并且不要使用巨大的背景图像。可以将较低分辨率的图像放大以填满屏幕，并提高 JPEG 压缩级别以减小文件大小。它是背景图像，不应成为焦点 - 将高分辨率图像留给您的作品集。:)

于 2012-12-31T12:19:50.860 回答
7

Chrome 有一个控制台，您可以在其中查看网站的加载时间以及所有需要下载的内容。

于 2012-12-21T10:30:21.243 回答
7

将 FireBug 插件安装到 FireFox，然后在 FireBug 中打开 NET 选项卡加载您的站点。您可以查看每个资源加载所需的时间。

看起来有两个背景图像需要 20 多秒才能加载。

更新

自从我发布这篇文章以来，世界已经发生了很大变化。Chrome 现在提供了一个审核选项卡，使您能够模拟一系列设备和网络速度等，以及网络、性能和内存分析器。灯塔插件https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en也不错。

于 2012-12-21T10:31:45.913 回答
5

It a long reply ... but I feel it provides enough details to some basic approaches to improve a site's performance. The following answer will also be applicable to almost any site. Any specific examples provided below might be for current version of http://www.jj-triggs.com/

In the points below, I'm referring to the usage of Net Panel of Firebug add-on in Firefox but other browsers also have similar tools with almost the same approach as I have mentioned.

Install Firebug on Firefox and open your website. Enable Firebug for your site (F12). Enable Firebug's Net panel if it is not enabled already.

Your site: http://www.jj-triggs.com/ - takes 5-6 seconds on my system for repeat visits (For this answer, I have not mentioned approaches to improve on this) - but the first visit took around 60 seconds. (The points below focus on how to improve on that) Most of the points mentioned below would improve your site for the first load (or fresh reloads)

After having loaded the page already, to test fresh loads, you can use Ctrl+F5, Ctrl+R, Ctrl+Shift+R (depending on the browser). Monitor the Net Panel of Firebug when the page is loading.

How much time a site takes depends on:

- The speed of the site host server (seems OK, nothing much to do for now)

- Visitor's connection speed (cannot do anything for it)

- Everything else (where you need to fix many things).
  The important approaches to resolve them are listed below:
    - Serve the user files with less size but same content:
        - Approach:
            Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip)
        - How to identify:
            In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip.
        - Solution:
            It might need you to modify .htaccess file (or some other approach based on the server)
            Search on Google or StackOverflow to see how to enable it.

        - Approach:
            Use minified JS and CSS files
        - How to identify:
            In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file.
        - Solution:
            Use either the minified JS/CSS files as provided by the library.
            Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor"

    - Approach:
        - Serve the user optimum images, i.e., less size with good enough quality
    - How to identify:
        - In Net Panel, go to Images tab > Sort by size
        - Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds.
    - Solution:
        - Compress the large images with softwares like GIMP (free) or Photoshop.

    - Approach:
        - Load the files from a CDN if possible
        - eg: Load jQuery, jQuery UI etc from popular but still free CDN
        - Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself
    - How to identify:
        - Check the Net panel's "Domain" column for popular libraries like jQuery, jQuery UI etc.
          They should be getting loaded from a popular CDN such as Google.
    - Solution:
        - Include JS and CSS from (Google) CDN if available.

    - Approach:
        - Load CSS before JS
        - It may not necessarily help much with faster loading completion,
          but it usually gives a faster feeling of load because your CSS gets applied as soon as possible.
    - How to identify:
        - Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS.
    - Solution:
        - Move the <script> tags towards the bottom of the page.

    - Approach:
        - Wherever possible, load third-party components like Google Maps dynamically after the page load has completed
    - How to identify:
        - Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded.
    - Solution:
        - The solution would depend on the third-party component and might be a bit tricky.
          Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.

I believe fixing these mentioned issues might reduce your (http://www.jj-triggs.com/) first load time to 10-30% of the time it takes currently.

于 2013-01-01T00:50:27.527 回答
5

所以：是的，您确实需要修复您的网站。人们不会等待加载网站，尤其是个人/专业网站。我在您的网站上看到的最重要的事情是几乎不存在图像压缩/优化。以下是一些指导方针：

将 JPEG 用于照片和渐变。对线条艺术或文本使用 PNG（或 GIF）。这与用于每种类型图像的压缩算法有关。

通常80% 的 JPEG 压缩率对于网络上的大多数图像来说是相当不错的，包括你所有的缩略图/画廊照片。例如，这里的 JPEG：http ://www.jj-triggs.com/images/page4_img3.jpg 是 25k。25k！！！那是巨大的，页面上有 15 个！在 80% 的压缩率（7k 的图像大小）下，我可以检测到一些压缩伪影，但我也是一名专业设计师并且正在寻找它。即使在 85% 时，图像大小也会下降到大约 8k。

同上您的背景图像。bg_img1.jpg 的时钟频率约为 900k；bg_img2.jpg 为 1.5 mb。这太疯狂了！特别是因为城市景观已经部分模糊 - 没有细节可以保留，这保证完全缺乏 JPEG 压缩。我将 bg_img2.jpg 的压缩率降低到 60%，文件大小为 <200k，质量几乎没有可检测到的差异：https ://d3vv6lp55qjaqc.cloudfront.net/items/1y3V2B2r0S1W0T1i081n/cityscape-compressed.jpg?X- CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=3cf18008。

有时，当图像是内容/网站的焦点时，它可以大一点压缩少。但是您的背景和画廊中的这些图像并不重要：它们是背景图像。它们不是用来研究的。画廊图像同上；他们只是让用户了解他们在下次点击时会得到什么。

使用选择性 JPEG 压缩。Adobe Fireworks 提供了这一功能 - 如果您有一张大图像，其中一部分清晰且清晰，但其余部分模糊或将被内容覆盖，您可以选择一个您想要更高 JPEG 压缩率的区域（例如 85% ) 并将图像的其余部分降低到 50% 或其他。例如，这里是具有选择性 JPEG 选择的 Cityscape https://d3vv6lp55qjaqc.cloudfront.net/items/2V1I1o0B1H0v2O141w1R/cityscape-compressed-selective.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=375e11ed。对焦部分为 75%；其余为 50%，开启平滑。

不要将图形用于文本。在 TypeKit、Google Webfonts 和通过 CSS 进行合理的排版控制的今天，几乎没有必要这样做。

减少需要传输的文件数量。除了下载时间之外，每个图像、JavaScript 文件、CSS 文件等都需要自己的 HTTP 请求。

这里有几篇关于图像压缩和下载时间的文章：

于 2013-01-01T00:05:23.287 回答
5

我对改善加载时间的建议很少：

  1. 您正在使用三个背景图像，而只显示了一个。删除其他两个或稍后加载它们。
  2. 将 PNG 图像转换为 JPEG，看看是否可以节省大小。
  3. 从 cdn 存储库加载标准 JavaScript 文件，而不是从您的服务器加载它们。该文件很有可能在其缓存中找到。
  4. 如果您还没有这样做，请在连接它们之后缩小您的 JavaScript 文件。
于 2012-12-21T10:39:06.817 回答
4

使用FirefoxYSlow 插件。它将为您提供有关各种性能桶的详细分析。

于 2012-12-21T10:47:12.213 回答
4

你可以试试这个网站和pingdom，在那里你可以检查你网站的每日性能

于 2013-01-04T13:27:59.623 回答
3

你也可以在这里检查一下： 测试站点

该测试表明您的图像是加载时间的重要贡献者。特别是似乎未优化且重量为 1.4 MB 的背景图像

研究这个，减少你的请求数量，缩小你的图像，推迟加载，你应该开始减少你的加载时间

免责声明：我是上述免费工具中涉及的开发人员之一

于 2012-12-21T10:45:13.567 回答
3

此页面上的主要问题是大图像 bg_img1.jpg、bg_img2.jpg 和 bg_img3.jpg。它们的大小在 0.91MB 和 1.45MB 之间。

于 2013-01-05T14:58:24.870 回答
1

Firefox/Chrome/IE - 按 F12，打开开发者面板，您应该可以在其中找到网络面板。

或尝试：http ://tools.pingdom.com/fpt/

于 2013-08-02T14:00:51.793 回答
1

在这种情况下，我会使用 Chrome 和开发工具栏（网络选项卡）来查看重元素是什么。

于 2013-08-02T17:54:28.707 回答
1

每个人都在提到与网络流量相关的问题，但页面加载也可能是由于 JavaScript。这是我在该主题上学到的一些技巧...

Chrome 开发者工具在浏览器中内置了一个分析器。您可以通过打开开发人员工具、单击配置文件、单击开始并执行您想要的任何任务来启动它。

此分析器将告诉您应用程序时间花费在哪里以及哪些功能占用了您的大部分时间。

由于 JavaScript 是单线程的，如果您在应用程序“init”上执行大量操作，那么您的页面将在短时间内无响应。你怎么知道是否有一些 JS 阻塞了？好吧，主要症状是当您滚动鼠标滚轮或单击某些东西时，在页面加载的一段时间内没有任何反应。

在此期间，您的滚动事件和点击会发生什么？好吧，他们被放置在事件队列中。只要其他 JavaScript 没有执行，就会调用事件队列。通常，这些问题的原因可以通过在 JS 调试器中单击“暂停”按钮并探索堆栈跟踪来由根追溯……是的，这就是执行速度有多慢！

以下是一些问题/解决方案

问题：页面无响应，页面加载

通常有 2 种方法可以解决这些问题： - 首先（不太好，但通常是合理的方法）您可以在页面加载时执行可能在 for 循环中运行的昂贵操作，然后将它们放入setTimeout(fn, 0). 注意：0 实际上是 4 毫秒或 5 毫秒，您的操作会被扔到事件队列中。这可以让您的应用程序的更多部分在需要进行大量繁重工作之前加载。- 其次，以这样一种方式构建您的应用程序，即这些操作仅在需要时运行，而不是将所有内容都放在“就绪”或“加载”页面中。这在很大程度上是一种预防措施或重构。通常很难解开这些类型的问题。

问题：点击/交互很慢（页面加载后）

您通常可以通过更好地委派活动来解决此问题。事件冒泡是 JS 中每个人都应该知道的。简而言之，想想 1 个对象上的点击事件实际上是如何在包含该对象的每个父级上发生的点击。委托使用这一事实允许您为许多执行类似/相同操作的 DOM 元素创建 1 个处理程序。阅读 jQueryon方法的文档，真正关注如何使用filter参数，以及e.currentTargetvs e.targetvsthis是什么。

问题：等待初始 AJAX 调用的时间过长

解决此问题的一种方法是更快地发出 AJAX 请求。您可以将请求放在页面加载但在页面准备好之前。然后，您的请求将与正在加载的其余页面资产并行化。

问题：JS文件太多

现在人们使用模块系统（查看 AMD 和 CommonJS），但解决网络流量过多导致页面加载延迟的最基本方法是对所有 JS 文件进行分类。现在，如果你有 100k 行 JS，那么你将遇到相反的问题（编译 JS 耗时太长，你需要拆分文件）。通常，将所有内容捆绑在一起是一种快速解决方案。您还可以将网络流量划分到多个子域。这将允许您并行化更多下载。我相信浏览器现在每个域的下载上限为 6 次。CDN 也会对此有所帮助。

于 2013-07-30T03:38:43.210 回答
1

虽然这是一个较老的问题，但我想再推出一款出色的免费工具，可用于查找网站的性能问题。

Compuware 的 (dnyaTrace) AJAX 免费版工具帮助我解决了过去在我的几个网站上遗漏的一些问题……我记得我在使用该工具时发现了一个缓存问题（与 htaccess 相关），以及其他一些很棒的技巧。

无论如何，它目前可以在这里下载：http: //www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

于 2014-01-22T22:30:18.183 回答