网站加载速度最佳实践和改进技巧

对于今天的在线用户来说，他们想要他们想要的东西，而且他们现在就想要。 我们都遇到过在线资源网站加载速度太慢的情况，我们只是点击了。 多亏了社交媒体、电视和所有其他现代技术，今天的人类并不以其耐心和专注而著称。

速度是网站的无声杀手。 近一半的网站用户希望您的网站在 2 秒或更短的时间内加载。 这听起来可能很疯狂，但确实，即使是几秒钟的缓慢加载时间也会让用户不假思索地吓跑。 现实情况是，您需要正确快速地加载您的网站。

网站加载速度最佳实践

除非您亲自测试，否则您可能不会意识到您的网站实际上有多慢。 幸运的是，您可以在 Google PageSpeed 免费执行此操作。 它是一个基于 Web 的工具，用于确定您的加载时间和查找问题区域。 您的网站加载时间如何叠加？ 如果您需要一些工作，请不要担心。 只需单击几下，即可改善网站加载时间，这比您想象的要容易。 这里有一些额外的提示，可以帮助您入门。

使用 Gzip 压缩提高网站加载速度

Gzip 压缩是一个强大的工具，可以将响应大小减少约 70%，这令人印象深刻。 Gzip 是通过您的主机完成的，因此您需要询问您的网络主机他们是否在其服务器上使用此压缩。 使用 Gzip，您可以在不影响视频、图像或其他元素的质量的情况下缩短响应时间。

您可以运行测试以查看您的网站是否为 GZIPPED 并运行 Zip 压缩测试。 Gzipping 的工作原理是减少 HTTP 响应的大小。 它最终会改变页面的权重。

缓存您的文件

缓存是指您的网站版本存储在用户的浏览器中。 这样，当他们再次访问您的网站时，会加载一个较早的版本，直到新版本可以刷新。 缓存可以将您的加载时间从超过 2 秒减少到不到 1 秒。 这是一个很大的飞跃，你应该关心。 幸运的是，为您的网站设置缓存很容易。 如果您使用 WordPress，则可以使用免费的 W3 Total Cache 插件。 缓存是当今必不可少的，可以为您的网站加载性能增加额外的提升。

除了服务器端缓存，您还应该启用浏览器缓存。 这实质上是一种指示浏览器在浏览器上存储静态文件（例如图像、CSS 和 JS 文件）的副本的方法，以便访问者在再次访问您的网站时不必等待这些文件再次下载。 您可以在此有关 WordPress 利用浏览器缓存的信息集中阅读更多信息。

升级您的网站主机

为您的网站选择合适的主机可以影响您的页面性能。 您可以根据需要对网站进行任意数量的更改，但是如果您没有看到太大的改进，则可能是您的主机受到了指责。 当您第一次启动网站时，很容易选择最便宜的托管选项。 虽然这可能暂时没问题，但如果您托管大量文件或遇到更大的流量，则可能会超出此范围。

可能会共享更便宜的计划，这意味着您邻居网站上的任何问题也会影响您自己的。 拥有专用服务器可以避免在共享服务器上可能发生的任何问题。 如果您在响应时间方面需要帮助，您还将拥有更多客户服务选项。

购买主机

检查您的网站主题

您网站的设计方式也将影响您的网站对访问者的显示效果和速度。 切换主题可能就是在您的网站加载时间中腾出几秒钟的宝贵时间。

使用专业的网站页面构建器或主题将确保您的网站不会因不必要的、凌乱的代码而变得臃肿。 这就是为什么除了网站模板、主题或构建器的美感之外，还必须研究更多内容。 此外，请考虑登录您的网站或 Web 应用程序。 网站日志记录可以帮助您在问题发生之前发现问题，并且可以防止您的网站出现问题。 或者，您可以使用 Papertrail App 等工具直接发送日志消息。

减少您的 Java 和 CSS 文件

今天的大多数网站都使用大量的 Javascript 和 CSS 文件，这些文件可能会在您用户的浏览器中单独处理。 一次请求过多会降低您的网站加载速度。 如果您能够缩小所有这些文件，则不会增加网站加载时间的权重。

让您的 Java 和 CSS 文件从外部加载而不是让每个页面都变得拥挤是一个聪明的主意。 然后，用户只需在文件出现时加载它们，而不是每次有人访问您网站上的新页面时。 不要让过多的文件让用户的浏览器感到困惑。

通过网络承载您的负载

如果您遇到高流量，则需要认真对待您的网络。 内容交付网络 (CDN) 服务通过使用跨多个不同地理区域的服务器将文件直接提供给您的用户。 这意味着不同地点之间的时间更少，因此您的网站可以更快地加载。 最著名的 CDN 是 Amazon CloudFront，很容易将其与您当前的网站集成。

尝试外部托管平台

与 CDN 类似，您可以将文件托管在外部托管平台上，以避免减慢加载时间。 这是最常见的视频文件。 视频非常庞大，将它们直接上传到您的网站会占用大量空间。 它们很容易超过 100 MB，因此在您自己的服务器上托管视频或其他大文件并不是明智之举。

在外部托管这些文件是一个更好的主意。 YouTube 和 Vimeo 是视频文件的绝佳选择。 从那里，您可以将视频嵌入您的网站。 它可以节省空间并且不会减慢您的加载时间。 也轻松了很多！

尤其是使用 YouTube，可以让您的内容面向全新的观众。 事实上，YouTube 被认为是最大的搜索引擎之一，每月吸引超过 10 亿用户。 它可以免费使用，您可以上传长达 15 分钟的视频（如果您提交请求，则可以上传更多）。 你绝对不会出错。

检查您的 HTTP 请求

雅虎声称网站 80% 的加载时间来自下载页面的所有不同部分。 虽然我们已经讨论了 Java 和 CSS 文件的最佳实践，但其他方面呢？ 需要加载的页面元素越多，页面完全显示所需的时间就越长。

您可以通过浏览器查看这些请求中有多少正在发生。 谷歌浏览器配备了专注于 HTTP 请求的开发者工具。 要访问这些工具，请在 Google Chrome 中右键单击您的页面，单击“检查”，然后导航到“网络”选项卡。

现在，您可以在“时间”部分看到每个文件加载所需的时间。 在角落里，您还会看到请求总数。 减少花费最多时间的请求是加快网站加载时间的一种简单方法。 继续阅读以了解在下一个技巧中合并文件的最佳方式。

合并和缩小 HTML 文件

缩小文件时，可以消除任何不必要的空格或代码。 所有这些小事情可能看起来并不重要，但这会增加您的加载时间。 目标是拥有尽可能精简的 HTML 文件。

查看您的网站，看看是否有您不再使用的任何不必要的页面。 有什么地方可以消除空白或不必要的代码吗？ 最后，合并 HTML 文件以确保您不会耽误网站加载时间。

使用外部 CSS

CSS 是您为页面包含样式和设计元素的方式。 您的网站可以访问在您的页​​面之前加载的外部文件或访问内联样式。 在 HTML 文档中包含 CSS 本身会增加很多代码。 正如我们之前所说，这不好。

相反，您应该使用加载在 HTML 头部的外部 CSS。 如果可以避免，请不要在 HTML 中放入任何 CSS。 这尤其意味着 div 或标题。 如果您使用外部样式表，它会更简洁、更精简。 编辑也容易得多。

如果您不确定 CSS 的状态，请使用 CSS 交付工具来查看您的 CSS 文件如何堆叠。 这会让您知道外部文件的位置以及 HTML 中是否有任何内联元素。 如果可能，只使用一个外部 CSS 文件。 如果您有多个文件，您可能可以合并文件。

推迟 Javascript 加载

当您延迟一个文件（如 JavaScript）时，您要确保在加载其他 Java 元素之前正确加载网站的其余部分。 有时推迟 Java 就像使用插件一样简单。 其他时候，您需要手动添加一个 HTML 脚本，让网站知道您想最后加载 Java。

此脚本调用外部 JavaScript 文件。 这里有一个完整的教程来推迟你的 Java。 虽然差别不大，但这可以使您的 pape 看起来加载速度更快。

回顾你的第一个字节的时间

您的第一个字节时间 (TTFB) 是浏览器在开始加载其第一个字节数据之前等待的时间。 根据谷歌的说法，你的 TTFB 应该在 200 毫秒以下。 但是，这是服务器端的问题，因此很容易被更多的 Web 开发人员忽略。

当用户访问您的网站时，它不会自动开始加载。 尽管它看起来像是一个即时过程，但首先要进行 3 个步骤。 您的浏览器向托管网站的服务器发送初始 HTTP 请求，然后执行 DNS 查找、服务器处理和响应等步骤。

再一次，您的 Chrome 开发人员工具将在您的网页上显示此过程需要多长时间。 这也将在很大程度上取决于互联网连接的强度。 较慢的连接具有较慢的 TTFB。 检查您的 TTFB 以确保它低于 200 毫秒。 如果不是，则是时候与您的房东讨论正确的解决方案了。 您可能没有足够的空间，或者您可能遇到过多的流量。

首屏内容优先

有时您的页面很长，需要一段时间才能加载。 这是一个现实。 但是，确保首先加载首屏信息可以为您节省一些访问者。 通过确保页面顶部的所有内容快速显示来改善您的用户体验。

这是一个叫做“延迟加载”的过程，这个名字是有道理的。 这就像在页面上缓慢加载，但它从用户最关注的顶部开始。 通过延迟加载，您的用户可以看到最热门的内容并提高网站加载速度，而无需等待页面的其余部分加载。 这是一个好主意，因为想象一下整个页面有 10 多张照片。 您不希望您的访问者等到所有这些图像加载后才开始阅读。

延迟加载使用 jQuery.sonar 只加载可见的图像。 有许多插件可以轻松地向页面添加延迟加载，但这里有一个完整的手动操作教程。 您的用户会很高兴他们不再需要等待首屏内容。

检查您的图像尺寸

无需检查文件大小即可轻松上传图像。 偶尔这可能没问题，但如果您不小心，它很容易减慢您的网站速度。 保存图像时，请尝试使用“保存为网络”选项来保存它们。 这可用于 Photoshop 或 Fireworks 等工具。 使用“Save for web”，可以在不损失图像清晰度的情况下缩小图像尺寸。

通常，应避免较大的文件大小。 PNG 保存图片时。 您可以检查图像属性以查看它们是否接近更大尺寸。 最后，如果您的网站上已有大图片，请使用插件或手动压缩这些文件以提高网站加载速度。

删除不必要的额外内容以提高网站加载速度

有时我们会向我们的网站添加新内容并忘记它们。 我们要么转向别的东西，要么不再需要过去的解决方案。 不管是什么原因，请确保您经常查看您的网站，以确保不会在不使用的任何内容上浪费空间。 这适用于以下所有情况：

• 图片;
• 插件；
• 导航元素；
• 设计元素；
• 页数；
• 存档的博客文章。

无论多小，这些都会对您的网站加载速度产生负面影响。 此外，它们可能会在您的网站安全中创建薄弱环节，尤其是使用插件时。 这些很容易损坏，这会降低您的安全性。 养成定期查看您的网站是否有过时的额外内容的习惯。

限制您的社交分享按钮

社交分享按钮是鼓励参与社交媒体的好方法。 但是，需要有一个限制。 这些按钮有时非常有效。 然而，它们也可能是一个泡沫。 我们可以同意的是，这些社交分享按钮使用了几个外部 JavaScript，它们会降低您的网站速度。

尤其是 Facebook，是造成这种情况的罪魁祸首。 Facebook 脚本可以通过共享按钮降低网站性能。 考虑一下这些共享按钮是否真的值得麻烦。 您仍然可以保留它们，但只能保留那些被证明是表现最佳的。

异步交付

说到第三方代码，有很多可能会出错。 如果第三方遇到中断或突然变慢，您的页面很容易在尝试加载该资源时卡住，无论是社交分享按钮还是网络分析脚本。

异步交付是解决这种放缓的方法。 启用此功能后，如果您的第三方网络出现中断，您自己的网站将不会受到影响。 您可以通过多种方式启用异步交付，此处概述了所有这些方式。

安装 Google PageSpeed

Google PageSpeed 是一个开源服务器模块，可优化您的网站加载速度。 它由 Google 设计，旨在让您的网站速度更快，而且易于使用。 基本上，它会对您的服务器和网站文件进行不同的修改。 您不必手动执行任何操作，您的网站会表现得更好。

当涉及到您的网站性能时，它与您会发现的一刀切解决方案非常接近。 您可以自己将 Google PageSpeed 安装到您的文件管理器，也可以请您的主机或开发人员协助您进行安装。 您可以设置它并忘记它。

组合背景图像

许多主题使用多个背景图像来创建一个完整的图像。 虽然这可能看起来很棒并且同时发生，但它可能会降低您的网站性能。 因为您的用户的浏览器需要发出几个不同的请求来加载背景照片，这会在加载过程中增加时间。

相反，将您的图像合并为一个以提高您的网站加载速度。 这样，您的用户只需要发出一个请求而不是多个请求。 您的网站将更快，因为不再有多个往返请求后台正确加载。

停止盗链图片

盗链是将来自其他网站的照片嵌入到您自己的网站而不将其上传到您的服务器的做法。 这很简单，只需少量代码，但这是一种不好的做法，可能导致网站速度减慢等。

盗链不仅会损害您的网站，而且如果您在未经许可的情况下这样做，在技术上也是一种窃取。 网站所有者为托管这些文件的空间付费，而当您通过嵌入代码将同一文件放在自己的网站上时，您就是在未经许可获取他们的资源。

虽然有些网站允许您直接上传图像以进行共享，但这仍然不是一个好主意。 当这些网站运行缓慢或遇到高流量时，如果您嵌入它们，它们可能会降低您的网站加载速度。 另外，除非您为空间付费，否则这些文件可以随时删除而不会发出警告。

是的，盗链可能会为您节省一些带宽，但从长远来看，它更有可能减慢您的网站速度。 始终将您的图像托管在您自己的服务器上，而不是盗链。 如有疑问，最好在您自己的服务器上购买更多空间，以便您有能力上传它们。 无论如何，您应该使用小图像文件，所以这应该不是问题。

立即提高您的网站加载速度

您准备好将您的网站提升到新的高度了吗？ 是时候提高您的网站加载速度了。 如果您的网站加载速度较慢，很容易在无意中失去访问者。 想想当网站加载时间过长时，您发现它是多么令人沮丧。 网站加载时间延迟一秒将导致转化次数减少 7%，页面浏览量减少 11%。 不要通过认真对待上述这些提示来对您的用户这样做。

加速您的网站并不复杂、昂贵或令人困惑。 这是改进 SEO 并对用户产生积极影响的最简单、最快捷的方法之一。 如果您希望您的网站运行得更好并给您的用户留下深刻印象，那么投资于上述提示是值得的。

从避免热链接和断开的链接到升级您的网络托管，即使是上述小步骤也会产生很大的影响。 如果您不知所措，请先测试您的网站加载速度。 从那里，您将很好地了解需要做多少改进才能确保您的网站以最高性能水平运行。 您的网站可能只需要进行一些调整即可符合 Google 的标准。 您的用户已经厌倦了等待，因此是时候开始工作了。

ibrandify 创建的网站加载速度矢量