如何停止加载不必要的文件并减少网站的 HTTP 请求 – WordPress 优化技巧

在 Crunchify 上，我们发布了多个速度优化教程供您随时参考。

我们使用 MaxCDN 作为我们的内容提供商。 它已经快 4 年了，到目前为止它工作得很好。 Genesis WordPress Framework 和 MaxCDN 是最佳组合。 默认情况下，Genesis Framework 带有大量优化、Google 标记模式、移动友好结构等等。

上周我在查看我的 MaxCDN 帐户时，突然发现了热门下载资源。 如上图所示，上周top 9 out of 10 resource files被下载了超过5 millions次。

我很惊讶，想我真的需要这些资源吗？ 我必须单独加载这些文件吗？ 除了style.css文件之外，如果不需要，如何摆脱这些文件，这是网站加载所必需的。

让我们开始了解我如何用简单的技巧摆脱所有这 9 个文件

第1步

让我们list all of those 9 files 。 第二列显示下载次数。

第2步

让我们将Crayon Syntax Highlighter插件文件组合在一起。

有3个文件：

neon.css 、 crayon.min.css和crayon.min.js 。 我已经编写了一个完整的单独教程，共有 7 个详细步骤来摆脱这些文件。 请检查一下，如果您发现任何问题，请告诉我。

第三步

现在wp-embed-min.js 。 请访问教程如何禁用 WordPress 4.4+ 的自动嵌入脚本。 它将停止在前端加载嵌入文件。

第四步

让我们3 more .png文件：

bg-pattern.png

我在页眉和页脚背景中加载此图像。 我改用颜色#333来摆脱它。

crunchify-sprite.png

我正在加载这个精灵图像以在侧边栏中显示社交关注按钮。 我用fontawesome字体替换了它。

h3.png

我正在加载这个以在某些位置显示 H3 帖子的复选标记。 我用fontawesome字体替换了它。 下面是一个很棒的等价物。

第 5 步

现在我们只剩下 2 个文件了。 crunchify-logo.png和bg.png ，我想保留它。 因此，我没有调用图像，而是为这些文件添加了等效的base64图像。

前：

后：

我已将两个图像都转换为 base64 图像。 我们将获得的优势是，不必打开另一个连接并向服务器发出 HTTP 请求以获取图像。

更少的请求 = 更好的页面加载时间

使用SVG (Scalable Vector Graphic) image有一些优势，因为图像可以缩放到任何大小而不会失去清晰度（除了非常小），这在视网膜显示器上看起来很棒。

这些Data URIs不仅限于.png或图像，还可以用于任何资源。 这是我在网上使用的一个简单的 .png 到 .svg 转换器工具。

概括

本教程是如何加速 WordPress 和提高性能部分的一部分。 您将在那里找到所有 WordPress 优化技巧和提示。

通过执行这些步骤，我从 10 个中删除了所有 9 个不需要的资源。这意味着 - 我的页面加载速度非常快，因为每个页面上的请求将减少 9 个

如果您有任何其他可以提高网站页面速度的提示，请告诉我。 在 Crunchify，速度是主要标准，这就是我们使用很少插件的原因。 所有页面within half a second加载。