目前我的网站需要几千年才能加载，即使它几乎没有任何内容。我的假设是因为页面上有很多图片和 JavaScript。
有没有办法测试导致加载时间过长的原因？
【问题讨论】：
标签： javascript jquery html css
在PageSpeed Insights - Google Developers 测试您的页面，您将看到所有让您的网站更快的建议。
【讨论】：
您可以遵循以下一些基本事项来提高网站速度：
example.com 到 com1.example.com 和 com2.example.com。这允许您最大化并行下载。不要保留超过 2 到 4 个域，否则会导致 DNS 查找损失。【讨论】：
以下是您可以测试网页的列表：
您还可以使用加快页面速度：
1.优化您的图片
知道何时为您的图像使用适当的文件格式。更改为不同的文件格式可以显着减小图像的文件大小。
查看这些资源以了解有关优化图像的更多信息：
为了减小图像大小，我推荐TinyPNG
2。不要缩小图像
避免使用比您需要的更大的图像，因为您可以在 HTML 中设置 <img> 元素的 width 和 height 属性。
* 如果您需要 100x100 像素的图像并且您有 700x700 像素的图像，请使用 Photoshop 之类的图像编辑器或这些基于 Web 的图像编辑器之一将图像调整为所需的尺寸。这会减小图像的文件大小，从而有助于减少页面加载时间。
3.压缩和优化您的内容
压缩网站内容的任务可能对减少加载时间产生巨大影响。使用 HTTP 压缩时，您的所有网页数据都在一个较小的文件中发送，而不是一个包含许多不同文件的请求。有关详细信息，请参阅HTTP Compression 上的这篇 Wikipedia 文章。
您还可以通过合并和压缩源代码来优化和压缩您的 JavaScript 和 CSS 文件。
4.将样式表引用放在顶部
将样式表引用移动到 HTML 文档的 <head> 有助于您的页面感觉加载速度更快，因为这样做可以让您的页面逐步呈现样式。此外，它是 W3C 标准也没有什么坏处。
5.将脚本引用放在底部
浏览器只能同时下载每个主机名的两个组件。如果您将脚本添加到顶部，它将在页面初始加载时阻止其下方的任何其他内容。这让人感觉页面加载速度较慢。
为避免这种情况，请将脚本引用放置在 HTML 文档的尽可能远的位置，最好是在结束 <body> 标记之前。
6.将 JavaScript 和 CSS 放在外部文件中
如果您的 JavaScript 和 CSS 直接在 HTML 文档中，则每次请求 HTML 文档时都会下载它们。因此，这并没有利用浏览器缓存并增加了 HTML 文档的大小。
始终将您的 CSS 和 JavaScript 放在外部文件中；这是一种最佳做法，可让您的网站更易于维护和更新。
7.最小化 HTTP 请求
访问新网页时，大部分页面加载时间都花在下载该页面的组件（例如图像、样式表和脚本）上。
通过最大限度地减少网页需要发出的请求数，它的加载速度会更快。要减少对图像的 HTTP 请求，您可以做的一件事是使用CSS sprites 组合多个图像。
如果您有多个样式表和 JavaScript 库，请考虑将它们组合起来以减少 HTTP 请求的数量。
8.缓存您的网页
如果您使用动态生成网页的content management system，您应该静态缓存您的网页和数据库查询，以便减少服务器的压力并加快页面呈现时间。
9.减少 301 重定向
每次使用 301 重定向时，都会强制浏览器访问新的 URL，从而增加页面加载时间。如果可能，请避免使用 301 重定向。
【讨论】：
这里的其他答案很好地详细介绍了性能调试工具和提高加载时间的技巧，所以我不会重复它们。
您的主要问题是在向访问者显示您的主页之前，您完全加载了网站中的所有内容。这是不必要的，而且是导致您的网站加载缓慢的主要原因。
我可以理解您希望尽可能多地进行预加载，这样当访问者浏览您的网站时，所有内容似乎都会立即加载。但是，您所做的只是将每个部分的小加载时间转移到一个巨大的前期加载时间。如果访问者可能只浏览您网站的一个区域，他们仍然需要为整个网站的加载时间付费，而不仅仅是他们访问的部分。
实现短加载时间的最简单方法是将每个部分拆分为自己的页面，然后仅加载您在该页面上显示的内容。 Javascript 和 CSS 等资源通常可以很好地缓存，因此您通常无需担心它们的加载时间会影响主页以外的任何内容。
或者，假设您想将整个网站保留在一个页面上，您需要使用 Javascript 将各个子部分动态添加到页面中，一旦您的主页所需的所有内容都已完成加载并且进度条已隐藏.是的，如果访问者快速点击一个子部分，他们会看到其内容正在加载，但如果他们只对您的“联系我”部分感兴趣，他们将能够更快地获得他们需要的信息甚至没有注意到其他部分还没有完全加载。
那个，不要使用大的背景图片。可以将较低分辨率的图像放大以填满屏幕，并提高 JPEG 压缩级别以减小文件大小。它是背景图像，不应成为焦点 - 将高分辨率图像留给您的作品集。 :)
【讨论】：
Chrome 有a console，您可以在其中查看网站的加载时间以及所有需要下载的内容。
【讨论】：
将 FireBug 插件安装到 FireFox 中，然后在 FireBug 中打开 NET 选项卡加载您的站点。您可以查看每个资源的加载时间。
看起来有两张背景图片需要 20 多秒才能加载。
更新
自从我发布这篇文章以来，世界已经发生了很大变化。 Chrome 现在提供了一个审核选项卡，可让您模拟一系列设备和网络速度等，以及网络、性能和内存分析器。 灯塔插件https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en也不错。
【讨论】：
我有一些改善加载时间的建议：
【讨论】：
这是一个很长的回复......但我觉得它为一些提高网站性能的基本方法提供了足够的细节。 以下答案也适用于几乎任何网站。 下面提供的任何具体示例都可能适用于当前版本的http://www.jj-triggs.com/
在以下几点中，我指的是在 Firefox 中使用 Firebug 插件的 Net Panel，但在其他浏览器中使用 也有类似的工具，方法与我提到的几乎相同。
在 Firefox 上安装 Firebug 并打开您的网站。 为您的站点启用 Firebug (F12)。 如果尚未启用 Firebug 的 Net 面板，请启用它。
您的网站：http://www.jj-triggs.com/ - 在我的系统上重复访问需要 5-6 秒（对于这个答案，我没有提到改进的方法） - 但第一次访问大约需要 60 秒。 （以下几点着重于如何改进） 下面提到的大多数要点都会在首次加载（或重新加载）时改善您的网站
已经加载页面后，要测试新加载，您可以使用 Ctrl+F5、Ctrl+R、Ctrl+Shift+R（取决于浏览器）。 页面加载时监控 Firebug 的 Net Panel。
- 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.
我相信解决这些提到的问题可能会将您的 (http://www.jj-triggs.com/) 首次加载时间减少到当前所需时间的 10-30%。
【讨论】：
所以：是的，您确实需要修复您的网站。人们不会等待加载网站，尤其是个人/专业网站。我在您的网站上看到的最重要的事情是几乎不存在图像压缩/优化。以下是一些指导方针：
对照片和渐变使用 JPEG。将 PNG（或 GIF）用于线条艺术或文本。这与用于每种类型图像的压缩算法有关。
通常80% 的 JPEG 压缩率对于网络上的大多数图像（包括您的所有缩略图/画廊照片）来说都相当不错。例如，这里的 JPEG：http://www.jj-triggs.com/images/page4_img3.jpg 是 25k。 25k！！！那是巨大的，页面上有 15 个！在 80% 的压缩率（图像大小为 7k）下，我可以检测到一些compression artifacts，但我也是一名专业设计师并且正在寻找它。即使在 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 请求。
这里有几篇关于图像压缩和下载时间的文章：
【讨论】：
对 Firefox 使用 YSlow plugin。它将为您提供有关各种性能桶的详细分析。
【讨论】：
你也可以在这里检查一下： Test site
此测试表明，图片对加载时间的贡献很大。特别是似乎未优化且重量为 1.4 MB 的背景图像
研究这个，减少你的请求数量，缩小你的图像，延迟加载，你应该开始减少你的加载时间
免责声明：我是上述免费工具的开发者之一
【讨论】：
此页面上的主要问题是大图像 bg_img1.jpg、bg_img2.jpg 和 bg_img3.jpg。它们的大小在 0.91MB 到 1.45MB 之间。
【讨论】：
每个人都提到与网络流量相关的问题，但页面加载也可能是由于 JavaScript。以下是我在该主题上学到的一些技巧...
Chrome 开发者工具在浏览器中内置了一个分析器。您可以通过打开开发人员工具、单击配置文件、单击开始并执行您想要的任何任务来启动它。
此分析器会告诉您应用程序的时间都花在了哪些地方，以及哪些功能占用了您的大部分时间。
由于 JavaScript 是单线程的，如果您在应用程序“init”上执行大量操作，那么您的页面将在短时间内无响应。你怎么知道是否有一些 JS 阻塞了？好吧，主要症状是当您滚动鼠标滚轮或单击某些东西时，在页面加载的一段时间内没有任何反应。
在此期间，您的滚动事件和点击会发生什么？好吧，他们被放置在事件队列中。只要其他 JavaScript 没有执行，就会调用事件队列。通常这些问题的原因可以通过在 JS 调试器中单击“暂停”按钮并探索堆栈跟踪来由根追溯......是的，这就是执行速度有多慢！
以下是一些问题/解决方案
通常有两种方法可以解决这些问题：
- 首先（不太好，但通常是合理的方式）您可以在页面加载时执行可能在 for 循环中运行的昂贵操作，并将它们放入 setTimeout(fn, 0)。注意：0 实际上是 4 毫秒或 5 毫秒，您的操作会被扔到事件队列中。这可以让您的应用程序的更多部分在需要进行大量繁重工作之前加载。
- 其次，以这样一种方式构建您的应用程序，即这些操作仅在需要时运行，而不是将所有内容都放在“就绪”或“加载”页面中。这在很大程度上是一种预防措施或重构。这类问题一般很难解决。
您通常可以通过更好地委派活动来解决此问题。事件冒泡是 JS 中每个人都应该知道的。简而言之，想想一个对象上的点击事件实际上是如何在包含该对象的每个父级上发生的点击。委托使用这一事实允许您为许多执行类似/相同操作的 DOM 元素创建 1 个处理程序。阅读 jQuery 的 on 方法的文档，真正关注如何使用 filter 参数，以及 e.currentTarget 与 e.target 与 this 是什么。
解决此问题的一种方法是更快地发出 AJAX 请求。您可以将请求放在页面加载但在页面准备好之前。然后，您的请求将与正在加载的其余页面资源并行处理。
现在人们使用模块系统（查看 AMD 和 CommonJS），但解决网络流量过多导致页面加载延迟的最基本方法是对所有 JS 文件进行分类。现在如果你有 100k 行 JS，那么你将遇到相反的问题（编译 JS 需要太长时间，你需要拆分文件）。通常，将所有内容捆绑在一起是一种快速解决方案。您还可以将网络流量划分到多个子域。这将允许您并行化更多下载。我相信浏览器现在每个域的下载上限为 6 次。 CDN 也会对此有所帮助。
【讨论】：
Firefox/Chrome/IE - 按 F12，打开开发者面板，您应该可以在其中找到网络面板。
【讨论】：
在这种情况下，我会使用 Chrome 和开发工具栏（网络选项卡）来查看哪些是重元素。
【讨论】：
虽然这是一个较老的问题，但我想再推出一款出色的免费工具，可用于查找网站的性能问题。
Compuware 的 (dnyaTrace) AJAX 免费版工具帮助我解决了过去我在几个网站上遗漏的一些问题...我记得使用该工具时发现了一个缓存问题（与 htaccess 相关）等很棒的提示。
无论如何，目前都可以在这里下载： http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html
【讨论】：