小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

wordpress优化_加快WordPress:我们如何将List25性能优化256%

数据库,python,java,人工智能,大数据 额外说明

收录于:18天前

WordPress 优化

您想加速您的 WordPress 网站吗?想知道 WordPress 优化技巧可以帮助您减少网站加载时间吗?在本文中,我们将通过分享我们如何优化 List25 网站以提高性能来向您展示如何加速 WordPress。

您想加快您的 WordPress 网站速度吗?想了解可以帮助您减少网站加载时间的 WordPress 优化技巧吗?在本文中,我们将向您展示如何通过分享优化 List25 网站以获得更好性能的方法来加速 WordPress。

您可能听说过 WordPress 速度对于 SEO 很重要。速度更快的网站具有更好的用户参与度、更多的浏览量和更好的销量。在 oddloop 的案例研究中,他们发现一秒钟的延迟可能会导致销售额下降 7%、页面浏览量减少 11%、客户满意度下降 16%。

您可能听说过 WordPress 速度对于 SEO 很重要。更快的网站有更好的用户参与度、更多的浏览量和更好的销量。在一个奇怪的循环案例研究中,他们发现一秒钟的延迟可能会让您损失 7% 的销售额、减少 11% 的页面浏览量以及降低 16% 的客户满意度。

Strangeloop Speed Case Study

那么如何真正加速 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%。

List25 Server Response Time After Switching to SiteGround

场地 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 数据库,该数据库会查找所请求的页面,动态生成页面并将其显示给访问者。这占用了大量的资源。缓存后,可以节省时间和资源。

下图突出显示了该过程。通俗地说,可以将缓存视为创建桌面快捷方式,以帮助您更快地访问文件。

下图突出显示了该过程。通俗地说,将缓存视为创建桌面快捷方式,以帮助您更快地访问文件。

What is Page Cache?

对于 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以及为何需要它以及信息图。

What is a 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

我们使用了一个图像精灵,将多个社交和网站图标组合成一个图像:

我们利用图像向导将多个社交和网站图标组合成一个图像:

List25 Sprite

每当我们需要显示特定图标时,我们都会使用 CSS 来:

每当我们需要显示特定图标时,我们都会使用 CSS 执行以下操作:

  1. Load the image as a background image

    将图像加载为背景图像
  2. Define the width and height of the element we need the icon for

    定义我们需要图标的元素的宽度和高度
  3. 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-positionwidthheight CSS属性可帮助我们定位要输出的图像的特定部分:

List25 Sprite, Edited

因此,只有对该图像文件的第一个请求正在使用带宽。随后向 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文件:

List25 SCSS

然后,我们使用 CodeKit 将 SCSS 文件编译为单个 CSS 文件。 CodeKit 还删除空格和换行符,以确保文件尽可能小:

然后,我们使用 CodeKit 将 SCSS 文件编译为单个 CSS 文件。 CodeKit 还删除空格和换行符以确保文件尽可能小:

结果,我们能够将 CSS 文件大小减少 28%。

结果,我们能够将 CSS 文件大小减少 28%。

图像优化 Image Optimization

我们在两个方面优化了图像:WordPress 主题和上传的内容。

我们在两个方面优化图像:WordPress 主题和上传的内容。

对于我们的 WordPress 主题,我们使用 CodeKit 来确保所有图像都经过无损压缩。这可确保文件大小尽可能小,且不会降低质量。

对于 WordPress 主题,我们使用 CodeKit 来确保所有图像都经过无损压缩。这可确保文件大小尽可能小而不损失质量。

List25 Image Optimisation

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 上非常重要。但是,社交共享插件可能会显着减慢您的网站速度。

List25 Social Sharing Buttons

虽然在我们的测试中集成这四个社交网络的脚本不会影响页面加载时间,但在移动设备上查看时,它明显减慢了网站的速度。尽管脚本是异步加载的,但社交共享按钮仍需要几秒钟的时间才会出现,从而导致帖子内容随着按钮加载到视图中而移动。

尽管在我们的测试中集成这四个社交网络的脚本不会影响页面加载时间,但在移动设备上查看时,它会显着减慢网站速度。即使脚本是异步加载的,社交共享按钮仍然需要几秒钟的时间才能显示,导致帖子内容随着按钮加载到视图中而移动。

为了解决这个问题,我们转向了(几乎)无 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 秒。

6

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

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

List25 Server Response Time After Switching to SiteGround

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

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

Webmaster Tools time spent crawling page

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

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

List25 Bounce Rate

正如您可以想象的那样,跳出率降低后,网站停留时间也增加了 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上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/speeding-up-wordpress-how-we-optimized-list25-performance-by-256/

WordPress 优化

. . .

相关推荐

额外说明

Centos下java环境的自定义安装及环境变量配置

记录一下在centos7.x下面自定义安装java环境和环境变量的配置方式 首先确认系统是否已安装java的sdk java -version 如果存在,则不需要安装,若需要统一环境安装方式,可卸载后重装 自定义安装先从官网下载java的sdk(jdk-

额外说明

4. 顺序编程

语句和表达式的区别与联系 表达式 运算符和运算对象连接起来称为表达式; C语句 是指表达式加上“;”就构成了一个语句。 例如: a = 5 // 这是一个表达式 a = 5; // 这是一个语句 C语言库函数的理解 C提供的函数以库的形式放在系统中,他们

额外说明

《MongoDB入门教程》第26章:聚合统计的$max/$min表达式

本文将会介绍两个 MongoDB 表达式,返回一组数据中最大值的 $max 表达式,以及返回一组数据中最小值的 $min 表达式。 $max 表达式 $max 表达式用于返回一组数据中的最大值,语法如下: { $max: <expression> }

额外说明

JAVA集合概述02_List集合、并发修改异常、迭代器遍历、子类比较

文章目录 ①. List集合的概述 ②. 并发修改异常 ③. 列表迭代器ListIterator ④. 什么是ArrayList ⑤. List三个子类对比 ①. List集合的概述 ①. 元素都带有索引 ②. List集合类中元素有序、且可重复,集合中

额外说明

经典算法学习之---折半查找

​ 折半查找 -​一、什么是算法 ️1.算法概念: 算法的五大特征 有穷性(Finiteness) 确切性(Definiteness) 输入项(Input) 输出项(Output) 可行性(Effectiveness) 2.算法表达: 3.计算机算法:

额外说明

【数据库mysql】最强最简的MySql部署资源+操作方法

【背景】 部署MySql看似简单,但涉及环境的问题往往让人头痛。你还在为MySQL的繁杂安装犯愁吗?献上最强最简的MySql部署资源。 【优势】 下载这个精心准备好的MySQL5.6稳定版,无须安装,解压立即使用。 自带数据库管理工具,数据库编辑超方便。

额外说明

数据结构的奥秘:算法与实际应用的完美融合

文章目录 第一部分:数据结构的精髓 1. 数组(Array) 2. 链表(Linked List) 3. 栈(Stack)和队列(Queue) 4. 树(Tree) 5. 图(Graph) 第二部分:算法的精粹 1. 搜索算法 1.1 线性搜索 1.2

额外说明

[C语言]密码检查

  链接:密码检查_牛客题霸_牛客网 (nowcoder.com)   描述 小明同学最近开发了一个网站,在用户注册账户的时候,需要设置账户的密码,为了加强账户的安全性,小明对密码强度有一定要求: 1. 密码只能由大写字母,小写字母,数字构成; 2. 密

额外说明

RabbitMQ【部署 01】一篇学会RabbitMQ服务依赖的下载安装及简单使用(首次登录 User can only log in via localhost 问题处理)

1.简单介绍 来自官网的部分介绍: RabbitMQ is the most widely deployed open source message broker. RabbitMQ is lightweight and easy to deploy o

额外说明

win10安装ubuntu20.04

win10安装ubuntu20.04 1、准备工作 在这里,默认你已经安装了win10,并准备好一个空的大于4G的U盘(U盘数据会被清空) 1.1、下载ubuntu镜像,并刻入U盘 ubuntu-20.04 百度云:https://pan.baidu.c

ads via 小工具