修复网站加载时间？
目前我的网站需要花费几千年才能加载，即使它几乎没有任何东西。 我的假设是，这是因为页面上有很多图片和JavaScript。
有没有一种方法来testing是什么导致了长时间加载？
在这里testing您的页面PageSpeed Insights – Google Developers ，您将看到所有提高网站速度的build议。
这里有一些基本的东西，你可以按照提高您的网站速度：
- 加载后的内容 ：首先不要加载所有的东西，如JavaScript文件，图像，数据。 创build一个用户应该首先看到的内容stream，然后按顺序加载。 这将减less用户的感知等待时间，因为他们将能够查看站点的加载部分，而其他东西加载。
- 预加载内容 ：受益于用户的空闲时间。 使用Ajax或图像caching技巧加载背景中的内容，所以用户不会注意到该页面仍在“工作”。 由于文件已经预先加载到浏览器的caching中，当用户加载下一个页面或视图时，由于数据已经存储在本地，因此文件看起来非常快。 （简而言之，发布和预加载内容的主要思想是首先向用户展示他们想要的内容，然后在需要查看内容之前加载其他内容。使用JavaScript或jQuery Ajax来加载内容，caching它们。
- 优化图像 ：
- 降低图像的质量到人眼无法想象的程度。 您可以妥协一点图像质量大大减less文件大小，从而大大下载/加载速度。
- 不要使用浏览器缩减图像尺寸：不要使用CSS宽度和高度来发送巨大的图像，并让浏览器缩小到更小的尺寸。 手动调整图像的大小以使其大小正确，即使您想使用某种缩放比例，如完全拉伸的背景图像。
- 使用CSSreplace图像。
- 使用CSS精灵：将你的小图像合并到一个图像，并使用CSS显示正确的部分。
- 使图像caching。
- 保持CSS在最前面 ：保持CSS在最上面让你感觉页面加载速度更快。 由于在加载内容的一部分时应用了CSS。
- 将JavaScript保留在底部 ：JavaScript用于处理DOM元素，因此首先加载DOM元素，以便首先呈现页面，然后加载脚本。 JavaScript也会阻止并行下载。
- 缩小JavaScript和CSS ：缩小CSS和JavaScript可以将其大小减less50％到30％。
- 使用外部CSS和JavaScript ：.css和.js文件是可caching的，所以使用外部CSS和JavaScript文件。
- 跨域拆分组件 ：将您的组件拆分成两个或三个域，如
example.com到com1.example.com和com2.example.com。 这使您可以最大限度地平行下载。 不要超过两到四个域名，否则会给你一个DNS查询的惩罚。
这里是你可以testing你的网页的列表：
- PageSpeed Insights – Google Developers
- YSlow的
- Webpagetest
- Pingdom工具
- GTmetrix
- iWebTool
- APM云端监视器
同样为了加快你的页面，你可以使用：
- Amazon CloudFront
- CloudFlare – 有免费的计划
1.优化你的图片
知道何时使用适当的文件格式为您的图像。 更改为不同的文件格式可以显着减less图像的文件大小。
- GIF – 对于像徽标这样颜色很less的图像来说非常理想。
- JPEG – 对于具有许多颜色和细节（如照片）的图像非常有用。
- PNG – 是您需要高质量透明图像时的select。
查看这些资源以了解更多关于优化图像的信息：
- networking图像保存综合指南
- JPEG 101：JPEG上的崩溃课程指南
- 网页devise师的PNG图像格式指南
- 8优秀的工具，优化您的图像
为了减less图像尺寸，我会推荐TinyPNG
2.不要缩小图像
避免使用比您需要的更大的图片，因为您可以在HTML中设置<img>元素的width和height属性。
*如果您需要100×100像素的图像，并且您有700×700像素的图像，请使用图像编辑器（如Photoshop）或其中一种基于networking的图像编辑器将图像调整为所需的尺寸。 这降低了图像的文件大小，从而有助于减less页面加载时间。
3.压缩并优化您的内容
压缩网站内容的任务可以对减less加载时间产生巨大的影响。 使用HTTP压缩时，您的所有网页数据都将在一个较小的文件中发送，而不是包含许多不同文件的请求。 有关更多信息，请参阅关于HTTP压缩的维基百科文章。
您也可以通过组合和缩小源代码来优化和压缩JavaScript和CSS文件。
4.将样式表引用置于顶部
将样式表引用移动到HTML文档的<head>可帮助您的页面加载速度更快，因为这样可以让页面逐渐呈现样式。 另外，它不会伤害它是W3C标准。
5.将脚本引用放在底部
浏览器只能同时为每个主机名下载两个组件。 如果您将脚本添加到顶部，则会在页面初始加载时阻止其下的任何其他内容。 这使得它感觉像加载速度较慢的页面。
为了避免这种情况，尽可能在HTML文档之前放置脚本引用，最好在closures<body>标签之前。
6.将JavaScript和CSS放在外部文件中
如果您的JavaScript和CSS直接在您的HTML文档中，则每次请求HTML文档时都会下载它们。 这样就没有利用浏览器caching，并增加了HTML文档的大小。
始终将您的CSS和JavaScript放在外部文件中; 这是一个最佳实践，使您的网站更容易维护和更新。
7.最小化HTTP请求
当访问一个新的网页时，大部分的页面加载时间都是用来下载页面的组件（例如图片，样式表和脚本）。
通过最小化网页需要的请求数量，它将加载得更快。 为了减less对图像的HTTP请求，你可以做的一件事就是使用CSS精灵组合多个图像。
如果您有多个样式表和JavaScript库，请考虑将它们组合起来以减lessHTTP请求的数量。
8.caching您的网页
如果您使用dynamic生成网页的内容pipe理系统 ，则应该静态caching网页和数据库查询，以便减less服务器上的压力，同时加快页面渲染时间。
9.减less301redirect
每次使用301redirect时，都会强制浏览器到一个新的URL，这会增加页面加载时间。 如果可能，请避免使用301redirect。
这里的其他答案在详细介绍性能debugging工具和提示以改善加载时间方面做得很好，所以我不再重复。
您的主要问题是，在将您的主页显示给访问者之前，您必须加载网站上的所有内容 。 这是不必要的，并且是您的网站加载缓慢的主要原因。
我可以理解你想尽可能地预先加载，所以当访问者浏览你的网站时，一切似乎都会立即加载。 但是，您所做的只是将每个部分的小加载时间转换为一个巨大的前期加载时间。 如果访问者只能浏览您网站的一个区域，他们仍然在为整个网站的加载时间付费，而不仅仅是他们访问的部分。
实现较小加载时间的最简单方法是将每个部分分成自己的页面，然后只加载显示在该页面上的内容。 像Javascript和CSS这样的资源通常caching的很好，所以你通常不需要担心他们的加载时间会影响你的主页以外的任何东西。
或者，假设您希望将整个网站保留在一个页面上，则需要使用Javascriptdynamic地将各个子部分添加到页面中，一旦您的主页所需的所有内容都已完成加载并且进度栏已隐藏起来。 是的，如果访客快速点击小节，他们会看到其内容被加载，但是如果他们只对您的“联系我”部分感兴趣，他们将能够更快地获得所需的信息甚至没有注意到其他部分尚未完全加载。
那，而且不要使用巨大的背景图片。 升级较低分辨率的图像以填充屏幕并提高JPEG压缩级别以减小文件大小是可以的。 这是一个背景图像，不应该成为一个焦点 – 为您的投资组合留下高分辨率的图像。 🙂
将FireBug插件安装到FireFox中，然后使用在FireBug中打开的NET选项卡加载您的站点。 您可以看到每个资源需要加载多长时间。
它看起来像有两个背景图像，每个需要超过20秒的加载。
Chrome有一个控制台 ，您可以查看网站的加载时间和所有需要下载的东西。
我有几个build议来提高加载时间：
- 您正在使用三个背景图像，而只显示一个。 要么删除其他两个或以后加载它们。
- 将PNG图像转换为JPEG格式，看看是否可以保存大小。
- 从cdn存储库加载标准JavaScript文件，而不是从服务器加载它们。 该文件可能在其caching中find很好的机会。
- 如果你还没有这样做，在连接它们之后缩小你的JavaScript文件。
所以：是的，你真的需要修复你的网站。 人们不会等待加载一个网站，特别是个人/专业网站。 我在您的网站上看到的最大的事情是几乎不存在的图像压缩/优化。 以下是一些指导方针：
使用JPEG照片和渐变。 使用PNG（或GIF）作为线条艺术或文字 。 这与用于每种types的图像的压缩algorithm有关。
通常，对于networking上的大多数图像，包括所有的缩略图/图片库， JPEG压缩率都高达80％ 。 例如，这个JPEG在这里： http ://www.jj-triggs.comhttp://img.dovov.compage4_img3.jpg是25k。 25K！ 这是巨大的，你在网页上有15个！ 在80％的压缩率下（图像大小为7k），我可以检测到一些压缩伪影，但我也是一个专业的devise师和我正在寻找它。 即使在85％的情况下，图像尺寸也会下降到8K左右。
同上您的背景图片。 bg_img1.jpg大约在900K时钟; bg_img2.jpg是1.5 MB。 这太疯狂了！ 特别是因为城市景观已经部分模糊了 – 没有细节可以保留，所以完全没有JPEG压缩。 我把bg_img2.jpg上的压缩率降低到了60％，文件大小<200k，质量差别几乎没有： http : //cl.ly/image/230I3L3x0n1D 。
有时候，当图像是内容/站点的焦点时，可以将它放大，缩小。 但是，在你的背景和画廊中的这些图像并不重要：它们是背景图像。 他们不打算被研究。 画廊图片同上; 他们只是让用户了解他们将在下一次点击中获得什么。
使用select性的JPEG压缩。 Adobe Fireworks提供了这个function – 如果您的图像大部分是锐利而焦点对准的，而其余部分是模糊的或者会被内容覆盖，那么您可以select一个需要较高JPEG压缩率的区域（例如85％ ），并将图像的其余部分调低至50％或其他。 例如，这里是城市景观与select性JPEGselecthttp://cl.ly/image/0T2z330P083r 。 焦点部分在75％; 剩下的是50％，平滑打开。
不要使用graphics的文字。 在TypeKit的这一天，Google Webfonts和通过CSS进行合理的印刷控制，几乎是不必要的。
减less需要传输的文件数量。 除了下载时间以外，每个图像，JavaScript文件，CSS文件等都需要自己的HTTP请求。
这里有一些关于图像压缩和下载时间的文章：
这是一个长时间的答复…但我觉得它提供了一些基本的方法来提高网站的性能足够的细节。 以下的答案也适用于几乎任何网站。 下面提供的任何具体的例子可能是当前版本的http://www.jj-triggs.com/
在下面的几点中，我指的是在Firefox中使用Firebug插件的Net Panel，但其他浏览器也有类似的工具，几乎和我所提到的一样。
在Firefox上安装Firebug并打开您的网站。 为您的网站启用Firebug（F12）。 启用Firebug的networking面板，如果它尚未启用。
您的网站： http ： //www.jj-triggs.com/ – 我的系统需要5-6秒的时间重复访问（对于这个答案，我没有提到改进的方法） – 但第一次访问大约需要60秒。 （以下几点着重于如何改进）下面提到的大多数点将改善您的网站的第一个负载（或新鲜重新加载）
在已经加载页面之后，为了testing新加载，可以使用Ctrl + F5，Ctrl + R，Ctrl + Shift + R（取决于浏览器）。 加载页面时，监视Firebug的净面板。
一个网站需要多less时间取决于：
- 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, ie, 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.
我相信修复这些提到的问题可能会使您的首次加载时间缩短到目前所花费的时间的10-30％。
使用Firefox的YSlow 插件 。 它会给你详细的分析各种性能桶。
你可以尝试这个网站和pingdom ，你可以检查你的网站的日常性能
你也可以在这里查一下： testing网站
这个testing显示你的图像是一个伟大的贡献者加载时间。 特别是背景图像，似乎没有优化和重量1.4 MB
研究这个，减less你的请求数量，缩小你的图像，推迟加载，你应该开始减less你的加载时间
免责声明：我是上述免费工具中的开发者之一
这个页面上的主要问题是bg_img1.jpg，bg_img2.jpg和bg_img3.jpg。 它们的大小在0.91MB和1.45MB之间。
每个人都提到与networkingstream量有关的问题，但页面加载也可能是由于JavaScript。 这里有一些技巧，我已经拿起了这个主题…
Chrome开发者工具在浏览器中内置了一个分析器。 您可以启动它，通过打开开发人员工具，单击configuration文件，单击开始并执行任何您想要的任务。
这个分析器会告诉你你的申请时间在哪里，哪些function占用了大部分时间。
由于JavaScript是单线程的，如果你在应用程序“init”上执行了很多东西，那么你的页面在短时间内就不会响应。 你怎么知道是否有一些阻塞的JS？ 那么，主要的症状是当你滚动你的鼠标滚轮或点击事件没有发生一些页面加载时间显着的时间。
在这段时间你的滚动事件和点击会发生什么？ 那么他们被放在事件队列中。 事件队列在其他JavaScript未执行时被调用。 通常，这些问题的原因可以通过单击JSdebugging器中的“暂停”button并浏览堆栈跟踪来追溯…是的，这就是执行速度慢的原因！
以下是一些问题/解决scheme
问题：页面加载时页面无响应
通常有两种方法来解决这些问题： – 首先（不是那么好，但通常是合理的方式），你可以采取昂贵的操作，可能在页面加载循环运行，并把它们在setTimeout(fn, 0) 。 注意：0实际上是4ms或5ms，你的操作被抛到事件队列上。 这可以让您的应用程序的更多部分加载之前，需要做很多繁重的工作。 第二，构build您的应用程序，使得这些操作只在需要时运行，而不是将所有内容都放在页面“准备好”或“加载”中。 这是一个预防措施或重构。 解决这些问题一般是很难的。
问题：点击/交互速度很慢（页面加载后）
通常你可以通过做更好的工作来解决这个问题。 事件冒泡是JS中每个人都应该知道的东西。 简而言之，请考虑一个对象上的单击事件实际上是如何发生在每个包含该对象的父对象上的单击事件。 代表团正在使用这个事实来允许你为许多做类似/相同事情的DOM元素创build一个处理程序。 阅读jQuery的on方法文档，并真正关注如何使用filter参数，以及e.currentTarget vs e.target与this 。
问题：等待最初的AJAX调用太久了
解决这个问题的一个方法是尽快提出AJAX请求。 您可以在页面加载但在页面准备就绪之前放置请求。 然后，您的请求将与正在加载的其余页面资源并行。
问题：太多的JS文件
人们现在每天都会使用模块系统（查看AMD和CommonJS），但是解决networkingstream量太大而延迟页面加载的最基本的方法就是search所有的JS文件。 现在，如果你有10万行的JS，那么你将会有相反的问题（编译JS需要很长时间，你需要分割你的文件）。 一般来说，捆绑一切是一个快速解决scheme，但。 您也可以将您的networkingstream量分成多个子域。 这将允许你并行化更多的下载。 我相信浏览器现在每个域名有6个下载限制。 一个CDN也将有助于这一点。
Firefox / Chrome / IE – 按F12，打开一个开发人员面板，在那里你应该可以find一个networking面板。
或者试试： http : //tools.pingdom.com/fpt/
在这种情况下，我会使用Chrome和开发工具栏（networking选项卡）来观察什么是重元素。
虽然这是一个老问题，我想抛出一个更好的免费工具，可用于查找网站的性能问题。
Compuware的（dnyaTrace）AJAX免费版工具帮助我解决了过去在我的几个网站上错过的一些事情…我记得有一个caching问题（htaccess相关），我发现使用该工具，以及其他伟大的技巧。
无论如何，它现在可以在这里下载： http : //www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html
