如何让我的网页加载更快？答案

【问题标题】：How can I make my web page load faster?如何让我的网页加载更快？
【发布时间】：2009-08-18 02:16:03
【问题描述】：

假设浏览器缓存为空 - 如何仅通过应用 HTML/CSS/JavaScript 代码更改来加快网页加载速度？

意思是，不建议移动服务器，使用CDN等。只需更改代码以使其加载更快。

【问题讨论】：

叫我忍者让我真的不想帮你了。
你知道忍者每小时收费 250 美元以上，对吧？
@ChssPly76 - 哇，我知道收费低于这个价格的女孩 :)
天哪，我真的很想卑躬屈膝地为某人免费工作......
@TimJK - 我建议你请那些女孩帮助你优化页面并节省一些钱

标签： javascript html css

【解决方案1】：

将您的 JS 和 CSS 从 HTML 中移出，并分别放入一个缩小的文件中。此外，如果可以的话，缩小任何图像的大小。我没有注意到任何翻转图像，但如果你有它们，请考虑 CSS sprites。

【讨论】：

这取决于。如果用例是空缓存，则内联实际上更快。只有 1 个对 css 和 js 的 http 请求。 Yahoo.com 这样做是出于这个特定的原因。
在大多数情况下，用户会访问您网站上的多个页面。这样一来，就全部缓存起来了。
Sprite 不仅仅是翻转图像。您始终可以合并所有图像并从速度提升中受益。
e-satis 说的是对的。我相信它们只是主要应用于翻转？
我对所有东西都使用精灵，而不仅仅是“翻转”。如果您使用图像，请想办法有效地对它们进行精灵化。

【解决方案2】：

根据我的经验：

(1) 为 Firefox 安装 YSlow 和 Page Speed 扩展程序，并尽可能听从他们的建议。

(2) 非常重要：为保存图片、JS 和 CSS 文件的目录配置 HTTP 缓存。我只是把它们放在一个名为static 的目录中，然后把这个.htaccess 文件放在那里：

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=29030400, public"
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A29030400
    ExpiresByType image/x-icon A29030400
    ExpiresByType application/x-javascript A29030400
    ExpiresByType application/javascript A29030400
    ExpiresByType text/css A29030400
    ExpiresByType image/gif A29030400
    ExpiresByType image/png A29030400
    ExpiresByType image/jpeg A29030400
    ExpiresByType text/plain A29030400
    ExpiresByType application/x-shockwave-flash A29030400
    ExpiresByType video/x-flv A29030400
    ExpiresByType application/pdf A29030400
    ExpiresByType text/html A29030400
</IfModule>

(3) 将 HTML 文件中的 CSS 代码放入单独的 CSS 文件中。

(4) 将你的 JS 文件合并为一个文件。然后使用 JSMin 压缩这个文件会很有用。

(5) 在 Apache 中为静态文本文件开启 gzip 压缩。如果您的 Apache 服务器上有 mod_deflate，请将其放入您网站根目录的 .htaccess 文件中：

<IfModule mod_headers.c>
    <FilesMatch "\\.(js|css|html|htm|php|xml)$">
        SetOutputFilter DEFLATE
    </FilesMatch>
 </IfModule>

【讨论】：

【解决方案3】：

考虑到 HTML 和 CSS 除了下载之外不涉及加载时间，如果您不愿意考虑将其移动到外部文件或使用压缩等服务器端解决方案，那么除了缩小实际代码大小之外，您无能为力。实际上，这不会对您的网页产生太大影响。

就您的 Javascript...而言，您的页面中有大量内联代码，这可能是您运行缓慢的原因。不幸的是，我无法在一天中抽出一个小时来为您介绍这一切。 Stack Overflow 不是免费的工作......如果您愿意将速度缩小到特定区域，我很乐意帮助分析它，但要求有人从头开始分析您的整个网站有点多。

【讨论】：

【解决方案4】：

阅读并应用Steve Souders 曾经写过的所有内容（尤其是但不仅限于他的两本极好的书），这只是关于这些问题的全部内容（也许他 10% 的精彩建议是你不想听到的那种，例如使用 CDN，但绝大多数都完全符合您的要求）。

【讨论】：

Steve Souders 是这方面的专家，曾为 Yahoo 和 Google 做过专业的工作。他是为 Firebug 制作 YSlow 的人。
是的，我偶尔有幸在他身边工作，他真的很棒，无论是他的技术技能还是他通过减少延迟来改善用户体验的执着奉献！-)

【解决方案5】：

将 JS 和 CSS 声明外部化，而不是将它们包含在内 - 这很明显。这样用户就可以下载一次，以后从缓存中使用它们。

【讨论】：

好点，让我们假设一个空缓存。我已经更新了原帖
这取决于。如果用例是空缓存，则内联实际上更快。只有 1 个对 css 和 js 的 http 请求。 Yahoo.com 这样做是出于这个特定的原因。
必须复制并粘贴您的评论吗？
这是真的，但我认识的大多数人通常不会清理他们的缓存，所以当他们回到网站查看最新帖子时，从缓存中加载可能对他们有利。如果将 CSS 声明合并到 1 个大文件中，对于 JS 也是如此（以最小化服务器请求），应该是合理的。

【解决方案6】：

将压缩后的内容提供给接受它的浏览器。

【讨论】：

【解决方案7】：

你正在加载一些 JS 库，每当渲染引擎遇到一个标签时，浏览器就会停止并开始执行它，每个人都坐下来等待，直到你庞大的 JavaScript 库完成加载。

阅读这篇文章：non-blocking JavaScript documents 并将其应用于您的网站。还将您网页中的所有 JavaScript 外部化，并在页面末尾以畅通无阻的方式加载它们。当用户的视觉神经元传输页面的第一个视觉并试图找出点击的位置时，你所有的 JS 都将被执行。这就是所谓的感知性能。

【讨论】：

【解决方案8】：

Apache's mod_expire 提供如此快速的加载性能，即使在本地测试中您也会注意到它。 mod_expire 所有静态内容都是一个好主意，包括 .js 文件，正如 Matt Grande 所说。大多数“非常大”的网站都使用该网站或类似网站，包括 Stackoverflow.com。

【讨论】：

【解决方案9】：

除了以上建议：

不要使用 CSS 表达式。
您的淡入淡出效果代码正在尝试设置无效颜色#ffff100。为什么不使用jQuery.animate()？
```
$(<selector>).animate({backgroundColor: <targetColor>}, <duration>)
```

【讨论】：

关于 CSS 表达式的建议提醒了我……为 Firefox 安装 YSlow，应该会给你一些很好的建议。

【解决方案10】：

在用户实际点击它们之前，不要加载备用选项卡的所有数据。如果用户想查看其他选项，只需获取选项卡文本的计数并加载数据。

【讨论】：

【解决方案11】：

图像：Photoshop 可以优化您的图像以保存到网络。这大大减少了空间。
脚本：更少的循环，更优化的解决方案等
HTML : 无表格布局（减少了很多标签）
CSS：较少使用过滤器等功能。

这些是任何网页优化的技巧。

【讨论】：

【解决方案12】：

优化图片、使用精灵、优化html、分离css、js、压缩/缩小、使用缓存和聚合将js/css合并为一个文件。用户服务器端缓存，获得更快的服务器，确保您拥有一个具有最小延迟和快速响应时间的快速网络。

【讨论】：

【解决方案13】：

我没有发现抓取地图功能有用。它非常时髦，但它引起了我的注意，它产生的房屋清单从未引起我的注意。我更喜欢更传统的搜索功能，可能是从输入搜索功能扩展而来。并且，浏览源文件看起来地图和主页列表 javascript 是源的 2/3。没有它一定会有更快的加载速度。

【讨论】：

【解决方案14】：

我建议下载 Safari 并使用他们很棒的开发工具（和漂亮的界面）来看看究竟是什么花了这么长时间，以及你可以做些什么来加快速度。

如果您使用的是 JQuery，请不要忘记使用 Google 的托管版本！

【讨论】：

【解决方案15】：

htaccess

AddOutputFilterByType DEFLATE 文本/纯文本 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE 文本/xml AddOutputFilterByType DEFLATE 文本/css AddOutputFilterByType DEFLATE 应用程序/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE 应用程序/javascript AddOutputFilterByType DEFLATE 应用程序/x-javascript

php

if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
 ob_start("ob_gzhandler");
else
 ob_start();

2.

<IfModule mod_expires.c>

# open

ExpiresActive On



# file images

ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"



# CSS

ExpiresByType text/css "access 1 month"



# javascript

ExpiresByType text/x-javascript "access 1 month"




# icon page

ExpiresByType image/x-icon "access 1 year"



# other

ExpiresDefault "access 2 days"
</IfModule>

心理把戏:) 使用预加载器，用户喜欢发生一些事情:)

【讨论】：