
WordPress 优化
您想加速您的 WordPress 网站吗?想知道 WordPress 优化技巧可以帮助您减少网站加载时间吗?在本文中,我们将通过分享我们如何优化 List25 网站以提高性能来向您展示如何加速 WordPress。
您想加快您的 WordPress 网站速度吗?想了解可以帮助您减少网站加载时间的 WordPress 优化技巧吗?在本文中,我们将向您展示如何通过分享优化 List25 网站以获得更好性能的方法来加速 WordPress。
您可能听说过 WordPress 速度对于 SEO 很重要。速度更快的网站具有更好的用户参与度、更多的浏览量和更好的销量。在 oddloop 的案例研究中,他们发现一秒钟的延迟可能会导致销售额下降 7%、页面浏览量减少 11%、客户满意度下降 16%。
您可能听说过 WordPress 速度对于 SEO 很重要。更快的网站有更好的用户参与度、更多的浏览量和更好的销量。在一个奇怪的循环案例研究中,他们发现一秒钟的延迟可能会让您损失 7% 的销售额、减少 11% 的页面浏览量以及降低 16% 的客户满意度。

那么如何真正加速 WordPress 呢?
那么,如何真正加快 WordPress 速度呢?
好吧,我们不只是分享速度提示列表,而是决定进行完整的案例研究,向您展示 List25 网站的结果以及我们如何完成这一切。
好吧,我们决定分享一个完整的案例研究,而不是仅仅分享速度提示列表,以向您展示 List25 网站的结果以及我们如何完成这一切。
总览 (Overview)
列表25 is an entertainment blog started by our founder 赛义德巴尔基. The site has over 1.5 million subscribers, and the YouTube 频道 has over quarter 十亿 views.
列表25是由我们的创始人赛义德巴尔基创建的娱乐博客。 该网站拥有超过150万订阅者, YouTube 频道观看次数超过25 1亿 。
网站上的内容主要是图像和视频,占用了 TB 的带宽,因此整体速度优化对于我们降低成本、减少页面放弃和缩短网站停留时间至关重要。
网站上的内容主要是图像和视频,占用了 TB 的带宽,因此整体速度优化对于我们降低成本、减少页面放弃和提高网站时间至关重要。
Before we started the optimization, our homepage took 2.21 seconds to load according to Pingdom. After we were done, our page load time dropped to 1.21 seconds (约快 45%).
在开始优化之前,根据Pingdom的说法,我们的首页加载时间为2.21秒。 完成后,页面加载时间降至1.21秒(大约快 45%) 。
在此优化过程中,我们能够加快服务器响应时间,提高页面速度性能得分,减少总请求数,并改善整体加载时间。
在此优化过程中,我们能够加快服务器响应时间,提高页面速度性能分数,减少请求总数,并改善总体加载时间。
让我们看一下帮助我们加快 WordPress 网站速度的优化技术。
让我们看一下可以帮助我们加快 WordPress 网站速度的优化技术。
WordPress 托管 (WordPress 托管)
Having a good web host is crucial for your website speed. As our site became more popular, we simply outgrew our previous hosting company (主机鳄鱼).
拥有一个好的虚拟主机对于您的网站速度至关重要。 随着我们网站的流行,我们已经超过了以前的托管公司( 主机鳄鱼 )。
他们的服务器根本无法处理这种规模的网站,因为 List25 收到了数千万的综合浏览量。 HostGator 非常适合小型站点,但不适用于这种规模的站点。
他们的服务器根本无法处理这种规模的网站,因为 List25 收到了数千万的页面浏览量。 HostGator 非常适合较小的站点,但不适用于这种规模的站点。
We looked at various WordPress 托管 options, and eventually ended up using 站点地面 for hosting List25 because they offered the best overall value for this site.
我们研究了各种WordPress 托管选项,最终最终使用站点地面托管List25,因为它们为该网站提供了最佳的总体价值。
您可以立即看到我们的服务器响应时间的改善。我们将最大响应时间从 442 毫秒缩短到 172 毫秒。提升了 256%。
您可以看到我们的服务器响应时间立即得到改善。我们将响应时间从最长 442 毫秒缩短为 172 毫秒。提高了 256%。

场地 has built performance boosters for specific platforms like WordPress, Joomla, and Magento. Based on the platform of your site, they specially optimize your servers which results in a better overall performance.
场地为WordPress,Joomla和Magento等特定平台构建了性能提升器。 它们基于您站点的平台,特别优化了服务器,从而提高了整体性能。
We wrote an article about 当你应该切换你的虚拟主机时 which talks about the 7 key indicators.
我们写了一篇有关关于何时应该切换虚拟主机的文章 ,其中讨论了7个关键指标。
If you are looking to switch hosts, then definitely give SiteGround a try. WPBeginner users get an 托管 + 免费域名独家 60% 折扣.
如果您要切换主机,请一定尝试一下SiteGround。 WPBeginner用户可托管+免费域名获得60%的独家折扣 。
缓存插件 (Caching Plugin)
当谈到加速 WordPress 时,缓存是仅次于网络托管的第二重要因素。
在提高 WordPress 速度方面,缓存是仅次于网络托管的第二重要因素。
通常,当访问者访问您的 WordPress 站点时,您的服务器会将 PHP 请求传递到 MySQL 数据库,该数据库找到所请求的页面,即时生成该页面,并将其显示给访问者。这占用了大量的资源。当您使用缓存时,可以节省时间和资源。
通常,当访问者访问您的 WordPress 站点时,您的服务器会将 PHP 请求传递到 MySQL 数据库,该数据库会查找所请求的页面,动态生成页面并将其显示给访问者。这占用了大量的资源。缓存后,可以节省时间和资源。
下图突出显示了该过程。通俗地说,可以将缓存视为创建桌面快捷方式,以帮助您更快地访问文件。
下图突出显示了该过程。通俗地说,将缓存视为创建桌面快捷方式,以帮助您更快地访问文件。

对于 List25 网站,我们使用 SiteGround SuperCacher,这是他们专门为客户构建的插件。最重要的是,他们使用 Varnish(性能增强器的一部分)添加了高级动态缓存选项。
对于 List25 网站,我们使用 SiteGround SuperCacher,这是他们专门为客户构建的插件。最重要的是,他们使用 Varnish 添加了高级动态缓存选项,这是其性能增强器的一部分。
If you are not on Siteground, then don’t worry. You can setup cache on your WordPress site by using one of the many available solutions like W3 总缓存 or WP超级缓存.
如果您不在Siteground上,请不要担心。 您可以使用许多可用的解决方案之一(例如W3 总缓存或WP超级缓存)在WordPress网站上设置缓存。
在 WPBeginner,我们使用 W3 Total Cache,它提供了许多页面缓存选项、数据库缓存和对象缓存。
在 WPBeginner,我们使用 W3 Total Cache,它提供了许多页面缓存选项、数据库缓存和对象缓存。
As more hosting companies specialize for WordPress, we will see more custom caching solutions built. 佩吉利 and WP引擎 also offer their own built-in caching system.
随着越来越多的托管公司专注于WordPress,我们将看到更多内置的自定义缓存解决方案。 佩吉利和WP引擎还提供了自己的内置缓存系统。
CDN (CDN)
Content Delivery Networks (CDN) can help you boost your website speed. We have been using 最大CDN since the beginning of List25, so this part didn’t change.
内容交付网络(CDN)可以帮助您提高网站速度。 我们一直在使用最大CDN因为List25的开始,所以这部分并没有改变。
We have written a full article on 什么是CDN and why you need it along with a infographic.
我们已经写了一篇完整的文章, 内容 什么是 CDN以及为何需要它以及信息图。
CDN 允许我们通过内容交付网络提供所有 CSS、Javascript 和图像。这是通过确定网站访问者的位置并从距离访问者最近的服务器提供内容来实现的。
CDN 使我们能够通过内容交付网络提供所有 CSS、Javascript 和图像。其工作原理是确定站点访问者的位置并从距离访问者最近的服务器提供内容。
If you’re not in the market for a premium CDN solution, then you can use 云耀.
如果您不打算购买高级CDN解决方案,那么可以使用云耀 。
合并文件以减少HTTP请求 (Combining Files to Reduce HTTP Requests)
当您添加更多插件时,它们通常会添加自己的 JavaScript 和 CSS 文件。每个附加文件都是一个新的 HTTP 请求。
当您添加更多插件时,它们通常会添加自己的 JavaScript 和 CSS 文件。每个附加文件都是一个新的 HTTP 请求。
We combined these JavaScript and CSS files into a single file for each to reduce requests and speed up load time. You can see more details about this on WordPress 插件如何影响加载时间.
我们将这些JavaScript和CSS文件组合为一个文件,以减少请求并加快加载时间。 您可以查看有关WordPress 插件如何影响加载时间更多详细信息。
虽然我们现在正在加载一些在网站的特定部分可能不需要的小功能,但此代码已缓存在 CDN 上,结果表明,与加载几个较小的 JS 文件相比,更少的文件请求可提供更好的性能。
现在我们正在加载一些小功能,这些功能可能对于网站的特定区域来说并不需要,但是这段代码被缓存在CDN上,结果发现对该文件的请求比加载几个较小的JS文件要少,从而提供更好的性能。
这是您必须定期执行的操作,因为您使用的插件会随着时间的推移而变化。
这是您必须定期执行的操作,因为您使用的插件会随着时间的推移而改变。
图像精灵 (Image Sprites)
我们使用了一个图像精灵,将多个社交和网站图标组合成一个图像:
我们利用图像向导将多个社交和网站图标组合成一个图像:

每当我们需要显示特定图标时,我们都会使用 CSS 来:
每当我们需要显示特定图标时,我们都会使用 CSS 执行以下操作:
- Load the image as a background image 将图像加载为背景图像
- Define the width and height of the element we need the icon for 定义我们需要图标的元素的宽度和高度
- Set the background position for our image to load the necessary icon 设置图片的背景位置以加载必要的图标
例如,要加载侧边栏的社交媒体图标,我们使用:
例如,要加载侧边栏的社交媒体图标,我们使用:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }
The background-position
, width
and height
CSS properties helps us target the specific section of the image that we want to output:
background-position
, width
和height
CSS属性可帮助我们定位要输出的图像的特定部分:

因此,只有对该图像文件的第一个请求正在使用带宽。随后向 CDN 请求图像将导致加载缓存(通常是本地)版本,并且只需要请求单个图像而不是 6 个不同的社交图标。
因此,只有对该图像文件的第一个请求正在使用带宽。对 CDN 的后续图像请求将导致加载缓存(通常是本地)版本,并且只需要请求一张图像,而不是 6 个不同的社交图标。
通过将 JavaScript、CSS 和图像结合在一起,我们显着减少了请求数量。
通过结合 JavaScript、CSS 和图像,我们显着减少了请求数量。
代码压缩 (Code Minification)
代码缩小涉及删除空格和换行符以减小文件大小,从而在请求时更快地加载。
代码最小化涉及删除空格和换行符以减小文件大小,以便在请求时加载速度更快。
For List25, we use SCSS, a syntax-based stylesheet (Sass 简介). This allows us to structure our CSS files across several areas of development in an easy to read layout:
对于List25,我们使用SCSS(基于语法的样式表)( Sass 简介 )。 这使我们能够以易于阅读的布局在多个开发领域中构建CSS文件:

然后,我们使用 CodeKit 将 SCSS 文件编译为单个 CSS 文件。 CodeKit 还删除空格和换行符,以确保文件尽可能小:
然后,我们使用 CodeKit 将 SCSS 文件编译为单个 CSS 文件。 CodeKit 还删除空格和换行符以确保文件尽可能小:
结果,我们能够将 CSS 文件大小减少 28%。
结果,我们能够将 CSS 文件大小减少 28%。
图像优化 (Image Optimization)
我们在两个方面优化了图像:WordPress 主题和上传的内容。
我们在两个方面优化图像:WordPress 主题和上传的内容。
对于我们的 WordPress 主题,我们使用 CodeKit 来确保所有图像都经过无损压缩。这可确保文件大小尽可能小,且不会降低质量。
对于 WordPress 主题,我们使用 CodeKit 来确保所有图像都经过无损压缩。这可确保文件大小尽可能小而不损失质量。

We also educated all of our writers about the importance of saving images optimized for web. See our guide on 如何保存针对网络优化的图像.
我们还教育了所有作者关于保存针对Web优化的图像的重要性。 请参阅我们的指南, 了解如何保存针对网络优化的图像 。
无JavaScript的社交分享 (Javascript-free Social Sharing)
就像任何其他网站一样,List25 的社交共享非常重要。然而,社交共享插件可能会显着降低您网站的速度。
就像任何其他网站一样,社交分享在 List25 上非常重要。但是,社交共享插件可能会显着减慢您的网站速度。

虽然在我们的测试中集成这四个社交网络的脚本不会影响页面加载时间,但在移动设备上查看时,它明显减慢了网站的速度。尽管脚本是异步加载的,但社交共享按钮仍需要几秒钟的时间才会出现,从而导致帖子内容随着按钮加载到视图中而移动。
尽管在我们的测试中集成这四个社交网络的脚本不会影响页面加载时间,但在移动设备上查看时,它会显着减慢网站速度。即使脚本是异步加载的,社交共享按钮仍然需要几秒钟的时间才能显示,导致帖子内容随着按钮加载到视图中而移动。
为了解决这个问题,我们转向了(几乎)无 JavaScript 的解决方案。每个社交网络的共享按钮均由我们的自定义 WordPress 插件呈现,主题的 Javascript 仅用于在用户单击按钮时打开 Web 浏览器窗口。
为了解决这个问题,我们转向了一个(几乎)无 JavaScript 的解决方案。社交网络的每个共享按钮均由我们的自定义 WordPress 插件呈现,主题的 Javascript 仅用于在用户单击按钮时打开 Web 浏览器窗口。
然而,我们仍然希望显示帖子在所有社交网络上的分享总数。为此,我们制作了一个小型自定义 WordPress 插件,用于检索每个社交网络的社交分享计数并将其缓存到 Post 元表中。这些计数每 24 小时更新一次,确保耗时的查询不会持续运行。
但是,我们仍然希望显示该帖子在所有社交网络中的分享总数。为此,我们制作了一个小型自定义 WordPress 插件,用于检索每个社交网络的社交分享计数并将其缓存到 Post 元表中。这些计数每 24 小时更新一次,以确保耗时的查询不会永远运行。
You can either use an API like 沙雷 or dissect the 浮动社交栏 for customization.
您可以使用夏尔的类的API,也可以剖析浮动社交栏进行自定义。
使用 Pingdom 的 RUM(真实用户监控),这个新的共享插件将“真实”页面加载时间从 6 秒减少到 2 秒多一点。它还确保我们减少了对第三方脚本的请求数量。
使用 Pingdom 的 RUM(实时用户监控),这个新的共享插件将“实际”页面加载时间从 6 秒减少到 2 秒多一点。它还确保我们减少对第三方脚本的请求数量。
结果 (Result)
我们显着提高了网站速度。加载时间从 2.2 秒缩短至 1.22 秒。
我们显着提高了网站速度。加载时间从 2.2 秒增加到 1.22 秒。

我们能够显着减少服务器响应时间。
我们能够显着减少服务器响应时间。

这有助于减少 Google 机器人下载页面所花费的时间,从而提高我们的抓取速度。
这有助于减少 Google 机器人下载页面所需的时间,从而提高我们的抓取速度。

我们的整体跳出率下降了 7%,因为网站加载速度更快,而且通过切换主机,我们能够减少服务器错误。
我们的整体跳出率下降了 7%,因为网站加载速度更快,而且通过切换主机,我们能够减少服务器错误。

正如您可以想象的那样,跳出率降低后,网站停留时间也增加了 30 秒以上。
可以想象,当跳出率较低时,在网站上花费的时间也会增加 30 秒以上。
结论 (Conclusion)
正如您所看到的,加载速度更快的网站可以提高访问者的参与度。我们讨论的技术涵盖了一系列基本和中级改进,您可以实施这些改进来优化您的 WordPress 网站。
正如您所看到的,加载速度更快的网站可以提高访问者的参与度。我们讨论的技术涵盖了一系列基本和中级改进,您可以实施这些改进来优化您的 WordPress 网站。
We hope this article helped you speed up your WordPress site. You may also want to check out our article about 2015 年 20 个必备 WordPress 插件.
我们希望本文能帮助您加快WordPress网站的速度。 您可能还需要查看我们的文章,了解2015 年 20 个必备 WordPress 插件文章。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章,请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
WordPress 优化