Kinsta-博客中文翻译-十四-

Kinsta 博客中文翻译（十四）

原文：Kinsta Blog

协议：CC BY-NC-SA 4.0

不走风投路线的 8 大好处

原文:# t0]https://kinta . com/blog/VC-route/

你们中的许多人可能不知道这一点，但金斯塔自豪地称自己为一个自举公司。这意味着我们从未从风险资本家或外部投资者那里获得外部资金，不像我们的一些竞争对手。我们欣赏风投所能提供的东西，毫无疑问，没有他们的帮助，今天许多世界级的解决方案和初创公司就不会存在。但是走这条路也有利弊。因此，今天我们想深入探讨不做风险投资公司的八个好处，以及你如何仍然可以创建一个成功和盈利的企业。怎么会？通过专注于为你的客户提供真正的价值和建立一个精益创业团队。

1. 自举没有那么高的风险
2. 你可以更轻松地说不
3. 顾客的忠诚度和优先权
4. 自举迫使快速非传统思维
5. 单专注于赚钱
6. 保留更多控制权
7. 新员工得到适当的评估
8. 活下来就变强

1.自举没有那么高的风险

自举风险不大。当然，这可以从两个方面来论证。但是我们都同意，创业和风险投资的世界是无情的，残酷的，竞争激烈的。成功的企业并不多，所以选择是否接受风险投资是每个老板都应该仔细考虑的事情。你们中的一些人可能熟悉 HBO 的《硅谷》，虽然这是一部喜剧，但尼尔·帕特尔整理了一篇关于数字营销人员可以从中学习的 10 课的精彩文章。他们触及的很多东西都有些夸张，但还是可以从这个节目中汲取一些智慧。

Silicon Valley (Img src: Nerd Reactor)

简而言之，如果你选择让投资者参与进来，这可能会放大风险，因为他们期望在某个时间表内看到高回报。无论是退出、首次公开募股还是收购。您需要能够快速扩展，并在需要时进行调整。我们并不是说风险资本家的所有投资都是不好的，但是接受外部资金会带来很多压力和问题。风投给你钱是为了让你看到他们的投资有更好的回报，这通常是推动他们的首要因素。他们可能关心你的产品，也可能不关心。他们需要的是产品成功。这里有一些你应该知道的数据:

• 有人估计，几乎 90%的创业公司都会失败。没错，只有 1/10 的公司能做到。
• Ghosh 估计，70%到 75%的风险投资支持的初创公司不会返还投资者投入的资金，其中超过一半的公司不会返还任何资金。
• 根据 CB Insights 的一项研究，只有 22%的公司实现了出售或首次公开募股，1%的公司价值达到 10 亿美元。

许多你可能从未听说过的公司，如 Sprig ，成功地筹集了资金，但无法恰当地扩展他们的商业模式，最终倒闭。或者像 Jawbone 这样受欢迎的公司，Jawbone 是可穿戴设备的先驱，但在获得 10 亿美元风险投资基金后，现在无力支付供应商。具有讽刺意味的是，就在我写这篇博文的时候，我们收到了一封关于 ShareThis 的 Filament 产品停产的邮件(如下所示)。你们中的许多人可能都收到过类似的电子邮件，内容是关于某一天还好好的公司和产品，而第二天它们就消失了。请记住，仅仅因为一家公司获得了资金，并不总是意味着他们会成功或生存下去。

Filament discontinued

另一方面，自举可能是风险更大的举措，因为你把整个公司都押在能够自我融资的同时扩大规模上。在大多数情况下，接受风险投资意味着你将风险分散到多个风险投资公司，如果企业失败，你没有责任。2016 年将 WP Curve 出售给 GoDaddy 的成功企业家丹·诺里斯(Dan Norris)也提出了一个很棒的反驳，他在其中表示:

对于一些业务和一些情况，你需要外部资金。事实上，有人想把钱投入你的企业，并拥有一部分，这是一个好迹象。这意味着你正在创造有价值的东西。也许你有一个超过 5 分钟的未来愿景，并且你已经能够把这个愿景卖给其他人。这不是一件坏事。

但是请记住，不管你怎么看，当你拿钱的时候，在另一端总会有一个立即的期望，时钟开始滴答作响。你必须快速扩展，否则就会失败。在自举的时候，按照你自己的步调进行扩展是有道理的，因为风险是由你一个人承担的。

Wondering if you should go the VC route? Read this... 👀Click to Tweet

2.你可以更容易地说不

我们都知道，任何业务都有好客户和坏客户。你们可能都曾被来自地狱网站的客户开怀大笑过。虽然这是一个拙劣的模仿，但它比许多人认为的更接近现实。总有那么一个客户会占用你 90%的时间，而你却永远听不到其他人的消息。在这些情况下，对你的企业来说，简单地说“不”是明智的。在某些情况下，说“不”是明智的。当你启动时，你可以更容易地选择你的客户，只要有意义就说不来帮助你的团队和任务前进。

说不并不总是糟糕的客户服务。—彼得·豪斯(src: 说不的艺术

Bootstrapping companies can say no

当然，当你在引导时，时间管理和授权更重要。你必须确保你的支持团队不会把所有的时间都花在一两个客户身上，而是提供全面的高质量支持。如果你得到了风险投资的资助，很多时候你不会简单地放弃潜在客户或对他们说不，因为他们可能会对公司产生影响，这一切都是为了增加用户群。

这里有一些很好的建议，教你如何在不激怒客户的情况下拒绝他们。

3.忠诚和优先考虑的是顾客

创办一家公司时，你所有的收入都来自你的客户，因此他们立即成为你的第一要务，而不是投资者。这是客户和公司的双赢。在 Kinsta，我们总是努力为客户多做一点，虽然有些事情我们不支持，例如开发工作，但我们总是会尽力提供帮助。这些年来，我们的增长很大一部分来自口碑和客户推荐。我们热爱我们的客户，与他们建立了良好的关系，没有他们我们就不会在这里！

2018 年，Kinsta 的三个主要竞争对手大幅提高了价格，而我们的价格保持不变。由于我们没有风投告诉我们在后台做什么，我们可以花时间并适当地扩展，保持质量和支持完好无损。

4.自举迫使快速的非传统思维

没有资金来解决问题迫使你想出有成本效益的、创造性的方法来解决问题。你必须跳出框框思考。创业公司并不总是每个月有 15000 美元的预算用于在 Google AdWords 上的花费。这迫使你为常见问题寻找不那么传统的答案。随着时间的推移，这将使你成为一个更好的问题解决者，并始终关注你的每次收购成本(CPA)和客户的平均终身价值。

Think outside the box or fail

PPC 如果做得不好会榨干你的钱，与其这样，也许你可以花时间在内容营销或社交媒体上来推广你的产品或服务。或者使用更便宜的点击付费形式，如脸书和 Quora 广告。启动加盟计划是利用你现有客户群的另一个好方法，从本质上帮助你推销你的公司。这里有一篇关于 21 种营销理念的好文章，适合预算不多的人。2017 年，营销人员使用了无数种方法来宣传他们的品牌。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

自举需要你有创新精神。大多数发明来自需求，特别是个人的需求。这就是事情变得有趣的地方。当你所有的积蓄和抵押贷款都岌岌可危时，这种动力和压力会迫使你要么创新，要么失败。没有其他选择。

本质上，你必须很快。产品开发、营销、实现客户的功能要求等。必须迅速变得高效。在我们看来，这是一个好处，因为你的团队必须站稳脚跟，并不断找出新的方法来接触客户。最终，你的团队会因此变得更加强大和聪明。

你更愿意拥有一个向 AdWords 投入 1.5 万英镑的团队，还是一个可以通过使用更具成本效益和更广泛的收购渠道带来相同数量客户的团队？

5.单一专注于赚钱

创办公司时，首要且唯一的关注点是赚钱，而不是花钱。许多风投资助的公司都是围绕尽可能快地扩大用户群或安装数量而建立或构建的。即使他们不是付费客户，因为他们只是想被收购或快速退出。用户肯定是有价值的，但是如果你的计划失败了，这些用户可能一夜之间变得一文不值。

Number of installs (Img src: Cyfe)

拥有成千上万用户的热门 Reddit 替代品 Imzy 最近宣布，他们正在关闭。该公司的联合创始人丹·麦科马斯说:

你们中的一些人自从我们进入测试版以来就一直在这里，一些人是全新的。我们很高兴认识你们所有人，看到你们建立社区，结交新朋友。不幸的是，我们没能在市场上找到自己的位置。我们仍然认为互联网值得更好的发展，并希望我们在未来看到更多的团队接受这一挑战。

如果你从一开始就以赚钱为重点来构建你的公司，这可能是一条更安全的路线。专注于简单地扩大用户群有时会让你忽略真正重要的问题，比如你的业务需要赚钱。随之而来的是对资金管理、会计以及你的开销的更好理解。自举的时候，一分钱一分货就像他们说的。这是不总是一件坏事。

When starting your business, every penny counts. 💰 And this isn't always a bad thing.Click to Tweet

6.保留更多控制权

不做风险投资公司的一个最明显的好处当然是你保留更多的控制权。有可能你开始创业的原因之一就是拥有一些自主权。如果你有一个很棒的想法，并且能够执行，为什么要放弃一部分给那些可能没有你那么热爱你的产品/服务的外部投资者呢？你越早出售股权，你付出的代价就越大，因为你会突然失去未来的杠杆，以及稀释。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

可悲的是，一个很好的例子是莱恩贝克尔，得到满足的共同创始人。他们最终被贱卖了，5000 万美元的估价让他一分钱也没拿到。他指出，造成这种情况的主要原因是他们失去了对风险资本家的业务控制，以及过早地筹集资金。

我很欣赏你的观点，但不要祝贺我收购了 GS。创始人被排除在交易之外。我们一无所获。

—莱恩·贝克尔(@ monstro)2015 年 4 月 8 日

2022 年要考虑的 10 个最佳视频托管解决方案(免费与付费)

原文：https://kinsta.com/blog/video-hosting/

根据行业预测，作为 2019 年最大的营销趋势之一，到 2021 年，视频将占所有互联网流量的 82%。但你的服务器的问题是，视频内容比基于文本的内容要重得多，给你的网站服务器带来了沉重的负担。

这就是为什么视频托管网站或服务是现代内容营销策略的一部分。您需要能够上传高质量的视频并与您的观众分享，而不会出现服务器延迟或您的网站宕机。

在这篇文章中，我们将涵盖十个最佳的企业视频托管网站，并帮助您找到适合您需求的解决方案。

在看每一个之前，让我们先看看房间里的大象…

我自己托管视频好还是用视频托管网站好？

即使您有专用的服务器或虚拟机，即使流量很小，视频也会给服务器带来很大的负载。

一个普通的包含图片的网页通常应该小于几兆字节，而一个 720p 的视频通常超过 100 兆字节。

因此，仅仅十个观看一分钟高清视频的访问者就需要 1g 的服务器带宽。在同样的带宽下，一个基于文本和图像的页面可以吸引 1000 或更多的访问者。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

由于虚拟主机计划通常会限制带宽，仅仅一个视频就足以在几天内超出你的限制。这就是为什么通常使用第三方视频平台会更好。

2022 年 10 大最佳视频托管平台

免费视频托管选项

你们中的许多人可能正在寻找以下问题的答案:

哪里可以免费存放我的视频？

下面，我们将深入探讨 YouTube 和其他免费视频托管服务的利弊。

1.油管（国外视频网站）

YouTube homepage

迄今为止，YouTube 是互联网上最大的视频分享网站。随着每月有 19 亿登录用户活跃在该网站上，任何东西都望尘莫及。

但这并不意味着它是在线托管视频的最佳选择。

对于一个内容创作者来说，通过 YouTube 推荐和搜索来挖掘大量固有观众的能力很难出错(这里有如何创建一个 YouTube 频道以及如何提高你的 YouTube SEO )。

对数据存储或带宽没有限制，你可以上传高达 128 千兆字节的单个视频。你也可以从你的视频产生的广告收入中赚取一定的百分比。

但如果你是一家企业，情况就不同了，一个疲惫的、打着标签的 iframe 播放器是你将视频嵌入网站的唯一选择。

YouTube 视频可能是你的内容营销战略的重要组成部分，但它不是 T2 举办课程视频或 T4 推介会的最佳选择。

让我们深入探讨他们的视频指南和其他利弊的细节。

YouTube 的视频上传指南和规范

• 最小尺寸: 240p (426 x 240)。
• 最大尺寸: 4K (3840 x 2160)。
• 宽高比 : 16:9(自动为 4:3 视频添加黑框)。
• 最大文件大小 : 128 GB。
• 最大视频长度 : 12 小时。
• 文件总存储量:无限制。
• 接受的视频格式:。MOV，MPEG4，MP4，。AVI。WMV。MPEGPS，。FLV、3GPP 和 WebM。

赞成的意见

• 为您的视频文件提供无限制的免费云存储空间
• 通过 YouTube 搜索、推荐和订阅，拥有 19 亿用户的行业领先的受众培养机会。
• 私人和未列出的选项从公众中删除视频。
• 可以使用自定义生成的 iframe 代码轻松嵌入视频。

YouTube 最大的优势在于，它是最能在网上吸引观众的地方，拥有超过 100，000，000 名订户。

Most popular YouTube channels, ranked by num. of subscribers (Image source: Statista.com)

无限的云存储和上传单个 128GB 视频文件长达 12 小时的能力是其他巨大的好处。所有这些，都是免费的。

骗局

• 基本嵌入选项。
• 广告会自动播放，甚至是你网站上嵌入的商业内容。
• 推荐视频出现在每个视频的末尾(过去你可以添加？rel=0，以防止这种情况发生，但事情发生了变化，它不再工作)。
• 没有第三方服务就没有下载选项。
• 遵循合理使用规则时可能会出现版权问题。

当谈到使用 YouTube 作为视频托管平台时，对于希望托管专业视频以实现嵌入目的的企业来说，最明显的不利因素是广告。

Example of YouTube ad

过去，你可以完全禁用广告，但现在唯一的选择是仅关闭单个视频上的广告。如果你已经发布了大量的视频，这可能需要很多时间。

如果这对一些企业来说不是一个障碍，那么在最后展示竞争对手的视频作为推荐的可能性仍然存在。

适用于:

• 希望在社交平台上建立受众的内容创作者。
• 希望利用视频为网站带来更多流量并通过视频接触新受众的企业。

虽然我们选择了像 Wistia 这样的付费解决方案，但我们也在我们的 YouTube 频道上发布了一些视频，以吸引大量观众。一定要在那里订阅！
T3】

2.日常运动

Dailymotion

Dailymotion 可能是这份名单中最明显的 YouTube 竞争对手，因为它的目标是成为另一个视频分享平台。它声称拥有超过 3 亿独立用户，其中最大的 Dailymotion 用户 T 系列拥有近 9 万名粉丝:

Dailymotion top users

客观地看，T 系列频道在 YouTube 上有超过 1.2 亿的订户。

Dailymotion 的视频上传指南和规范

• 最小尺寸: 240p (426 x 240)。
• 最大尺寸: 4K (3840 x 2160)。
• 宽高比 : 16:9(自动为 4:3 视频添加黑框)。
• 最大文件大小 : 2 GB。
• 最大视频长度 : 1 小时。
• 文件总存储量:无限制。
• 接受的视频格式:。MOV，MPEG4，MP4，。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 免费无限视频托管。
• 选项，使视频私人，甚至密码保护。
• 在竞争较少的情况下获得一些受众发展的机会。

与 YouTube 相比，使用 Dailymotion 托管视频的潜在优势相当小。

竞争更少，所以你可能更容易从零开始建立一个观众群，但增长的潜力要低得多。

骗局

• 观众总数比 YouTube 少。
• 较小的最大文件大小。
• 没有第三方服务，无法下载您的视频。
• 广告会在视频播放之前、期间和之后自动播放。

与 YouTube 一样，Dailymotion 通过广告支持自己。一个关键的区别是，他们不管用户的追随规模大小，都会播放广告。

Example of Dailymotion ads

除非您有一个合作伙伴帐户，否则您将无法编辑这些设置。它也有较低的上传限制和在网站上嵌入视频的类似问题。

适用于:

• 寻找二级分销渠道的内容创作者。

3.Vimeo

Vimeo

与社交视频分享平台 Dailymotion 和 YouTube 不同， Vimeo 是一款面向专业人士的视频托管/协作套件。

虽然 Vimeo 确实有一个观看视频的部分，由人类而不是算法管理，但它有一个特定的受众。Vimeo 是创意专业人士的首选平台，因此只有某些类型的视频表现良好:

• 原创短片。
• 原创动画。
• 独立音乐视频。
• 极限户外运动/自然视频。

如果你的视频不属于这些类别，你可能很难在 Vimeo 上吸引观众。

视频上传指南和规范

• 最小尺寸: 240p (426 x 240)。
• 最大尺寸: 8K (8192 × 4320。
• 宽高比: 16:9(自动为 4:3 视频添加黑框)。
• 最大文件大小:免费用户 500 MB(专业用户最高 256 GB)。
• 最大视频长度:受文件大小限制。
• 文件总存储量:免费用户每周 500 MB(专业用户每周 20 GB)。
• 可接受的视频格式:。MOV，MPEG4，MP4，。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 没有广告。
• 谨慎，可定制的视频嵌入。
• 使用 Vimeo Create 创建专业的社交媒体视频。
• 在平台上宣传你的创意服务。
• 可以启用视频下载。
• Pro 计划起价仅为每月 7 美元。

Vimeo 是为专业使用而设计的。没有广告和可定制的视频嵌入使它成为网站所有者在他们的登陆页面上添加视频的完美选择。

嵌入式视频播放器时尚、快速，不包含广告或强制推荐。您可以选取响应或固定大小，并切换自动播放或循环播放。

Embed options in Vimeo

付费用户甚至可以进一步定制他们的嵌入设置:

Customize embed

Vimeo 是想在网站上嵌入专业视频的网站管理员的最佳免费选择。

骗局

• 免费帐户的低上传限制。
• 受众狭窄。

Vimeo 的主要缺点是其免费账户的上传限制较低，受众相对较窄。

除非你是一个制作电影杰作的创意者，否则你将很难在他们的平台上获得追随者。

适用于:

• 希望与积极参与的观众分享他们的作品并推销他们的服务的创意专业人士。

4.脸谱网

Facebook Watch

脸书是唯一一个在观众数量上可以和 YouTube 相提并论的平台。事实上，在24.5 亿月活跃用户，它拥有更大的受众。

但脸书首先是一个社交媒体和信息平台，而不是视频分享平台。

视频上传指南和规范

• 推荐尺寸: 720p (1280×720) px 至 1080p (1920×1080 px)。
• 支持的长宽比:横向(16:9)、纵向(9:16)、纵向(2:3、4:5)、方形(1:1)。
• 最大文件大小: 4 GB。
• 最大视频时长: 2 小时。
• 文件总存储量:无限制。
• 可接受的视频格式:。MOV，MPEG4，MP4，。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 无限制免费视频托管。
• 直接在脸书上分享视频。
• 在最大的社交媒体平台上建立受众。

将视频添加到时间轴和 Facebook Watch 使脸书成为互联网上领先的视频分销商之一。

每周有数十亿的视频被观看，成功的创作者直接在脸书上分享他们的视频。

2019 年，规模较小的脸书视频创作者似乎有更好的机会让视频传播开来，并从零开始培养观众。

骗局

• 广告会自动在所有视频上播放。
• 非常基本的品牌嵌入式播放器选项。
• 视频质量上限低于其他选项。

脸书的嵌入式播放器选项很少。它只在静态下可用，没有自动播放或循环。

Facebook Video Player Configurator

它的视频质量也比同类产品差，可以在视频播放之前、之中和之后自动播放广告。

适用于:

• 希望从零开始建立受众的内容创作者。
• 寻求建立品牌认知度并为相似广告创造种子受众的营销人员。

优质视频托管

下面，我们涵盖了最佳的商业视频托管选项。从简单、无品牌、高质量的视频托管平台，到面向企业的数据优先营销解决方案。

5.视频托管:Jetpack

Jetpack Video Hosting

即使你有一个安装了 Jetpack 插件的 WordPress 网站，你可能不知道它提供了视频托管作为其高级和专业计划的一部分。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

无限视频托管包含在高级 Jetpack 计划中，价格为$ 19.95/月(存储软限制为 2TB)。

视频上传指南和规范

• 最大文件大小: 2 GB(建议 1 GB 或更低)。
• 最大视频长度:受大小限制。
• 文件总存储量:无限制。
• 可接受的视频格式:。MOV，MPEG4，MP4，。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 无品牌，可定制的嵌入式视频播放器。
• 无限制的视频托管。
• 你的 WordPress 仪表盘中的视频统计。

你可以使用 Jetpack video blocks 将视频无缝嵌入到你的 WordPress 帖子和页面中。

它提供了自动播放、静音和循环播放等高级选项。你甚至可以隐藏所有的播放控制。

Embedding options in Jetpack

骗局

• 缺少其他高级视频托管服务的高级功能。
• 没有固定的观众可以利用。

Jetpack 的缺点是它缺乏其他高级选项的高级功能。分析是相对基本的，你不能包括 CTA、收集线索或编辑视频。

与 YouTube 或脸书不同，它不是一个免费的选项，也不提供内置的观众来抵消负面影响。

适用于:

• 已经订阅了 premium Jetpack 的 WordPress 网站所有者。

6.威斯特亚

Wistia

与其说 Wistia 是一个视频托管网站，不如说它是一个 T2 的数字营销解决方案。当然，你可以用它来上传你的视频并嵌入到你的网站上，但这不是他们的主要卖点。

Wistia 提供高级功能，如在视频播放器中嵌入线索捕获表单或其他 CTA。

视频上传指南和规范

• 最高分辨率: 4K (3840×2160 px)。
• 支持的长宽比:任何，有反应的玩家。
• 最大文件大小: 8 GB。
• 最大视频时长: 2 小时。
• 总文件存储:最多 10 个专业版视频(99 美元/月)，每个额外视频每月 0.25 美元。
• 接受的视频格式: .MP4(推荐)。MOV。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 没有广告。
• 100%可定制的嵌入式播放器。
• 突出显示您频道中的其他视频(无外部视频推荐)。
• 为脸书/Instagram 创建自定义受众。
• 从视频中捕捉线索。
• 定制品牌。
• CRM 集成。

Wistia 的独特之处在于，它迎合了专业数字营销人员和数据驱动型企业的需求。它也是我们首选的视频托管平台，可以托管我们的大部分视频(例如: MyKinsta demo )。

您可以在网站上使用视频来为再营销活动创造定制受众。您甚至可以从您的视频播放器中捕捉线索，并将数据与一个 CRM 整合。

Wistia lead capture form

如果你努力为你的客户提供个性化的体验，Wistia 是一个很好的视频托管选择。

骗局

• 价格昂贵。
• 没有固有的受众。

10 个视频每月 99 美元(T1)，Wistia 是这个列表中最贵的选择之一。但是对于的企业和成功的在线企业，这在他们的营销预算中甚至算不上什么。

适用于:

• 具有个性化体验的数据驱动型企业。
• 依赖销售线索和漫长销售过程的企业。
• 经验丰富的数字营销人员。

7.巫毒玩家

vooPlayer

vooPlayer 是另一个先进的视频托管服务，面向营销人员，而不是业余爱好者或个人博客。

它提供先进的视频见解，帮助您填充自定义受众，收集线索。这是一个将视频营销整合到您的营销和销售工作中的一体化解决方案。

厌倦了体验你的 WordPress 网站的问题？通过 Kinsta 获得最好、最快的主机支持！查看我们的计划

视频上传指南和规范

• 支持的来源:脸书、YouTube、Vimeo、亚马逊 S3 、 Dropbox 等。
• 最高分辨率: 4K (3840×2160 px)。
• 支持的长宽比:任何，有反应的玩家。
• 最大文件大小:未列出最大文件大小。
• 总文件存储: 25GB 和 50GB 带宽，14 美元/月启动计划。
• 接受的视频格式: MP4(推荐)、Ogg、WebM、MOV、FLV(不推荐)等。
• 支持 360°视频

赞成的意见

• 没有广告。
• 实惠。
• 可定制的品牌。
• 完全控制嵌入式视频播放器。
• 高级视频分析和热图。
• 用导联捕捉门捕捉导联。
• 通过按次付费入口获取视频观看费用。
• 通过视频安排比赛。
• 与谷歌、脸书和 Instagram 广告整合的受众生成器。

vooPlayer 提供了一个全面的工具箱，用于通过视频推动销售线索和收入。您可以完全自定义品牌和视频播放器，并使用它来增加观众，捕捉线索，甚至为您的观众举办比赛。

通过热图和高级分析深入了解用户与不同视频的互动方式。

如果你做视频的主要原因是营销和品牌推广，vooPlayer 应该在你的候选名单上。

骗局

• 复杂。

由于所有增加的功能，vooPlayer 对于缺乏数字营销经验的企业主来说似乎有点难以招架。

适用于:

• 具有个性化体验的数据驱动型企业。
• 依赖销售线索和漫长销售过程的公司。
• 经验丰富的数字营销人员。

8.布莱特科夫

Brightcove

Brightcove 是一个企业视频托管解决方案，专注于与其他营销自动化工具和服务器端广告插入的集成。

这是一个可扩展的解决方案，被主要出版物和 50%的财富 500 强公司所采用。

视频上传指南和规范

• 最大分辨率:无。
• 支持的长宽比:任何，有反应的玩家。
• 最大文件大小:无最大文件大小，经测试高达 100 GB 无问题。
• 文件总存储量:基于计划。
• 接受的视频格式: .MP4，.MOV。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 管理和销售您自己的视频广告库存。
• 直接传输到您的网站/应用程序。
• 企业友好型内容管理系统。
• 高级营销自动化集成。

Brightcove 是真正的企业解决方案，将帮助您的组织在大规模营销和通信中集成视频。对于出版商，它提供了先进的服务器端广告插入，集成了主要的 DSP 解决方案。

骗局

• 价格，他们的网站上没有定价模型。
• 复杂。

由于该平台是为企业设计的，因此对于小企业和个体创业者来说，它可能会很复杂，很难使用。

适用于:

• 希望将数字视频纳入营销工作的企业。

9.SproutVideo

SproutVideo

SproutVideo 是另一个为企业设计的视频托管平台。

除了线索捕获表格、受众构建和高级视频分析之外，它还提供了共享和协作工具。

视频上传指南和规范

• 最大分辨率:无。
• 支持的长宽比:任何，有反应的玩家。
• 最大文件大小:高达 100GB。
• 最大视频长度:无限制。
• 总文件存储: 500GB，500GB 带宽(Seed 计划为 24.99 美元/月)。
• 接受的视频格式: .MP4，.MOV。AVI。WMV。FLV。MKV、3GPP 等。

赞成的意见

• 从视频中捕捉线索。
• 借助高级视频分析获得更深入的见解。
• 用审计日志跟踪编辑。
• 基于角色的权限。
• 设计无限独特的视频播放器。
• 自定义播放列表。

你可以使用他们的在线创建器来设计无限独特的视频播放器。此功能允许您将每个视频播放器与网站上的特定页面相匹配，以实现无缝集成。

创建自定义播放列表，为您的客户创造一个引人入胜的旅程。它还提供线索捕捉和受众创建工具来帮助您的数字营销工作。

骗局

• 复杂。
• 没有平台受众。

由于 seed 计划以每月 25 美元的价格提供了大部分必要的营销功能，SproutVideo 对于小企业和个体创业者来说是一个可行的选择。

但是，像 vooPlayer 和 Wistia 一样，它没有内置的受众，并且增加的功能对于没有经验的用户来说很难掌握。

适用于:

• 依赖销售线索和漫长销售过程的公司。
• 经验丰富的数字营销人员。

10.Uscreen

屏幕

us screen 与列表中的其他选项略有不同。这是一个视频点播或数字视频课程平台，旨在帮助教育工作者从他们的在线视频中赚钱。

你们中的一些人可能会因为这个原因寻找视频托管服务。

视频上传指南和规范

• 最大分辨率: 1080p (1920×1080 px)。
• 可接受的视频格式: MP4。

优点:

• 创建、组织和销售在线视频课程。
• 与手机和智能电视上的 OTT 应用集成。
• 定制定价模型。
• 平台中包含快速高清视频托管。

对于一些人来说，Uscreen 可能是比常规的 WordPress 会员插件或 LMS 更好的选择，因为视频托管是服务的一部分。

缺点:

• 价格。

虽然这种解决方案使在线视频课程的计划、上传、管理和销售变得容易，但它比其他选择要贵一些。

基本计划起价为$ 99/月，上限为 300 名用户。

适用于:

• 计划发布视频课程的教育工作者和企业主。

最好的视频托管解决方案是什么？

最佳视频托管提供商取决于您的视频托管和业务需求。

你想将无广告视频无缝集成到你的 WordPress 网站吗？Vimeo 拥有可定制的播放器和便宜的月费计划，可能是个不错的选择。如果你是付费的 Jetpack 用户，你也可以用它来满足你的视频需求。

您想要深入的分析、个性化和线索捕捉选项吗？Wistia 和 vooPlayer 带来了这一点。

Brightcove 是企业的最佳选择，Uscreen 是举办在线视频课程的最佳选择。

如果你想用顶级视频内容吸引新观众，那么 YouTube 和脸书是你最好的选择。

这个问题没有唯一正确的答案。一如既往，这取决于你想通过视频实现的目标和你的预算。

Videos are taking over the internet as a great way to engage with your audience! Problem: hosting videos on your own site isn't the best option. Solution: video hosting platforms. Check out the best ones here! 📺👩🏻‍🎤Click to Tweet

摘要

在互联网上托管你的视频有很多选择。

对大多数视频制作者来说，YouTube 是首选，但对企业来说，它也有很多不利之处。嵌入选项可能看起来不专业，你的竞争对手可能会截取你的视频并在其中显示广告。

Vimeo 是一个非常便宜的选择，拥有时尚、可定制的播放器，以及专业创意人员的参与观众。

其他付费选项，如 Wistia、Brightcove 和 vooPlayer，为您提供分析、见解和直接从视频播放器中捕捉线索的能力。

要为你的企业找到正确的选择，你必须确定你的优先事项。

一个聪明的方法是在你的策略中结合不同的平台。你可以有一个付费的解决方案来托管你的视频，让你完全控制它们，同时利用免费的视频分享平台——如 YouTube 或脸书——作为一种有机增长你的影响力的方式。

现在轮到你了:你曾经尝试过视频托管平台吗？你最喜欢的选项是什么？请在评论中告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

使用排名前 16 的视频搜索引擎查找任何视频

原文：https://kinsta.com/blog/video-search-engine/

每个人都喜欢视频——普通人每天花 2.5 小时在线观看视频。企业主和营销人员应该注意:69%的消费者更喜欢观看解释产品或服务的视频。只有 18%的人希望阅读基于文本的文章，4%的人更喜欢信息图。

那么，如何找到自己想看的视频呢？

如果你正在制作视频，你如何确保互联网用户能找到你的视频内容？

就像你转向谷歌或其他搜索引擎来寻找令人兴奋的网站或博客帖子一样，你也可以使用搜索引擎来寻找视频。

本文向您展示了如何搜索视频，并介绍了顶级视频搜索引擎。

T3】

查看我们的视频指南视频搜索引擎

如何搜索视频？

有几种类型的视频搜索引擎可以让你在网上找到视频。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

首先，你可以使用像谷歌这样的主要搜索引擎。所有顶级搜索引擎都有一个视频搜索选项，可以在网络上找到各种来源的视频。它们通常有过滤器来帮助您查找特定持续时间、质量等的视频内容。

你也可以使用内置于视频托管平台的搜索引擎，比如 YouTube 。例如，你可以使用 YouTube 找到我们自己的 Kinsta YouTube 频道上的信息视频。

YouTube video search

最后还有专门的视频搜索引擎。例如，你可以使用 Social Searcher 搜索社交媒体上的视频，或者使用 Shutterstock 搜索股票素材。

你知道平均每人每天花 2.5 小时在线看视频吗？👀确保你的观众通过这些视频搜索引擎找到你的📽 点击推文

有没有反向视频搜索引擎？

你可能对谷歌和其他搜索引擎提供的反向图片搜索很熟悉。

反向图像搜索引擎可以让你输入一个图像文件来在线查找相同或相似的图像。

没有搜索引擎会反向搜索整个视频，但你可以使用反向图像搜索引擎来完成同样的事情。拍摄视频截图，或使用缩略图作为您的图像进行搜索。

我们推荐用于反向视频搜索的搜索引擎有:

• 谷歌
• 堆
• 核实
• 快门架

有移动视频搜索引擎吗？

移动设备占全球互联网流量的 54.8% 。

如果你从智能手机或平板电脑上进行视频搜索，你需要一个针对移动设备优化的搜索引擎，并且你希望视频能在你的设备上很好地显示。

幸运的是，我们名单上几乎所有的视频搜索引擎都有移动应用程序。谷歌应用程序可以很容易地进行常规视频搜索和反向视频搜索，从您的设备的相机或存储照片。

16 大视频搜索引擎

让我们来分析一下视频搜索引擎的 15 个最佳选择。

1.谷歌

谷歌提供顶级视频搜索引擎之一，这并不奇怪。

谷歌擅长各种搜索，包括视频。你可以在搜索栏下找到谷歌视频搜索，以及新闻和图片等其他搜索选项。

Google video search with filters

谷歌有许多过滤器，你可以用来找到合适的视频，包括:

• 视频的持续时间
• 发布视频的日期范围
• 质量(任何质量或高质量)
• 无论是隐藏字幕
• 来源(网站)

通过进入设置并选择高级搜索，你会得到更多的选项，比如搜索特定语言的视频。

2020 年，《华尔街日报》发表了一篇报道称谷歌在搜索结果中将 YouTube 视频优先于竞争对手，但谷歌工程师否认了这一点。

谷歌移动视频搜索

如上所述，您可以使用反向图像搜索引擎来搜索视频。

多亏了谷歌镜头，谷歌有了一个强大的移动解决方案。它可以让你用手机摄像头拍照，轻松裁剪，并找到相似的图像和视频。

2.油管（国外视频网站）

YouTube 不是传统的视频搜索引擎，因为它只会在 YouTube 上搜索视频。

但是考虑到每分钟有 500+ 小时的内容被上传到 YouTube】，你很有可能在这个平台上找到你想要的东西。

谷歌拥有 YouTube，所以它的搜索能力是一流的。

和谷歌视频搜索一样，YouTube 允许你根据时长和发布日期进行过滤。您还可以搜索以下类别的视频:

• 活着
• 4K
• 硬盘(hard disk)
• 字幕/抄送
• 知识共享
• 360°
• VR180
• 三维（three dimension 的缩写）
• 直接热轧制
• 位置
• 购买

YouTube video search filters

除了视频，您还可以搜索频道、播放列表和电影。

3.堆

谷歌是一个比必应更受欢迎的搜索引擎，T2 的市场份额为 87%，而必应只有 7%。

但说到视频，你不应该放弃必应。在某些方面，必应视频搜索甚至超过了谷歌。

Bing video search engine

像谷歌一样，必应的过滤器包括持续时间、日期和来源。

它们还包括质量——但谷歌只搜索“任何质量”和“高质量”，必应有以下选项:

• 全部
• 低于 360 便士
• 360p 或更高
• 480p 或更高
• 720p 或更高
• 1080p 或更高

Bing 还可以让你根据视频是免费还是付费进行过滤。

必应视频搜索引擎结果页面(SERP)比谷歌的更直观，当你悬停在其上时，大缩略图会显示几秒钟的预览。你可以直接在必应上观看视频，而不是点击链接就被带到视频网站。

4.达克达克戈

不是每个人都喜欢使用传统的搜索引擎，比如谷歌和必应。

对隐私的担忧导致许多人转向 DuckDuckGo。该搜索引擎不会跟踪您的搜索历史，会阻止外部跟踪器，并在可能的情况下将您连接到网站的加密版本。

如果你不想让你的数据落入谷歌之手，我们有好消息:DuckDuckGo 也有视频搜索。

DuckDuckGo video search engine

DuckDuckGo 让你按视频时长、分辨率、日期和许可类型(知识共享或 YouTube 标准)进行搜索。

这项服务的一个巧妙之处在于，你可以改变搜索区域，以查看你所选择国家的搜索结果。

5.日常运动

Dailymotion 是一个视频托管服务，拥有超过 3 亿用户，仅次于 YouTube。

像 YouTube 一样，这个“搜索引擎”只会返回来自其平台的结果。搜索 YouTube 和 Dailymotion 以获得更广泛的结果列表。

Dailymotion video platform

Dailymotion 的过滤器仅限于持续时间和上传日期。

6.脸谱网

数百万视频的另一个来源是脸书。

脸书是互联网第三大网站，仅次于谷歌和 YouTube。Facebook Watch 是脸书分享和观看视频的网站，每月有超过 12.5 亿人观看。

Facebook Watch

您可以从观看页面搜索视频，或者在主搜索栏中输入一个词，然后选择“视频”视频可以按发布日期过滤，你可以选择只看直播视频、音乐、节目或你自己保存的视频。

7.狗桩

Dogpile 创建于 1996 年，作为一个元搜索引擎，它将来自雅虎的搜索结果整合在一起。、Lycos、Excite、WebCrawler、Infoseek、AltaVista、HotBot、WhatUseek、万维网蠕虫。

虽然一些老派的搜索引擎已经不存在了，但 Dogpile 仍然存在。今天，它带给你搜索引擎的结果，包括谷歌，雅虎！，还有 Yandex。

Dogpile search engine

Dogpile 的视频搜索没有过滤选项，但它可以是一种很好的方式来确保你从各种来源获得结果。

8.维欧

Veoh 是一个视频分享网站，成立于 2005 年，与 YouTube 同年。在 2000 年代中期，它是互联网上最受欢迎的视频网站之一，但它失宠了，最终申请破产并易主。

如今，Veoh 无法与 YouTube 和 Vimeo 等网站竞争，而且它的许多内容都很陈旧。但它确实有一个很酷的特点，值得列入这个名单。

除了时长和类型，Veoh 还允许你通过视频语言和字幕语言进行搜索。所以，如果你愿意，你可以找到所有保加利亚语的喜剧视频，并配有英语字幕。

我们列表中的其他搜索引擎都没有这样做。

Veoh video hosting website

Veoh 上的视频包括用户生成的内容以及电影和电视节目。

9.贝里里

我们已经提到了几个搜索引擎，你可以用它们来做反向视频搜索。它们都要求你使用视频中的图像。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

Berify 是一个非常全面的反向图片搜索，因为它会在谷歌、必应和其他主要搜索引擎上寻找你的视频截图。

Berify reverse video search engine

你必须创建一个帐户才能使用 Berify。免费计划允许你反向搜索五张图片。

10.Vimeo

Vimeo 是仅次于 YouTube 和 Dailymotion 的第三大视频托管平台。

Vimeo 没有 YouTube 那么多视频，但它允许更高的视频和音频质量。有时，你可以在 Vimeo 上找到比特率更高的两个平台上的相同视频。

Vimeo video platform

在 Vimeo 上搜索视频时，您可以通过以下方式进行过滤:

• 种类
• 视频时长
• 上传日期
• 视频是否直播
• 视频是不是 360
• 视频是否是“员工精选”
• 免费或付费
• 许可证类型

Vimeo 对于营销和内容创作者来说也是一个极好的选择。

11.社交搜索者

脸书、Twitter、Instagram、Tumblr 等社交媒体平台都有视频内容。

社交搜索器让你一次搜索多个平台。

你可以从 11 个来源中选择你想要搜索的，并根据情绪(帖子的正面词或负面词更多)和语言进行过滤。

Social Searcher 还提供对聚合搜索结果的分析，因此您可以看到谁是最热门的发帖者、视频帖子的典型情绪、帖子中的常见关键词等等。

Social searcher social media search engine

社交搜索错过了很多视频。要获得最全面的结果，请单独搜索每个平台。

但社交搜索是一个很好的方式来查看所有社交媒体上有哪些关于某个主题的视频。

12.Ecosia

如果你坐在电脑屏幕前也能保护环境，会怎么样？

Ecosia 让这一切成为可能。Ecosia 使用来自你搜索的广告收入在需要的地方种树。根据 Ecosia 的数据，种一棵树大约需要 45 次搜索。

微软必应支持 Ecosia，所以你的结果可能是相似的。

Ecosia

您可以按分辨率、持续时间和发布时间进行过滤。

一个计数器告诉你在 Ecosia 用户的帮助下种植了多少棵树。

13.Yandex

Yandex 是俄罗斯最大的搜索引擎，也是仅次于谷歌、必应和雅虎的世界第五大搜索引擎。(由 Bing 提供支持)和百度。

Yandex 是专门为俄罗斯市场创建的，因此你可能会得到与谷歌或必应略有不同的结果组合。但是可以用英文 Yandex。

Yandex

当你在 Yandex 上搜索视频时，你可以根据时长、质量(高清与否)和发布时间(最近与否)进行过滤。

所有的 Kinsta 托管计划都包括来自我们资深 WordPress 开发者和工程师的 24/7 支持。与支持我们财富 500 强客户的同一个团队聊天。查看我们的计划！

搜索引擎还提供了“请参阅”部分。观看这些视频的人也观看了您的 SERP 中的视频。Yandex 还列出了一个可供选择的搜索引擎清单。

14.百度(全球最大的中文搜索引擎)

百度是最大的中文搜索引擎，也是全球第四大搜索引擎。中国的竞争甚至还没有接近，百度声称拥有 70.5% 的市场份额，而谷歌只有 1.6%

百度没有英文版，即使你搜索一个英文关键词，结果也会严重偏向中文来源。但如果你对中国视频感兴趣，或者想了解一下中国市场，百度是你最好的选择。

你可以用谷歌翻译来理解界面。

Baidu

百度没有视频过滤选项。

15.瑞士奶牛

Swisscows 是一个专注于隐私的搜索引擎，提供视频搜索。和 DuckDuckGo 一样，它不会收集你的数据，也不会创建搜索历史。

它也不索引或显示色情内容。

Swisscows

您可以按日期、持续时间、质量和宽高比(宽屏或标准)进行过滤。

16.快门架

你的网站需要一个免版税的视频吗？

Shutterstock 让你搜索和购买股票素材。

您也可以根据图像搜索视频。将你的图片拖放到搜索栏中，Shutterstock 会推荐相似主题的股票视频。

Shutterstock

最好的视频搜索引擎是什么？

最好的视频搜索引擎取决于你的需求。以下是我们的建议:

• 最佳综合视频搜索引擎:必应
• 最佳移动视频搜索引擎:谷歌
• 最佳反向视频搜索引擎: Berify
• 最佳私人搜索引擎: DuckDuckGo
• 最佳社交媒体视频搜索引擎:社交搜索引擎

如何为搜索引擎优化我的视频？

现在，我们已经介绍了所有可以在网上找到视频的方法，让我们来谈谈如何确保其他人找到您的视频。

第一步是决定在哪里上传你的视频。

选择托管平台

大多数人在决定将视频放在哪里时，会立即想到 YouTube。也许你也会考虑像 Vimeo 这样的 YouTube 竞争对手。

这些托管服务对于建立品牌知名度非常有用。许多人直接去 YouTube 搜索视频，你的内容可能会出现在谷歌搜索中。

但是如果你的目标是增加网站的流量，YouTube 可能不是最好的选择。

问题是很多人会去 YouTube 而不是你的网站看你的视频。即使你将视频嵌入到你的网页中，你本质上也是在和自己竞争。

如果谷歌或其他搜索引擎在你的网页前显示 YouTube 的结果，流量就会流向 YouTube。

为了确保视频流量到达你的网站，你可以选择将你的视频放在像 Wistia 或 Brightcove 这样的服务上。这些解决方案旨在帮助您将视频放到您的网站上。

视频搜索引擎优化

就像你的网站本身一样，你的视频应该遵循 SEO 最佳实践。

关键词研究

从研究你希望你的视频排名的关键词开始。如果你不熟悉关键词研究技术，你可以遵循我们的分步指南。

您将在视频的元数据中使用这些关键词，如标题和描述。一些视频托管服务有一个地方可以输入您希望与您的视频相关联的关键词。

确保将范围缩小到几个关键术语——在视频标题中塞进 15 个关键词不会有助于它被发现。

副本

转录你的视频有几个重要的原因。

首先，它有助于搜索引擎理解你的内容。谷歌听不到视频中的关键词，但它可以阅读文字记录。

它还能让更多的观众观看您的视频。在一些视频服务中，脚本被用来创建字幕。在其他情况下，文字记录会出现在视频下方，这样人们就可以跟着读了。

极小的

大多数视频搜索引擎将搜索结果显示为缩略图。视频托管服务通常会让您选择将哪个图像用作缩略图。

如果你想让人们在 SERP 中点击你的视频，缩略图应该是令人兴奋和吸引人的。它还应该给出一些视频是关于什么的指示。

网页优化

如果你把你的视频放在你的网页上，那么这个网页也应该针对搜索引擎进行优化。

查看我们的 58 个增加有机流量的技巧获取最新的 SEO 建议。

为什么搜索引擎找不到我的 YouTube 视频？

你制作了一个很棒的视频，上传到 YouTube(或另一个托管服务)，然后急切地等待在 Google SERP 上看到它。

但它不在那里。哪里出了问题？

可能你只需要等几天。谷歌可能还没有索引你的全新视频。

如果已经有一段时间了，请检查您的视频的标题、描述和标签，以确保它们与您想要的搜索词相匹配。如果您还没有上传成绩单，请上传。

最后，查看你的频道的 YouTube 工作室。在“内容”下，查看您的视频是否被列为公开视频，或者它们是否有任何限制。

69%的消费者更喜欢看解释产品或服务的视频——所以要确保你的视频内容能被看到🎥

摘要

如果你在网上找视频，你有很多搜索选项。所有主要的搜索引擎(加上相当多的小众解决方案)都提供视频搜索。

想为你的网站制作专业质量的视频吗？试试这些免费的视频编辑器。

你还有其他喜欢的视频搜索引擎吗？请在下面的评论中分享给我们的社区！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

关于 Vue.js 前端框架你需要知道的 10 件事

原文:# t0]https://kinta . com/blog/view-js/

随着前端 JavaScript 框架的不断崛起，包括新的 Vue.js 3，跟上它们并了解它们的所有新特性变得至关重要。

在本文中，我们将探索 Vue.js 3 及其新添加的特性。这些最新的添加使得 Vue.js 更加健壮，使它成为您下一个项目要考虑的一个很好的框架。您将详细了解关于 Vue.js 您应该知道的 10 件事，以及它将如何帮助您交付可扩展的高性能前端应用。

准备好了吗？我们走吧！

Vue.js 是什么？

根据 Vue.js 创始人尤雨溪的说法:

Vue.js 是一个更灵活、更少固执己见的解决方案。它只是一个界面层，所以你可以在 pages 中将其用作一个轻量级功能，而不是一个成熟的 SPA。”

他想创建一个像 Angular 一样强大的前端框架，但是也要“更轻”和更灵活，没有 Angular 带来的所有不必要的插件和概念。

其结果是 Vue.js，这是当今使用的最流行的前端框架之一。

Vue.js is the second most popular frontend framework. (Source: State of JS 2020)

Good news: the new features added to Vue.js 3 make it an even better choice for your next project 😄 Check them out in this guide ⬇️Click to Tweet

开发者为什么使用 Vue.js

不同的原因促使开发人员使用特定的技术。我们来讨论一下为什么我们认为你应该学习 Vue.js。

首先，Vue.js 是大多数开发人员可以直接进入的最简单的框架之一，因为这个框架使用 JavaScript。所以任何人只要有基本的 JavaScript 知识，就可以用 Vue.js 进行开发。

Vue CLI 工具与其他前端开发工具相结合使得设置 Vue.js 变得轻而易举。默认情况下，它设置了一些功能，但是您也可以用一个干巴巴的(不要重复自己)逻辑和结构来构建代码。

Vue.js 还内置了反应能力。这意味着在 Angular framework 上流行的实时功能在 Vue.js 中变得轻而易举。例如，您可以在 Vue.js 应用程序中轻松应用简单的指令，如v-if。

接下来，我们来讨论一下 Vue.js.
的主要利弊

Vue.js 的利与弊

Vue.js 是当今使用的第二流行的框架。让我们看看是什么让 web 开发人员坚持下来，又是什么把他们推开。

Vue.js Pros .检视. js Pros

我们将从探索 Vue.js 的积极方面开始。

微小的尺寸

Vue.js 有一个非常小的可下载大小，大约 18 KB，与其他大尺寸的框架相比是非常优秀的。然而，在这样的规模下，Vue.js 将对你的前端应用程序的 SEO 和 UX 产生积极的影响。

单文件组件和可读性

Vue.js 使用基于组件的架构，从而将大块的代码分成更小的组件。此外，在 Vue.js 中，一切都是组件，每个组件都用 HTML、CSS 和 JavaScript 编写，从而鼓励可读性和简单性。

固体工具系统

Vue.js 支持大量开箱即用的前端开发工具，几乎不需要您进行任何配置。比如 Vue.js 支持 Babel、 Webpack 等工具。此外，它还提供单元测试、端到端测试库、灵活易用的路由系统、状态管理器、服务器端呈现(SSR)等等。

使用方便

如果你以前用过 Vue.js，你会同意它非常容易使用。它使通常的 web 开发方法现代化，使得任何初学者都可以很容易地投入其中，并且只需少量的练习就能感到舒适。

vue . js Cons(检视. js cons)

现在我们已经讨论了优点，让我们来探索 Vue.js 的缺点。

反应复杂性

Vue.js 中双向绑定的实现是管理 Vue.js 组件的便捷工具。双向绑定指的是在一个组件类和它的模板之间共享数据，它的开发是为了如果一个位置的数据发生变化，它会自动更新其他位置。

然而，当反应性系统仅重新呈现那些被触发的数据块时，有一个关于反应性如何工作的问题。有时，在数据读取过程中会出现一些错误，因此需要对数据进行扁平化处理。你可以在 Vue.js 的网站上通读这个已知问题以及它是如何解决的。

语言障碍

最初，Vue.js 主要被中国人采用，小米和阿里巴巴等大公司帮助推广该框架，并在劳动力市场创造需求。然而，随着许多中国公司的大量采用，许多论坛、讨论频道等主要是中文的，使得非母语开发人员很难采用。

时至今日，随着 Vue.js 发展到在许多语言中加入了支持，这种情况已经不复存在，但仍有一些语言比其他语言受到的支持要少。

过度灵活的风险

如上所述，Vue.js 非常灵活易用。因此，由于企业团队中的每个人都可能对如何做事情有不同的看法，所以很容易到处都有大量的意大利面条式代码。

从上面讨论的 Vue.js 的优缺点来看，你可能已经发现了一些你喜欢的特性和一些不适合你的特性。

关于 Vue.js 你应该知道的 10 件事

以下是你需要知道的关于 Vue.js 的十件事，以及为什么知道它们是必要的。

计算属性

计算属性是 Vue.js 中最常用的功能之一。计算属性使您能够创建可以修改、操作的属性，并以有效和可读的方式显示数据。

当您想要重复许多小方法，例如格式化、值的改变，或者在某些情况下需要触发的大过程时，它就派上了用场。

计算属性有助于移除模板中过多的逻辑。过多的这种逻辑会导致您的代码变得臃肿，难以快速维护。

假设您想将字符串格式化为大写字母，您可以这样做:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template> 

如果需要在 50 个不同的地方改变value变量会怎么样？臃肿，对吧？嗯，计算属性在这里帮忙:

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>
<script>
  export default {
    computed:{
      value(){
        return this.value.toUpperCase()
      }
    }
  }
</script>

你可以很容易的把toUpperCase()改成toLowerCase()，它会从一个点反映到全身。

事件处理

Vue.js 通过使用$emit和v-on，让孩子和家长的沟通变得轻而易举。处理组件层次结构之间的通信变得轻松而直接。

$emit函数接受两个参数:一个名称字符串和一个要发出的可选值。

在子组件上使用v-on:event-name来接收父组件发出的事件:

<template>
  <section>
    <button @click="onClick">Add </button>
  </section>
</template>
<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

一旦您触发了Add按钮，onClick方法就会触发$emit事件，该事件会向监听add事件的子组件发出add事件。

让我们来看看如何倾听一个事件:

<template>
  <section>
  <p v-show="showSaveMsg">This component is listening to the ADD event</p>
  <add-event v-on:add="onAdd"></add-event>
  </section>
</template>
<script>
export default {
  data(){
    return {
      showSaveMsg: false
    }
  },
  components:{
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() { 
        this.showSaveMsg = true;
    }
  }
}
</script>

上面的代码监听add事件，并通过将showSaveMsg的值更改为true来做出响应，这再次显示了消息。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

延迟加载/异步组件

惰性加载是 Vue.js 的最佳性能技巧之一，其中组件是异步或按需添加和呈现的，这将显著减少文件大小、HTTP 请求-响应时间等。

延迟加载是通过 Webpack 动态导入实现的，它也支持代码拆分。

Vue.js 允许组件的延迟加载，可以通过以下脚本全局实现:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue")); 

您可以使用如下组件在本地实现它:

<template>
  <div>
    <component></component>
  </div>
</template>
<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

全球组件

我们可以通过全局组件在 Vue.js 中实现显著的可重用性，您只需注册一次组件，然后就可以在 Vue.js 实例中的任何地方使用它。

全局组件是一个重要的特性，可以节省您每次单独注册组件的时间，但是它很容易被滥用于全局注册所有组件。全局注册所有组件很容易导致较大的构建规模，导致较差的 SEO 和较慢的页面加载时间。

确保总是注册在您的项目中有许多用例的全局组件，如下所示:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

单一文件组件

Vue.js 最强大的一个功能就是组件；它帮助您扩展基本的 HTML 元素、CSS 和 JavaScript 来封装可重用的代码。

组件可以帮助将大型项目分解成更小的、可重用的部分，我们可以在整个项目中扩展这些部分，从而鼓励软件工程的 DRY(不要重复自己)原则。

它可以为大型项目提供组织和封装，可重复使用的代码，并可以分成.vue文件。

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButtom",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button{
    /** Button Styles */
  }
</style>

上面的脚本创建了一个定制的按钮组件，我们可以在我们的项目中重用它。每个组件都有自己的 HTML、CSS 和 JavaScript。

测试

Vue.js 提供了一个最健壮的测试库，使得用 Jest 和 Mocha 进行单元测试或者端到端的测试变得轻而易举，几乎不需要配置。

使用这些工具进行快速测试对您来说是值得的。因此，让我们在下面探索安装、设置和测试一个演示项目。

如果您正在使用推荐的 Vue CLI 工具来设置您的项目，请运行以下命令:

厌倦了没有答案的劣质 WordPress 托管支持？试试我们世界一流的支持团队！查看我们的计划

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils 

接下来，在设置之后，包含下面的代码，它演示了如何测试一个简单的组件:

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

Vue 测试库有两个很好的选项来测试你的组件:安装和浅层。

如果你想完全隔离地测试一个元件，使用shallow方法。否则，如果您需要在一个包含子组件的组件上工作，并且您想要确保通信，那么mount选项非常有效。

强大的 Vue CLI 工具

Vue CLI 是一款优秀的 CLI 工具，它为任何 Vue 开发人员提供了强大的功能。有了它，您可以快速测试出任何独立的组件。Vue CLI 的伟大之处在于，您可以完全独立地开发一个组件，对其进行测试，并且在迭代该特定组件时仍然可以进行热重装。

为了演示，让我们在全球范围内安装 Vue CLI:

npm install -g @vue/cli

接下来，您可以通过运行以下命令来测试任何组件:

vue serve ./components/views/Home.vue

如果您希望提取一个特定的组件，比如说，与您的同事共享，您可以使用下面的命令来实现:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI 非常强大，如果你掌握了使用它的艺术，它可以节省大量的生产时间。如果你想了解更多，可以看一下官方文档。

道具管理

道具管理对 Vue 组件至关重要，因为它可以用不同的方式创建。您还可以验证道具，创建多个道具，并根据需要进行修改。

要在 Vue 组件中创建新的属性，可以用几种不同的方法来完成。假设您有了自己的组件，您需要创建isAdmin道具。

让我们看看你可以做这件事的不同方法:

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',

 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },

 // Two
  props: ['isAdmin'],

 // Three
  props: {
    isAdmin: Boolean
  }

}
</script>

验证你的道具是非常重要的。幸运的是，这也很简单:

// ...

 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },

// ...

最后，修改道具就像重新调整它们的值一样简单:

//...

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

//.. 

要为父组件中的属性赋值，请执行以下操作:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

服务器端呈现(SSR)

尽管使用 Vue.js 创建前端应用程序有很多很好的特性和好处，但 Vue.js 本身仍然是一个客户端库，只呈现和操作 DOM 元素。

服务器端渲染帮助 Vue.js 等客户端框架实现更好的效果。搜索引擎爬虫会在抓取时看到你的网站的完全呈现的页面。

为了让你的网站更快地被 Google 和 Bing 索引，你的网站需要有更快更高的时间-内容得分。这就是 Vue.js 中的服务器端渲染帮助你实现的。

服务器端呈现(SSR)是一种流行的技术，用于在服务器上呈现常规的客户端单页应用程序(SPA ),然后将完全呈现的页面发送给读者。

当页面呈现在服务器端时，它将页面作为响应发送给客户端。因此，当浏览器显示搜索引擎页面时，每条信息都已经被呈现。

在 Vue.js 中实现 SSR 对于初学者来说比较难。使用 Nuxt.js 会更容易，它内置了 SSR，学习曲线非常低。

部署

Vue.js 在开发过程中会出现许多警告、错误和膨胀的文件大小，但是当您启动生产进行部署时，这些问题会立即消失。Vue.js 将自动配置 Webpack 构建工具、minimization、CSS 提取和清除、缓存、跟踪运行时错误等等。

Kinsta 客户可以考虑使用内置的代码缩小功能，他们可以在 MyKinsta 仪表盘中直接访问该功能。这使得他们只需简单的点击就可以轻松实现 CSS 和 JavaScript 的自动缩小。

Vue.js 通过自动配置和设置生产环境使您的部署过程变得非常简单，无需开发人员执行任何额外的步骤。

为了部署你的 Vue.js 应用程序，你可以通读它的一般指南。

Curious about Vue.js 3? 👀 Learn how it can help you deliver scalable and high-performing frontend applications in this guide ⬇️Click to Tweet

摘要

在本文中，我们详细探讨了什么是 Vue.js，为什么应该使用它，它的优点和缺点，以及关于它你应该知道的 10 件事。

希望您已经提高了对 Vue.js 的认识，能够交付可伸缩的高性能前端应用程序。

继续编码！

如果您有任何问题或建议，我们渴望听到您的意见。在下面的评论区和我们交流吧！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

视觉内容策略:如何使用视觉来获得更多的流量

原文：https://kinsta.com/blog/visual-content-strategy/

拥有一个可以和你的读者分享有价值信息的博客对你的生意来说是必不可少的。博客是内容营销的一个很好的来源，如果你做得正确，收益可能会比预期的更高。有没有想过为什么你看到所有这些公司都在输出内容？这是因为如果做得好的话，内容营销会奏效。事实上，就潜在客户和投资回报率而言，T4 比付费搜索有效三倍。

Content marketing vs paid search (Image source: Oracle)

Kinsta 也看到了同样的质量结果，他们加倍努力，专注于增加网站的有机流量。

此外，人们更有可能通过内容营销来了解你的公司或品牌。68%的互联网用户花时间阅读品牌信息，80%的人喜欢通过定制内容了解公司。这可能是拥有博客的小企业比不从事内容营销的企业多获得 126%的销售线索的主要原因。

视觉内容的重要性

但是，内容营销不是也不应该只是文字。视觉是营销活动的重要组成部分。他们有能力吸引和留住你的观众。他们有能力增强你的整个活动，并使其长期成功。你认为这是为什么？为什么视觉对博客很重要？

根据《社交媒体检查者》发布的一份报告，38%的营销人员表示博客是他们业务中最重要的内容形式。视觉内容排在第二位，37%的营销人员承认这是他们内容营销策略中最重要的部分。

此外，同一份报告指出，68%的营销人员将博客用于营销目的，而 74%的营销人员将视觉作为一种常见的内容类型。总的来说，内容营销让你的转化率比其他类型的营销高出六倍。

Commonly used types of content (Data source: Social Media Examiner)

然而，我们也应该考虑到人们倾向于只记住他们听到的 10%的内容。然而，如果你将文字和相关图片配对，65%的信息会在三天后被保留。令人印象深刻，不是吗？

特色图片

当谈到你的博客的视觉效果时，你首先应该从特色图片开始。当你发布的博客文章大多基于文本信息，而没有截图、图表和其他类型的视觉效果时，这种视觉效果就更加重要了。此外，如果你也从事社交媒体营销，特色形象也很重要。为什么？这是脸书或 Twitter 用户在你分享链接时看到的第一个东西。

如何在 WordPress 中添加特色图片？

如果你在基于 WordPress 的博客上写博客，我想你也是，事情就很简单了。今天的大多数主题已经突出了这个选项。如果没有，尝试更新主题或请专业的编码人员来帮助您包含特色图像选项。

这个过程类似于传统的图片上传/插入到帖子中。只有一点小小的不同。图片上传后，你应该点击“特色图片”按钮，而不是将图片插入帖子中。

Add featured image

在你的文章中加入视觉效果

现在你已经知道了如何添加特色图片，以及为什么这么做很重要，让我们来讨论一下可能与你发布的文本搭配的其他类型的视觉效果。作为一个博客作者，你可以使用哪些视觉效果，以及如何根据你的整体内容营销策略来使用它们？

A.截屏

如果您想描述在计算机或移动设备上执行的某些操作和过程，它们是您的最佳选择。“如何做”指南在互联网用户中很受欢迎，截屏将帮助你使它们更容易理解。事实上，根据一项研究，那些按照有文字和插图的指示去做的人，比那些按照没有插图的指示去做的人，理解和 T2 表现好 323%。

Staging environment

B.图形和图表

根据尼尔森诺曼集团发布的另一项有趣的研究，人们关注携带信息的图像，而倾向于忽略装饰性的图像。这是什么意思？

那么，为了抓住观众的注意力，你需要图像为他或她提供一种有价值的内容。图形和图表属于这一类，因为它们可以帮助观众更好地理解你的数字和统计数据，同时，更容易记住所提供的信息。查看如何在 WordPress 中创建图形和图表。

Graphs and charts

C.照片

如果你有什么特别的东西要和你的观众分享，推荐使用照片。为了吸引和取悦读者，旅游博客特别需要他们谈论的不同地方的出色视觉效果。

如果您不能拍摄自己的照片，或者除了发布文本之外您不需要其他任何东西，您可以选择使用库存图像。他们为绿色内容的博客文章制作了很棒的特色图片。

从哪里获取股票图片，如何处理？

• 嗯，你需要做的第一件事是建立一个预算。有几个优质的股票图片服务，如 Dreamstime 和股票专家，但它们都需要钱。
• 如果你没有预算，可以考虑从免费的来源获得你的视觉效果。在这个领域也有很多选择，但是有一个问题:这些图片中的大多数都不是免费的。你可以免费得到它们，但是你也应该感谢它的主人。查看这些 11 个地方，获取免费图片。
• 永远尊重你在博客上使用的每张照片的版权要求。如果你想避免法律问题，当然，如果你想被认可为专业人士，这是很重要的。
• 不要只拍用谷歌搜索或其他搜索引擎找到的图片。如果你通过网上搜索找到了你需要的那张照片，试着找出这张照片属于谁，问他们是否想把使用权卖给你，或者，也许，他们会允许你免费张贴给作者。

D.产品图片

如果你想推销特定的产品，不管它们是来自你的商店还是来自合作伙伴的商店，你都需要出色的视觉效果来搭配描述或评论。你可以拍摄自己的照片，也可以要求制片人给你他们的照片。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

如果你要求制作人提供最好的图像，确保你能够得到。如果你选择自己拍摄，购买或租用最好的技术设备，并确保在最好的环境中拍摄。或者，如果你有预算，你可以为这项工作聘请一名专业摄影师。

E.信息图表

在所有能帮助你有效营销你的博客的视觉材料中，信息图表，袖手旁观是最好的选择之一。一个信息图表被阅读的可能性是一个简单的基于文本的博客帖子的 30 倍(T2)。此外，这些类型的视觉效果可以帮助你增加你博客的流量。事实上，根据客户吸引力，使用信息图表的博客比不使用信息图表的博客多获得 12%的流量。

Value of Infographic (Image source: Customer Magnetism)

F.动画书、目录和横幅

您也可以使用视觉效果作为横幅，并将其发布在其他人的博客上，以提高知名度并产生更多线索。你的成功取决于你的横幅有多好看，有多容易抓住观众的注意力。无论你是专业设计师还是对视觉设计知之甚少的业余营销人员，我都推荐你在 HTML5 中创建你的横幅。

例如，Bannersnack 是一个很棒的在线工具，它可以让你在几分钟内创建非常棒的横幅，如果你愿意，可以制作动画，并给它们一个专业的外观。它几乎立即生成 HTML5 横幅，并提供数百个模板来帮助您开始。

Bannersnack

由于其跨浏览器和跨平台的兼容性，HTML5 是一个很好的选择。与 Flash 不同，HTML5 本身受所有浏览器支持，因此是更好的选择。

然而，当涉及到动画书和产品目录时，您应该转向另一种类型的创作工具。幸运的是，你也可以在网上做，这样可以节省时间和金钱。我最喜欢的创建翻页书和目录的工具是 Flipsnack 。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

它有一个类似 Bannersnack 的界面，还允许您创建和保存 HTML5 动画书。这意味着您的文件不仅可以从任何设备上访问，而且响应迅速，这是移动用户的基本特征。

G.录像

视频可以证明是你营销策略的重要组成部分。他们在所有受众中很受欢迎，最重要的是，他们能够将潜在客户转化为客户，或者在某个实例中转化为固定受众的成员。

在这种情况下，最好的例子来自 RedBull，一家将视频内容提升到内容营销新标准的公司。虽然你可能无法马上创建一个像红牛媒体公司一样受欢迎和有效的视频频道，但你仍然可以考虑在你的战略中使用 T2 视频，因为它们很受欢迎。

据信，视频内容几乎代表了全部互联网流量。此外，的营销人员承认在他们的策略中使用过这类内容，至少一次。这是一个很好的选择，考虑到喜欢看视频的人是喜欢阅读特定主题的人的四倍。

是什么让红牛如此成功，为什么他们的视觉内容策略优于其他公司的策略？

1. 红牛媒体之家:嗯，首先想到的当然是已经提到的红牛媒体之家。它包括许多在线服务，如红牛电视，Servus 电视，Terra Mater，红牛电视在线，红色公告，红牛手机等。这些都是视频服务，特别是与每个平台的粉丝和用户分享有价值内容的在线视频服务。他们让红牛成长为当今在线多媒体市场上有影响力的公司，并通过巧妙的原创活动提高其品牌知名度。
2. 社交媒体参与度。红牛不仅仅是一家能量饮料公司，也不仅仅是一个简单的在线视频分享平台。他们也有社交媒体的存在，并且在社交媒体营销方面尽可能地吸引人(像 Twitter 营销)。他们如何以及为什么比其他公司更好？好吧，这一次，他们没有坚持他们所卖的东西。是的，品牌很重要，但它不是一切。他们通过有效的社交媒体策略建立了自己的声誉，虽然他们的产品确实是优质的，但他们的内容也是优质的。例如，在苏格兰皇家银行的脸书页面上有超过 4800 万的粉丝。令人印象深刻，是的，但这不是一个随机的事实。他们分享基于视频的内容，但他们分享的正是他们的粉丝需要看到的内容。这是通向成功的关键之一。

使用内容交付网络

我现在不打算详细介绍什么是 CDN 以及它是如何工作的。但是，我要告诉你:为了吸引和留住更广泛的观众，你需要速度。我将在下一章谈到这个特定的主题。不过，在那之前，我会告诉你一个秘密。

速度不仅取决于你的主机提供商或你的视觉效果的大小，还取决于你设法到达世界各地的观众的方式。你可能已经知道，本地网站的加载速度比几千英里以外的其他大洲的网站要快。这就是 CDN 派上用场的地方。怎么会？嗯，通过在本地服务器上存储网页的缓存副本，它可以使内容和观众之间的距离最小化。

CDN

针对谷歌的优化

在过去的几年里，页面加载速度已经成为移动搜索的一个主要排名因素，尤其是在谷歌这个最受欢迎的搜索引擎上。谷歌搜索引擎根据几个相关标准对网站进行排名。其中一个标准是页面加载速度。

你能做什么？首先，你需要考虑优化你的视觉效果,以便它们可以快速加载。你可以用 Adobe Photoshop、Affinity Designer 或者 TinyPNG 这样的工具来完成，然后再上传到你的服务器上。或者你可以使用 WordPress 插件，比如 Imagify ，它可以让你自动优化你所有的图片，而不会损失质量。

然后，你可以通过谷歌查看你的网站加载速度。点击“使用 PageSpeed Insights 分析并检查您的网站或页面。或者使用另一个速度测试工具如 Pingdom 或 GTmetrix。记住，总加载时间比分数更重要。

Google PageSpeed Insights

当你为谷歌优化你的网站时，除了页面速度，另一件重要的事情是你的内容的信息价值。人们仍然在谷歌上搜索信息。如果你的很有价值，他们很有可能会分享。或者，他们会把你的图片嵌入到他们的博客文章中，然后反向链接给你。而且，这些都是很棒很有价值的反向链接，考虑到转贴你的一些图片的人可能是在你写的同一个行业工作或写作的。

因此，当你为谷歌优化你的视觉内容时，请考虑以下两点:

1. 图像的大小。优化他们的速度。在不降低质量的前提下，让它们尽可能小。
2. 创造伟大的视觉内容，人们可以在谷歌上搜索。伟大和有价值的内容吸引观众，但他们也会产生有价值的反向链接到您的网页。

摘要

视觉对于博客来说很重要。在你的内容营销策略中，它们可能是决定性的，如果你根据你的受众来选择它们，当然，也要符合你的风格和视觉特征。在这篇文章中，我们了解了为什么视觉效果很重要，以及对于不同类型的内容推荐什么类型的视觉效果。我们还了解到，如果你想成为一名成功的博客作者或内容营销者，它们是必不可少的。

不要忘记，从特色图片开始，直到你在博客文章中包含的视觉效果，每一个细节都很重要。如何看待视觉营销？视觉在你的整体战略中有多重要？

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

Vue vs React:应该用哪个？

原文：https://kinsta.com/blog/vue-vs-react/

现在的企业渴望在短时间内开发出高质量的 web 应用程序。有许多 JavaScript 框架可供你选择来实现一个 web 应用，Vue 和 React 是其中两个最强的竞争者。

在本文中，我们将直接比较 Vue 和 React。因此，如果你是一个刚刚开始一个项目的开发人员，这个指南将帮助你做出正确的决定。

Vue 是什么？

Vue.js

Vue 是一个灵活、轻量级的基于 JavaScript 的框架，为开发现代前端 web 项目提供了强大的 web 工具。Vue 也被认为是一个灵活和进化的 JavaScript 框架，因为它允许在不影响任何基本功能的情况下对应用程序代码进行更改，从而能够创建渐进式 UI。Vue 的高度灵活性还支持将定制模块和可视组件添加到 web 应用程序的功能中。

Are you team Vue or team React? 👀Click to Tweet

历史

尤雨溪在与谷歌合作了多个使用 AngularJS 的项目后，设计了 Vue。他后来将自己的思考过程总结如下:“我意识到，如果我可以简单地分离出 Angular 中我喜欢的部分，并开发出令人难以置信的轻量级东西，会怎么样呢？”该项目的第一个源代码提交是在 2013 年 7 月，Vue 是在次年 2 月发布的。

使用 Vue 构建的流行 Web 应用程序

这里列出了使用 Vue 构建的流行的 web 应用程序，

• Gitlab
• 语法
• 行为
• 拉勒维尔火花
• Adobe 产品组合
• 9gag
• 行为
• 任天堂(日本电子游戏公司及其开发的电脑游戏名称)
• 字体真棒

React.js

什么是反应？

React 是一个开源 JavaScript 库，可用于创建具有复杂用户界面的 web 应用程序。React 允许开发人员构建可重用的定制组件，从而加快开发速度。此外，它快速加载网页的能力使它更容易被搜索引擎使用。总的来说，它是一个优秀的库，鼓励创建简单和高级的企业应用程序。

历史

与所有编程框架 AngularJS 和 Vue 相比，React 是最古老的 JavaScript 库。它是由脸书在 2013 年创建的，作为一个为各种网站创建动态界面的工具。虚拟 DOM 是用 React 组件构建的 DOM 元素的表示，是 React 的基础。

用 React 构建的流行 Web 应用程序

下面是使用 React 构建的流行 web 应用程序列表，

• 脸谱网
• 网飞
• 推特
• 贝宝
• 英国广播公司新闻
• 美国 Yahoo 公司(提供互联网的信息检索服务)
• 照片墙
• WhatsApp
• Dropbox

Vue 主要特征

Vue 还有一些引人注目的特性，对于启动和运行企业应用程序非常有用。下面解释一些特征，

虚拟 DOM

虚拟 DOM 是由几个 JavaScript 框架实现的概念，包括 Vue。不是根据 DOM 进行调整，而是以 JS (JavaScript)数据结构的形式构造和呈现 DOM 的虚拟副本。首先对 JavaScript 数据结构进行修改，然后将后者与初始数据结构进行匹配。

双向数据绑定

Vue 提供了如图所示的双向绑定功能，作为其 MVVM 框架的一部分。通过使用 Vue 提供的名为 v-bind 的绑定指令，该功能允许您编辑或将值应用于 HTML 元素、更改样式和应用类。这与 React 等框架不同，后者只提供单向通信。

Two-way binding

成分

组件是 Vue 对象，具有定制的 HTML 元素，并且可以重用。Vue 对象和 HTML 元素通过属性和事件进行交互。Vue 组件的代码块对于开发稳定且可扩展的 Vue 应用程序同样重要。

计算属性

计算属性有助于监听引入 UI 元素的修改并执行相关的逻辑，从而消除了进一步编码的需要。当我们打算改变一个依赖于另一个被改变的属性的变量时，我们应该使用一个计算属性。其他数据属性会严重影响计算的属性。下面是一个关于计算属性的简单示例，

An example of a computed property

CSS 过渡和动画

当在 DOM 中添加、更改或删除 HTML 元素时，这个特性提供了多种方法来执行转换。它带有内置的过渡组件，该组件围绕着负责过渡效果返回的元素。开发人员可以轻松使用第三方动画库来增强用户体验。

观察者

观察器用于可能定期变化的数据，如表单输入元素。在这种情况下，开发人员不需要执行任何额外的操作。Watcher 处理任何数据更新，同时仍然保持代码简单和快速。

这里有一个简单的代码片段:

An example of watchers

观察器、方法和计算属性可以称为组件的三种主要方式，它们可以利用反应性质。当您需要基于不断变化的数据执行异步或代价高昂的操作时，观察器是最佳选择。

反应主要特征

React 还有一些引人注目的特性，对于启动和运行企业应用程序非常有用。下面解释一些特征，

虚拟 DOM

这个 React 特性有助于应用程序开发过程的加速和敏捷性。该方法使得在 React 的虚拟内存中重新创建网页变得很容易。虚拟 DOM 因此被用来模仿实际的 DOM。每当应用程序被修改或升级时，通过恢复已经被改变的组件，虚拟 DOM 再次生成完整的 UI。这减少了开发某样东西所需的时间和金钱。

单向数据绑定

单向数据绑定意味着 React 利用单向数据流，使程序员能够使用回调函数来修改组件，而不是直接改变它们，如图所示。

One-way binding

Flux 是一个 JavaScript 应用程序设计组件，允许您从固定位置控制数据的流动。它给了开发者更多的权限来控制软件，使其更具适应性和实用性。Flux 有三个主要部分，即 dispatcher、stores 和 views(组件)。

JSX

JavaScript XML 是一种用于描述应用程序界面设计的标记语言。它创建了一种类似于 HTML 的语法，用于开发 React 组件。React JS 最好的方面之一是 JSX，它允许开发人员非常简单地编写构建块。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

成分

这意味着基于 React 的应用程序的 UI 由许多组件组成，每个组件都有用 JS 编码的功能。因此，程序员可以在整个应用程序中发送数据，而不会影响 DOM。应用程序的图形和操作受 React JS 组件的影响很大。

声明式用户界面

声明式 UI 特性使 React 代码更容易理解，错误修复更简单。不仅对于在线应用，而且对于移动应用，React JS 都是创建动态和交互式用户界面的理想框架。

Vue 和 React:相似性和共同特征

Vue 是以 React 为灵感创作的。因此，可以发现如下一些相似之处:

• 渐进式 Web 应用程序(PWA)支持
• 虚拟 DOM 使用
• 查看既可组合又可反应的组件
• JavaScript 代码
• 专注于核心库，合作伙伴库涵盖网络和通用状态管理
• 能够与任何当前的 web 应用程序集成

Vue vs React:哪个更好？

在当前的开发人员社区中，这些框架并驾齐驱。在本节中，我们将对 Vue 进行比较，并根据框架的共同关注点做出反应。

受欢迎程度和就业市场

React 赢得了这场比赛。因为脸书支持这项技术，所以它有更大的受欢迎程度和社区也就不足为奇了。Vue 有一个较小的社区，资源和模块有限，但它仍然受到尤雨溪和团队的支持。

React 自 2013 年成立以来，一直受到社交媒体巨头脸书的支持，在工作机会方面远远领先于 Vue。另一方面，Vue 是一个新的企业家，仍在获得牵引力。

学习曲线

Vue 是所有 JavaScript 框架中最容易学习和理解的。据估计，学习它需要几个小时到不到一周的时间。所需要的只是对 ES6 如何工作的基本理解和一些 JavaScript 编程知识。Vue 的文档也很容易掌握，因为它不像其他框架那样广泛。

对于以前使用过 JavaScript 的人来说，React 很容易掌握。由于学习曲线更低，团队的形成变得更简单，因为任何初学者或专业开发人员都可以参与。只有 16.0 以后的版本才是最新的。因此，新开发人员可能难以实现更复杂的功能。

性能(速度)

随着每个新选项或组件的增加，Vue 应用程序的状态变得越来越不清楚，这使得应用程序更难更快地加载。幸运的是，这个框架包括一个虚拟 DOM 来提高应用程序的速度。Vue 最重要的一个特点就是懒加载。它有助于减少装载时间。

React 应用程序的性能更快，在客户体验方面的性能更简单，分立组件可以很好地协同工作。React 基于组件的结构有助于开发更强大的单页面应用程序，而可重用性降低了代码复杂性，减少了 DOM 交互，加快了页面加载。此外，图书馆侧重于对网站进行必要的修改，而不必重新加载整个页面。因此，它避免了浪费的页面加载，而是刷新了内容。

组件和扩展性

在开发基于组件的用户界面时，Vue 和 React 中丰富的组件库使得重用代码更加容易，提高了开发人员的工作效率，并加快了开发过程。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

使用第三方库扩展 Vue 或 React 应用程序非常简单。大多数 React 源代码库仅仅是对现有组件的改进。Vue 中的几个第三方库是插件，使用内置的插件系统本身。

状态管理

由于 React 中的状态数据是不可变的，不能立即修改，所以必须使用 setState()函数(或 useState()钩子)来更新本地状态中的任何内容。

但是，因为 Vue 对象上的 data 属性充当应用程序数据的收集器，所以没有理由执行 setState()这样的方法来更改 Vue 中的状态。

简化开发的工具和模板

自 2016 年以来，React 提供了一个名为 create-react-app 的第三方 CLI 工具，可以辅助程序员完成 app 构建、脚本编写等任务。以前，React 程序员必须从早期的应用程序中复制文件，或者从头开始。这并不需要很长时间，但这是一个乏味的努力。

另一方面，Vue 有一个名为 Vue CLI 的工具，可以快速构建项目。Vue CLI 有几个优点，包括能够在项目过程中的任何时候添加插件和简单的修改。

生态系统

Vue 是一个独立的框架，而 React 需要使用外部库。这是两种技术之间最显著的差异之一。对于路由和状态管理，React 依赖于 Flux/Redux 等其他系统。这些框架通过提供改变状态的单一方式使调试变得更容易。因为脸书将 react-redux 和 react-router 的管理委托给了用户，所以生态系统变得越来越支离破碎。

Vue 的伙伴库数量较少。然而，Vue 目前包含了一些需要在 React 中使用模块的特性，比如 props 验证。Vue 的关键框架，如 Vuex 和 Vue-router，由 Vue 团队维护和支持。

安全性

Vue 和 React 都有安全缺陷，尽管 Vue 应用比基于 React 的应用稍微容易保护一些。虽然针对 XSS 问题的自动防御还不可用，但 Vue 程序员可以在实现 HTML 代码之前清理它，或者使用额外的库来帮助防止攻击。您可以直接生成网页，并在生成之前和之后，在您知道 HTML 是安全的情况下保护应用程序。

为了防范 XSS 漏洞、 SQL 注入和其他威胁，React 安全性依赖于遵循安全标准的程序员。虽然 React 使用起来很简单，但是确保 React 项目的安全性需要大量的技能和经验。

移动开发

React Native 集成了本机开发和 React 的最大特性，React 是用于创建用户界面的顶级 JavaScript 工具包。你现在可以利用 React Native 和你现有的 Android 和 iOS 应用程序，或者你可以从零开始构建一个全新的应用程序。有了 React Native 的 React 类组件，你可以在 Android 和 iOS 上重用高达 99%的 JS 代码。因此，一个外观和功能都像纯 iOS/Android 应用程序的跨平台应用程序已经创建出来。

您可以制作完全原生的小部件，并完全控制它们的外观。React 原生框架将表示层作为一个完美的状态输出来处理，这使得创建具有自然外观和直观感受的 iOS/Android 合作伙伴应用程序变得简单。

尽管 Vue 落后于 React，但它提供了几个移动开发选项。首先，有 NativeScript，它可以让你编写 Vue 应用程序，也可以将它们编译成原生的 iOS/Android 应用程序。然后是电容器，由发明爱奥尼亚的人发明的。使用一个简单的 API，您可以将 Capacitor 集成到任何现有的 Vue 网站中，并提供原生的 iOS/Android 功能。最后，Vue Native 结合了 Vue 和 React Native 生态系统的优点。在这方面，React 可以说是最适合移动开发的一个。

测试和调试

Reactjs 附带了几个有用的测试运行程序，这使得开发过程更容易遵循。例如，Jest、Mocha 和许多其他测试运行程序使测试人员能够遵循运行测试套件的通用方法，这有助于他们发现实际浏览器设置中的缺陷、不需要的功能以及发生过度功能操作的地方。它缩短了上市时间，加快了应用程序部署，并鼓励了更有生产力的氛围。

由于 Vue 才刚刚开始，测试功能是标准的，但是简单有效。它不会提供太多的工具，也不会危及代码的测试能力。Vue Testing Library 和 Vue Test Utils 是 Vue 官方推荐的两个库。因为这个框架支持 CI/CD 和热重装，所以可以建立更快的反馈机制。

支持和社区

最大的社交网站脸书总是支持 React。最大的优势是脸书有一个致力于创建和完善 React 的团队。然而，Vue 并没有得到大公司的支持。这并不是说它没有得到社区的支持或者不受欢迎。这是因为 Vue 社区没有 React 社区大。

React 在 StackOverflow 上的问题远远超过 33.1 万个。此外，在撰写本文时，它在 Github 上有超过 174，200 颗星。就 Vue 而言，在 Vue 的 StackOverflow 上有大约 83，400 个问题，在 Github 上有超过 187，800 颗星。

Vue 与 React 的缺点

和所有技术一样，Vue 和 React 都有各自的弱点。下面是每种方法的一些缺点。

Vue 的最大缺点包括:

• 双向绑定的挑战
• 移动支持面临的挑战
• 有限插件
• 有限的可扩展性
• 经验有限的程序员
• 编码中灵活性太大
• 社区的使用有一些限制

React 的最大缺点包括:

• 由于增长速度很快，环境总是在变化，程序员很难适应。
• 随着如此快速的更新和加速，好的文档很难出现。
• ReactJS 只处理应用程序的 UI 层，因此您需要使用其他工具进行其他部分的开发。
• 如果有很多模板，它们重叠，JSX 可能会混淆。

Wondering which framework is right for your project? 👀 Look no further ✅Click to Tweet

摘要

就它们各自的用例而言，React、Vue 或任何其他基于 JavaScript 的方法都非常壮观。在这种情况下，没有明显的赢家。您需要弄清楚您的用例是什么，然后将其与这些平台的功能相匹配。

React 是一个久经考验的领导者，拥有企业支持和相当大的开源团队。该库更具可伸缩性，允许您创建更复杂的企业级应用程序。因为它是一个库，React 允许它的用户有额外的选择，比如手动重新渲染。它广泛使用了函数式编程技术，正如该库对状态的处理和组件间的交互所证明的那样。

Vue 是一个日益增长的前沿发展概念。它具有更经典的语法，这使得将现有项目转移到 Vue 更容易。它拥有业内最好的文档。核心团队将更多的内置功能和合作伙伴库作为框架添加到 Vue 中。这简化了开发过程，使之更加顺利。

你计划在你的下一个项目中使用哪个——Vue 还是 React——为什么？请在下面的评论区告诉我们。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何为你的 WordPress 站点配置 W3 总缓存设置

原文：https://kinsta.com/blog/w3-total-cache/

拥有超过 100 万的活跃安装，W3 Total Cache 是 WordPress 知识库中最受欢迎的缓存和优化插件之一。不像其他 WordPress 优化插件提供一个相对简单和精简的界面，W3 Total Cache 完全控制你的 WordPress 站点的缓存配置。

W3TC 设置的粒度使其成为高级用户和开发者的理想插件，他们希望最终控制他们的 WordPress 站点。在本文中，我们将深入了解 W3 Total Cache 的设置，并给出我们推荐的配置来提升你的 WordPress 站点的性能。

如果你是 Kinsta 用户，你不需要在 W3 总缓存中配置某些设置，因为我们的托管栈已经内置了许多优化。例如，通过 NGINX 的服务器级页面缓存在所有 Kinsta 站点上默认是启用的，所以您不需要在 W3 Total Cache 中启用它。如果你在 Kinsta 托管的网站上设置 W3TC，只需特别注意下面的设置说明。如果特定设置不需要或与 Kinsta 不兼容，我们一定会通知您。

如何安装 W3 总缓存

如果你的网站上没有安装 W3 Total Cache，你可以直接在你的 WordPress 仪表盘中安装。只需在“添加插件”页面搜索“W3 总缓存”并安装即可。

Install W3 Total Cache.

还有 W3 Total Cache 的 Pro 版，可以在 BoldGrid 的网站购买。专业版附带了一些额外的功能，如 REST API 缓存、Google Maps 缓存和其他扩展。在本文中，我们将使用来自 WordPress 插件库的免费版本。

Boost the performance of your #WordPress site 🚀 and take control of advanced features with this guide to W3 Total Cache settings ⚡️Click to Tweet

W3 总缓存设置存储在哪里？

安装 W3 Total Cache 后，你会在 WordPress 管理面板的侧边栏看到一个“性能”标签。点击“性能”选项卡将显示各种子菜单，如“常规设置”、“页面缓存”、“缩小”等。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

W3 Total Cache sidebar settings.

你也可以使用 WordPress 管理工具栏中的“性能”标签来访问 W3 总缓存设置。

W3 Total Cache admin toolbar settings.

如何清除 W3 总缓存

在我们开始如何配置 W3 总缓存之前，让我们快速回顾一下如何清除缓存。如果您将鼠标悬停在管理工具栏中的“性能”选项卡上，您会看到两个清除选项。

1. 清除所有缓存—一次清除所有缓存。
2. 清除模块—清除单个缓存(例如，缩小的资产、页面缓存、对象缓存等。).

Purge W3 Total Cache.

W3 总缓存常规设置

让我们深入 W3 总缓存的“一般设置”菜单来配置一些基本设置。

页面缓存

默认情况下，对你的 WordPress 站点的每个请求都是实时呈现的。对于某些类型的网站，如电子商务商店或论坛，动态渲染是理想的。然而，对于博客、新闻网站和其他不需要动态内容的网站，添加页面缓存层可以提高性能并减少服务器负载。

Enable page caching in W3TC.

如果你的站点托管在 Kinsta 上，你就不用担心页面缓存了。我们有一个高性能的服务器级配置，自动将您网站的页面缓存到静态 HTML 文件中。如果您的主机不提供页面缓存，您可以在 W3 Total Cache 插件中启用页面缓存。

使变小

缩小你的 HTML、 CSS 和 JavaScript 资产可以通过移除不必要的空白来减少你的网站页面的整体大小。对于大多数 WordPress 网站来说，启用 W3 Total Cache 的“Minify”功能并选择“Minify 模式”的“自动”选项就可以了。

Minify HTML, CSS, and JavaScript assets in W3TC.

在某些情况下，缩小资产可能会导致 CSS 或 JavaScript 代码中断，这通常会导致前端出现明显的错误。如果你在缩小资产后注意到你的站点上有不寻常的问题，我们建议与开发者一起工作来识别引起问题的资产。之后，您可以在手动模式下使用“缩小”功能，这允许您绕过特定 CSS 和 JavaScript 文件的缩小。

操作码缓存

WordPress 是一个动态 CMS，这意味着 PHP 工作人员在后台不断执行代码。操作码缓存通过存储编译后的 PHP 代码来帮助加速你的站点，这使得需要相同代码的后续请求更快。

Enable opcode cache in W3TC.

如果您的站点托管在 Kinsta 上，您不必担心在 W3 Total Cache 中启用操作码缓存层。我们在所有实时环境中启用 OPcache，一种操作码缓存。OPcache 在 staging environments 上被禁用，以确保编译的 PHP 代码不会被缓存，也不会干扰站点开发和调试。

如果您的主机不提供操作码缓存，我们建议在 W3 总缓存中启用它。请记住，操作码缓存特性仅在 W3TC 的 Pro 版本中可用。

数据库缓存

W3TC 的数据库存储了 MySQL 数据库查询的结果。虽然这个特性听起来很有用，但是我们建议禁用它，而使用对象缓存。

Database caching in W3 Total Cache.

我们发现，在某些情况下，数据库缓存特性可能会导致高 CPU 使用率。这意味着通过存储数据库查询结果节省的 CPU 资源最终可能会被该特性所需的 CPU 资源的增加所抵消。

对象缓存

在 WordPress 的上下文中，对象缓存存储已完成的数据库查询的结果。WordPress 实际上有一个内置的对象缓存，但是它只保留单次页面加载的数据。这允许更高效的页面呈现，因为它确保页面加载不需要浪费 CPU 资源来运行相同的数据库查询。

虽然 WordPress 的默认对象缓存无疑对性能有益，但跨页面加载保留数据的对象缓存甚至更好！W3TC 的“对象缓存”特性在你的/wp-content目录中添加了一个定制的缓存脚本，并改变了 WordPress 的对象缓存的行为以持久地保留数据(跨多个页面加载)。

我们建议在你的 WordPress 站点上启用 W3TC 的对象缓存功能，如果你的站点没有托管在 Kinsta 上，可以加速利用数据库查询的请求。

W3 Total Cache object cache.

如果您的站点托管在 Kinsta 上，我们会提供一个由我们的 Redis 插件支持的高性能对象缓存层。Redis 是一种开源的内存数据结构存储，通常用于数据库和消息代理应用程序。

由于 Redis 在 RAM 中缓存数据，它允许 WordPress 从一个比传统对象缓存配置快得多的持久对象缓存中访问缓存的数据。

浏览器缓存

浏览器缓存通过在本地存储静态资产，如 CSS、JavaScript、图像和字体，可以大大提高你的 WordPress 站点的速度。浏览器缓存使用过期时间来确定缓存资产的时间。在现代网络上，大多数开发者为静态资产指定 1 年的有效期。

Enable browser caching in W3 Total Cache.

对于 Kinsta 上托管的站点，我们对静态文件强制实施 1 年的缓存期。这可以通过检查 Kinsta 上的静态文件的cache-control头来验证。如果您的 web 主机没有对浏览器缓存实施“未来过期时间”,您可以在 W3 总缓存中启用“浏览器缓存”功能并配置过期时间。

内容交付网络

如果您使用 CDN 或内容交付网络将静态文件卸载到世界各地的数据中心，您可以将 W3 Total Cache 配置为用您的 CDN 主机名重写“主题文件、媒体库附件、CSS、JS”等的 URL。

CDN settings in W3 Total Cache.

如果您的网站托管在 Kinsta 上，我们建议使用由 Cloudflare 支持的高性能内容交付网络 Kinsta CDN 。当 Kinsta CDN 启用时，静态文件 URL 将自动重写，以便从 Kinsta CDN 提供服务。

您还可以访问其他内置功能，包括代码缩小功能，它允许 Kinsta 客户通过点击一个按钮，直接在 MyKinsta 仪表板中启用自动 CSS 和 JavaScript 缩小。

如果你喜欢使用另一个 CDN 提供商，或者如果你的站点没有托管在 Kinsta 上，你可以在 W3 Total Cache 中启用“CDN”特性并添加你的 CDN URL。

反向代理

一个反向代理位于你的 web 服务器和 WordPress 之间，可以用来对输入的请求执行各种基于逻辑的操作。W3TC 支持 Varnish，这是一个流行的“HTTP 加速器”,用于缓存和提供数据，目的是减少后端负载。

为了使用 Varnish，必须首先由您的主机安装 Varnish 包。如果你是 Kinsta 的客户，不要启用反向代理选项，因为我们的基础设施不是为 Varnish 设计的。

用户体验

W3TC 的“用户体验”优化让你可以启用延迟加载，禁用表情符号，禁用wp-embed.js脚本。我们建议在你的 WordPress 站点上启用延迟加载来加速页面加载。如果你还没有使用浏览器本地或者基于插件的延迟加载，我们推荐使用 W3 Total Cache 进行延迟加载。

User experience settings in W3TC.

在当今世界，大多数操作系统都内置了对表情符号的支持。因此，如果你不是一个重度表情符号用户，你可能需要禁用 WordPress 自带的表情符号脚本。使用 W3TC 移除wp-emoji-release.min.js将帮助您减少 HTTP 请求，并从页面负载中移除大约 10KB。

同样，如果你不嵌入 WordPress 的帖子，你可以用 W3 总缓存禁用wp-embed.js。禁用此脚本不会影响嵌入 YouTube 视频、SoundCloud 流等的 oEmbed 功能。

多方面的

W3 Total Cache 有一些其他的设置，您也可以进行配置。如果你想在 WordPress 中显示一个Google Page Speeddashboard widget，你可以输入你的 Page Speed API 键。在你的 WordPress 站点的每个页面的菜单栏中，也有一个显示页面速度等级的选项。

Miscellaneous settings in W3 Total Cache.

对于其他设置，如“ NGINX 服务器配置文件路径”、“启用文件锁定”、“优化磁盘增强页面和缩小 NFS 的磁盘缓存”，我们建议保留其默认设置，除非您有特殊原因要更改它们。

调试

如果您正在解决网站上的问题，W3 Total Cache 有一个方便的“调试”菜单，可以让您禁用特定的缓存层和优化设置。例如，如果您注意到站点上的视觉故障，您可以启用“Minify”选项的调试模式，这将在页面的源代码中插入 HTML 注释来帮助您排除故障。

Debug mode in W3 Total Cache.

由于调试模式特性会给服务器资源带来额外的负载，我们建议仅在阶段环境或低流量时段使用它。此外，在完成故障诊断后，一定要禁用调试模式！

导入/导出设置

完成设置配置后，您可以使用 W3TC 的“导入/导出”功能来创建配置的备份。W3 Total Cache 有很多设置，因此能够导出完整备份对您来说非常安心。此外，它允许您轻松地跨多个站点复制您的定制 W3TC 配置，而不必手动配置任何东西。

Import and export W3TC settings.

W3 总缓存设置—页面缓存

让我们深入 W3 总缓存的“页面缓存”设置。请记住，如果你的网站是在 Kinsta 上托管的，你不需要担心页面缓存——所以请随意跳过这一节。

• 缓存首页–对于大多数网站来说，首页通常是流量最大的页面。因此，我们建议启用此设置。
• 缓存提要——WordPress 生成各种 RSS 提要，允许外部应用程序和服务，如 Feedburner，显示你网站的内容。虽然 RSS 现在不像以前那么流行了，我们仍然建议启用这个设置。
• 缓存 SSL (HTTPS 请求)–如果您的 web 服务器不对所有传入请求强制 HTTPS ，启用此设置可能会对性能产生积极影响。如果您已经在 web 服务器级别强制实施 HTTPS，就没有必要启用它。
• 使用查询字符串变量缓存 URIs–查询字符串是添加在 URL 末尾的参数(例如/？版本=123)。查询字符串通常用于请求和显示 WordPress 数据库中的特定数据。一般来说，查询字符串的目的是请求页面的唯一版本，所以我们建议保持禁用，除非您有特定的查询字符串想要缓存。
• 缓存 404(未找到)页面–默认情况下，W3TC 保持此选项禁用。如果您使用“磁盘增强”页面缓存方法，这可能是由于缓存行为造成的。选择该选项后， 404 页面返回一个 200 响应代码。理想情况下，404 页面应该返回 404 响应代码，所以我们建议用您的缓存配置测试这个设置，看看它是否兼容。
• 不缓存登录用户的页面–我们建议启用此选项。登录的用户通常在更新页面。启用缓存后，用户需要不断清除缓存才能看到页面更新。
• 不缓存某些用户角色的页面—这个选项允许你绕过缓存某些 WordPress 用户角色。如果“不缓存登录用户的页面”选项已经启用，此选项对缓存行为没有影响。

别名

W3 Total Cache 的“别名”功能允许你缓存不同域中相同的 WordPres 内容。我们不建议启用此功能。如果你的 WordPress 站点可以通过不同的域名访问(例如 domain.com 和 www.domain.com)，最好设置一个 301 重定向规则将请求转发到你的主域名以避免来自谷歌和其他搜索引擎的重复内容惩罚。

缓存预加载

“缓存预加载”功能会搜索您的站点地图，并请求您站点的页面预加载页面缓存。对于大多数站点，我们建议禁用缓存预加载，因为这会导致服务器资源峰值，抵消潜在的性能优势。

如果您确实想启用缓存预加载，W3TC 允许您指定站点地图 URL、更新间隔和每个间隔的页面数。确保不要将“更新间隔”和“内部页数”设置得太高，以减少 CPU 峰值的机会。

清除策略

W3TC 的“清除策略”允许您指定发布或编辑帖子后要自动清除的页面和提要。对于大多数网站来说，默认设置(首页、文章页面和博客订阅源)应该足够了。如果要向清除策略添加额外的页面，可配置多种选项。

REST API

包含的 REST API 让你可以查询 JSON 格式的数据。REST API 被各种插件使用，并且对于无头 WordPress 设置是至关重要的。根据 REST API 的具体用例，缓存查询结果可能是个好主意。REST API 缓存属于“如果你需要，你就会知道”类别，所以如果你不确定是否要启用 REST API 缓存，我们建议让它保持“不缓存”。

先进的

在 W3TC 的“高级”页面缓存选项中，您可以自定义各种设置，包括“接受的查询字符串”、“拒绝的用户代理”、粒度缓存旁路设置等等。例如，如果你需要配置你的 W3 总缓存来从不缓存某个类别或标签下的文章，你可以在“高级”选项中这样做。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

由于这些设置可能因具体站点而异，因此我们无法提供“推荐设置”。也就是说，如果你想定制网站页面缓存行为的一个非常特殊的方面，一定要看看高级选项。

W3 总缓存设置—缩小

接下来，让我们看看 W3 总缓存的“缩小”设置。

• 重写 URL 结构—该设置影响被缩小资产的 URL 结构。我们建议保持启用，这样你的网址看起来“漂亮”。
• 禁用登录用户的缩小功能—如果您正在进行一些故障排除或调试，禁用登录用户的缩小功能可能会有所帮助。否则，我们建议禁用此选项。

HTML 和 XML

在“HTML & XML”部分，您可以配置 HTML 缩小设置。

• 内联 CSS 缩小–我们建议启用此选项来移除内联 CSS 中的空白。
• 内联 JS 缩小–我们建议启用此选项来删除内联 JavaScript 中的空白。在某些情况下，JS 缩小可能会导致代码错误。如果启用此选项会破坏您的站点功能，请禁用它。
• 不要缩小订阅源–我们建议禁用此选项。提要只被 RSS 阅读器和其他类似的服务使用，所以缩小提要是没有必要的。
• 换行符移除–默认情况下，此选项是禁用的，我们不建议启用它来确保您的站点正确呈现。

射流研究…

在“JS”部分，您可以配置 JavaScript 缩小设置。

• 区域操作-该选项允许您选择小型 JavaScript 的“嵌入类型”。对于</head>之前和<body>之后的 JS 文件，可以在“阻塞”、“非阻塞”、“使用 async 的非阻塞”和“使用 defer 的非阻塞”之间选择。虽然非阻塞加载方法通常会带来更好的性能，但它们并不总是 100%兼容所有的 JavaScript 代码。此外，“异步”和“延迟”有非常不同的用例。因此，我们建议使用默认的“阻塞”方法，除非您知道非阻塞 JavaScript 的古怪之处。
• 仅缩小或合并—您可以在两种 JavaScript 优化模式之间进行选择。当选择“缩小”时，您的 JS 文件将被合并和缩小。如果选择“仅合并”，则不会缩小合并后的 JS 文件。如果您遇到与缩小相关的问题，并且不想通过调试来找出是哪个脚本导致了问题，请选择“仅合并”选项可能会修复错误。
• HTTP/2 推送-如果您的服务器支持 HTTP/2 服务器推送，启用此选项可以帮助您减少页面加载时间。HTTP/2 服务器推送在访问者请求之前将文件推送给他们。我们建议在生产环境中启用该选项之前进行充分的测试，因为服务器推送经常被误用。服务器推送对于较大的 JavaScript 文件来说并不理想，您需要确保其好处大于直接从访问者的浏览器缓存中加载 JS 文件。

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

在“CSS”部分，您可以配置 CSS 缩小设置。

• 仅合并–与 JavaScript 文件不同，CSS 通常不会遇到与缩小相关的问题。因此，我们不建议启用“仅合并”。
• 删除保留的注释–该设置从 CSS 文件中删除注释。我们建议启用此选项以尽可能减小文件大小。
• 换行符移除–该设置从 CSS 文件中移除换行符。我们建议也启用该选项。如果您在启用“换行符移除”后发现任何显示问题，请将其禁用。

先进的

“高级”部分包含一些用于自定义缩小行为的附加设置。

• 更新外部文件间隔–W3TC 允许您指定 CSS 和 JS 文件更新之间的时间间隔。默认设置为 86400 秒，您的资产将每 24 小时下载并缩小一次。如果你的站点不经常改变，可以随意设置一个更长的时间段。
• 垃圾收集间隔–此时间段设置指定删除过期缓存数据的频率。默认设置是 24 小时。如果您的站点的存储空间不足，我们建议降低“垃圾收集间隔”。

“高级”部分的其余部分包括允许您指定永远不应缩小的资产文件的输入字段。还有一个“拒绝的用户代理”字段，允许向某些用户代理提供非精简文件。最后，您可以在 W3 Total Cache 的缩小过程中添加外部资产文件。

W3 总缓存设置—对象缓存

接下来是 W3TC 的“对象缓存”设置。对于大多数网站来说，默认设置就可以了，但是不管怎样，让我们检查一下。

• 缓存对象的默认生存期—未更改的缓存项目的到期时间。时间段越长，对象缓存越大。如果您担心服务器的存储容量，我们建议保持默认值或降低它。
• 垃圾收集间隔–该设置指定过期缓存数据被丢弃的频率。对于大多数站点来说，默认值 3，600 秒(1 小时)应该没问题。
• 全局组—此设置允许您在单个多站点网络中的站点之间配置共享缓存组。除非有特殊原因需要更改，否则我们建议您保留此设置的默认状态。
• 非持久组–此设置允许您选择从不缓存的对象组。同样，我们建议坚持使用默认配置。
• 为 wp-admin 请求启用缓存-默认情况下，此选项是禁用的，我们不建议启用它，因为它可能会导致副作用。此外，大多数 WordPress 网站的访问者从不与 wp-admin 仪表板交互。

W3 总缓存设置—浏览器缓存

大多数 WordPress 主机，包括 Kinsta，已经在 web 服务器级别实现了适当的浏览器缓存头。如果您的主机没有，或者如果您想进一步定制浏览器缓存行为，您可以使用 W3 Total Cache 来实现。

在“浏览器缓存”设置中，“常规”、“CSS & JS”、“HTML & XML”和“媒体&其他文件”部分的默认设置对于大多数 WordPress 站点来说已经足够了。由于这个页面上有如此多的设置，我们建议在对浏览器缓存行为进行任何更改之前咨询开发人员。也就是说，下面是一些关于浏览器缓存需要注意的关键设置。

• Expires Headers Lifetime—配置一个长的“ expires headers lifetime”对于高效的浏览器缓存非常重要。在 Kinsta，我们对 CSS、JS、图像和字体等静态资产实施 1 年的生命周期。如果您使用 W3TC 来配置浏览器缓存，请确保将该值设置为31536000 (1 年)。
• 缓存控制策略—为了确保您的静态资产可被浏览器缓存，请确保将“缓存控制策略”设置为“公共，max_age=EXPIRES SECONDS”。
• 启用 HTTP (gzip)压缩-gzip 压缩在将 HTML 页面和资源发送给访问者之前，会显著减小它们的文件大小，因此，如果您的主机服务器配置支持 GZIP，请确保启用此选项。如果您的站点托管在 Kinsta 上，那么不需要在 W3TC 中启用 GZIP 压缩，因为它已经作为我们默认配置的一部分启用了。
• 从静态资源中删除查询字符串—查询字符串是添加到 URL 路径末尾的附加字符串，用于指定请求参数或强制 web 服务器提供新的资源。查询字符串以一个?开始，大多数 web 服务器被配置为对于带有查询字符串的请求绕过缓存。从页面请求中删除查询字符串有助于减少服务器负载，因为这些请求使用 PHP 来呈现页面。我们不建议从 W3 Total Cache 的静态资源中删除查询字符串，因为它们有助于确保向访问者提供最新版本的 CSS 和 JS 文件。

“浏览器缓存”设置页面还包含各种与安全标题相关的设置，如内容安全策略(CSP) 和 X-XSS 保护。我们始终建议与合格的开发人员一起检查这些设置，因为不正确的配置会直接影响您网站的用户体验。例如，在没有正确的 SSL 证书和 HTTPS 配置的情况下启用 HSTS 报头可能会导致您的网站无法访问。

W3 总缓存设置-用户代理组

如果您需要根据用户的设备类型重定向流量，W3 Total Cache 的“用户代理组”功能非常强大。例如，如果用户通过移动电话访问您的站点，您可以将您的站点配置为使用不同的主题进行呈现。同样，如果您的移动站点位于一个唯一的子域上，您可以将用户重定向到一个完全不同的站点。

与宕机和 WordPress 问题做斗争？Kinsta 是一款考虑到性能和安全性的托管解决方案！查看我们的计划

在响应式网页设计的时代，我们没有看到太多这种特殊功能的用例。如今，最好的做法是从一开始就让你的网站响应迅速，而不是依赖于多个主题或一个仅限移动的子域。

W3 总缓存设置-引用者组

一个 HTTP referrer 是一个可选的 HTTP 头，它提供了关于请求来源的信息。例如，如果一个访问者从谷歌搜索列表中点击你的网站，HTTP referrer 将会是google.com。

在 W3 Total Cache 中，您可以基于带有“引用组”的请求的 HTTP 引用来定义自定义缓存行为。例如，您可以创建一个由搜索引擎组成的 referrer 组，并仅为来自这些域的请求自定义缓存行为。

与上面提到的“用户代理组”类似，您也可以使用“推荐组”功能将请求重定向到不同的域。大多数 WordPress 站点不需要设置推荐人群组，所以我们不建议配置任何群组。

W3 总缓存设置— Cookie 组

W3 Total Cache 支持的最新缓存组是“Cookie 组”。这个特性允许您基于请求的cookie创建独特的缓存桶和行为。与“用户代理组”和“推荐组”类似，大多数网站不需要设置自定义的基于 cookie 的缓存配置。如果您的站点需要基于 cookie 的缓存，我们建议您与开发人员合作，对其进行正确配置。

W3 总缓存设置— CDN

现在，让我们继续 W3 Total Cache 的 CDN 设置。

• 主机附件–启用此功能，从您的 CDN 提供您的 WordPress 媒体库中的资产。
• Host WP-includes/Files—启用此选项以提供来自 CDN 的wp-includes文件夹中的文件。
• 托管主题文件–启用此功能，从您的 CDN 提供您的主题文件。
• 托管缩小的 CSS 和 JS 文件–启用此功能，从您的 CDN 提供 W3TC 的缩小的 CSS 和 JS 文件。
• 托管自定义文件–如果您的媒体库或主题文件夹中没有文件，您可以在 W3TC 中添加文件路径，以便从您的 CDN 提供这些文件。
• 添加规范标题—一个rel=”canonical”标签帮助搜索引擎识别原始来源或 URL。由于 cdn 通常使用不同的域，添加一个规范的标签可以通知搜索引擎原始资产的位置。也就是说，保持禁用这个设置是没问题的，因为现代搜索引擎足够智能来识别 cdn，而不会影响你网站的 SEO 排名。

先进的

• 仅手动清除 CDN–我们建议禁用此选项，让 W3TC 自动处理缓存清除。
• 禁用 SSL 页面上的 CDN-保持此设置禁用。如果你使用的是 CDN，最好在 HTTP 和 HTTPS 页面上都激活它。
• 在管理页面上使用媒体库的 CDN 链接—我们不建议启用此选项，因为它会重写您的媒体库中的 URL。
• 添加 CORS 标题–保持启用此设置，以允许您的 CDN 资产显示在其他域上。
• 禁用以下角色的 CDN-此选项允许您禁用某些 WordPress 用户角色的 CDN。在大多数情况下，最好禁用该选项。
• WP-包括要上传的文件类型—该字段指定将从您的 CDN 提供的wp-includes中的文件格式。对于大多数网站来说，默认的文件格式列表应该没问题。如果您的wp-includes文件夹中有自定义文件，可以根据需要随意添加其他格式。
• 要上传的主题文件类型–这个字段指定了你的 WordPress 主题文件夹中的文件格式，这些文件将由你的 CDN 提供。默认列表包含所有流行的资源、图像和字体格式。如果需要，可以随意添加其他格式。
• 自定义文件列表–如果您启用了“主机自定义文件”,您可以在此字段中添加文件列表，以便从您的 CDN 提供服务。
• 拒绝的用户代理—该字段允许您指定不会从您的 CDN 获得资产的用户代理。我们建议将此字段留空，以确保您的 CDN 得到正确利用。
• 拒绝的文件–此字段允许您指定不应由您的 CDN 提供的文件。如果您正在使用的服务要求从根域提供资源，您可以将文件路径添加到“拒绝的文件”栏。

W3 总缓存设置—用户体验

接下来，让我们定制 W3 Total Cache 中的“用户体验”或延迟加载设置。

• 处理 HTML 图像标签–启用此选项以确保图像被延迟加载。
• 处理背景图像–如果你使用“背景”来显示 CSS 中的图像，启用这个选项将允许这些图像被延迟加载。
• 排除单词—在该字段中，您可以指定文本以绕过延迟加载。例如，如果您将no-lazy-load添加到该字段，则使用<img src="image.jpg">显示的图像将不会被延迟加载。
• 脚本嵌入方法—该设置允许您自定义惰性加载脚本的加载方法。默认的async方法是大多数站点的最佳选择。如果你的网站只包含一个登陆页面，那么inline方法可以用来减少加载页面的 HTTP 请求的数量。

W3 总缓存的可用扩展

W3 Total Cache 提供了各种扩展来集成第三方服务。W3TC 目前有以下服务的扩展。

• AMP
• Cloudflare
• 谷歌 Feedburner
• 片段缓存
• 创世纪框架
• 新遗迹
• 群集化
• Yoast SEO
• WPML

如果您正在您的站点上使用这些服务中的任何一个，我们建议您设置相关的扩展以确保与 W3 Total Cache 的适当兼容性。在本节中，我们将了解一下适用于 W3 Total Cache 的 Cloudflare 扩展。

如何使用 Cloudflare 扩展设置 W3 总缓存

要将 Cloudflare 与 W3 Total Cache 集成，您将需要来自 Cloudflare 仪表盘的两条信息——帐户电子邮件和 API 密钥。帐户电子邮件是您用于登录 Cloudflare 的电子邮件地址。让我们来看看如何设置 Cloudflare API 密钥。

在 Cloudflare 控制面板中，单击“Overview”选项卡。接下来，向下滚动并点击右边栏中的获取您的 API 令牌。

View your Cloudflare Global API Key.

向下滚动，并单击“全局 API 密钥”旁边的视图以获取您的 Cloudflare API 密钥。注意不要在 W3 总缓存之外的任何地方共享此 API 密钥，因为它可用于控制您的 Cloudflare 帐户。

View your Cloudflare Global API Key.

接下来，在 W3 Total Cache 的“扩展”页面中激活 Cloudflare 扩展，点击“设置”。在“凭证”部分，点击授权按钮。

Authorize Cloudflare in W3 Total Cache.

在随后的弹出窗口中，输入您的 Cloudflare 帐户电子邮件和 API 密钥。如果您收到错误消息，请仔细检查以确保您的电子邮件地址和 API 密钥是正确的。授权凭据后，您应该会在页面上看到其他 Cloudflare 设置。

Cloudflare settings in W3 Total Cache.

让我们看看 W3 Total Cache 中的 Cloudflare 设置。

• Widget Statistics Interval—这指定了 W3TC 的 Cloudflare widget 所覆盖的时间段。默认设置是 30 分钟。如果你想看更长的时间，请随意增加。
• 缓存时间–这指定了缓存来自 Cloudflare 的小组件数据的时间量。如果您不打算经常使用该小部件，我们建议增加该数量，以减少您的站点对 Cloudflare 的请求数量。
• 页面缓存-如果你已经为你的 WordPress 站点配置了 Cloudflare 来缓存 HTML 页面，启用这个选项在 post 修改和更新后自动清除 Cloudflare 缓存。

Cloudflare 缓存

此部分允许您自定义 Cloudflare 的缓存设置。

• 开发模式—除非您需要将 Cloudflare 置于开发模式，否则请禁用此选项。当 Cloudflare 处于开发模式时，边缘缓存、缩小和映像优化将被禁用三个小时。这可以让你立即看到 CSS 和 JS 文件的更新，对于故障排除非常有用。
• 缓存级别–对于大多数网站，我们建议使用“标准”缓存级别，它在每次查询字符串改变时提供不同的资源。如果你 100%确定你的 WordPress 站点没有使用查询字符串来提供动态内容，你也可以使用“忽略查询字符串”设置。
• 浏览器缓存 TTL—我们建议将 Cloudflare 的浏览器缓存 TTL 设置为 31536000 秒，等于 1 年。
• 挑战 TTL—cloud flare 提供各种与安全相关的服务，访客挑战就是其中之一。如果 Cloudflare 检测到恶意用户或奇怪的行为，它会以验证码的形式提供一条挑战消息。“质询 TTL”设置指定用户在完成质询后可以访问您的站点多长时间。默认设置为 3600 秒，受到挑战的访问者将能够在下一次挑战前使用您的网站 1 小时。
• 边缘缓存 TTL–该设置控制资产将在 Cloudflare 的边缘服务器上缓存多长时间。我们建议将其设置为最大值 31536000 秒，即 1 年。

Cloudflare 内容处理

让我们深入了解 W3 Total Cache 中的 Cloudflare 内容处理设置。

• Rocket Loader—cloud flare 的 Rocket Loader 加快了 WordPress 站点的 JavaScript 加载速度。如果你的网站有很多 JS，我们建议启用 Rocket Loader。
• 缩小 JS/CSS/HTML–如果您已经在 W3 Total Cache 中启用了 HTML、CSS 和 JavaScript 的缩小，请随意禁用 Cloudflare 扩展设置中的这些选项，因为没有必要缩小已经缩小的资产。
• 服务器端排除(SSE)–此选项允许您对可疑访问者隐藏敏感信息(被 Cloudflare 视为可疑)。服务器端排除对于隐藏网站上的电子邮件地址、电话号码和其他个人信息非常有用。要使用 SSE，启用它并在 HTML 代码或 PHP 主题模板的<!--sse--><!--/sse-->标签中包装敏感信息。
• 电子邮件混淆–启用此选项后，Cloudflare 将使用 JavaScript 自动混淆您的 WordPress 站点上的电子邮件地址。虽然模糊处理不会完全消除垃圾邮件，但我们建议启用此选项，因为它确实可以阻止基本的僵尸程序从您的站点抓取电子邮件地址。

云耀斑图像处理

让我们检查一下 Cloudflare 的图像处理设置。

• 热链接保护-启用热链接保护将阻止其他网站嵌入您的图片。如果您由于未授权的外部嵌入而遇到带宽限制，启用“热链接保护”可以帮助您减少带宽使用。
• Mirage(仅限专业版)–Mirage 优化了向低带宽设备和网络的映像交付。此功能仅适用于 Cloudflare Pro plan 及更高版本。
• 波兰语(仅限专业版)–波兰语优化您网站的图像，并且可以配置为向支持的浏览器提供 WEBP 图像。此功能仅适用于 Cloudflare Pro plan 及更高版本。

云闪防护

Cloudflare 的主要功能是一个复杂的防火墙，可以帮助您抵御 DDoS 攻击和恶意行为。让我们检查一下 Cloudflare 的安全设置。

• 安全级别—此设置控制 Cloudflare 的防火墙和安全规则的敏感度。我们建议将大多数站点的“安全级别”设置为“中”。
• 浏览器完整性检查–该功能可发现不良行为和可疑的用户代理。如果它检测到潜在的恶意用户或垃圾邮件发送者，Cloudflare 将自动提供质询。我们建议启用此功能。
• 始终在线—如果你的站点出现故障，这个选项将为你的站点提供静态 HTML 页面。如果您已经配置了 Cloudflare 来缓存 HTML ，我们建议您启用它。
• Web 应用防火墙—cloud flare 的 WAF，或 Web 应用防火墙，将扫描传入的流量，并过滤掉到达您站点的“非法流量”。我们建议启用此功能。
• 高级 DDoS 保护—默认情况下，此功能处于启用状态，只要 Cloudflare 的代理处于活动状态，就无法禁用。DDoS 保护有助于保护您的网站免受“分布式拒绝服务”攻击。
• 最大上传–设置上传到您网站的最大允许文件大小。你要确保这个设置等于或大于你在 WordPress 中的上传文件大小设置。

Cloudflare SSL

最后，您需要确保您的 Cloudflare SSL 设置配置正确。让我们在这一部分回顾一下正确的配置。

• SSL–如果您的网站托管在 Kinsta 上，我们建议使用“完整”或“完整(严格)”SSL 选项。“灵活”选项与我们的基础架构不兼容。“完全严格”需要来自有效认证机构的 SSL，而“完全”选项也支持自签名 SSL。“灵活”选项不需要原始服务器上的 SSL 证书，我们不推荐这个选项，因为它是最不安全的。
• 仅 TLS 1.2-TLS，或传输层安全性，是一种通过网络传输数据的安全协议。一些 PCI 兼容标准要求放弃对 TLS 1.1 及以下版本的支持。如果这是您的站点的要求，您可以在 Cloudflare 中启用“仅限 TLS 1.2”设置，将最低 TLS 版本设置为 1.2。

建议阅读:如何为 WordPress 设置 Cloudflare APO。

W3 总缓存 WooCommerce 设置

WooCommerce 是 WordPress 网站最受欢迎的电子商务平台。如果你的 WooCommerce 商店使用 W3 Total Cache，你需要确保你的配置是正确的，以避免缓存客户信息。

绕过 WooCommerce Cookies

要绕过有 WooCommerce 专用 cookie 的页面的页面缓存，请转到 W3TC 的“页面缓存”设置，向下滚动到“拒绝的 cookie”，并添加下面的四项。

• woocommerce_items_in_cart
• woocommerce _ 购物车 _ 哈希
• wp_woocommerce_session_
• 已登录

Bypass WooCommerce cookies in W3 Total Cache.

为了安全起见，我们还建议绕过 WooCommerce 特有的 URL，如购物车页面、结帐页面和帐户页面。要绕过缓存这些页面，请转到 W3TC 的“页面缓存”设置，并将 URL 添加到“从不缓存以下页面”部分。

Bypass WooCommerce pages from W3 Total Cache.

如何重置 W3 总缓存中的所有设置

在某些情况下，您可能需要重新开始 W3TC 配置。以下是如何将 W3 总缓存恢复到默认设置。进入 W3TC 的“通用设置”菜单，向下滚动到“导入/导出设置”部分，点击恢复默认设置。

Reset W3 Total Cache to default settings.

With 1 million+ active installations, W3 Total Cache is ✨popular✨ for a reason. Learn how to set it up & optimize your settings right here 👇Click to Tweet

摘要

如你所见，W3 Total Cache 插件塞满了特性和设置。从页面缓存到资产缩减，再到 Cloudflare 集成，W3TC 拥有提升 WordPress 站点性能所需的一切！

在本文中，我们介绍了为 W3TC 推荐的配置插件。你有喜欢的 WordPress 优化插件吗？请在下面的评论中告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

跟随 Marcel 完成他史诗般的 465 英里。徒步跋涉到世界夏令营欧洲

原文：https://kinsta.com/blog/walk-to-wordcamp-europe/

5 月 19 日，Marcel Bootsman 将开始他漫长的 465 英里旅程。从他的家乡 Berkel en Rodenrijs 步行(748 公里)到柏林的世界夏令营。没错，他正在穿越德国。更好的是，他把所有收益都捐给了 DonateWC。

我们喜欢人们思考，或者我们应该说是迈步👟，框外。作为一家自助公司，创新和创造力不仅仅是美好的，它们是必需品。当我们看到这个领域的其他人想出这样的巧妙方法来为 WordPress 社区做贡献时，我们必须成为其中的一员。

看看你如何能帮助和跟随 Marcel，这将是有史以来最史诗般的 WordCamp 冒险！

谁是马塞尔·布茨曼？

2009 年，马塞尔·布茨曼离开了企业界，创办了自己的公司 Nostromo 。Marcel 做从 WordPress 开发和维护(主题、插件)，到建立响应性电子商务网站(WooCommerce)，甚至为营销机构提供咨询。他与妻子 Beatrijs、儿子 Noam、女儿 Mila 和狗 Grover 住在鹿特丹附近的 Berkel en Rodenrijs 村。

I no longer wanted to use my creativity and knowledge in my spare time alone, I wanted to help clients solve their challenges and problems.Marcel BootsmanFounder, Nostromo

Marcel 不仅使用 WordPress 谋生，而且他在 WordPress 社区非常活跃，特别是荷兰/荷兰。他是 WordPress NL 论坛的版主，NL 的翻译编辑，这些年来组织了各种各样的 WordPress 和 Meetups。 马塞尔·布茨曼正在步行🚶🏼‍♂️ 465 英里。(748 公里)到 WordCamp 欧洲！🇩🇪继续他冒险。 点击发布推文
事实上，马塞尔是 WordCamp Rotterdam 2019 的组织者，金斯塔团队有幸见到了马塞尔本人。

Kinsta 团队今天正在享受鹿特丹世界夏令营！😎

如果你要参加，一定要来我们的展位，打个招呼，拿一本免费的“加速 WordPress”书籍。👍# WC RTM@ WC 鹿特丹pic.twitter.com/yt6WV3J4zP

-金沙萨(@金沙萨)2019 年 4 月 12 日

什么是 Web 应用架构？分解一个网络应用

原文：https://kinsta.com/blog/web-application-architecture/

世界已经转向互联网，web 应用程序已经成为新的工作场所和商业商店。为了适应现代 web 应用程序的各种用途，每个应用程序都需要设计成具有高性能和可定制性。

Web 应用程序架构解决了这个问题。
想了解更多关于 web 应用架构的知识？你来对地方了✅ 点击发送推文
Web 应用程序架构定义了基于 web 的应用程序的各个组件是如何构成的。这种架构高度特定于 web 应用程序的性质和目的。为您的 web 应用程序选择错误的架构会对您的业务造成严重破坏。

在本指南中，我们将分解 web 应用程序架构的概念，并了解它如何影响您的应用程序的最终用户体验。最后，我们还将看看您可以实现的一些最佳实践，以充分利用您的 web 应用程序。

什么是 Web 应用架构？

为了开始讨论，让我们从 web 应用程序架构的定义开始。

简而言之，web 应用程序架构是您的 web 应用程序的各种组件如何相互交互的概述。

它可以简单到定义客户机和服务器之间的关系。它也可以像定义一群集装箱后端服务器、负载平衡器、API 网关和面向用户的单页前端之间的相互关系一样复杂。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

也就是说，选择编写代码的编程语言并不重要。

您如何设计您的 web 应用程序在可用性和成本优化方面都起着关键作用。下面是一个示例 web 应用程序架构的纸面外观:

Architecture diagram for a recommendation application. (Image source: Wikipedia)

为什么 Web 应用程序架构很重要？

毫无疑问，Web 应用程序架构是 web 应用程序最重要的部分之一。如果你选择用一个特定的架构来开发你的 web 应用程序，那么在维护和发展你的应用程序时，你一定会得到很多好处。

然而，选择正确的架构会进一步扩大这些优势。

以下是您应该认真考虑采用 web 应用程序架构的一些主要原因。

轻松适应业务需求

您的应用程序是您业务的关键门户，业务需求会随着市场的变化而变化。为了跟上这种变化，你需要你的应用足够灵活，以适应你不断变化的业务需求。如果你在开发应用时没有考虑到内置的灵活性，你必然会花费越来越多的时间和精力来对你的应用进行细微的调整。

正确的 web 应用程序架构已经考虑到了您的业务在未来可能需要的一些变化。例如，如果您知道您正在构建一个电子商务应用程序，该应用程序有一天会扩展并为大量客户提供广泛的服务，那么选择微服务架构而不是单片架构将为您提供更多的灵活性。

另一方面，如果你正在为你的公司构建一个只有一两个固定需求的内部应用，你可以选择一个更简单的整体来加速开发并保持你的代码库干净。

有组织的发展

正如我们前面提到的，正确的 web 应用程序架构为您提供了更方便的开发路线图。体系结构在您的系统中提供了足够的模块化，可以根据需要隔离组件，并且您可以根据需要为每个模块和组件自由选择正确的项目结构。

如果你在没有架构的情况下投入应用程序开发，你可能会浪费时间和金钱来重新组织你的组件，并制定新的规则来帮助促进你的团队成员之间的协作。

更好的代码库管理

除了编写应用程序的代码，你还将花费大量的时间来管理它。组织您的项目文件、将您的应用程序分解成模块以及设置自定义管道只是需要主动维护以确保顺利开发的任务中的一部分。

正确的 web 应用程序架构使您可以轻松地进行更改。您可以实现特定于组件的最佳实践，将应用程序的痛点彼此分离，并保持每个功能的独立和松散耦合。不是说这些事情没有架构就做不了；只是正确的架构使所有这一切变得更加简单。

遵循预定义的体系结构还可以让您更快地开发应用程序。正确的架构结合合理的版本控制策略可以让你的开发人员彼此并行工作，更快地构建特性。

web 应用程序架构也能让你的应用程序经得起未来的考验。一旦你围绕如何组织你的应用程序的组件定义了一个可靠的策略，你就可以轻松地将这些组件一个接一个地移植到新的技术上，而不必重做你的整个应用程序。

增强的安全性

大多数 web 应用程序架构在构建组件时都会考虑安全性。开发人员可以提前计划要实施的措施和实践，以在应用向用户推出之前提高应用的安全性。

例如，构建一个使用微服务提供付费和免费内容的 OTT 视频流应用更有意义，因为微服务架构使您能够将应用拆分为业务友好的组件，如用户认证和免费或付费内容流。如果您的用户认证模块出现故障，您可以轻松配置您的应用程序以限制对付费内容模块的访问，直到认证启动，而免费内容模块仍然可供您的用户使用。

在另一种情况下，同一个应用程序被设计成一个紧密耦合的整体，一个关闭的认证服务将意味着一个关闭的应用程序或免费提供的付费内容——这是你想要不惜一切代价避免的结果。

Web 应用程序架构是如何工作的？

在我们讨论 web 应用程序架构如何工作之前，理解一个简单的网站如何工作是很重要的:

1. 用户在浏览器的地址栏中输入你的应用的 URL，或者点击一个链接。
2. 浏览器在 DNS 服务器中查找 URL，并识别你的应用的 IP 地址。
3. 浏览器发送一个 HTTP 请求到你的应用。
4. 您的应用程序会以正确的内容(通常是网页)进行响应。
5. 浏览器在屏幕上呈现网页。

如果你想更深入一点，下面是一个 web 应用程序如何处理一个请求:

1. 用户通过您的前端用户界面向您的应用程序发送请求。
2. 如果你有一个相关的缓存设置，应用程序将首先检查它，看看它是否有一个有效的记录，可以直接发送回客户端。如果是，缓存的内容将被发回，请求将被标记为已完成。
3. 如果没有缓存，请求将被转发到负载均衡器。
4. 负载平衡器识别可用于处理请求的服务器实例，并转发该请求。
5. 服务器实例处理请求，如果需要的话，调用任何外部 API。
6. 一旦在一个地方收集了结果，服务器就将响应发送回负载平衡器。
7. 负载平衡器将响应返回给 API 网关，API 网关再将响应发送给前端客户端的用户。然后，该请求被标记为已完成。

Web 应用程序架构的类型

现在你对什么是 web 应用程序架构有了一个基本的概念，让我们来详细看看在整个 web 中使用的一些流行的 web 应用程序架构类型。

单页架构

单页面应用程序(SPA)的架构就像它的名字一样简单:整个应用程序都基于一个页面。一旦用户打开你的应用，他们不需要导航到任何其他网页。该应用程序足够动态，当用户在应用程序中导航时，可以获取和呈现满足用户需求的屏幕。

当涉及到为最终用户或消费者提供快速无缝的体验时，spa 是很棒的。然而，它们缺乏传统网站的风格，并且很难针对 SEO 进行优化。

水疗建筑的优点

水疗建筑的一些优点包括:

• 你可以构建高度互动的网络应用。
• 水疗很容易扩展。
• 针对性能优化 spa 并不需要太多努力。

水疗建筑的缺点

SPA 架构的一些缺点是:

• spa 限制了超链接和 SEO 的灵活性。
• 最初渲染通常很慢。
• 在应用程序中导航可能不直观。

渐进式 Web 应用程序架构

渐进式 web 应用程序(PWA)架构建立在单页面架构之上，为您的 Web 应用程序提供离线功能。电容器和离子等技术用于构建 pwa，可以为用户提供跨平台的统一体验。

类似于 spa，pwa 是平滑无缝的。借助安装在用户设备上的附加功能(通过服务人员)，您的用户可以获得更加统一的应用体验。

与此同时，为 SEO 优化这样的应用程序可能会很困难，并且已安装应用程序的更新可能很难推送。

PWA 架构的优点

PWA 架构有许多优势，包括:

• 应用程序运行非常流畅，并提供跨平台兼容性。
• 可伸缩性很简单。
• 开发者可以访问离线访问和设备原生 API，如后台工作器和推送通知。

PWA 架构的缺点

PWA 架构的一些缺点包括:

• 对链接管理和 SEO 的支持有限。
• 将更新推送到离线 PWAs 比推送到原生应用更复杂。
• 跨网络浏览器和操作系统的 PWAs 支持有限。

服务器端渲染架构

在服务器端呈现(SSR)中，前端网页在用户请求后呈现在后端服务器上。这有助于减少客户端设备的负载，因为它接收静态 HTML、CSS 和 JS 网页。

SSR 应用在博客和电子商务网站中非常受欢迎。这是因为它们使得链接管理和 SEO 变得非常简单。此外，SSR 应用程序的第一次呈现非常快，因为客户端不需要处理任何 JS 代码来呈现屏幕。

SSR 架构的优点

SSR 体系结构的一些优点列举如下:

• 这些应用程序对于 SEO 繁重的网站来说非常棒。
• 在大多数情况下，第一页的加载几乎是即时的。
• 您可以将其与缓存服务配对，以进一步提高应用程序的性能。

SSR 架构的缺点

使用 SSR 架构的一些缺点包括:

• 不建议用于复杂或繁重的网页，因为服务器可能需要时间来完全生成页面，从而导致第一次呈现延迟。
• 它主要推荐给那些不太关注用户界面，只寻求增加可伸缩性或安全性的应用程序。

预渲染应用架构

预呈现应用程序架构也称为静态站点生成架构。在这种架构中，应用程序的前端网页是预先生成的，并作为普通的 HTML、CSS 和 JS 文件存储在服务器上。一旦用户请求一个页面，它就会被直接获取并显示给用户。这使得 web 应用程序非常快，任何类型的加载时间都很短。然而，这种架构增加了应用程序的构建时间，因为网页是在构建过程中呈现的。

当您希望生成静态内容(如博客或不经常更改的产品细节)时，预渲染的 web 应用程序非常有用。你也可以利用模板来简化你的网页设计。然而，用这种架构构建动态 web 应用程序几乎是不可能的。如果您希望构建一个搜索页面，在其路径中包含查询(类似于https://myapp.com/search/foo+bar)，那么您来错了地方。

由于应用程序的每个可能的路线都是在构建过程中预渲染的，所以不可能有如上所述的动态路线，因为有无限的可能性不能在构建过程中预渲染(这样做也没有意义)。

预渲染架构的优点

预渲染应用架构的几大优势包括:

• 网页是纯 HTML、CSS、JS 生成的；因此，它们的性能类似于使用普通 JS 构建的应用程序。
• 如果你知道你的应用程序的所有可能的路线，搜索引擎优化变得超级容易。

预渲染架构的缺点

与任何架构模型一样，预渲染也有其缺点:

• 这些应用程序无法提供动态内容。
• 对 web 应用程序进行任何更改都意味着从头开始重新构建和部署应用程序。

同构应用架构

同构应用是服务器端呈现的应用和 spa 的混合。这意味着此类应用首先在服务器上呈现为普通的服务器端呈现的应用。一旦客户端接收到它们，应用程序就会自动合并并附加虚拟 DOM，以实现更快、更高效的客户端处理。这实质上把应用程序变成了一个单页应用程序。

同构将两个世界的优点结合在一起。多亏了 SPA，您可以在客户端获得超快的处理和用户界面。由于服务器端渲染，您还可以获得快速的初始渲染和成熟的 SEO 和链接支持。

同构架构的优点

以下是使用同构应用程序架构的一些好处:

• 同构应用程序有超快的初始渲染和对搜索引擎优化的全面支持。
• 这些应用程序在客户端上也表现良好，因为它们在加载后会变成 SPA。

同构架构的缺点

同构应用程序架构的一些缺点可能是:

• 设置这样的应用程序需要熟练的人才。
• 在设计同构应用时，tech stack 的选项是有限的。您只能从少数(大部分)基于 JS 的库和框架中进行选择。

面向服务的架构

面向服务的架构是构建应用程序的传统整体方式的最流行的替代方式之一。在这个架构中，web 应用程序被分解成服务，每个服务代表一个业务功能单元。这些服务松散地耦合在一起，并通过消息传递的媒介相互交互。

面向服务的架构为您的应用技术堆栈增加了稳定性和可伸缩性。然而，SOA 中服务的规模没有明确定义，通常与业务组件而不是技术组件相关联；因此，维护有时会成为一个问题。

面向服务架构的优点

面向服务架构的主要优势包括:

• 这种架构有助于构建高度可伸缩和可靠的应用程序。
• 组件是可重用的，并被共享以增强开发和维护工作。

面向服务架构的缺点

这里列出了使用面向服务架构的潜在缺点:

• SOA 应用程序仍然不是 100%灵活的，因为每个服务的大小和范围都不固定。可能存在难以维护的企业应用程序规模的服务。
• 组件共享引入了服务之间的依赖性。

微服务架构

微服务架构旨在解决面向服务架构的问题。微服务是更加模块化的组件，它们组合在一起可以构建一个 web 应用程序。然而，微服务专注于保持每个组件小并且具有有限的上下文。有界上下文本质上意味着每个微服务都将其代码和数据耦合在一起，对其他微服务的依赖性最小。

微服务架构可能是构建应用程序的最佳架构，这些应用程序的目标是在某一天扩展到成千上万的用户。每个组件都具有弹性、可伸缩性，并且易于维护。然而，维护基于微服务的应用程序的 DevOps 生命周期需要额外的努力；因此，它可能不太适合较小的用例。

微服务架构的优势

微服务架构的一些优势包括:

• App 组件是高度模块化的、独立的，并且可以比面向服务的架构更大程度地重用。
• 每个组件都可以独立扩展，以满足不同的用户流量。
• 基于微服务的应用具有很高的容错能力。

微服务架构的缺点

微服务架构的一个缺点是:

• 对于较小的项目，微服务架构可能需要太多的维护工作。

无服务器架构

无服务器架构是 web 应用程序架构领域的另一个热门进入者。这种架构侧重于根据应用程序应该执行的功能来分解应用程序。然后，这些功能被托管在 FaaS(功能即服务)平台上，作为请求进来时被调用的功能。

与列表中的大多数其他架构不同，使用无服务器架构构建的应用程序不会一直运行。它们的行为就像函数一样——等待被调用，在被调用时，运行定义的过程并返回结果。由于这一特性，它们减少了维护成本，并且无需太多努力就具有高度的可扩展性。然而，使用这样的组件很难执行长时间运行的任务。

无服务器架构的优点

以下是无服务器架构的主要优势:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

• 无服务器应用高度且易于扩展。它们甚至可以实时适应传入的流量，以减轻基础设施的负载。
• 这类应用可以利用无服务器平台的按使用付费定价模式来降低基础设施成本。
• 无服务器应用程序非常容易构建和部署，因为你所要做的就是编写一个函数，并将其托管在一个平台上，如 Firebase functions、AWS Lambda 等。

无服务器架构的缺点

以下是无服务器架构的一些缺点:

• 在这样的体系结构上，长时间运行的任务可能成本很高。
• 当一个函数在很长时间后收到一个请求，这就是所谓的冷启动。冷启动很慢，会给最终用户带来不好的体验。

Web 应用程序架构的层次

虽然您在上面看到的 web 应用程序架构可能看起来彼此完全不同，但是它们的组件可以在逻辑上组合在一起，形成有助于实现业务目标的明确的层。

表示层

表示层负责 web 应用程序中暴露给最终用户的一切。表示层主要由前端客户端组成。但是，它也包含了您在后端编写的任何逻辑，使您的前端变得动态。这为您提供了空间，让您可以根据用户的个人资料和需求定制用户界面。

三种基本技术用于构建这一层:HTML、CSS 和 JavaScript。HTML 布局你的前端，CSS 样式化它，JS 赋予它生命(即，当用户与它交互时控制它的行为)。在这三种技术之上，您可以使用任何种类的框架来帮助简化您的开发。一些常见的前端框架有 Laravel ，React，NextJS，Vue，GatsbyJS 等。

业务层

业务层负责保存和管理应用程序的工作逻辑。它通常是一个后端服务，接受来自客户端的请求并处理它们。它控制用户可以访问的内容，并确定如何利用基础架构来满足用户请求。

对于酒店预订应用程序，您的客户端应用程序充当用户输入酒店名称和其他相关数据的门户。但是，一旦用户单击 search 按钮，业务层就会收到请求，并启动查找符合您要求的可用酒店房间的逻辑。然后，客户只是收到一个酒店房间列表，而不知道这个列表是如何生成的，甚至不知道为什么列表项目以它们被发送的方式排列。

这种层的存在确保了您的业务逻辑不会暴露给客户端，最终也不会暴露给用户。隔离业务逻辑对于处理支付或管理医疗记录等敏感操作非常有帮助。

持久层

持久层负责控制对数据存储的访问。这在数据存储和业务层之间增加了一个抽象层。它接收来自业务层的所有与数据相关的调用，并通过建立到数据库的安全连接来处理它们。

这一层通常由一个数据库服务器组成。您可以通过在本地基础架构中配置数据库和数据库服务器来自行设置该层，或者选择由领先的云基础架构提供商(如 AWS、GCP、微软 Azure 等)提供的远程/托管解决方案。

Web 应用程序组件

现在，您已经了解了 web 应用程序架构的内容，让我们详细了解一下组成 web 应用程序的每个组件。我们将把这个讨论分成两大类——服务器端组件和客户端组件，或者说后端和前端组件。

服务器端组件

服务器端组件是那些驻留在 web 应用程序后端的组件。这些并不直接向用户公开，并且包含了 web 应用程序最重要的业务逻辑和资源。

DNS 和路由

DNS 负责控制您的应用程序向 web 公开的方式。HTTP 客户端(也可以是浏览器)使用 DNS 记录来查找应用程序的组件并向其发送请求。您的前端客户端也在内部使用 DNS 来解析您的 web 服务器和 API 端点的位置，以发送请求和处理用户操作。

负载平衡是 web 应用程序架构的另一个流行组件。负载平衡器用于在多个相同的 web 服务器之间分发 HTTP 请求。拥有多个 web 服务器的目的是保持冗余，这有助于提高容错能力，并分配流量以保持高性能。

API 端点用于向前端应用程序公开后端服务。这些有助于促进客户机和服务器之间的通信，有时甚至是多个服务器之间的通信。

数据存储

数据存储是大多数现代应用程序的重要组成部分，因为总有一些应用程序数据需要跨用户会话保存。数据存储有两种类型:

• 数据库:数据库用于存储数据，以便快速访问。通常，它们支持存储应用程序经常访问的少量数据。
• 数据仓库:数据仓库是用来保存历史数据的。这些通常在应用程序中不经常需要，但会定期处理以生成业务洞察。

贮藏

缓存是一个可选功能，通常在 web 应用程序架构中实现，以便更快地向用户提供内容。很大一部分应用程序内容经常会重复一段时间，如果不是一直重复的话。它通常被缓存，而不是从数据存储中访问数据并在将其发送回用户之前进行处理。以下是跨 web 应用程序使用的两种最流行的缓存类型:

• 数据缓存:数据缓存为您的应用程序提供了一种方便快捷地访问经常使用且不经常更改的数据的方式。Redis 和 Memcache 等技术使缓存数据能够节省昂贵的数据库查询，而这些查询只是为了一次又一次地检索相同的数据。
• 网页缓存:CDN(内容交付网络)缓存网页的方式与 Redis 缓存数据的方式相同。类似于只缓存不经常变化的数据，通常只建议缓存静态网页。对于服务器端呈现的 web 应用程序，缓存并没有多大用处，因为它们的内容应该是高度动态的。

工作和服务

除了向用户公开一个接口(前端)和处理他们的请求(后端)之外，还有另一个不太受欢迎的 web 应用组件类别。作业通常是后台服务，旨在完成对时间不敏感或不同步的任务。

CRON 作业是那些在固定时间段内反复运行的作业。这些作业被安排在后端，在设定的时间自动运行维护例程。一些常见的用例包括从数据库中删除重复/旧记录，向客户发送提醒电子邮件等。

客户端组件

客户端组件是那些直接或间接向用户公开的组件。

这一类别中主要有两种类型的组件。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

前端用户界面

用户界面是应用程序的视觉方面。它是您的用户为了访问您的服务而看到并与之交互的内容。

前端接口主要基于三种流行的技术:HTML、CSS 和 JavaScript。前端用户界面本身可以是一个应用程序，具有自己的软件开发生命周期。

这些用户界面不包含很多业务逻辑，因为它们直接向用户公开。如果恶意用户试图对您的前端应用程序进行逆向工程，他们可以获得有关您的业务如何工作的信息，并进行非法活动，如品牌假冒和数据窃取。

此外，由于前端用户界面是直接向用户公开的，所以您会希望对其进行优化，以实现最小加载时间和响应能力。有时，这可以帮助您为用户提供更好的体验，从而促进您的业务增长。

客户端业务逻辑

有时，您可能需要在客户机上存储一些业务逻辑，以便快速执行更简单的操作。通常驻留在前端应用程序中的客户端逻辑可以帮助您跳过到服务器的旅程，并为您的用户提供更快的体验。

这是客户端组件的可选功能。在某些情况下，应用的业务逻辑完全存储在客户端(特别是在没有传统后端服务器的情况下)。BaaS 等现代解决方案可帮助您访问常见操作，如身份验证、数据存储、文件存储等。，在移动中使用您的前端应用程序。

在向你的用户展示之前，有很多方法可以混淆或缩小这个代码，以最小化逆向工程的机会。

Web 应用组件的模型

web 应用程序架构有多种模型，每种模型都基于 web 服务器连接到其数据存储的方式。

一台服务器，一个数据库

最简单的模型是一个 web 服务器连接到一个数据库实例。这样的模型易于实现和维护，并且使用它进行生产也相当容易。

由于其简单性，该模型适合于学习和不会暴露于高流量的小型实验应用。开发新手可以很容易地设置和修改这些应用，以学习 web 应用开发的基础知识。

然而，这种模型不应该用于生产，因为它非常不可靠。服务器或数据库中的任何一个问题都可能导致停机和业务损失。

多台服务器，一个数据库

该模型通过用一个公共数据库实例设置多个冗余服务器，将应用程序提升了一个档次。

由于多个 web 服务器同时访问数据库，因此可能会出现不一致的问题。为了避免这种情况，web 服务器被设计成无状态的。这意味着服务器不会跨会话保留数据；他们只是处理它并存储在数据库中。

使用这种模型制作的应用程序肯定比以前的模型更可靠，因为多个 web 服务器的存在增加了 web 应用程序的容错能力。然而，由于数据库仍然是一个常见的实例，它是体系结构中最薄弱的环节，并且可能是失败的根源。

多个服务器，多个数据库

该模型是设计 web 应用程序的最常见、最传统的模型之一。

在这种情况下，将您的应用程序逻辑部署为负载平衡器后面的多个相同的 web 服务器实例。您的数据存储还跨多个数据库实例进行维护，以增加容错能力。

您还可以选择在可用的实例之间拆分数据库以提高性能，或者维护整个数据存储的副本以实现冗余。在这两种情况下，任何一个数据库实例的故障都不会导致整个应用程序中断。

该模型因其可靠性和可伸缩性而备受推崇。然而，使用这种模式开发和维护应用程序相对复杂，并且需要高成本、经验丰富的开发人员。因此，只有在大规模建设时，才建议使用这种模式。

应用服务

虽然上面提到的三个模型非常适合单片应用程序，但是还有一个模型适合模块化应用程序。

应用服务模型根据业务功能将应用程序分解成更小的模块。这些模块可以小到一个功能，也可以大到一项服务。

这里的想法是使每个业务特性独立和可伸缩。这些模块中的每一个都可以独立连接到数据库。您甚至可以拥有专用的数据库实例来满足模块的可伸缩性需求。

在非单片应用中，这种模式非常流行。遗留的整体通常被移植到这个模型中，以利用它的可伸缩性和模块化优势。然而，管理基于这种模型的应用程序通常需要经验丰富的开发人员，尤其是开发操作系统和 CI/CD 方面的经验。

Web 应用程序架构的最佳实践

下面是一些您可以在 web 应用程序项目中实现的最佳实践，以充分利用您选择的 web 应用程序架构。

1.让您的前端响应迅速

这一点怎么强调都不为过:始终以响应前端为目标。无论你的 web 应用程序内部有多庞大和复杂，它都是通过前端网页、应用程序和屏幕暴露给用户的。

如果你的用户发现这些屏幕不直观或很慢，他们不会停留足够长的时间来观看和欣赏你的 web 应用程序这一工程奇迹。

因此，设计易访问、易用、轻量级的前端非常重要。

网络上有大量的 UI/UX 最佳实践可以帮助你理解什么对你的用户最有效。你可以找到擅长于设计用户友好的设计和架构的专业人士，让你的用户能够充分利用你的应用。

我们建议在向您的用户推出您的产品之前，认真考虑您的前端的响应能力。

2.监控加载时间

除了易于理解，你的前端还需要快速加载。

根据预兆，最高的电子商务转换率出现在加载时间在 0-2 秒之间的页面上，根据拆封，大约 70%的消费者承认页面加载时间是他们选择从在线卖家那里购买的一个重要因素。

当设计移动原生应用程序时，您通常无法确定用户的设备规格。任何不符合您的应用程序要求的设备通常会被声明为不支持该应用程序。

然而，这与网络完全不同。

说到网络应用，你的用户可以使用任何东西来浏览你的应用，从最新的苹果 Macbook M1 pro 到老式的黑莓和诺基亚手机。为如此广泛的用户优化您的前端体验有时会很困难。

当谈到前端性能时，人们会想到 LightHouse 和 Google PageSpeed 等服务。你应该在将你的前端应用程序部署到生产环境之前，使用这样的工具对其进行基准测试。大多数此类工具都为您提供了一系列可行的技巧，帮助您尽可能提高应用程序的性能。

应用程序最后 5-10%的性能通常取决于您的使用情况，只能由非常了解您的应用程序及其技术的人来修复。投资于网络性能不会有什么坏处！

3.尽可能选择 PWA

如前所述，pwa 是未来的设计。它们可以很好地适应大多数用例，并且提供跨主要平台的最统一的体验。

您应该考虑尽可能频繁地为您的应用程序使用 PWA。跨网络和移动的原生体验对你的用户有巨大的影响，也可以减少你自己的工作量。

pwa 还可以快速加载、轻松优化和快速构建。选择 PWAs 可以帮助你尽早将你的注意力从开发转移到业务上。

保持你的代码库干净简洁

一个干净的代码库可以帮助您发现并解决大多数问题，以免造成损害。这里有一些提示，你可以遵循，以确保你的代码库不会给你带来更多的麻烦。

• 关注代码重用:在你的代码库中维护相同代码的副本不仅是多余的，而且还会导致差异，使你的代码库难以维护。尽可能地关注代码的重用。
• 规划你的项目结构:随着时间的推移，软件项目可能会变得非常大。如果您没有从计划好的代码组织和资源结构开始，您可能会花更多的时间来查找文件，而不是编写有用的代码。
• 编写单元测试:每段代码都有可能出错。手动测试所有的代码是不可行的，所以你需要一个固定的策略来自动测试你的代码库。测试运行人员和代码覆盖工具可以帮助您识别您的单元测试工作是否产生了期望的结果。
• 高模块化:写代码的时候，永远以模块化为重点。编写与其他代码紧密耦合的代码会使测试、重用和修改变得困难。

5.自动化您的 CI/CD 流程

CI/CD 代表持续集成/持续部署。CI/CD 过程对于应用程序的开发至关重要，因为它们可以帮助您轻松地构建、测试和部署项目。

但是，您不希望每次都必须手动运行它们。相反，您应该设置基于项目活动自动触发的管道。例如，您可以建立一个管道，每当您将代码提交到您的版本控制系统时，它就会自动运行您的测试。还有许多更复杂的用例，比如每当创建一个版本时，从您的代码库中生成跨平台的工件。

可能性是无限的，因此，如何最大限度地利用 CI/CD 渠道取决于您自己。

6.整合安全功能

大多数现代应用程序由多个组件组成。以下面这个 app 为例:

Example of a serverless web app architecture.

客户端请求通过 API 网关路由到应用程序。虽然这个目前只允许直接请求应用程序的主页模块，但在未来，它可以允许访问更多的组件，而不需要通过主页模块。

接下来，home 模块在允许访问之前检查外部认证 BaaS。通过身份验证后，客户端可以访问“更新配置文件”或“查看配置文件”页面。这两个页面都与一个处理概要文件数据的通用托管数据库解决方案进行交互。

正如你所看到的，这个应用程序看起来像是一个非常基本和最小版本的在线人员目录。您可以添加/更新自己的个人资料或查看其他可用的个人资料。

下面是该架构中各种组件的简要说明:

• 蓝盒子: App 模块，可能托管为微服务或无服务器功能。
• 红盒子:提供认证和数据库的外部 BaaS 组件。
• 绿盒:路由组件，负责调节来自客户端的传入请求。
• 黑盒:你的客户端应用暴露给用户。

上面每种颜色的组件都容易受到各种安全威胁。这里有一些安全构造，您可以将暴露风险降至最低:

• 应用模块(蓝色):由于这些是无服务器功能，这里有一些加强其安全性的提示:
  • 隔离应用程序秘密，并独立于源代码管理它们
  • 通过 IAM 服务维护访问控制
  • 改进您的测试工作，通过 SAST 等技术寻找安全威胁
• 外部服务(红色):
  • 通过他们的 IAM 模块设置访问控制以管理访问
  • 选择 API 速率限制
  • 对于数据库等服务，设置更精细的控制权限，例如谁可以访问配置文件的数据，谁可以查看用户的数据，等等。许多服务，如 Firebase ，提供了一套详细的规则。
• 路由组件(绿色):
  • 像所有其他组件一样，实现访问控制
  • 设置授权
  • 仔细检查标准的最佳实践，如 CORS
• 客户端:
  • 确保您的客户端无法获得任何应用程序机密
  • 混淆您的客户端代码，以尽量减少逆向工程的机会

虽然这些只是少数建议，但它们表明了应用程序安全是复杂的，您有责任确保不会给攻击者留下任何漏洞。您不能依靠中央安全组件来保护您的业务；应用安全性分布在您的应用架构中。

7.收集用户反馈

用户反馈是了解你的应用在业务和技术性能方面表现如何的重要工具。你可以构建世界上最轻、最流畅的应用程序，但如果它不能让你的用户做他们期望的事情，那么你所有的努力都会付诸东流。

收集用户反馈有多种方式。虽然常规方法是快速匿名调查,但你也可以采用更复杂的解决方案，比如用户活动热图。

反馈收集方法的选择不如对收集的反馈采取行动重要。顾客喜欢倾听他们问题的企业。像麦当劳和特斯拉这样的巨头就是这么做的，这也是他们在市场上持续成功的原因之一。

摘要

网络是各种应用程序的巨大游乐场，每种应用程序都有自己独特的设计方式。多种类型的架构为 web 应用的多样化、繁荣和向全球用户提供服务铺平了道路。
了解 web 应用架构如何影响最终用户体验，并查看您可以实施的最佳实践，尽在本指南中🚀 点击发送推文
在本指南中，我们对 web 应用架构的不同模型进行了分析，并向您展示了它们对应用发展的重要性。

有没有你真正喜欢的 web app 架构？或者你还有什么想和全世界分享的吗？请在下面的评论中告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

2022 年 Web 组件的完整介绍

原文：https://kinsta.com/blog/web-components/

我们都有我们不想做的项目。代码变得难以管理，范围不断发展，快速修复应用于其他修复之上，结构在大量代码的重压下崩溃。编码可能是一件麻烦的事情。

项目受益于使用具有单一职责的简单、独立的模块。模块化代码是封装的，所以不太需要担心实现。只要你知道当给定一组输入时，一个模块将输出什么，你就不一定需要理解它是如何实现这个目标的。

将模块化概念应用到单一的编程语言很简单，但是 web 开发需要多种技术的混合。浏览器解析 HTML 、CSS 和 JavaScript 来呈现页面的内容、样式和功能。

它们并不总是容易混合，因为:

• 相关代码可以在三个或更多文件之间拆分，并且
• 全局样式和 JavaScript 对象可能会以意想不到的方式相互干扰。

这些问题是除了语言运行时、框架、数据库和服务器上使用的其他依赖项所遇到的问题之外的问题。

查看我们的Web 组件视频指南

什么是 Web 组件？

Web 组件是创建可在任何页面上重用的封装的单一责任代码块的一种方式。

考虑 HTML **<video>**标签。给定一个 URL ，观众可以使用播放、暂停、后退、前进和调节音量等控件。

提供了样式和功能，尽管您可以使用各种属性和 JavaScript API 调用进行修改。任何数量的**<video>**元素都可以放在其他标签中，它们不会冲突。

如果您需要自己的定制功能，该怎么办？比如显示页面字数的元素？还没有 HTML **<wordcount>**标签。

像 React 和 Vue.js 这样的框架允许开发者创建 web 组件，其中的内容、样式和功能可以在一个 JavaScript 文件中定义。这些解决了许多复杂的编程问题，但请记住:

• 您必须学习如何使用该框架，并随着它的发展更新您的代码。
• 为一个框架编写的组件很少与另一个框架兼容。
• 框架的受欢迎程度有升有降。你将变得依赖于开发团队和用户的突发奇想和优先权。
• 标准的 Web 组件可以添加浏览器功能，这是单靠 JavaScript 很难实现的(比如影子 DOM)。

幸运的是，库和框架中引入的流行概念通常会成为 web 标准。虽然花了一些时间，但 Web 组件已经到来。

Web 组件的简史

在许多特定于供应商的错误开始之后，亚历克斯·罗素在 2011 年的 Fronteers 会议上首次提出了标准 Web 组件的概念。两年后，谷歌的聚合物库(基于当前提案的 polyfill)问世，但早期实现直到 2016 年才出现在 Chrome 和 Safari 中。

浏览器厂商花了时间协商细节，但 2018 年 Firefox 和 2020 年 Edge(微软改用 Chromium 引擎时)都添加了 Web 组件。

可以理解的是，很少有开发人员愿意或能够采用 Web 组件，但是我们最终通过稳定的 API 达到了良好的浏览器支持水平。并非一切都是完美的，但它们是基于框架的组件越来越可行的替代方案。

即使你现在还不愿意放弃你最喜欢的，Web 组件与所有的框架都是兼容的，而且这些 API 将在未来几年得到支持。

每个人都可以查看预构建 Web 组件的存储库:

• WebComponents.org
• 组件库
• 通用组件
• 网络组件示例
• 太棒了——单机版
• 可访问 _ 组件
• Kickstand 用户界面

…但是编写自己的代码更有趣！

本教程全面介绍了不用 JavaScript 框架编写的 Web 组件。您将了解它们是什么，以及如何将它们应用到您的 web 项目中。你需要一些关于 HTML5、CSS 和 JavaScript 的知识。

Web 组件入门

Web 组件是定制的 HTML 元素，比如**<hello-world></hello-world>**。名称必须包含破折号，以免与 HTML 规范中正式支持的元素冲突。

您必须定义一个 ES2015 类来控制元素。它可以被命名为任何名称，但 HelloWorld 是常见的做法。它必须扩展 HTMLElement 接口，该接口代表每个 HTML 元素的默认属性和方法。

注意: Firefox 允许你扩展特定的 HTML 元素，比如 HTMLParagraphElement、HTMLImageElement 或者 HTMLButtonElement。这在其他浏览器中不受支持，并且不允许您创建影子 DOM。

要做任何有用的事情，该类需要一个名为 connectedCallback() 的方法，当元素被添加到文档中时会调用该方法:

class HelloWorld extends HTMLElement {

  // connect component
  connectedCallback() {
    this.textContent = 'Hello World!';
  }

} 

在这个例子中，元素的文本被设置为“Hello World”

该类必须向 CustomElementRegistry 注册，以将其定义为特定元素的处理程序:

customElements.define( 'hello-world', HelloWorld ); 

现在，当您的 JavaScript 被加载时，浏览器会将**<hello-world>**元素与您的 HelloWorld 类相关联(例如**<script type="module" src="./helloworld.js"></script>**)。

您现在有了一个自定义元素！

下一个网站项目的网页设计最佳实践

原文：https://kinsta.com/blog/web-design-best-practices/

是什么导致了一些 WordPress 开发者的收费与其他开发者的收费之间的巨大差异？回答这个问题首先需要考虑你为什么想要一个网站。

一些开发人员关注字面上的最终产品:代码的组合产生一个足够令人愉快的网站设计。

但是有市场营销头脑的开发者更关心的是而不仅仅是建造一些看起来不错的东西。他们充当客户的顾问，这些客户希望通过他们的网站实现特定的目标。

Web design is strictly connected to your business goals

考虑到这一点，雇佣一个似乎对你的最终目标不感兴趣/不问问题的人来建立网站是一个危险信号。重要的是要指出这样一个事实，当谈到让访问者转化为客户时，即使是最漂亮的网页设计也可能不理想。

也就是说，94%的人会根据你网站的设计来判断你的可信度。

因此，相反，你需要专注于使用你的设计来提供理想的用户体验。你必须让访问者在第一时间通过访问你的网站轻松找到他们想要的信息，同时引导他们进行目标转换活动。

这些网页设计的最佳实践集中在创建一个漂亮的网站和为你的业务服务的网站之间的交叉点上。

更喜欢看视频版？

什么定义了网页设计的最佳实践？

可以肯定的是，每个人和他们的妈妈对什么是一个设计良好的网站都有自己的看法。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

Web design isn't just about aesthetics. It's a much more complicated world where UX, accessibility, and business goals all should connect. Check out these web design best practices! ✍️🔝Click to Tweet

但是让我们通过听从专家来控制每个人的意见。

根据轨道媒体的说法，你可以将网页设计的最佳实践分成三个基本的标准类别:

• 品牌标准:你可能更熟悉“品牌”、“风格指南”或“情绪板”这些相同的概念。这些标准包括任何与网站外观有关的东西，包括颜色、排版和特定商业元素的使用。
• 编码标准:网站应该按照 W3C 同意的编程标准来构建，W3C 是一个国际组织，致力于开发网络标准。
• 无障碍标准:获取信息是一项基本人权，得到了《联合国残疾人权利公约》的认可。除此之外，让你的网站具有可访问性有的积极影响——不仅仅是销售，还有 SEO 。W3C 分享了一个基本的标准列表，你需要遵循这些标准来设计一个可访问的网站。我们将在本文后面详细介绍更多相关的网页设计最佳实践。

让我们看看如何基于这些标准来开发网页设计实践:

品牌标准

缺乏一致品牌的网站可能会产生交互压力并导致混乱。因此，毫不奇怪，约 38%的访问者表示，如果内容或布局不吸引人，他们将停止与网站接触。

请记住，外观并不代表一切，这里有一些基本的设计原则，可以帮助你创建一个人们愿意使用的网站:

保持平衡

平衡是规定如何有效分配视觉元素的设计原则。总的来说，一个平衡的设计看起来干净自然，有很好的对称性(虽然那是不一定是平衡的 条件 )。

你可以在网页设计中结合页面布局的平衡。

将文本或其他元素在页面上居中是一种简单的方法。一般来说，网页是建立在网格系统上的，这创造了一种平衡的形式。您可以使用 CSS float 属性来定位元素并在页面上平衡它们。

可以通过三种方式实现平衡:

1.对称设计

Example of symmetrical design

在网页上以均匀的方式排列元素。比如左边有重元素，右边也要有重元素。如上所述，居中是实现对称的最简单的方法，但有时会显得单调乏味。

为了避免使页面看起来单调，您可以使用不同的元素来创建平衡，例如用文本块来平衡大图像。还有一种对称平衡叫做径向平衡，物体从一个中心点向外辐射。

2.不对称设计

Example of asymmetrical design

要做好非对称设计更具挑战性，它包括页面上元素的不均匀分布。例如，你可能在中心有一个大元素，它被远处的一个小元素平衡。

你可以使用其他设计元素，如颜色或纹理，来平衡不对称的设计。

3.不平衡

Example of off-balance design

这些类型的设计暗示了运动和动作，这会让人不舒服。如果你的网站想让人们思考，那么不平衡的设计是适合你的。

作文

术语组合是指设计元素的放置和组织。

Composition

三分法则(T1)通常用于创造平衡的构图，尤其是照片。

间隔

元素的间距应该均匀，以便用户可以区分部分或块。

The role of spacing in web design

你还应该引入负空间或者图像主体之间和周围的空间。负空间可以减少视觉噪音，增加可读性，并带来平衡。

您可以通过在设计元素周围添加边距和填充来引入负空间。

焦点

Draw attention on one element

创建一个你想要吸引注意力的焦点区域。它应该是你的页面中最重要的部分，理想情况下，每个页面应该只关注一个主要焦点。

颜色

颜色是品牌的一个重要设计元素。理想情况下，你在进入网页设计过程时，已经了解了你希望与你的品牌相关联的网站配色方案。

特别是对于网页设计，从你的品牌的情绪板开始会有所帮助。

Example of Kinsta’s color palette

选择一种原色和二次色(二次色可以补充或者对比原色)，以及每种颜色较浅和较深的色调。限制你对颜色的使用，这样各种口音就不会成为眼中钉。

Adobe Color 提供了一个优秀的免费工具，用于测试各种颜色组合，为网站元素创建工作调色板。

此外，在决定颜色时，重要的是要考虑那些色盲的人，他们占世界人口的 4.5%。

Example of how a regular design would look to color blind users

有三种类型的色盲(全色盲、双色视觉和色盲)，所以考虑到那些可能无法区分颜色的人，请确保您的设计仍然可用。

对比

选择颜色时，重要的是要注意颜色比例和对比度。

色彩对比是指前景和背景之间的光线差异。使用充分对比的颜色可以让网站的可视性很容易区分。一般来说，使用高对比度的颜色选项——比如白底黑字——使你的网站可读性更好。

Bad contrast can be problematic

对比度比率是分配给页面元素之间对比度差异的数值。

世界内容可访问性指南(WCAG) 2.0 建议普通文本的对比度为 4.5:1。WebAIM 分享了几个符合理想对比度的预定组合，来帮助你可视化这个网页设计最佳实践。

为了有助于使用这一比例，请确保在设计网站时，您考虑到了所有的受众(包括那些有可访问性问题的受众)。这样做比事后计划解决这些问题更容易。

考虑人们将与之交互的网站的所有方面，包括页眉、页脚、菜单——所有这些都需要容易看到才能使用。

一些可用于检查色彩对比度的工具包括:

• 颜色对比检查器逐级访问。
• 对比度。
• WCAG 2.0 AA & AAA 色彩对比检查器工具，基于 WCAG 2.0 指南。

排印

网站排版是另一个重要的品牌考虑因素。

虽然有许多不同的来源可以让找到在你的网站上使用的潜在字体,但你首先要考虑的是，无论最终用户在他们的计算机上安装了什么字体，都可以一致地显示的选项。

谷歌字体提供各种各样的免费网页安全字体，不管用户安装了什么字体/程序，你都可以指望它们正常显示。确保你的心情板上有字体，看看它们是否符合你的色彩审美。

如果你在组合上有困难，谷歌字体可以推荐流行的搭配。你也可以使用像 FontPair 这样的网站来获得建议。

尽量限制你使用的字体粗细，因为加载太多文件会降低页面速度。就这一点而言，可以考虑在本地托管 Google 字体来引入额外的性能优势。

Poor typography vs ideal typography

当谈到根据网页设计最佳实践选择排版元素时，作为一般的经验法则，标题使用无衬线字体，内容使用衬线字体。至少，不要在正文中使用装饰性字体，因为这很难阅读。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

此外，不要试图在你的网站上使用各种不同的字体。一个很好的经验法则是使用一种字体作为你的标志，另一种用于你的菜单/标题，还有一种用于正文内容。关于这一点，请尝试将互补的字体配对，例如来自同一字体系列的字体。

元素层次结构

层次指展示相对重要性的设计元素的排列。这是通过操纵视觉对比度、大小和位置等元素来吸引注意力实现的。

Example of element hierarchy

例如，内容必须被分解成逻辑块,这样用户就可以区分各个部分。

您可以通过使用内容标题来做到这一点，这不仅使用户可以轻松跳到他们想要阅读的部分，还可以将大量文本分成可读的块，以便屏幕阅读器能够确定每个部分的上下文。

如果你正在寻找这些设计概念的一些有用的视觉插图，Tilda Publishing 博客涵盖了一些最常见的网页设计错误以及如何修复它们。
T3】

Web 最佳设计/格式实践

根据 Orbit Media 的研究，在排名前 50 的营销网站中观察到一些通用的网页设计标准。

Web design standards

所谓“标准”，他们指的是 80%的网站使用相似的设计方法:

• 左上角的标志。
• 横跨每页顶部的主要水平导航。
• 价值主张位于主页的“折叠上方”。注意，大多数网页设计师会告诉你，浏览器没有标准的像素高度，技术上也没有“折叠”。但是，一般来说，重要的设计元素应该出现在大多数访问者都能看到的页面的上方，即使不需要滚动。

以下是一些常见网站元素的网页设计最佳实践:

形象

使用图片的网页设计最佳实践可以激发出大量的建议，但是让我们把注意力集中在网页设计最佳实践的讨论中最基本的方面:

• 添加替代文本。图像不能使用屏幕阅读器处理，除非使用 ALT 文本。添加替代文本也有助于 SEO ，但是有些人使用替代文本只是为了补充他们的关键词策略。ALT 文本的一个更有用的用法是描述图像——尽管你可以用正确的方法同时满足搜索蜘蛛和屏幕阅读器。
• 使用具有人脸特征的图像比其他图形或动画更有效。它使人们更有可能参与到图像中，因为人类被他们感知的真正的共鸣和情感所吸引。
• 使用响应图像，根据浏览器大小放大或缩小。这有助于网站速度和搜索引擎优化。
• 永远不要忘记图标T3。收藏夹图标是显示在网站标题旁边和搜索结果中的小图标。它有助于品牌识别和提高网站的 UX。

网站导航

用户希望能够在网站上轻松找到他们想要的内容。因此，网站导航简单明了是很重要的。

网址导航是泛指一个网站的内部链接架构。别忘了导航的主要目的是帮助用户轻松找到你网站上的相关内容。

你网站的内部链接架构构成了你网站地图的基础，这有助于搜索引擎更容易地访问你的内容。人们发现，拥有一个设计良好、内容易于查找的网站，会对你从搜索引擎获得的网站流量产生积极影响(同时获得谷歌网站链接的几率也会更高)。

菜单导航

组成网站导航的有几个方面，但是你的顶部/主菜单应该是一个主要焦点，因为它将是用户访问你的网站时首先交互的东西之一。

有不同的网站菜单设计试探法，但最流行的包括:

导航菜单

理想情况下，这是位于网站的前端和中心。如果有几个类别，这可能涉及到下拉菜单的使用。然而，下拉菜单是不推荐，尤其是涉及到技术搜索引擎优化(他们更难抓取)。此外，人们发现大多数人不喜欢下拉菜单。

这是因为人眼的工作速度比手快，所以当人们已经决定点击什么而其他东西落下来时，他们会觉得很烦——这可能会导致页面访问量的减少。

汉堡菜单

汉堡菜单主要用于移动优化设计，通常位于页面的左上方或右侧。它显示为一个带有三条线的正方形，可以通过单击来展开。然而，许多设计师鄙视汉堡菜单，这启发了 web 开发者考虑新的方法，使移动网站导航有趣而实用。

厌倦了体验你的 WordPress 网站的问题？通过 Kinsta 获得最好、最快的主机支持！查看我们的计划

以下是一些基于网页设计最佳实践的导航设计技巧:

• 添加一个搜索栏帮助用户轻松找到内容(下面是如何改进 WordPress 搜索功能)。这对于有很多内容的网站特别有用，比如新闻博客。
• 设计你的网站遵循三次点击规则，该规则规定用户只需点击不超过三次鼠标就能找到想要的信息。这是因为当可能的时候，用户实际上更喜欢浏览一个网站，而不是浏览搜索结果。
• 使你的菜单标题具有描述性(记住关键词)，这有助于用户更容易地找到项目，也有助于 SEO。
• 菜单项的位置很重要。将最重要的页面放在菜单的最前面，这样就可以很容易地拿到。
• 保持最多 7 个菜单项，不仅是为了保持网站设计的整洁，也是因为太多的菜单项可能会影响你在搜索中的排名。谷歌可能会将这些看似不相关的类别解释为你的网站还没有确定特定的利基市场的标志。

为了更方便，这里有一个方便的信息图:

Web design best practices for menu navigation

编码标准

随着如此多的网站在全球范围内被创建和消费，我们当然需要一套标准化的编码原则。这些网络标准的一些方面包括:

搜索引擎优化

SEO 可以用来有机地增加你网站的访客数量(不使用广告)。因为在一篇文章的一小段中充分挖掘 SEO 太复杂了，所以看看我们的 SEO 清单和我们的关于 WordPress 的最佳 SEO 插件的提示，让你自己熟悉网页设计最佳实践的这个方面。

请注意，以下编码标准技巧与 SEO 密切相关。

移动响应能力

响应式设计致力于创造卓越的用户体验，无论使用何种设备或浏览器访问您的网站。

如今，设计一个响应迅速的网站比以往任何时候都重要，因为超过 60%的互联网用户通过手机访问互联网，T2 一半的电子商务交易通过移动平台完成。除此之外，谷歌的新搜索算法也优先考虑移动友好网站。

Example of responsive design

拥有一个响应迅速的网站不仅有助于用户更容易地浏览你的网站，也有助于提高参与度和转化率。用户推荐他们有积极的移动响应网站体验的品牌，反过来，不仅会停止购买移动网站体验不好的品牌，还会积极阻止其他人这样做。

然而，尽管有对响应网站的需求，估计 91%的小企业没有一个响应网站。他们应该——因为设计一个移动响应网站肯定会有回报。62%的公司报告在设计了一个移动响应网站后销售额增加。

仔细阅读 Kinsta 关于如何让你的网站更加手机友好的资源，其中包括一个最好的 WordPress 移动插件的下载列表，并确保查看这个最好的 WordPress 主题的策划列表，在那里你可以浏览大量的响应主题。

谷歌还提供了一些如何设计一个响应式网站的技巧。

网站安全

另一个重要的编码实践？创建安全的程序和网站，让用户可以信任他们的敏感个人信息。与普遍的看法相反，黑客不会主动寻找特定的网站进行攻击，这就是为什么即使是小网站也容易受到攻击。

信息

Kinsta 为每个计划提供了一个恶意软件安全保证,如果发生了不好的事情，安全专家会修复你的网站。

总的来说，WordPress 一般来说是安全的，但是它有助于采取额外的预防措施来保护你的网站免受攻击。

以下是一些最佳的网站安全实践:

• 获得 SSL 证书，这对于处理支付和个人信息的网站尤其重要。 SSL 证书对通过网络发送的信息进行加密，因此黑客很难破解。除此之外，它还是一个行业标准。当访问者访问的网站没有 SSL 证书时，Chrome 会提醒他们。除此之外，Chrome 现在弃用传统 TLS 版本，并开始显示额外的警告。启用 HTTPS (安装 SSL 证书的一部分)也是谷歌官方的排名因素。
• 保护好您的登录凭证。一些攻击是由黑客试图强行访问网站引起的。它有助于拥有一个单独/隐藏的登录页面(使用 WP 隐藏登录插件)并限制登录尝试的次数。使用登录锁定插件，该插件记录每次失败登录尝试的 IP 地址和时间戳，并在短时间内达到相同 IP 范围的失败尝试次数时锁定登录功能。此外，创建一个超过 6 个字符的安全密码，由大小写字母、数字和特殊字符混合而成。经常更改您的密码。如果您希望获得额外的安全性，也可以使用双因素身份验证来登录。
• 保持 WordPress 核心、插件和主题的更新。不要忘记从一个有信誉的来源下载插件或主题。一个好的迹象是，如果插件/主题有多个安装，最近已经更新。你也应该阅读评论来决定这个插件是否值得信任(确保检查这里列出的那些)。关于这一点，下载一个 WordPress 安全插件，如 Wordfence 、 Sucuri 或 Defender ，因为 73.2%最受欢迎的 WordPress 安装漏洞可以使用免费的自动化工具检测到。以下是更深入的最佳安全插件列表。
• 使用安全的网络主机。对于那些不了解情况的人来说，你的网络主机似乎与网站安全没有任何关系，但是 41%的攻击是通过主机平台上的安全漏洞发生的。寻找一个托管服务提供商，包括如下功能:服务器端防火墙和加密， NGINX 或 Apache web 服务器，防病毒和反恶意软件软件，现场安全系统，以及 SSL 证书和 CDN 的可用性。

关于 WordPress 安全的更多信息，请查看我们关于如何保护你的 WordPress 网站安全的综合资源。

页面速度

大约一半的用户希望网站在 2 秒或更少内加载，如果花费的时间超过这个时间，40%的人会毫不犹豫地退出页面，(很可能)永远不再返回。

除了网站访问量，页面速度也很重要，因为它也会影响转化率和收入。页面加载速度每增加一秒，销售额就会下降 27%。提高网站速度可以防止损失 7%的可能转化率。

以下是一些加快网页加载速度的方法:

• 使用一个内容交付网络(CDN) ，它获取静态文件，如图像、、CSS 和 JavaScript，将它们交付到离用户的物理位置最近的服务器上。
• 考虑你如何使用图像。一般网站使用 1.8MB 的图片，这代表了一个网站大小的 60%。为了有助于这一点，重新考虑你如何布局你的网页。如果你想保持较快的页面速度，尽量减少设计中使用的大图片数量，并确保优化它们。
• 如果你的网站需要使用大量的大图片，使用插件，包括 GZIP 压缩，缓存，或者图片优化的功能，比如 WP Rocket 和 Imagify 。它们可以帮助你的文件变得更小(而不牺牲质量)，这样它们可以更快地加载。
• 考虑你保存在 WordPress 数据库中的插件和文件的数量，因为它们也会影响页面加载速度。清理那些你不用的。当你这么做的时候，保持你的 PHP、 WordPress 核心和插件更新到最新版本。

查看我们关于网站速度优化的综合资源。

无障碍标准

互联网旨在为所有人服务，不管他们使用的具体硬件、软件、语言、能力或位置。然而，许多人为了漂亮的设计牺牲了可访问性。

Accessibility is key for every website

可访问性指的是让每个人都能使用你的网站。

除了那些影响访问的残疾人士， W3 表示，网站的可访问性也有利于:

• 那些使用小屏幕、不同输入模式等设备的用户。
• 老年人。
• 有“暂时性残疾”的人，包括断肢、失去眼镜或身体状况。
• 具有“环境限制”的用户，例如在明亮的阳光下或在无法收听音频的环境(如公共交通)中通过设备访问互联网的用户。
• 网速慢的人。

可访问性应该是每个人都关心的问题，因为我们都在某种程度上受到它的影响。

使您的网站易于访问的原因

仍然不确定在这个关于网页设计最佳实践的讨论中花时间在可访问性上是否值得？

考虑这些原因:

• 这是美国残疾人协会的要求。美国残疾人法案(ADA)于 1990 年通过，旨在保护残疾人的公民权利不受歧视。它涵盖了交通，电信，就业，甚至建筑法规。由于这部法律是在近 30 年前通过的——那时互联网还没有普及——立法者们正在寻求对其进行修改。
• 它促进包容性。皮尤研究中心(Pew Research Center)的一项调查显示，残疾人上网的可能性比非残疾人少三倍，这是一个耻辱，因为统计数据显示，约 30%的专业人士有残疾，其中 62%的残疾人因害怕负面偏见而“躲在雷达下”。
• 这会帮你赢得更多的生意。通过更加包容，你将引入一个残疾人网络，这代表着7 万亿美元的可支配收入
• SEO 的好处。搜索引擎奖励符合可访问性的网站，以鼓励更多的网站具有可访问性。

如何让你的网站更容易访问

让你的网站更容易访问的一个简单方法是安装 WP Accessibility 插件，它增加了一些辅助功能，包括:

• 一个工具栏，用户可以在其中调整字体大小并以高对比度和灰度查看您的站点。
• 比较颜色对比以检查它是否符合 ADA 的标准。
• 从插入内容的图像中删除标题属性。大多数屏幕阅读器不能感觉到这一点，而是阅读锚文本。
• 启用跳过链接，这是允许用户直接跳到内容的内部页面链接，这对使用屏幕阅读器的人很有用。

要采取的一些额外步骤:

• 如果你的网站制作了诸如音频、有声读物、视频、播客等媒体，添加字幕或文字记录，以使聋哑人以及那些想消费你的内容但不能在公共场合消费媒体的人受益。
• 为那些有运动障碍、只能使用键盘(而不是鼠标)浏览你的网站的人创建键盘可访问的链接和菜单。下拉菜单是不被鼓励的，但是你可以通过为每个下拉菜单指定快捷方式来补救(例如:按“1”进入主页，按“2”进入“关于”页面，等等。).
• 最后，测试你的网站的可访问性。Web Accessibility Initiative 并没有认可任何特定的工具，而是提供了一个工具列表，你可以用它来审核你的工作。

最后的想法:你下一个网站项目的网页设计最佳实践

好的网站不应该用客观上好的设计来定义。同样重要的是网站的可用性、导航的便利性和可访问性。有了这些网页设计的最佳实践，你就拥有了创造外观和功能都很好的东西。

Web design isn't just about aesthetics. It's a much more complicated world where UX, accessibility, and business goals all should connect. Check out these web design best practices! ✍️🔝Click to Tweet

请记住，这些是网页设计的最佳实践。根据网站的性质，你很可能无法完全理解每一条。但是在你打破规则之前，至少了解它们存在的原因是有帮助的。

我们错过了什么重要的事情吗？在下面的评论中分享你的网页设计最佳实践！

推荐阅读:最佳网页设计在线课程

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

2022 年 20 门最佳网络设计课程(免费和付费)

原文：https://kinsta.com/blog/web-design-courses/

在几十个学习平台、几百个博客和 YouTube 之间，有无穷无尽的网页设计课程和在线学习材料。

但是质量并不都一样。如果你从错误的地方开始，你最终会浪费你的时间和金钱。

我们已经在网上搜索了最好的、最新的网页设计课程，包括免费的和付费的，并整理了一份最佳选择的名单。如果你正在寻找 2022 年最好的网络开发工具，我们也将为你提供帮助。

所以，如果你不喜欢每天早上去办公室，忍受下午回家的高峰，那就继续读吧。

我们将涵盖你开始网页设计师新职业所需的所有课程。

做一名网页设计师需要具备哪些资质？

在网页设计中，像大学学位这样的传统硬资历并不像在其他行业中那样举足轻重。

这是一个快速变化的行业，所以 10 年前的学位并不意味着你现在是一个伟大的网页设计师。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

相反，网页设计师通常是通过他们的作品集网站展示的近期作品目录来评判的。

不仅仅是你文件夹中以前的项目有助于突出你的技能。

你可以说服潜在客户，你有必要的设计和网站本身的开发技能。

为了从使用前沿设计和开发的真实投资组合网站中获得灵感，你可以在 Awwwards 上查看以前获奖的项目。

Awwwards portfolio sites

看看每个设计师如何使用字体、空白、动画、图标和其他设计元素来展示他们最好的一面。

你也可以在其他创意社区如 Dribble 或 Behance 中找到灵感。

掌握成功的必要工具和软技能

还有一些你需要掌握的工具和软技能将会成就或毁掉你的网页设计师生涯。

让我们先来看看您可能会用到的一些工具。

• 基本插画和照片编辑工具: Illustrator，Photoshop，Sketch，或者 GIMP。
• 交互设计工具: Adobe XD 或 Invision Studio。
• 本地开发环境(如果你开发原型或者使用 CMS ):桌面服务器、XAMPP 等。(了解如何在本地安装 WordPress】来测试新设计。)

还有一些流行的框架和 CSS 可以帮助你脱颖而出。

• 动画工具包 : Animate.css，Bounce.js 等等。
• jQuery 库和插件:惰性加载，视差滚动等等。
• 熟悉 Bootstrap、React 和其他流行的前端开发框架至关重要。
• 了解 WordPress 和如何创建模板也可以成为潜在客户使用 CMS 的一个关键卖点。

如果你想成功，你还需要一些软技能。

• 对网站上消费者心理和人类行为的理解。基本概念包括决策麻痹、社会证明的价值和颜色心理学。
• 作为一名自由职业者，你需要学习如何给项目定价和使用基本的谈判策略。
• 你还需要学习如何提出建议和获得客户。即使在机构或公司背景下，这也是一项宝贵的技能。

有兴趣成为网页设计师吗？✅学习如何开始与这个最好的课程选择综述。🎨 点击推文

20 门最佳在线网页设计课程(免费与付费)

下面，我们将重点介绍一些最好的在线网页设计课程，包括免费和付费资源。

为了帮助您更快地找到您想要的内容，我们将它们分为以下几类。

免费在线网页设计视频课程

如果你喜欢通过视频格式学习，有人指导你学习每一段新的代码或技术，网上有许多免费的选择。

1.WebFlow 大学:终极网页设计课程

WebFlow University web design course

终极网页设计课程是由 WebFlow 大学提供的免费课程，这是一个由 CMS 和设计工具 WebFlow 托管和开发的在线学习平台。

它包括超过 5 个小时的视频课程，是一个很好的介绍所有网页设计的东西。

主题:

• HTML 和 CSS 基础知识
• 网络结构
• 小跟班
• 排印
• 媒体元素
• 成分
• 造型基础
• 布局基础
• 高级布局
• 响应式设计
• CMS 和动态内容
• SEO

时长: 5 小时(视频)

证书:不可用

优点:

• 最新的网页设计前沿介绍。
• 易于遵循说明。
• 超过 5 个小时的视频内容(如果你继续下去，实际学习时间会更长)。

缺点:

• 虽然这是一个很好的速成课程，但它不会给你所有概念的最好的基础理解。

2.BYOL:使用 HTML5、CSS3 和 Visual Studio 代码的网页设计初学者

Beginner web design course

Web designer 和 YouTuber Bring Your Own Laptop 利用 HTML5、CSS3 & Visual Studio 代码创建了一个名为初级 Web 设计的 4 小时免费课程。

这种格式是 YouTube 上一个 4 小时的视频，并附有一套可以免费下载的练习文件。

在整个课程中，你将学习如何创建三个不同的复杂程度和难度不断增加的网站，最后，如何使你的网站响应迅速。

主题:

• HTML 和 CSS 基础知识
• Head 和 HTML 标签
• CSS 类
• Web 结构和 div 嵌套
• 媒体元素
• 外部 CSS
• 测试您的网站
• 造型基础
• 布局基础
• 高级布局
• 响应式设计
• CMS 和动态内容
• 搜索引擎优化

时长: 4 小时(视频)

证书:不可用

优点:

• 有趣且易于理解的说明(大多数 YouTube 评论强调它是多么容易理解)。
• YouTube 上有近 4 个小时的免费视频内容，分为几个部分以便更好地浏览。

缺点:

• 很简单，要完成整个课程(16 个小时)，你需要以每月 12 美元的价格注册一个自带笔记本会员。

3.freeCodeCamp:响应式网页设计介绍——HTML & CSS 教程

freeCodeCamp YouTube course

2019 年，freeCodeCamp 在他们的 YouTube 频道上发布了 4 小时的响应式设计入门课程。

本课程将教你如何创建一个 3 页的响应式网站，以及响应式设计、CSS 和 HTML5 的基础知识。

主题:

• 响应式设计基础
• 移动优先设计
• CSS 单位
• 在 vs px vs rems 中
• flex box(flex box)的缩写形式
• CSS 样式
• 响应容器
• 媒体查询
• 响应导航
• 页面结构
• 小工具

时长: 4 小时(视频)

证书:不可用

优点:

• 更深入的了解如何在 2022 年用 HTML 和 CSS 创建合适的响应式设计。
• 了解重要的 CSS 单元和高级 HTML 标签。
• 在 YouTube 上可以免费获得超过 4 小时的视频(无需注册)。

缺点:

• 除了响应式设计之外的有限的基础信息(如果你已经知道基本的 HTML 和 CSS 就好了)。

4.开放式课堂课程:用 HTML 和 CSS 构建你的第一个网页

OpenClassrooms introductory course

OpenClassrooms 提供免费的入门课程，名为用 HTML 和 CSS 构建你的第一个网页。

它从最开始开始，会让你对 HTML5 和 CSS3 有一个很好的基本理解。如果你没有任何网站开发或设计的经验，这是一个很好的起点。

主题:

• HTML5 和 CSS3 基础
• HTML 结构
• CSS 样式
• 页面结构和搜索引擎优化
• 图像优化
• 块和内联元素
• 颜色理论
• 字体(确保查看我们关于如何在 WordPress 中改变字体的指南)

时长: 10 小时

证书:可用(每月 20 美元的会员费)

优点:

• 伟大的网页设计入门，使用最新的 HTML 和 CSS。
• Codepen 条目的集合，突出不同代码在现实世界中的工作方式。
• 10 小时免费学习，包括互动测验和视频课程。

缺点:

• 停留在非常基础的地方，让你对许多不同的概念有一个有限的、表面的理解。

付费在线网页设计视频课程

如果你有钱投资，网上也有一些高质量的付费网页设计课程值得一看。如果你打算把它作为职业，投资教育应该是显而易见的。

5.Udemy 课程:面向初学者的网页设计:HTML 和 CSS 中的真实世界编码

Udemy Web Design Course

Udemy 是最受欢迎的在线学习平台之一。有各种各样的课程，从网站设计到自由职业和生产力。

但是最好的起点是面向初学者的网页设计:HTML 的真实世界编码& CSS 在线课程。

主题:

• HTML 布局和要点
• 媒体
• 字体和排版
• 页面结构
• 航行
• 表格
• CSS 要点
• 背景
• flex box(flex box)的缩写形式
• CSS3 动画
• JavaScript 框架
• 引导程序

时长: 11 小时(视频)

价格:16.99 美元(100 美元以上的价格是一种销售策略)

证书:可用

优点:

• 结构良好的入门课程，涵盖了 2022 年响应式设计的所有基础知识。
• 最新信息(最后更新于 2020 年 7 月)。
• 与社区互动，并向课程讲师提问。
• 一次性费用(而不是每月付款)。

缺点:

• 对于付费课程来说，这不是最深入的课程。

6.树屋:网页设计追踪

TreeHouse web design track

TreeHouse 是一个基于订阅的在线学习平台，适合设计师和程序员。网页设计课程提供 43 小时的视频和互动课程，内容涉及 HTML、CSS、布局和其他网页设计基础知识。

它还包括初露头角的平面设计师的基本技能，比如一个 SVG 教程。

主题:

• HTML 和 CSS 基础知识
• 网页设计流程
• 高级 HTML 表单
• 桌子
• 排印
• CSS layouts
• 响应式设计
• flex box(flex box)的缩写形式
• 自举 4
• 线框化
• CSS 动画
• CSS 网格布局

时长: 43 小时(视频)

价格:课程 25 美元/月，附加课程 49 美元/月。

证书:不适用于课程(仅适用于 199 美元/月的 Techdegree 课程)。

优点:

• 对网页设计的深入介绍，超过四十小时的互动学习。
• 一个活跃的社区，你可以与之互动并从中学习。
• 仅仅在 HTML 和 CSS 基础上学习超过 15 个小时，就可以打下坚实的基础。

缺点:

• 如果你做全职工作，几乎没有空闲时间，如果你继续推迟学习，树屋可能会变得很昂贵。

7.前端硕士:CSS 网格/Flexbox 课程

FM – CSS Grid & Flexbox course

Frontend Masters 是初学者和中级网页设计师的绝佳学习平台。这门课程将教你如何使用现代 CSS 技术为你的网站创建一个响应性的布局。

它将帮助你在一个基本的 HTML 线框设计师和能够创建功能原型和模板的人之间架起一座桥梁。

主题:

• 响应式设计基础
• CSS 浮动
• Flexbox 基础和实施
• 响应图像
• CSS 网格基础和实现

时长: 5 小时以上(视频)

价格:$ 39/月

证书:可用

优点:

• 顶级专业设计教育家的一流视频课程。
• 将教你现代响应式设计是如何工作的，这是线框和布局设计师的必备技能。
• FM 还有其他很棒的课程来学习基本的网页设计和开发基础。

缺点:

• 与其他在线课程一样，如果你需要更多的时间(几个月的时间很快就会累积起来)，它可能会变得有点贵。

8.Skillcrush:前端开发课程

Skillcrush – Frontend development course

Skillcrush 提供了一个深入的前端开发入门课程，非常适合初学者。它的价格和时间表意味着它与一些更标准的 MOOCs 有更多的共同点，但结构是自由格式，你可以想学多快就学多快。

主题:

• HTML、CSS 和 JS 基础知识
• 媒体询问和响应设计
• 响应图像
• Git & GitHub
• Flexbox 基础和实施
• jQuery

时长: 3 个月(平均完成时间)

价格: \(549 一次性付款或\) 199/月三个月

证书:可用

优点:

• 对前端开发和整体网页设计的深入介绍。
• 从例子中学习，因为你可以观察其他学生如何完成作业。

缺点:

• 有点贵，而且退款政策似乎有点弱。

9.Envato Tuts+:面向初学者的响应式网页设计

Tuts+ – Responsive web design course

面向初学者的 Tuts+ 响应式网页设计课程是对响应式设计、HTML、CSS、媒体查询等基础知识的快速介绍。

单独来看，它似乎不是最好的付费选择，因为它的播放时间只有 3 个多小时。但 Tuts+ premium 包括 20 多门网页设计课程，从使用 Sketch 或 Adobe XD 等特定软件，到深入的网页排版课程。

主题:

• HTML、CSS 和 JS 基础知识
• 媒体询问和响应设计
• 响应图像
• 媒体查询
• 网格布局

时长: 3 小时(视频)

价格:$ 16.50/月

证书:不适用

优点:

• 从其他课程中学习如何使用 Adobe XD 和 Sketch 等设计软件。
• 从专门的课程中学习尖端的 CSS 和 HTML 技巧。
• 以相同的会员身份访问数百万张库存照片、web 模板等。

缺点:

• 他们的入门课程本身是基础的，有点过时。

10.Paul Boag–鼓励点击大师班

Encouraging Clicks Masterclass

Paul Boag 是一位领先的教育家和作者，他从事转换优化和 UX 设计领域的工作。他为 Smashing 杂志写了多本关于网页和 UX 设计的书，并且是许多领先的网页设计出版物的经常性专栏作家。

他的“鼓励点击大师班”是一个辅助视频课程，你可以在整个课程中直接询问保罗本人。你将学习设计网站的基本知识，推动行动和转换，而不诉诸于阴暗的伎俩或黑暗的模式。

主题:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

• 转换优化基础
• 衡量正确的指标
• 基本的消费者心理学以及如何在设计选择中利用它
• 创造更好的行动号召
• A/B 测试 &正在进行优化

时长: 4 小时 30 分钟的视频

价格: $267 一次性费用

证书:不适用

优点:

• 了解如何为您的客户创建能够提高转化率的设计。

缺点:

• 每年只开放几次。

在线大学网页设计课程和学位(MOOC)

通过像 Coursera 这样的大规模在线开放课程(MOOC)平台，一些大学免费在线提供完整的网页设计课程。

然而，并不是所有的课程都是一样的，所以我们只强调精华部分。

11.Coursera:面向所有人的网页设计:网页开发和编码专业化基础

Coursera U-M web design course

密歇根大学为每个人设计的网页是 Coursera 上最受欢迎的开发课程之一。

它涵盖了 HTML、CSS 和 JS 的基础知识，以及响应式 web 设计和 web 可访问性。

如果你不需要或不想要认证或学分，你可以免费旁听课程。

主题:

• Web 开发
• 级联样式表(CSS)基础知识
• HTML5 基础
• JavaScript 基础知识
• 响应式网页设计
• 网页可访问性
• 文档对象模型(DOM)
• 引导程序

时长: 70 学时学习(包括复习和实验)。

价格:免费旁听课程。

证书:获得证书需要 49 美元/月的会员资格。

优点:

• 非常适合作为一名网页设计师发展坚实的基础，超过 30 小时的 HTML，JS 和 CSS 基础知识的学习。
• 与其他渴望学习的人组成的蓬勃发展的在线社区互动。
• 完成复习、实验等，更好地内化你所学的一切。

缺点:

• 很少有人抱怨学习材料不合标准(错别字、测验中的错误等)。)

12.EdX: W3CX 前端开发程序

W3CX Frontend Web Developer program

edX 的 W3CX 前端开发程序非常适合那些想要在前端开发的所有核心语言中建立坚实基础的初学者。

主题:

• HTML、CSS 和 JS 基础知识
• 高级响应设计、CSS 网格和 flexbox
• 航行
• 现代 HTML5 APIs，如定时文本跟踪和设备定位

时长: 140 学时的学习(包括复习和实验)。

价格:免费独立审核个别课程。

证书: $895.50 获得证书所需的一次性费用。

优点:

• 直接来自原始资料的非常深入的信息(W3C)。
• 讲师是在微软工作的高素质开发人员。
• 与活跃的在线社区互动，获得帮助并共同学习。

缺点:

• 课程的后半部分更侧重于 web 应用程序开发。

13.Udacity:前端开发纳米学位

Frontend dev nanodegree

uda city frontend web development nano degree 将教你 HTML、CSS 和响应式 web 设计的基础知识，以及更多内容。

虽然从技术上讲，这不是一个大学课程，但 Udacity 纳米学位的结构、形式、教育深度和价格都符合标准的 MOOC 项目。

主题:

• HTML、CSS 和 JS 基础知识
• 高级响应设计、CSS 网格和 flexbox
• 为营销内容创建动态登录页面
• 现代 web APIs
• 使用 Webpack 和其他工作流工具自动执行重复性任务

时长: 100+小时的学习(包括复习和实验)。

价格:4 个月的一次性费用为 1356 美元，或每月 399 美元

证书:可提供纳米学位价格。

优点:

• 包括专业的项目和任务评审和反馈。
• 与专门的技术导师互动。
• 在学位快结束时，从个人职业教练那里获得真正的一对一建议。

缺点:

• 免费学习仅限 7 天免费试用。

14.未来学习:用户体验(UX)设计和研究

Future Learn – UX Design course

来自 Future Learn 和密歇根大学的用户设计和研究项目非常适合想要了解更多 UX 设计的有抱负的网页设计师。

需要为您的客户站点提供超快的、安全的、开发人员友好的托管服务吗？Kinsta 是为 WordPress 开发者设计的，提供了大量的工具和强大的仪表板。查看我们的计划

主题:

• 设计启发法
• 用户体验研究基础(UX 访谈、调查协议、数据提取)
• 亲和墙
• 设计流程和原型制作
• 实施数据驱动的 UX 设计

时长: 88 小时学习(包括复习和实验)。

价格:免费审核个别课程

证书: $345 一次性费用，可获得证书和每门课程的终身使用权。

优点:

• 这是一门很好的课程，有助于更好地理解用户如何与网站和应用程序交互。
• 可以使用技能提供更全面的服务，超越基本的网站设计。

缺点:

• 不是专门为网页设计量身定做的课程。

15.OpenHPI:以人为中心的设计课程

Human-centered design course

如果你想提高你的设计基础，这个以人为中心的设计课程是一个很好的起点。

它可以帮助你提高你的思维能力和研究技能，给你一个更强大的工具箱来作为一个网页设计师工作。

主题:

• 定义目标
• 思维能力
• 综合

时长: 10-11 小时的学习(包括复习和实验)。

价格:免费

证书:有基本的结业证书。

优点:

• 快速(在 10 小时内)建立你作为一名设计师的基本技能的伟大课程。
• 可以使用网页设计领域之外的概念。

缺点:

• 没有直接涉及网页设计。

互动网页设计课程

如果你想学习更多的前端开发和动手编码而不是图形设计元素，网上有很多交互式网页设计课程。

16.免费:免费代码营

freeCodeCamp web design certification

免费代码营(freeCodeCamp)提供了一个庞大的响应式网站设计课程，免费学习时间超过 300 小时。

这个界面虽然有点单调，但是很直观，并且将学习代码的体验游戏化了。

要继续学习这门课程，你必须将每一条新信息付诸实践，这对记忆很有帮助。

主题:

• HTML5 和 CSS3 基础
• 响应式设计
• flex box(flex box)的缩写形式
• 网页可访问性
• 应用视觉设计

时长: 300+小时互动课。

价格:免费

证书:可用(免费)

优点:

• 伟大的基础信息。
• 按照自己的节奏学习。
• 通过立即使用你所学的每一段代码来更好地保留信息。

缺点:

• 学习界面并不是最吸引人的。

17.免费:W3Schools

W3Schools homepage

W3Schools 是在线学习 web 开发的最大资源之一。

它有数百小时的教程和课程，内容涉及用于构建 web 的核心语言和框架。

界面可能有点笨拙，但大量高质量的免费课程弥补了这一点。你甚至不需要注册你的邮箱就可以开始了。

主题:

• HTML5、JavaScript、CSS3 基础知识
• 画布和 SVG
• 引导程序
• 制图法
• 颜色
• 核标准情报中心

时长:数百小时互动课。

价格:免费

证书:可用(每种语言 95 美元起)。

优点:

• 所有语言的重要基础信息。
• 在建立你的第一个网站时，通过浏览大量的目录边做边学。
• 不需要电子邮件注册。

缺点:

• 学习界面不如其他互动课程流畅。

18.免费:Codecademy

Codecademy

Codecademy 是一个面向程序员和网页设计师的交互式学习平台。它免费提供几门课程来帮助你入门。

它有一个令人敬畏的游戏化界面，使学习新代码变得轻而易举。

遗憾的是，免费计划中的内容相当有限，只专注于基本语言和创建一个简单的网站。

主题:

• HTML5、JavaScript、CSS3 基础知识
• 如何创建你的第一个网站

时长: 10-20 小时互动课。

价格:基础课程免费(以下为付费版本)

证书:不可用

优点:

• 很棒的学习界面。
• 积极参与的学习社区。

缺点:

• 免费课程非常有限。

19.付费版:Codecademy Pro

使用 Codecademy Pro，您可以获得免费计划中包含的平台和社区，以及对所有课程和 web 开发路径的完全访问权。

你也可以走更短的技能路线，比如学习如何建立网站。

CA – Build websites path

使用专业版，您可以获得数百小时的互动课程，并在课程结束时获得证书。

价格:$ 39.99/月(19.99/月按年计费)。

20.自由:大会破折号

Dash by General Assembly

General Assembly 主要是一家面向设计师和程序员的校园或面对面训练营式教育公司。

但是他们的免费互动在线课程 Dash 是学习 HTML、CSS 和 JavaScript 基础知识的一个很好的方式，所有这些都是在你从零开始积极设计和创建自己的网站的时候。

主题:

• HTML5、CSS3、JavaScript 基础知识
• HTML 标签
• 媒体询问和响应设计
• 图像和媒体
• jQuery
• 用 JS 创建一个基本的互动游戏

时长: 10 小时以上的互动课程

价格:免费

证书:不适用

优点:

• 关于前端开发语言的大量基础信息。
• 通过立即使用你学到的每一个概念和每一行代码，更好地保留信息。

缺点:

• 免费课程中包含的信息量有限(付费选项起价 3950 美元)。

网页设计商务课程与 WordPress 网页设计

WordPress 目前的市场份额是互联网上所有网站的+38%。因此，WordPress 网站和相关开发技能的市场几乎和一般的前端开发者一样大。

专攻 WordPress 可以帮助你迅速立足并建立你的作品集。但你不能只凭基本的网页设计技能就一头扎进去。

作为 WordPress 设计者/开发者的必要技能

首先，你需要编辑/创建 WordPress 主题的能力。这意味着你需要清楚地了解 WordPress 是如何工作的，以及 WordPress 开发基础:

• 循环(显示 WordPress 文章和页面内容的基本 PHP 函数)
• 古腾堡区块编辑器(以及区块如何在现场 WP 网站上显示)
• WordPress 模板层级(你需要编辑哪些页面模板以及如何创建子主题
• CSS 特异性(如何正确地调整和覆盖 CSS )

您还需要:

• 精通 HTML 和 CSS 以及网页设计基础
• 对 PHP 的基本了解
• 能够与流行的页面生成器 (Elementor、Divi 等)一起工作。)
• 熟悉流行主题

为了帮助你发展这些技能，看看我们关于学习 WordPress online 的 13 个地方的专门指南。

Dozens of learning platforms. Hundreds of blogs. Thousands of YouTube videos. How do you find the best web design courses in a crowded field? 🤯 Click to see the best options and get ready for a new career ✨Click to Tweet

摘要

从 YouTube 到程序员的付费和免费学习平台，再到在线大学课程，每个人都有适合自己的东西。尽管不是普遍的，免费网页设计课程中的信息会比付费课程更过时。

这仅仅是因为来自会员或学生的钱为教育工作者提供了更新课程和视频的预算。

付费网页设计课程也经常给你机会与老师互动，而不仅仅是其他学生。

没有必要在你不熟悉的课程或老师身上浪费时间。选择适合你目前水平和目标的网页设计课程，并坚持下去。

作为一名网页设计师，训练和发展你的技能的完美工具就在那里。

现在轮到你了:你参加过提高网页设计技能的课程吗？你的体验如何？分享到评论里吧！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

一个用户友好网站的 15 个网页设计原则

原文：https://kinsta.com/blog/web-design-principles/

想象一下，走进一家零售店去寻找一些新的工作服。当你环顾四周时，你注意到地板上的污渍，杂乱的货架，以及一股奇怪的气味。你会留在商店里从零售商那里买东西吗？

商店设计会影响顾客的行为——网站也是如此。

Clutch 对 612 人的调查发现，83%的参与者会注意到网站的设计是否美观和时尚。或者，50%的参与者会永远离开一个网站，如果他们认为内容不相关或不符合他们的需求。

那么，你如何设计一个客户会喜欢的网站呢？

这就是这篇文章的内容。我们将向你展示为什么良好的网页设计是必不可少的，并分享 15 个网页设计原则，你可以利用它们来建立一个高质量的网站。

查看我们的视频指南网页设计原则

为什么好的网页设计很重要？

网页设计师的平均年薪为 57，000 美元，比初级网页开发人员的平均年薪 44，000 美元多 8，000 美元。设计师获得合理的报酬是有原因的:他们的工作至关重要。

当一个新的潜在客户访问你的网站时，它会给你留下第一印象，影响他们未来与你的品牌的互动。正是在这一点上，他们形成了对你的第一印象。

你的网站也传达了你的品牌的身份，愿景，以及在行业内的地位。如果你有类似产品的竞争对手，一个让人惊叹的网站会让你更加难忘，提升你在竞争中的品牌知名度。

此外，一个强大的网站可以提高你的搜索引擎优化(SEO)努力。

搜索引擎在搜索结果中对网站进行排名时会考虑人们对网站的反应。如果你的跳出率很低，而人们经常访问你网站上的多个页面，搜索引擎可能会把你排在比跳出率高的竞争对手更高的位置。

技术 SEO 在这里也很重要。具有精心设计的标题、页面结构和链接的网站更容易访问。因此，搜索引擎和客户都喜欢它们。让我们来看看一些重要的网页设计原则。

Building a new site? ✨ Read this first... 👀Click to Tweet

有效网页设计的 15 个原则

当我们提到“网页设计原则”时，我们指的是设计网站或网页的结构和视觉元素的一般规则。每个品牌都有不同的网页设计原则——有些符合最佳实践，有些不符合。

为了帮助你打造一个优秀的网站，这里有 15 条网页设计原则(以及有效运用这些原则的网站示例):

1.页面应该易于导航

在 Clutch 对网站用户体验的研究中，94%的参与者认为网站导航是“最重要的网站功能”

这并不奇怪为什么。如果一个搜索引擎用户来到你的网站寻找关于“移动设计”的信息，但找不到，自然下一步是点击“返回”并尝试另一个网站。

你如何拥抱精心设计的导航？从酷俱乐部的网站上获取灵感。

当你进入酷俱乐部的主页时，网站的布局极其清晰。您可以使用左侧的按钮导航至关键产品部分(如“纸牌游戏”和“遗愿清单”)，使用右侧的按钮导航至“关于”和“联系”页面。

The Cool Club

酷俱乐部的产品页面也非常容易导航。该品牌目前有一个互动的卡片组，具有 54 个很酷的变化和相应的页面。你只需向下滚动并点击你想看更多的卡片。

The Cool Club’s website is interactive

要创建一个同样有效的网站，将内容分类成清晰的类别，比如页眉和页脚，并给它们起一个描述性的标题。然后，根据主题对页面进行排序，这样人们就可以轻松地在相似的主题之间导航。

此外，让你的页眉和页脚在整个网站上保持一致。

2.总是利用负面空间

负空间(或“空白空间”)是页面主题周围的区域，无论是图像、视频、文本还是按钮。

许多热情的营销人员争先恐后地填满一个页面上的每一个空闲空间，希望给访问者更多的信息会让他们更加投入。然而，这通常会导致令人不知所措的页面。

这就是负空间出现的原因。使用负空间强调每个页面最关键的元素，因为缺乏色彩会将访问者的眼睛吸引到更明亮的区域。

当然，“使用负空间”并不意味着“创建一个无聊的白色网站。”相反，你可以利用你的品牌颜色来利用空间，就像 Garoa 做的那样。

Garoa uses negative space for ambiance

Garoa 的主页使用奶油般的调色板来营造氛围，同时还利用了负空间。结果是你的眼睛会去看中间“秋季护肤”部分的介绍性内容，而不是不太重要的部分。

确保在您自己的网站中利用空白来展示的层次结构。

3.页面应该一致，但引人入胜

当你读到像“吉百利”、“好时”或“耐克”这样的品牌名称时，他们的标志、字体和设计风格很可能会立即浮现在脑海中。这就是品牌一致性的力量。

当设计你的网站时，用一致的元素制作页面，给你的品牌一个清晰的视觉识别。这意味着:

• 在标题中使用相同的字体、样式和颜色
• 保持页面之间视觉元素的间距相同
• 使用调色板而不是随机颜色
• 为新闻和博客文章等长格式内容设置布局指南
• 对所有页面使用网站模板

一致的页面不需要看起来完全一致。相反，你可以通过混合元素来平衡一致性和参与度。

例如，您可以为 H1、H2 和 H3 标题使用不同的字体和颜色。或者，你可以改变不同类型页面的布局，把事情混在一起。

4.拥抱互补色

互补色是成对的颜色，你可以将它们混合在一起，而不会让你的设计看起来令人眼花缭乱和丑陋。

颜色在屏幕上的显示方式遵循红色、绿色和蓝色(RGB)颜色模型，而不是印刷中使用的青色、洋红色、黄色和黑色(CMYK)模型。画家也经常使用红-黄-蓝(RYB)颜色模型，该模型认为互补色是红-绿、蓝-橙和黄-紫。

无论你更喜欢哪种模式，使用互补色都达到了与黑白相似的目的。互补色强调并为你的品牌创造一个清晰的视觉形象。

你可以在 Swab World 网站上看到这个。

在下面的截图中，血癌慈善机构使用绿色和品红色。当您访问不同的网站部分时，这些颜色会变成其他补色组合(尽管所有颜色的饱和度都相似，因此品牌保持一致)。

Complementary colors on Swab The World’s website

在你的设计中，互补色是一个简单的原则。如果你想保持简单，选择两种互补色，并将它们添加到对比元素中(如 H2 和正文)。或者在每页上使用每种颜色的多种阴影。

5.设计时要考虑你的目标受众

如果你看看酷孩子、Garoa 和 Swab World 的网站，你可能会注意到每个网站都有独特的“感觉”这种感觉来自于为观众量身定制网站的设计。

个性化是这里的最终目标。我们大多数人都喜欢购买我们觉得一致的品牌的产品和服务。事实上，研究表明，72%的消费者重视从“符合他们的信仰和价值观”的公司购买产品因此，如果有人访问你的网站，并看到他们的价值观，目标和优先事项在那里得到反映，他们更有可能从你这里购买。

要使你的网站设计个性化，请考虑:

• 具体来说，哪些图片能引起你的目标市场的共鸣
• 什么样的风格适合你的听众(例如，专业、简约、活泼等等)。)
• 你的目标市场来你的网站看什么主题
• 你如何通过网页设计传达你的品牌定位
• 您的受众对哪些行动号召(CTA)做出回应(以及您应该将它们放在哪里以优化您的点击率(CTR) )

如果你能利用网站自动化，根据用户的个人资料和之前与你的品牌的互动来提供个人体验，那就更好了。

从向目标人群销售不同产品的竞争对手或品牌那里汲取灵感可能会有所帮助。

6.字体应该是可读和可访问的

你在网站上使用的字体决定了你的访问者是否能阅读你写的内容。可以肯定地说，它们非常重要。

选择字体时首先要考虑的是网络安全。操作系统和网络浏览器都支持网页安全字体，因此它们可以在大多数设备上运行。

您还需要考虑可访问性。无障碍字体应该清晰易读，无论大小。例如，基于草书的字体不太容易理解，而 Times New Roman 则相当容易理解。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

此外，选择字体时，留意其他网站上的字体趋势。2021 年，数据科学家李立伟分析了超过 1000 个网站上的字体。他发现了以下趋势:

• 85%的字体不使用衬线(报纸字体中添加的小线条)
• 排名前五的字体包括无衬线字体、Arial 字体、Helvetica 字体、Helvetica 新字体和机器人字体
• H1 页眉有 58%的概率没有衬线(相比之下段落文本有 93%)
• 段落字体最常见的两种尺寸是 14 像素和 16 像素

你可以选择接受这些信息来选择一种符合人们在网站上寻找的字体样式。或者，你可以选择做一些不同的事情。

维珍是选择了第二种选择的品牌。维珍在下面的截图中使用了至少五种字体。这些字体分隔了页面的各个部分，使它们看起来很吸引人。

Virgin uses clear, readable, and engaging fonts

7.遵循菲特定律和希克定律

心理学家保罗·菲特在 1954 年首次提出了菲特定律，但它在 2022 年仍然与网页设计高度相关。菲特定律认为，目标的大小会影响人们到达目标所需的时间。

在网页设计或用户体验(UX)环境中，这意味着人们点击大按钮会花更少的时间，而点击小按钮会花更多的时间。因此，为了利用菲特定律，你应该让你的 CTA 按钮非常大和突出，这样它们更容易点击。

“简单”在这里至关重要。由英国心理学家威廉·埃德蒙·希克和美国心理学家雷·海曼提出的希克定律认为，人们在每次做决定时都会感到疲劳。

所以，你让网站访问者做的决定越多，他们就越有可能变得疲劳而无法坚持到底。

8.使用不变性突出关键信息

当某样东西“不变”时，它会从几个非常相似的选项中脱颖而出，成为一个独特的选项。不变性最明显的例子是在定价页面的计划中突出显示，就像 Box 中的这个。

Invariance on Box’s pricing page

但这不是你使用不变性的唯一方式。不变性可以帮助你在页面上建立一个视觉层次，突出关键信息，把人们吸引到页面的重要部分。

例如，看看 Frans Hals 博物馆如何使用不变性在其主页上创建视觉层次:

The Frans Hals Museum uses a visual hierarchy

该图中的层次如下:“欢迎”标志、图像、“购买门票”标志、“所有展览”标志，然后是其他内容。

要使用不变性来创建您自己的层次结构，请按重要性顺序排列页面元素。然后，调整每个元素的大小、颜色和位置，直到访问者的视线按照你想要的顺序到达每个元素。

9.在 CTA 中:使用人们想点击的清晰语言

我们提到了让你的按钮变大并且易于点击的重要性，但是当你创建按钮的时候，尺寸不是你应该考虑的唯一的事情。

可点击按钮同时具有描述性和说服力。他们让访问者好奇这个按钮链接到什么，并给他们一个去那里的理由。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

一种方法是使用详细的按钮文本，如“点击这里阅读我们的博客”、“在这里找到我们的营销秘密”或“这是我们的 2022 年报告。”另一个是让你的按钮在视觉上令人兴奋或独特。

雨林保护者采取了这两种方法。雨林保护者允许你通过访问不同的地点来浏览亚马逊雨林。每个位置的按钮都包括一个图像和一个动作，比如“参观村庄”

10.利用 F 模式或 Z 模式

13 年来，尼尔森诺曼集团(NN Group)的研究人员使用眼球追踪来观察 500 多人如何参与内容。这导致他们开发了 F 模式，即人们做的第一件事是向下扫描页面，然后他们从左向右阅读。像这样:

The F-shaped pattern people follow on websites

你可以在你的网站上利用 F 模式，围绕它或一个替代模型来组织你的内容。

脸书在其主页上使用了一个著名的 Z 形图案。当你访问这个页面时，你的眼睛会看到“脸书”标志，然后是“登录”按钮，然后是左边的图片，最后是“创建帐户”按钮。

Facebook homepage Z pattern

11.好的网站速度快，移动友好

截至 2021 年第四季度，全球 54.4% 的网站流量来自移动设备。所以，如果你的网站不支持手机，你可以把流量减半。

速度也会影响网站的有机流量。谷歌的研究显示，如果一个网站的加载时间超过三秒，53%的人会离开。

让你的网站移动友好或快速的最简单的方法是选择一个由专业设计师制作的快速网站主题。或者，如果你想更多地参与你的网站设计，你可以定制一个响应式网站。

这就是 1917 年电影背后的设计师们所做的。 1917 的网站提供身临其境的体验，让人们投入到电影中。它是专门为移动设备设计的，因为你可以用手指在一战的战壕中四处移动。

917’s website is designed for mobile devices

如果你观察敏锐，你会注意到 1917 的网站也利用了 F 模式。

12.将文本分成小块

考虑一下这个:你搜索“智力游戏”,发现一个网页似乎很有前途。然而，当你点击它时，你会被难以阅读的大段文字淹没。

像许多人一样，你可能会点击关闭网站(不管内容多么有前途！).

密苏里科技大学的眼球追踪研究显示，网站访问者阅读文本的平均时间为 5.59 秒。所以，如果人们不能在这段时间内阅读你的文本，你就不太可能恰当地吸引他们。

通过将文本分成小块来解决这个问题。此外:

• 使用短句
• 远离口语
• 为您使用的任何行业专用词提供定义
• 避免“紫色散文”(不必要的隐喻、副词和形容词)

13.使用网格

当我们说“使用网格”时，我们并不是说你应该让你的网站看起来像一个 Excel 表格。相反，把你的网站分成不同的部分，为特定的目的服务，这样访问者可以快速找到内容。

你不需要使用网格线来做到这一点。相反，像阿特拉森一样，用颜色、负空间和阴影来区分网格空间。Atlason 的主页在网格中展示了新的和最畅销的产品。由于访问者可能会寻找这些产品，网格可以帮助他们在几秒钟内找到它们。

Atlason uses a grid for each product

在你的网站上使用网格最简单的方法之一是选择一个使用网格的主题。示例包括网格框架、砖石网格和穿梭网格。

14.记住平衡

在网页设计的背景下，“平衡”指的是设计元素相互之间的关系以及这些元素是否和谐。有很多方法可以在你的网站上创造平衡，包括一些网页设计原则:

• 通过对称(包括两侧对称、径向对称或平移对称)
• 使用互补色或对比色
• 使用相似形状和大小的元素
• 使用重复的模式

你可以在 Woven 的网站上看到《行动中的平衡》。这个网站使用平衡的调色板，黑色和白色在文本中形成对比，对称吸引访问者对内容的注意。

Woven’s website uses symmetry to draw your eyes down

15.注意细节

格式塔理论说，人们在看单个元素之前，先把事物看成一个整体。或者像库尔特·考夫卡说的:“整体独立于部分而存在。”虽然人们通常参考心理学的格式塔理论，但它也适用于网页设计。

你需要注意你网站上的小细节，以确保你的设计看起来完美无缺。在设计某些东西时，很容易专注于标题、图像和 CTA 等重要元素，而忘记其他东西，如:

• 页脚和页眉图标
• 社交媒体按钮
• 你如何有效地将你的网站转换成 WordPress(如果适用的话)
• 文本间距
• 打字错误和语法错误
• 浏览器兼容性
• 图像尺寸

在点击“发布”之前仔细检查这些元素，确保你的网站传达出专业性。你可能会忽略小瑕疵，但访客不会。

此外，与网页设计原则的新趋势和概念保持同步。把这些添加到你的网站上会让它看起来新，新鲜，吸引人。

When it comes to web design, winging it won't cut it 😅 Check out these guidelines to make sure your new site is customer-friendly 💪Click to Tweet ## 摘要

一家设计良好的零售店可以提升顾客体验，而一家糟糕的零售店可能会让顾客永远远离你的品牌。网页设计也是一样。

建立一个视觉上吸引人的网站不仅仅是一个有趣的项目。它可以帮助您:

• 传达专业精神
• 与你的访问者建立信任
• 从你的竞争对手中脱颖而出
• 从搜索引擎吸引有机流量

利用本文中的网页设计原则来构建一个让访问者惊叹不已的网站

既然我们已经讨论了所有我们知道的关于网页设计的内容，我们很想听听你的意见。当你访问一个品牌的网站时，你会注意到什么？此外，您是否使用了我们在您的网站上没有提到的原则？请在下面的评论中告诉我们。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

回望顶级网页设计趋势(2018-2019)

原文：https://kinsta.com/blog/web-design-trends/

网页设计是不断发展的。随着技术变得越来越强大，设计师们不断尝试新的风格，每年网络世界都会呈现出一系列令人兴奋的独特趋势。根据近年来出现的设计以及正在开发的新技术，可以预测 2020 年将会发生什么。

让我们回顾一下过去几年的网页设计，并研究一下新兴的风格，这样你就可以知道在即将到来的新的一年及以后会有什么期待。

为什么要跟上潮流？

不是每个网页设计时尚都是可行的，这是肯定的。做任何事情都有时间和地点，毫无理由地改造你的网站弊大于利，尤其是以牺牲可用性和 UX 为代价的时候。

但是，尽管你不应该在没有认真考虑的情况下就对你的网站进行改版，但跟上网页设计的趋势，尤其是那些基于技术进步的趋势，肯定是有好处的。

例如，如果你还没有听说过人工智能聊天机器人、渐进式网络应用或 CSS 网格，你可能正在使用过时的技术，这会让你失去转换。想想响应式设计对于互联网是多么具有革命性；你不想在下一次类似的发展再次发生时最后一个上船。

即使这些趋势纯粹是美学上的，跟上它们还是有好处的。例如，一个纯白、干净、简单的网站可能是有用的。但是随着过去几年网页设计越来越前卫，用户也觉得很无聊。

即使是像添加更多的颜色、破碎的网格或微交互动画这样的小变化，也会对保持网站的相关性大有帮助。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

此外，随着网页设计者成长、学习和适应新技术，这些进步和趋势在美观和功能性方面都变得越来越好。想想 20 年前甚至 10 年前网站的样子和运作方式…我们已经走过了很长的路，还有很长的路要走。

如果你看到一个符合你品牌的现代网页设计趋势，并且有助于或者至少不会损害可用性，那就值得一试。

回顾:2018 年网页设计趋势

随着 2020 年的到来，2018 年似乎越来越远。但即使出现了全新的风格，它的趋势仍然继续影响着网络，因为其中许多仍然与现代设计相关，所以回头看看我们已经走了多远是很好的。

几年来，网页设计一直在远离极简主义的简单，朝着大胆的个人主义发展，但这一切在 2018 年达到了顶峰。即使是现在，我们仍然可以感受到它的影响，互联网肯定会继续充满原创的、独特的风格。

2D 插图，三维动画

An example of a 2D illustration (Source: Nomadic Tribe)

插图是传达个性的最佳方式之一，2D 的画越来越多。它们有助于品牌推广，让你的网站更加令人难忘，所以这并不奇怪。一个有着惊人插图的网站不太可能被遗忘。

3D 背景动画也变得越来越受欢迎，这要归功于浏览器、动画技术以及电脑和手机等设备的强大功能。3D 动画在作品集和代理网站上尤为常见，它能立即吸引人们的注意力，并提供有趣的 UI 互动机会。

在未来，手工制作的插图和动画只会越来越受欢迎。他们以一种其他方式无法展示的方式展示你的品牌个性(事实证明这是一种策略)。

微妙、扁平和极简主义

Flat design was quite popular (Source: Webflow)

尽管越来越多的原创风格脱颖而出，极简主义仍然主导着互联网。干净简单无疑是吸引人的，即使是在以明亮的颜色或实验元素为特色的网站中，它也经常伴随着单调的设计。

然而，“平面 2.0”，或半平面设计，由于使用了阴影、渐变和其他稍微复杂一些的元素，变得更加根深蒂固。只要极简主义存在，设计师们就会找到一种方法让它旋转起来。

微妙的动画也是 2018 年的一大部分，轻微的视差和温和的悬停效果随处可见。这些允许极简主义网站保持其简单性，同时使整体设计更加漂亮。

线形设计

大多数网站在某种程度上包括多边形和几何图形，但几何设计是 2018 年趋势的一大部分。网站完全是围绕简单的形状制作的，如正方形、长方形和线条，它们的特色是更小的细节，如按钮或装饰框。

其中很大一部分是有机的几何形状，或者那些有点不规则和不完美的形状。它们通常以柔和的角和不对称为特征，它们不同寻常的外观相当有趣。多边形的尖角和有机几何的圆边经常被结合在一起以创造一种视觉上吸引人的对比。

Geometric designs ruled the day  (Source: GiftRocket)

明亮大胆的颜色

曾经平淡无奇的互联网现在充满了色彩，充满活力和冒险的调色板遍布每个角落。每种配色方案中一两种柔和色调的日子正在消逝，明亮大胆的调色板很快取而代之。

渐变无处不在，甚至在今天仍然是一个流行的选择，它们强烈而鲜明的色彩充满了许多著名网站的标题。

Bold colors spoke volumes  (Source: Spotify)

除了活泼的配色方案外，还有毛刺和失真效果，明亮的闪烁动画出现在许多设计师或开发人员的作品中。虽然它的受欢迎程度有所下降，但你仍然可以在网上找到它们。

破碎网格设计

All hail the broken grid  (Source: Startup Lab)

大多数网站都是建立在一个简单的基于网格的布局上，元素被整齐地划分成几个部分。破碎的网格设计打破了这种期望，重叠的元素，将对称性抛到了窗外。这种非传统的布局是打破模式和脱颖而出的最引人注目的方式之一。

另一个引起很多关注的风格是分屏设计，这种技术将屏幕分成两个面板，每个面板都有自己的内容。总的来说，布局变得有趣多了。

人工智能和机器学习

聊天机器人是一件大事。这些漂亮的程序动态响应客户，部分或完全自动化支持或购买过程。机器学习允许他们检查数据，学习如何回答问题和评论，并减轻人类支持代理的一些工作量。

但这仅仅是开始。随着技术的不断进步，人工智能和机器学习必将与在线系统更加融合。

野蛮主义的兴起

Brutalism is rough on the eyes but makes a statement  (Source: The Outline)

野蛮主义并不好看，但它奇特的吸引力赢得了许多人的心。以花哨的颜色、反 UX 的选择和无处不在的设计为特征，野蛮主义鼓励设计师疯狂地创建一个违背预期的网站。你应该期待在未来看到更多这种不统一的风格。

用网页设计讲故事

Design can be used to tell a story  -(Source: Atlassian)

视觉效果是有效传达信息的最佳方式之一，无论你是想讲述一个故事，还是让大量数据可读。网页设计师通过迷人的插图和数据可视化讲述他们的故事，互动和视觉设计使他们的信息更吸引人，更容易理解。

2019 年最大的网页设计趋势

2019 年与 2018 年分享了许多网页设计趋势，比如破碎的网格设计和大胆的调色板。但是事情变得更加疯狂，大胆的设计师进行了大量的实验。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

2019 年的跑步主题:规则弯曲和打破。白色，平面，网格为基础的极简主义，明亮和大胆的不对称。虽然干净的设计和留白永远是一个很大的竞争者，但设计师们最近更愿意尝试新事物。我们看到其中许多将在 2020 年全面实施。

活力和色彩实验

Vibrant colors dominated  (Source: Fotonaut)

互联网越来越丰富多彩。渐变现在很常见，网站经常展示几年前闻所未闻的明亮而浮华的调色板。调色板本身更具实验性，打破了通常互补色或对比色的模式，到处都是。

网站不再炫耀同样的一两种简单、柔和的颜色。柔和的色彩、明亮的色调以及各种尺寸的调色板正在占据主导地位。鲜明的对比，柔和的微妙，充满个性的调色板混合在一起，使互联网更加多样化。

单色也是现在的一大时尚。这通常表现为完全黑白或灰度的黑色网站，但你也可以找到只使用单一颜色的网站。

更多插图

Illustrations were still popular  (Source: absurd)

插图和视觉内容在 2018 年也很重要，但它们仍在继续发展。艺术家们正在采取措施，远离大多数网站采用的典型、简单的插图风格，尝试一些稍微不同的东西。

一个新兴的趋势是古怪、有趣的艺术，它偏离常态，尝试一种更抽象、更随意的风格。这些插图无视典型的界限，完全不怕展示创作者的个性。

3D 插图也相当受欢迎。这只是平面艺术潮流中的一个小小的转变，但却给它注入了许多新的生命。其中一些是 2D 的作品，看起来是 3D 的，而另一些是真实的三维渲染。不管怎样，它们正随着 3D 网络动画迅速获得牵引力。

And 3D illustrations made an impact  (Source: Jet Style)

最后但并非最不重要的趋势是动画。动画艺术能立即吸引人们的注意力，并给已经很有表现力的艺术形式增加了一层额外的个性。随着这种时尚获得关注，2D 和 3D 动画艺术都将继续发展。

大胆的设计

2019 网页设计可以用三个字来概括:大而大胆。规模越大，实验性越强越好，尤其是当最终结果华而不实，需要立即引起注意的时候。

野兽派网页设计仍然很强大，整个网站都致力于收集野兽派的精华。这种赤裸裸的、丑陋的、反用户的艺术形式无疑表明了一个事实:网页设计从来都只是为了创造良好的用户体验，但是野蛮主义试图把它变成一件艺术品。尚不清楚野蛮主义会持续多久，但这一趋势仍然有狂热的追随者。

Brutalism is still dominate  (Source: Visualbox)

似乎一切都变得越来越大，但最大的影响是排版和导航。几乎整个屏幕都是文字，甚至完全围绕排版进行设计，几乎没有图像，这种情况并不少见。

厌倦了你的 WordPress 站点缓慢的主机？我们提供超快的服务器和来自 WordPress 专家的 24/7 世界级支持。查看我们的计划

字体也变得更有创意，特别是感谢彩色字体，这使得定制和渲染看起来像是在 Photoshop 中增强的字体终于成为可能。字体设计作为一个焦点现在是一个可行的网页设计方法。

导航也在拓展。精致的标题导航和优雅的下拉菜单或汉堡菜单正被主流显示所取代，整个屏幕都被用来导航，也经常围绕着巨大的印刷字体。在这份详细的指南中，你可以了解更多关于网站导航最佳实践。

Header designs have made an impact as well  (Source: Tribu)

请留意网页上生动的英雄视频标题、动画背景和更多的视频内容。视频元素曾经是一个问题，因为它们加载速度慢，占用有限的移动数据，但更强大的硬件和后备图像意味着你现在可以在任何地方使用视频。那个拥有全屏动画背景的华丽网站，曾经很少见，现在将变得越来越普遍。

不对称

Assymetry is still very popular  (Source: New Flight)

破碎网格设计仍然非常流行。网站经常选择避免典型的布局，选择更艺术的东西，在整个屏幕上有大量重叠的部分和元素。这是一种很难成功的风格，但是一旦你成功了，它看起来就很棒。

但是对于那些对完全打破模式不感兴趣的人来说，一点点的不对称是一个可以接受的选择。不对称分屏设计尤其受欢迎，即使这些网站仍然坚持网格。

说到网格，CSS grid 是对 CSS 的一个超级强大的补充，可以在二维、列和行中工作，并允许您轻松地从头开始创建网站布局。用一点 CSS 魔法你也可以创建一个破碎的网格布局，所以一切皆有可能。Web 设计人员和开发人员开始接触 CSS grid，所以不要错过。

更多效果和动画

Animations can have a positive impact on UI and UX design  (Source: 3H-i)

尽管野蛮主义在网络的某些角落变得司空见惯，但其余的都集中在 UI/UX 设计上:创造更漂亮的界面，同时改善用户体验。

其中很大一部分是在微观互动中。想一想悬停在商店的产品上，或者玩一个互动的动画背景。这些微小的动画使网站导航更加有趣，并为点击和悬停这样的小交互带来乐趣。一些网站甚至实现了可爱的迷你游戏。

但这不全是为了好玩。微交互通常与普通的微妙动画有着相同的目的:它们将用户的注意力引向重要的 UI 元素。过度实现会很快变得陈旧，所以这是一个计算出你的网站上应该包含多少动画的游戏。

滚动和视差效果当然一如既往地受欢迎，可以给页面添加动态的分层外观，使其更加有趣。

此外，请注意自定义光标。这些曾经很少出现在小型博客或儿童网站之外，但现在它们是一个流行的选择，尤其是围绕 3D 动画背景或导航构建的网站。一个优雅的自定义光标真的可以提升你的审美。

空格

White space still wins  (Source: Apple)

一如既往，留白和简洁的设计将继续在网页设计趋势中占有一席之地。简单干净是一个安全的选择:这是为什么这种风格出现在几乎每一个现代网站上的原因。

但是，即使你的目标是一个更大胆、更独特的方法，空白仍然是你需要解决的问题。每个站点都需要呼吸空间，留白可以用来精心突出和强调图片或其他内容。

大量的空白空间可以发挥很大的作用，整个屏幕都留白，给重要的元素留出足够的空间。最大限度的留白是一种风格，很可能会在未来几年持续下去。

渐进式网络应用

移动设计的下一件大事:渐进式网络应用。这些基于网络的平台建立在像 HTML T1 和 T2 JavaScript T3 这样的代码之上，但是它们的功能和行为就像是移动用户的迷你应用。它们旨在提供应用程序的体验，而不需要实际建立在移动技术上或发布在应用程序商店上。

pwa 可以离线工作，可以发送通知，可以被钉在主屏幕上，但是你不需要下载或者分发任何东西。它们很轻，加载速度也很快，所以不会占用太多带宽。

甚至 Twitter 也加入了 PWAs，为网速慢的人开发了 Twitter Lite 作为解决方案。他们最终把这个系统集成到了他们的主界面上。这证明了这项技术的有效性。

如果你还没有听说过渐进式网络应用，你一定要做一些研究。建立一个可以让你的移动用户体验更流畅。

Looking for ideas to give your #WordPress site a facelift? Check out the latest web design trends of recent years and get inspired! 👩‍🎨💡Click to Tweet

摘要

2018 年和 2019 年对于网络世界来说是激动人心的几年。2020 已经带来了更多冒险的设计。在接下来的几年里，像不对称、明亮的颜色、野蛮主义和引人注目的动画等打破规则的元素将继续流行。

谁知道接下来会发生什么？我们肯定会迎来更多非传统的新艺术风格。

如果你还没有明白，也许是时候重新构思你的一些设计，抓住这些热门的新趋势了。期待看到品牌和设计师真正开始表达自己，互联网变得更加充满活力和有趣。

下一个十年的网页设计很可能以冒险和创新为特征，所以确保你准备好跟上时代。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

2022 年网页设计师的平均工资是多少？深入研究数据

原文：https://kinsta.com/blog/web-designer-salary/

网页设计为充满激情的创作者提供了一种现代的、独特的方式来表达他们在视觉设计中的创造力和技能。这是一个令人兴奋的职业，尤其是在这个网页设计和开发领域的发展时期。

任何网页设计师都会告诉你，这份工作有起有落。但当它是你真正想做的事情时，它可能是一个令人满意的职业。

但这里有一个大问题:网站设计师的薪水能支付账单吗？如果你决定投身于网页设计事业，你期望得到多少薪水？答案是，这取决于很多因素。

无论你是成为一名自由职业者，全职工作，还是在 WordPress 工作，我们收集了所有经验水平的网页设计师的薪水。

现在让我们看看是否值得努力学习。

做一个网页设计师需要什么？

在你担心网页设计师挣多少钱之前，工作要求是什么？除非你遇到他们，否则你根本无法打入这个行业。

在你申请你的第一份网页设计工作之前，准备好这些核心技能。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

第一:教育。严格来说，没有必要拥有学位，雇主越来越多地只根据经验和才能来招聘员工。尽管如此，这还是在冒险，所以至少，你需要有设计、计算机技术或其他相关技能的大专文凭。学士学位就更好了。查看我们的最佳网页设计在线课程指南。

不管有没有学位，你都需要经验，你应该创建一个文件夹来展示你以前的工作。一份好的投资组合可以让你被雇佣。

最后，要成为一名网页设计师，你需要广泛的技能，有些是技术性的，有些是创造性的。

• 平面设计技巧
• 熟练使用网页设计工具(Photoshop，Sketch，InVision Studio 等)。)
• 一些前端编程知识: HTML 、 CSS 、 JavaScript 等。
• 团队合作和沟通技巧
• 了解 web 标准，如 SEO 、可访问性和其他协议。

有兴趣成为网页设计师吗？✅读此先⬇️ 点击推文

网页设计师的日常工作

作为一名网页设计师，你的任务会根据你在一个项目中的进度而有所不同。你可能会花一整天的时间为客户完善草图和线框，或者为其他人用 HTML 编写整个模型。

从学习交易工具开始。传统的 Adobe 套件(Photoshop、InDesign、XD、Dreamweaver)仍然是许多网页设计师坚持使用的。不过，还有很多更便宜的选择。其中包括 Sketch、Figma、InVision Studio、GIMP、UXPin 等等。

掌握一些编码语言也很重要。HTML，CSS，JavaScript 是必须的。框架和像 Bootstrap 这样的库也值得一看。此外，你还可以选择学习一门 最好的编程语言来学习 ，比如 PHP ，Python 或者 Ruby。

知道这些工具当然很好，但是网页设计师用它们做什么呢？

大多数项目都遵循类似的过程。

第一:概念阶段。这就是沟通技巧的用武之地。你将和其他人一起想出一个网站的概念，项目/品牌指南，和最后期限。这只是概述了项目的范围和跳跃的想法。

然后真正的工作开始了。你将勾画出网站设计，并制作线框，直到你缩小了一个更具体的想法。你可以制作一个网站地图来更好地理解所有的东西是如何布局的。

然后:模型。这些是关于实际网站外观的更深入的想法，尽管你仍然会得到大量的客户输入。在这里，你将改变颜色、定位、排版和其他设计元素，使之尽善尽美。

在开发者的帮助下，一旦你有了一个可以工作的网站，接下来就是测试和发布了。确保一切正常运行，没有遗漏任何东西。这就是设计师端网站创建的通常流程。

网页设计师的平均工资

虽然有几个因素将决定你期望获得什么样的薪酬——经验、技能或平台的数量——但了解大多数设计师的平均薪酬是有好处的。

这将让你知道一旦你确立了自己的地位，你会期望得到什么。你也可以将它与你感兴趣的其他工作的平均工资进行比较，看看哪一份工资最高。例如，网站开发人员的薪水通常在每年 6 万到 7.5 万美元之间。

网页设计工资如何比较？

• 玻璃门:53k 美元/年，低的 38k 美元，高的 74k 美元。
• 工资等级:51k 美元/年，最低 35k 美元，最高 74k 美元。
• zip recruiter:6 万美元/年，低的 2.1 万美元，高的 11.4 万美元。
• Salary.com:6.5 万美元/年，最低 5 万美元，最高 7.7 万美元。

把所有这些数据放在一起，一个网页设计师的平均年薪大约是 5.7 万美元。

Average web designer salary

这些网站收集了来自世界各地的设计师自我报告的薪水。它不像政府收集的数据那样官方，但你可以假设它是相当准确的，有一些误差。

与有经验的 web 开发人员的收入相比，这个工资并不算高。但是，尽管这个行业对网页设计的重视程度低于对开发的重视程度，但你不会因为你的工作而赚到一分钱。一旦你有了稳定的收入，你就应该能够挣到可以维持生活的工资。

在视觉艺术领域，这也是一份收入颇丰的工作——你会比平面设计师、艺术家、插画师或摄影师挣得更多。

网页设计 vs. UI 设计 vs. UX 设计薪资

网页设计和 UI/UX 设计齐头并进。大多数设计师对 UI 都有足够的了解，但是这是一个非常复杂的工作，你可以选择把它作为职业。把 UI/UX 设计看作是网页设计的一种特殊形式。

UI，或用户界面，设计师创建网站界面。他们是完善网站精确间距、布局和互动的人。当网页设计师在大画面上工作，选择元素的颜色或一般布局时，用户界面设计师处理最小的细节。

• glass door:85k 美元/年，低的 59k 美元，高的 128k 美元。
• 工资等级:64k 美元/年，最低 44k 美元，最高 92k 美元。
• 确实:8.7 万美元/年。

平均下来，你会得到 79k 美元/年的 UI 设计师工资。

还有 UX 的设计师。虽然 UI 设计师让这些细节看起来更好，但让它们感觉更好是 UX 设计师的工作。它们确保浏览网站的感觉良好，动画在恰当的时刻触发，带来完美的体验。

• glass door:85k 美元/年，低的 59k 美元，高的 128k 美元。
• 工资等级:7.4 万美元/年，最低 5 万美元，最高 10.8 万美元。
• 的确:10.3 万美元/年。

这里的范围变化很大，但平均每年你可以赚 87 万美元。

最后，还有 UI/UX 设计师组合。这两个工作有很多重叠的地方，所以很多设计师都选择兼收并蓄。

• glass door:85k 美元/年，低的 59k 美元，高的 128k 美元。
• 确实:87k 美元/年到 103k 美元/年。
• zip recruiter:96k 美元/年，低的 34k 美元，高的 150k 美元。

平均起来，UI/UX 设计师每年可以赚 8.9 万美元。

UI and UX designer salary

如你所见，UI/UX 设计师确实比网页设计师挣得多一点。

这可能是因为这是一份更专业的工作，需要更多的经验，也因为它在更大的项目中更受欢迎。每个项目，无论大小，都需要一个网页设计师。但是，更大的、薪水更高的工作会雇佣多个不同专业的设计师。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

网页设计经验工资

经验水平是另一个对你作为网页设计师的收入有很大影响的因素。更多的经验意味着更高的报酬。

作为大三学生，你只有不到三年的经验。你应该大致了解网页设计是如何工作的，也许已经有了一两个项目，但是会有津贴来帮助你适应公司。

• glass door:5 万美元/年，低的 3.6 万美元，高的 7 万美元。
• Linkedin:41k 美元/年，低的 31k 美元，高的 58k 美元。
• 工资等级:4 万美元/年，最低 3 万美元，最高 5.9 万美元。
• zip recruiter:45k 美元/年，低的 31k 美元，高的 59k 美元。

总的来说，初级设计师的年薪约为 4.4 万美元，远低于设计师整体的平均水平。

Junior web designer salary

另一方面，大四学生一般都有 5 年以上的工作经验。到那时你应该知道你在做什么，并且以前做过很多项目。这伴随着高得多的薪水。

• glass door:64k 美元/年，低的 46k 美元，高的 90k 美元。
• 工资等级:7.1 万美元/年，最低 5 万美元，最高 9.8 万美元。
• zip recruiter:8.2 万美元/年，低的 4.2 万美元，高的 13 万美元。

这让高级网页设计师每年赚 72000 美元，比初级设计师多将近 30000 美元。

Senior web designer salary

不出所料，大三学生的工资比网页设计的平均工资低一点，大四学生的工资高一点。这不是额外收入的爆炸式增长，但是一旦你进入这个行业，你肯定可以期望赚更多的钱。

自由职业网页设计薪水

初级和高级职位是公司中受薪职位的专有职位。许多潜在的设计师选择成为自由职业者，主动寻找客户和承接项目。那你预计能赚多少？

Freelance web designer salary

• glass door:79k 美元/年，低的 58k 美元，高的 110k 美元。
• zip recruiter:56k 美元/年，低的 24k 美元，高的 112k 美元。

没有太多的数据，因为许多自由职业者不报告他们的工资，收入范围可能相当不稳定。但是成功的自由职业者似乎比初级设计师挣得多，年薪 6.8 万美元。

如果你擅长搞定客户，你的薪水可能会相当不错。这肯定不如有薪工作可靠，但许多人已经设法通过自由职业过上了不错的生活。

WordPress 网页设计师工资

WordPress 网站设计者有一套独特的技能来更好地使用这个流行的平台。你可以使用 HTML 和 CSS 在 WordPress 的界面中设计网站，或者甚至学习一点 Javascript 和 PHP 成为一名主题设计师。这是你做这件事能挣多少钱。

需要为您的客户站点提供超快的、安全的、开发人员友好的托管服务吗？Kinsta 是为 WordPress 开发者设计的，提供了大量的工具和强大的仪表板。查看我们的计划

• 玻璃门:53k 美元/年，低的 38k 美元，高的 74k 美元。
• zip recruiter:55k 美元/年，低的 31k 美元，高的 91k 美元。
• 工资等级:45k 美元/年，最低 33k 美元，最高 64k 美元。

这意味着 WordPress 的设计师每年可以赚 51，000 美元。

WordPress web designer salary

WordPress web 设计和开发是一个有点过饱和的领域。这是最容易上手的平台之一，尤其是对自由职业者来说。但这意味着激烈的竞争。除非你擅长设计和自我营销，否则不要指望赚很多钱。

混合设计师-开发人员工资

你可能会认为一个能处理好网页设计各个方面的人是稀有且有价值的商品。做一个会编码的网页设计师，或者一个会设计的程序员需要很多技巧。他们甚至被称为 web 开发社区中的“独角兽”,因为他们非常罕见。但是工资值得努力吗？

• glass door:58k/年，低的 39k，高的 84k。
• 工资等级:58k 美元/年，最低 39k 美元，最高 89k 美元。

这里列出的薪水非常相似，所以你可以假设平均年薪为 5.8 万美元。

Hybrid designer developer salary

混合设计师和开发人员的收入肯定高于平均水平，但工作量翻倍，你的工资也不会翻倍。如果你喜欢自己制作小网站，这可能是一份值得追求的工作，但大多数时候你的额外资产会被闲置。

无论如何，许多人更喜欢雇佣不同的设计师和开发人员。对于更大的项目，你不可能一个人处理所有的事情。

虽然它可以帮助你作为一个设计师了解开发人员是如何处理事情的，也可以让你更快地实现你自己的想法，但最好还是坚持其中的一个。

尽管如此，拥有一些前端语言的编码能力，如 Javascript、CSS 和 HTML，是非常可取的，可以增加你被雇用的机会。

网页设计师与网页开发人员的工资

不幸的是，网页设计师往往比他们的编程同行挣得少。但是差别到底有多大呢？

平均而言，网页开发人员的年薪为 6 万-7.5 万美元，而网页设计师的年薪仅为 5.7 万美元。这里的差异相当大。

此外，还有其他因素需要考虑。初级开发人员平均年薪为 5.5 万美元，而高级开发人员年薪为 9.2 万美元。相比之下，在完全相同的经验水平下，设计师的费用为每年 44，000 美元和每年 72，000 美元。开发商开始赚得更多，收入增长更快。

最后，自由职业的网络开发人员每年能挣 72000-75000 美元，而自由设计师每年只能挣 68000 美元。

两者对于创建一个成功的网站都是必要的，为什么会有差异呢？可悲的是，许多创造性的工作报酬不高，设计工作往往被低估。平心而论，开发者需要掌握多种复杂的编程语言，并学会如何应用。但是这两项工作都需要很多技能。

这并不意味着网页设计师什么也赚不到。你仍然可以赚很多钱，尤其是如果你投身于像用户界面/UX 设计或移动应用程序设计这样的高薪领域。

如果你乐意做任何一份工作，那么仅仅为了更高的薪水去追求发展是值得的。但是设计师也是一样必要的，如果这是你想做的工作，没有理由放弃它。

你应该成为一名网页设计师吗？

知道了开发者赚钱多，你可能会问:网页设计是我想从事的职业吗？

虽然网络开发人员的平均收入确实更高，但这并不是为了一些潜在的不相容的东西而放弃你梦想中的职业的理由。这两者在网站创建过程中做的事情非常不同。

开发人员使用复杂的编程语言来创建设计的合理实现，而设计师则采用更直观的方法，专注于创造功能美。设计师做计划，开发人员负责实施。

成为一名设计师或开发人员所需的许多技能是重叠的，但是你每天所做的很多事情是完全不同的。如果你更喜欢计划和视觉学习，大图胜于小细节，网页设计将会是你的完美选择。

如果你对薪水不满意，可以考虑专攻。多面手的网页设计师很常见，而熟练的 UX 设计师或手机设计师则不多见。缩小和完善你的技能组合是可以赚钱的。

Web 开发是一个不断增长的行业，哪里有开发者，哪里就需要设计师。如果这是你想要的职业，工资还算公道，行业也在成长。现在是成为网页设计师的好时机！

Before you take your next career leap, let's do the math and learn how much you can expect to make as a web designer 💰Click to Tweet

摘要

网页设计肯定不是这个领域里收入最高的工作，但这并不意味着它不值得追求。你可以从中成就一份伟大的事业，尤其是如果你追求像 UI/UX 设计这样的利基领域。你的经验越多，你挣的就越多。

网页设计师平均年薪为 5.7 万美元。这将受到一些因素的影响，比如你在公司的职位，如果你专攻 UI 设计，或者你选择使用什么平台。刚开始你可能会挣得少一些，但是坚持下去，你肯定会挣得更多。

不要低估你自己，知道你应该为什么样的工资而工作，学习你所在行业的最佳实践。如果你知道如何运用自己，成为一名成功的网页设计师是不太可能的。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

Web 开发人员的平均工资是多少？这是 2022 年的数据

原文：https://kinsta.com/blog/web-developer-salary/

想成为一名网络开发人员，或者对什么类型的工作报酬最高感到好奇？Web 开发是一个竞争激烈、变化多端的行业，随着新语言和新框架的出现，它也在不断发展。

问一个网络开发人员的薪水是一个棘手的问题(我们试着为 WordPress 开发人员回答这个问题)。要考虑的因素太多了。

无论你是一名自由开发人员，还是对追求更传统的工作感兴趣，更喜欢前端或后端工作，或者想知道什么语言是最好的投资，这里有一个有用的指南，让你了解你应该期望的薪水。

准备好知道了吗？让我们开始吧！

查看我们的视频指南成为一名网页开发者

Web 开发人员需求量大吗？

Web 开发(和一般的软件开发)是世界上最受欢迎和发展最快的行业之一。对于任何类型的开发者来说，这都是一个非常好的时机。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

尽管这一行业在发展，但工资仍在持续增长。如今，网络开发人员并没有过度饱和。

对开发人员的需求正在激增。不利的一面是，这可能是一个非常有竞争力的行业。为了得到最好的工作，你可能需要掌握多种语言和多种技能。跟上热门的框架和语言是保持相关性的关键。

从好的方面来看，从 2018 年到 2028 年，网络开发人员的工作岗位预计将增长 13% 。这听起来可能不是一个压倒性的数字，但所有行业的典型就业增长只有 5%。总的来说，IT 是一个蓬勃发展的行业，一般计算机职业以 12%的速度增长。

U.S. Bureau of Labor statistics on web developers

成为一名程序员也需要一定的技能。精通电脑，能够一次集中注意力几个小时，以及学习几种新的独特语言的天赋都需要时间和练习来培养，所以他们的需求相对较高。

人们在互联网上花费越来越多的时间，企业也跟着他们去那里。每一家公司都希望并需要有一个网站，其他人都在试图让 T2 开始网上业务。这些人需要开发人员从头开始创建功能性网站。

全球一半以上的人口使用互联网，网络开发者需要建立和定制在线商店、博客、报纸、游戏和信息网站，让人们沉迷于在线。

如果你想以建立网站为生，就不会缺少工作。

想在 web 开发领域开始职业生涯？💻无论你是前端、后端还是全栈开发人员，本指南深入探讨了你期望获得的薪水范围💰 点击推文

成为一名网页开发人员需要什么？

有许多类型的网页开发人员，每个职位适合不同类型的技能。你的工作环境也有很多选择。无论你是想在家里成为一名自由职业者，在一个小而舒适的公司空间，还是在一个大而热闹的办公环境，你都能找到一个适合你的地方。

事实上，有许多人选择成为自由网络开发人员是因为这份工作能给你带来灵活性。

Educational attainment for web developers

虽然一些网站开发职位会要求计算机科学或相关领域的大专或学士学位，但许多工作机会会接受任何有一定经验的人，你会发现很多根本没有提到学位。

这就是为什么你应该专注于建立你的投资组合。

全面的投资组合是必不可少的，尤其是如果你没有大学学历。许多自学成才的开发人员通过拥有良好的投资组合和足够的经验获得了工作。

除了教育要求之外，web 开发人员还需要:

• 多种网络语言和框架的经验。
• 分析技能。
• 项目管理技能
• 适应不断变化的在线标准和语言。
• 沟通技巧(团队合作和与客户合作)。

这里有一个全面的视觉概述，介绍作为一名 web 开发人员需要学习的有用技能来自 webdev

2022 年要用的 60 个牛逼的网络开发工具

原文：https://kinsta.com/blog/web-development-tools/

打开“文本编辑”或记事本，输入“”开始一个新项目，这是一件浪漫而令人兴奋的事情。这就是我们中的许多人开始痴迷于网络编码的原因。在 2022 年，网络开发工具不仅仅是记录我们的文本，它们还帮助我们创建项目并加速整个过程。除此之外，还有比 HTML 和 CSS T2 更多的元素需要考虑。

例如，规划阶段至关重要。你需要考虑线框图、设计选择和协作工作流程。然后是选择理想的 JavaScript 框架，是否使用集成开发环境(IDE) ，等等。

在本帖中，我们将看看你在 2022 年想要考虑使用的 60 种网络开发工具。但是在我们开始之前，让我们先谈谈我们认为的 web 开发工具是什么。

我们所认为的网络开发工具

从表面上看，对 web 开发工具进行分类似乎很简单。然而，即使潜入浅水区，也要考虑一些模糊界限的因素。

例如，考虑视频流服务是否算作开发工具。在泡沫中，可能不会。然而，如果你用它来为一个特定的设计应用记录你的屏幕，它会突然变成一个独特的协作工具。

在我们看来，web 开发工具是帮助你以一种集中的方式实现项目目标的东西。虽然这并不包括单独的编程语言，但是有子集、超集和框架，比如横跨这条线的 TypeScript 。如果你想挣大钱，关注这些方面是至关重要的。

再举一个例子，考虑 Git 。你可能会说这个版本控制系统(VCS)覆盖了很多领域。有一种特定的语言用于运行命令，核心功能在 web 开发方面提供了很多。但是，您也可以将它用作学习工具，特别是通过搜索问题跟踪日志和提交。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

总的来说，web 开发工具实际上可以是任何使您的项目高效运行的工具。您会在工具列表中注意到这种多样性。

Web 开发工具如何简化您的工作流程

在接下来的几个词之前，我们会给你一个触发警告:“关键时刻”

是的，这个可怕的短语迫切需要节省时间的 web 开发工具来拯救世界。统计数据显示，越来越多的项目使用 crunch T1 作为标准，许多开发行业至今仍在使用它。

不管你的公司是否使用或需要 crunch 和加班，web 开发工具仍然可以提供帮助。这些工具可以完成繁重的工作，并自动完成日常工作。因此，它们为你的生产力提供了一个有机的提升。

然而，如果你在一个敏捷的项目框架下运作，比如 Scrum T1，他们也会提供额外的好处。例如，考虑一个工具如 JSFiddle 如何帮助你在一个 sprint 的末尾与其他团队分享片段，为下一个做准备。

更重要的是，虽然每天的单口相声无处可去，但一个 Discord server 或 Slack channel 可以提供一种更好的方式来关注和调整即将到来的一系列任务，远离你当前 sprint 目标的压力。

总的来说，web 开发工具与计划和执行一样重要。

如何为您的项目选择正确的开发堆栈

我们可能会对皈依者说教，但一个一流的网络开发工具值得拥有一台玫瑰金的 MacBook。因此，为您的特定项目选择合适的工具组合对于建立坚实的工作基础至关重要。

如果这是你以前没有考虑过的事情，一个初始规划阶段将被证明是无价的。花一些时间来决定你将使用的工具确实会延迟项目的编码阶段。然而，你以后会得到这个时间，因为会有更少的潜在的软件相关的麻烦。您还会看到更一致的输出水平(假设每个人都在同一页面上)。

选择开发堆栈的注意事项

为项目选择右堆栈归结为以下几点:

• 复杂度:考虑你的交付物需要有多复杂，因为这将决定堆栈的复杂度。
• 可扩展性:如果你的项目是为本地企业设计的，这将需要为全球企业提供不同的解决方案。因此，您需要一个更具可扩展性的堆栈来实现您的目标。
• 安全性:毫无疑问，无论你选择什么，都不应该损害用户和网站的安全性。
• 成本:当然，没有人喜欢超支，如果预算紧张，这将比空白支票簿更重要。

您可以将技术分为两个领域:

• 服务器端:在这里，您会想看看您使用的后端技术。例如，你会想看看你在选择的托管和 web 服务器、键值和 SQL 存储，你将使用的任何应用和自动化框架，当然还有编程语言。
• 客户端:你的前端工具选择可能会更简单，尤其是当涉及到你使用的语言时。虽然 HTML、CSS 和 JavaScript 将成为特色，但是您对 JavaScript 框架(和自动化框架)的选择将需要一些考虑。

当谈到一些现实世界的开发栈时，你会注意到许多大型网站使用 JavaScript 和 React.js 以及 Nginx 的某种组合。你还会在开发栈中看到 Memcached 、 Redis 和 Ruby on Rails 。
T13】

2022 年要用的 60 个牛逼的网络开发工具

事不宜迟，我们来看看 2022 年推荐使用的 web 开发工具列表。我们已经将它们组织成类别，但是除此之外，这些工具没有特定的顺序。如果你赶时间，请随意跳到下面列出的特定部分。

当地发展环境

本地开发环境是任何开发栈的基本部分。然而，它对 web 开发尤其重要。以下是一些最著名的本地开发工具。

1.德夫金斯塔

The DevKinsta splash screen.

我们可能有偏见，但是 DevKinsta 可能会成为 2022 年及以后的头号网络开发工具。

忽略这一点——我们对有偏见，我们为我们发布的内容感到自豪！

对于外行来说，DevKinsta 是一种帮助你快速启动本地 WordPress 安装的方式。这是一个完整的套件，可以让你为 macOS 和 Windows 机器设计、开发和部署一个 WordPress 站点(Linux 版本正在开发中)。

您可以根据当前项目定制您的安装。例如，您的“服务器”可以使用 Nginx 或 Apache，您选择的 PHP 版本，运行 MariaDB 或 MySQL ，等等:

DevKinsta’s setup options.

引擎盖下还有更多。你也可以通过内置的 SMTP 服务器来调试和测试电子邮件，对于数据库管理，你可以使用强大的管理工具:

DevKinsta’s Adminer-powered database manager.

总的来说，我们认为 DevKinsta 是现代 WordPress 开发的理想选择。它可以直接进入你的工作流程。

我们为开发人员、设计师、自由职业者和代理商设计了这个工具。然而，几乎任何有日常开发需求的人都会发现 DevKinsta 的价值——尤其是(但不仅仅是)Kinsta 用户。

更重要的是，DevKinsta 是完全免费的！

2. MAMP

The MAMP logo.

鉴于更快的沙盒工具的出现，你可能会认为用于创建和部署网页的经典工具已经寿终正寝了。然而，传统的 web 服务栈，如 LAMP 、 MAMP 和 XAMPP、仍然很强大。

通常，他们将操作系统(OS)——Linux、macOS 或 Windows——与 Apache webserver 、MySQL 数据库以及 Python、PHP 和 Perl 编程语言组合成一个堆栈。因此，像这样的 web 服务栈在 2022 年仍然会被使用。

MAMP 是该工具的 macOS 专用版本。这种方法让您安装一个堆栈，然后进行设计和部署。虽然这个过程可能比更现代的设置更冗长，但在引擎盖下仍然有类似水平的灵活性——或者至少，潜力是存在的。

而在像 DevKinsta 这样的工具中，你将从一个光滑的图形用户界面(GUI)中进行选择，使用 web 服务堆栈，你必须手动安装你需要的附加组件。例如，如果没有“滚动你自己的”，就没有内置的方法来运行 WordPress 站点与测试邮件的情况类似。

与其他本地开发环境工具一样，MAMP 完全免费。然而，也有一个适用于 Windows 和 Mac 的 MAMP 的高级版本，它增加了功能，并提供了一个全面、强大的网络开发工具。

The MAMP Pro dashboard.

由于灵活性和价格的原因，经典的 web 服务栈仍然存在于许多开发人员的计算机上。命令行爱好者自然会被这个解决方案所吸引，尤其是如果你喜欢使用包管理器，比如 Homebrew 、 Flatpak 或 Ninite 。

当然，Apache 开发人员也会使用这些堆栈，MySQL 和 Python 或 PHP 开发人员也是如此。推而广之，WordPress 开发者在这里也会有宾至如归的感觉。

3.XAMPP

The XAMPP app.

XAMPP 是另一个深受 PHP 开发人员喜爱的 web 服务栈，包括那些开发 WordPress 产品的人。名称中的“X”代表该工具的跨平台特性。它为 Windows、macOS 和 Linux 机器提供安装程序:

The XAMPP downloads page.

虽然各种 web 服务栈之间曾经存在差异，但是不断的更新和改进已经使这个领域变得平等了。尽管如此，XAMPP 还是有一些独特的锦囊妙计。

例如，MySQL 不再是默认的关系数据库管理系统(RDMS)。相反，XAMPP 使用 MariaDB。考虑到在甲骨文收购 T1 之后转向其他解决方案，这可能是对生产服务器更准确的描述。

此外，XAMPP 软件包中还有一个 web 应用安装程序。 Bitnami 类似于 Softaculous 等解决方案，但 Bitnami 是 XAMPP 特有的:

The Bitnami homepage.

虽然有许多可用的应用程序，但你可能对 WordPress 安装程序最感兴趣。尽管如此，仍有许多附加组件可供选择，使 XAMPP 成为当地发展的灵活解决方案。

文本和代码编辑器

大多数开发人员喜欢争论应该使用哪种代码编辑器。好吧，我们是夸张的，但是在这个问题上有很多观点，每个编辑都有狂热的支持者。

然而，如果调查是正确的，你可能正在使用崇高文本、 Visual Studio 代码(VSCode) 或 IntelliJ IDEA 。这是有意义的，因为这三个工具从简单的文本编辑扩展到成熟的集成开发环境(IDE)。然而，还有其他值得一提。让我们来看看其中的几个。

4.Visual Studio 代码

自 2015 年推出以来， Visual Studio Code 的使用在各种开发桌面中呈爆炸式增长。

The Visual Studio Code Editor.

这是一个由微软开发的开源代码编辑器，它提供了足够多的被认为是 IDE 的东西。毫无疑问，它提供了足够的功能来占领一半以上的市场——55%的 web 开发人员每天都在使用 Visual Studio 代码。

在其默认设置中，Visual Studio 代码首先是一个文本编辑器。但是，当与它的扩展库结合使用时，它变得足够模块化和灵活，可以满足您的任何开发需求:

The Visual Studio Code extensions library.

这意味着你可以为你选择的语言安装 linters 和 Fixer(是的，ESLint 和 PHP CS Fixer 就在那里)，还有 Docker 和 vagger 扩展，等等。

说到语言，Visual Studio 代码支持 JavaScript、Node.js 和现成的 TypeScript。然而，扩展生态系统是如此丰富，你将能够找到一些东西来支持你正在使用的语言。

此外，您还会发现与其他微软产品的顶级集成，最著名的是 GitHub :

Visual Studio Code has a dedicated VCS integration with GitHub.

Visual Studio 是完全免费的，考虑到它的特性集，它是许多人的理想选择。我们认为 VSCode 是介于思想和崇高文本之间的一个极好的中间地带。说到这里，接下来我们来看看后者。

5.崇高的文本

The Sublime Text app.

崇高的文本是文本编辑器世界的中流砥柱。它比大多数其他解决方案更精简，尽管它的外观掩盖了引擎盖下的权力。

例如，你会在其他竞争对手那里看到很多 Sublime Text 提供的东西。在许多解决方案中都可以看到命令面板，因为它使用起来很简单。

Sublime Text’s Command Palette.

另外还有强大的编辑键盘快捷键，比如做多选一次编辑几列。此外，Goto any功能提供了类似 Vim 的键盘快捷键组合来遍历您的文件:

Sublime Text can combine keystrokes to help you navigate.

Sublime Text 是一款高级工具，试用期非常宽松。它可以被认为是免费的，但是为了回馈开发者，你应该购买一个许可用于扩展使用。

在我们看来，对于许多小的或者业余的程序员来说，Sublime Text 提供了一个很好的用户体验(UX)，提供了最基本的东西。它以其令人愉悦的视觉效果、简洁的布局和可扩展性继续受到许多开发人员的青睐。

6.原子

有一段时间， Atom 在开发人员中被大量使用。然而，自从 Visual Studio 代码问世以来，它就很少被采用。这是一个遗憾，因为它是一个伟大的代码编辑器，适用于许多不同的应用程序。

The Atom app.

这是一个 GitHub 开发的应用程序，这可能解释了为什么它在微软的排名一直很低。但是，它会定期更新，可以被视为 Visual Studio 代码的替代版本。

文本编辑是功能性的，像它更大的兄弟一样，它内置了 GitHub 集成。还有许多被称为“包”的附加组件:

Atom’s package installer.

有很多工具可以帮助您根据工作流和项目定制 Atom。Atom 包括几个可供选择的主题，其中一些主题(如 One Dark)非常受欢迎，以至于它们也进入了其他编辑器:

Atom’s One Dark theme.

Atom 是一个值得一试的函数式代码编辑器。然而，由于 Atom 是建立在电子之上的，一些用户抱怨大文件和项目运行缓慢。因此，我们建议它适用于较小的项目和快速脚本(尤其是内置的终端包)，但它可能不是复杂工作的最佳选择。

7.记事本++

The Notepad++ homepage.

首先，值得一提的是 Notepad++ 可能不会取代你已经使用的任何“大男孩”代码编辑器，比如 IntelliJ IDEA 或 Visual Studio 代码。但是，对于简单的脚本和一般的文本编辑应用程序，它将为您提供更强大的功能。

根据你的项目，它可能会诱使你改变。尽管 Notepad++很简单，但它被广泛用于各种项目中。

这是一个 Windows 专用的代码编辑器，解释了它名字中的“plus-plus”元素。当然， Notepad 是一个实用的文本编辑器，默认安装在 Windows 上。Notepad++看起来和它的兄弟一样，但是它也包含了一些特定于开发的特性，比如:

• 选项卡式和拆分式窗口
• 支持近 80 种编程语言
• 自动完成功能
• 一个函数列表，它提供了一个查看文件中所有函数的好方法

更重要的是，Notepad++在项目管理方面非常灵活。它支持三种不同的方法:会话、工作区和项目。一旦你开始深入研究 Notepad++，你会发现你可以将它用于比单页脚本更广泛的项目。

我们认为 Notepad++将会适合那些想要强大功能的开发者，这些功能也是可定制的。在使用上，它有开源的 Vim vibe，这将比其他项目更适合某些类型的项目。

8.JetBrains 套件

当谈到开发 ide 时，JetBrains 解决方案套件(T1)将会是(或非常接近)你的清单的顶端。这种商业模式很聪明，因为虽然 JetBrains 有很多编辑器，但它们实际上都是其字幕编辑器 IntelliJ IDEA 的“子集”。

IntelliJ IDEA is a leading Java IDE.

IDEA 自称是 Java IDE。它几乎支持其范围内其他 IDE 工具的所有功能。因此，它也支持许多编程语言。

比如， PyCharm 从 IDEA 中剥离了大部分 Python 功能，打包成自己的工具。你还会发现 phpStorm 和 WebStorm 也在做同样的事情。

PyCharm is a Python-specific IDE that’s popular in the language space.

使用 IDEA 是一件轻而易举的事情——JetBrains 已经做了很好的工作让你编码，而不是费力地进行配置和设置。这可能令人惊讶，但是使用命令行编辑器(比如 Vim)和使用 IDEA 之间的界限通常很模糊。

这两种工具对工作流和效率的关注是相似的，不过如果您也喜欢这样工作，IDEA 也允许您导入 Vim 键盘绑定。

IDEA extensions let you use Vim keyboard bindings to make you feel like a Wizard.

我们假设，如果你是一个大型项目或有软件交易的公司的一部分，你可能会使用 IntelliJ IDEA。它可以是共享项目或在一致的环境中工作。许多 WordPress 开发者正在使用 JetBrains 产品，因为它们在管理项目方面非常强大。

价格也是一个因素，IntelliJ 是建立在一种订阅模式上的，这种订阅模式通常每年达到三四位数。

IntelliJ IDEAs pricing screen.

即便如此，JetBrains 产品还是有一些“社区”版本。然而，它们是母软件的精简版本；本质上，它们是去掉了专有元素的开源解决方案。

更重要的是，JetBrains 为开源项目、初创公司、教育机构、码头船长和更多小众群体提供有竞争力的价格。

网页设计和原型工具

当然，没有良好的用户体验，网络应用就什么都不是(UX)。因此，你的布局和视觉原型通常需要一个专用的工具。设计工具对于服务器端和客户端的开发都是至关重要的。这里有几个受欢迎的选择。

9.菲格玛

Figma 是一个经常被提及的网络开发工具，它可以让你在设计上进行合作。

The Figma editor.

您可以使用拖放编辑器来构建界面和其他面向用户的元素。对于开发人员来说，您也可以抓取代码片段植入到您的项目中。Figma 使整个过程——从构思到实施——顺利进行，并在整个项目链中保持修订。

您还可以利用一套统一的工具来帮助选择字体和颜色。该过程与使用单独的工具形成对比，例如型秤:

The Type Scale website.

…以及 web 开发工具的子集，如 Adobe Color 、coolers、各种颜色选择器等等。

The Coolors color picker.

虽然 Figma 对单个开发人员的项目有价值，但随着规模的扩大，它对团队有更大的好处。团队会喜欢 Figma 的协作方面，比如中央资产存储库和可重用组件。团队领导也将欣赏全面的报告选项，以了解团队成员如何使用各种设计系统。

至于定价，Figma 在标准层上每个“编辑”的成本是 12 美元，对于基于企业的团队，每个“编辑”的成本上升到 45 美元(对于“编辑”，应该理解为“座位”——这是同一个概念)。因此，价格可能会根据你想要的编辑数量而上涨。

10.素描

Sketch 是一款仅支持 macOS 的应用，在开发者中也经常被点名:

The Sketch logo.

它之所以受欢迎，是因为 Sketch 包含了许多功能，而且使用起来也很容易，这是一个原生的 macOS 应用程序。看起来有点像苹果的 Xcode IDE ，这也不是什么坏事，导航的感觉也很棒。

当然，您可以执行必要的功能，如矢量编辑和约束调整大小。然而，该应用程序中还有更多功能可以帮助您快速生成设计并将其导出给其他人。

例如，以 Sketch 的智能布局功能为例，它使用自适应调整大小来匹配您的尺寸和当前布局。也有许多协作工具给每个人一种方式来深入设计并帮助完善它。

An overview of Sketch for Teams.

Sketch 与 Figma 等工具的不同之处在于，自由职业者或单独的开发人员可以免费加入，然后在需要时购买订阅。在这方面， Sketch 的定价要么是一次性支付 99 美元，要么是每个用户每月 9 美元。

11.视觉工作室

InVision Studio 独特地将自己推销为一款“屏幕设计”应用。有道理，理解起来也更清晰。InVision Studio 提供了您所期望的所有标准特性和功能，例如直观的基于图层的编辑器和矢量支持。

The InVision Studio app.

尽管如此，这个盒子里还有更多与原型制作和创建动画相关的东西。例如，您可以通过指向、单击和拖动来将画板和屏幕链接在一起。此功能让您可以将动画制作作为设计过程的一部分，而不是以后再交付。

Animations within the InVision Studio app.

说到移交，由于共享组件库、全局同步选项、健壮的检查模式等等，整个团队都可以在 InVision Studio 中工作。

的定价结构也很有竞争力。InVision Studio 的免费版本为您提供了付费版本的几乎所有功能，只是对您可以保存的文档数量有所限制。专业层对应用程序的功能很有价值(大约 95 美元/用户/年)。

12.亲和力设计者

如果你是一个 Adobe Illustrator 用户，你会在过去遇到过 Affinity Designer 。Serif 的图形设计方法看起来让 Adobe 的解决方案物有所值:

The Affinity Designer app.

自推出以来，由于其与社区的良好关系、一流的设计原则和有吸引力的定价模式，它已经获得了一个蓬勃发展的用户群。您将找到适用于 Mac、Windows 和 iPad 的版本，每个版本都可以处理矢量和/或栅格:

Affinity Designer’s editor.

您在 Illustrator 中习惯使用的工具都已存在，还有一整套颜色配置文件和导出选项:

The export options in Affinity Designer.

简而言之，这些特性和功能可以为您的项目创建专业的图形。更重要的是，定价极具竞争力。它的全价大约为 50 美元，是一次性付款。它没有像 Illustrator 那样合适的基于云的选项。即便如此，只要支付一次性费用，你就能以一种主观上更好的方式获得 Adobe 的范围。

13.CodePen 或 JSFiddle

早些时候讨论 IntelliJ IDEA 时，我们没有提到它的一个次要但方便的特性——暂存文件。它让您可以快速编写和测试代码片段，而不必影响您当前的工作项目。

对于其他代码编辑器的用户来说，像 CodePen 或者 JSFiddle 这样的解决方案是一个很好的替代品。它们的工作方式相似:有三个文本编辑器，分别用于 HTML、CSS 和 JavaScript，还有一个输出屏幕来查看结果:

The CodePen console.

你可以根据你的平台命名你的“笔”或“提琴”，保存它，并与他人分享。这是一个非常简单的想法——它可以帮助你在项目的某个方面实现你不成熟的想法。

对于那些想了解文件中某个特定元素并展示可能的修改的开发人员来说,“在线 IDE”是非常宝贵的。此外，还可以通过聊天或“现场麦克风”进行协作:

The JSFiddle Collaboration screen.

总的来说，在线 IDE 可以被认为是一个“潜伏”的 web 开发工具，因为它不太经常被提及，但被许多开发人员用来创建更好的代码。

Git 客户端

拥有一个集中的方法来存储代码，记录变更，并与团队一起工作而不重复，这是一个版本控制系统(VCS) 的任务。这里有几个客户端处理一个 VCS: git。

让我们先讨论一下 VCS 本身。

14.饭桶

Git 对于现代开发人员来说是必不可少的，因此，它是最重要的 web 开发工具之一。简而言之，这是一种记录您对项目代码所做的更改并将它们存储在“存储库”中的方法:

A list of WordPress GitHub commits.

Git 是由 Linux 的创造者 Linus Torvalds 发明的。并使用一系列命令将文件更改添加到一个“暂存区域”，然后将它们“提交”到一个存储库中。从那里，您可以将它们“推”到一个在线托管的远程存储库。

虽然它不是唯一可用的 VCS——WordPress 开发团队仍然在许多项目中使用 Trac——但它是最突出的。诸如 Git 或 Trac 这样的 VCS 通过将代码托管在一个中心位置来帮助团队一起工作。

基本命令是以 git 开头的单字函数，通常从命令行使用。例如:

git add file.php

这个表达式将file.php添加到你的暂存区。换句话说，它将更改记录为您想要存储的内容，而无需对其进行最后的润色。如果您愿意，您可以对一个文件或整个项目执行此操作。

要提交文件，您可以运行git commit。在这里，您可以添加一个注释来告诉其他人您的提交。此后，您的更改被存储并推送到主“分支”当然，这取决于您是否正在进行远程“回购”

如果你是 Git 和 VCSs 的新手，GitLab 有一个关于在命令行使用 Git 的很好的初学者指南。稍后我们还会谈到 GitLab 本身。

15.开源代码库

Kinsta’s GitHub page.

对于大多数开发人员来说， GitHub 是存放项目 Git 库的地方:

WordPress GitHub repositories.

这是一个微软拥有的解决方案，涵盖了比 Git 托管更多的内容。还有一堆自动化测试工具，并试图为 T2 提供额外的协作功能。

GitHub’s collaboration features.

对于开源项目，GitHub 这样的平台几乎是事实上的选择。鉴于此，GitHub 作为一个 web 开发工具，对于许多开源用户、学习者和开发者来说是无价的。当挖掘 GitHub 的问题跟踪器来解决已安装软件包的问题时，尤其如此。

GitHub’s Issue Tracker.

GitHub 不仅仅是用来存储程序回购的。其他的编码项目也是如此，比如 web 开发，甚至书籍。

总的来说，GitHub 是一个很棒的工具，可以帮助从许多不同的分支建立一个健康的社区。然而，它不是唯一的平台。

16. GitLab

The GitLab logo.

我们之前提到过，但是 GitLab 是 GitHub 的竞争对手，有着相似的目标。它本质上是 Git repos 的主机，但也提供了一些其他的额外功能。

虽然 GitHub 自称为“开发平台”，但 GitLab 专注于“DevOps”。在其免费层，GitLab 提供 DevOps 生命周期的每个阶段，静态应用程序安全测试，以及每月约 400 分钟的持续开发(CD)和持续集成(CI)。

GitLab 落在它的社区感上，这是 GitHub 最大的不同。更多的是关于项目的部署和整个周期。这不是负面的，但这确实意味着 GitLab 更像是一个“孤立的”平台，可以说不像 GitHub 那样适合开源项目。

对于大多数团队来说，GitLab 的免费层将是充足的。对于每个用户来说，每年大约 230 美元，你可以获得对你的代码和生产力的分析，大约 10，000 CD/CI 分钟，等等。

17.sourcetree(资源分区)

Sourcetree 不是一个 Git 存储库主机，而是一个用于管理它们的图形用户界面(GUI)。它是众多解决方案之一，比如 GitKraken 、 Sublime Merge 、 GitHub 桌面、更多。

The Sourcetree homepage.

这是 Atlassian 的产品(我们爱 Atlassian！)与其他产品如 Bitbucket 连接，提供 Git 存储库的可视化表示。

Sourcetree 被宣传为一个简单的 Git 客户端——的确如此——但是它也适合有经验的用户。它有足够的东西来支持一个使用 Git 的团队(还有 Mercurial )。

例如，Sourcetree 做一些简单的事情，比如突出显示自上次提交以来的更改，但是如果需要的话，它还会处理更多的事情。团队领导可以审查变更集，根据需要在分支之间工作，并使用图形和信息选项卡可视化代码:

Sourcetree’s graph view.

Git 客户端是否适合您取决于您的环境。如果您还在学习，我们建议您在理解流程和过程的同时使用终端。对于广泛使用 Git 的专业人员或团队来说，像 Sourcetree 这样的客户端将会节省您每天的工作时间。

浏览器开发工具

没有 web 浏览器，就没有 web 开发。然而，尽管你选择的浏览器对于浏览网页至关重要，你也可以用它来了解它是如何运行的。

大多数现代浏览器都包含特定的开发工具来帮助您分析后端代码，然后您可以将这些代码带回到您的项目中。以下是一些最受欢迎的。

18.Chrome 开发者工具

Chrome 的“dev tools”因其出色的功能集和诊断功能而备受社区推崇。

鉴于基于 Chromium 的浏览器的兴起，许多浏览器都有相同的 DevTools 和相似的快捷方式。你可以查看微软 Edge 、勇敢、 Chromium 本身，以及更多的克隆版本，并在浏览器中使用你的项目。

Brave browser’s DevTools.

元素标签将是一个经常出现的地方，因为这是你查看页面源代码的地方。在我们看来，性能选项卡提供了其他浏览器开发工具无法比拟的页面负载洞察:

Brave’s Performance tab.

安全标签也提供了一些有用的信息，这些信息对于监控(或研究)客户的网站是必要的:

Brave’s Security tab.

更好的是，您将能够直接从基于 Chromium 的浏览器生成 Google Lighthouse 报告:

A Google Lighthouse report from Brave’s DevTools.

这里的开发工具主观上是最好的，所以你会发现 Chrome 和基于 Chrome 的用户会依赖它们。尽管其他浏览器也有 DevTools，它们也值得考虑。

19.Firefox 开发工具

The Firefox homepage.

尽管谷歌占据主导地位，火狐每月活跃用户数约为 2 . 2 亿。在过去，开发人员称赞 Firebug ，它通常是浏览器调试的领导者。

今天，我们有 Firefox 的开发工具:

Firefox’s developer tools.

有一组核心功能用于查看站点源代码(检查器)、一个调试器、内存、存储等等。

对于初学者来说，控制台通常是通向编码的大门，因为你可以直接在浏览器中运行 JavaScript，这是一种测试代码片段并在第一次开始时找到立足点的简单方法:

An example of a browser console.

尽管如此，我们认为 Firefox(和其他浏览器)比基于 Chromium 的浏览器更少被打包到开发工具中。不过，对于跨浏览器调试和故障排除，您通常会使用 Firefox。因此，这是一件好事，他们是几乎所有任务的理想选择。

前端框架

说到前端，你需要一些适合创建令人惊叹的网站的东西。这里您对框架的选择是至关重要的。你应该总是为这项工作选择最好的工具。

记住这一点，让我们来看看几个受欢迎的选择。

20.引导程序

移动响应是现代网页设计的标准特征。这是一个受欢迎的步骤，考虑到移动浏览已经超越了桌面。有鉴于此，你会想要一种快速建立移动优先网站的方法。

Bootstrap 是一个很棒的 web 开发工具，它有很多用途:

The Bootstrap logo.

这是一个结合了 JavaScript 插件、 Sass 变量、、一些预建组件、一个高质量的响应网格系统等等的工具包。甚至有一个官方主题的市场与 Bootstrap 一起工作，许多 WordPress 网站也使用基于设计框架的主题。

当然，是否使用 Bootstrap 将取决于您的项目需要什么。然而，合乎逻辑的假设是，预算紧张、周转快的 web 开发项目将转向“自举”解决方案，并使其适应 WordPress。鉴于框架和 WordPress 都是免费的，你的时间就成了唯一的成本因素。

21.顺风 CSS

理论上， Tailwind CSS 没有意义。它是一种语言的前端框架，是 web 开发核心三位一体的一部分。因此，合乎逻辑的想法是，目标用户已经具备了适当的知识，不需要框架。

实际上，顺风 CSS 让完美有意义。这是一种不用离开 HTML 就能设计网站前端的方法。

A Tailwind CSS example.

您可以在各种标记中使用实用程序类来添加核心样式表中的 CSS。当然，CSS 仍然是主要的样式来源。当你使用 HTML 构建一个布局时，它只是在你的视野之外。因此，它让你同时发展结构和风格。

这种方法让我们想起了 960 网格系统(T1 ),并且可以很好地与这个框架相吻合。也就是说，用如此多的类打包元素有一个危险，你可能会得到一堆杂乱的代码。使用 Tailwind CSS 需要耐心和自律，但是如果它适合您的项目，它将是一个快速且健壮的框架。

22.布尔玛

在设计网站结构和布局方面，我们已经取得了所有的进步，创建灵活的、反应灵敏的和动态的栏目对许多人来说是一个障碍。虽然处理这不是布尔玛唯一能做的事情，但这种类型的应用程序是框架的核心:

The Bulma website.

很像顺风 CSS，布尔玛隐藏了 CSS，并为你的 HTML 提供了实用类。它采用 Flexbox、移动优先和模块化技术构建。如果您只需要几个组件，那就太好了。如果你愿意，你也可以混合和匹配框架。

更重要的是，你不需要任何 JavaScript 来启动和运行布尔玛，因为它只是 CSS。你可以用最少的代码添加界面元素，比如按钮。这是一个简单明了的开源框架，可以适应您自己项目的需求。在我们的书中，这是一个你应该好好利用的有价值的特质。

23.基础

ZURB 团队在 Foundation 中对 CSS 框架有其独特的见解。这是一个移动优先的语义工具，对网站和电子邮件有两种风格:

The Foundation homepage.

基础的构建以可访问性为优先。Foundation 中的每个片段都带有专用的 ARIA 属性。然而，在你到达这个阶段之前，Foundation 对于快速原型是令人印象深刻的，因为你如何把它添加到你的 HTML 中。您可以在页面上创建几乎任何结构元素，甚至是各种类型的菜单和导航:

Creating a navigation menu in Foundation.

ZURB 还提供了大量优秀的文档和教程供你学习框架的来龙去脉。Foundation 使用起来很简单，但是我们怀疑您可以深入到构建站点，并开发出复杂的布局和功能。

你也可以在基金会网站上找到一堆模板。它们是帮助您起步的基本线框—一个受欢迎的包含:

Foundation’s template library.

总的来说，基金会框架做到了它在锡上所说的。它将是你网站发展的核心，而不是让你附加更多的功能。因此，您可能不会在每个项目中都使用它。尽管如此，在被雇佣的地方，它将在各种各样的网站上做生意。

24.材料-用户界面

我们将在后面更详细地讨论 React，但是现在，要知道 Material-UI 是基于这个 JavaScript 框架的组件库的。对于不知道的人来说，材料设计是谷歌关于如何设计网站前端的“哲学”。这意味着大量的机器人字体和色块:

Material-UI looks to meet Google’s design standards.

您将把这个库导入 React，然后使用专用的 HTML 标签来构建您的站点:

Creating a button in Material-UI.

为了进一步定制元素，可以向 HTML 标记中添加类。整个代码块包装在一个函数中，您将在 React 中呈现细节(以及扩展的页面)。

也有许多免费和付费主题,涵盖许多使用案例和价格:

The Material-UI theme library.

因为 Material-UI 有一个特定的用例——围绕材料设计创建站点——如果这是你的目标，它将是一个首选框架。特别是，不管你的预算是多少，主题库都将是一个有价值的入门资源。

25.HTML5 样板文件

The HTML5 Boilerplate homepage.

如果你是一个 WordPress 开发者，你可能遇到过下划线。这是一个基本的 WordPress starter 主题，可以节省你无数的时间来整合你网站的功能和核心元素。 HTML5 样板文件在一般设计层面上做了同样的事情。

因此，它包含了跨越 HTML、CSS 和 JavaScript 的七个文件。它们都只包含呈现页面最必要的文件和代码。除此之外，你的页面如何由你决定。

HTML5 样板文件有很多粉丝，因为它更像是一个节省时间的实用工具，而不是一个成熟的框架。因此，没有开箱即用的视觉效果来惊叹“传递贸易”，但是如果你将 HTML5 样板文件投入使用，你可能会发现它像下划线为 WordPress 开发者所做的那样加速了你的开发。

26.实现

虽然我们不会称 Materialize 为 Material-UI 的竞争对手，但它是另一个使用材料设计原理来创建布局的框架:

The Materialize homepage.

不过，Materialize 不是使用 React，而是一个 CSS 框架。这使得物化更容易在前端实现。与其他基于 CSS 的框架非常相似，您使用 HTML 中的类在前端拉入元素。

也就是说，对于 modals 和 dropdowns 这样的元素，也有很多 JavaScript 组件:

A dropdown menu created with Materialize.

像许多这样的框架一样，有高级主题帮助你以特定的风格构建布局。不过，它们都是静态的 HTML 主题，如果您想实现 JavaScript，这可能会成为一个问题。在这些情况下，您可能需要考虑 Material-UI。

Web 应用程序框架

简而言之， JavaScript 框架或库让你以不同的方式处理所谓的“普通”代码。在这种情况下，它是为了创建特定的 web 应用程序和站点。也有很多“口味”——让我们来介绍几种。

27.React.js

An example of React sandbox code.

React.js 是一个流行的脸书设计的 JavaScript 库，支持许多更现代的 WordPress 元素。WordPress.com 的后端和块编辑器都使用 React，我们认为这是使用 JavaScript 的接口优先方式。

The Calypso backend for WordPress.com is built on React.

因此，WordPress 开发者应该——套用马特·莫楞威格的话——深入学习 React.js。然而，它不仅仅是 WordPress 开发者的框架。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

在任何需要现代化动态用户界面(UI)的地方，React 都将是首选。它使用名为 JSX 的 JavaScript 语法扩展来创建元素，然后将这些元素呈现给文档对象模块(DOM):

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

JSX 中的 JavaScript 变量可以是任何有效的表达式，这允许您构建复杂的参数。这使得 React 成为框架的一个强有力的选择。因为它的受欢迎程度，我们认为 React 应该在你的“必学”清单上，不管你把开发时间花在哪里。

28.view . js-检视. js

Vue.js 是另一个用于构建用户界面的 JavaScript 框架。它基于“视图层”,非常适合与其他库和框架集成。

The Vue.js sandbox.

在 HTML 方面，Vue 再容易不过了。您给标签一个 ID，并从 JavaScript 端的字典集调用一个键。数据现在是反应性的，并且数据和 DOM 是链接的。

这样，Vue.js 很像我们在文章前面看到的一些 CSS 框架。这个框架很有吸引力，我们鼓励您浏览文档看看有什么可能。

虽然 Vue.js 支持 JSX 声明，但它更适合使用基于“经典”web 技术的模板。因此，对于不想只使用 JavaScript 的开发人员来说，这将是一个理想的选择。

29.快递. js

我们正在进入元框架领域，因为 Express.js 连接到 Node.js 并为其他框架提供基础。

The Express.js homepage.

这是一个极简框架(因此得名)，主要好处是帮助您将服务器端组件组织成熟悉的模型-视图-控制器(MVC)格式。因此，代码看起来比其他框架更复杂——甚至是普通的 JavaScript:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

我们认为 Express.js 将适合那些从数据库中提取和推送数据的应用程序。这使得它适合许多现代 web 应用程序和后端开发人员，他们希望以最小的压力处理前端任务。

30.Svelte.js

在为 web 开发时，一个可靠的经验法则是确保你的站点可以在尽可能多的浏览器上运行。也就是说，在某些情况下，你可能想要构建不支持传统浏览器的应用或网站。在这些例子中， Svelte.js 应该在你的列表的最上面。

The Svelte.js homepage.

该框架因其文件大小而得名——缩小后只有 5kb。它有一个类似 jQuery 的格式，对于熟悉的用户来说很容易理解:

$('.hello').text("Hello svelte");

在 Svelte API 中有不到 40 个函数，所以开始会很简单。此外，您可以使用$.fn轻松添加新功能。

您会发现对 Internet Explorer 9 支持的“polyfills ”,但这几乎是唯一的让步。对于使用超精简框架的超现代浏览器支持，Svelte.js 可能是适合您的。

31.拉勒韦尔

到目前为止，我们已经了解了 JavaScript 或 CSS 框架。鉴于 PHP 的流行，涵盖这种语言的框架也是有意义的。Laravel 是这里的理想选择，因为它的语法和生态系统在许多开发人员中很受欢迎:

The Laravel homepage.

更恰当的说法是, Laravel 是一个生态系统,因为它包含了许多帮助你构建项目的工具。即使你不怎么使用框架本身，你也可以使用 Laravel 的家园，一个基于流浪者的本地开发环境。

Laravel 本身是一个基于 Docker 的 PHP 框架，并使用 CLI(称为 Sail)与之交互。就像流浪者一样，你将使用 sail up 来构建容器并运行它们。

不过，Laravel 的弓上还有很多弦。例如，你可以将它用作一个全栈框架，一个用于 Next.js 应用的 API 后端，以及几乎所有介于两者之间的东西。

如果你是一名 PHP 开发人员，Laravel 将是你工作流程中的一个核心(如果不熟悉的话)工具。

32.盖茨比（姓）

Gatsby 是一个开源前端框架，最近吸引了很多关注。这是因为 Gatsby 是快速、可伸缩、高性能和安全的。

The Gatsby homepage.

有一个超快速安装过程涉及到节点包管理器(npm)。稍后我们将对此进行详细介绍。虽然它是一个 JavaScript 框架，但 Gatsby 在运行时生成静态 HTML 文件，因此没有办法攻击站点。更重要的是，Gatsby 自动化性能以保持您的站点以最佳配置运行。

在自动化性能、动态缩放和静态 HTML 构建之间，Gatsby 感觉自己就像一个活的有机体。有一个复杂的编码“组成”,包括 JSX、Markdown、CSS，以及更多基于你需求的东西。您工作流程的每一个步骤和堆栈的每一部分都可以根据您的需求进行定制。

WordPress 开发者也会喜欢 Gatsby 如何与平台整合。不过，这并不适合所有情况。例如，如果您需要完全管理基于云的 CMS，这不适合您。即便如此，Gatsby 在大多数情况下都能适应你的项目，而且和 WordPress 配合得非常好。

33.姜戈

尽管有很多关于 Python 是“初学者”或“学习中”编程语言的讨论，但它是许多知名网站的支柱。一些最大的网站(Instagram、优步、Reddit、Pinterest 等等)使用 Django。通常，你会发现没有提到 Python 本身，，而只有 Django 。

Django 是一个使用 Python 创建服务器端 web 应用程序的框架。它和 Python 本身一样简单易用，格式非常易读。

Django’s default formatting.

对于基于逻辑的项目来说，Python 是一种很好的脚本语言，所以在 web 应用程序中利用它是一个很好的选择。更何况 Python 处理速度快，根本文件结构轻。因为 Django 的速度很快，所以与 PHP 相比，它是一个优秀的服务器端框架，并且与更流行的语言一样简单。

也就是说，接受率较低，这可能是由于 Python 作为学习语言的声誉。尽管如此，Django 与 JavaScript 等其他语言配合得很好，是现代 web 应用程序的基础。

当然，如果你计划使用像 WordPress 这样的 CMS，或者你正在为基于 React 的项目创建解决方案，你的选择就更少了。即便如此，我们认为 2022 年在 Django 上运行的网站数量将会上升。

34.Ruby on Rails

几年前，Ruby 编程语言是初级语言和 PHP 脚本替代品的“宠儿”。它经常被比作 Python。

和 Django 一样， Ruby on Rails 也是许多开发人员的最爱。

The placeholder page for a new Ruby on Rails project.

你会发现很多服务器端和底层的 web 应用程序都使用了 Ruby。此外，Ruby on Rails 在无数网站上被用作服务器端框架。它使用 MVC 方法，并为 web 服务、页面和数据库提供结构。因此，你有一个现成的准系统网站等着你。

如果 Ruby on Rails 需要调度许多作业并使用第三方解决方案，那么它将适合您的项目。例如，有与文件存储的本机集成，如谷歌云，以及用于发送电子邮件的包装器。

总的来说，如果您想要一组健壮的缺省值(比如文件夹结构)，并且可以根据需要进行定制，那么这是一个不错的选择。另一方面，如果您喜欢在开发过程中使用 API，这并不是一个很好的选择。

对于大型项目来说，Ruby on Rails 的代码结构可能会变得复杂且难以理解。运行时间也会受到影响，因此它可能不是速度关键型项目的最佳框架。

尽管如此，Ruby on Rails 仍然是领先的 web 服务器端框架之一，对于合适的项目，它的使用速度并没有减慢。

35.以打字打的文件

An example of TypeScript code.

简而言之， TypeScript 为 JavaScript 提供了可选的静态“类型检查”。它是语言的“超集”,也支持许多其他 JavaScript 库。总的来说，TypeScript 是带有一些额外特性的 JavaScript，您可以同时编译这两种语言。

许多开发人员已经转向 TypeScript 来减少他们得到的运行时错误的数量。类型错误是最常见的之一，减少它们可以给你带来很多额外的时间。

对于一个非常简单的 TypeScript 示例，考虑一个字符串:

let helloWorld = " Hello World

// ^ = let helloWorld: string

这里，TypeScript 对 helloWorld 变量使用 let 而不是通常的 var。由此，TypeScript 知道 helloWorld 是一个字符串，并在此基础上检查它。

最终，TypeScript 并不是一个基本的 web 开发工具，尽管它由于其核心的 marquee 特性而变得更加流行。如果你最终节省了一些非常需要的时间，它可能对你的工作流程至关重要。

36.GraphQL

这里有一个独特的工具，可能会受到在 API 中处理数据的开发人员的青睐。GraphQL 是一种在 API 中使用的查询语言，它也作为一个运行时来提供查询结果。

The GraphQL website.

对于标准的 REST API，您经常需要从多个 URL 加载。使用 GraphQL，您可以从单个请求中获取数据。此外，GraphQL APIs 是按类型而不是端点排列的。这种分类有助于提高查询效率，并在出错时提供更明确的错误。

考虑到 GraphQL 是如何实现类型的，类型还可以用来跳过手动解析代码。您还可以向 API 中添加新的字段和类型，而不会影响到您到目前为止所做的工作。

该工具在许多领域都是灵活且可扩展的。因为 GraphQL 为您的项目创建了一个统一的 API，所以您可以引入一个与您选择的项目语言相匹配的引擎。这使得它适用于广泛的应用领域，而不是针对一个普遍问题的利基解决方案。

你会发现 GitHub、Spotify、脸书等网站都在使用 GraphQL。它应该让您了解 GraphQL 是如何在各种各样的大量查询的站点上使用的。因此，在接下来的 12 个月甚至更长时间内，您可能需要不止一次地采用这种解决方案。

包管理器

编程语言、框架等等有很多活动的部分。这些依赖项必须以正确的方式下载和安装才能工作。输入包管理器。这些帮助您从命令行下载和安装特定的依赖项。让我们来看看你会遇到的一些工具。

37.节点程序包管理器(npm)

是的，下载安装程序有它的位置。然而，在大多数情况下，从命令行使用包管理器非常简单。它还提供了一种从网上抓取和安装文件的快捷方式。

节点包管理器(npm) 是微软拥有的一个特定于 JavaScript 的 web 开发工具，它允许您按需安装特定于语言的包:

The npm homepage.

例如，搜索 React 包会出现超过 155，000 个结果:

A search performed in npm.

与在线 IDE 一样，npm 是一个没有太多“播放时间”的 web 开发工具，主要是因为它无处不在。因此，几乎每个 web 开发人员都会使用这个工具。

然而，这是不可思议的，现在它在 GitHub 的羽翼下，2022 年将有比以往更多的开发者使用 npm。

38.故事

很像 Python 的 npm 和 pip， Yarn 帮助你安装与你的项目及其工具相关的包。这里的区别在于 Yarn 也是一个项目管理工具。

The Yarn homepage.

安装简单，为新项目初始化纱线也需要最少的努力。它已经成为一个强大的开源解决方案，用于安装包和管理你的项目。

您将使用工作空间来创建“monorepos”，并且您的项目的多个版本都存在于同一个 repo 中，并且可以被交叉引用。你可以为任何 Yarn 不能做的事情安装插件(为此你要添加新的获取器和解析器)。更准确地说，你可以安装插件，但是那里没有太多，至少在官方列表中没有。相反，如果你迫切需要这个功能，你可以自己编码。尽管如此，你还是可以根据你的项目需求来定制纱线。

纱使一个独特的情况下，成为您的主要包装经理。对于一个现实世界的项目，你可能会更多地依赖 npm，但是 Yarn 会以对你有利的方式潜入你的工作流程。

API 和测试工具

确保事情正常进行是一个经常被忽略的过程，但当事情出错时，也会带来遗憾。因此，项目的测试阶段应该是可靠的、健壮的和彻底的。

考虑到这一点，这里有一些 API 和测试工具供您在项目中使用。

39.霍普斯科奇

由 Netlify 支持， HoppScotch 是一个开源 API 开发工具。开发人员称之为“生态系统”，掩盖了其功能。

The main HoppScotch page.

这是一个简单而可靠的解决方案，不适合胆小的人。如果你从未使用过这样的工具，学习曲线会很陡。在该应用的任何页面上几乎都没有使用 HoppScotch 的指导，尽管这通常不是问题，因为该工具是为有经验的开发人员设计的。

有许多实时连接(WebSocket、SSE 等等)和一个 GraphQL 实现。我们也喜欢文档创建者:

需要一个给你带来竞争优势的托管解决方案吗？Kinsta 为您提供了令人难以置信的速度、一流的安全性和自动伸缩功能。查看我们的计划

The HoppScotch documentation creator screen.

它与您的 HoppScotch“集合”一起工作，动态创建文档，这是一个受欢迎的省时工具。

总的来说，HoppScotch 是一个会在你的浏览器中经常打开的功能性工具。这是那些你会一直使用却没有意识到的解决方案之一——我们不能再给它更高的评价了！

40.邮递员

The Postman logo.

警告——我们将要提到可怕的“C”字:协作。 Postman 是一款 web 开发工具，通过 Postman 平台帮助你作为一个团队创建一个应用编程接口(API) :

The Postman dashboard.

有大量的用例可以将 Postman 集成到您的工作流程中。例如，您可以以标准的方式将它用于应用程序开发，这将直接转化为基于 web 的项目。你可以使用模拟服务器来模拟端点，这将特别吸引 WordPress 开发者。

你甚至可以创建 onboarding 来帮助你的 API 用户学习诀窍。那些有大量用户流动或显著流量的项目将在这里看到好处。

至于定价，Postman 提供了一个免费等级，但你将从其中一个高级等级中获得最大价值。根据你的付费周期和用户数量，你将支付大约 12-30 美元。

41.测试库

运行的代码是理想的，但是运行的应用程序才是最终目标。测试库顾名思义:它提供了一套工具来帮助你测试你的项目，并鼓励你使用良好的编码实践。

The Testing Library homepage.

这个想法是你创建代表你的应用程序使用的测试。如果它们运行顺利，你的应用程序也很有可能运行顺利。这是一个关于框架的不可知工具，它不是一个测试运行程序。测试库的核心目的是帮助你编写与实现细节无关的可维护测试。

测试库工具中的一切都围绕着它的指导原则。因此，你不仅仅是在创建测试——你在学习如何使它们更好、更有价值。

因此，测试库可能会成为你工作流程的一个重要部分。我们认为，几乎所有的项目链都可以从测试库中受益，React 用户几乎肯定会希望将这个工具作为一个标准。

协作工具

尽管有开发者反社会的比喻，但事实是技术和协作是携手并进的。

因此，让我们收集一些将用于您下一个项目的优秀协作工具。

42.吉拉

就软件而言，Atlassian 是一家广受欢迎的公司。我们是该公司的几个产品的忠实粉丝:Confluence、Trello、Sourcetree、Bitbucket，以及我们在这里的焦点，吉拉。

The Jira homepage.

它是使用敏捷框架的团队的开发工具，尤其是 Scrum，因为它非常流行。因此，您可以在软件包中获得丰富的功能。例如，你可以使用看板来帮助组织任务和冲刺。您还可以实现您评估技术，定制您的方法和项目。

吉拉专注于可重复的工作流程:计划、跟踪、发布和报告。它是几个敏捷框架的核心，尽管你也可以根据你的项目前计划创建你自己的框架。如果你必须在 sprints 之间转换，你可以改进你的项目，扩大或缩小规模。

关于吉拉的好消息是，它有一个免费的起步层，其他层有合理的价格。也就是说，你会发现十人团队是有效使用吉拉的最低要求。这对任何小团体来说都是过度的。

43.Taskade

说到协作工具，很少能找到 Taskade。这对应用程序不利，因为它是让团队专注于主题的绝佳工具。

The Taskade dashboard.

如果你是其他协作工具的用户，比如 Asana 或 Basecamp(稍后会有更多介绍)，你会在这里如鱼得水。您最需要的信息，如待办事项和提醒，都集中在引擎盖下。因此，你可以根据你的项目以多种方式展示它。

The presentation types in Taskade.

“思维导图”和“组织结构图”视图类型非常出色，每种视图都为您添加的信息提供了不同的视角。

A mind map in Taskade.

这款应用的简单性具有欺骗性。除了一种灵活的呈现和管理任务的方式之外，几乎没有其他东西可以提供。

与你的团队一起工作只需按几下按钮。例如，每个屏幕都有一个可扩展的聊天窗口:

The Taskade chat window.

对于一些人来说，尤其是与其他解决方案相比，Taskade 可能被视为准系统，甚至装备不足。然而，事实并非如此。Taskade 是一种与团队合作的奇妙方式，由于它的简单性，它可以直接用于你正在进行的任何项目。

44.阿萨纳

The Asana homepage.

Asana 是协作工具领域比较突出的名字之一。在团队的帮助下，抓住一个项目并使其成型是一件非常困难的事情。Asana 也很擅长适应不同的工作流程。例如，您可以在列表和日历之间切换，也可以访问时间线。

Asana’s workflow types.

还有一些非常棒的基于团队的特性和功能。报告是全面的，并且在更高的计划中，您可以访问显示与您的团队绩效相关的各种分析的仪表板。甚至有一种方法可以监控每个团队成员的工作量。因此，体式帮助你将嘎吱嘎吱声保持在最低限度，防止团队成员筋疲力尽。

更重要的是，免费层不是全功能应用程序的残缺演示。你可以像扩展团队一样扩展体式，这里有很好的功能来帮助你。例如，您可以向团队成员分配工作并管理每个工作流。您还可以在每个工作区的基础上向整个团队发送一般消息。

Sending a message in Asana.

这是协作项目管理的老手，但是 Asana 几乎每次都能交付。你会发现你的大部分客户和队友也有一个 Asana 账户，这意味着在应用程序中组装会比你想象的更频繁。

45. Basecamp

Basecamp 是基于团队的项目管理的另一个重要参与者。这是一个老守卫者，几乎和 WordPress 本身一样历史悠久。核心软件已经存在了很长时间，所以它有值得注意的血统和记录。

The Basecamp homepage.

理论上，与竞争相比，Basecamp 没有什么令人兴奋的。老实说，许多其他协作应用已经赶上了 Basecamp 提供的功能。然而，这并不是故事的全部。

是的，您可以创建任务和待办事项列表，将它们分配给团队成员，并在项目范围内处理所有事情。然而，Basecamp 的杀手锏是基础设施和设计。

使用 Basecamp 有一个简单的方法:创建一个项目，制定你的任务清单或时间表，并将任务分配给队友。每个项目都有一系列独立的方面来帮助您完成项目:

The elements that make up a Basecamp project.

正如我们所说，这里没有什么突破性的东西，但这就是重点。Basecamp 是一个可靠的项目管理系统，没有太多花哨的功能。因此，你会不断回来，因为它是可靠和可扩展的基于你的需要。

任务执行者

在 web 开发项目中处理微小的任务会带来一个问题。它们是让你更有效率和生产力所必需的。你必须花费时间和精力来完成这些微观任务。

为了帮助你，你需要一个任务执行人。这里有一些我们最喜欢的。

46.咕哝

The Grunt homepage.

Grunt 是一个特定于 JavaScript 的任务运行器，旨在自动化一些你每天都会遇到的平凡而重复的任务。考虑你通常认为普通的任务:林挺、、缩小、编译等等。

Grunt 通过一个基于 JSON 的配置文件(称为“Gruntfile”)为您处理这些。这里有一个例子:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

如果你经常发现你的项目在日常任务中浪费时间，Grunt 很可能会成为你的 web 开发工具箱的一部分，就像它已经成为了 WordPress、Bootstrap 和许多其他工具的一部分一样。

47.吞咽

The Gulp logo.

当你比较任务跑者时，通常是吞咽和咕噜之间的较量。Gulp 是一个基于 JavaScript 的工具包，用于自动化您的工作流程并提高您的效率。

您将使用专用文件和“流”在资产和代码被写入磁盘之前对其进行操作。您创建的每个任务都是一个“异步”函数，您可以将其设置为私有或公共。不同之处在于其中一个权限:私有任务不能由最终用户运行，并且被设计为与其他功能一起工作。

说到这里，你可以使用 series()和 parallel()函数来创建任务。这意味着你可以做一些小任务，让它们成为一个更大的系统中的一个齿轮，然后嵌套它们。

此外，您还可以通过社区创建的插件来扩展 Gulp 的功能:

A showcase of Gulp plugins.

这可能是一种概括，但 Gulp 和 Grunt 擅长不同的事情。在处理可能是一组更广泛的指令的一部分的资产时，Gulp 是可靠的。正因为如此，您将希望在每个项目的基础上选择合适的任务运行器。

集装箱工具

我们在这里大胆地说，如果你不使用某种形式的容器化或虚拟机工具，你作为 web 开发人员的进步将会受到影响。

当然，这并不一定适用于所有人，但是使用基于容器的开发环境有很多好处。这里有几个选择方案。

48.码头工人

对于许多人来说， Docker 是选择的基于容器的开发环境。开源平台并不全是关于容器的，但这是经常提到的使用它的原因。

The Docker logo.

在前端，这是一个简单的过程:点击一个按钮，获得一个虚拟沙盒开发环境。当然，任何表面上看起来简单的事情其实都是深藏在心底的。Docker 将用户界面(UI)、CLI 和 API 与安全条款相结合，让您能够快速部署。

对于许多开发者来说，Docker 将成为创建新应用的核心。网页开发者——尤其是 WordPress 开发者——有一系列工具来完成这项工作。Local by Flywheel 和 DevKinsta 是领先的平台。

Docker powers the DevKinsta app.

注意:我们最近发布了 DevKinsta——一个本地开发工具，帮助你建立新的 WordPress 网站。您还可以通过单击将网站部署到您的 Kinsta 帐户。

Docker 还集成了许多工具——其中一些已经在您的工作流程中了。GitHub、VS Code 等应用程序可以与 Docker 连接，并提供平滑集成。

总的来说，Docker 可以就它所包含的内容发表一整个系列的文章。尽管如此，这些都不是必须的。很可能你每天都在使用 Docker，你已经知道它有多棒了！

49.LXD

简单来说， LXD 是 Linux 发行版的容器管理器。它是基于映像的，附带了几个为 Linux 预先构建的映像。使用 LXD 可以让您放心，因为您将在相同的默认最终用户操作系统上进行开发。

The LXD logo.

它是由 Ubuntu 开发者 Canonical 创建的，当然，它保持了开源结构。您可以使用非特权容器创建安全的环境，使用许多资源控制资源使用，甚至管理网络。

LXD 也是可扩展的，这意味着您可以运行数千个计算节点或保持简单。对于基于云的应用，LXD 与 OpenNebula 集成——后者有官方驱动程序来管理 LXD 实例。

默认情况下，许多容器化工具使用 Ubuntu 作为标准的虚拟环境。尽管如此，LXD 已经为运行发行版进行了优化。如果您以前没有尝试过，那就值得花时间来运行一个测试工作区。你会发现它比竞争对手更适合特定的工作流程或客户项目。

图像优化工具

资产(或媒体，或任何你喜欢的名字)在网络上是丰富的。有很多专门的基于图像的在线文化。因此，不管使用了多少图像，让您的 web 开发项目表现良好是至关重要的。

以下是一些最流行和最优秀的图像优化工具。

50.短像素

The ShortPixel website.

有许多图像优化应用程序可用，但 ShortPixel 有一个主观上健壮的算法。它能够粉碎图像文件的大小，而不影响质量。如果我们很挑剔，我们会建议，因为默认设置是可用的最高压缩，如果你的图像没有被充分压缩，就没有其他地方可去。不过，这并不是一个重要的批评。

ShortPixel 拥有大量的功能。有三个级别的压缩，一个强大的 PDF 优化器，甚至还有一个 GIF 压缩器。后者是您在许多其他工具中找不到的，因此它是产品线中一个受欢迎的补充。

整个界面也是可访问的:你将图像拖放到上传器上，然后等待 ShortPixel 发挥它的魔力。处理完图像后，您可以批量下载它们，也可以选择下载单个图像:

Downloading images from ShortPixel.

ShortPixel API 工具也很健壮。你会发现单独的 API 减少在线和离线图像，全面的 PHP 和。NET 客户端库、基于 JavaScript 的自适应引擎等等。

我们建议 ShortPixel 是一个开发者工具，因为它非常适合连接您的网站或应用程序。我们还会说，它会一下子取代你的 TinyPNG 瘾，特别是如果你想把它作为一个更大的工作流程的一部分。

51.TinyPNG

大家最喜欢的图像优化工具——TinyPNG到了。您也可以将 TinyJPG 捆绑到这个条目中，尽管这两个工具处理相同的图像格式。

The TinyPNG website.

你会发现 TinyPNG 这些年变化不大。它仍然是一个简单的拖放工具，用于优化您的图像。没有任何花哨的东西，也没有大量的文件格式。尽管如此，TinyPNG 提供的是最高的可用性和与其他工具的集成。

例如，有一个 Photoshop 插件和一个用于更细粒度应用的功能开发者 API 。甚至 Python 用户也可以参与进来，因为 API 也支持这种语言。已经有几个插件使用 API 为很多第三方工具创建。

我们并不是说 TinyPNG 垄断了图像优化市场，但它通常是许多用户的首选。拍摄图像并将其放入上传程序只需几秒钟，当您获得图像 99.9%的完美再现时，就很容易信任了。

网站测试工具

我们之前讨论过测试你的 API 和核心站点代码，尽管这忽略了你的网站的性能。这里有一些我们喜欢的工具，它们也可以帮助你分析你的网站的表现。

52.响应地

The Responsively app.

如果你曾经被你需要在你的应用中执行和完善的媒体查询的数量所淹没，相应地检查一下。这是一个开源的前端工具，可以帮助你根据你选择的设备的不同视窗来开发网站。

Viewing different devices in Responsively.

最棒的是你可以并排比较布局。它给你一个坚实的机会来提高你的设备之间的一致性。每个设备都是精确的，并且有许多可供选择，如果你的站点针对特定的设备，这是非常好的。

你还可以为 Mozilla Firefox 、微软 Edge 和谷歌 Chrome 添加专用的浏览器扩展，将页面发送到相应的浏览器。从这里，您可以打开内置的开发工具并开始工作。

The Responsively inspector.

还有许多其他特性，比如截图功能、热加载支持等等，可以帮助您进行开发。很难对“网络开发者的浏览器”这一口号提出异议。它可能会成为你工作流程的核心部分。

53.谷歌灯塔

对许多人来说，谷歌的 PageSpeed Insights 是一个有价值的工具，可以用来发现一个网站的表现如何，以及你可以在哪里提高加载速度。

Google’s PageSpeed Insights.

也就是说，深入研究一些软件更有意思。它也可能更适合你的需求。 Google Lighthouse 可以在任何网页上运行，并为页面性能、SEO、渐进式网络应用(PWA)等提供审计和报告。

运行 Google Lighthouse 的主要方式是从命令行，使用 Chrome 的 DevTools，或者作为一个节点模块。如果您使用 PageSpeed Insights 接口，Lighthouse 会生成一些分数并提供进一步的见解。

值得注意的是，从表面上看，谷歌灯塔和 PageSpeed Insights 似乎相似。但 PageSpeed Insights 使用的是基于实验室的数据和真实世界的用户数据。Lighthouse 的 suse 分析不考虑用户数据，而是衡量你网站的更多元素。

在我们看来，运行 PageSpeed Insights 和 Lighthouse 都是值得的，尤其是如果你的客户的目标是达到搜索引擎结果页面(SERPs)的顶部。在任何情况下，这都是一个必须掌握的可靠工具，它甚至可以取代 PageSpeed Insights 成为您的首选性能工具。

54.柏树

对于许多开发人员来说，端到端测试并不是一件愉快的事情。 Cypress 选择了这座小山——这是一个简单的解决方案，打破了端到端测试的趋势，产生了一些出色的东西。

The Cypress homepage.

虽然大多数端到端测试工具都是基于 Selenium 的，但是 Cypress 却走了一条不同的路。这意味着用户在基于 Selenium 的测试器中发现的问题在这里不存在。事实上，开发人员希望设置、编写和运行测试变得轻而易举。

为了做到这一点，他们从头开始构建架构，并专注于端到端测试，排除其他形式。为了提高性能，Cypress 与您的程序运行在同一个运行循环中，而不是通过网络执行远程命令。

因为测试代码在浏览器中运行，所以不需要考虑驱动程序或语言绑定。即便如此，您也可以在运行测试之前编译成 JavaScript。

如果您是一名质量保证(QA)工程师或开发人员，希望您的端到端测试能够本地访问您的工作，Cypress 应该引起您的注意。最棒的是还有一个全功能免费层！

55.堆栈溢出和搜索引擎

现在，请允许我们扩展一下 web 开发工具的范围。 Stack Overflow 是任何对 web 开发稍有了解的人都知道的:

The Stack Overflow website.

这是一个专注于编程的问答网站，也是涵盖所有其他主题的栈交换网络的一部分:

One of many niche sites in the Stack Exchange network.

众所周知，它是成千上万开发者的首选资源，尽管其社区存在一些争议，但流量仍然很大。我们冒昧地说，Stack 和您选择的搜索引擎一起，代表了一种用于学习和提高技能的灵活的 web 开发工具。

例如，当遇到与代码相关的开发障碍时，您可能会遇到堆栈溢出。同样，当一个错误出现时，你不确定如何解决，将它粘贴到搜索引擎是找到你需要的答案的最快方法。

鉴于 90%的被调查用户去 Stack Overflow 解决问题，很可能每个人都会使用这个工具。然而，对于初学者来说——或者即使你不能清楚地表达你的问题——搜索引擎可能会更友好一些。

Web 开发参考

如果你是一个认同“RTFM”精神的开发人员，你不需要对以下几个条目进行任何说服。相比之下，如果你喜欢涉入一个问题并解决它，要知道在你之前已经有无数的开发者可能找到了答案。

有鉴于此，看看下面几个 web 开发工具，都是基于 web 参考资料的。

56.MDN Web 文档

早在网络早期，Lycos 就有一个名为 Webmonkey 的网站，旨在向新用户教授 web 开发和编程。这个网站的精神在 Mozilla 的 MDN Web Docs 中继续存在。Webmoney 于 2004 年关闭，MDN Web Docs 于 2005 年问世，因此两者之间有着天然的契合。

The MDN Web Docs homepage.

这是一个资源集合，在某些情况下可以帮助您学习 web 编程，在其他情况下可以帮助您学习 Mozilla 特定的产品。内容分为两大类:技术和参考指南。您将看到几个基于您现有能力和经验的教程，一个专门的参考指南，以及一些关于前者的更多资源。

这些指南都与开发行业中的特定领域和行业相关。例如， Web 开发参考充当了附加 HTML、CSS 和 JavaScript 指南的“基石”页面。

MDN Web Docs JavaScript page.

还有对各种行业的广泛观察，如游戏开发和在该领域开始需要什么:

MDN Web Doc’s guide on game development.

MDN Web Docs 是初级 Web 开发人员的必备读物，它也为专家提供了足够多的价值。如果有任何网站值得一个浏览器书签，这就是它！

57.DevDocs — API 文档浏览器

过去，你会将所有购买产品的手册保存在布满灰尘的抽屉或橱柜中。随着生活变得越来越数字化，那些纸质手册已经让位于从每个制造商的网站上下载的 PDF 文件。

通过这样做，我们现在有网站收集管理图书馆中手册的数字版本。它让您可以从一个存储库中找到您需要的内容。因此，web 开发主题也应该存在。

简而言之， DevDocs 是一个 API 文档库，我们认为它对几乎所有开发人员都很有价值:

The DevDocs homepage.

在浏览这个库之前，您需要启用您想要的 API 文档。您可以在首选项屏幕中完成此操作:

The DevDocs Preferences screen.

完成后，您将能够从专用的树形菜单中访问相关文档:

The WordPress API screen.

这是对低效问题的简单解决方案，因为您在一个地方有多个 API 引用。DevDocs 是另一个值得收藏的网站，很遗憾没有一个桌面应用程序可以更快地提供参考。

58.CSS-技巧

Chris Coyier 是许多 web 开发人员都知道的一个名字。我们打赌你已经熟悉了他创建的网站—CSS—Tricks。顾名思义，这是一个致力于前端编码，特别是 CSS，以及如何变得更好的网站。

The CSS-Tricks homepage.

正如关于页面注释所言，最初几年，CSS 是主要话题。然而，从那以后，HTML、JavaScript、WordPress 等等变得同样重要，并且经常被讨论。结果是一个专注于前端开发的网站，有大量的文章、视频和指南来启发你。

The blogroll for CSS-Tricks.

一个简单但有价值的元素是 CSS 历书，它概述了 CSS 中的选择器和属性。如果你需要掌握这门语言的某些方面，这是一个很好的参考资料。

The CSS-Tricks Almanac.

虽然 CSS-Tricks 有类似参考的方面，但它本身并不是参考资源。不过，不管是通过 RSS 提要还是其他解决方案，它都应该是你经常去的地方。内容质量很高，能以你以前想不到的方式挑战你。至少，订阅时事通讯，等待 CSS-Tricks 进入你的收件箱。

*#### 59.开发社区

想象一下，你可以从社交媒体、网络开发和堆栈溢出中提取优秀的部分，然后创建一个将它们融合在一起的网站。结果可能是开发社区。

The DEV Community homepage.

这是一个博客平台，也是一个寻找发展问题答案的途径。您选择要关注的标签和人员，您的新闻订阅源就变成了一个自动化的、有管理的帖子和见解时间轴:

The DEV Community timeline for the JavaScript tag.

如果你愿意的话，可以说这是一个随处可见的信息。DEV 社区的优点是它在这里，它是开发主题的定向整理。把它想象成一个开发者大会的轨道，而不是在公共汽车站偷听和打断一个相关的对话。

这是另一个在你的 RSS 提要中表现良好的网站，或者作为你收件箱中的摘要。因此，它也是一个“沉睡者”资源，因为你会不知不觉地来到这里。

60.我可以用…

你可能会说，Jeeves 开创了通过在网上提问来寻找信息的潮流。各种搜索算法很快取代了他，尽管基于问题的搜索仍然是找到你所需要的东西的可靠方法。

我能用… 是前端开发者对“有没有问 Jeeves 要 CSS 的？”

The Can I use… homepage.

前提很简单:您在搜索字段中键入 CSS 选择器或属性，数据库会返回您是否可以使用它来创建网站。你也不局限于 CSS。还支持 JavaScript 和 HTML:

Searching for an HTML element in Can I use…

这是一个前端语言数据库，所以它不会返回 PHP、Python 或其他服务器端语言的结果。即便如此，我可以使用……是一个巨大而有价值的工具，它将在多种设备的可访问性和设计方面为您提供帮助。

这是一个简单的提议，只需找出一个特定的元素，看一眼你的目标浏览器是否支持它:

The browser support table in Can I use…

如果仔细观察，还可以发现一些统计数据，例如元素的发布日期和使用百分比:

Information for a specific element in Can I use…

总的来说，我能用吗……可能不会经常使用。不过，在项目的某些阶段，它几乎会一直开放。一旦你弄清楚你的目标浏览器将支持什么，我可以使用… 重新放回你的书签，等待下一次需要它的时候。这是一个有用的服务，当涉及到您的前端代码时，它可以是一个“水载体”。

From wireframing to design to building collaborative workflows, there's a lot that goes into a successful development project 👨‍💻 These tools will help you keep things streamlined 😌Click to Tweet

摘要

时间和金钱都很紧迫，选择您一直使用的旧的 web 开发工具是合理的。然而，对一个项目的需求做出一个经过深思熟虑的选择将会在时间、成本和生产力上得到回报。

在本帖中，我们介绍了 60 种令人惊叹的网络开发工具，你可以在 2022 年使用这些工具来帮助你和你的团队。可能你已经知道了。如果各种调查都是正确的，那么更多的开发人员会转向 GitHub、TypeScript、不同的 web 服务栈以及众多 JavaScript 框架中的一个来完成项目。

无论您选择使用什么样的 web 开发工具， Kinsta 客户都可以通过 MyKinsta 平台获得更多信息。这包括通过使用内置在 MyKinsta 仪表板 中的 代码缩小功能 ，快速轻松地提升您的整体优化，允许客户只需简单点击即可实现 CSS 和 JavaScript 的自动缩小。

你有没有一个 web 开发工具可以推荐开发者在 2022 年使用？请在下面的评论区告诉我们你的想法！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。*

好的虚拟主机支持的三大特点

原文：https://kinsta.com/blog/web-hosting-support/

虚拟主机支持是人们在考虑主机提供商时经常忽略的一个重要因素。

告诉你在优秀的虚拟主机服务中寻找什么的文章通常会包括一个项目，告诉你寻找优秀的客户服务或技术支持。

但是拥有强大的虚拟主机支持到底意味着什么呢？这篇文章将帮助你回答这个问题。

开始吧！

什么是虚拟主机支持？

虚拟主机支持的主要目标是确保客户的虚拟主机计划顺利运行。虚拟主机支持是一个在线帮助台，当客户遇到困难和故障时，它会提供帮助。

这些任务可能包括:

• 故障排除 WordPress 错误和服务器问题
• 创建备份
• 网站基本维护
• 网站迁移
• 让客户了解服务器和软件设置以及如何更改它们

What exactly does it mean to have great web hosting support? 🤔 Learn more in this guide ⬇️Click to Tweet

虚拟主机支持可以帮助客户处理一般管理任务，如处理退款和退款保证。支持代理也可以协助一般查询或升级。

虚拟主机支持代理应该同时具备技术和客户服务技能。

对于技术支持代理来说，仅仅知道常见的虚拟主机问题是不够的。代理可能拥有一流的技术技能，但如果他们不能用更简单的术语解释问题，或者如果客户不明白如何通过支持渠道解决问题，他们两人都会感到失望。

同时，提供专业化或高技术解决方案的虚拟主机公司不能只雇佣任何客户服务代理。虽然我们相信任何人都可以学到任何东西，但让新代理加入高度技术性的帐户也可能会让双方都感到沮丧。

如何确定虚拟主机支持的质量

Kinsta offers excellent web hosting support through several channels.

现在你知道了什么是虚拟主机支持，它包括什么，我们将向你展示优秀的技术支持和最低限度的区别。

1.全天候可用

你不能控制中断或问题何时出现，最好的虚拟主机提供商明白这一点。

• 最低限度:虚拟主机支持团队全年无休。

• 出色的支持:一个强大的支持团队很容易联系到。没有漫长的等待时间，即使你没有订阅专用服务器或 VPS 主机，也总有一个代理可以帮助你。等待时间短也是一个很好的迹象，表明主机提供商不会遇到很多问题。

2.多重联系渠道

随着通信技术的发展，企业没有借口不可用。常见的支持渠道包括电子邮件、实时聊天、聊天机器人、社交媒体和电话等。

• 最起码:有一个虚拟主机支持团队可以帮助解决客户的问题。请记住，免费的 托管计划往往甚至不提供支持。

• 出色的支持:除了代理之外，当客户喜欢自己解决问题时，拥有文档、教程和知识库也很有帮助。 Salesforce 发现 89%的千禧一代客户更愿意自己寻找解决方案。如果他们找不到他们要找的东西，他们就会联系客户支持。

3.熟练的技术支持

技术支持团队应该能够指导您排除错误。如果做不到这一点，意味着虚拟主机公司更注重价格竞争或省钱，而不是提供良好的服务。

• 最低限度:托管团队可以解决您的技术问题，并有能力为网站迁移等服务提供标准协助。

• 优秀的支持:一个好的虚拟主机支持团队是高效的。他们可以瞬间解决问题。当团队花一整天来解决问题时，随时可用是没有用的，客户不能也不会等那么久。

最好的虚拟主机公司明白他们的客户来自世界各地，所以他们也提供多语言支持。提供这项额外服务有助于网站的可访问性和包容性。

如果你曾经使用过你的主机的虚拟主机支持服务，你可以使用我们的列表来检查他们是否提供了满意的服务。

如果技术支持人员让你失望了，他们很难联系上，或者公司提供的客户支持少于 24/7/365，那么是时候找一个新的虚拟主机提供商了。

虚拟主机支持渠道

Kinsta’s resource center.

拥有优秀的虚拟主机支持的公司为他们的客户提供不同的渠道来联系他们。

1.证明文件

文档在开发和网站托管中起着重要的作用。它有助于读者和客户理解:

• 虚拟主机如何工作
• 遇到的常见问题
• 为什么会出现这些问题
• 如何解决这些问题

文档通常以下列形式编写:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

• 知识库
• 博客帖子
• 白皮书
• 电子书
• 案例分析

因为技术经常变化，顶级虚拟主机公司也保持他们的文档是最新的。

2.教程

教程类似于文档，但通常以视频形式出现。教程也可以写，但是我们用这个术语来指视频格式。

教程是需要查看逐步故障排除指南的学习者的最佳格式。最棒的是，用户可以重播这些视频。

视频可以是:

• 网络研讨会
• 上传到 YouTube
• 公司的仓库
• 会员网站的一部分

3.在线聊天

近年来，实时聊天支持已经成为一种更加常见的支持渠道，41%的人更喜欢实时聊天，而不是其他任何支持媒介。

主要原因包括:

• 更快的响应时间
• 几乎没有等待时间
• 便利

一些实时聊天解决方案也可以在需要时升级为语音或视频。除了受到大多数客户的青睐，企业也从实时聊天中受益。这些福利包括:

• 降低成本
• 更高的客户满意度
• 增加客户忠诚度、销售额和收入

有几种方法可以将实时聊天添加到您的网站。你可以注册一个实时聊天应用或者安装一个 WordPress 实时聊天 插件。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

对于常见问题(FAQ)和客户服务查询，您还可以将聊天机器人添加到您的实时聊天功能中。

改善实时聊天支持的客户体验的另一种方法是确保您的聊天允许上传图像，以便用户可以共享屏幕截图。这使得代理更容易诊断和解决用户的问题。

4.电话

大多数人认为电话支持是公司提供的最常见的客户服务渠道。这是最受欢迎的支持方法之一(尤其是对那些不太懂技术的人来说)，因为它简单。它降低了浏览网站或客户门户的需求，用户可以在与代理交谈的同时解决他们的问题。

电话支持也为支持服务提供了重要的人力因素。代理和客户可以进行自然的对话，这比试图通过文本解决问题提供了更多的上下文。

然而，并不是所有的企业都推荐电话支持。这对于一些行业来说是有意义的——例如危机或紧急热线，这需要紧急和人为因素——但它通常不是最有效的虚拟主机支持渠道。

有一些技术可以让虚拟主机公司更容易、更快地解决客户的问题。例如，通过您的托管帐户联系支持，代理可以立即获取您的信息，而电话支持则需要您通过漫长的验证过程。

当您可以从您的托管帐户访问支持时，您还可以共享您遇到的问题的屏幕截图或视频，以便支持团队快速解决这些问题。

5.电子邮件

虽然电话和实时聊天支持允许客户与代理实时沟通，但电子邮件支持更多的是一种延迟渠道。尽管它的延迟性质，公司认为它是他们的支持产品中的一个必须的，因为它提供了普遍的影响——几乎每个人都有一个电子邮件帐户并打开它。

电子邮件支持最适合对时间不敏感的投诉(例如，不需要立即解决的投诉)。在发送电子邮件支持时，请记住大多数客户更喜欢随意的语气，除非你在发送坏消息(这需要正式)。

Kinsta 如何击败其他虚拟主机支持团队

Kinsta 是一家相信虚拟主机支持重要性的虚拟主机公司。这就是为什么我们要超越这一点，为我们的客户提供服务。

除了 24/7 的可用性，我们还为自己的虚拟主机支持团队感到自豪，该团队由一级支持代理组成。代替客户支持，你得到真正的 IT 技术人员和网络开发人员来解决你的问题。

我们还为我们的快速响应时间感到自豪——我们在 2019 年的平均门票响应时间是 1 分 19 秒。

当您注册 Kinsta 计划时，您可以访问以下虚拟主机支持服务:

• 免费网站迁移
• 调查 服务器错误信息
• 解决问题用 外发事务性邮件
• 安全监控，包括 DDoS 防护
  *** 防流量浪涌* 正常运行时间 检查 : 我们每两分钟检查一次您的站点是否在线。* 定期备份 : 从 MyKinsta 控制面板访问您的备份。你也可以购买外部或每小时备份附加组件。**

**所有这些服务都包含在 Kinsta 的支持范围中。

要访问我们卓越的虚拟主机支持服务，只需登录您的 MyKinsta 帐户。我们不提供电话支持，但是我们的代理可以全天候在线聊天。

MyKinsta homepage.

Kinsta 用户也可以访问我们的 Learn WordPress 资源和知识库来帮助你从你的托管计划中获得最大收益。

Looking for a new hosting provider? 👀 Read this first ⬇️Click to Tweet

摘要

当用户寻找虚拟主机解决方案时，虚拟主机支持经常被忽视。然而，这是一个很好的指标，多少虚拟主机提供商重视你。提供出色的 WordPress 支持的公司表明，他们希望通过让用户的生活变得更容易来让技术变得可及——尤其是那些不懂技术的人。

当你研究一家公司的虚拟主机支持时，记得要了解:

1. 有效性
2. 多重联系渠道
3. 技术专长

Kinsta 提供 WordPress 优化的云主机，我们可以帮助你为你的大型或小型企业制作完美的网站。

今天就注册一个 Kinsta 应用、数据库，或者托管 WordPress 主机。

你过去的虚拟主机支持经历对你或你的企业有什么影响？请在评论中告诉我们。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。**

30+2022 年你的下一个设计的最佳网页安全字体

原文：https://kinsta.com/blog/web-safe-fonts/

你不需要成千上万的字体来创建一个好看的网站。但是你需要确保你使用的字体对每个访问你网站的人都是可见的。这就是网络安全字体的用武之地。

如果你能找到网页安全字体，a) 100%免费使用，b)不需要放在其他地方让你的访问者看到，这将是你的一个本垒打。

这正是这篇文章的目的:我们将介绍 31 种最好看的网页安全字体，并向你展示如何在你的 WordPress 网站上实现它们。

使用下面的链接导航到您最感兴趣的部分，或者直接跳转到我们的网页安全字体列表:

什么字体是网页安全的？

包括变体在内，网上有超过 650，000 种不同的字体。大多数 web 浏览器和操作系统支持的字体被认为是 web 安全的。操作系统会自动包含字体文件，因此访问者不必从您的服务器下载字体。

一个例子是无处不在的 Arial 字体，它产生了成千上万的“副产品”。

2022 年网页安全字体有必要吗？

Browser market share 2019-2020 (Image source: StatCounter)

当然，绝大多数用户现在都在使用谷歌 Chrome 浏览器，无论是在手机上还是在桌面上。但这并不意味着网页安全字体已经成为过去。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

事实上，支持的字体因操作系统而异，包括用户使用的当前版本。所以如果你用一种只有最新版本的 Windows 10 支持的字体设计一个网站，大多数用户会看到别的东西。

此外，如果你选择使用和托管一个自定义的本地字体，或者由第三方托管的字体，会降低你网站的速度。所以，切换到网页安全字体可以加快你的网站。这是一件好事。因为近 70%的消费者说页面速度影响他们的购买决定。
T9】

谷歌字体网络安全吗？

你的操作系统本身并不支持谷歌字体，所以根据定义，它们不是网页安全字体。相反，由于谷歌，第三方，主持他们，谷歌字体被称为网络字体。令人困惑，我们知道，但不同的是，你的浏览器需要加载一个文件才能显示谷歌字体。

Web 安全字体已经在大多数设备上准备好了字体文件。但是，不要担心缺少安全这个词。使用谷歌字体来增强你网站的设计是完全安全的。但是，对外部服务器的额外的 HTTP 请求会降低你的页面加载速度。

These web-safe fonts are a) 100% free to use ✅ and b) don’t need to be hosted anywhere else for your visitors to see them ✅ Find all 30+ options here ⬇️Click to Tweet

31+最佳网络安全字体

我们已经编制了一个超过三十种不同的好看的网页安全字体的列表，你可以用它来设计你的网站。

让我们直接开始吧。

1.天线

Arial font example

Arial 是一种经典的无衬线字体，适用于段落和标题。这一直是 T2 网页设计中的一个主要元素。尽管近年来，它经常被用作字体堆栈中的备用字体，而不是主要字体系列。

推荐的字体堆栈

字体系列:Arial，Helvetica 新，Helvetica，无衬线。

2.巴斯卡比尔

Baskerville font example

巴斯克维尔字体是一种相对较粗的衬线字体，最初是由约翰·巴斯克维尔在 1750 年开发出来的。这种设计非常平衡，使用粗细笔画的混合来软化典型衬线字体的硬边。较新的苹果和微软操作系统版本很好地支持它。

推荐的字体堆栈

Font-family:巴斯克维尔，巴斯克维尔老面孔，Garamond，Times New Roman，serif。

3.博多尼山/博多尼 72

Bodoni MT font example

Bodoni MT 是一种衬线字体，就像 Times New Roman 一样，更适合段落文本，而不是大多数网站的标题。Bodoni MT 在微软 10 和一些旧版本中默认可用。Bodoni 72 包含在 macOS Sierra 和更新的版本中。

推荐的字体堆栈

字体系列:博多尼山，博多尼 72，迪多特，迪多特 LT 标准，Hoefler 文本，Garamond，时代新罗马，衬线。

4.卡里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布

Calibri font example

Calibri 是微软的标准无衬线字体，自其与微软 Office 2007 一起发布以来一直如此。它有一个柔软，现代的外观，圆形的边缘提升了典型的无衬线感觉，使它比机器人更温暖。

推荐的字体堆栈

字体系列:Calibri，Candara，Segoe，Segoe UI，Optima，Arial，sans-serif。

5.卡利斯托山

Calisto MT font example

Calisto MT 是一种衬线字体，与大多数类似的字体相比，它的衬线稍微柔和一些，不那么明显。这是一种标准的微软字体，包含在大多数较新版本的 Windows 中。macOS 或 iOS 的对等物是 Bookman 旧样式字体。

推荐的字体堆栈

字体系列:Calisto MT，Bookman 旧风格，Bookman，Goudy 旧风格，Garamond，Hoefler 文本，比特流宪章，格鲁吉亚，衬线。

6.威尔士

Cambria font example

Cambria 是一种更柔和的衬线字体，在许多情况下，即使是大写字母也几乎看不到衬线。这给了它一个更现代的感觉，同时也保持了屏幕上高水平的可读性。

推荐的字体堆栈

字体系列:剑桥，格鲁吉亚，衬线。

7. Candara

Candara font example

Candara 是一种无衬线字体。它是微软 ClearType 字体集合的一部分。macOS 和 iOS 等同于 Optima Regular。与其他无衬线字体相比，不均匀的笔画粗细使它感觉有点不那么现代和公司化。

推荐的字体堆栈

字体系列:Candara，Calibri，Segoe，Segoe UI，Optima，Arial，sans-serif。

8.世纪哥特式

Century Gothic font example

Century Gothic 是一种几何无衬线字体，具有非常干净和平衡的外观。这是一种很棒的网页字体，尤其是对于标题和副标题来说。它最初是为了与字体 Futura 竞争而设计的。它包含在大多数微软和苹果操作系统中。

推荐的字体堆栈

字体系列:CenturyGothic，Century Gothic，AppleGothic，sans-serif。

9.控制台(s)

Consolas font example

Consolas 是一种无衬线字体，采用独特的方法来设计。所有字符都有相同的宽度，这就是为什么它只对字母“I”和小写字母“l”使用衬线。它是 ClearType 集合的一部分。

推荐的字体堆栈

字体系列:consolas、monaco、monospace。

10.铜版哥特式

Copperplate Gothic font example

Copperplate Gothic 是一种受哥特风格启发的字体，在某些字母上有轻微的雕版衬线。因为它的灵感来自哥特符文，所以没有小写字体。

推荐的字体堆栈

字体系列:铜板，铜板哥特式光，幻想。

11.信使新闻

Courier New font example

Courier New 是一种等宽的平板衬线字体，与大多数其他衬线和无衬线字体相比，它的常规文本要细得多。微软和苹果几乎完美地覆盖了电脑和移动设备。

推荐的字体堆栈

字体系列:信使新闻，信使，Lucida 无打字机，Lucida 打字机，等宽字体。

12.德佳佛·桑

Dejavu Sans font example

Dejavu Sans 是一种线条清晰的无衬线字体，几乎是对 Arial 和 Verdana 等经典 Sans 字体的回归。

推荐的字体堆栈

字体系列:Dejavu Sans、Arial、Verdana、sans serif。

13.狄多

Didot font example

迪多特是一种受原始迪多特字体启发的字体，由 19 世纪法国印刷企业迪多特家族使用。它是苹果的支柱，受其大多数操作系统和设备的支持。

推荐的字体堆栈

字体系列:迪多特，迪多特 LT 标准，Hoefler 文本，Garamond，Calisto 山，时代新罗马，衬线。

14.富兰克林·哥特

Franklin Gothic font example

Franklin Gothic 是一种无衬线字体，字母异常粗，几乎就像是另一种字体的粗体版本。最初的字体是在 20 世纪初由美国字体创始人开发的。对于标题来说，这是一个很好的字体选择，但是对于正文来说可能不是一个很好的选择。

推荐的字体堆栈

字体系列:富兰克林哥特式，Arial 粗体。

15.加拉蒙字体

Garamond font example

Garamond 是一种衬线字体，灵感来自 16 世纪巴黎雕刻师 Claude Garamond 制作的字体。它比一些更标准的衬线字体，如 Times New Roman，边缘更柔和、更圆。微软和苹果操作系统的现代版本包括他们自己版本的 Garamond 字体。

推荐的字体堆栈

字体系列:Garamond，巴斯克维尔，巴斯克维尔老面孔，霍夫勒文本，时代新罗马，衬线。

16.格鲁吉亚

Georgia font example

佐治亚州 Garamond 的近亲是另一种衬线字体，边缘大多为圆形，感觉相当温暖。它是 1996 年为微软开发的，现在仍然是最广泛使用的 MS 字体之一。几乎所有的 Windows 和 macOS 版本都支持它。

推荐的字体堆栈

字体系列:格鲁吉亚，时代，时代新罗马，衬线。

17.无鳃鱼

Gill Sans font example

Gill Sans 是一种无衬线字体，线条清晰，具有现代感。这对于开箱即用的段落文本来说并不理想，因为其字母之间的缺乏对比，并且间距很小。但是正如你在示例文本中看到的，这是一个非常棒的标题。大多数 iOS、macOS 和 Windows 驱动的设备都支持它。

推荐的字体堆栈

字体系列:Gill Sans、Gill Sans MT、Calibri、sans serif。

18.古迪旧风格

Goudy Old Style font example

Goudy Old Style 是一种柔和的旧式衬线字体，衬线很强，具有老式的外观和感觉。句点是菱形的，而不是大多数衬线字体的规则圆形。它包含在大多数较新版本的 Windows 中。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

推荐的字体堆栈

字体系列:古迪旧风格，Garamond，大卡斯龙，时代新罗马，衬线。

19.Helvetica

Helvetica font documentary (Source: Kanopy)

Helvetica 可能是有史以来最著名的字体，也绝对是唯一拥有自己的专用纪录片的字体之一。这是一种现代无衬线字体，灵感来自 19 世纪末和 20 世纪初的其他现代瑞士和德国字体。

它不是柔软、圆润和温暖的设计，而是平衡的，专注于干净的线条和形状。这使得它成为少数几种既适合正文又适合标题的字体之一。所有苹果设备都包含 Helvetica 字体，而微软默认使用 Arial 字体，这是微软的对等字体。

推荐的字体堆栈

字体系列:Helvetica 新，Helvetica，Arial，无衬线。

20.影响

Impact font example

Impact 是一种现实主义的无衬线字体，所有文本、大写字母和小写字母都默认使用非常粗的粗体。这种加粗使它从普通文本中脱颖而出，非常适合标题或CTA(行动号召)，但它不适合正文。

它是 1998 年 web 包最初的核心字体的一部分。直到今天，它仍然被苹果和 Windows 电脑和手机广泛包含和支持。

推荐的字体堆栈

字体系列:影响，木炭，Helvetica Inserat，比特流 Vera 无粗体，Arial 黑色，无衬线。

21.露西达布赖特

Lucida Bright font example

Lucida Bright 是微软 Lucida 字体系列中的衬线字体，于 1991 年为 MS 开发。让它脱颖而出的一点是使用了更方、更坚固的衬线，例如大写字母“T”和“L”。默认情况下，它包含在大多数较新版本的 Windows 中，而 macOS 通常只包含无衬线字体 Lucida Grande，这使得 Georgia 成为一种逻辑上的备用字体。

推荐的字体堆栈

字体系列:Lucida 明亮，格鲁吉亚，衬线。

22.露茜达·桑

Lucida Sans font example

Lucida Sans 是一种简洁的人文主义无衬线字体，专为补充 Lucida 系列中的衬线字体而设计。与 Helvetica 或 Arial 等更干净的无字体相比，笔画粗细的变化更大。这让它感觉少了一点未来感或机器人感，多了一点俏皮。开箱即用，这是一个伟大的标题和 CTA 字体。

推荐的字体堆栈

字体系列:Lucida Sans、Helvetica、Arial、sans-serif。

23.微软无衬线字体

Microsoft Sans Serif font example

Microsoft Sans Serif 是 Windows 2000 中首次引入的一种 Sans Serif 字体。它是 MS Sans Serif 字体的继承者，也就是众所周知的阖闾(Helvetica 的缩写)。它的灵感来自并基于 Helvetica，现代的领先无衬线字体。

这是一种干净的字体，笔画粗细均匀，看起来干净、专业。完美的标题和企业网站。它被作为网页的原始字体之一，并且仍然是所有微软设备的标准。

推荐的字体堆栈

字体系列:MS 无衬线，无衬线。

24.ＯＰＴIＭＵＭ的复数

Optima font example

Optima 是一种人文主义的无衬线字体，具有不同的笔画粗细和不同的对称性。这使得它看起来几乎是手工完成的，这与典型的大规模生产的无衬线字体的感觉相抵触。这是标准的 Apple sans serif 字体之一，受大多数 iOS 和 macOS 设备支持。微软的对等物是 Segoe。

推荐的字体堆栈

字体系列:Optima，Segoe，Segoe UI，Candara，Calibri，Arial，sans-serif。

25.帕拉蒂诺

Palatino font example

Palatino 是另一种老式衬线字体，在任何在线报纸或杂志上都能感觉如鱼得水。但它不像乔治亚风格或泰晤士新罗马风格那样统一，笔画粗细和形状各不相同。

与宕机和 WordPress 问题做斗争？Kinsta 是一款考虑到性能和安全性的托管解决方案！查看我们的计划

这种设计方法有助于柔化 k、l、x、y 和 z 等尖锐的字母。它也比其他衬线字体略粗。这两个因素有助于它感觉有点温暖。Palatino 包含在大多数 Windows 和 Apple 设备中。

推荐的字体堆栈

字体系列:帕拉蒂诺，帕拉蒂诺 Linotype，帕拉蒂诺 LT 标准，图书古，格鲁吉亚，衬线。

26.佩尔图阿

Perpetua font example

Perpetua 是一种设计独特的衬线字体，最初由英国雕塑家埃里克·吉尔创作。笔画粗细有鲜明对比，比如看小写的“e”或者数字“3”。这赋予了字体一种创造性的、近乎戏谑的特质。这是一种典型的 Windows 字体，但它的近亲巴斯克维尔是大多数苹果设备的标准字体。

推荐的字体堆栈

字体系列:Perpetua，Baskerville，Big Caslon，Palatino Linotype，Palatino，serif。

27.罗克韦尔

Rockwell font example

Rockwell 是一种方形或平板衬线字体，字体非常粗，几乎是单重的。它适用于标题或 CTA，但增加的字体粗细对正文来说不是很好。它包含在最新版本的 MS Windows 中。

推荐的字体堆栈

字体系列:罗克韦尔，信使粗体，信使，格鲁吉亚，时代，时代新罗马，衬线。

28.跟着我

Segoe UI font example

Segoe UI 是 Segoe 字体系列中领先的无衬线字体。微软不仅在许多应用程序中使用它，而且在产品的各种营销材料中也使用它。

是现代字体，字母对称，笔画粗细变化不大。苹果电脑不包括这种字体，但 Helvetica Neue 的外观和感觉都很相似。

推荐的字体堆栈

字体系列:Segoe UI、fruh、Dejavu Sans、helvetica neue、Arial、sans-serif。

29.前面有突出的护架

Tahoma font example

Tahoma 是微软开发的另一种无衬线字体。它的字母比 Segoe UI 略粗，小写字母、句点和其他标记使用方形圆点。

这是一种干净、统一的字体，在内容或标题中不会感到不合适。它包含在所有微软设备和几乎所有苹果设备中。

推荐的字体堆栈

字体系列:宋体，宋体，宋体，无衬线。

30.投石机 MS

Trebuchet MS font example

Trebuchet MS 是微软开发的另一种无衬线字体。它是微软网络包核心字体中的原始字体之一。几乎所有的微软和苹果设备都支持它。这些字母比许多其他无衬线字体更细，使其成为段落和正文的一个选项。

推荐的字体堆栈

字体系列:Trebuchet MS，大光泽，无 Unicode 光泽，无衬线光泽，无衬线光泽。

31.韦尔达纳

Verdana font example

Verdana 是一种干净的无衬线字体，是微软自 1996 年以来的另一种主要字体。对于无衬线字体来说，笔画粗细相当低，从而使字母变得纤细、易读。您可以将它用于段落文本和标题，没有问题。几乎所有苹果和 Windows 设备都支持它。

推荐的字体堆栈

字体系列:Verdana，Geneva，无衬线字体。

网络安全草书字体

如果你想使用网页安全的草书字体，你没有太多的选项可以选择。具体来说:

• Segoe 脚本
• 流行
• 脚本 MT
• 斯内尔圆手
• Lucida 笔迹

苹果和微软的设备都没有普遍支持的草书字体。你应该考虑到在你的正文中使用草书字体可能不是一个好主意，因为可读性是网站可用性的一个重要部分。

你应该在你的段落中使用可读性高的文字，否则视力受损的访问者会很难阅读你网站上的文字。这可能导致高跳出率和普遍缺乏对你的内容的参与度。

网络安全无衬线字体

Sans 在法语中是“没有”的意思，所以 sans serif 本质上是“没有衬线”的意思。衬线是字母中加在长笔画上的线条或笔画。例如，在报纸或杂志标题中常见的大写字母“T”顶部笔画下的小竖线。无衬线字体是网络上最常见和最受欢迎的字体，因此您有很多选项可以选择:

• 天线
• 卡里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布里布
• Candara
• 世纪哥特式
• 控制台(s)
• 德佳佛·桑
• 富兰克林·哥特
• 吉尔·桑
• Helvetica
• 露茜达·桑
• 无衬线女士
• 新 Helvetica
• ＯＰＴIＭＵＭ的复数
• 跟着我
• 前面有突出的护架
• 投石机 MS
• 韦尔达纳

从哪里下载网页安全字体？

web 安全字体的伟大之处在于，您不必担心下载它们。他们已经被每个访问者的操作系统所支持，所以你只需要用 CSS 把它编码进去。如果你对 HTML 和 CSS 或者网络编码一无所知，这可能会让人有些不知所措。

但是相信我们，这并没有你想象的那么难。在下一节中，我们将一步一步地引导您完成这个过程。

如何给你的 WordPress 网站添加网页安全字体

如果你有一个带有最新 Twenty Twenty 主题的 WordPress 站点，你可以通过在 WordPress 定制器中添加定制 CSS 来编辑 HTML 字体。

通过单击菜单中的“外观”>“定制”链接来访问它，然后展开“附加 CSS”选项卡。

WordPress Customizer – additional CSS

然后你需要使用 Chrome Dev 工具(或者另一个浏览器的类似工具)来识别你想要改变的文本的选择器。

例如，您可以查看您的博客文章的标题:

Chrome Dev Tools – inspect

我们可以看到主题为标题使用了标准的“条目-标题”选择器。您还可以搜索“font-family”属性来查看主题是如何设计文本样式的，以及在什么级别。

由于 Twenty Twenty 不使用特定的标题字体，您可以通过定位“字体系列”选择器来轻松修改标题字体。

例如，如果我们要将标题更改为 Impact 字体，我们可以使用以下代码:

h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }

只需将其添加到附加 CSS 中，然后点击“发布”即可实时发布您的更改。

WP Customizer – New headline font

我们在关于如何在 WordPress 中改变字体的指南中会涉及到这个和更多的内容。如果你用 HTML 和 CSS 建立了你的网站，你可以直接在源代码中编辑字体。

例如，如果您在 HTML 文档中使用 style 标签将 CSS 代码应用到每个页面，您可以在那里编辑 font-family 属性。

Body CSS selector font-family

如果您想要更改页面上所有文本的字体，您应该将“body”选择器作为目标。如果您想要更改特定文本的字体，您需要使用特定的选择器。

如果你使用一个模板来构建你的网站，你的 CSS 很可能位于一个单独的样式表中。这很棒，因为这意味着你可以通过编辑一个文件来改变整个网站的字体。

在这种情况下，您需要找到您的样式表文件(通常命名为 style.css 或其变体)。然后你需要找到控制你的网站的字体和字体的部分。

CSS stylesheet example

通常，这是朝着顶部进行的。如果没有，您可以使用您选择的代码编辑器来搜索“font-family”。

Did you know that switching to web-safe fonts can speed up your website? 🚀 And that 70% of consumers say page speed influences their purchasing decisions? 😱 Two great reasons to check out this list of 30+ web-safe fonts ⬇️Click to Tweet

摘要

就像主题和插件一样，当谈到字体创意时，你不会缺少选择。

有各种各样的衬线字体、无衬线字体、等宽字体，甚至可以免费使用草书字体，web safe 字体是创建网站的一个很好的起点。

完美的字体让你的品牌脱颖而出，提高可读性，并支持你的信息。明智选择！

如果你喜欢这篇文章，看看我们的 50 大复古字体指南，给你的网站或平面设计项目一种怀旧的感觉。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何在 WordPress 上使用 WebP 图片(将图片文件大小缩小 35%)

原文:# t0]https://kinta . com/blog/web/

如果你想加快你的 WordPress 站点的速度，减小图片的文件大小会给你的投资带来可观的回报。平均而言，图片占网页文件大小的一半左右，因此即使是微小的改进也会产生巨大的效果。WebP 可以在这方面给你极大的帮助！

WebP 是一种现代图像格式，可以帮助您在不改变图像外观的情况下缩小图像的大小。平均来说，学习如何将图像转换成 WebP 可以将文件大小缩小 25-35%,而质量没有明显的损失。

大多数现代浏览器和 WordPress 5.8+ 都支持 WebP 开箱即用。在本文中，我们将深入探讨这种令人兴奋的新图像格式，并向您展示如何利用它的神奇之处。

准备好了吗？我们开始吧！

什么是 WebP？

那么，什么是 WebP 文件呢？简单来说，WebP 是 Google 开发的一种比流行的图像格式(当时)更好地优化图像的图像格式。例如，你有像 JPEG 或 JPG 和 PNG 这样的图像格式。

注意:看看不同的图像文件类型如何影响你网站的速度。

WebP 专注于提供相同的图像文件，只是文件更小。通过减小图像文件的大小，你仍然可以给网站的访问者同样的体验，但是你的网站会加载得更快。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

例如，在谷歌的 WebP 压缩研究中，谷歌发现一个 WebP 图像文件平均:

• 比类似的 JPEG 图像小 25-34%。
• 比可比的 PNG 图像小 26%。

这就是为什么如果你通过 PageSpeed Insights 运行你的网站，许多建议之一是提供像 WebP 这样的下一代格式的图片:

Google PageSpeed Insights suggests using WebP images

那么 Google 的 WebP 格式是如何实现这些文件大小的缩减的呢？

首先，它支持有损和无损压缩，因此确切的减少量将取决于您使用的是有损还是无损压缩。

对于有损压缩，WebP 使用一种叫做“预测编码”的东西来降低文件大小。预测编码使用图像中相邻像素的值来预测值，然后只对差值进行编码。它基于 VP8 关键帧编码。

无损 WebP 使用一组由 WebP 团队开发的更复杂的方法。

如果您想详细了解 WebP 压缩技术，这篇文章是一个很好的起点。
T3】

哪些网络浏览器支持 WebP？

为了让 WebP 图像工作，访问者的网络浏览器需要支持它们。不幸的是，虽然浏览器支持已经增长了很多， WebP 兼容性仍然不是普遍的。

流行的浏览器支持 WebP 图像，例如:

• Chrome ( 桌面和移动)
• Firefox ( 桌面和移动)
• 微软 Edge
• iOS 和 macOS Safari ( macOS 11 Big Sur 和更高版本仅)
• Opera ( 桌面和移动)

在我们写这篇文章的时候，Safari 只部分支持 WebP 图片。

Internet Explorer 也缺乏 WebP 支持(但 Edge 支持 WebP，因为它基于 Chromium)。然而，IE 的使用已经萎缩到不到总互联网用户的 1%。这对网络上的每个人来说都是一个福音！

总的来说，大约 95%的互联网用户使用支持 WebP 的浏览器。因此，虽然它肯定得到了大多数人的支持，但这 5%是一个小障碍，特别是当它是旧 macOS 版本的 Safari 用户时。在我们下面的 WordPress WebP 教程中，我们将向你展示如何处理这个问题，这样你所有的访问者都会有很好的体验。

WebP support across major browsers.

WebP 与 JPG 和巴布亚新几内亚的大小比较

根据谷歌的测试，WebP 图片是:

• 比类似的 JPEG 图像小 25-34%。
• 比类似的 PNG 图像小 26%。

如果你想了解更多关于谷歌的方法，你可以在下面找到完整结果的直接链接:

• JPEG
• PNG

这两项测试都基于超过 11，000 张图像，包括:

• 著名的蕾娜形象
• 来自柯达真彩色图像套件的 24 幅图像
• 来自 Tecnick.com 的 100 张图片
• 来自谷歌图片搜索的 11，000 多张图片的随机样本

如何在 WordPress 上使用 WebP 图片

从 WordPress 5.8 开始，你将能够像使用 JPEG、PNG 和 GIF 格式一样使用 WebP 图像格式。只需将您的图像上传到您的媒体库并将它们包含在您的内容中。由于 WordPress 5.8+默认支持 WebP 格式，所以你不必安装第三方插件来上传 WebP 图片。对于大多数常见用例来说，这应该足够了。

要立即开始，你可以参考我们关于在 WordPress 5.8+ 中使用 WebP 图片的快速入门。我们建议你浏览一下 WordPress 中关于 WebP 支持的警告。

然而，大约有 5%的人(主要是旧 macOS 上的 Safari 用户)使用不支持 WebP 的网络浏览器。如果你转换 WebP 图片并直接在你的内容中使用，那些访问者将看不到你的图片，这将破坏他们的浏览体验。

此外，生成 WebP 图像并不像获得 JPG/JPEG 图像那样简单，这是大多数相机、智能手机和在线图像库的默认图像文件格式。WordPress 不支持自动图像转换为 WebP 格式(还没有！).

不要烦恼！有一个解决办法。

你可以使用一个 WordPress 插件将你的原始图片转换成 WebP 格式，如果访问者的浏览器不支持 WebP，那么还可以提供原始图片作为后备。

例如，如果你上传一个 JPEG 文件到你的站点，插件将:

• 将 JPEG 文件转换为 WebP，并为 Chrome、Firefox、Edge 等提供 WebP 版本。
• 向使用 Safari(在较旧的 macOS 版本上)和其他不支持 WebP 的浏览器浏览的访问者显示原始 JPEG 文件。

这样，每个人都可以看到您的图像，每个人都可以获得最快的体验。

下面，我们将浏览一些最好的 WebP WordPress 插件，所有这些插件都与 Kinsta 和kin sta CDN一起工作。

信息

如果你在 Kinsta 托管，你需要联系我们的支持，这样我们就可以为这些插件的 WebP 缓存桶创建一个 Nginx 规则。

短像素

ShortPixel WordPress plugin

ShortPixel 是一个流行的 WordPress 图片优化插件，可以帮助你自动调整和压缩你上传到 WordPress 网站的图片。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

作为其功能列表的一部分，ShortPixel 还可以帮助您自动将图像转换为 WebP，并将这些图像提供给支持它的浏览器。

ShortPixel 有一个有限的免费计划，让你每月免费优化大约 100 张图像。付费计划的起价为每月 4.99 美元，最多可获得 5000 张图片/积分，或者一次性获得 10000 个积分的费用为 9.99 美元。

ShortPixel 把你优化的每一个 WordPress 图片大小算作一个积分。因此，如果你想优化多个图像缩略图大小，一个图像可能会使用许多信用。图像没有文件大小限制。

您可以将您的 ShortPixel 点数分散到无限的网站上——没有每个网站的限制(并且您的所有网站都可以使用同一个 ShortPixel 帐户)。

要使用 ShortPixel 在 WordPress 上提供 WebP 图片，你需要安装来自 WordPress.org 的插件，并添加你的 API 密匙(，你可以通过注册一个免费的 ShortPixel 账户获得)。

在常规选项卡中，您可以设置图像优化工作的基本设置。例如，使用何种压缩级别以及是否调整图像大小:

How to set compression level and image dimensions in ShortPixel

要启用 WebP 图像，请转到高级选项卡，然后:

1. 勾选 WebP 图像的复选框
2. 选中复选框交付 WebP 版本… (在选中第一个复选框后出现)
3. 使用<图片>标签语法选择的单选按钮(在选中前一个框后出现)
4. 仅通过 WordPress 挂钩选择保留默认

**

How to enable WordPress WebP images in ShortPixel

然后，保存您的更改。

如果你在 Kinsta 上托管，ShortPixel 会给你一个关于在 Nginx 上配置服务器配置文件的警告信息。要配置这些设置，您可以联系 Kinsta support ，我们很乐意为您设置服务器配置。

意象

Imagify WordPress plugin

Imagify 是一款流行的图片优化插件，与 WP Rocket ( 为数不多的与 Kinsta 合作的缓存插件之一)出自同一开发商。

厌倦了你的 WordPress 站点缓慢的主机？我们提供超快的服务器和来自 WordPress 专家的 24/7 世界级支持。查看我们的计划

它可以自动压缩和调整你上传到 WordPress 网站的图片。然后，它还可以帮助您将它们转换成 WebP，并通过支持它的浏览器将这些版本提供给访问者。

在功能方面，ShortPixel 和 Imagify 有很多相似之处。最显著的区别来自于价格。ShortPixel 根据图像收费，没有图像大小限制，而 Imagify 根据整体文件大小收费，没有图像限制。

因此，如果你需要优化大量的大图像，ShortPixel 的方法可能会更便宜。但是如果你需要优化大量的小图像，Imagify 的方法可能更实惠。

Imagify 有一个有限的免费层，允许每月 25 MB 的优化。之后，付费计划的起价为每月 4.99 美元，最高可达 1 GB，或 9.99 美元的一次性 1 GB 信用额度。

像 ShortPixel 一样，你可以将你的账户限额分散到无限的网站上。

要使用 Imagify 来发送 WordPress WebP 图片，你需要安装来自 WordPress.org 的插件，并添加你的 API 密匙。

一旦你激活了插件，你可以使用通用设置框来选择你的压缩级别。

How to set compression level in Imagify

要启用 WebP 图像，向下滚动到优化部分，找到 WebP 格式部分:

1. 勾选复选框创建图像的 webp 版本
2. 勾选复选框以 webp 格式显示图像…
3. 选择单选按钮使用<图片>标签

How to enable WordPress WebP images in Imagify

和 ShortPixel 一样，如果你在 Kinsta 托管，你需要为 WebP 缓存桶创建一个 Nginx 规则(联系 Kinsta 支持)。
T3】

最佳的

Optimole WordPress plugin

Optimole 是一个 WordPress 图片优化插件，它的操作与 Imagify 和 ShortPixel 略有不同。Optimole 可以自动压缩和调整您的图像。然而，它还有另外两个显著的特点:

1. 它可以通过它的 CDN(由 Amazon CloudFront 提供支持)提供你的图片。
2. 它提供实时自适应图像，Optimole 将为每位访客提供最佳尺寸的图像。例如，在小屏幕上浏览的人将获得比在视网膜屏幕上浏览的人更低分辨率的图像。

这种方法类似于其他实时优化/操作服务，如 Cloudinary、imgix、KeyCDN 图像处理等。

Optimole 还可以向浏览器支持的访问者提供 WebP 图像，作为这种实时图像优化的一部分。

Optimole 有一个有限的免费计划，每月可以向大约 5，000 名访问者提供图像服务。之后，付费计划每月 19 美元起，适用于约 25000 名访客。

首先，你需要安装来自 WordPress.org 的插件，并使用 API 密匙激活它，你可以通过注册一个免费的 Optimole 账户来获得这个密匙。

一旦你这样做了，Optimole 将开始自动优化你的图像，并通过它的 CDN 发送它们。默认情况下，WebP 支持是打开的，所以没有必要手动启用它。

要配置其他设置，如压缩级别和缩放行为，您可以进入 Media → Optimole → Settings :

Optimole enables WordPress WebP images by default.

由于 Optimole 通过其 CDN 处理图像的传送，如果你在 Kinsta 上托管，就没有必要设置任何 Nginx 规则。

Increase ⬆️ site speed while decreasing ⬇️ image sizes. Learn how to take advantage of the WebP format on your #WordPress site 💥Click to Tweet

摘要

你的 WordPress 站点的图片占了一个普通页面文件大小的很大一部分。如果你能找到减小图片尺寸的方法，你就能在不影响用户体验的情况下加速你的网站。WebP 是一种现代图像格式，与 JPEG 或 PNG 文件相比，文件大小减少了约 25%。

大约 95%的互联网用户已经在使用支持 WebP 的浏览器。WordPress 5.8+版本现在也支持 WebP 开箱即用。所以你没有理由不使用它。

然而，少数浏览器，尤其是老版本 macOS 上的 Safari，仍然不支持 WebP。因此，您还不能向所有访问者提供 WebP 图像。为了解决这个问题，你可以使用一个 WordPress 插件，将图片转换成 WebP，并将 WebP 版本提供给浏览器支持它的访问者，而将原始图片提供给浏览器不支持它的访问者。

要了解更多优化图片的策略，请查看我们针对网页性能优化图片的完整指南。

如果你有任何关于在 WordPress 上使用 WebP 的问题，请在下面的评论中问我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。**

如何从 Webflow 迁移到 WordPress(6 步)

原文：https://kinsta.com/blog/webflow-to-wordpress/

Webflow 是一个用户友好的平台，通过直观的可视化编辑器帮助用户创建专业的网站。然而，如果你的网站已经存在一段时间了，你可能会寻找一个更加灵活和先进的解决方案，比如 WordPress 。

从 Webflow 迁移到 WordPress 是一项艰巨的任务，尤其是当你的网站包含大量内容的时候。然而，这个过程比你想象的要简单得多，你可以很快建立并运行你的新 WordPress 站点。

在这篇文章中，我们将从简要讨论你为什么想从 Webflow 转移到 WordPress 开始。然后，我们将带您完成整个迁移过程。

我们开始吧！

T3】

查看我们的视频指南从 Webflow 迁移到 WordPress

为什么你应该考虑从 Webflow 转移到 WordPress

像大多数一体化网站解决方案一样，Webflow 使您能够轻松地构建和启动网站。它既是网站建设者又是主机提供商。虽然这听起来很方便，但可能也有点限制。由于网站的每个方面都由相同的服务管理，所以在添加新功能或优化内容时，您可能会感到受到限制。

像 WordPress 这样的开源内容管理系统(CMS)给了你更多的自由去定制。虽然 Webflow 拥有广泛的应用和小工具，但它无法与 WordPress 提供的丰富插件相提并论。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

有了 WordPress，你也可以控制你的虚拟主机和预算。你可以货比三家，为你的网站选择合适的解决方案。此外，WordPress 软件是免费的，它的大部分可用插件也是免费的。所以从 Webflow 迁移到 WordPress 也可以帮助你减少网站开支。

从 Webflow 迁移到 WordPress 之前需要考虑的事情

无论你经营的是博客还是电子商务商店，迁移网站似乎是一项困难而耗时的任务。然而，这个过程并不需要那么长时间。此外，如果您有合适的工具，也可以自己完成迁移。

然而，在你开始之前，你需要做一些事情。让我们来看看 Webflow 向 WordPress 迁移的一些必要准备。

寻找 WordPress 网络主机

正如我们之前提到的，使用 WordPress 最好的事情之一就是选择你想要的任何一个网络主机。因此，您可以选择符合您的需求和预算的服务。

虽然选择便宜的托管服务很有诱惑力，但你可能会考虑让 T2 管理的 WordPress 托管服务为你的网站服务。这项服务通常比其他选择更贵。然而，它可以帮助你提升你的网站性能并保证你的内容安全。

在 Kinsta，我们提供一系列托管计划来适应不同的预算。我们的托管 WordPress 托管服务具有丰富的功能，包括:

• 快速简单的 WordPress 安装
• 自动每日备份
• 黑客和恶意软件删除
• 全天候支持
• 免费的 SSL 证书

我们还提供从所有网络主机进行无限制免费迁移的服务，让您的迁移毫无压力。此外，你可以使用我们用户友好的开发工具 DevKinsta ，来设计你的第一个 WordPress 网站。

理想情况下，在开始迁移之前，您应该已经设置好了新的托管帐户。这种准备将有助于使过程更快一点。

备份您的数据

需要注意的是，在迁移过程中，你实际上并没有把你的内容从 Webflow 转移到 WordPress。你只需下载一份拷贝到你的电脑上，然后上传到 WordPress。因此，您的 Webflow 站点将保持原样，因此没有必要备份您的内容。

但是，您仍然可以选择执行备份，以防出现问题。在 Webflow 上保存备份，只需要按住Command+Shift+S(Mac 上)或者Control+Shift+S(Windows 上):

Saving a backup on Webflow

Webflow 将要求您输入备份描述。准备好后，点击保存。然后，您可以进入设置 >备份以确保您的最新副本已保存。

如何从 Webflow 迁移到 WordPress(6 步)

现在你已经设置了你的托管账户并备份了你的数据，是时候将你的内容从 Webflow 转移到 WordPress 了。在本教程中，我们将引导您完成整个迁移过程，帮助您成功启动新网站。

步骤 1:设置 WordPress

第一步是设置 WordPress。大多数虚拟主机都提供一键式 WordPress 安装程序，你可以从你的主机账户访问。这项功能通常附带一份安装指南，帮助您在几分钟内完成安装过程。

或者，您可以从WordPress.org手动下载软件:

WordPress.org homepage

然后你需要上传你的 WordPress 文件到你的服务器。该过程可能需要几分钟。一旦准备好了，你就可以继续将 Webflow 导出到 WordPress。

步骤 2:从 Webflow 导出您的内容

现在你已经设置好了 WordPress，你可以为你的新网站准备内容了。幸运的是，Webflow 使得导出数据变得非常容易。

但是，您不能全部导出。可从 Webflow 下载的内容包括网页、博客文章、文本、嵌入块、图库页面和图像。

要导出您的内容，请转到您的 Webflow 设计器并单击 CMS Collections 面板。在这里，您可以看到 Webflow 服务器上的所有文件和数据:

Collections panel in Webflow

选择您想要下载的收藏(例如博客文章)并点击屏幕顶部附近的导出按钮。内容将以. csv 文件的形式下载到您的计算机上。您可以对想要导出的任何其他收藏重复此过程。

步骤 3:将你的内容导入 WordPress

下一步是将你的 Webflow 内容上传到 WordPress。CMS 附带了一个导入工具，使您能够上传 XML 格式的文件。不幸的是，Webflow 只允许您下载 CSV 文件形式的内容。

因此，你需要使用一个迁移插件将 CSV 文件导入 WordPress。我们推荐 WP 全部进口:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

WP All Import

要将插件添加到你的网站，在你的 WordPress 仪表盘中进入插件>添加新插件，在搜索栏中寻找该工具。

Search for WP All Import

然后，点击现在安装按钮，接着激活。一旦插件被激活，导航到所有导入>新导入:

Install and activate WP All Import

点击上传文件选项，然后选择您之前下载的 CSV 文件。该插件将引导您完成导入过程。

对于本教程，我们将从 Webflow 导入博客文章:

Importing Webflow blog posts

该插件将要求您使用拖放界面将元素拖动到正确的字段中:

Drag and drop interface in WP All Import

例如，你需要将文章的名(从右边)拖到标题字段，将正文拖到相关区域。您还将看到用于添加分类(如类别和标签)和配置其他设置(如帖子状态)的选项:

Configure post settings

请注意，这些设置将应用于您文件中的每个帖子。因此，您不必为导入的每个帖子重复这个过程。

接下来，将要求您为文件中的文章定义一个惟一的标识符。您可以点击自动检测按钮生成一个 ID:

Generate your unique identifier

最后，您需要点击确认&运行导入按钮来完成流程:

与我们世界一流的支持团队一起体验卓越的 WordPress 托管支持！与支持我们财富 500 强客户的同一个团队聊天。查看我们的计划

Confirm and Run

当导入过程完成时，插件会通知您:

Import complete message in WP All Import

一旦准备好了，你就可以通过导航到仪表盘中的帖子或页面来检查你的内容。您还需要为下载的任何其他 Webflow 文件重复导入过程。

注意，WordPress 不支持从 Webflow 等其他平台自动导入图片。因此，你需要手动添加图片或者使用插件，比如自动上传图片。

Auto Upload Images

这个插件会在你的文章和页面中寻找图片的网址。然后它会下载这些图片并上传到 WordPress，替换掉URL。
T3】

步骤 4:选择一个 WordPress 主题

遗憾的是，您不能将您的 Webflow 站点的设计转移到 WordPress。然而，流行 CMS 提供了数以千计的美丽主题供选择。

Choose a WordPress theme

WordPress 主题是可定制的，所以你可以修改它们来满足你的需求。此外，大多数都是免费的，尽管一些付费主题也可以相当实惠。

我们建议花一些时间定制你的 WordPress 主题并尝试不同的选项。然而，你会想要选择一个响应式设计，因为这将帮助你确保你的内容在所有设备上看起来都很棒。

步骤 5:配置你的 WordPress 永久链接

接下来，你需要配置你的 WordPress 永久链接。它们定义了网站 URL 的结构。

要访问你的永久链接，在你的 WordPress 仪表盘中进入设置>永久链接:

Permalink settings in WordPress

如你所见，你有几个选择。我们建议您选择职务 姓名。这样，您的 URL 将由您的域名和您为特定页面或帖子设置的 slug 组成。拥有简洁明了的网址有利于你网站的搜索引擎优化(SEO)。

准备好后，点击保存更改。现在，您可以进入最后一步了。

第六步:将你的域名指向 WordPress

虽然你可能已经将你的网站导入了 WordPress，但是你的域名(例如 mysite.com)仍然指向 Webflow 的域名服务器。如果您想要保留同一个域，您需要更新 DNS 设置，以便您的域指向新 web 主机的服务器。

你可以在你的主机账户中找到你的主机的域名服务器。它们通常看起来像这样:

• ns1.yourwebhost.com
• ns2.yourwebhost.com
• ns3.yourwebhost.com

如果您在创建 Webflow 站点时使用了域名注册商，您需要登录您的帐户来管理 DNS 设置。你的新虚拟主机甚至可以让你通过它的控制面板来管理你的域名。如果你是 Kinsta 的客户，你可以用 MyKinsta 的将你的域名指向你的新网站。

现在，当访问者在谷歌中输入你的网址，他们将被引导到你的新网站。我们建议你在 WordPress 网站准备好上线后完成这一步。

从 Webflow ➡️ WordPress 开始，只需几个简单的步骤。

摘要

Webflow 是一个一体化的网站构建器，可以轻松启动和管理您的网站。然而，随着你的网站的成长，你可能需要转换到一个更灵活、更强大的平台，比如 WordPress。

正如我们所见，从 Webflow 迁移到 WordPress 可能是一个平稳的过程。然而，为你的新网站选择合适的主机提供商是很重要的。你还需要选择一个响应的 WordPress 主题，优化你的永久链接，并更新你的域名设置，这样用户就可以被引导到你的新网站。

关于从 Webflow 迁移到 WordPress，你有什么问题吗？请在下面的评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

Webflow vs WordPress:哪个更适合你的下一个站点？

原文：https://kinsta.com/blog/webflow-vs-wordpress/

如今，帮助你建立并运行网站的选择并不缺乏。然而，选择一个正确的会很困难。如果你在考虑两个主要的玩家，比如 Webflow 和 WordPress，这一点尤其正确。

幸运的是，有一种方法可以让这个选择变得稍微容易一些。通过在几个关键领域比较 Webflow 和 WordPress，你可以找出哪个最适合满足你的需求。

在本文中，我们将向您介绍 Webflow 和 WordPress 的基础知识。然后，我们将带您浏览在您选择其中一个之前可能需要考虑的五个主要因素。

让我们开始吧！

查看我们的视频指南 Webflow vs WordPress

Webflow 简介

Webflow 自 2013 年以来一直提供网站建设和托管服务。通过用户友好的可视化编辑器，它提供了从创建到启动的无缝体验:

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

Webflow

而且，不需要编码。Webflow 将自动生成 HTML、CSS 和 JavaScript，无需您动手。然而，如果你是一名开发人员，你仍然有机会直接编辑代码。

出于这个原因，Webflow 的目标受众往往是那些有一点网页设计知识的人。使用这个内容管理系统(CMS) 你不需要成为一个专业人士，但是如果你希望建立一个高度定制的网站，它可能会有所帮助。

以下是 Webflow 的一些其他优势，您可能会喜欢:

• 足够的灵活性带来几乎无限的可能性
• 大量集成使集中化变得容易
• 经典的可视化编辑器，使设计更加直观

然而，没有一种产品是完美的。您可能还需要考虑一些潜在的不利因素:

• 设计选择的数量之多令人望而生畏
• 某些预算可能无法获得定价计划
• 这个界面很复杂，需要一个学习过程

最后说一下人气。就市场份额而言，Webflow 大约占所有网站的 0.6%。这比其他选项如 Shopify 和 Squarespace 要少。然而，Webflow 支持的网站往往比其竞争对手有更高的流量，这使它成为其利基市场中一个值得注意的选择。

WordPress 简介

相对而言，WordPress.org 是一个更有经验的选择。自 2003 年以来，这个开源平台一直在以惊人的速度发展:

WordPress.org

顺便提一下，WordPress.org 不同于 WordPress.com。后者提供完全托管的解决方案，而前者是开源软件。正如他们在独特的统计数据所反映的那样，两者都是截然不同的经历。

WordPress 没有单一的目标受众。该平台的高度灵活性意味着几乎任何人都可以使用它。

如果你是一个网页设计专家，你可以利用这种自由。然而，不可否认的是，建立一个 WordPress 网站比使用像 Wix 这样的现成解决方案需要更多的工作。因此，你可能需要期待一点学习曲线，尤其是如果你是一个初学者。

然而，有几个原因让人们想使用 WordPress:

• 一个高度可定制和灵活的平台，可以创建各种各样的网站
• 允许您完全定制整个项目的开源设计
• 大型主题和插件库，包括免费和付费的

另一方面，也有一些缺点:

• 可以为黑客创造更多机会的开源设计
• 如果你做了错误的改变，深度编辑会有使你的网站崩溃的风险
• CMS、插件和主题经常需要更新

让我们来看看 WordPress 的市场份额。这个内容管理系统在其领域是一个巨人，42.9%的网站利用了它的技术。这意味着如果你对这个程序感兴趣，你会有很多用户。

Webflow vs WordPress:哪个更适合你的下一个站点？(5 个主要考虑事项)

现在我们已经讨论了基础知识，在你选择 Webflow 还是 WordPress 之前，这里有五个你可能需要考虑的因素。

1.方便用户

用户友好是网站建设的核心——毕竟，与平台斗争会占用你创建网站的宝贵时间。这里有一些事实可以帮助你在 Webflow 和 WordPress 之间做出选择，以获得最无缝的用户体验。

Webflow

Webflow 提供了一系列令人印象深刻的设置资源。例如，你可以访问 Webflow 大学。这将为你提供一系列的课程、训练营和视频，让你的网站起步。

Webflow 还试图简化设置过程。启动后，您将获得一个安装向导形式的演示:

The Webflow setup wizard.

这个速成课程可能会让你有足够的能力开始浏览界面。不幸的是，这可能还不足以让你熟悉所有的关键元素——布局中充斥着令人眼花缭乱的选项:

Webflow interface.

如果你感到有点害怕，不要惊慌！即使是有经验的设计师也可能需要一些时间来适应这个界面。如果你是游戏新手，你可能需要更长的时间。

然而，你可能会很高兴你投资了那段时间。它看起来可能很复杂，但紧凑的设计也意味着您可以快速访问最常用的工具。

此外，Webflow 很容易扩展到各种任务。无论你是希望建立一个网上商店还是一个小型博客，你都可以用相同的格式使用相同的工具。但是，请记住，更复杂的设计可能需要对平台有更深入的了解。

WordPress

就入门而言，Webflow 与 WordPress 的争论是势均力敌的。然而，WordPress 的著名的五分钟设置过程是一个令人生畏的功能。你所需要做的就是输入一些信息，然后你就可以上路了。

然而，使用 WordPress 意味着你需要寻找你自己的主机提供商。相比之下，托管是 Webflow 的内置功能。如果你使用 WordPress，你会有更多的选择，但是找到最适合你的可能需要一些时间。

一旦您完成了这些初始任务，您就可以开始研究仪表板了。我们已经向您展示了 Webflow 有多复杂。相比之下，WordPress 的简化布局可能是一股新鲜空气:

WordPress dashboard.

然而，它也有自己的挑战。这种方法需要更多的点击来获得不同任务所需的工具。这意味着，如果你不知道从哪里开始，你可能会更难掌握诀窍。幸运的是，有组织的侧边栏让这变得简单了一些。

说到可扩展性，很难打败 WordPress。种类繁多的插件和主题意味着你可以定制你的网站来满足几乎任何目的。然而，这也意味着你必须了解每一个添加的独特的细节。

2.社区支持

无论你在 Webflow 和 WordPress 的争论中处于什么位置，有一点是肯定的:任何一种选择都会给你提供大量的其他用户来陪伴你。让我们看看这两个平台在社区和客户支持方面有何不同。

Webflow

Webflow 附带了一个专门的论坛。这是一种简单的方式，让您可以就可能遇到的问题与其他用户联系。它还允许您在 Webflow University 中搜索您想要查找的任何特定内容。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

您还可以在这里找到“展示和讲述”部分。这是一个你可以展示你用这个平台所做的工作的地方。它也可以成为所有不同类型的创意的灵感来源。

如果你更喜欢专业支持，Webflow 提供客户服务。您可以联系其团队，并在工作日收到电子邮件支持。如果您对自己的定价计划有疑问，这一点尤其有用。

Webflow 社区还提供各种活动和小组，您可以加入。与论坛类似，这些可以是了解更多关于平台和与其他创作者联系的机会。

WordPress

作为开源软件，WordPress 缺乏“官方”支持选项。然而，这个平台确实提供了你可以依赖的各种不同的资源。这些涵盖了几乎所有的技能水平，从经验丰富的设计师到那些还在学习 WordPress 绳索的人。

原因之一是 WordPress 是开源的。这意味着它的所有代码都是公开的。此外，这还意味着您可以以任何方式编辑或重新利用这些代码。

除了设计的灵活性，这也产生了一个强大的社区。你可以查看复杂的 WordPress 文档，以及专门的论坛。个别插件和主题甚至有独特的论坛，你可以访问。

最后，WordPress 还提供了围绕程序的各种活动，用户可以在这里互相学习。这些天来，他们已经在很大程度上转移到虚拟领域。这使得融入社区变得更加容易。

3.设计选项

一旦你准备好开始设计，重要的是要考虑你有哪些选择。在你选择 CMS 之前，这里有一些需要考虑的因素。

Webflow

Webflow 最大的优势之一是它的模板。这些是由开发专业人员设计的预制网站。这意味着它们针对性能和美观进行了优化:

Webflow templates.

但是，您仍然可以根据需要自由编辑模板。因此，您可以构建一个高度定制的网站，而不必创建基础或担心后台代码。如果你正在寻找一个快速的开始，你甚至可以最小限度地改变它。

有了可视化编辑器，这个编辑过程变得简单了一些。结果很大程度上是“所见即所得”，这意味着不需要在编辑屏幕和预览之间切换。

在这个编辑器中，您还有很多选择。你几乎可以改变一切:布局、间距、文本、移动布局等等。只要你愿意投入时间，它就是一个虚拟的沙盒。

同样值得注意的是，你可以创建“收藏”。集合是可重复使用的内容，可以存储在数据库中供将来使用。因此，这是一个简化你网站不同区域工作的简单方法。

WordPress

如果你比较 Webflow 和 WordPress，可视化编辑器应该是首要考虑的因素。这是因为 WordPress 和 Webflow 使用的方法不太一样。它没有使用前端页面编辑器，而是使用了一个叫做的模块编辑器:

涡轮增压您的网站，享受我们的资深 WordPress 团队的 24/7 支持。我们的谷歌云驱动的基础设施侧重于可伸缩性、性能和安全性。查看我们的计划

WordPress Block Editor.

这种基于模块的系统非常容易使用:每一部分内容都作为自己的块存在，可以单独编辑和移动。然而，它不像 Webflow 的编辑器那样直观。你需要投资一个页面构建插件来获得这种效果。

块编辑系统也存在于 WordPress 小部件部分中。这些都是小功能元素，可以放在你网站的特定部分。这是在边栏、页眉和页脚等区域增加一致性的简单方法。

在预制设计方面，WordPress 提供了令人印象深刻的主题集合。你可以在免费和付费选项之间进行选择，这些选项涵盖了所有领域。这些主题也非常灵活:你既可以直接编辑代码，也可以使用 WordPress 的内置系统来实现更简单的方法。

4.搜索引擎优化

搜索引擎优化(SEO) 是帮助别人找到你网站的核心部分。在很大程度上，你的网站排名将取决于你是否写了高质量的内容。但是，有几个幕后因素取决于您对 CMS 的选择。

Webflow

正如我们所报道的，Webflow 比 WordPress 更像是一个一体化的解决方案。这意味着它还附带了各种工具来帮助您尽快实现优化搜索引擎优化。

例如，该平台是围绕创建移动友好页面而构建的。这一指标对于提高搜索排名至关重要，更不用说对访问者的好处了。

Webflow 还采取了各种其他措施，包括:

• 自动生成并提交的网站地图
• 干净，轻量级的代码，以更好地吸引网站爬虫
• 轻质结构确保更快的装载速度

所有这些都意味着你可能不必太担心后端搜索引擎优化。另一方面，你放弃了对这个重要元素的控制，必须依赖 Webflow 为你做的优化。

WordPress

默认情况下，WordPress 附带了一套较小的 SEO 工具。基本代码的设计考虑到了流畅的性能。然而，如果你改变了代码——这是 WordPress 的主要诉求之一——你可能会失去这个好处。

然而，WordPress 也可以帮助你更好地控制你的搜索排名，这要感谢许多可用的附加工具。像 Yoast SEO 和 All in One SEO 这样的插件可以通过优化关键词内容、为搜索引擎机器人添加元数据等等来帮助你提升这个关键指标。

同样值得注意的是，迁移一个 WordPress 站点会更容易。这很重要，因为如果你不小心的话，移动你的网站会损害它的 SEO。幸运的是，如果你选择了的高质量托管 WordPress hosting ，你几乎可以肯定地依靠你的提供商来为你完成这项任务。

5.电子商务和定价计划

让我们总结一下电子商务和定价。这是 Webflow 和 WordPress 讨论变得有趣的一个领域。两者都为您提供了非常不同的选项，所以让我们深入了解一下。

Webflow

电子商务直接内置于 Webflow 引擎中。您需要做的只是激活一个扩展并整合您的运输服务。从那里，它只是一个设计你的网站的问题。

然而，这是 Webflow 和 WordPress 开始有很大不同的地方。如果你用的是 Webflow，支付处理商的选择会更少。这些将会有一个标准的 Webflow 费用——这是你支付给网关和运输公司的费用之外的费用。

由于 Webflow 托管其网站，您还需要选择一个定价计划:

Webflow site plans.

这些按月支付，每月 29 美元起。有更便宜的网站计划，但如果你想要一个能让用户在你的网站上购买产品的电子商务计划，你需要选择高级选项。

WordPress

WordPress 的开源特性不仅让它变得灵活:还让它变得免费。你只需要下载软件就可以开始了。

然而，这并没有考虑到其他网站的成本。你需要为默认情况下包含在 Webflow 计划中的各种其他元素付费，包括非托管或托管的 WordPress 主机以及域名。

说到电子商务，WordPress 用户最喜欢的选择是 WooCommerce:

WooCommerce.

尽管支付门户、信用卡和运输会产生费用，但 WooCommerce 本身是免费的。与 Webflow 相比，它可能需要更多的设置，但从长远来看，它也可能会更便宜。

These days, there’s no shortage of options to help you get your website up and running. 🚀 But picking the right one can be tough. Start here ⬇️Click to Tweet

摘要

对于 Webflow 和 WordPress 哪个是最好的平台，没有唯一的答案。每个系统都有自己的优点、缺点和独特的属性。幸运的是，了解它们在一些关键领域的不同之处可以让你更容易做出决定。

在本文中，我们讨论了您在做出选择之前可能需要考虑的五个方面:

1. 用户友好程度
2. 每个人能提供多少社区支持
3. 设计选项的灵活性和强大功能
4. 实现高质量的 SEO 有多容易
5. 付费计划和电子商务网站的可用选项

关于 Webflow vs WordPress 你有什么问题吗？请在下面的评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

电子商务、登陆页面和个人网站的 26 种鼓舞人心的网站配色方案

原文：https://kinsta.com/blog/website-color-schemes/

当有人第一次访问你的网站时，颜色在他们的想法中扮演着重要的角色。研究称，62-90%的消费者的第一印象仅仅基于颜色选择。

挑选与你的品牌相匹配的颜色——以及你希望你的消费者对你的公司和产品的看法——可能是一个强大的品牌和营销工具。

在这篇文章中，我们将介绍 25 个以上精彩的网站配色方案，包括登陆页面、电子商务和个人网站，以及如何在不浪费时间的情况下选择自己的配色方案。

如何为你的网站选择配色方案

一个非彩色成年人的眼睛可以看到超过 100 万种不同的颜色。在所有这些选项中，如何快速有效地选择正确的配色方案？这是所有试图为自己的设计从头开始创建配色方案或调色板的网页设计师所面临的挑战。

有这么多的选择，你不可能在没有参考点的情况下单独评估所有的色调和色彩，并挑选最合适的。你需要缩小选择范围。最好的开始方式是找到一种原色作为你的起点。

也许最好的方法是按行业查看最受欢迎的选择。它可以帮助你了解一些关于色彩的心理学知识，以及什么样的原色最适合你的公司或产品。

行业的颜色选择

不同的公司和产品选择不同的颜色来识别他们的品牌。但是为什么呢？色彩不仅仅是抓住潜在客户和消费者注意力的更有效的方式。这是一种在情感上，几乎是潜意识层面上与他们交流的方式。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

从某种意义上来说，这是一种在使用文案中的一个词或一句话之前就开始在消费者心中建立你的品牌的方法。没有一种颜色向消费者讲述同样的故事，所以最受欢迎的原色取决于不同的行业。

Brand colors by industry (Image source: towergateinsurance.co.uk)

你希望潜在客户对你的品牌、产品或服务产生什么样的情感？

这是一个指导性的问题，可以帮助你确定调色板的主色。

蓝色传达:

Blue is the color of trustworthiness

在消费者信任比任何其他因素都重要的行业，专业性和可靠性是关键卖点，蓝色经常被用作主要的品牌颜色。

它不诉诸自发性或情感。相反，它启动了一个冷静而合乎逻辑的决策过程。

最常见于以下行业:

• 银行业务
• 航空公司
• 通信
• 消费金融
• 电力设施
• 重型设备
• 家居装修
• 酒店
• 药物

红色表示:

Red communicates attention and passion

依赖情绪和冲动决定的行业(如餐馆和快餐)，通常使用红色作为原色。红色被认为能刺激饥饿感，所以它是国际食品品牌中最受欢迎的选择。

最常见于以下行业:

• 饭店
• 饮料
• 食品零售
• 不动产
• 衣服

绿色表示:

Green conveys a sense of vitality

大多数人把绿色与自然、植物和生机勃勃的环境联系在一起。依赖于更好福利承诺或全天然成分产品的行业，通常会选择绿色。

最常见于以下行业:

• 食品和饮料
• 百货公司
• 不动产
• 化学品

黑色:自信、成熟

虽然一些公司可能会默认黑色，而不是专门选择一种颜色，因为它感觉安全，但在消费者的信心或成熟是一个关键因素的行业中，它也是一个主要选择。

最常见于以下行业:

• 衣服
• 配件
• 互联网和移动服务提供商
• 百货公司
• 酒店

不要盲从自己的品味和直觉，做决定的时候要考虑色彩理论和色彩心理学。

一个网站应该使用多少种配色方案？

对于一个标准的网站配色方案，你可以在一个配色方案或调色板中选择三到七种不同的颜色。

但是在一个网站上应该使用多少种不同的配色方案呢？

这取决于个人情况和你的网站目标。如果你的网站是一个致力于单一品牌、产品或公司的公司网站或博客，你希望坚持单一的配色方案。

另一方面，如果你的网站是一个电子商务商店，你可以为不同的产品方案使用不同的配色方案，以唤起不同产品类别的不同情感反应。

使用多个调色板的问题是，对于任何内部或外部的内容创建者来说，你将使事情复杂化，增加了人为错误和复杂性的机会。

当你为你的网站选择配色方案时，避免走极端和花费数周时间是很重要的。毫无疑问，这是一个重要的选择，但是选择正确的颜色本身并不能帮助你增加你网站的流量或者提高你产品页面的转化率。

62-90%的消费者的最初印象仅仅基于颜色选择...这意味着为你的网站找到合适的配色方案不仅仅是一个美学上的决定——这是一个商业上的决定。🎨✨ 点击推文

如何在网站上获得准确的配色方案

Colorzilla

要识别网站上使用的每一种颜色，精确到色度和十六进制代码，你可以使用谷歌 Chrome 扩展插件或火狐插件，比如 T2 的 ColorZilla T3。

安装了 ColorZilla 后，你只需将指针直接悬停在任何网站、徽标或图像上的任何设计元素上，它就会显示该像素的准确 HTML 十六进制或 RGB 颜色代码。如果你不想一个一个地识别所用的颜色，你也可以使用一个调色板生成器，它会使用一个图像，就像 Colormind 的图像颜色提取工具。

然而，这并不像看起来那样是一个完美的解决方案。你必须拍摄网站的截图并上传，生成的调色板不一定 100%精确到设计中使用的实际色调。例如，如果网站包含渐变或图片的颜色超出了主配色方案，则生成的调色板往往不准确。

所以就目前而言，识别网页设计中使用的确切颜色的最好方法仍然是使用颜色识别插件或扩展，或者截图并在像 PhotoShop 这样的照片编辑工具中手动操作。

我们在 Kinsta 使用什么网站配色方案？

像大多数网站一样，我们在 Kinsta 的所有内容都遵循基本的三色或三色方案。因为我们是一家专注于 WordPress 的托管公司，所以我们没有必要在我们的网站上实现多个调色板(T2)。

Kinsta media kit

我们使用深紫色(#5333ed)作为主色调，蓝绿色(#2cd4d9)并置在一起，创造出醒目而平衡的渐变效果，柔和的灰色用于文本(#6E7076)。

但是其他公司在做什么呢？

让我们来了解一下！

26 个最佳网站配色方案示例

我们已经在网上搜索了很棒的配色方案的例子，甚至将网站按类别分开，所以你可以很容易地从相关网站上找到灵感。

伟大的电子商务网站配色方案

下面我们将介绍优秀的电子商务配色方案的例子，这些配色方案与他们的品牌和行业相匹配。

1.护肤品:明亮而有趣

Bliss

谈到它的品牌，颜色的选择很重要。颜色明亮而活泼，完美地诠释了公司关于身体积极和内心快乐的信息。

2.服装品牌:清晰简洁

Le Bonnet

Le Bonnet 是一家服装公司，当谈到其网站的调色板时，它专注于清晰度。几个强烈的颜色，加上不透明的米色背景色来区分产品，有助于提升设计的简单性。

3.服装店:简单

Revise

修改概念是一个服装品牌网站，它不依赖网站调色板中的颜色，而是使用简单的颜色和空白来突出衣服本身的颜色和设计。

对于那些希望让产品自己说话，而不是创造一个有力的设计来讲述故事的电子商务网站来说，这种方法是一个很好的选择。

4.餐具:可靠性和专业性

My Tableware

我的餐具是一个德国定制餐具和菜肴的电子商务网站。

该网站使用深蓝色、浅棕色和灰色的简单配色方案来传达一种专业和可靠的感觉，并带有精致的味道。

5.口香糖:自然而冲动

Neuro

Neuro 是一种咖啡因口香糖和薄荷糖的品牌，旨在帮助人们集中注意力。它混合了蓝绿色、浅蓝色和米色等柔和的颜色，给人一种天然成分的感觉。

红色和橙色对情感和冲动决策也有吸引力，很好地利用了强调色。

6.腕表:精致与奢华

Prime Ambassador

Prime Ambassador 是一个瑞典钟表品牌，有一个精心设计的电子商务网站来突出产品。深灰色背景上近乎金黄色的浅棕色色调和图片中的木质装饰的色彩组合给参观者带来了一种精致和奢华的感觉。

这种颜色非常适合推销定制手表等高端产品，但如果你销售的是普通消费品，就会觉得不合适。

7.裤子:富有创意且易于使用

Alday

Alday 是一个舒适至上的裤子品牌，它的设计比低价出售的大规模生产的牛仔裤和斜纹棉布裤更合身。

该网站是创造性的和好玩的，与充满活力的颜色组合，使它的访客和潜在客户感到容易接近。

8.水果点心:优雅而突出的颜色

Madies

Madies 是一个冻干水果零食系列，针对的是比散装出售的无品牌干果更具时尚意识的消费者。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

黑色的背景和成熟芒果的黄色拟人化突出了设计的简单性，导致一个优雅的最终产品。

9.定制合身的牛仔布:它是活的

Unspun

Unspun 用鲜艳的红色和橙色给网站带来活力。非常适合与生活方式积极活跃的观众交流。

个人和旅游网站配色方案

下面，你可以找到我们为个人和旅游网站选择的网站配色方案的最佳范例。

10.创造性的简单

Madeleine Dalla

马德琳·达拉是一位纽约的摄影师，对网站设计有着敏锐的感觉(还有令人印象深刻的作品集)。

通过将颜色排除在设计的其余部分之外，她真正突出了她从每个突出的项目中亲手挑选的特色照片的生动颜色。她利用了色彩本身，也利用了色彩的缺失。

11.带飞溅的灰度

阿里·日法伊是一位有创意的艺术总监，这在网站的概念中有所体现。通过只使用少量颜色的灰度，你的注意力会被吸引到正确的关键词和设计的关键区域，“原创”这个词和迷人的微笑。

12.与自然融为一体

iFly 50

iFly 50 是荷航为庆祝成立 50 周年而发行的在线杂志。

通过突出天空和水的蓝色，绿色的草地和森林，它让任何游客感觉与自然融为一体——这是任何自然或风景摄影师网站的完美方法。

13.清洁和专业

Benediktas Gylys

Benediktas Gylys 的网站是干净设计的大师级作品。没有杂乱，颜色选择也是如此。

主要的紫色突出了专业性，虽然只有几个颜色，但它们都用来突出关键的元素，插图。

14.实用色彩

BucketListly

BucketListly 实用地使用颜色，用黄色突出显示关键词、CTA 和目前访问过的国家。

它展示了当你将单一颜色与留白和正确的概念结合使用时，你能从设计中获得多少价值。

15.优雅的简单

Lars Franzen

Lars Franzen 网站的特色图片使用深色背景色来突出肖像中人物的色彩和个性。

16.未来派叠加

Dot Lung

Dot Lung 的个人网站在最大化简单的调色板和干净的背景图形方面做得很好。背景中的紫色从一页到另一页创造了一种内聚的体验。

厌倦了慢热的主持人？Kinsta 的设计考虑了速度和性能。查看我们的计划

17.光明与黑暗

Love for Iceland

《对冰岛的爱》是一个很好的例子，展示了高亮图片中的颜色如何营造气氛。左上角是明亮的蓝色透明冰，被阳光照亮，底部是洞穴般的黑暗，为游客营造了一种不祥和冒险的氛围。

登录页面配色方案

下面我们用独特或有效的配色方案突出了不同的登录页面。

18.鲜明的对比

Zenly

Zenly 使用强烈对比的颜色来突出实时地图应用的实际功能(顺便说一句，这就是你在 WordPress 网站上嵌入谷歌地图的方式)。太空的背景使球状应用程序设计脱颖而出，并使其具有未来主义的味道。

19.要突出显示的颜色

Slack

Slack 使用了一种屡试不爽的登陆页面配色策略，其中颜色主要用于突出重要的行动号召和其他基本元素。对于一个登陆页面，你不需要过度复杂的设计，这也适用于颜色。

请务必查看我们的微软团队与 Slack 的深入比较。

20.鲜艳的颜色激发情感

Spotify

Spotify 在其极其简单的新登录页面上使用鲜艳的颜色来激发观众的情绪。颜色比 CTA 按钮前的副标题更能说明问题。如果你正在考虑即将推出播客，请查看我们的指南。

21.色彩对比在混乱中创造秩序

Autonomy

Autonomy 使用颜色和对比在一个混乱的动画设计中创造秩序。鲜艳的黄色穿过并与背景和其他物体分开。

22.未来派色彩组合

Bugsnag

Bugsnag 使用各种颜色，通过其扁平的设计赋予未来的高科技感觉。颜色和形状的组合让参观者感觉像是在 2020 年，他们可以相信该公司是尖端的。

23.充满色彩

Connect Homes

Connect home“登录页面”充满了明亮而柔和的色彩。调色板取得了令人兴奋的平衡，传达了现代感。

24.保守的颜色，俏皮的设计

Plink

Plink 的登陆页面以相对保守的深蓝色为基础，但总体上用俏皮有趣的动画和设计来平衡它。

25.自然活力

Travelshift

Travelshift 非常依赖绿色来传达自然和活力的感觉。绿色不是用红色或橙色这样引人注目的颜色来突出 CTA 或关键内容，而是作为复兴的承诺。

26.希望的明亮色彩

Swab the World

擦洗世界使用明亮对比色的配色方案来传达希望感。这和一个非营利组织的登陆页面非常匹配。颜色冲突与形状一起突出了他们用来应对挑战的现代/未来主义方法。

网站配色方案生成器

如果您不想为您的方案或调色板手动挑选相邻的颜色、渐变或阴影，您可以使用在线工具来帮助。网上有许多免费的配色方案或调色板生成器。我们将仔细看看下面的一些最佳选项。

色彩思维

Colormind

Colormind 是一个人工智能驱动的颜色生成器，可以用来为网站、模板等即时生成颜色。唯一的问题是，你不能设置一个原色来推断调色板，你必须每次都随机生成它。它还可以从你想要的任何图像中提取调色板。

Coolors.co

Coolors.co

Coolors.co 是一个网络和移动应用程序，帮助你从头开始生成调色板。它有每种颜色选项的阴影选项和其他高级工具，可以帮助您有效地决定您的配色方案。

帕莱顿

Paletton

调色板按钮可以让你完全控制你的调色板和你想用的基色。您可以选择所需的调色板类型，无论是相邻颜色、三色配色方案还是其他。您可以从色轮中选择任何颜色。

彩色空间

ColorSpace

色彩空间根据您输入的原色生成调色板。它提供了各种各样的风格选择，让您更加灵活。

色盲:如何为你的网站选择一个色盲友好的调色板

创建网站配色方案时要考虑的最后一件事是不同的人会如何看待这些颜色。

Different types of color blindness

不是每个人都能看到“标准”的颜色范围。色盲有三种不同的主要类型:多色盲、色盲和色盲。

红绿色盲是最常见的色盲。它影响了大约 1/12 的北欧血统。有这么多的人受到它的影响，在设计和选择一个 WordPress 主题时，这是值得考虑的。

蓝黄色盲非常罕见，对男性和女性的影响一样大。

如何为你的网站选择一个色盲友好的调色板

由于红绿色盲的人数远远高于任何其他形式的色盲，这应该是你在设计中首先要解决的问题。因为它们不能区分红色、绿色和紫色，而是将它们视为黄色和蓝色的不同色调，所以您希望避免使用最终看起来过于相似的对比色。

• 不要把绿色和黄色对比，反之亦然。
• 不要用红色或橙色来对比黄色。
• 不要把紫色和深浅相似的蓝色对比。

当你为你的标志或设计选择独立的原色时，你应该考虑它是否仍然适合色盲的消费者。例如，Kinsta 的紫色仍然是深蓝到红绿色盲消费者的颜色，传达了可靠和值得信赖的信息。对我们来说，这是 100%的品牌，所以在我们的潜在客户心目中没有潜在的冲突。

Make your website stand out from the crowd (and gain more sales) with the right color scheme 🎨🌈Click to Tweet

摘要

人类的眼睛可能能够区分数百万种不同的颜色，但是你不需要梳理所有的选项来找到适合你网站的配色方案。

通过关注你的品牌和你的理想客户，你可以缩小你的原色选择范围。一旦你有了选择，你就可以依靠在线调色板生成器来完成你自己的调色板，或者根据例子和喜好来选择匹配的颜色。

通过正确的方法，创建一个网站配色方案，可以作为你设计过程的起点，虽然如果你想获得正确的专业外观，感受你的品牌需求，通常需要雇佣正确的网站开发人员/设计师，这也是 T2 需要做的。

现在，是时候选择字体了，不是吗？

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

2022 年如何选择最好的网站设计软件

原文：https://kinsta.com/blog/website-design-software/

目前有超过 1，865，000 个网站，其中超过 75%是“实时的”(即你可以在网上找到它们)。这些直播网站中有许多是经过策划、概念化和精心设计的，以吸引他们的观众。

但是如果你不会编码会怎么样呢？还能设计出好的网站吗？

简单的回答就是一个网站设计软件，可以让你在没有编码或者设计经验的情况下创建一个网站。

然而，选择正确的软件可能是棘手的，因为市场上有几十种选择。

在这篇文章中，我们将比较目前可用的顶级网站设计软件选项，并帮助您选择一种工具，将您的网站提升到一个新的水平。

T3】

在网站设计软件中寻找什么

在我们开始谈论最好的网站建设选项之前，让我们先来谈谈什么是网页设计软件，它是为谁服务的，以及如何选择最适合你的工具。

网站设计软件是人们用来设计一个网站而不用快速编码的工具。这个软件对于任何需要一个网站但没有丰富的网络开发或编码技能的人来说都是一个很好的选择。

网页设计软件非常适合:

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

• 想要建立网上业务的当地餐馆和咖啡馆
• 电子商务商店希望有现成的解决方案来帮助他们销售产品，而无需从头开始构建产品
• 希望建立投资组合的承包商(即平面设计师、文案等。)
• 需要一个简单网站的小型企业
• 拥有小型设计部门或不需要定制网站的大型公司
• 爱好者想要在线分享他们的激情，而不投资建立一个定制的网站

看看这个按行业分类的 2021-2022 年最佳网站设计范例列表。

那么网页设计工具有什么好处呢？

还能设计出漂亮的网站吗...没有代码？👩‍💻答案是肯定的，借助这些网站设计工具！💪 点击推文

你为什么应该使用网页设计软件？

网页设计工具使用“拖放”格式，你可以在其中选择小部件(如文本框、图片等)。)并将其放到您的网页上。这允许您逐个部件地构建自定义网站。

自然，以这种方式建立网站有很多好处，因为它:

• 允许您快速创建网站
• 它帮助没有编码经验的人建立一个专业的网站
• 自动化设计过程的技术部分
• 确保您的网站能够在受众使用的多种设备上运行(包括移动设备)
• 包括模板，您可以用最少的图形设计技巧创建漂亮的网站
• 允许你廉价或免费建立一个网站

虽然大多数网页设计工具都有这些好处，但是还有几种不同类型的工具可供选择。让我们现在覆盖那些。

网页设计软件的类型

虽然我们会在一分钟内引导你选择最适合你的网站设计工具，但让我们先来讨论一下网页设计软件选项之间的细微差别。

WordPress 网页设计软件

WordPress 网站设计软件与 WordPress 网站一起工作。

如果你以前有一个 WordPress 网站，你可能听说过这些。最受欢迎的例子包括 Divi、Elementor 和 Beaver Builder。

无代码网页设计软件

无代码网页设计工具让你不用编码就能建立一个网站。

这些工具通常包括预先格式化的网站主题可供选择，因此您可以根据您的受众简单地定制您的网站。两个最受欢迎的选项包括 Wix 和 Webflow 。

电子商务网页设计软件

电子商务网页设计软件帮助你建立和经营一个电子商务商店。

这些平台在一个中央平台中包括网站设计和商店管理(尽管它们通常与自托管网站集成在一起)。两个最著名的例子包括 Shopify 和 SquareSpace。

开源网页设计软件

开源网站设计工具让你可以编辑和修改网站的源代码。这些选项非常适合自托管网站，因为它们允许您将网站导出到网站托管者。最受欢迎的例子包括 Startup4 或 TemplateToaster。

2022 年如何选择最好的网页设计软件

2022 年有几十个网站设计师可供选择，那么如何挑选最适合自己的网站设计工具呢？

在这一部分，我们将向你展示如何通过三个步骤选择最适合你的。

第一步。了解什么是好的网页设计软件

好的网站设计通常满足五个关键标准:

1.它是开源的

开源软件让你可以访问你网站的源代码。虽然您现在可能不想定制您的代码，但是当您选择开源软件时，您总是有这个选择。

2.这是免费或低价的

“一分钱一分货”这句话对于网页设计软件来说是不正确的。虽然你可以在一个伟大的项目上花大价钱，但是有几十个低成本的设计软件选项，对大多数网站来说也是一样的。

3.它可以导出到其他程序

虽然您可能喜欢您今天选择的设计工具，但它可能无法满足您未来的需求。

为了让你的网站经得起未来的考验，请确保你选择了一个允许你导出网站的设计工具。如果你更换主机，这将使你不用重新设计你的网站。

4.它不需要编码

虽然许多顶级的网页设计工具可以起到代码编辑器的作用，但是最好的工具并不需要它。

5.它有反应

网页设计工具帮助你建立一个响应迅速的网站。

第二步。确定你的需求

接下来，你需要弄清楚你需要一个网站做什么。确定您的需求将极大地影响哪个软件适合您，因为每个工具都提供不同的网站功能。

考虑您的需求，问自己以下问题:

• 为什么人们会访问我的网站？
• 我希望人们从我的网站上得到什么？
• 我的网站有什么用途？

然后考虑你需要的特定网站功能来满足你的观众的需求。以下是可供您考虑的潜在功能列表:

• 搜索栏
• 证明书
• 在线聊天
• 电子商务商店功能
• 电子邮件简讯弹出窗口
• 网站页脚功能(如社交媒体图标和导航标签)
• 评论空间
• 您企业的内置地图
• “联系我们”表格
• 博客
• 博客搜索功能
• 发表评论
• 网站分析
• 内置搜索引擎优化(一个搜索引擎优化工具)
• 验证码/反垃圾邮件功能
• 一个 SSL 证书
• 媒体压缩
• 惰性装载
• 一个内容管理系统

一旦你列出了你需要的特性，就该权衡你的选择了。

第三步。权衡你的选择

在这一步，你需要收集一份潜在网站建设者的名单。对于每个选项，您需要考虑四个关键因素:

1.价格

正如我们在第一步中提到的，低成本的设计工具将满足大多数人的需求。在选择一个设计工具之前，问问你自己:我们能负担得起吗？它值这个价钱吗？

2.易用性

建立一个网站应该是一个创造性的实现过程，但是错误的工具会很快使它令人沮丧。在选择工具之前，先问问自己:我们能不能用工具快速简单地建立一个网站？

3.移动兼容性

2021 年第一季度， 54.8% 的全球网络流量来自智能手机。

因为你不想让使用手机的观众错过你的网站，所以一定要检查你潜在的设计工具是否能制作出与移动设备兼容的网站。

4.特征

最后，我们回到特性。在权衡不同的设计工具时，请确保您选择的工具能够提供您在第二步中强调的基本功能。

为了帮助您衡量潜在的设计工具，我们将在下一节回顾一些可能的设计工具选项。

最佳免费网站设计软件

既然我们已经介绍了如何选择正确的设计软件，让我们来讨论一些潜在的免费选项。

这一部分将回顾 11 个免费的网站构建工具选项，包括最好的开源、无编码、电子商务和面向 WordPress 的设计工具。

让我们开始吧。

最佳开源网站设计软件

让我们来看看三种最适合开源网站设计的软件。

创业 4

Startup 4 是一个网站构建器，帮助用积木搭建一个网站。StartUp4 的网站构建器可以在线工作，非常适合 Mac、Windows 和 Linux 电脑上的用户。该工具也很受欢迎，目前拥有超过 27k 的客户。

创业 4 网站设计软件。

要使用该工具，您只需抓取一个小部件并将其拖动到位。Startup 4 还提供了几个主题，大大加快了图形设计过程。

• 价格:免费和付费计划
• 易用性:对于初学者和有经验的设计师来说非常容易
• 移动兼容性:是

特点:

• 可以创建网站或单页
• 包括 300+预先设计的块(包括标题，文本框，图像等。)
• 包括基本主题
• 与电子邮件列表软件集成
• 无限制导出(因此您可以使用该工具创建多个网站，并将它们上传到您的网站服务提供商)

模板烘烤器

TemplateToaster 是一款开源设计工具，通过一个简单的桌面应用程序运行。你只需要下载 TemplateToaster，安装在你的电脑上，调整一个主题，然后将你的网站导出到你的网站托管提供商。

TemplateToaster 包括几个完全可定制的模板可供选择。

TemplateToaster 建站软件。

TemplateToaster 最适合使用 Windows 电脑的人，尽管它可以通过虚拟机在 Mac 上使用。TemplateToaster 目前在全球拥有超过 100 万用户。

• 价格:免费和付费计划
• 易用性:适合初学者和有经验的设计师
• 移动兼容性:是

特点:

• 它通过桌面应用程序运行
• 允许您导出您的网站
• 包括免费的模板和主题
• 适用于所有主要的内容管理系统
• 可以创建电子商务网站
• 允许您通过更改字体和颜色来自定义您的网站

奇迹

漫威是一个基于浏览器的设计工具，创建网站。漫威帮助想要一起设计的团队，尽管它对个体设计师来说仍然很棒。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

漫威的设计工具还集成了微软团队、 YouTube 、迷宫、吉拉、Confluence、回望和 Dropbox Paper 等工具。这使得它非常适合那些想用这些工具来增强网站的人。漫威目前拥有超过 200 万用户的。

漫威网站设计工具。

• 价格:免费和付费计划(付费计划每月 12 美元起)
• 易于使用:非常易于使用(但最适合有过设计经验的人)
• 移动兼容性:是

特点:

• 可以创建网站和其他数字资产
• 内置用户测试
• 设计是非常个性化的
• 包括访问库存图像和预制资产

最人性化的网站设计软件工具

让我们来看看三个最人性化的软件工具。

Webflow

Webflow 是一个网站设计编辑器，帮助人们创建网站并持续编辑其内容。

Webflow 网站设计编辑。

Webflow 可以设计一个网站或者管理一个网站作为内容管理系统。你可以在免费网站建设计划中使用两个项目。

• 价格:免费和付费计划(付费计划每月 12-212 美元不等)
• 易用性:适合初学者和有经验的设计师
• 移动兼容性:是

特点:

• 包括一个内置的搜索引擎优化工具
• 充当内容管理系统
• 适合团队
• 允许您创建自定义动画
• 包括 100 多个模板
• 包括 3D 编辑
• 您可以自定义符号并保存它们以供重复使用

威克斯

Wix 是一个简单的网站构建器，可以创建高级网站。

Wix 简单网站生成器。

您可以通过 Wix 免费托管您的网站(前提是您同意您的域名包含“. wixsite.com”)，或者设计您的网站并将其上传到您网站的托管提供商。

• 价格:免费和付费计划(付费计划从每月 10 美元到 38 美元不等)
• 易用性:适合想要建立一个基本网站的初级设计师
• 移动兼容性:是

特点:

• 包括 500 多个模板
• 在免费计划中提供 500 MB 的存储空间
• 允许定制图像、动画、视频背景和其他小工具
• 使用 Wix Turbo 加速您的网站
• 允许您构建 web 应用程序

斯塔塔米奇

Statamic 是一个网站管理系统，可以帮助你快速设计和发布内容。

Statamic 网站管理系统。

Statamic 适合 Windows 和 Mac 用户，因为它为这两种操作系统提供了一个桌面应用程序。Statamic 对一个网站是免费的。

• 价格:免费和付费计划(每个网站 259 美元起)
• 易用性:适合初学者
• 移动兼容性:是

特点:

• 允许您跟踪修订历史
• 支持多用户
• 包括 40 多种字段类型(即图像、文本框等。)
• 可以作为内容管理系统工作

最佳电子商务网站设计软件

让我们来看看两个最好的电子商务网站设计软件。

需要为你的 WordPress 站点提供超快的、可靠的、完全安全的托管服务吗？Kinsta 提供所有这些以及 WordPress 专家提供的 24/7 世界级支持。查看我们的计划

伍尔科贸易公司

WooCommerce 是一个 WordPress 插件，帮助人们建立和运营在线商店。

WooCommerce 电子商务平台 WordPress 插件。

WooCommerce 目前为 14%的在线商店提供支持，超过 400 万人安装了该软件。该工具最适合需要更高级商店网站的中小型企业。

• 价格:免费
• 易用性:适合任何有 WordPress 经验的人
• 移动兼容性:是

特点:

• 包括可定制的商店模板
• 自动为您计算税费和运费
• 开放源码
• 自动处理 PayPal、Square、Stripe、Amazon Pay、Apple Pay、存款和 Google Pay 的付款
• 包括一个移动应用程序
• 使用 Jetpack (一个安全和性能插件)

大卡特尔

大卡特尔是一个电子商务网站建设者，为你建立和托管你的电子商务商店。

大型卡特尔电子商务网站建设者。

最多可以免费使用五种产品。大卡特尔最适合只卖少数几种产品并且需要一个简单网站的小企业。

• 价格:免费和付费计划(付费计划包括每月 9.99 美元和 19.99 美元的计划)
• 易用性:适合初学者
• 移动兼容性:是

特点:

• 包括可定制的主题
• 它向你显示实时网站和销售统计数据
• 适合在线销售和面对面销售
• 跟踪货物
• 使用自定义域
• 与谷歌分析集成

WordPress 最佳网站设计软件

让我们看看三个最好的软件，它们的功能是 WordPress 插件。

海狸建造者

Beaver Builder 是一个 WordPress 插件，它一页一页地构建网站。它包括几个预先设计的主题和几十个小部件，将使您的网站独一无二。

海狸构建器 WordPress 插件。

该工具是免费的，非常容易使用，因为你只需简单地“拖放”你想要的部件。Beaver Builder 适用于 Windows、Linux 和 Mac 电脑，因为它通过 WordPress 在线运行。

• 价格:免费
• 易用性:非常简单(前提是你有使用 WordPress 的经验)
• 移动兼容性:是

特点:

• 包括主题模板
• 您可以创建自定义布局
• 使用多个主题和其他 WordPress 插件
• 适用于任何 WordPress 网站
• 无限制网站免费
• 它包含几十个小部件(包括图片、视频、文字帖子等。)

红利

Divi 是一个 WordPress 插件，它允许你用预先设计的主题定制你的网站页面。Divi 是一个“可视化编辑”工具，这意味着它可以实时显示你所做的一切。

Divi 可定制 WordPress 插件。

虽然 Divi 不需要编码，但是你可以在你的网页上添加定制的 CSS。Divi 包括 30 天的免费试用，但之后需要付费计划。但是，您可以使用该工具来设计您的网站，然后将其导出。

• 价格:Divi 提供 30 天免费试用和两个付费计划(89 美元一年或 249 美元终身)
• 易用性:适合新手和有 WordPress 经验的资深设计师
• 移动兼容性:是

特点:

• 允许您添加小工具(包括图像，小工具，视频，滑块，联系方式等。)
• 包括几十个预先设计的模板可供选择
• 允许您使用“批量编辑”来同时编辑多个小部件
• 模板是完全可定制的
• 允许您保存您的设计
• 它会保存您的编辑历史，以便您可以“撤销”和“重做”操作
• 允许您导出您的网站

元素者

Elementor 是一个 WordPress 插件，可以让你围绕预先设计好的主题构建网页。

Elementor WordPress 网站构建器。

该设计工具目前在超过 500 万个网站上使用，并提供免费的网站生成器。Elementor 还是一个“可视化编辑器”，非常适合初学设计的人。Elementor 通过 WordPress 运行，适合 Windows、Linux 和 Mac 用户。

• 价格:49-499 美元免费提供高级计划
• 易用性:适合有 WordPress 经验的初学者
• 移动兼容性:是

特点:

• 包括 90 多个小部件(包括图像、文本框、视频、按钮等。)
• 允许您自定义页面的颜色、大小和布局
• 包括预先设计的主题
• 开放源码
• 兼容其他 WordPress 主题和插件
• 包括弹出窗口

比较网站设计软件

现在我们已经介绍了 11 种潜在的网站工具，让我们来比较一下。

不用编码最好的网站设计软件是什么？

这个问题有两个答案。如果你正在使用 WordPress，Elementor 是网站设计软件的首选，因为它很健壮，包括 80 多个小部件，并且兼容所有的 WordPress 主题和插件。

如果你没有使用 WordPress，最好的“无代码”解决方案是 Statamic，因为它适合多个用户，作为一个内容管理系统工作，并且对一个网站是免费的。

最好的免费网页设计软件是什么？

最健壮和免费的网站设计工具是 Beaver Builder、Elementor 和 WooCommerce 。

这些工具作为 WordPress 插件工作。他们可以与任何 WordPress 网站无缝合作。它们还包括许多小部件，是开源的，可定制的。你也可以用其他 WordPress 插件来增强你建立的网站。

Windows 最好的设计软件是什么？

完美的 Windows 网站设计工具是 TemplateToaster，因为 TemplateToaster 包括一个免费的 Windows 应用程序，可以让你离线构建网站。

Mac 最好的设计软件是什么？

Mac 的顶级网页设计师是 Statamic，因为 Statamic 有专门的 Mac 应用程序。Mac 用户也可以通过虚拟机使用 TemplateToaster，尽管这可能不适用于所有电脑。

Linux 最好的设计软件是什么？

Linux 的顶级网站设计工具是 Beaver Builder、Elementor 和 WooCommerce。当这些设计工具在 WordPress 上运行时，它们在 Linux 电脑上的效果会和在 Windows 和 Mac 电脑上一样好。

如果你有一台 Linux 电脑，并且不使用 WordPress，像 Startup 4 和漫威这样的设计工具也是很好的选择(因为它们通过你的网络浏览器工作)。

你可以在下面看到 Startup 4 的网站生成器。

启动 4 号建站页面。

想设计一个网站却不知道如何编码？👩‍💻查看这些网站设计软件选项即可入门✨ 点击推文

摘要

最适合你的网站设计工具将取决于你需要的网站类型，你是否通过 WordPress 运行你的网站，以及你有什么类型的电脑。

当选择正确的软件时，总是货比三家，权衡你的选择，以确保你选择的设计工具能够设计出你梦想中的网站。

为了获得经得起未来考验的结果，请始终选择开源且可导出的工具，这样，如果你更换了虚拟主机提供商，你就可以随身携带你的网站。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

网站宕机:如何防止宕机的实用技巧

原文：https://kinsta.com/blog/website-downtime/

你的网站是你企业的脸面，互联网用户希望当他们点击进入网站时，它几乎立刻就显示出来。事实上，大多数用户希望网站在不超过两秒的时间内加载，仅仅一秒钟的延迟就可能导致销售额的巨大下降。

你能想象吗？如果一两秒钟能对你的底线产生如此巨大的影响，那么你的网站完全不可访问会有什么影响呢？如果你的网站瘫痪了(或者花了很长时间加载)，你就失去了获得任何销售或销售线索的机会。更不用说对你的品牌来说简直恐怖。

不仅仅是第一次来的游客。即使是更忠诚的顾客或老顾客也会被激怒，去寻找替代品。不管你在哪个行业，卖什么，顾客都会去找你的竞争对手。这就是防止网站宕机如此重要的原因。

你的网站关闭了，我等不及了。白白感谢:(

—杰米·克莱恩伯格(@杰米·克莱恩伯格)2018 年 7 月 31 日

为你的网上生意提供 4 个行之有效的网站创意

原文：https://kinsta.com/blog/website-ideas/

在亚北极风暴中，你的热水器停止工作。你的孩子需要新牙套。碧昂斯推出新专辑。你为你的宠物球蟒找到了完美的情侣套。

所有这些事件有什么共同点？你需要钱来实现它们。

进入侧滑。

最赚钱的兼职网站创意开始:

如果你有一个 WordPress 网站，你就有足够的机会开展一项成功的兼职业务。这些被证明是最有利可图的:

• 销售在线课程
• 创建高级会员资格
• 提供数字下载
• 运营一个联盟博客

Support

虽然在大型活动后，旁敲侧击一度被归为停车场中有问题的交易，商品略有拼写错误，但现代旁敲侧击是一种美丽的东西。它有利可图，很方便，如果你有正确的网站想法，很容易推出。

今天，我们将讨论几个可行的网站创意，你可以实施这些创意来让侧面宣传为你服务。我们将覆盖:

And, we’ll take things further than that by giving you WordPress-ready recommendations for rolling out your side-hustle with no fuss and all the frills.

因此，用伟大的罗格·沃特斯的话说:“用双手抓住现金，藏起来。”

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

每个网站创意需要什么:目标受众

不管你想做什么样的旁门左道，有一个普遍的事实你需要遵守:

如果你没有目标受众，你就没有一个可行的网站创意。

这听起来可能有点刺耳，但这是每个网站所有者都必须面对的现实，无论他们是开始一个旅游博客还是试图在 T2 推出一个新的电子商务商店。

没有确定目标受众，你就无法确定市场需求。你也不能确定你的竞争对手(这意味着脱颖而出)，找到拥有正确技能的正确的人来应对市场，或者以人们实际愿意支付的溢价为你的产品定价。

所有这些都是导致创业死亡的五大原因之一。

Top reasons startups fails (Image source: Statista)

所以，不要让你的侧推注定要在商业解剖台上进行，要确保你正试图用你的产品击中可识别的目标受众。

如果你不这样做，你会浪费时间和金钱，而赚足够的零花钱买一杯咖啡将是一个奇迹。

那好吧。在开始你的宣传活动之前，确定一个目标受众是必须的，但是你如何开始呢？

考虑以下因素:

• 你的目标买家多大？
• 他们有家庭吗？
• 他们的收入是多少？
• 他们靠什么谋生？

然而，仅有这些人口统计数据是不够的。如果你想真正了解你的目标受众，你需要更深入:

• 痛点。他们在纠结什么？
• 欲望。他们到底想要什么？
• 语言。他们如何描述他们的痛点和他们的愿望？

请记住，找出人们真正的驱动力并不像看起来那么简单。

例如，如果你很了解健身，并且想帮助男性增肌，你需要问问自己，为什么他们首先要增肌。

归根结底，这与实力无关，而是变得更有吸引力，在人们中间获得更高的地位(或者至少他们是这么认为的)。

这意味着当你在销售你的产品时，你不仅需要向潜在客户保证它确实会帮助他们增肌，还需要在你的产品——增肌——和获得更高的地位之间建立联系。

如果你研究一下对增肌感兴趣的男性是如何谈论的，你可以让你的营销更加有效(你可以在 Reddit、健身论坛等网站上找到)。).

同样适用于每一个利基市场。人们说他们想“减肥”、“健身”、“赚钱”等等。但是你需要深入挖掘，找出他们真正想要的是什么。

你的目标应该是比你的潜在客户更了解他们自己。一旦你完成了你的研究，使用你所学到的知识来创建一个客户角色(或多个角色)。

客户角色是一个虚构的角色，代表你的目标受众(或特定的一部分)。它帮助你更清楚地思考你的业务，做出更好的决策。

你可以用纸笔以传统方式创建你的客户角色，或者你可以使用 HubSpot 的 Make My Persona 这样的客户角色生成器。

Make my persona

点击建立我的角色。您将经历一个多步骤的人物角色构建过程，在此过程中，您将被要求提供有关您的理想客户的信息。这将包括他们的年龄、受教育程度、工作场所细节、信息消费习惯、社交媒体习惯等等。

看看这个名为 Jane 的客户角色:

Customer Persona template

这个客户角色缺少痛点和需求，但这是一个很好的起点。

毕竟，与一个虚构的角色联系起来要比与一个具有各种特征的抽象云联系起来容易得多，所以即使是一个非常基本的人物角色也比没有强。随着时间的推移，你可以增加它。

但是，不要让你的客户角色过于刻板或正式。你的目标不是为你的观众创造一个完整的画面，而是为你的副业提供方向。

UserFocus 的 David Travis 博士解释了为什么大多数团队不能在第一轮中创建完整的人物角色:

“传统的人物角色开始看起来太完了，太定型了。团队足够精明，知道在设计的早期阶段，完全成形的、完整的用户描述是不可能的。相反，他们想要话题的引子。

因此，添加细节，但保持宽松。你的目标受众就那样:一个有一层光环的目标。靶心只是棋盘上的一张小而不完整的图片。现在我们来看看副业…

你的副业网站创意#1:销售在线课程

苏格拉底曾经说过未经审视的人生不值得过。基于在线教育市场现在和未来的爆炸性增长，现代人同意这一观点。

例证:到 2022 年，电子学习市场预计将激增至2.438 亿美元。

E-learning market in 2014 and 2022

但这个市场不再局限于教授和高等学术机构。每天都有新的企业家加入竞争，为大众提供高质量的教育(价格合理)。

很像水果蛋糕。创建需要大量时间，但一旦你这样做了，收益(或再捐赠)可以持续多年，成为一个适当的常青话题。

幸运的是，在线课程的现行价格比不受欢迎的圣诞小精灵要高得多。事实上，Podia 发现，超过 132，000 笔在线课程销售的平均价格为 182.59 美元。

所以，如果你想要一个可以持续提供并且在 WordPress 网站上容易实现的兼职，看看在线课程就知道了。

这种旁敲侧击是如此有利可图，以至于一门课程可以在一个月内支付一辆全新的现代索纳塔。

至少，这是一个创作者的基于 WordPress 的在线课程正在做的事情，带来超过 27，000 美元的月收入。

Paul Jarvis’ course revenue

你如何利用这种拥挤的力量？回到你的目标受众和人物角色。你能教他们什么，让他们愿意付钱？他们需要什么才能让自己的生活更健康更幸福？

或者说，你能给他们提供什么，是没有人能提供的？教别人不需要你成为专家，你只需要愿意花时间去指导。

一旦你明白了这一点，选择正确的 WordPress 插件就“只是”问题了。

你可以看看我们列出的最佳 WordPress 学习管理系统(LMS)插件，但以下是亮点:

LearnDash

LearnDash

高等学术机构和主要商业巨头都使用, LearnDash 是一款价格合理的 LMS 解决方案，用于销售在线课程，使您能够创建测验，内置论坛，以及您能想到的所有营销货币化选项。

一年的许可费是 159 美元，但是如果你想在多个网站上运行，价格会涨到 189 美元。

WP 课件

WP CourseWare

WP 课件是一个很有前途的 LMS 插件，被全球超过 20，000 名用户使用。

它提供了您可能想要的所有功能，从拖放式课程创建界面到点滴式内容、测验到评分书。

他们最便宜的许可证是 129 美元。

学习出版社

LearnPress

LearnPress 是一个免费插件，提供了许多与 LearnDash 相同的功能。

它与主要的支付网关相集成，允许您创建测验和其他交互式内容，并具有游戏化功能，如积分和徽章，以使您的学生保持兴奋和竞争力。

最重要的是，它可以让你创建付费会员，这恰好是我们的第二个想法。

你的副业网站创意#2:创建高级会员

如果在线课程是水果蛋糕，那么高级会员就是马卡龙。

人们愿意为它们付出很多，但它们需要更多的维护。不过，这是一个很好的权衡:虽然在线课程通过多次一次性购买提供收入，但高级会员是经常性收入的来源。

这意味着你可以将银行认可的月收入添加到你的预算中。 46%的网上购物者表示在过去一年中拥有订阅服务，其中许多人拥有多次订阅。

US shoppers’ subscription activity

也就是说，这种旁敲侧击不像上一个那样简单，对于在 WordPress 网站之外举办会员项目的来说，有很多重要的事情需要记住。

主要是，你需要一个缓存解决方案。如果你和金斯塔在一起，我们会帮你搞定。

那么，这种旁门左道能有多赚钱呢？

视觉媒体教会的创始人以严格的 2500 美元预算开始了他们的会员计划。今天，他们有超过 575 名每月 25 美元或以上的会员。

Visual Media Church Case Study

最少一个月将近 15000 美元。这上面的数学非常好。

想出会员计划的点子和为在线课程出点子是一样的。

参考你的人物角色，询问他们能从每月计划中得到什么。他们能从一个由志同道合的人组成的运转良好的社区中受益吗？他们愿意为此买单吗？

或者，如果你是一个内容创作者，你能产生足够的材料来证明其成本吗？如今，一篇博文的平均字数超过 1000 字，所以在你一头扎进去之前，想想你愿意投入多少时间。

如果你愿意投入额外的时间，这里有一些工具可以帮助你开始:

woo 成员

WooMembers

作为两个 WooCommerce 扩展的组合， WooMembers bundle 为你提供了一切你需要的东西，让你可以顺利运营一个会员网站。

亮点包括能够重复收费、限制不同会员级别的内容访问，以及在成为会员的同时销售附加产品(如在线课程)。

终极会员专业版

Ultimate Membership Pro

另一方面，Ultimate Membership Pro 拥有超过 10，000 个网站，并与 WooMembers 捆绑包共享功能。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

不利的一面是，对这个插件的支持并不像你从 WooCommerce 上得到的那样普遍，关于它的特性的教程也很有限，但是有了这样一个简单的价格点，这种权衡可能只对你的 side-hustle 有用。

成员压力

MemberPress

MemberPress 是一个强大的插件，可以让你创建优秀的会员网站。

它很容易设置，具有所有重要的功能，如访问规则，论坛，滴内容，优惠券，分析等。，而且非常安全。

他们的基本计划每年花费 129 美元。

好吧，让我们进入下一个回合。像前两个一样，这种旁敲侧击可以单独进行，也可以与你的其他事业协同进行。这也是我们今天的列表中最简单的，这使它成为完美的关闭。

你的网站创意之三:提供数字下载

最后两个副业有很大的潜力，但是它们都需要很多每个人都缺少的东西:时间。

如果你想赚点外快，但又没有时间(或不想)把周末花在这上面，那么数字下载可能就是你的不二之选。

您可以出售下载内容，如电子书和模板:

Examples of digital downloads from Autumn Witt Boyd, LLC

或者工作表、食谱、膳食计划、照片包、自定义字体等等。

当谈到可下载的资产时，你的想象力是有限的。尤其是电子书，是一个很好的副业。他们的收入比以往任何时候都要高，这使得印刷书籍更加物有所值。

此外，它们也有利于搜索引擎排名，正如 Chill Insurance 发现的那样，他们的电子书帮助他们的有机接触(PDF 文件)开花结果。

Chill Insurance case study

准备好开始使用数字下载作为你的副业了吗？看看这些插件。

轻松的数字下载

Easy Digital Downloads

也被称为 EDD， Easy Digital Downloads 是那些销售数字商品的标准插件之一，它可能会在 WordPress 上出现。

价格将从 99 美元到 499 美元不等，取决于你想要什么，但对于一个侧面的骗局来说，“个人”计划是完美的，给你一切你需要的东西来接受付款，并把你的数字商品送到客户手中。

在 Kinsta，我们是它的忠实粉丝，这就是为什么你可以找到关于你需要了解的 EDD 的详细介绍。

伍尔科贸易公司

WooCommerce

没错:理论上，你可以使用 WooCommerce 的免费基础插件来销售你的数字下载。

我强调“理论上”,因为如果不添加 WooCommerce 扩展,你将受到限制:如果没有付费的附加组件，你就不能创建产品捆绑包或实现批量下载。如果你想保持低消费，WooCommerce 为数字产品下载提供支持。

在 EDD 和 WooCommerce 之间做出选择不是一件容易的事情，但是对于那些不想在数字下载之外扩张的金钱良知的骗子来说， WooCommerce 可能是你最好的选择。

工资

Payhip

Payhip 是一个数字下载和会员平台，受到全球 130，000 多家卖家的信任。

它很容易使用，它的结帐是为了增加你的转换率(这很重要！)，而且它有方便的功能，如客户更新、优惠券和一个允许你招募自己的会员的会员系统。

你怎么能在一个低质量、慢速度、蹩脚的主机上发展你的副业呢？我们针对 Kinsta 的速度和增长进行了优化！查看我们的托管计划

你可以通过选择他们的免费永久计划开始免费使用 Payhip。

你的副业网站创意#4:经营一个联盟博客

如果你不熟悉联盟营销，这是一个很好的方式来打入市场，并建立一个可观的利润，而不会在这个过程中冒风险。

概要是这样的:

一个商人有他们想要出售的产品。出版商(也称为代销商)同意以固定费用或百分比的佣金率将其出售给他们的读者。一旦交易成功，商家就支付佣金。

该代销商为商家做的每一笔新销售都会重复这一循环:

Affiliate Marketing Model (Image source: eBay)

经营一个联盟博客实际上可以是一项成熟的业务，但是如果你只是想作为一个旁门左道的人进入这个行业，你会希望已经有一个固定的受众。

你更有可能获得更好的佣金条件，而且因为你的博客已经有了健康的流量，你可以期待看到比你从头开始更快的支付。

请记住，如果你在美国，你有义务公开你与商家的关系。

大多数人把他们的免责声明放在帖子的顶部:

Example of disclaimer at the top

将它们放在帖子的底部也是可以接受的:

Example of disclaimer at the end of the page

只要不隐瞒或转移观众对你和链接的关系和预期回报的认识，你在哪里披露由你决定。以下是关于如何撰写完美的关联披露的深度指南。

现在，这里有一个关于联盟博客的好消息:这种兼职风险投资的利润可能相当可观。

一个博客作者用一个产品赚了 16433 美元。

他成功的关键是制作高质量的内容，支持而不是试图直接销售你正在推广的产品。

此外，即使作为旁门左道，这也不仅仅是写一份普通的文案和附加一个行动号召。

毕竟，55%的读者只会浏览你的文章 15 秒钟甚至更短。

因此，如果它是通用的，你的机会降落，甜蜜的从属委员会大大下降。

至于如何入门成为联盟博主，节目很少。他们是这样工作的。

亚马逊协会

Amazon Associates Homepage

如果你和我一样，你在亚马逊上花了太多时间。你的读者可能也是如此。

因此，亚马逊的联盟项目 Amazon Associates 是最受博客作者欢迎的项目之一是有道理的。

举个例子:一年之内，一个博客作者在亚马逊的月收入从 50 美元涨到了 2000 美元。

加入亚马逊助理的步骤非常简单。

在申请并获得批准后，你只需在博客帖子中附上一个附属产品的链接，同时透露你可能会赚取佣金，然后等待访问者点击它。

这个项目的美妙之处在于访问者不一定非要购买你链接的产品才能赚取佣金。如果他们在饼干放到他们电脑上的 24 小时内从亚马逊买了任何东西，你会因此得到回扣。

因此，尽管他们的佣金率(按产品类别设定)不是最好的…

Amazon standard fee rates

亚马逊惊人的高转换率，Prime 会员高达 74%,使其成为博客作者的可靠选择。

但是说到好东西，这里有两个工具你可以用在 Amazon Associates 程序和 WordPress 博客上。

thirty 附属公司

ThirstyAffiliates

免费版 ThirstyAffiliates 有大量的功能，使其特别适合与亚马逊合作伙伴结合，包括、【智能】解锁、自动“不跟随”和在新标签编程中打开、机器人排除和基本统计报告。

如果你升级到专业版，单个网站许可证要花 49 美元。

你将获得额外的功能，如 Amazon API reporting，让你从 Amazon 搜索和导入附属链接，地理定位重定向，自动关键字链接，使优化你已经发布的帖子变得轻而易举。

亚马逊联盟 WordPress 插件

Amazon Affiliate WordPress Plugin

虽然这个名字有点不准确，但是 AAWP 名副其实。专为亚马逊联盟计划设计，你必须预付大约 50 美元才能开始使用这个插件。

它适用于任何主题，即时创建产品比较表，自动从亚马逊获取产品定价数据，包括现成的小工具等等。

也就是说，这个插件的缺点是它是为 Amazon Associates 设计的，所以如果你在你的博客上管理多个联盟项目，你需要把它和另一个插件结合起来。

或者，如果你想走自己的路，或者只是想让你的联盟计划比写博客和插入链接更复杂一点，你可以创建自己的合作伙伴页面，让品牌来找你。

或者，更好的是，去找他们。

例如，你的博客迎合年轻女性群体吗？如果是这样，Refinery29 就在这里& Now Collective 可能是你的理想选择。

Here & Now Collective’s affiliate program

与更专业的观众或其他营销人员合作？滴滴的联盟计划有一个特殊的类别，只针对影响者合作伙伴下的博主。

Drip’s influencer program

这样的例子不胜枚举。寻找要加入的合作伙伴计划可以像搜索你所在领域的相关博客或产品，或者查看你自己喜欢的产品一样简单。

你个人用什么，真正相信什么？这会让阅读你博客的人受益吗？

如果是这样，那么你已经有了潜在的附属关系的基础，可以让这一方为你工作在你的条件。

顺便说一下，Kinsta 的附属计划的条款相当慷慨。只是精神食粮。

摘要

兼职不再局限于混音带和拥有 MBA 学位的人。如果你有一个基于这些想法之一的 WordPress 网站，你可以选择产生额外的零花钱。

在线课程是信息产品中增长最快的商品之一。你可以很容易地在你的 WordPress 网站上用 LMS 插件设置一门课程，并以高价分享你的知识。

付费会员订阅是现代商业的另一个标志。几乎一半的网上购物者报告说在过去的一年里有付费订阅，那么为什么不利用这一点，创建一个高级会员网站呢？

也就是说，在线课程和会员网站都需要你投入大量时间来创建。如果你想创建一个互动社区，他们的维护可能会占用你一周的大量时间。

这就是数字下载发挥作用的地方。出售电子书、工作表、食谱规划、模板、图片集和任何你能想到的网络资产是另一种简单、省时的副业，可以帮助你赚钱。

它也能为你的搜索引擎优化带来一些真正的奇迹。

最后，如果你已经有了一个有读者的博客，联盟博客是另一个非常有利可图的副业。

Amazon Associates 是博客作者最容易加入的项目之一，但是如果你想走自己的路，有很多独立的商家都有合作项目。

这些策略被证明是赚钱的，如果你做得足够好，它们可以有自己的生活。事实上，你的日常工作可能只是副业。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何改进网站导航(举例说明为什么要这么做)

原文：https://kinsta.com/blog/website-navigation/

网站导航是许多人在网页和内容之后创建的东西。在最近的一项调查中，只有 50%的互联网用户能够根据标准的网站导航结构预测相关内容的位置。

Where to find answers to specific questions

如果有一半的访问者找不到他们要找的页面，那就是一个巨大的 UX 问题。

这将导致更高的跳出率，更少的现场时间，更低的转化率。

如果你正在管理一家电子商务商店，糟糕的导航也会对你的底线和收入产生负面影响。

在这篇文章中，我将从头到尾介绍网站导航。这意味着，你将学习最佳实践，不同类型的导航，以及如何为你的网站创建完美的导航。

开始吧！

什么是网站导航？

网站导航是在互联网上导航页面、应用程序和网站的过程。其背后的技术被称为超文本或超媒体。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

超文本或媒体是基于文本的网页，使用超链接将它们连接到互联网上的其他页面。一个超链接是一个链接，将你的网络浏览器导向一个 URL。

URL 指示浏览器应该从服务器访问哪个文件，它下载并呈现数据，以便用户可以看到它。

内部链接通向同一个域的不同页面。外部链接指向另一个域名上的不同页面，一个完全独立的网站和服务器。

网站导航使用带有内部链接的菜单，这使得访问者很容易找到他们正在寻找的页面。良好的导航是用户友好网站的基本要素。

什么是网站导航菜单？

一个网站导航菜单是一组链接，通常指向内部页面，被组织成一个菜单。大多数网站，包括我们自己的网站，都在网站顶部有一个菜单。

Kinsta header menu

这个部分在网页设计与开发中被称为网站的“页眉”。这些菜单中链接到的一些最常见的页面是:

• 关于我们。
• 博客。
• 接触。
• 特色。
• 计划/定价。

当然，该菜单还可以包括到其他页面的链接。

一个网站的导航结构是怎样的？

网站的导航结构描述了网站上不同的页面是如何组织和相互连接的。

例如，有些页面和内容只能通过访问特定页面才能到达。设计师和网站开发人员在制作一个新网站时，通常会规划导航结构。

Website navigation structure

在这个例子中，关于、计划、联系人和博客页面被从主页菜单链接到。要访问任务和团队页面，您需要先访问关于页面。

为什么导航在网站上很重要？

在这篇文章的介绍中，你了解到 50%的互联网用户不能正确使用标准菜单。想象一下，没有导航，很少有人会找到正确的内容。

通过正确的导航和菜单方法，你可以将百分比降低到 50%以下。这将降低你的跳出率，增加你在网站上的平均时间，并带来更多的流量、线索和客户。

不要让你的访客迷路🔎在本指南中，我们将分享你需要知道的关于网站导航的一切，以及为什么它是网站成功的关键！ 点击推文

网络导航的类型

网站导航主要有三种类型。它们是:

当组合正确时，它们可以帮助你的访问者浏览你的网站，毫无问题地找到他们的目的地。让我们仔细看看每一个。

1.全球网站导航

使用全球网站导航，网站的所有页面上的菜单和链接都是相同的。许多现代菜单都是这样设计的，包括我们在 Kinsta 的网站菜单:如果你向下滚动页面，菜单就会“跟着”移动。

Kinsta global header menu

在截图中，你可以看到我们简单易懂的标题菜单。它在我们所有的页面上都是一样的，并引导我们进入一些最重要的页面和内容。

我们知道潜在客户在做出决定之前想要了解的关于托管公司的重要信息。这就是我们让潜在客户轻松找到我们的计划、功能并联系我们的原因。对于现有用户，我们有登录选项，让他们登录到他们的 MyKinsta 仪表板。

信息

想先睹为快看看 MyKinsta 长什么样吗？100%免费创建您的模拟帐户,开始玩吧。

我们的页脚菜单也是全球性的，突出了我们网站的重要部分和一些特色内容。

Footer menu

全局菜单是大多数现成 CMS 解决方案的标准。

每个 WordPress 主题都允许你为导航菜单添加不同的类型和区域。如果你需要更多，你可以使用菜单插件来获得更多选项。

2.分级网站导航

分层导航意味着菜单会根据每个页面的上下文而变化。

大多数报纸和纯粹基于内容的网站都以分级导航为特色。例如，如果您访问一份报纸的首页，通常会在标题菜单中看到指向热门新闻类别的链接。

Example of hierarchical navigation from the NYT

如果菜单是全局的，在点击不同的类别后，它将保持不变。但是因为它是分层的，它显示了新的链接，这些链接指向我们访问的类别页面的子类别。

Hierarchical navigation example

在《纽约时报》的科学页面上，你根本看不到顶级菜单。相反，你会看到科学研究和文章的不同分支的链接。

这一变化是这个菜单与大多数小网站上常见的全局菜单的区别。

3.本地网站导航

与层次导航和全局导航相比，本地网站导航指的是包含在内容本身中的内部链接。通常，用户可以在同一层级或更深一级获得选项，或者获得导航到其他相关页面的链接。

一个很好的例子是杂志网站，它们经常使用链接来帮助读者探索某篇文章的深层背景。如果他们提到他们过去报道过的事件，他们会链接到那篇文章，而不是深入解释。

Example of related content linked on a page

但这不仅仅是杂志和新闻网站的专利。电子商务商店非常依赖这种导航菜单来展示同类产品。

Example of local navigation in ecommerce

一般来说，内部链接也是 SEO 的一个重要方面，更具体地说，是 SEO 的一个重要方面，所以它现在是任何网站管理者的标准做法。

网站导航示例

与其喋喋不休地谈论理论，不如让我们深入研究一些例子。我会报道一个新闻网站和 Twenty Twenty WordPress 主题。

新闻网站:纽约时报

NYT homepage menu

乍一看，《纽约时报》似乎主要使用了一个单一的全球标题菜单。

但这还没有结束。NYT 在其数百个类别页面和数百万篇文章中使用了所有类型的导航。

使用的导航类型:

• 等级制度。
• 全球。
• 本地的。

让我们看看每个页面不同的标题导航。

主页

在其网站的标题部分，它包括两个菜单，一个可扩展的全局菜单在徽标上方，一个层次菜单在标题下方。本质上，它就像一个标题和子标题菜单设置。

NYT homepage – header menus

如果你展开标题汉堡菜单，它会变成左手边的边栏，在这里有一个与大多数现代分辨率相当大的空白。

它不会模糊/使用覆盖来隐藏网站上的任何内容。

主页(手机)

让我们来看看移动设备上的相同标题部分。大多数互联网用户通过智能手机访问新闻网站，因此移动体验可能比桌面体验更重要。

NYT homepage – mobile

新闻分类子标题菜单不是手机主页的一部分。相反，您只有可扩展选项可用。

展开后成为全屏菜单，完全覆盖主页上的所有内容。

Expanded menu – NYT homepage (mobile)

它包括台式电脑主菜单上的每一个选项，并且链接都是按类别整齐地组织起来的。

类别页面

在类别页面上，在标题 hamburger menu 的下方，您会看到一个链接，指向类别的进一步子集。

NYT science page – main menu

它让那些只对更广泛的主题中的特定领域感兴趣的人更容易找到可能与他们的兴趣更一致的文章。

类别页面(手机)

在手机上，这些分类页面包括与桌面版本相同的标题汉堡菜单和结构。二级标题菜单一点也不隐藏，使导航和内容发现更容易。

NYT science page – main menu (mobile)

另一个原因可能是，许多移动体验是通过搜索或社交媒体开始的，而不是直接访问 NYT 主页。

单篇文章

对于单篇文章，浮动标题指示您当前所在的部分，但它只具有可扩展的全局菜单(以及搜索框)。

NYT article – header menu

单篇文章(手机)

在手机上，干净的导航被保持，因为唯一的菜单是标题汉堡菜单。

NYT article – header menu (mobile)

页脚

NYT 页脚菜单在主页、分类页面和单篇文章中都是一样的。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

NYT article – footer menu

页脚(移动)

NYT article – footer menu (mobile)

在手机上，页脚菜单只显示五个菜单项，点击后所有菜单项都会展开成子部分。

例如，如果您点击 Arts 部分，您将能够浏览这些子部分:

NYT article – footer menu expanded (mobile)

由于网站使用 JavaScript 在你向下滚动时动态加载更多的内容，看起来好像页脚根本不存在。

这是一个很好的技巧，可以帮助网站的时间，让读者阅读更多的文章，但它使网站更难导航。

内容布局

有些人可能会认为，在线报纸和博客使用的主要导航工具不仅仅是菜单。正是报纸版面本身为 NYT 和其他类似的网站提供了导航主干。

NYT homepage

所有突出显示的元素都是可点击的，并会指向《纽约时报》网站内不同的内部页面。

内容布局是网站导航的另一个关键元素，他们在主页和分类页面上实现。

二十二十 WordPress 主题

又是一年，又是一个默认的 WordPress 主题。这次是二十二十，我们要深潜，看看导航有什么变化。

我会检查开发者决定如何处理 WordPress 最新实例的菜单和内部链接是否有任何不同。

标题菜单

就像任何标准的主题一样，新的官方版本在标题部分有一个简洁的菜单。您可以选择不同的显示位置，这就是桌面水平菜单选项的外观:

Example of header menu in Twenty Twenty theme

另一方面，桌面扩展菜单选项将增加在右上角的对齐栏中扩展菜单链接的可能性。

Example of expanded header menu in Twenty Twenty theme

主要内容区域是深灰色的，将用户的注意力吸引到链接的菜单上。

页脚

Example of footer menu in Twenty Twenty theme

在页脚，没有内部导航的链接，除了一个简单的“到顶部”链接，让你回到页面的顶部。

什么是好的网站导航？

好的网站导航总是以用户为中心设计的。它使用清晰易懂的语言，并链接到最重要的页面。

它利用充足的空白空间、颜色变化或其他设计技术，将自己与主要内容清楚地分开。此外，它更易于在所有设备(移动设备和桌面设备)上阅读和使用。

以用户为中心的导航也意味着它是上下文相关的。它考虑了用户的体验和期望。这可能是为什么在线报纸仍然无法摆脱“拥挤”设计的原因。

在阅读报纸的背景下，这是他们的用户和潜在客户所期望的，这包括他们非常广泛的类别和子类别菜单。

你的新 WordPress 网站需要一流的、快速的、安全的主机吗？Kinsta 提供超快的服务器和来自 WordPress 专家的 24/7 世界级支持。查看我们的计划

在下一节，我将讲述如何为你的网站创建良好导航的基础知识。

改进网站导航的 8 条原则

即使你是一个完全的初学者，你也可以通过遵循下面的提示来为你的网站导航。

1.规划你的页面结构和导航

在你开始为你的网站写内容之前，先计划好你的页面结构和导航会是什么样子。

规划是为您的访问者提供满意的导航过程中的一个重要部分。你可以使用网站地图创建器来帮助你快速创建你想要的网站体验模型。

一个好的站点地图工具的例子是 GlooMaps。

GlooMaps

您可以免费创建任意数量的文档。每个人都有一个独特的网址，你可以分享，收集反馈，让别人编辑。一旦创建，您的 URL 将在 14 天内有效，除非重新访问。每次新的访问都会将链接寿命延长 14 天。

GlooMaps 并不是你可以使用的唯一工具，还有很多类似于 Octopus 、 VisualSitemaps 、 Creately 等等。

2.遵循既定标准

不要试图重新发明轮子。网站导航更多的是关于可用性而不是创造性。

对于基本的设计元素，如在哪里放置你的菜单，以及如何表明它是可扩展的，遵循已知标准。

三条水平条纹，或称“汉堡包”☰标志，是识别可扩展菜单最容易识别的图标之一。另一个是三个点形成一条水平线。

如果你试图发挥创意，开发一个自定义图标，很可能很多访问者不会理解你设计的目的，并且很难找到你的菜单。

3.使用用户的词汇

不要只是链接到相同的旧页面，使用标准的 web 开发行话，或者过度创造性的文案，而是使用更接近用户使用、搜索和想要的语言。

这种方法对 SEO 和可用性都有好处。创建反映用户在线搜索内容的页面。

然后你可以通过使用帮助用户在谷歌上找到你的网站的相同单词和短语链接到那些相同的页面。

4.使用响应菜单

由于现在超过 52%的在线流量都是移动的，所以响应式/移动优先的设计已经成为一种绝对的必须。

不要让菜单在移动网络浏览器的框架外延续或者过于混乱，要确保你实现了可扩展的移动菜单。

它成为行业标准是有原因的。文本很小的水平菜单在手机上很难阅读、点击和正确使用。

好消息是所有最好的 WordPress 主题都默认带有响应式设计和响应式菜单。除非你是从零开始设计你的 WordPress 网站，否则 WordPress 已经帮你搞定了。

5.利用你的页脚菜单

持续阅读并滚动到网站底部的读者比普通用户更积极。利用这一点，利用每页底部的空间突出有价值的内容。

由于页脚没有占用“折叠上方”的空间，你可以细化并包含多个类别，甚至突出重要的基础页面或文章。

作为一个例子，看看我们如何在这个页面上处理我们的页脚。我们涵盖了基本的功能页，我们的公司，分解我们的资源，等等。

页脚可以让你突出显示你“放不下”的内容。

6.使用颜色和空白将导航与其他元素分开

使用颜色、字体和空格将你的菜单与你的主要内容和侧边栏分开。明确导航的起点和终点。

如果你的网站访问者甚至不能在第一时间找到菜单，那么你在菜单中使用什么语言，或者你链接到哪个页面都没有关系。

7.避免下拉菜单

对于大多数网站(不是全部)，下拉菜单不是必要的或者有用的。当用户在菜单中看到一个链接时，假设它是可点击的。除非设计将它与可点击的链接分开，否则会导致混乱。

主菜单中有太多的链接也会对网站的可用性产生负面影响。

实现分层和局部导航来代替下拉菜单可以使用户流程更加顺畅。它还允许用户与多个页面进行交互，在你的网站上花更多的时间，而不是浏览一个巨大的链接列表。

8.扁平化你的结构

如果你想让访问者尽可能容易地浏览你网站的所有页面，尽可能保持一个扁平的导航结构。

不要从你的主页链接到几个页面，然后扩展更多的子页面和类别，保持简单。

确保从你的主页链接到重要的类别，并从那里链接到一个单独的子类别或单篇文章页面。

Flat website structure

有证据表明，以这种方式扁平化结构对 SEO 有积极的影响，并能导致谷歌网站链接。所以不要让你的网站结构变得太乱！

网站导航菜单趋势 2022

虽然近年来更广泛的网页设计趋势包括 3D 设计元素和将量身定制的照片融入创意设计，但菜单并没有令人兴奋的一年。

但这并不意味着一切都没有改变。以下是我们对过去几年中一些最重要的菜单趋势的快速回顾。

全屏移动菜单中的可扩展类别

Uber – menu mobile

优步和其他拥有改良的现代设计的大公司已经更新了他们的菜单，使其更加实用。

这些企业面临的一个问题是，他们有太多不同的产品和类别，不可能明智地将它们包含在一个菜单中。

这导致了清晰、分类的可扩展移动菜单，而不仅仅是一个无止境的链接列表。

浮动标题菜单

也许过去几年菜单的普遍趋势是浮动标题菜单。

浮动标题菜单是指当你向下滚动页面时，它会一直显示在浏览器窗口的顶部(就像我们在 kinsta.com 上使用的那样)。通常它是标题部分的一部分，包括一个小图标，也可能是一个搜索栏。

很难否认这一点，因为持续访问菜单使得内部导航变得更加容易。这种类型的菜单包含在许多 WordPress 主题中，而且这种趋势没有停止的迹象。

桌面上覆盖下拉菜单

关于网站导航的一些最基本的建议是远离下拉菜单。出于某种原因。

但这并不意味着他们天生就很可怕。下拉菜单很难在电脑屏幕上实现。

通过在主要内容上叠加颜色，他们可以将用户的注意力 100%集中到菜单上。对于可扩展的类别，你也有比在鼠标悬停时显示更多链接更好的选择。

这些因素汇集在一起，使其成为 2019 年的增长趋势。事实上，许多创新的网站和模板都在桌面上包含了下拉菜单。

Higher bounce rates, lower conversion rates, less time on the site... website navigation is an essential part of UX 💻 Learn how to improve yours with this guide ⚡️Click to Tweet

摘要

这篇文章应该已经让你清楚地了解了什么是网站导航，以及它的一些要点。

网站导航应该总是专注于简单、清晰，而不是强烈的色彩和创造性的设计。由于你的网站的导航和菜单需要考虑桌面和移动用户，事情会变得更加棘手，雇佣一个网络开发人员可能是个好主意。

始终尝试遵循网站菜单设计最佳实践来确保你的访客和搜索引擎可以轻松浏览你的内容。

可用性和清晰性将继续是未来发展的重点。因此，如果你能掌握用户的语言，并创建一个对他们有意义的结构，你就能让你的菜单经得起未来的考验。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

网站安全检查:保护您的网站免受恶意软件和垃圾邮件的侵害

原文：https://kinsta.com/blog/website-security-check/

安全性已经成为 web 开发人员和网站所有者非常关心的问题，这并不奇怪。随着互联网的普及并成为新的交流、研究和购物方式，网站安全检查对于阻止恶意软件和垃圾邮件的传播至关重要。

无论你经营的是一个小小的个人博客还是一个巨大的跨国网上商店，被黑的威胁总是存在的。有些人会破坏你的网站并嵌入恶意软件，试图窃取你或你的客户的数据，并删除你服务器上的重要内容。你需要保护你自己和你的敏感信息。

让我们来看看你的网站现在到底有多安全。我们还将提供一些提示，来消除恶意软件作者利用的那些唾手可得的果实。WordPress 开箱后是安全的，但要完全修补它还需要一点工作。

查看我们的视频指南来执行网站安全检查

网站安全检查:为什么很重要？

你可能会认为你的网站很小，不重要，没有人会去关注它。或者，也许你以前从来没有考虑过安全问题，认为这没什么大不了的。

这就是为什么在 2013 年，超过 70%的 WordPress 安装容易受到攻击。这些攻击中的许多是由于过时的软件——因为大多数人要么不知道足够多，要么不关心足够多来保护他们的网站，这导致了大规模的黑客攻击 WordPress 安装。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

Outdated vs Updated CMS in 2019.

那么，如果你的网站遭遇不必要的入侵，会发生什么呢？这不仅仅是一个简单的烦恼，通过更改密码就可以轻松解决。

• 你的网站可能会有代码注入其中，导致访问者感染恶意软件，这可能极难定位和删除。
• 你的关键页面可能会被涂污，空白，或塞满了非法网站的链接。
• 这可能会导致博客帖子和页面等内容被删除。
• 属于您、您的用户或您的客户的敏感信息(如登录信息或信用卡信息)可能会被窃取并在网上出售。
• 攻击可能会蔓延到您服务器上的其他网站。
• 如果谷歌在你的网站上检测到任何恶意软件，它将阻止其访问并将其从搜索结果中删除，破坏你的搜索引擎优化(SEO)努力。
• 管理员帐户的用户名和密码可能会被更改，阻止您访问您的后端。

如果你经营一家电子商务商店，被黑的网站可能是一笔大买卖。

虽然你可能会说你的网站不够重要，但并不是所有的攻击都是有针对性的。许多 WordPress 攻击都是自动进行的——一个机器人会探测你网站的漏洞，并在没有人工干预的情况下发起攻击。

这就是为什么你需要采取措施来保护你的网站，无论如何。
T3】

WordPress 为什么会被黑？

黑客攻击很普遍，但是黑客用来侵入您的站点的最常见的漏洞是什么？

你可能会想象进入一个网站是一个具有挑战性的过程，需要几天或几周的工作和大量关于计算机、编码和服务器的知识。这种情况对于试图突破一个大型的、受到良好保护的网站的防御是真实的，但是对于小型的 WordPress 域来说，情况就大不相同了。

绝大多数对 WordPress 的攻击之所以成功，是因为人们使用了容易猜到的密码，并且没有更新他们的主题和插件。黑客利用自动化程序闯入大多数此类网站。

密码破解是最简单的黑客形式，但它如此普遍是因为它有效。许多人将他们的 WordPress 登录设置为默认的“admin”，省去了一半的猜测，然后使用一个简单的、可猜测的密码。

当失败时，黑客将利用流行插件或 WordPress 过时版本中的常见漏洞。这就是为什么保持一切更新是如此重要。

有很多更复杂的方法可以侵入一个网站。尽管如此，大多数 WordPress 攻击利用了不安全的密码和过时的软件，这使得进入网站变得非常容易。

如何执行网站安全检查

保护网站安全的第一步:确定网站的安全程度。您的后端是否有任何明显的漏洞需要您立即修补，或者您现在可以进行任何简单的修复？

使用在线工具

一个快速简单的方法来检查您的网站的恶意软件和漏洞是使用在线扫描仪。这些远程扫描您的网站，并确定常见问题。它超级方便，因为它不需要任何软件或插件，只需要几秒钟。

网上有几十种扫描仪可供选择，我们将在下面的工具部分列出一些其他的，但现在，让我们挑选一种易于使用的流行扫描仪: Sucuri SiteCheck 。

Sucuri SiteCheck.

这个工具是一个很好的选择，因为你可以安装 Sucuri 插件并修复它检测到的任何问题。

一旦你扫描了你的网站，Sucuri 会对照黑名单进行检查，寻找明显的问题，如注入的垃圾邮件或过时的软件，并简单地扫描任何它可以访问的恶意软件代码。它还提供了一些建议，以加强您的网站对攻击。

Scanning a website with the Sucuri plugin.

像这样的工具是检测隐藏的恶意软件和其他问题的绝佳切入点。

用 WordPress 插件扫描你的网站

虽然在线扫描仪已经足够好了，但安装一个插件更好，它能够深入挖掘代码的根源，找出漏洞或难以检测的恶意软件。

我们已经提到了苏库里作为一个选项。还有两个更受欢迎的安全插件: All in One WP 安全&防火墙，以及资源库上下载量最多的 Wordfence 安全。

一旦你安装了你选择的插件，它可能会指示你立即运行扫描。与远程扫描仪相比，这些插件的优势在于它们可以删除恶意软件并自动进行更改。

寻找奇怪的变化

如果您怀疑或知道您的站点已经感染了恶意软件，确定来源有时会很困难。以下是您可能会注意到的一些无法解释的变化，以及通常会吸引黑客的文件:

• 突然链接到不是你自己添加的陌生网站
• 您没有创建的新文章和页面，或者现有页面的内容突然发生变化
• 您没有对设置进行更改
• 您没有添加的新用户，尤其是具有高级权限的用户
• 您没有安装的插件或主题
• 恶意软件通常会将恶意代码注入到您的文件中。检查插件和主题文件、 wp-content/uploads 文件夹、位于错误目录的 WordPress 核心文件、【wp-config.php】和。htaccess 。你应该备份你的网站并且在做任何敏感的改变之前理解代码。

如果你用 FTP 连接到你的站点，你可以通过最近修改的文件来查找不应该在那里的代码。

如果您的站点定期感染恶意软件，而您在文件中找不到任何原因，则问题可能出在您的服务器或服务器上的另一个站点。

确保一切都是最新的

正如我们已经提到的，过时的软件是 WordPress 中最常见的感染媒介。如果只有一件事可以让你的网站安全，那就是保持 WordPress 更新。

检查你网站上所有软件状态的最简单的方法是去仪表板 > 更新，如果你的核心、主题或插件过期了，它会提醒你。

WordPress updates

自从 5.5 版本以来，WordPress 现在执行自动更新，没有什么是过时的，除非你有一个过时的 WordPress 版本。如果没有，您可以从该屏幕更新所有内容。

如果你知道有 WordPress 的新版本，但它没有出现，点击当前版本下面的再次检查按钮。

您也可以查看您的插件 > 已安装插件或外观 > 主题页面进行更新。

重要的

让 PHP 保持最新是很重要的，尤其是如果你使用的是 7.3 以前的版本，因为它会带来很大的安全漏洞。

安全帐户和密码

您的主帐户上的弱密码使任何人都可以很容易地用暴力程序闯入您的站点，给予他们管理员访问权限和更改任何内容的能力。

虽然复杂的密码可能很难记住，使登录变得不太方便，但如果不得不从黑客攻击中恢复您的网站，那就更不方便了。使用更安全的密码绝对是值得的，即使你必须把它写下来。

您的密码应该混合使用大小写字母、数字和符号。最好不要基于字典上的单词或个人的、可猜测的信息，如你的地址或家庭成员的名字。

在最好的情况下，您的密码将是一长串杂乱的随机字符。我们强烈建议您使用密码管理器。使用像 1Password 或 LastPass 这样的网站来生成一个安全的、不可访问的密码。

Generating a secure password with LastPass.

你可以进入用户 > 所有用户或者直接进入用户 > 个人资料，在 WordPress 中更新你的密码和电子邮件。向下滚动，在联系信息下找到邮箱，在账户管理下找到和新密码。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

Setting a new password in WordPress

当你在用户页面时，看看你所有的用户，确保没有你不认识的人或者没有不适当的权限。您应该立即删除任何具有管理员权限的未识别用户。

我们还鼓励您查看关于限制用户权限的指南，这样只有您的帐户才能更改您网站上的敏感文件。

检查您的 SSL 证书

如果你的 SSL 证书已经过期，你通常会立刻知道；像谷歌 Chrome 这样的浏览器会对过期的证书发出警告，阻止用户访问你的网站。如果你不确定或者已经得到这个错误，检查你的 SSL 证书，看看它是否是最新的，以及你是否正在使用最新版本的 SSL/TLS。

当您访问网站时，您会在大多数浏览器的地址栏中看到一个锁图标。如果您的证书已过期，此锁可能是红色的或有一条斜线穿过。

点按锁图标，然后再次点按以查看证书信息，包括其到期日期。

Checking the SSL certificate of a website.

您还可以使用一个 SSL 证书检查器来扫描您的站点，以确保您的证书没有过期，并且您的 SSL 协议中没有漏洞。

常见漏洞

许多 WordPress 网站充斥着微小的攻击媒介，看似无害，却能提供比你想要分享的更多的信息。

在你的前端有一个可见的 WordPress 版本可以准确地告诉黑客你的网站上存在哪些漏洞。尤其是如果你使用的是 WordPress 的过时版本，你可能想要隐藏这些信息。

你会注意到下的文件编辑器 > 主题编辑器和插件 > 插件编辑器在你的后端。

Adding code to the Theme Editor

虽然这些工具非常方便，但它也让任何入侵你的网站的人有机会破坏一些东西，所以你可能想把它们关掉。您可以通过将此功能添加到wp-config.php来实现:

define( 'DISALLOW_FILE_EDIT', true );

SQL 注入是闯入站点的一种常见方式。如果您有任何表单或其他用户输入，请限制使用特殊字符，并且只允许上传安全、常见的文件类型。

最后，为了增加一层保护，你可以用密码保护文件目录。
T3】

如何保护您的网站:提示和工具

如果你的网站有恶意软件，一个好的安全插件应该可以清除它。我们已经涵盖了上面几个您想要检查的漏洞。

需要一个给你带来竞争优势的托管解决方案吗？Kinsta 为您提供了令人难以置信的速度、一流的安全性和自动伸缩功能。查看我们的计划

查看我们的视频指南来保护您的网站

我们还有一些其他的快速提示来保护您的网站，并在感染发生之前防止感染。你可以在几分钟内应用这些技巧，所以即使你不熟悉 WordPress 和 web security，它们也应该很容易设置。

选择安全的主机

当黑客试图进入你的网站时，他们通常会转向服务器寻找漏洞。有很多便宜的主机，但他们并不总是投资于最安全的服务器。

共享主机可能是传染的媒介。如果一个网站感染了恶意软件，它可能会传播到服务器上的每个站点。所以你可能最终会得到一个充满病毒和 SEO 垃圾邮件的网站，这甚至不是你的错。

这就是为什么做你的研究并选择一个关心安全和投资 T2 安全服务器的主机是至关重要的。你仍然需要把工作放进去以保护你的网站，但是在服务器层面，你的数据是安全的。

打开两步身份验证(2FA)

两步认证(也称为双因素认证或 2FA)增加了另一个登录步骤。除了用户名和密码，你或任何伪装成你的人还需要另一条信息:一个独特的附加代码。

它可能是发送到你的手机上的一个数字代码，可以通过暴力手段使你的 WordPress 账户几乎无法破解。或者，它可能需要电子邮件验证或一条只有你知道的信息。

虽然没有内置的方法来启用双因素认证，但许多插件都为 WordPress 添加了这一功能。

Kinsta 向所有客户提供双因素认证。如果你不是 Kinsta 的用户，我们之前提到的 Wordfence 安全插件内置了 2FA。你也可以尝试其他网站安全工具，如用于电子邮件代码的双因素插件或通过应用程序设置双因素电话认证的 Duo 。

Duo Two-Factor Authentication plugin

每天做备份

备份你的网站并不能防止有人试图闯入，但是如果真的发生了什么，有一个备份将是无价的。这可能意味着丢失几周甚至几年的工作和简单地恢复到黑客攻击前的备份之间的差别。

如果您使用的是 Kinsta，我们将为您提供存储两周的每日自动备份(对于使用 Kinsta 代理合作伙伴计划的用户，存储时间为 30 天)。此外，您可以每周创建五个手动备份和一个可下载的备份，并且有可选的插件来每小时备份或导出到云。

像 UpdraftPlus 这样的插件也有帮助。最好选择每天至少备份一次的服务，以最大限度地减少数据丢失。

使用 Web 应用程序防火墙

一个网络应用防火墙，或 WAF，使用严格的规则来过滤进入的流量，阻止列出已知与黑客攻击或 DDoS 攻击有关的 IP。它防止许多攻击到达您的服务器。

虽然你可以在服务器层面应用 WAFs，但最简单的方法是购买基于云的服务，比如由 Cloudflare 或 Sucuri 提供的服务。

通过 SSH 或 SFTP 连接

有时你需要用 FTP 连接到你的站点来添加或修改文件。用 SFTP 总比用 FTP 好；区别很简单:SFTP 是安全的，而 FTP 不是。

使用 FTP，您的数据不会被加密。如果有人设法拦截你和你的服务器之间的连接，他们可以看到从你的 FTP 登录凭证到你上传的任何文件。永远和 SFTP 保持联系。

你也可以考虑使用 SSH 访问，它允许你连接到一个命令提示符并更直接地管理你的站点。它安全可靠，可以远程处理简单的任务。如果你遇到困难，我们的宋承宪指南可以帮你。

防止 DDoS 攻击

DDoS 攻击通过向您的服务器发送成千上万的虚假请求，阻止潜在的读者或客户访问您的网站，使您的网站慢如蜗牛。以下是一些在它们发生之前阻止它们的建议:

• 当 DDoS 攻击袭击时，为准备好计划。当您需要提醒您的 web 主机并阻止攻击时，您不希望惊慌失措。
• 使用能够检测虚假流量的 web 应用程序防火墙。
• 使用专门定制的反 DDoS 软件。
• 停用 xmlrpc.php以阻止第三方应用程序使用您的服务器。
• 对一般用户禁用 REST API 。

防止暴力攻击

暴力攻击可能类似于 DDoS 攻击，但目标是猜测您的管理员密码并闯入网站，而不是让您的服务器停机。也就是说，这些也会降低你网站的速度。

• 同样，WAF 可以过滤掉 bot 流量和明显暴力企图。
• 对您的管理员帐户使用两步验证。
• 建立一个活动日志并留意未授权的登录尝试。
• 更改登录页面 URL 并限制登录尝试次数。
• 密码保护您的登录页面。
• 使用一个长的随机生成的密码，并每年更换一次。

你需要了解的网站安全工具

除了我们已经提到的，这里还有一些在线安全工具可以帮助你锁定你的网站:

• intrusor . io:扫描最新漏洞。
• SSL 服务器测试:分析您的 SSL 证书并识别弱点的开发工具。
• HTML 净化器:过滤掉恶意代码/XSS，如果您有需要清理的受感染代码，这非常有用。
• Mozilla Observatory :清除代码中常见漏洞的可行建议。
• sqlmap :识别 SQL 代码漏洞的渗透测试工具。
• Detectify :在道德黑客的帮助下扫描你的网络应用。
• WPScan :基于 CLI 的 WordPress 扫描仪。
• SonarQube :编写符合标准的无安全漏洞的代码。

网站安全清单

你的网站安全吗？确保您已经勾选了清单上的几乎所有内容:

• 您使用的是安全、高质量的托管环境吗？
• 你有没有用插件或在线扫描仪扫描你的网站来检查病毒？
• 您安装了活动日志吗？您是否在监控它的异常变化？
• 您和任何拥有高级权限的用户是否使用安全密码和双因素身份验证？所有的邮件都是正确的吗？
• WordPress，它的主题和插件，以及 PHP 等底层系统是最新的吗？
• 您的 SSL 证书是安全的和最新的吗？
• 您是否检查过无法解释的内容更改、删除或添加，或者您没有在网页、设置或文件中添加的链接？
• 您的登录页面是否受到密码和有限登录尝试的保护？
• 你检查过没有添加的新用户吗？
• 表单、评论框和其他用户输入来源是否受到保护？(不允许使用特殊字符，并将文件上传限制为已知的文件类型。)
• 有没有禁用xmlrpc.php和 REST API 来防止 DDoS 攻击？
• 你是否在仪表盘中禁用了主题和插件编辑？
• 您是否有每日备份服务？
• 您是否设置了 web 应用程序防火墙？

摘要

网站安全不是一件小事，所以如果你还没有掌握它，现在是时候把它放在首位了。被黑客攻击不仅仅是令人烦恼——它可能导致搜索引擎优化受损、毁灭性的数据丢失、失去用户信任，以及恶意软件一次又一次地卷土重来。

你不需要成为一个经验丰富的开发人员采取一些额外的步骤来保护你的网站。这要从适当的网站安全检查开始。甚至像选择一个更好的密码或切换到一个更安全的主机这样简单的事情也能带来不同。

需要更多安全提示吗？了解 19 种保护网站安全的更多方法。欢迎在下面的评论中分享你的建议！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何正确运行网站速度测试(你做错了)

原文：https://kinsta.com/blog/website-speed-test/

对于你的 WordPress 网站来说，速度很重要。这是事实。为什么？首先，网站速度是谷歌算法中的一个重要因素。快速下载网站可以期望在 SERPs 中排名更高，吸引更多的访问者。其次，还有所有用户体验的考虑。如果一个网站加载速度很快，访问者更有可能逗留，阅读你的内容，并最终转化。换句话说，一个闪电般快速的网站解锁所有站长渴望的好东西。

然而，我们今天不是来讨论如何让你的网站更快。我们已经在我们的加速 WordPress 指南和关于页面速度的文章中广泛涉及了这一点。我们在这里讨论另一个我们看到 WordPress 用户每天都会犯的常见问题，那就是不正确地运行网站速度测试。

你可能不认为这是一个大问题…但事实上，这是一个大问题，尤其是当你试图衡量改进的时候。如果你以错误的方式运行网站速度测试，你的网站可能看起来更慢，而实际上它更快。

因此，下面，我们将深入探讨运行网站速度测试的正确方法，以及一些可以用来切实测量网站速度和跟踪任何改进的工具。

在你运行网站速度测试之前

在运行速度测试之前，你应该检查你的 WordPress 站点上是否已经配置并运行了以下两个东西:

1. 缓存
2. 内容传递网络

如果你不知道，请咨询你的网络开发商或主机提供商。如果你正在启动一个全新的网站，确保先设置好这些东西，然后运行你的速度测试。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

1.配置缓存

如果你是一个 Kinsta 客户端，我们的服务器级页面缓存已经在你的 WordPress 站点上运行了，所以你不需要配置任何东西。但是，请记住，出于开发和调试目的，缓存在我们的暂存环境中是默认禁用的。为了在分段环境上启用缓存，您可以在 MyKinsta 的工具页面上切换“启用缓存”按钮。

将 @WPColt 移动到 @kinsta 后，加载时间瞬间减少 37%！(无缓存插件)🚀🚀🚀

—WP colt(@ WP colt)2018 年 1 月 3 日

有效网站流量分析的 15 大工具

原文：https://kinsta.com/blog/website-traffic-analysis/

如果你认为没有适当的网站流量评估和品牌竞争分析，你的网站或在线业务就能成功，那你就错了。但是你怎么能这样做呢？

进入网站流量分析工具。

Want to see how your site is really doing when it comes to web traffic? 📈 Use these tools to get started ✅Click to Tweet

从小型企业到大型企业，数百万互联网用户使用 web 流量评估工具来划分流量，并有效地使用这些数据来提高他们网站的性能和营销愿景。

找到满足您需求的最佳工具可能很棘手，因为有太多的选项可供选择。在这篇文章中，我们自己列出了准确评估网站流量的 15 大工具。

什么是网站流量分析？

网站流量分析包括收集和分析关于网站访问者的数据，以及他们到达网站后的行为。这些信息对于营销人员实施有效的策略是至关重要的，这些策略可以优化网站流量，提高 T2，提高转化率。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

流量不再是检验企业成功的唯一标准。这就是为什么我们有全面的网站流量分析工具来帮助我们做出准确的评估。

网站流量分析工具是如何工作的？

网站流量分析工具着眼于重要的统计数据，这些数据显示出你的网站在哪些方面是高效的，哪些方面需要改进。

这些检查器会仔细检查您的网页上的用户行为，并显示有关重要关键性能指标(KPI)的计算细节。

这些危机包括:

• 流量:你网站的新访客和回头客的数量，以及他们的人口统计信息。
• 流量来源:用户如何到达你的网站(例如，有机搜索、赞助广告、电子邮件、社交媒体帖子)。
• 页面浏览量:人们访问网站上特定页面的次数。
• 会话持续时间:访问者在您的网站上花费的总时间。
• 跳出率:在你的网页上登陆，然后离开而不再与网站互动的访问者的比例。
• 转换率:在网站上与行动号召互动(如提交表格或购买产品)的访问者的百分比。这种互动被称为转换。
• 独特访问:只统计一个人的首次访问，让你把潜在客户和忠实用户区分开来。
• 退出页面:标识每个访问者离开你的网站的页面。

网站流量分析工具衡量什么？

网站流量分析工具使用上述指标来衡量网站的性能。他们收集的数据让你可以将自己的表现与竞争对手的进行比较，并确保你走在正确的道路上。

然而，关键的衡量标准集中在独立访客(uv)、页面浏览量和流量曲线上。

监控独立访问者将帮助您确定每月至少有多少人访问过您网站的某个页面。

有了流量视图，每次会话的持续时间真的很重要，这取决于你运行的网站的类型。例如，它将是内容生成网站的一个关键指标。

至于交通曲线，它们有助于确定高峰观众活动时间。因此，您将能够了解预计流量激增的时间，从而改进策略。

网站流量分析的好处

网站流量分析工具在帮助您个性化您的 B2B 战略以满足您客户的需求和了解更多关于您的行业竞争对手方面发挥着关键作用。

以下是使用这些工具的三大优势。

深入了解网站流量

网站流量分析揭示了在线流量的不同来源，让您能够确定哪种营销模式能够产生积极的业务成果。您还可以实时跟踪有机和赞助流量的进度。

改善用户体验

你的目标受众是你的利润来源。为了成功地推销你的产品或服务，深入了解你的目标客户是至关重要的。

网站流量分析工具可帮助您识别访问您网站的用户类型、他们的兴趣以及他们在您的网页上采取的每一项行动。因此，你会发现如何改善用户体验(UX ),并更清楚地了解你的网站表现如何。

考虑一下:你真的能接触到你的目标受众吗？他们在哪些页面停留的时间最长？你有没有什么未被发现的技术问题把用户赶走？你达到你的投资回报率目标了吗？你在多大程度上实现了你的转化目标？

流量分析工具还可以帮助你发现你是否在使用一个可信的网络主机，它不会对网页的可用性或加载时间产生负面影响，否则会破坏你的品牌形象。

提升搜索引擎优化排名

许多网站流量分析解决方案包括搜索引擎优化(SEO) 工具，用于提高您的网站在搜索引擎上的排名，尤其是谷歌。这些功能让你看到关键词如何影响你的搜索引擎优化，甚至你从社交媒体平台获得了多少流量。

借助这些检查器，你可以进行精确的修改，以提高你的搜索引擎优化状态，并在谷歌的第一页得到认可。

有效网站流量分析的 15 大工具

互联网上有大量功能强大的服务，你可以用来测量、跟踪和管理你的网站。为了节省您的时间和精力，我们编制了一份 15 大网站流量分析工具列表。

1. MyKinsta (MyKinsta Analytics)

The MyKinsta homepage.

由 Kinsta 内部开发的 MyKinsta dashboard 是市场上最简单的站点管理工具之一。

通过 MyKinsta，您几乎可以做任何事情——从基本的数据库搜索到使用服务器级 301 重定向、发布免费 SSL 证书、阻止 IP 地址、利用高级 DNS 管理等等。

为了本文的利益，我们将关注一下 MyKinsta 仪表板中的工具 MyKinsta Analytics 。

借助该工具，您可以获得大量与绩效相关的分析。首先，您可以单独或共同查看每个站点的统计数据，回顾窗口为 24 小时、一周和一个月。

MyKinsta Analytics 还为您提供了大量关于访问者资源使用情况、带宽以及按访问量或字节排列的热门请求的报告。性能监控报告涵盖不同方面，包括 MySQL 和 PHP 响应时间以及 AJAX 使用情况。

更重要的是,“分散”部分允许你比较你的网站来自桌面和移动设备的流量百分比。

此外，您还会在网站上收到对响应代码的详细分析。这些 HTTP 状态码的范围从 200 到 500。此外，您可以查看重定向总数、成功率、错误和错误率。该工具的“前 404”错误列表在这里特别有用。

最重要的是，所有由 Kinsta 托管的网站都免费补充了 Kinsta APM 工具。Kinsta APM 工具是一个强大的工具，用于对你的网站进行故障排除，并提高其页面加载速度。PHP 进程、外部 HTTP 调用、MySQL 数据库查询和站点上的其他活动都可以在 APM 工具中打上时间戳。

定价:

对于初创公司和企业，Kinsta 提供了多种定价选择。最小的捆绑包每月费用为 35 美元，最贵的为 1650 美元。

所有 Kinsta 套餐都有 30 天退款保证。

特性:

• 免费 APM 工具
• 资源使用跟踪
• 交通分析
• 站点和时间段过滤器
• 缓存分析
• 针对桌面与移动访问者、国家和请求的深入报告
• 全天候支持
• 免费 WordPress 迁移

2.塞姆拉什

Semrush features. (Image source: Semrush)

Semrush 于 2008 年推出，为在线企业提供一整套营销和精确的网站流量分析工具。

Semrush 通过向您提供完整的访问报告、会话持续时间和页面浏览量，帮助您测量您自己的在线流量和域名的性能。此外，您还可以分析移动流量与桌面流量的比率以及用户交互。

Semrush 还能让你检查竞争对手网站的表现。通过关键指标，如每月流量的增长，按国家的流量细分，以及领先的关键词，你会对你所在行业的其他公司的表现有一个透彻的了解。

因此，你将了解不同的成功营销策略和最新趋势。只需在搜索栏中键入 URL、域或关键字，就可以获得众多观点。

Semrush 还允许您浏览索引页面和反向链接列表，以及批量流量分析功能，以一次检查几个企业的流量。此外，它还提供了详细的解决方案，以优化您的网站的内容和搜索引擎优化的本地和全球搜索。

定价:

对于 Semrush 的三种价格水平，您可以选择按月或按年付款。Pro、Guru 和 Business 计划分别为 119.95 美元、229.95 美元和 449.95 美元。Pro 和 Guru 套装可在购买后的前 7 天免费试用。

Semrush 还提供了一个具有上限功能的永久免费帐户，这对初学者和初创公司来说是一个很好的选择。

特性:

• 域名、反向链接和关键词分析
• 最多可跟踪 5000 个关键词
• 移动排名
• 每月抓取多达 100 万个页面
• 链接建设、内容营销和社交媒体管理
• API 访问
• Google Looker Studio 集成

3.相似网络

The Similarweb homepage. (Image source: Similarweb)

Similarweb 是一个强大的数据平台，用于实时监控市场趋势和流量。它是成长型企业和大型企业的理想选择。利用这项服务的知名品牌包括 Booking.com 易贝、经济学人、百事可乐和沃尔玛。

Similarweb 最值得注意的一点是，它通过一个简单快捷的过程，帮助你全面了解网站上发生的一切，包括哪些位置为你带来了最多的流量。

这个网站流量分析检查器也给你一个详细的受众细分，让你看到其他网站的表现。你可以用它来分析你的访问者的兴趣，并审查转换分析报告，以产生更多的线索。

使用“推荐”功能，您可以检查您的分支机构，了解哪些网站将用户引向该网站，以及他们离开后最常去的地方。

最重要的是，Similarweb 为您提供了网站用于显示广告的出版商和赞助商链接的摘要。

定价:

SimilarWeb 的计划侧重于搜索、联盟营销和展示。还有一个企业产品包，其中包含了每一层中的所有可用功能。

您可以联系销售团队以获得准确的报价。还提供免费试用版和功能有限的免费版本。

特性:

• 对公司、应用、受众、转化和行业的分析
• 仪表板和 excel 导出
• API 访问
• 全球和国家级流量监控
• 展示广告
• 附属跟踪和搜索引擎优化工具

4.站点检查器

The Sitechecker homepage. (Image source: Sitechecker)

Sitechecker 是一个多功能的 SEO 分析解决方案，使您能够快速有效地跟踪您的网络资源营销战略的成功，以便您可以逐步提高绩效。

Sitechecker 的网站爬虫功能有助于发现——并立即解决——任何及所有技术性 SEO 错误，从而增加流量。为了帮助您维护一个健康的网站，Sitechecker 还允许您检查断开的链接，检查您网站的架构，并探索最佳的登录页面选项。此外，内置的关键字排名检查器可以让你验证你的域名的谷歌排名。

虽然 Sitechecker 主要专注于 SEO 优化，但它包括一个网站流量分析检查功能，可以显示各种渠道和时间范围的综合统计数据。

如果你正在寻找一个全面的技术搜索引擎优化审计工具，页面搜索引擎优化助推器，关键字跟踪器，那么 Sitechecker 值得一试。

定价:

Sitechecker 有四个可用的订阅级别；你可以按月或按年注册。企业的价格在 23 美元到 499 美元之间。

你也可以试用两天，如果你决定取消，可以得到全额退款。

特性:

• 直观且用户友好的界面
• 即时通知功能
• 附带 SEO 指标的 Chrome 扩展
• 白色标签报告
• 无限的流量，排名，和网页搜索引擎优化检查
• 每周和每月反向链接跟踪
• SERP 历史
• 多达 100，000 个关键词
• 移动排名跟踪

5.Serpstat

The Serpstat homepage. (Image source: Serpstat)

Serpstat 是另一个以 SEO 为中心的网站流量分析审计器，帮助企业和专业人士为他们的网站输送更多的有机流量。它帮助你自动化搜索引擎优化活动的每一步，每月节省你几个小时甚至几天的时间。

反向链接分析、URL 分析、排名跟踪和关键字研究是该工具最好的组成部分。此外，Serpstat 拥有超过 230 个 Google 数据库作为关键字数据源。

您可以使用 Serpstat 评估您的网站与 PPC 关键字排名的关系，通过关键字的点击率(CTR) 、可见性以及作为的有机流量和关键字排名来显示。这个在线工具在域名和 URL 级别都可以进行网站分析。

此外，Serpstat 还能让你了解竞争对手的搜索基础，以及他们网站的表现。因此，你将确切地知道如何提高你的游戏并保持竞争优势。

“信息图表”标签让你只需点击一下就可以从你的网站上提取所有的数据。此外，Serpstat 使过滤数据和定制视图变得容易。

定价:

Serpstat 有四个预设软件包(精简版、标准版、高级版和企业版)以及一个根据您的需求定制的软件包。Lite 计划每月花费 48 美元，而企业会员每月花费 349 美元。

也可以在有限的时间内免费试用。

特性:

• 成熟的搜索引擎优化分析工具
• 简洁的界面和易于使用的仪表盘
• API 访问
• 快速准确的现场审计
• 全面的可视化和分析报告
• 每天多达 12，000 次搜索
• 反向链接和排名跟踪器
• 多达 250 万页的审计

6.谷歌分析

The Google Analytics homepage. (Image source: Google Analytics)

你可能已经不止一次遇到过谷歌分析。毫无疑问，这是最强大的免费增值产品之一，受到成千上万用户的青睐。

您可以使用其广泛的报告来衡量您的网站流量，确定您最受欢迎的内容，并了解访问者和潜在客户如何使用您的网站进行转换。谷歌分析还允许你为谷歌广告的再营销和促销活动创建受众分群。

Google Analytics 还允许你在一个账户下管理多处房产。还可以通过一个仪表板查看不同站点的参数。该服务完全兼容广泛的平台和服务，包括。

由于其大量的功能和全面的图表，使用谷歌分析对新手来说可能是艰难的。这就是为什么许多初学者寻求更友好的替代品。

定价:

谷歌分析基本上对所有用户都是免费的。也就是说，有一个面向大公司的高级版本，叫做 Analytics 360。要得到准确的价格标签，你需要联系他们的销售团队。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

特性:

• 功能丰富的免费服务
• 与大多数网站兼容
• 全面的报告(如收购报告、受众报告、转化报告、实时跟踪)
• 漏斗分析
• 半定制仪表板

7.Ubersuggest

The Ubersuggest homepage. (Image source: Ubersuggest)

作为 Neil Patel 的创意，Ubersuggest 是一个负担得起的、完整的搜索引擎优化研究解决方案。它有一个广泛的建议关键词和内容库，以帮助初创企业获得高排名。

Ubersuggest 的关键词方面分为五大小节:概述、创意、流量、相似网站、内容创意。每个部分执行不同的任务，为您提供详细的统计数据，如搜索流量、SEO 难度、相关关键词、关键词排名结果等。

Ubersuggest 和我们列表中的其他工具一样，可以让你同时关注你的网站和对手的网站。此外，它还有一些有用的功能，如反向链接、排名跟踪和网站审计。

更重要的是，Ubersuggest 包括一个易于安装的 Chrome 扩展。这个配套的 SEO 插件在 Google 上运行得很好，显示了重要的 SEO 数据。

使用 Ubersuggest 时，您应该首先在用户仪表板上提交信息。之后，您将向仪表板添加网站、项目和有机关键词(取决于您的订阅)。

需要帮助吗？实时聊天和电子邮件可用！

定价:

Ubersuggest 的价格从每月 29 美元到 99 美元不等。所有的订阅都有 7 天的免费试用期。

也有一个免费的计划，允许你一天进行三次搜索。

特性:

• 负担得起的计划
• 丰富的搜索引擎优化工具
• 用户友好的仪表板
• 自助资源
• 社交媒体结果

8.Adobe Analytics

The Adobe Analytics homepage. (Image source: Adobe Analytics)

作为 Adobe 云市场的一部分， Adobe Analytics 是一款面向大型企业的专业实时网络分析服务。Adobe Analytics 的目标是捕捉网络活动，发现潜在客户，并解决问题。

高度灵活的数据工作台工具允许用户比较和识别从最广泛的图片到特定客户的所有级别的趋势，以及测量移动广告和视频的效率。它的设计还考虑到了线上和线下的客户互动。

预测分析是另一个强大的功能。使用人工智能技术和先进的统计模型，它分析游客数据，识别模式，并估计他们未来的行动。因此，分析师将能够更有效地使用大量数据，否则这些数据将会被浪费掉。

可扩展性和安全性，以及为访问者个性化报告的灵活性，是 Adobe Analytics 的其他顶级属性。

定价:

Adobe Analytics 的价格很高。这就是为什么我们不建议初学者或小企业主使用它。

它也没有免费版本。你可以联系他们的销售部门获取报价。

特性:

• 实时数据监控
• 预测分析
• 多渠道支持
• 复杂的细分
• 标签管理
• 跨设备分析
• 离线数据集成

9.轮毂点

The HubSpot homepage. (Image source: HubSpot)

HubSpot 是一个包罗万象的网站管理和营销平台，拥有超过 120，000 名用户，包括来自各个行业的自由职业者和 B2B 营销人员。

Hubspot CMS 为网站流量分析提供了强大的解决方案，如指标、营销、SEO 和管理——所有这些都可以轻松配置。使用分析工具，您可以检查您网站的流量数据，这些数据可以按来源、主题组、设备类型等细分。

您还可以更改流量报告的间隔和日期范围，保存或导出它，并使用指定的分析模块对数据进行排序。您选择的任何进一步筛选(如日期范围)将应用于原始数据表和图表显示。

HubSpot 的仪表盘非常详细，只需点击几下，就可以访问大量的监控选项。使用它的选项卡来分析跳出率、会话、访问者、页面浏览量、CTA 点击、推荐和提交率。

定价:

HubSpot 提供了一个免费的计划，里面有很多有用的工具，包括流量分析。它还销售三种高级套餐，价格从每月 23 美元起。

还提供 14 天的免费试用。

特性:

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

• 内置 CRM
• SEO 推荐主页
• 综合流量分析工具
• 适应测试
• 拖放编辑器
• 24/7 电话支持

10.Ahrefs

The Ahrefs homepage. (Image source: Ahrefs)

努力避免负面 SEO ？我们列表中的下一个工具可能非常适合你。

Ahrefs 是一个强大的 SEO 和网站流量分析检查工具，可以获得准确的流量和有机搜索洞察，以及反向链接检查和竞争对手分析。这种高效的工具被网飞、脸书、优步和金斯塔所使用。

Ahrefs 拥有一个友好的界面，允许你按年份、过去 30 天或所有时间对交通报告进行排序。只需向 Ahrefs 提供短语，它就会给你关键词建议，以及它们的难度，用于内容写作或营销。你甚至可以使用 Ahref 的搜索引擎优化审计工具进行技术调整，以改善搜索结果。

使用 Ahrefs 进行域分析同样简单。它可以针对整个域或特定域上的特定页面来完成。你将获得关于你的站点的 DR 分数、外部链接数量、每月访客总数、锚文本和域名流量值的详细报告。

定价:

Ahrefs 有四个等级(精简、标准、高级和企业)，每月价格从 99 美元到 999 美元不等。

没有免费试用，但您可以在 48 小时内要求退款。

特性:

• SEO 仪表板
• 等级跟踪器
• SEO 审计
• 领域比较
• 数据导出
• 关键词浏览器
• 领域分析

11.SE 排名

The SE Ranking homepage. (Image source: SE Ranking)

SE 排名不仅仅是一个网站流量分析服务，它还是一个集多种功能于一身的 SEO 工具。它可以让你轻松地研究关键词，跟踪排名，并检查来自世界各地的任何网站的流量。

该工具提供网站关键词在主要搜索引擎中的实时排名，你可以随时跟踪国家、城市或地区的排名。

另一个有用的内置功能是深入的网站审计工具，它可以发现任何页面问题，并建议修复它们的方法。这个审计工具是完全可定制的，这意味着您可以选择要监控的特定问题。

SE 排名提供的最重要的工具之一是搜索任何网站的能力，并立即获得该网站的总有机和付费每月流量的概述，加上该网站排名的关键字总数。当你从竞争对手的内容中寻找灵感时，这是很有用的:你会立刻知道哪些关键词是值得努力的。

定价:

SE 排名提供了三种主要计划:基本计划、专业计划和商业计划。这些软件包可根据排名检查的频率(每天、每三天或每周)和订阅期(每月、每季度、每半年、每 9 个月或每年)进行定制。

价格从每月 18.72 美元到每月 899 美元不等。SE 排名还授予基本计划 14 天的免费试用。

特性:

• 关键词排名跟踪器
• 反向链接检查器
• 网站审计工具
• 页面搜索引擎优化检查器
• 报表生成器
• 访客链接
• 铅发电机

12.网络 CEO

The WebCEO homepage. (Image source: WebCEO)

WebCEO 提供了一套 SEO 工具，面向需要共同管理多个项目的机构和个人。

与大多数竞争对手不同，WebCEO 不允许你直接搜索其他网站的流量数据。相反，你必须首先使用你的网站创建一个项目，然后使用一个叫做竞争对手指标的工具来分析这些相关网站的流量。

该平台使用 Alexa 拉数据，并提供你最接近的竞争对手的流量统计。这使你能够看到你的流量趋势随着时间的推移，随着排名位置和共享的关键字。

在众多的工具中，包括排名跟踪、关键词研究、技术审计、SEO 分析、内部链接、网站地图生成、流量分析等等。

定价:

WebCEO 提供四种不同的价格方案:单人、启动、无限代理和公司。对于任何计划，您都可以选择按月或按年计费(年度选项的月费用较低)。价格从每月 33 美元开始，到每月 299 美元。

WebCEO 也给你 14 天的免费试用期，包括试用所有工具的能力，不需要提供任何财务信息。

特性:

• 每周自动扫描
• 日常人工审计
• 多达无限个项目(代理无限计划)
• 多达无限的关键字(代理无限计划)
• 每个项目最多 20 个谷歌商业档案位置

13.鼠标流

The Mouseflow homepage. (Image source: Mouseflow)

Mouseflow 是一款行为分析工具，受到全球超过 190，000 名用户的信任和使用。

它最与众不同的功能是热图工具。这可以让你追踪访问者在整个网站的确切活动，甚至可以回放他们的导航路径，这样你就可以准确地知道在哪里可以实现改进和提高转化率..

您还可以为所有页面自动构建多达六种类型的热图，设置漏斗以确定访问者下降的位置和原因，使用表单分析改善您的线索生成，并通过反馈活动了解更多关于访问者的信息。

Mouseflow 被强烈推荐给 UX 专业人士、产品经理、数字营销人员、初创公司、小企业和企业。

定价:

Mouseflow 的定价方案由六个计划组成:免费、入门、增长、商业、专业和企业。第一个不仅仅是一个试用计划——它实际上是永远免费的。此外，大多数其他计划(除企业计划外)都有 14 天的免费试用期。

企业计划是完全可定制的，需要您联系销售人员以获得报价。对于其余的计划，您可以选择按月或按年计费，价格从每月 24 美元到 399 美元不等。

特性:

• 无限帐户用户
• 无限事件
• HTTPS/SSL/AJAX 支持
• 移动支持
• 数据下载/导出
• 文件和培训
• 可定制的仪表板
• 双因素认证
• 用户摩擦检测
• 20 多个即插即用集成

14.混合面板

The Mixpanel homepage. (Image source: Mixpanel)

与谷歌分析类似， Mixpanel 是一个专注于用户行为的工具，可以更好地帮助你更广泛地了解你的受众。该平台专为需要用户如何与给定网站或移动应用程序交互的详细数据的产品团队而构建。

Mixpanel 提供对用户组的报告和洞察，以及创建分段集群的能力，以查看每个用户组如何参与您的服务。

您还可以按单个公司按组跟踪用户。因此，您将能够确定客户最有可能转化的时间，以及追加销售的最佳可能性。

此外，Mixpanel 为团队提供了一个附加的数据治理工具，可以将重复的数据合并到一个日志中，并删除不相关的信息。该工具在视觉上令人瞠目结舌，但可能有点难以配置。

定价:

Mixpanel 除了两个高级包(增长和企业)之外，还为初创公司提供了一个免费计划。增长会员每月花费 25 美元，而企业订阅是基于定制的。

特性:

• 丰富的细分功能
• 流畅的视觉效果
• 可定制的计划
• 数据导入和导出
• 实时数据跟踪
• 高级分析
• 免费计划

15. SpyFu

The SpyFu homepage. (Image source: SpyFu)

从它的名字，你可能猜到了 SpyFu 是关于什么的:监视你的竞争对手。

SpyFu 专门从事域和关键字分析，但它也作为反向链接分析解决方案具有优势。这是一个很好的 SEO 和 PPC 选择，对于那些希望专注于关键基准的小企业来说，这将使他们以可承受的价格出现在 Google 搜索结果的第一页。该工具提供建议，以帮助您发展您的搜索引擎优化和谷歌广告活动。

此外，SpyFu 使您能够与值得信赖的联系人互动，以产生线索并建立有利可图的联系。此外，您可以使用它来进行广泛的竞价排名竞争对手的分析，检查他们收到多少点击，并下载您的对手的所有竞价排名关键字没有任何下载限制。

SpyFu 包括一个有用的功能，可以从目标网站收集联系信息，为您节省大量的手工工作。此外，您可以选择添加注释，并对每个潜在链接的重要性进行评级。

另一方面，你应该记住 SpyFu 不会抓取网站。如果你需要一个网站技术健康的详细分析，考虑让一个 SEO 爬虫与 SpyFu 配对。

定价:

SpyFu 有三种计划(基本、专业和团队)可以按月和按年订阅。每月价格从 39 美元到 299 美元不等，所有会员资格都包括 30 天退款保证。

特性:

• 非常适合竞争对手分析
• SEO 和 PPC 搜索功能
• 多达无限的搜索结果和数据导出
• 多达 40，000 个跟踪关键词排名
• 定制品牌报告
• 销售线索过滤器
• API 访问

摘要

现在我们已经到了指南的末尾，你可以看到有很多网站流量分析解决方案可以依赖。

Finding the best tool to measure your site traffic can be tricky because there are so many options available. 😅 These are the 15 best ✨Click to Tweet

如果你有应用程序，管理数据库或运行 WordPress 网站，MyKinsta Analytics 是一个很好的选择——特别是因为它包含在我们所有的 T2 应用程序托管计划中。

如果有机流量是你提高搜索排名的重中之重，Ahrefs 或 Semrush 是提供高质量 SEO 功能的绝佳选择。

你更在乎付费流量吗？然后选择一个围绕付费广告的工具，比如 Similarweb。

请记住，无论你使用什么工具来跟踪用户流量和行为，快速评估从中获得的信息并为你的网站制定行动计划是至关重要的。这样，你就一定能在竞争中保持领先。

我们是否遗漏了另一个重要的网络分析工具？请在下面的评论区告诉我们。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

网站可用性测试的最终分步指南

原文：https://kinsta.com/blog/website-usability-testing/

16.2%的高科技公司将他们的重点转向客户参与。15.5%的人计划增加投资以改善客户体验。这告诉你什么？

这告诉你，用户体验正在离开设计师的领域，成为任何在线业务的支柱，无论它们是全新的还是已经上市多年的。这可能就是为什么如此多的知名公司转向可用性测试来找出问题并改进他们的产品和网站。

• 销售黑客利用用户反馈提高参与度，培养忠诚度，并根据用户提供的见解改进他们的内容策略。
• 在线体育博彩运营商 Stan James(现在的 Unibet)利用可用性测试的结果将他们的转换率从每月 1.5%提高到 3%。
• 成功的例子不胜枚举。请随意查看更多案例研究。

所以，如果你还没有坐上可用性的列车，是时候上车了。在本指南中，我们将带你一步步了解进行网站可用性测试所需的一切。

• 步骤 1:确定指标并创建任务分析
• 步骤 2:确定最佳测试类型
• 第三步:找到有效的参与者
• 第四步:决定时间、地点和人物
• 第五步:冲洗并重复

步骤 1:确定度量标准并创建任务分析

首先，你需要弄清楚你的度量标准。可用性测试可以发现一大堆问题，但是如果它不是为了确定具体的度量标准，它就不会是对你的时间或者金钱的有效利用。

可用性测试通常有三个公认的指标:

• 效率
• 有效性
• 满意

以下是这些指标通常包含的内容的快速分类:

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

Measuring usability (Image source: Jan Moon’s SlideShare presentation)

虽然从表面上看，这三种方法似乎很简单，但它们都是各自嵌套的问题，没有通用的答案。

• 用户的目标是什么？
• 必须采取什么步骤来实现这些目标？
• 如何衡量付出的努力？

幸运的是，有一种简单的方法可以回答这些问题，那就是构建所谓的任务分析。任务分析之所以流行，是因为它允许你直接测量可用性中最流行的两个指标:任务完成率和任务时间。

Task analysis (Image source: Loop11)

它是这样工作的。你从一个总体目标开始。在下面的例子中，目标是每天服药。

Example of hierarchical task analysis (Image source: Lilly Browne)

然后你将目标分解成完成目标所需的步骤。这些也称为子任务。没有一步是太小的。

完成后，你就有了一个用户完成目标的路径的理论图。然后，您可以使用您的任务分析来设置基线有效性和效率指标。让我们试着自己做一个。

首先，前往 Lucidchart 。点击屏幕右上角或中间的“免费注册”按钮注册一个帐户。您将被带到此页面，并有机会开始试用。现在，向下滚动，直到你看到蓝色的“开始免费帐户”按钮，并选择它。

Lucidchart sign up

完成注册后，您将来到这个仪表板屏幕。有许多模板可供选择，但是对于任务分析来说，从流程图开始通常是最容易的。选择第二个选项来查看可用的流程图模板。

Lucidchart flowchart

选择第一个选项，“空白图”

Lucidchart blank diagram

下一页将以空白画布为特色。使用左侧面板添加形状。如果您不确定要使用哪个形状，请将鼠标悬停在选项上，直到看到弹出窗口。

在大多数情况下，任务分析仅使用正方形(流程)和菱形(决策)形状，但是当您构建更复杂的任务流时，查看其他形状可能会很有用。

Lucidchart process

开始放下形状来建立你的任务。这里，我们从构建本演练的简单任务流开始。若要添加文本，请双击形状边界内的某个位置并开始键入。

当您准备好连接形状时，单击边上的白色圆圈，并将鼠标拖到下一个形状上。如果是菱形(决定)三角形，它会自动在你的行中添加“是”和“否”。

Yes or no in a flowchart

请注意，如果您需要移动形状，线条会自动重新定位以保持连接，因此在构建图表时不要害怕重新组织图表。

如果您想要更改颜色、字体、笔画、箭头样式或线条，请使用上面突出显示的顶部面板。

Flowchart fonts and colors

建立任务流后，进入“文件”查看共享和下载选项。您可以导出带有透明背景的任务流，作为矢量图形( SVG )或 PDF，以及其他选项。

Flowchart download as vector

现在你知道了！当进行测试和设置度量时，您现在有一个任务分析可以使用。一旦你真的进入测试，你可能会修改你的任务分析，但是至少提前两到三个任务可以让你指导你的可用性测试。

Task analysis flowchart

在你完成任务之后，是时候为你的网站找出最佳的测试类型了。

步骤 2:确定最佳测试类型

可用性测试可以采取多种形式，在难度和投资要求方面也有所不同。什么类型的测试最适合你的网站取决于你在第一步中建立的标准和任务。

下面，我们将介绍三种常见的可用性测试，以及它们的用途，还有一些荣誉。

1.卡片分类

到目前为止，卡片分类是最简单、最快速的可用性测试，是对网站架构的一种工具性测试。

Card sort (Image source: cary-anne olsen-landis)

如果你记得玩过纸牌匹配游戏，纸牌的分类是相似的。它是这样工作的。卡片分类可以是“开放的”，在这种情况下，用户创建他们的分类来将卡片分类为“封闭的”，在这种情况下，所有的分类都是预定义的和不灵活的。或者，如上图所示，卡片分类可以是“混合”的，用户可以自由添加自己的类别，也可以使用预定义的类别。

用户将剩下的卡片，通常是单个网页或流程中的步骤，按照最符合他们心智模型的类别进行排序。大多数专家建议坚持使用 30 到 60 张卡片。执行卡片排序对于观察用户的心理模型如何匹配你的网站的架构和任务流程是非常好的。它可以在测试过程的早期揭示任何重要的问题，就像对 Pottery Barn 的重新设计所做的那样(如下所示)。

Card sort example in a redesign (Image source: John Wood Quartana)

您可以远程或亲自进行卡片分类。使用卡片分类测试的最大好处是测试进行的速度，尽管分析阶段本身可能很耗时。

然而，因为卡片分类只允许有限的用户干预和反馈，所以对于那些想要测试网站满意度或有效性的人来说，不应该考虑它们。相反，卡片分类应该被认为是效率的第一线测试，而其他指标似乎更适合留给更健壮的可用性测试类型，例如现场研究。

2.实地研究

可用性测试的实地研究就像它听起来的那样。你去你的用户的自然使用栖息地——他们最有可能使用你的网站的地方——让他们在半结构化访谈中一边看着屏幕，一边向你介绍他们的流程。

这项研究也被称为背景调查。

Contextual Inquiry (Image source: Philip Adeoye)

别担心，盯着别人肩膀看的尴尬很快就会消失。😉

实地研究比卡片分类更耗费时间，但它们是测试任务和获得直接用户反馈的理想选择。对于那些想要深入挖掘可用性问题的人来说，实地研究是一条可以走的路。情境查询是用户体验设计工作室 MELEWI 为企业或“有限用户”产品部署的第一个策略。

梅勒维的 UX 设计顾问阿维克·甘古利解释道:

MELEWI 上下文查询 Sprint 旨在直接嵌入用户的上下文:观察参与者做了什么，他们差点做了什么，以及他们没有做什么。

在下面的可用性研究中，你可以看到 MELEWI 是如何分类和解释嵌入的好处的。

Contextual side (Image source: RealtimeBlog)

请注意，现场研究可以远程进行，但往往会失去数据的丰富性。美国政府数字服务机构 18F 的 Nicole Fenton 和 Jamie Albrecht 强调了这一点:

…例如，当你能在人们典型的物理环境中观察他们时，背景调查是最有价值的。不要错过你的用户和同事之间的面对面的时间。

3.眼球追踪

如果你曾经看过一个网站的热图，你应该已经熟悉了眼球追踪测试的结果。

Heatmap analysis (Image source: MockingFish)

眼球追踪研究用于确定用户在页面上看着的地方以及以什么顺序看。热图的颜色越深，用户花在屏幕上的时间就越多。

这使得眼球追踪非常有助于确定用户何时何地离开你的网站。当内容不相关时，它也会突出显示，就像电子商务网站 Pronto 一样。

Eye-tracking (Shopify)

通过揭示 Pronto 用户最关心的领域，眼球追踪研究使 Pronto 重新设计了一个主页，其领先优势增加了 24%，点击率增加了 17%。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

与之前的测试一样，眼球追踪可以通过专业设备亲自完成，也可以通过网络摄像头远程完成。然而，远程测试并非没有缺陷。

以下是使用网络摄像头进行眼球追踪的利弊:

Pros and cons of webcam-based eye tracking (Image source: iMotions)

这种类型的可用性测试不像用户满意度的实地研究那样有价值，但可以产生丰富的效率和有效性数据。它还可以通过突出用户眼睛跳过或错过的地方来帮助指出导航问题，本质上是通过用户眼睛的透镜来放置你的网站。根据反馈，你可以改进你的设计，网站结构，网站导航，行动号召等等。

荣誉提名

卡片分类、实地研究和眼球追踪并不是游戏中唯一的可用性测试。

焦点小组、 A/B 测试和调查都是可行的用户测试形式，可以奖励反馈，但不应该在任何重大重新设计中考虑。

现在，在为你的目标确定了最好的测试类型后，你必须找到测试的人。你可能会惊讶你需要多少。

步骤 3:寻找有效的参与者

你需要多少用户来进行可用性测试？行业标准在五左右。根据 UserTesting 的一项调查，33%的公司招聘 5 名或更少的用户，41%的公司招聘 6 到 10 名用户。

Users per usability study (Image source: UserTesting)

为你的可用性测试寻找用户的关键是确保他们是真实用户的有效近似。不验证您独特的用户群的设计变更可能会有一些严重的影响。这是 Icons8 背后的设计师在推出重新设计和失去近一半用户后发现的。

这也是为什么在 Kinsta，我们将用户反馈作为重新设计过程的一个直接部分。

也就是说，对于测试的目标来说，寻找有代表性的用户有时太费时间或者太昂贵。在这些情况下，内部测试人员会很有用。这种被称为“狗食”的测试方法让《波士顿环球报》获得了关于新导航功能的有价值的定性反馈。看看这个:

Qualitative feedback (Image source: UXpin)

所以，内部测试肯定有它的用处，但是只有当你对快速反馈的需求超过对外部有效性的关注时。对于既奖励定量数据又奖励定性数据的有效测试，您需要用户尽可能地接近您自己的用户。

接触这些用户的一个潜在方法是通过快速调查发送到你的企业的电子邮件列表来筛选潜在的参与者。如果你将调查与激励措施结合起来，即使没有彩票之类的保证，你的参与率也会上升，你会有一群真正的用户来测试你的产品。

盖洛普研究发现，即使只是 5 美元的奖励也能大大提高你的参与率。

Web survey response rates (Image source: Marketing Charts)

你可以使用像 SurveyMonkey 和 Google Forms 这样的调查平台，或者如果你使用的是 WordPress 网站，你可以使用表单生成器从潜在参与者那里获取信息。我们是 Hotjar 的忠实粉丝，并在 Kinsta 使用它。

也就是说，有很多原因导致真正的网站用户不可行。为此，你可以在付费平台上花很少的费用获得代理用户。让我们来看看其中的一些。

用户测试

被设计行业内外的一些大牌所使用， UserTesting 为可用性专家、营销人员、企业主、游戏开发者等提供了一个测试平台。

这款测试平台功能强大，可以将您与用户代理连接起来，并在短短两个小时内交付结果。请注意，这是您可以安排现场测试的唯一平台之一。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

UserTesting

用户分析

谷歌使用的 Userlytics 是另一个稳健的平台，价格适中，质量无与伦比。通过提供录制的视频，Userlytics 的测试面板拥有超过 200，000 名用户，轻松找到理想的用户代理。

使 Userlytics 区别于竞争对手的是它的可定制性范围。独特地提供分支逻辑，通过 Userlytics 的测试可以被结构化以执行多个不同的任务流。

Userlytics

现在，是时候运行您的测试了——这意味着是时候决定在哪里、什么时候以及谁将参与其中了。

第四步:决定时间、地点和对象

这一步可以喘口气了:最难的部分已经过去了。从这里开始，您只需要在执行测试之前再做一些决定。这些决定是:

• 远程还是亲自？
• 节制的还是不节制的？

查看它在行业中是如何分解的:

Usability testing (Image source: UserTesting)

正如你所看到的，远程和适度测试在整个行业中被均匀地使用，尽管适度测试正在减少。如果您从上一节提到的平台中获取您的用户测试人员，这些决定已经为您做出了，您可以跳到第五步。

如果不是，让我们回顾一下:什么是适度测试，为什么要使用它？

主持式测试指的是让主持人或测试人员在场，回答问题并指导用户。这将更多的控制放在您的手中，但是对于测试人员和用户来说都增加了重大的逻辑挑战，尤其是如果您亲自进行测试的话。

因为主持可用性测试是它自己的艺术形式，主持测试最好由可用性专家来执行，如下图所示。

Usability specialist (Image source: Graphic Mint)

通常，只有在不完整的接口或安全性是主要考虑因素的情况下，才需要进行适度测试。另一方面，非自主测试更加灵活，因为用户只需要在方便的时候登录并执行指定的任务。

请注意，远程测试可以是有节制的，也可以是无节制的，这取决于您的平台和目标。

对于面对面的测试，一个由指定的可用性实验室或者用户的自然环境(正如我们在实地研究中看到的)是避免人为条件的理想选择。

使用以下免费平台进行远程测试:

网络电话

如果你还记得我们之前章节中的 MELEWI， Skype 是他们远程可用性测试的首选工具。 Skype 最大的好处是用户熟悉度和原生的屏幕共享。然而，这个平台的缺点是缺乏内置的屏幕录制。

Skype

谷歌视频

任何拥有谷歌账户的用户都可以使用， Google Hangouts 是另一个具有屏幕共享功能的免费平台。然而，只有某些类型的谷歌工作空间账户可以本地录制视频。与 Skype 相比，Hangouts 的优势在于用户的偏好以及用户更喜欢什么。两者的功能相似，如果你没有 Google Workspace 企业帐户，还需要一个屏幕录制器。

Google Hangouts

一款云视频会议软件

完成我们的远程可用性测试平台列表的是 Zoom 。与 Skype 或 Hangouts 相比，这个平台有一个显著的优势:它提供原生屏幕和视频录制。事实上，我们在金斯塔使用变焦。

然而，它也有一个很大的缺点。如果您的视频会议涉及多个其他用户，免费账户有 40 分钟的时间限制。

Zoom

请注意，您应该尽可能地记录测试。你需要这些录音来和你的团队一起回顾这些发现，并且它们有助于保持对人的关注，而不是数据，在你的可用性测试的中心。

到了我们最后一步的时候了:迭代。

第五步:冲洗并重复

迭代测试是伟大可用性的关键，尽管对于它在创新中的作用还有一些争论。迭代在设计环境中意味着什么？这意味着你的过程永远不会结束:在创建了一个网站之后，你不断地测试、调整和在那个网站上无休止地改进。

Iterative and Cyclical (Image source: Sean Van Tyne)

所以，一旦你已经进行了测试并收集了结果，是时候回顾、实施并再从头开始了。数字咨询公司 Enginess 很好地阐释了迭代设计的价值:

…一个活生生的项目，你应该在进行过程中定期调整和改进，而不是一蹴而就，一劳永逸。

记住这一点，根据你收集的数据类型和你最初的目标，你如何回顾和实现可用性测试的结果将会有很大的不同。与化学实验室不同，可用性测试倾向于奖励定量(“硬”)和定性(“软”)数据的混合体。

它们都很重要。它们的使用方式会因项目和网站的不同而不同。也就是说，定性数据往往对数据可视化最友好。最流行的可视化模式之一是通过旅行地图。

Journey map (Image source: Sailthru)

旅程图提供了用户测试人员在你的网站上的整个旅程中所采取的不同步骤的可视化概述。如果做得好，它包括情感参数以及可用性问题，但就像你的审查过程一样，最终将由你进行的测试类型决定。

旅程图在可用性测试结束时特别有用，因为它们有助于揭示隐藏的洞察力。在创建一些旅程图之后，趋势开始变得更加明显，潜在的改进区域也更容易可视化。

另外，在团队成员之间共享统一的信息使得迭代过程更加容易。那么，你还在等什么？回到第一步，继续提高你网站的可用性。天空是无限的。

摘要

可用性测试对于任何在线业务来说都是绝对必要的，但这是一个广阔的领域。可用性测试的三个标准是满意度、效率和有效性。这些指标中哪一个对你最重要，将决定你的网站运行的可用性测试的最佳类型。

在您缩小了最适合您需求的测试类型后，是时候寻找有效的参与者了。如果可以的话，避免内部测试，如果你自己的客户不是一个可行的解决方案，寻找相近的代理。接下来，在有节制和无节制之间做出选择，然后在远程测试和现场测试之间做出选择。每一种都有自己的用途和限制，所以要仔细考虑你的选择。

一旦你的可用性测试结束，回头看看结果，看看你的网站需要什么样的改变。然后实现那些改变，并从头再来:迭代是“meh”可用性和令人难堪的可用性明星之间的区别。

下一次，当你考虑重新设计或者想改善用户体验时，请回头参考本指南，了解网站可用性测试的最终步骤。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何从 Weebly 迁移到 WordPress(完全指南)

原文：https://kinsta.com/blog/weebly-to-wordpress/

Weebly 是许多网站建设者之一，当人们考虑发布他们的网站时，他们可能会考虑。为什么？它提供了一个免费的计划。然而，如果你已经超出了基本设置的范围，并且不想升级 Weebly 计划，该怎么办呢？在这种情况下，你最好的选择之一就是从 Weebly 迁移到 WordPress。

在这个循序渐进的指南中，我们将带你完成你需要做的事情，成功地将你现有的网站从 Weebly 迁移到新的 WordPress 网站。

在我们进行实际的迁移步骤之前，让我们看一下为了使迁移过程尽可能顺利和容易，需要做的几件事情。从获得域名和托管到为迁移过程设置 WordPress，我们为您提供服务。

T3】

从 Weebly 到 WordPress:迁移先决条件

我们知道你渴望并准备将你的网站从 Weebly 转移到 WordPress。在这发生之前，让我们回顾一下在开始实际的网站迁移过程之前你应该已经注意的一些事情。

从一个 CMS到另一个 CMS 并不总是容易的。Weebly 和 WordPress 尤其如此。当我们为你安排步骤时，某些事情必须事先考虑。

也许要记住的最重要的事情是 Weebly 和 WordPress 之间的主要区别。

Weebly 于 2018 年被 Square 收购，它不是一个开源系统。这是一个专有的拖放网站建设者，给人们一切他们需要立即开始建立一个网站，并让它上线。

虽然这一切都很好，但人们往往会超越 Weebly 设置，因为他们想要更多的自由和控制他们在网站上能做什么和不能做什么。

WordPress 正是为此而构建的。WordPress 是一个开源系统，在控制和灵活性方面给了用户大量的选择。

有了 WordPress，用户可以定制(几乎)任何东西，包括底层源代码、主题，以及功能性(通过插件)，这允许了很大的自由度。

既然我们已经强调了两个平台之间的核心区别，让我们来看看你需要执行的具体操作，以确保你从 Weebly 到新 WordPress 网站的迁移顺利进行。

准备好出发了吗？这篇文章让你了解了这一过程的每一步💪 点击推文

注册域名

如果你从 Weebly 这样的平台转向 WordPress，你可能需要注册并购买一个域名。由于 Weebly 有一个免费计划，在那里建立网站的用户有一个看起来像这样的 URL:

mysite.weebly.com

现在，情况并不总是这样。因此，如果你已经有了自己的域名，请随意跳到下一部分。

有几个好的域名注册商可以从中选择。你需要考虑定价和可用的 T2 TLD(顶级域名)名称 T3 等问题。

购买域名是将你的网站从 Weebly 迁移到 WordPress 的第一步。我们的深入指南涵盖了如何选择最好的域名注册商，可以让你更详细地了解这一过程。

购买主机

现在你已经有了一个域名，是时候购买虚拟主机了，这样你就可以让你的新 WordPress 站点正常运行了。同样，你需要在你的域名上安装一个新的 WordPress 来启动和运行你的 WordPress 站点，这样你才能正确地执行迁移。

有不同类型的托管可用。然而，我们建议用管理 WordPress 主机,原因有很多。

我们的 Kinsta 主机平台是一个很好的选择，它可以让你访问所有的 WordPress 主机特性和工具，你可以轻松地在 WordPress 中建立一个网站，并准备好执行从 Weebly 到 WordPress 的迁移。

安装和设置 WordPress

有几种不同的方法可以在你选择的域名上安装 WordPress 并让它正常运行。你安装它的方式可能基于你选择的主机平台。

如果你在一个使用 cPanel 的主机提供商那里，那么在那里设置 WordPress 并不困难。有一个一键式安装过程，但有一些细节需要填写和选项需要考虑。非技术用户可能会遇到一些问题。

迈金斯塔

另一方面，我们有 MyKinsta ，这是我们定制设计的仪表板，通过添加一些信息并使用可用的一键操作，就可以安装 WordPress。

使用 MyKinsta 安装 WordPress。

将 Weebly 网站迁移到 WordPress 的 3 种方法

现在，您已经准备好执行迁移了。将你的网站从 Weebly 迁移到 WordPress 有三种主要方式。其中包括:

1. 手动迁移(免费 DIY)
2. 自动迁移(免费和付费插件)
3. 外包迁移(付费)

让我们一起回顾一下这三种方法。

手动迁移

手动将 Weebly 网站迁移到 WordPress 并不是一件困难的事情。实际上，这可能是你想要的方式，因为这是最简单的过程。你所要做的就是将内容从一个地方复制粘贴到另一个地方。

手动迁移最吸引人的地方在于，您可以确保每一部分内容都能以您想要的方式正确迁移。

这里要考虑的一件事是你目前在 Weebly 上的站点的大小。手动迁移有点耗时，因此如果您有一个大型站点，使用自动化方法或外包方法可能是一个好主意，这两种方法我们将在下面介绍。

步骤 1:在 WordPress 中创建页面和文章

在你开始从 Weebly 复制粘贴内容到 WordPress 之前，如果你先创建页面和帖子，会有助于这个过程进行得更快。

这加快了这个过程，因为你不需要创建页面和文章。

有几种方法可以做到这一点；你可以一个接一个地手动创建页面和文章，或者你可以使用一个叫做批量页面创建器的插件来更快地批量创建页面。

如果你真的想使用这个插件，那么继续在你的 WordPress 网站上安装并激活它。

一旦插件被激活，进入设置，然后点击批量页面创建器标签。

批量页面创建者插件选项。

点击多页模式复选框，然后输入你想要创建的每个页面的名称，并用逗号分隔。

例子: test1，test2，test3 等。逗号和页面标题之间不要留有任何空格。

在这个过程中，您可能还想使用另一个插件。快速批量发布&页面创建器插件允许你做与批量页面创建器完全相同的事情，除了它扩展到帖子、媒体、层级等等。

一旦你安装了这个插件，点击工具，然后选择快速帖子创建器标签。

快速批量发布&页面创建器插件。

一旦进入插件选项页面，你会看到这个插件提供了更多的功能。然而，我们想用它来创建批量发布。你可以看到我们在一些帖子例子中写道。

继续创建您需要的文章标题，使用选项设置您喜欢的配置，然后当您准备好创建文章时，单击页面底部的批量插入按钮。

快速批量发布&页面创建器插件选项。

当您这样做时，您可以转到仪表板的帖子部分，看到相关的帖子已经被创建。

相关岗位被创建。

重要的

快速批量发布&页面创建插件已经有一段时间没有更新了。然而，正如你在上面看到的，我们确实测试了它，它仍然可以完美地添加大量文章和页面。

步骤 2:从 Weebly 复制内容并粘贴到 WordPress

现在你已经在 WordPress 中创建了所有相关的页面和文章，是时候开始从你的 Weebly 站点复制内容并粘贴到你的新站点上正确的文章或页面上了。

这需要多长时间？嗯，这个要看你要带过来的内容量。就是这样！手动过程非常简单，但可能非常耗时。

还应该注意的是，你当然会想把所有相关的图片从 Weebly 带到 WordPress。

要做到这一点，你需要直接从你的 Weebly 网站保存图片，然后手动上传到 WordPress 媒体库。

一旦图像在你的库中，你可以简单地把它们放在正确的页面或文章中。

不要忘记修改任何内部链接，以便它们指向你的新 WordPress 站点的正确位置。

你可以为来自 Weebly 站点的每个帖子和页面手动设置，或者如果 Weebly 上的旧 URL 和 WordPress 上的新 URL 设置了特定的模式，你也可以选择使用 regex 选项。

自动化迁移

从 Weebly 到 WordPress 网站的自动化迁移可能会很好，因为你可以摆脱更多的手动复制和粘贴程序。然而，经常使用插件来移动这样的内容可能会让您在导入完成后需要整理一些东西。

还有一个问题是找到合适的插件，在一个地方给你所有必要的工具。

有很多插件选项可以帮助你完成这个过程。问题是其中许多都很旧了，有一段时间没有更新了。这是真的，他们中的大多数仍然工作，但对于文章的这一部分，我们想找到一些既免费又最新的东西。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

为此，我们将使用 Feedzy RSS 聚合器插件。这个插件不仅提供了一个可靠的方法来帮助你自动化 Weebly 到 WordPress 的迁移过程，而且他们也有一个高级版本的插件。

Feedzy RSS 聚合器插件。

应该注意的是，我们使用这个插件的免费版本来执行 posts 迁移过程。如果你想要更多的功能，那么请随意使用高级版本，看看它是否能提供你需要的东西。

让我们用这种更自动化的方法把你的网站从 Weebly 转移到 WordPress。

步骤 1:安装并激活 Feedzy 插件

在你的 WordPress 仪表盘中，点击插件，然后添加新插件，进入插件安装区。这将把你带到需要搜索 Feedzy 插件的地方。

继续使用可用的搜索字段搜索 Feedzy。当你看到它，安装并激活它的权利，从您的仪表板。

为 Feedzy 搜索插件库。

既然插件已经安装并激活，您就可以使用它提供的功能了。我们要做的是用它来抓取你的 Weebly 网站 RSS 订阅源，并使用该订阅源在你的新 WordPress 站点上创建帖子。

第二步:找到“导入文章”标签

激活 Feedzy 后，在你的 WordPress 仪表盘中找到主标签并点击它。从那里，你需要点击 Import Posts 标签来创建一个新的导入，并从你的 Weebly 站点获取文章。

找到【导入帖子】标签页。

进入该部分后，点击页面顶部的新导入按钮。这将带你到 Feedzy 的主要配置选项，并允许你导入 RSS 提要到你的网站。

点击【新建导入】按钮。

步骤 3:从 Weebly 导入文章到 WordPress

此时，您已经到达了插件的主导入页面。你将使用这个页面直接从 Weebly 导入 feeds 到你的新 WordPress 网站。

继续为您的导入命名。该名称可以是与提要相关的任何名称，也可以是您想要的任何名称。请记住，如果需要，您可以一次引入多个提要。

您希望将 Weebly 站点的提要 URL 直接放入标记为“Source”的字段中。如果您想知道 Weebly feed 的 URL 到底是什么，它通常是以下之一:

• https://yourdomain.com/1/feed
• https://yourdomain.com/feed
• https://yourdomain.com/rss

在那里，填写你认为合适的设置和配置。请记住，不是每个提要设置看起来都一样。您如何完成这部分过程在很大程度上取决于您的配置。

这是你将要看到的布局。您可以看到有些选项不可用，因为它们只是高级版的一部分。

命名您的导入并填写 RSS 源。

您可以继续向下滚动并分配更多元素。

与我们世界一流的支持团队一起体验卓越的 WordPress 托管支持！与支持我们财富 500 强客户的同一个团队聊天。查看我们的计划

赋予更多的元素。

当您按照自己的意愿填写完所有选项后，就可以点击页面右下角的保存并激活按钮了。

这将自动导入提要，并带您回到“Import Posts”部分。

在这里，您将看到从您选择的提要中找到并导入了什么。

查看您的导入。

步骤 4:导入页面和图像

和手工方法一样，从 Weebly 导出页面和图片到 WordPress 的方式也不同，因为页面不包含在 RSS 提要中。

这里有几个选项，取决于你的页数。你可以使用我们上面谈到的复制粘贴方法来完成你的页面，或者你可以使用几个不同的插件来完成这个任务。

如果您需要使用插件方法，请访问您的 Weebly 网站并将页面导出为 HTML 文件。你也可以请求他们的支持来帮你做这件事，尽管你可能要等几天才能得到回复。

一旦你有了 HTML 格式的页面，你就可以使用像 HTML Import 这样的插件将这些页面文件导入你的 WordPress 站点。

你可以随意手动保存这些图片，然后上传到你的 WordPress 媒体库中。

您还可以通过 FTP 或 SFTP 批量上传文件。如果你熟悉这个选项，会节省一些时间。

重要的

Kinsta 只使用 SFTP，但其他一些主机仍然使用 FTP。点击了解主要差异。

将 Weebly 外包给 WordPress 迁移

还有一种方法可以轻松地从 Weebly 迁移到 WordPress，几乎没有任何麻烦。如果你有兴趣外包项目，那么这是一个很好的方法。

有几个网站提供优秀的 Weebly to WordPress 迁移服务。这允许你输入一些信息，然后坐下来让他们帮你处理。

我们有两个很好的建议给你。

CMS2CMS

CMS2CMS 是一个自动化的服务，让你能够从任何平台迁移到 WordPress。

CMS2CMS。

它们提供了一个轻松、流畅、完全自动化的过程。尽管这是一项高级服务，但它提供了免费的演示迁移，可以传输有限的内容。这样，您就可以确切地看到它是如何工作的，以及这个过程有多简单

CMS2CMS 还提供了一个免费的迁移计算器，您可以相当快速地填写并通过几次点击获得迁移成本。

CMS2CMS 迁移计算器。

如果你想免费尝试有限的过程，那么在他们的网站上注册一个账户，通过他们的一步一步的过程，看看它是否适合你。

单词爱好者

将 Weebly 外包给 WordPress 站点迁移的另一个好选择是wordheed。

他们提供全方位的迁移服务，允许你从任何平台直接迁移到 WordPress。

不管你的网站是大是小。WordHerd 与从小企业网站到大公司的所有人合作。

要开始免费报价 Weebly 到 WordPress 的迁移，访问他们的网站并填写“免费报价”表格。

尽管我们喜欢自己动手，但有时(根据具体情况)简单地外包迁移可能会更好。是的，你会付出一些，但这是一个有保证的过程，可以让你设置和运行比手动和自动过程更快。

迁移后

无论您选择哪种方法，在迁移过程完成后，都有一些事情需要考虑。

主题和插件

WordPress 有适合任何利基市场的主题，所以去挑选一个用在你的新网站上。你可以安装和定制你想要的。这些主题使设计变得更加容易，并且非常用户友好。是的，可能会有一个轻微的学习曲线，但在你经历了一些事情后，你应该没有问题建立和设计你的新网站。

反过来，WordPress 也有一个庞大的插件库。你可以下载并安装任何插件来扩展你网站的功能。一定要包括现有的最好的 WordPress 插件，因为这些将有助于增强你的网站。

永久链接

确保你的永久链接结构是你想要的也很重要。你可以在你的 WordPress 仪表盘中访问永久链接，并设置成你想要的样子。

我们知道在使用 WordPress 永久链接时需要考虑很多事情，所以这本WordPress 永久链接终极指南会有所帮助。

指向您的 DNS

最后但同样重要的是，如果你还没有这样做，你的最后一项任务是将网站 DNS 从 Weebly 转移到你的托管平台上。 Kinsta 让这个过程变得简单。

一旦这样做了，你就有机会马上把网站推出来，或者在推出之前，在一个临时环境上工作，让网站达到你想要的位置。

当你的基本 Weebly 设置已经无法满足你的需求，又不想升级你的计划时，会发生什么？👀你当然会迁移到 WordPress！😄

摘要

将一个网站从 Weebly 迁移到 WordPress 并不一定是一个过于复杂的过程。然而，根据内容的数量以及你可以使用的插件和工具，这可能是一个更加紧张的过程。

这就是为什么我们提供了三种方法来执行这个过程。因此，在手动、自动和外包选项之间，您应该能够找到适合您的方法。

你更喜欢用哪种方式将你的网站从 Weebly 迁移到 WordPress？请在评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

Weebly vs WordPress:哪个最适合你的网站？(2022 年全对比)

原文：https://kinsta.com/blog/weebly-vs-wordpress/

这些天来，当涉及到为你的企业创建一个网站的挑战时，我们被赋予了一种尴尬的财富。当然，这是一个很大的问题，但它仍然是一个问题。当您考虑到需要保持在您的预算之内、匹配您的技能水平，并与您的业务目标和需求保持一致时，这一挑战可能会变成一项非常复杂的任务，尤其是对于那些不以编程为职业或业余爱好的人来说。

在这种情况下，大多数人考虑的两个顶级策略是 DIY 解决方案，主要是自托管 WordPress ，以及简单、全包的网站建设者，如 Weebly。

哪个适合你取决于什么对你来说是重要的。

在这篇 Kinsta 评论中，我们将根据几个关键因素来比较这两个平台——Weebly 和 WordPress，从用户友好性到 SEO 工具等等，来帮助你为你的企业或个人网站做出正确的决定。

在我们开始之前有一点需要注意:当我们在本文中提到 WordPress 时，我们指的是你可以从 WordPress.org 下载并上传到你的托管公司的服务器上的开源平台，而不是你通过 WordPress.com 得到的精简版。两个之间有的巨大差异。

准备好开始了吗？太好了！

Weebly vs WordPress:数字说明了什么

WordPress 于 2003 年推出，主要是作为一个博客平台，今天已经是一个成熟的内容管理系统，覆盖了 34%的网站和超过 60%使用内容管理系统的网站。

WordPress logo

另一方面，Weebly 在 2006 年起死回生，这要归功于戴夫·鲁森科、克里斯·范尼尼和丹·维尔特里，他们在 22 岁时还是宾夕法尼亚州立大学的学生，共同创立了这家公司。Weebly 随后于 2018 年被 Square Inc .收购。

Weebly logo

Weebly 背后的最初想法是让宾夕法尼亚州立大学的学生生活更轻松。怎么会？当时，宾夕法尼亚州立大学要求所有学生都有一个在线文件夹，可以通过这样的平台轻松创建和更新。这三个人看到了一个未开发的机会，并推出了他们的产品。

至于 Weebly 的市场份额，0.4%的网站使用它，0.7%的网站使用 CMS:

CMS market share

与 WordPress 相比，围绕 Weebly 的兴趣从未如此接近，并在 2014/2015 年达到顶峰，当时 Weebly 从红杉资本和腾讯控股有限公司获得了 3500 万美元的 C 轮融资。并扩大了在欧洲的业务。这两条消息可能都给该公司带来了更多的关注。

Weebly vs WordPress at Google Trends

所以关键问题是:WordPress 是你的正确选择吗？或者你应该选择 Weebly？我们来找个答案吧！

Weebly vs WordPress:用户友好

我们正在考虑:一个全新的、没有技术天赋的人在尝试完成网站的基本工作时，例如添加文案、定位图片、更新内容等，会面临多大的学习曲线。？这些基本任务容易完成并且相当直观吗？或者你会发现自己蜷缩在键盘前，在网站的管理界面和 14 个不同的教程标签之间切换？

Weebly

让我们从一开始就把这一点说清楚:Weebly 被认为是超级容易使用的——甚至可能是个人和企业使用的最简单的网站构建器。

Weebly site creation

在很大程度上，它赢得了这个声誉。Weebly 提供了一个简化的从头到尾的网站建设过程，使用一套集中的工具。你不必单独设置你的服务器，安装 WordPress，安装主题和插件。

这种集中的设置、构建和管理方法可能对没有任何网站创建经验的人更有吸引力。

WordPress

正如 Weebly 被认为超级容易学习和操作一样，WordPress 经常被认为对于没有技术头脑的新手来说很难学习。

Block editor in WordPress

然而，在这种情况下，我们并不完全相信这个名声是完全值得的。WordPress 中格式化和发布内容的基础至少可以说是“所见即所得”——和大多数电子邮件程序一样简单。如果你能在 Gmail 中处理电子邮件的格式，只要稍加练习，你就能处理 WordPress。

WordPress 确实需要稍微复杂一点的设置过程，这将意味着处理核心文件和安排托管，更不用说从各种来源选择、安装和配置主题和插件。这可能看起来很多，而且肯定比 Weebly 要求的多一点，但是在权衡中你确实得到了更多的控制。

Weebly vs WordPress:可定制性

我们正在考虑:任何平台都可以创建一个功能性网站(或者应该能够创建)，但这里我们讨论的是这两种解决方案的灵活性。定制每个平台的“开箱即用”版本以满足您特定的品牌和业务需求有多容易？

Weebly

Weebly onboarding theme selection

像 WordPress 一样，Weebly 采用了预制的主题。您可以使用拖放构建器自定义它的某些部分，但是您可以更改的内容实际上取决于您选择的主题。

主题本身为你的站点提供了基本的架构和结构。它还提供了一个基本的网站配色方案或调色板。把它想象成一个背景或者舞台，在这个舞台上你将构建和定制你的站点的其余部分。

一般来说，这里你有两个选择。你可以选择一个尽可能接近你所寻找的主题，然后调整那些你想改变的东西。或者，您可以使用站点的基本主题作为框架，并在此基础上构建您的站点。

如果你知道 HTML 和 CSS，除了下载主题文件，在你自己的文本编辑器中编辑它们，然后重新上传新的文件。请注意，在某些情况下，这种访问可能会受到限制。Weebly 确实给了你一个关于如何定制其主题的教程。

WordPress

开发者已经为 WordPress 构建了数千个主题。此外，您可以从几个拖放框架中进行选择，比如 Divi，它给了您同样大的灵活性。当然，总是有可能雇佣你自己的开发者来为你和你的品牌创建一个独特的主题，尽管这可能超出了许多个人和全新企业的有限预算。

Current theme in WordPress

和 Weebly 一样，那些会编码的人在对网站外观进行更精细的控制方面有着明显的优势。如果你知道 HTML、CSS 和 JavaScript，你可以在你的网站上修改任何你想要的东西。最佳实践是创建一个子主题来和你的父主题一起工作。

这里的底线是 WordPress 在定制你的网站时可能更强大。但是，这种可定制性会带来额外的复杂性或费用，这取决于您选择如何进行。

Weebly vs WordPress:电子商务

我们正在考虑:向您的网站添加购物车并管理其基本功能有多简单？基本的电子商务控制有多直观，这些选项有多灵活？

Weebly

Weebly onboarding ecommerce

首先，好消息是:是的，Weebly 支持电子商务。你可以销售实物商品或数字产品(如电子书、音频文件)，当你的客户结账时，他们会在你的域名上结账——他们不会被重定向到其他网站，从而增加他们对你品牌的信任和安全感。

不利的一面不一定会成为许多网站所有者的交易破坏者，但它们应该被考虑。

首先也是最重要的，你所享受的精确的电子商务功能将完全取决于你选择的包装级别。专业级用户只能销售有限数量的产品，在税收或运输选项上没有灵活性，并且每次交易支付相当于总额 3%的费用。有了商业计划，更上一层楼，你可以想卖多少产品就卖多少，你还可以控制运费和税收，而且没有交易费。企业用户还可以享受一些更高级的电子商务功能。

另一个考虑是，Weebly 的任何计划都没有直运选项，而且这种情况也不太可能很快改变。如果这对你很重要，WordPress 是你更好的选择。

结果是，如果你的品牌只需要一个最小的电子商务存在，或者如果完整的商业计划符合你的预算，Weebly 将为你工作。如果你需要更多的控制，你可能会从 WordPress 得到更多。

WordPress

几乎普遍地，WordPress 电子商务依赖于你的电子商务插件的强度。不过，这确实是一件好事，因为有一些优秀的、编码良好的电子商务插件可用于 WordPress 网站。

这意味着您将在设置您的在线商店体验以及支持您的电子商务业务的基础网站方面享有极大的灵活性。这种灵活性和定制化是任何 SaaS 电子商务解决方案都无法达到的。

与此同时，您仍将享受同样强大的基本和高级电子商务功能，帮助您使您的在线商店取得成功。

Woocommerce frontend example

从你可以销售的产品的种类和数量，通过你的买家购物体验的准确路径，到结账等等，WordPress 允许你定制和控制你的电子商务网站的每个方面。你也可以合并直运。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

权衡，一如既往，所有这些灵活性意味着你必须做更多的研究来为你的计划找到合适的插件。这也意味着设置和配置你的插件选项要多做一些工作。回报是你在其他地方很难找到的控制度。

Weebly vs WordPress: SEO 和代码

我们正在考虑的:基本的界面和代码结构是否允许你为搜索引擎优化你的网站，如果是，到什么程度？这些控件的访问有多简单？

Weebly

Weebly site setup SEO options

有了 Weebly，你可以访问最基本的 SEO 任务，比如定制页面标题、元描述，以及为你的站点的所有页面定制 URL。但是，标题的使用是有限的(仅限 H1 和 H2)。如果你想编辑这些，你可能需要从 Weebly 商店安装一个第三方应用程序。

你可以为你的图片编辑 alt 标签，设置 301 重定向，甚至访问你网站的一些底层代码。对于所有的计划(包括免费的)，您都可以利用 SSL 安全性。还有一个空间，你可以粘贴你的谷歌分析代码。

WordPress

WordPress 插件，以及一些主题(通常是高级的)，允许你不同程度地访问重要的字段和代码，以扩展其原生的 WordPress SEO 功能。这包括页面标题、元描述等等(建议阅读:如何在 WordPress 上使用 Yoast SEO:Complete Tutorial)。

Yoast SEO plugin example

直接开箱即用，WordPress 优先考虑搜索引擎优化。内置了自定义 URL 和 URL 结构选项，以及编辑图片上传的 alt 标签的功能。您可以完全控制所有标题，包括 H3 和其他，并且可以通过更改 CSS 随意定制外观。

Google Analytics 代码可以通过插件添加或者通过仪表板的代码编辑器手动插入。 SSL 和 301 重定向也可以通过外部解决方案和插件获得。

建议阅读:市场上为 WordPress 开发者和高级用户提供的 10 款免费 HTML 编辑器。

Weebly vs WordPress:支持和社区

当你遇到自己无法解决的问题时，你能指望多少支持？

Weebly

Weebly support homepage

作为一家成熟的 SaaS 企业，Weebly 优先考虑为其所有客户提供集中支持。Weebly 通过其客户服务团队和知识库提供专业支持。此外，您可以在其社区支持论坛中寻求其他用户的帮助。

WordPress

WordPress 支持可以采取多种不同的形式。

WordPress support forums

对 WordPress 网站用户来说，最大的帮助来源之一是其强大、热情的用户社区。数以百万计的忠实粉丝和专业开发者可以通过许多论坛和留言板提供帮助和支持，其中最主要的是官方 WordPress 论坛。此外，您可以通过查看高级支持解决方案获得更直接的一对一支持。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

Weebly vs WordPress:管理和维护

我们正在考虑的:在持续的基础上，保持您的网站更新、无垃圾邮件和正常运行的难易程度如何？

Weebly

Weebly 的自包含性意味着您在很大程度上摆脱了困境，至少在安全和功能更新方面是如此。公司会为你处理所有的事情。简单，直接，超级容易。

然而，这也意味着你无法控制这个过程，所以如果这种控制对你很重要，Weebly 可能不是你的最佳选择。

然而，这里有一个仪表盘，你可以管理网站的搜索引擎优化、编辑、会员(如果你运营的是会员制网站)和已安装的应用程序。

Weebly general settings dashboard

您还可以控制一些博客设置，例如显示多少帖子，是否启用共享图标，最重要的是，如何处理内置的评论系统，以防止垃圾邮件。

Weebly blog settings

WordPress

Automattic 持续发布 WordPress 核心文件更新。WordPress 系统的优势之一是它拥有一个忠诚的、活跃的、有才华的开发者社区，所以更新会及时发布，也许会很频繁。

WordPress updates

然而，核心文件更新只是管理过程的一个方面。当新版本发布时，您还需要确保由于新版本的发布，现在可能需要任何其他更新。

但是有时候插件开发者跟不上开发进度，所以旧的插件可能会过时，出现需要解决的安全漏洞。

如今，使用当前版本和一键式更新进行更新也更加容易，尽管你应该总是首先进行完整的备份，除非你使用的是 Kinsta，它提供自动每日备份和随时创建手动备份点的选项。

Weebly vs WordPress:初始和持续成本

我们正在考虑:你的新网站在前期成本和经常性成本方面会花多少钱？

Weebly

Weebly 集中了您的所有成本，这在争论发票和费用方面提供了附加值。

Weebly pricing plans

它提供了四个计划。在价格范围的一端，有一个供个人使用的免费计划。你会得到一个二级域名(即 mysite.weebly.com)，以及基本的站点工具。电子商务在这个级别不可用。每月 5 美元(按年支付)，你可以注册“连接一个域名”计划，这基本上是个人计划，但有你自己的(顶级)域名移植。这两个计划都带有 Weebly 广告展示。

Pro 计划每月花费 12 美元(按年支付)，包括一年的免费域名注册以及 100 美元的谷歌广告积分。当然，在接下来的几年里，你仍然有责任保持域名注册的有效性。你也可以删除那些 Weebly 广告，并可以享受最少的电子商务功能。

每月 25 美元(按年支付)，商业计划为中小型企业和电子商务商店提供更大的灵活性和功能。您将获得与 Pro plan 相同的免费初始域名注册和 100 美元的谷歌广告积分，没有 Weebly 广告，以及全套强大的电子商务平台和工具。

WordPress

WordPress 是开源的，所以它的核心文件是免费的。你将需要额外的 WordPress 主机，通常的费用从 10 美元到更多，取决于你选择的基础设施和主机方案。

WordPress commercial themes homepage

数以千计的免费主题可供选择，但许多品牌和企业更喜欢投资一个独特的或可定制的框架主题，根据功能的不同，其价格可能高达数千美元。

大多数插件也是免费的，尽管许多也有提供额外功能的高级版本。

你的域名也需要注册，平均每年花费12 美元左右(取决于你是否从你的域名注册机构选择私人注册和其他服务)。

如果你决定雇佣一名开发人员或设计师来帮助你创建一个主题或处理安装和设置的技术方面，你可以预期你的总成本会增加几百到几千美元。

Weebly vs WordPress: What's the best choice? Check out the key differences in our thorough comparison! 🤔❌✅Click to Tweet

摘要

在 Weebly's corner，我们可以将 SaaS 网站建设者的优势总结如下:

• 集中化和简单易用。
• 专业、集中的支持。
• “物有所值。”
• 基于需求规模的四个计划。

对谁最有利？

• 个人，自由职业者，小企业主，电子商务网站所有者，他们只想要一个简单，直接的网站，不需要一吨的铃铛和口哨或特定的定制
• 任何人更感兴趣的是快速和容易地建立一个网站，而不是创建一个“刚刚好”的网站

WordPress 的优势包括:

• 令人难以置信的通过主题和编码的可定制性。
• 通过插件实现功能的广度和深度。
• 更高层次的控制。
• 开源软件。
• 由忠诚热情的用户和开发人员组成的广泛支持网络。

谁会觉得 WordPress 是最好的解决方案？

• 任何规模的组织，从自由职业者到大公司
• 那些有时间和兴趣去适应一个小的学习曲线的人，那些可以每周花几个小时来保持网站更新、安全和正常运行的人

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

前 40 种坚固的西方字体(包括免费和高级选项)

原文：https://kinsta.com/blog/western-fonts/

如果你正在做一个需要大胆和引人注目的设计项目，高质量、粗犷的西方字体可能是一个完美的选择。唤起狂野西部、牛仔、未知的荒野和自由精神的字体是给你的设计组合添加个性和独特风格的好方法。

西方字体在许多专注于排版的设计中也是常年受欢迎的，尤其是对于那些希望摆脱 T2 更现代字体的人来说。西方字体在海报、徽标、名片、传单等上面看起来很棒。

在本帖中，我们收集了你可以在自己的设计和网站上使用的最好的高质量西方字体。

19 种免费西方字体

下面，您将找到适合您项目需求的最佳免费西方字体。此列表中的一些字体可免费用于个人和商业用途，而其他字体只允许个人使用。在项目中使用每种字体之前，请务必检查其许可。

Cowboys, the uncharted wilderness, and a free spirit: channel them all when you use a high-quality Western font for your next design 🐴 Giddy up! 🤠Click to Tweet

1.邦塞格罗

The Boncegro font.

首先，我们有 Boncegro 字体，它支持拉丁和西里尔字母。它很有个性，非常适合做海报和标志。该字体可免费用于个人和商业用途。
T3】

2. Klipan Black

The Klipan Black Western font.

借助这种令人惊叹的字体，获得老西部通缉令的外观。 Klipan Black 包含超过 219 个字形。这种字体是多语言的，可以很好地用于标志设计、海报、菜单等等。它是在开放字体许可下授权的，可以用于个人和商业项目。

3.UNDRRTD

The Underrated Western font collection.

un RTD 确实是一种被低估的字体；它充满了个性。如果你想让你的设计充满冲击力，这是最好的选择。该字体带有一组基本的大写和小写字母，可用于商业和个人项目。

4.谢洛克人

The Sherloks Western font.

Sherloks 字体是一种受美国风格启发的老式字体。它有四种不同的风格:常规、斜常规、复古和斜复古。它包括 88 个以上的字符和一套连字，以创造华丽的印刷设计。您可以在任何复古设计中使用它，包括品牌、徽标、产品包装、邀请函、报价、t 恤、标签、海报等等。该字体对于个人项目是免费的。

5.波拿巴家族

Bonaparte, a fancy vintage typeface.

受旧西方文化的影响，这种字体有一个粗犷而优雅的外观和感觉。它有多语言支持，并带有八种字体风格，替代字母形式，数字，大写和小写字形。您可以免费下载 Bonaparte 常规粗细字体，并在个人和商业项目中用于品牌、包装、邀请函等。
T3】

6.仙人掌

The Cactus Western font.

让人想起西方的仙人掌和沙漠地区，这种字体大胆，一定会让你的设计脱颖而出。它包括一组基本的字母符号、数字和标点符号。仙人掌西文字体可以在个人和商业项目中免费使用。它将在标志和海报设计中，或者在任何你需要大标题的地方工作得很好。

7.韦恩

Wayne, a free Western font.

韦恩字体的灵感来自意大利式西部片以及克林特·伊斯特伍德和约翰·韦恩等演员。由勇敢的狮子字体创建，这是经典西方 slab 衬线的免费版本。该字体是海报和展示用途的绝佳选择，您可以在商业和个人项目中使用它。

8.Roadstore

The Roadstore vintage font.

如果你正在寻找一种有风格的西方字体，考虑使用 Roadstore 字体。个人使用它是免费的，对于任何需要醒目的牛仔字体的设计来说都是很好的。

9.夏洛克出版社

Sherlock Press, a font with three styles.

夏洛克出版社工作室的字体有一种优雅、复古的感觉。它有三种不同的风格:粗糙，新闻，和清洁，使其适合各种项目。这种全大写的西方字体非常适合用于徽标、海报、标签、包装等。个人使用免费。

10.报酬

Reward, a Western-style font.

奖励一种粗犷的自由西部字体，让我们想起了狂野西部时代的通缉令。全大写字体非常适合任何展示用途，包括海报、标签和徽标。这是免费的个人使用，并有多语言支持。

11.万宝路（美国香烟品牌）

Marlboro, a free Western font.

如果你在寻找一种优雅而知名的字体，万宝路绝对是它。这种标志性字体可以在个人和商业项目中自由使用，是海报、标签和包装设计的绝佳选择。它包含大写和小写字母，数字和标点符号，以及多语言支持。
T3】

12.布奇&圣丹斯

Butch & Sundance, a free Western-inspired font.

有了这种字体，任何设计都会立刻有一种更叛逆的感觉。Butch & Sundance font 个人使用免费，商业使用需要捐赠。这种全大写的西式字体用在海报或包装设计上会很好看。然而，它也可以用来设计一个具有强大声明的标志。

13.香草鲸

Vanilla Whale, a fun cowboy font.

用香草鲸鱼字体释放你内心的牛仔。这是一种古老的西方字体，有一个不寻常的名字，但字体看起来像是属于酒吧的门。该字体可免费用于个人和商业用途。你会发现大写和小写字母，以及数字和标点符号。

14.阿比纳亚

Abhinaya, a Western-inspired font.

Abhinaya 字体的灵感来源于旧海报设计。它具有优雅的字体和每个字符的许多变体，包括 opentype 备用字符、常见的连字和附加的连字符号，允许您创建令人惊叹的印刷设计。这种字体可以免费供个人使用，可以很好地用于标识、信头、海报和服装设计。

15.水牛

Buffalo, a set of six creative fonts.

水牛字体是完美的牛仔风格字体，具有质朴的外观和感觉。它很适合海报、包装、信头或标志设计。该字体带有大写字母、数字和标点符号。个人使用是免费的，可以购买商业许可证用于商业项目。

16.圣安东尼奥·沙罗斯

The San Antonio Charros free font.

这是一种加粗的西式字体，在海报上看起来会很棒。圣安东尼奥夏洛斯字体包含大写字母，个人使用免费。如果您想将它用于客户端项目，也可以使用商业许可证。

17.老密尔沃基

Old Milwaukee, a free Western font.

看着老密尔沃基字体，你会情不自禁地想到老西部的开阔空间。它非常适合海报设计以及包装和标志设计。该字体供个人免费使用。

18.兄弟之地

Brotherland, a Western font with four styles.

Brotherland 字体的灵感来自于美国老式字体，有四种不同的风格和备用字符。它带有一套完整的符号、数字和标点符号。免费版可以用于个人项目。

19.达克特林

Docktrin, a Western-inspired font.

用 Docktrin 字体添加一点西式风格。它的灵感来自马戏团、西方字母和凸版印刷风格的混合。这是完美的标志，海报，信头，和包装设计。该字体供个人免费使用。

21 种高级西方字体

现在你已经看到了一些最好的免费西方字体，让我们来看看付费选择。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

选择优质字体一定会让你的设计看起来更加独特。此外，高级字体通常有完整的字形集，其中一些甚至包括额外的设计元素。

1.陌生人字体集

The Stranger font typeface collection.

这种字体的灵感来自牛仔经常穿的旧牛仔服装上的标签、旧西部标志和药剂师元素。它有 22 种字体，你还会得到一套 Illustrator 格式的预制徽章和插图。陌生人字体集拥有全面的多语言支持，在包装、标签和海报设计方面表现出色。

2.帕洛桑托

Palo Santo, a premium Western font.

一种简单、优雅、质朴的西式字体。 Palo Santo 的灵感来自墨西哥和西南部的手写字体。这种手绘字体具有一组大写字母、数字和附加字形，非常适合用于标识、信头、海报和包装设计。

3.昏暗的酒馆

The Dusky Pub font.

当你看着昏暗的酒吧字体时，你会情不自禁地想象自己走进了蛮荒西部的一家酒吧。这款复古字体是按照经典西方风格制作的。它具有三种不同的风格，非常适合包装、产品和标签设计，这要归功于大胆的平板字体。它有多语言支持，包括拉丁和西里尔字母。

4.制绳者

The Roper Sans & Serif Western typeface.

Roper 是一种西式字体，有 12 种不同的风格。它包括无衬线和衬线两种版本。除此之外，每个版本都有常规、轻压和重压选项，因此您的设计会有很多变化。这种字体在标志、信头、海报、标签和包装设计中非常适用。

5.艾伯特森

Albertson, a premium Western font.

这是一种优质的西方字体，有大量的字符。Albertson 受到了老派汽车、牛仔、伐木工、木工和 DIY 手工艺风格的影响，这赋予了它独特的外观和感觉。这种字体很适合任何需要一点格调的复古项目。您将获得四组替代字符和多语言支持，总共 350+字形。

6.古老的灵魂

Old Spirits, a vintage bold typeface.

Old Spirits 是一种受美国风格启发的高级字体，带有一套全大写的字形，包括一个带有马刺的大写字母，以及一个干净的小写字母。包括两种替代奖金风格，以及可以通过在大写单词前键入字母“c”来激活的流行语。该字体支持多种语言，非常适合任何需要古老、质朴外观的设计。

7.在…之外

Dehors, a premium display typeface.

Dehors 字体外观经典优雅。受美国风格的启发，这种字体是标志、海报、信头、包装和标牌设计的绝佳选择。它带有许多字形变化，一个完整的字母表，数字和标点符号集。

8.枪手

The Gunslinger Western typeface.

Gunslinger 是一种受西方风格启发的粗体衬线字体。它包括六种不同的风格，你还会得到一个额外的无衬线字体。该字体带有全大写字符集、数字、标点符号和多语言支持。平板衬线和浓缩无衬线的组合使得创建有凝聚力的设计变得容易。

需要一流的，快速的，安全的主机为您的新电子商务网站？Kinsta 提供超快的服务器和来自 WooCommerce 专家的 24/7 世界级支持。查看我们的计划

9.布鲁克斯

The Brooks premium vintage display font.

Brooks 是一种老式的西式字体，灵感来自于复古标牌和酒瓶。它适用于较大尺寸，是信头、海报和标签设计的绝佳选择。该字体有三种不同的样式和装饰性边框，它包括多语言支持、可编辑的标签模板和每组的一组替换字符。

10.西方爱情

Western Love, an SVG script font.

西方爱情是一种手写水彩风格的 SVG 字体。字体看起来非常逼真，对于任何西方主题的浪漫设计来说都是一个很好的选择。它非常适合签名徽标、印刷报价、婚礼请柬等。它也有多语言支持。

11.吸烟

Smoking Typeface, a vintage Western font.

Smoking 是一种乡村复古字体，灵感来自古老的标牌设计。该字体在较大尺寸下看起来非常漂亮，是标签、包装和海报设计的绝佳选择。您将获得三种字体样式和一组额外的图形。

12.西湖

Western Lake, a handcrafted premium font.

西子湖是一种复古的西子字体，有一套完整的大写字母和装饰，让你的设计脱颖而出。该字体的灵感来自葡萄酒酿造厂的包装和啤酒广告。这是完美的复古标志设计，标题，或包装设计。

13.违法的

Lawless Display, a premium font with four styles.

对于任何围绕荒野和野生动物的项目来说,是完美的粗犷的西方字体。这是一个大胆的石板，灵感来自于 19 世纪早期的美国木材。字体有四种不同的风格，有大写和小写字母，还有数字和标点符号。它还支持东欧、中欧和西欧语言。

14.Buckboard 系列

Buckboard, a premium Western font.

这是另一种西方字体，灵感来自美国古老的木头字体。 Buckboard 系列有三种不同的样式，每种字符样式都有 OpenType 连字功能，以及旧式数字和小型大写字母的功能。您可以混合搭配各种风格，为您的设计创造独特的外观。

15.特克西卡利

Texicali, a premium serif font.

Texicali 是一种独特的西式衬线字体，非常适合任何需要格调的项目。字体是手绘的，并在 Adobe Illustrator 中矢量化。它独特的字体非常适合标识、信头和海报设计。这种字体还包括一整套大写字符、数字和符号。

16.埃斯特班

Esteban, an uppercase-only Western font.

Esteban 是一种很酷的西式字体，非常适合海报、信笺、标签、包装和标志设计。它有一套完整的大写字母、数字和标点符号。

17.欲望

Desire, a premium Western font.

Desire 字体有令人印象深刻的 644 个备用字母、98 个连字、8 个花体字和 6 个流行语。对于任何复古风格的设计来说，这都是一个很好的选择，并为您创建徽标、标题和海报提供了大量选择。你将得到总共 12 种字体，以及一个详细的 PDF 文件，可以在你设计的时候作为参考。

18.鲁莽的人

Hothead, a premium Western typeface.

Hothead 是一种受老西部文化启发的大小写字母无衬线字体。它有一种阳刚、粗犷的感觉，但又带有现代感。这种字体是标志、标牌、海报、标签和包装设计的绝佳选择。它有 258 个字形，广泛的拉丁脚本语言支持，字符集 A-Z，数字和标点符号。

19.Coddiwomple

Coddiwomple, a handcrafted Western font.

Coddiwomple 是一种手工制作精美的西方字体，有两种截然不同的风格。你会得到一个常规风格和一个仿旧风格，这两种风格非常适合给任何设计一个真正复古的外观和感觉。字体包括所有大写和小写字母、数字和标点符号。将其用于徽标、海报、标牌、包装、标签设计等。

20.耶尔莫

Yermo, a geo-slab font.

Yermo 字体是一种西式字体，灵感来自南加州的悠闲氛围、多沙的亚利桑那州沙漠和墨西哥北部充满活力的拉丁文化。如果你在寻找一种具有独特个性的字体，Yermo 无疑是合适的。该字体有两种不同的样式，包括大小写字母、数字、符号和多语言支持。

21.年轻的心字体

Young Heart Typeface, a premium Western font.

Young Heart 字样是一种西式字体，具有风格交替和 OpenType 特征。你会得到两种不同的字体风格，这两种风格都为任何设计增添了一丝风格和优雅。字体有大小写字母、数字和标点符号。它适用于徽标、信头、标牌、海报、书籍封面和标签设计。

需要为你的海报、标志或传单设计一种醒目的字体吗？🤠考虑一个高质量，坚固的西部字体-牛仔帽不包括在内😉

摘要

如你所见，这里不缺少高质量的西方字体，无论是免费的还是付费的。现在唯一要做的就是下载您的收藏夹，并在您的项目中使用它们。

然而，如果西方字体不太合你的胃口，你可能会被其他风格所吸引，比如草书字体，或者你可能会选择细读当今使用的一些最流行的字体。毕竟，外面有一整个世界的选择。

快乐设计！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

SEO 代表什么？(+ 7 网站排名初学者技巧)

原文：https://kinsta.com/blog/what-does-seo-stand-for/

所以你听说过 SEO ，但是你不确定它到底是什么意思。或者也许你不确定它如何能帮助你实现目标。

搜索引擎优化是任何网站的主要营销任务。

如果你是新手，这可能会让人望而生畏。为了从 SEO 中获得最大收益，理解它是什么、它如何工作以及它为什么能帮助你是很重要的。

所以……

“SEO”代表什么？

SEO 代表搜索引擎优化。

这是一个激烈辩论的话题，网上有很多关于它的内容:

SEO in SERPs

让我们更详细地探讨一下:

什么是 SEO？

SEO 是改进你的网站，使其在搜索引擎的搜索结果中排名靠前的过程。通常人们关注的是出现在谷歌，但也有必应。

这一切都是为了让用户访问你的网站，而不直接支付广告费用。哦，这是一个非常喜欢缩写词的市场营销学科:

• SERP–搜索引擎结果页面
• CTR–点击率
• CTA–行动号召
• CRO–转化率优化
• user 用户体验

“SEO”的简单含义是:

SEO 是搜索引擎优化的简称。它指的是一套战略和战术，侧重于推动更多的流量从搜索引擎到您的网页，以及改善，帮助您的网站在搜索引擎结果页排名更高。

Support

为什么你应该关心搜索引擎优化(提示:免费的网站流量)

研究显示谷歌首页的网站获得了大部分点击。谷歌网站的点击率随着排名越靠后而稳步下降。

CTR study

如果你的 SEO 做得好(我们马上就会看到)，你的有机流量会随着时间的推移而增加，而付费广告需要持续的资金。

考虑到搜索引擎驱动了 93%的网站流量，这对你的网站来说是很大的潜在访问量。

谷歌每天都变得越来越聪明和先进。但是它仍然需要一些帮助。

理解 SEO 和优化你的网站将帮助你给搜索引擎提供他们需要的信息，这样你就能得到你想要的结果。

SEO drives 93% of all website traffic! But what does #SEO stand for? Where should you start to optimize and rank your site faster? Get our in-depth guide with actionable tips! 📈Click to Tweet

有什么条件？

SEO 总是在变。

随着搜索引擎变得越来越先进和算法的改变，一些策略停止工作，新的出现。

但有一点是肯定的:SEO 是长期流量的最佳来源之一。这可能是一项艰苦的工作，你可能不会在一夜之间看到多少收益，但这是一项投资。

SEO 是马拉松，不是短跑。一些前期的工作可以在以后的有机交通中得到回报。

SEO improvement graph

虽然付费广告、社交媒体和其他付费渠道可以让你的网站立即获得流量，但如果你停止付费，流量也会停止。另一方面，SEO 可以成为持续的流量来源。
T3】

搜索引擎基础(以及如何看待 SEO)

搜索引擎被设计来寻找信息和提供答案。

当谈到如何进行搜索时，谷歌会查看数百万网页，为用户提供最相关的信息。

SEO tips from Google

如何看待 SEO

众所周知，谷歌希望为用户的查询提供最佳答案，在解决 SEO 问题时，我们可以记住三条规则:

• 规则 1:谷歌是用来回答人们的问题的。
• 规则 2:谷歌知道的比我们和 SEO 专家都多。
• 规则 3:谷歌想要答案，而不是排名技巧。

那么你需要做些什么来获得你的排名网站呢？

回答问题比网上任何人都好。尽量不要把事情复杂化。不要试图用经常是短期的策略来欺骗谷歌。

看，搜索引擎优化很简单。😃

7 SEO 初学者基础

希望你现在开始看到 SEO 并没有那么复杂。

事实上，这很简单。至少最基本的是。

掌握一些 SEO 基础知识会对你网站的排名产生很大的影响。毕竟，大多数运营网站的人都不是 SEO 专家。

只要做对几件事，你就能在短时间内让谷歌给你带来流量。

听起来不错吧？我们走吧。

1.使用搜索引擎友好的内容管理系统(如 WordPress)

首先，如果你的网站不能被谷歌抓取，它就不会被索引，也不会排名。

这到底是什么意思？

谷歌使用自动爬虫(或机器人)来查找网站，索引内容，并对它们进行排名。因此，如果这些爬虫无法访问您的网站，您的网站将无法进入索引。

如果你的网站没有被索引，这意味着谷歌不会对你的网站进行排名。如果你想让谷歌抓取和索引你的网站(为什么你不想)，有几件事你需要从一开始就设置好。

进入:技术 SEO 。

不要被这个吓倒。技术性搜索引擎优化就是确保你的网站正确加载并且对谷歌可见。技术需求确实在变化，但是保持你的网站对谷歌爬虫的可访问性的需求将会一直存在。

使用 WordPress 作为你的 CMS 就像给你自己一个创建搜索引擎友好网站的开端。有几个 SEO 插件可以帮你完成繁重的工作，所以你不需要担心会破坏任何东西。

这里有一些你可以在 WordPress 中做的重要的事情来帮助你的网站被抓取和索引:

创建 XML 站点地图

XML 站点地图是一个列出你网站上所有页面的文件，看起来像这样:

XML Sitemap

你的网站地图通常位于 yourdomain.com/sitemap.xml.

如果你使用的是 Yoast 这样的插件(就像上面的例子)，创建一个站点地图是很简单的。

安装 Yoast SEO 插件。转到常规，然后在顶部的选项卡中选择功能。从这里，您将能够打开 XML 站点地图并保存更改。

XML sitemaps in Yoast plugin

现在你只需要将这个网站地图提交给谷歌搜索控制台。如果你还没有建立和验证它，这个指南告诉你怎么做。

生成 Robots.txt 文件

Robots.txt 是一个文本文件，它告诉搜索引擎在你的网站中可以去哪里，不可以去哪里。它看起来会像这样:

Robots.txt file example

就像 sitemap 一样，Yoast 插件可以为您生成一个 robots.txt 文件。

在 Yoast 插件中，进入工具 > 文件编辑器，你会看到一个按钮“创建一个 robots.txt 文件”

虽然只是一个简单的文本文件，但如果设置不正确，会严重影响网站的索引。因此，这份指南值得一读。

取消勾选“阻止搜索引擎”设置

这是一个简单的方法，但是会对你的搜索引擎优化工作产生负面影响。这只是一个简单的勾选框，阻止搜索引擎索引你的网站。

这通常在一个网站处于开发阶段时使用，以防止它在完成之前出现在 Google 中。要找到这个，进入设置 > 阅读，向下滚动你会看到:

WordPress indexing settings

2.确保你的网站可以在移动设备上运行(也就是响应式设计)

早在 2016 年 11 月，谷歌宣布了其移动优先指数。这基本上意味着谷歌会先看看你的网站在移动设备上的表现，然后再对其进行索引和排名。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

很难想象没有智能手机的人比有智能手机的人更难。因此，当得知超过 51%的手机用户在手机上搜索时发现了一家新公司或新产品时，应该不会感到惊讶。

根据这项研究，2018 年全球所有网站流量的 52.2%是通过手机产生的:

Mobile traffic 2018 (Image source: Statista.com)

自 2009 年以来，这一数字也逐年稳步上升。更重要的是，根据谷歌的数据，手机上的查询比桌面上多了 278 亿次。
还需要说服吗？以下是你需要一个在手机上运行的网站的更多原因:

• 网站可用性——你希望人们能够在你的网站上走动。谷歌也是如此。响应式网页设计让人们可以方便地四处走动，从而改善用户体验，享受更多的现场时间。这也是网页设计最佳实践之一。
• 页面速度——你希望你的网站加载得更快(稍后会详细介绍)。
• 跳出率(Bounce rate)——人们离开你的网站的速度有多快，因为它在手机上不能正常工作？这不是你想让你的用户(或谷歌)看到的。

WordPress 网站的流量比较:桌面、移动和其他

毫无疑问，移动需要成为你的重中之重。但是你真正需要关注和磨练的是你的客户如何参与你的网站(阅读:他们如何购买和订阅)。在我们对 WordPress 网站的 130 亿个日志条目的研究中，我们发现:

• 33.95 亿次请求来自桌面
• 31 亿次请求来自移动设备
• 15 亿次请求来自 API 调用、搜索引擎、爬虫、机器人等等。

Desktop vs Mobile vs Everything Else (click to view larger)

你应该从中吸取什么教训？

查看谷歌分析中的数据，检查你的重要目标到底在哪里实现了。不要忽视你的用户，仅仅让你的 SEO 依赖于你在一些博客上看到的新闻，说 SEO 流量现在都是关于移动的。
T3】

3.获取 SSL 证书

SSL(安全套接字层)证书是安装在网络服务器上的小文件，作为网站的安全措施。

安装完成后，它们会将你的 HTTP 切换到 HTTPS ，并激活浏览器中的挂锁符号:

SSL in Chrome

这是对 SSL 如何工作的非常简单的概述。对于 SEO 来说，重要的是要知道，拥有一个安全的站点实际上是一个排名因素。

事实上，研究已经显示出 HTTPS 和更高排名之间的积极联系:

Use of HTTPS (Image source: Backlinko.com)

Google 和其他各种主流浏览器已经透露，他们将不再支持 TLS 1.0 和 TLS 1.1。具体来说，它们将显示 ERR_SSL_OBSOLETE_VERSION 警告通知,指示“不安全”的连接。

4.确保你有快速可靠的主机

选择正确的(见)快速可靠的)虚拟主机对你的 SEO 有很大的影响。

你去过需要很长时间才能加载的网站吗？老实说，你是等着还是离开了？

你的网站的加载时间是一个重要的排名因素，因为没有人想永远等待加载一个网页。很有可能，如果你发现自己处于这种情况，你会点击后退按钮，去别的地方。

谷歌知道人们会这样做。

主机在页面加载速度中扮演着重要的角色。如果你真的关心 SEO 的话，你需要选择一个速度快的主机。

厌倦了 WordPress 的问题和缓慢的主机？我们提供世界一流的支持，由 WordPress 专家提供 24/7 服务和超快的服务器。查看我们的计划

选择托管时，有几个因素需要考虑。比如:正常运行时间(以及最小化停机时间)、响应支持、安全性和备份。所有这些都是对你的网站 SEO 健康的重要考虑。

总之:选择一台持续良好的主机。

5.从其他(相关)网站获取链接

链接(或反向链接)是从一个站点指向另一个站点的 HTML 超链接。这些都是 SEO 的重要因素。

研究表明，具有更多(或更好)反向链接的页面往往比反向链接较少的页面排名更高:

Backlinks and SEO (Image source: Backlinko.com)

搜索引擎使用链接:

• 寻找新的网页。
• 以帮助决定页面应该如何排名。

搜索引擎使用这些链接来抓取网页。他们会抓取你网站上指向其他网页的链接(内部链接),也会抓取指向其他网站的链接(反向链接)。

把这些看作是来自其他网站的信任票。但并不是所有的环节都是平等的。最好有几个与你的网站相关的好网站的链接，而不是仅仅为了链接而有大量的垃圾和不相关的链接。

链接建设是 SEO 中的一个大话题。为了不跑题，这里有一些你可以做的链接建设策略:

• 客座博客——找到你所在行业的网站，为它们写一篇文章，并链接回你的网站。
• 断开的链接构建 —找到有 404 个页面的页面，让网站管理员知道并请求他们指向你的站点(如果你替换的链接/页面与断开的内容匹配)。
• 未链接的提及——找到人们在网上谈论你但没有链接到你的地方，只需请求一个链接。
• 从你的竞争对手那里窃取——找到你的竞争对手拥有的链接……并窃取它们。
• 内容再利用——将博文转换成视频，反之亦然。

显然，有更多的方法来建立链接。你可以从 Ahref 的这本指南中得到一些启发。

6.写人们想看的内容

你不能谈论任何与 SEO 相关的事情而不触及高质量内容的重要性。

“内容为王”这句话被说得老掉牙了，但要点很重要:好的内容很重要。

这里也没有秘方，好的内容只是人们想看的内容。当然，有一些内容营销要点需要牢记在心，比如预算、工具和推广，但是你不能回避人们想要阅读的内容。

当然，事情不仅仅如此。

是的，一旦你知道该写什么(感谢做一些传统的关键字研究)，你可以做一些事情来改善搜索引擎优化的内容:

• 提高可读性——大多数人浏览网页内容，所以一定要用副标题和要点来分隔你的内容，以确保人们不会被一大堆文字吓跑。
• 使用图片 —同样，使用截图、gif 和图片等视觉材料来增强你的内容。
• 更深入——更长的内容可能不总是正确的选择，但当涉及到内容长度时，更长的文章通常更有深度，因此排名会更高。
• 使用事实——如果你在陈述一个事实或使用一个统计数据来说明一个观点，链接到一个支持它的研究。
• 不要忘记特色片段——只要对你的内容做一些调整，如果你进入特色片段，你就可以获得流量的提升。

创作常青内容好。但是如果你不能优化它，你可能会把有价值的排名留在桌面上。

7.优化你的页面(有机流量)

仅仅在你的网站上有内容是不够的。你需要对它进行优化，以在谷歌中显示你想要的关键词。

每个页面都应该有一个“焦点关键词”来优化。这并不意味着它只能排名，事实上，一个页面可以排名许多条款。但是为了简单起见，您希望围绕一个关键字来构建页面优化。

让我们看看优化的几个关键要素:

Title Tags

标题标签是谷歌了解你的页面内容的主要方式之一。你要确保你要排名的主要关键字在 title 标签中。

还需要指出的是，标题标签并不是你在页面上看到的标题。这些通常是 H1 或 H2 的标签。虽然它们可能相似或包含相同的关键字，但它们是两种不同的元素。

如果你使用 Chrome 浏览器(73%的互联网用户使用 Chrome 浏览器)，有一种非常简单的方法可以看到你当前所在页面的标题。

只需将鼠标悬停在选项卡上，该页面将弹出一个灰色的小框:

Page title vs H1 in Chrome

写标题标签时，请记住长度。谷歌显示的内容各不相同，但一个好的目标是 55-60 个字符或 600 个像素。

(嘶！你可以使用这个方便的 SERP 预览工具来确保你的标题标签不会太长。)

你想让你的主要关键字出现在标题中，但是要以一种自然的方式。你的标题标签通常是人们在搜索关键词的结果页面中看到的第一个东西。所以给他们留下一个好印象，让他们愿意点击阅读你的网站。

元描述

如果标题标签是你页面的标题，那么元描述就是吸引人们继续阅读的一行摘要。

元描述是另一个在实际页面上看不到的 HTML 元素。这是一个在野外的例子:

Meta description in SERPs

有时，谷歌选择不显示你的元描述，并会为你生成自己的元描述。但这并不意味着你不应该写它们。

写一个好的元描述可以帮助你让人们点击并真正访问你的网站。记住:在 SERPs 中出现只是第一步。你仍然需要让他们访问你的网站。

统一资源定位器

说到 SEO，关于 URL 有两点需要记住:

• 排名——URL 是一个很小的排名因素。所以，理想情况下，你要把你想排名的主要关键字放在 URL 中。
• 用户体验——一个好的 URL 应该容易被搜索引擎和真实的人理解。考虑一下这个问题:你能仅凭网址就知道这个页面大概是什么吗？

URL structure for SEO

只要看看这个网址，我们就可以知道这个页面大概是关于男士滑冰鞋的。

想学习如何使用 SEO 来增加你的网站流量吗？查看我们的视频:

现在怎么办？(摘要)

好了，现在你知道 SEO 代表什么，它是如何工作的，以及你如何利用它来发展你的网站。

让我们快速浏览一下为了给你的网站排名你需要做的事情:

• 使用搜索引擎友好的内容管理系统(如 WordPress)。
• 确保你的网站可以在手机上运行(也就是响应式设计)。
• 获取 SSL 证书。
• 确保你有快速可靠的主机。
• 从其他(相关)网站获取链接。
• 写人们想看的内容。
• 优化你的网页(有机交通)。

现在剩下要做的就是优化你的网站。让谷歌给你送流量是一个持续的过程，不是一次性的事情。

SEO 是马拉松，不是短跑。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

DDoS 攻击解释:原因，影响，以及如何保护您的网站

原文：https://kinsta.com/blog/what-is-a-ddos-attack/

DDoS 攻击出奇地容易实施，每年都会影响全球数百万个网站，攻击数量还在上升。

遭受 DDoS 攻击似乎是上网不可避免的副作用；你的网站越成功，你就越有可能成为攻击的目标。但是您可以减少 DDoS 攻击影响您站点的机会。

您可能想知道:什么是 DDoS 攻击？我如何保护我的网站免受他们的攻击？

在本帖中，我们将解释什么是 DDoS 攻击，探索什么可能使您的站点易受攻击，并概述您可以降低其概率和影响的方法。

什么是 DDoS 攻击？

让我们首先检查一下 DDoS 攻击到底是什么，更重要的是，它不是什么。

DDoS 代表分布式拒绝服务，但通常被称为简单的拒绝服务。DDoS 攻击包括网站在短时间内被大量请求淹没，目的是淹没网站并导致其崩溃。与仅来自一个位置的 DoS 相比,“分布式”元素意味着这些攻击同时来自多个位置。

如果您的网站遭受 DDoS 攻击，您将在几分钟甚至几小时内收到来自多个来源的数千个请求。这些请求不是网站流量突然激增的结果:它们是自动的，来自有限的来源，取决于攻击的规模。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

在下面的截图中，您可以看到在 DDoS 攻击期间，一个站点收到的请求数量突然激增。

DDoS attack traffic

DDoS 攻击和黑客攻击不是一回事，尽管两者可以联系起来；犯罪者并不试图访问您的网站的文件或管理员，而是由于大量的请求，他们导致网站崩溃或变得脆弱。在某些情况下，当网站易受攻击时，黑客会试图攻击网站，但在大多数情况下，目的只是让网站停止工作。

听起来似乎没有任何方法可以避免 DDoS 攻击:毕竟，如果有人决定向您的站点发送大量请求，您无法阻止他们。

尽管你无法阻止有人试图通过 DDoS 攻击来破坏你的网站，但你可以采取一些措施来确保如果你受到攻击，你的网站不会停止工作，也不会容易受到黑客攻击。

我们将在这篇文章的后面讨论这些步骤，但是首先，让我们来看看为什么有人想要在你的网站上发起 DDoS 攻击。

为什么有人会破坏你的网站？

那么为什么有人会在你的 WordPress 网站上发起 DDoS 攻击呢？他们能从中得到什么？

攻击者想要通过 DDoS 攻击让您的网站瘫痪有很多原因。这些包括竞争对手的攻击和因为你的内容而受到的攻击。

竞争对手发起的 DDoS 攻击

在理想的情况下，你的竞争对手会试图通过改善他们的内容、SEO 和转化率来超越你，这是利用你的网站获得竞争优势的合法途径。

但在某些情况下，竞争对手可能会采取更极端的措施。竞争对手可能会雇人在你的网站上发起 DDoS 攻击，因为他们知道这不仅会影响你的网站，还会影响你的业务。

在你让你的网站重新运行的时候，他们会抢走你的生意，特别是如果他们用你的企业名称作为关键词来做广告的话。如果你的网站不能很快恢复运行，你会失去搜索排名，并可能发现你的竞争对手现在在谷歌上的排名比你高。

当然，很难证明是谁实施了 DDoS 攻击。攻击不会来自你竞争对手的 IP 地址！除非你财力雄厚，否则试图对你怀疑的竞争对手采取法律行动是不太可能成功的。

首先保护自己免受攻击的影响要好得多。不要试图对你的竞争对手发起另一次 DDoS 攻击作为回应。这是非法的，最好让你自己确信，一个不顾一切地使用这些手段的竞争对手可能不会像你的企业那样长寿或享有声誉。

对您内容的 DDoS 攻击

一些网站因为其内容的性质而遭受 DDoS 攻击。

例如，举报网站可能会受到攻击。一个处理有争议问题的网站(如堕胎权或反种族歧视)可能会遭到不同意其信息并希望将其关闭的人的攻击。或者你的内容可能是商业性的，但仍然是敏感的，有些人不希望它在网上出现。

如果你的网站被成功攻击，它将使你的内容无法流通，如果你的用户需要访问信息或指导，这可能会给他们带来问题。

你还将花费时间解决这个问题，失去你可能从网站获得的任何收入(如果你是非营利组织，无论是销售还是捐赠，如果你的网站在几个小时或几天内返回一个 502 错误，你的排名可能会下降。

出于政治动机的 DDoS 攻击

随着网络威胁越来越多地被用来扰乱政治进程，出于政治动机的 DDoS 攻击变得越来越常见。

如果你的网站是为某个政党、候选人或组织服务的，或者是为了推进某个特定的政治目标，那么它可能很容易受到与你政见不同的人的攻击。

这不一定来自你的政治对手。它更有可能来自外部来源，试图扰乱政治辩论，阻止某些类型的内容，并利用混乱来迷惑和剥夺人们的权利。

这种攻击可能是试图让人们无法访问你的内容(见上文)，也可能是对个人候选人或网站背后的组织的更个人化的攻击。

这不同于由于新闻周期导致访问量激增而导致网站超载。我曾经在一个政党的网站上工作过，当这个政党为大选发布宣言时，网站变得不堪重负。那是第一次电子竞选意义重大的英国选举，我们只是没有为流量做好准备。

相反，DDoS 攻击会更尖锐、更突然，有时会在几分钟内出现非常突然的请求高峰。这看起来与交通的自然高峰非常不同，虽然它可能是突然的，但通常会采取曲线的形式，而不是悬崖。

如果您正在开展一项活动(由于额外的宣传，这可能会使您更容易受到攻击)，那么确保您的网站保持可操作性，而不是在您可以专注于活动的时候浪费时间处理攻击，这将是特别重要的。这就是为什么采取以下步骤来保护您的网站免受有政治动机的 DDoS 攻击是至关重要的。

DDoS 攻击的影响

DDoS 攻击可能会产生多种影响，这取决于攻击的性质和您对攻击的准备程度。

1.网站宕机

最直接最明显的影响就是你的网站不堪重负，变得不可用。

这意味着你通过你的网站获得的任何业务都将无法为你所用，直到你的网站重新运行起来。这也会影响你作为网站所有者的声誉。如果你不迅速修复网站，它会影响你的搜索引擎优化，就像谷歌抓取你的网站，发现它停止运行，你会失去排名。

如果你的网站因为超载而不可用，它将返回一个 502 坏网关错误，如果你让它保持这种状态太久，这将对你的搜索排名产生负面影响。

我也看到过这样的攻击，网站已经好几天不可用了(因为所有者不知道如何修复它，也没有保留备份，不久又有更多)，当网站重新上线时，该网站的 Google 列表中的所有内部链接都丢失了。

2.服务器和主机问题

如果你的网站经常受到攻击，而你没有采取措施缓解，这可能会导致你的主机提供商出现问题。

一个好的主机服务提供商会给你一些工具来保护你的网站免受 DDoS 攻击，但是如果你没有这些工具并且你在共享主机上，攻击可能会影响同一服务器上的其他网站。

信息

Kinsta 实施由 Google 云平台支持的硬件防火墙、主动和被动安全以及其他高级功能，以防止访问您客户的数据。点击这里查看更多。

3.网站漏洞

DDoS 攻击可能会使您的网站更容易受到黑客攻击,因为您的所有系统都专注于使网站恢复在线，安全系统可能会因攻击而失去作用。

一旦 DDoS 攻击成功瘫痪了您的网站，黑客们可能会发现通过后门进入您的网站更加容易。

像这样的后续攻击不会总是来自与形成 DDoS 攻击的请求相同的来源:一个聪明的黑客将知道如何隐藏他们的踪迹并使用多个 IP 地址来攻击你的网站，以及如何隐藏他们的真实位置。

因此，如果你是 DDoS 攻击的受害者，你的首要任务之一应该是确保你的 WordPress 网站是安全的。可以说，这比让面向公众的网站重新运行更重要，因为另一次攻击只会让你回到起点(或者更糟)。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

4.损失的时间和金钱

修复遭受 DDoS 攻击的网站需要时间。也可以拿钱。

如果你不知道你的网站发生了什么，也没有为可能的攻击做好准备，你可能最终不得不从头开始重建你的网站(我见过发生这种情况的网站)。如果你没有对你的站点进行备份，你打算从开始恢复它吗？如果你不尽快修复，攻击可能会对你网站的搜索引擎优化和业务表现产生长期影响。

当网站关闭时，你可能会损失收入，特别是如果你的网站是一个电子商务商店。你可能还得花钱雇一个安全专家或 web enveloper 来重建你的网站，确保它免受未来的攻击。

所有这些都强调了保护你的网站免受 DDoS 攻击的重要性。我有一个客户，由于他们业务的性质，经常遭受攻击；因为我们设置了安全措施，这些从未对网站造成影响。如果你做好了准备，那么 DDoS 攻击也不会影响你的网站。

什么会使您的网站易受 DDoS 攻击？

有些网站比其他网站更容易受到 DDoS 攻击。这些要么会让你在一开始就更容易受到攻击，要么更容易受到攻击的后果的影响。

廉价托管

与所有类型的网络攻击一样，DDoS 攻击的第一个罪魁祸首是便宜的主机服务。

廉价主机有两个主要缺点:缺乏支持和客户数量。

为了使提供如此便宜的主机服务成为可能，主机服务提供商将有大量的客户使用同一个服务器，这意味着如果该服务器上的其他网站受到攻击，它可能会影响到你。

廉价的主机提供商不会提供针对 DDoS 攻击的安全预防措施，当攻击发生时他们不会警告你，当你的网站停止工作时他们也不会帮你修复。他们不会定期备份你的网站，即使他们这样做了，他们也不太可能帮助你恢复你的网站:你必须自己想办法。

这并不是因为廉价的主机提供商试图欺骗你，或者因为他们不提供他们承诺的服务:这只是因为为了让他们的主机便宜，他们不得不克扣支持。否则，他们就赚不到钱。

如果你的网站支持一项业务或任何风险投资，其中你的声誉和网站的安全性是很重要的，那么投资高质量的主机服务是值得的。如果您避免了在网站遭到攻击时不得不花费时间修复网站，那么额外的成本是值得的，如果这意味着您的网站在试图遭受 DDoS 攻击时保持在线并且没有受到危害，那么这当然也是值得的。

信息

Kinsta 提供了一个恶意软件安全保证以及针对 DDoS 攻击的防火墙保护。

缺乏准备

未能对 DDoS 攻击的可能性做好准备并不一定能阻止它的发生，但这将意味着如果你受到攻击，你不会遭受太多损失。

首先，对潜在的攻击采取安全预防措施将会增加你的网站在遭受攻击后保持在线的机会。

但是了解如何阻止 DDoS 攻击也会有所帮助。如果你的网站被攻击了，如果你做好了准备，你就能比没有准备时更快地恢复运行。

与宕机和 WordPress 问题做斗争？Kinsta 是一款考虑到性能和安全性的托管解决方案！查看我们的计划

安装安全软件或利用主机提供商提供的安全警报意味着如果你的网站受到攻击，你会收到警报，你或你的主机提供商可以采取行动保护你的网站。

对你的站点进行定期备份意味着如果它出现问题，你可以快速恢复它。

保持你的网站是最新的意味着它本质上更安全，如果你不得不重建它，也不太可能遇到问题。

不安全或过时的代码

保持你的 WordPress 版本以及你的主题和插件最新不会保护你免受 DDoS 攻击。

但是，如果你受到攻击，而随后你的网站的弱点被黑客利用作为获得不必要的访问的机会，如果你的网站管理良好，他们成功的可能性将会小得多。

预防措施包括保持你的网站更新，以及只安装来自知名来源的插件和主题。WordPress 主题和插件目录是目前为止找到免费主题和插件的最好地方，著名的开发者会在那里提供它们。注意不要安装可能导致与你的主机不兼容的代码，也不要安装无效的主题或插件。

如何保护您的网站免受 DDoS 攻击

现在，对于你一直渴望知道答案的问题:如何保护你的网站免受 DDoS 攻击？

您可以采取多种预防措施，具体选择哪种取决于您的设置、预算和偏好。

我们来看看选项。

来自主机提供商的保护

Kinsta hosting 有许多功能可以降低您遭受 DDoS 攻击的几率。

Kinsta 托管的所有站点都受到我们的 Cloudflare integration 的保护，它具有内置 DDoS 保护的安全防火墙。我们还利用基于软件的严格限制来进一步保护您的网站。所有这些都使得 DDoS 攻击更加难以通过。

一旦 DDoS 攻击开始，另一个可以帮助保护您的 Kinsta 功能是 IP 地理定位拦截。Kinsta 会检测到任何 DDoS 攻击，并向您发出警报。然后，您可以使用 Geo IP 阻止功能来阻止 DDoS 攻击来自的地理区域。

这意味着您可以安全地阻止攻击来自的地理区域，该区域的 IP 地址将无法再向您的站点发送请求。

或者，你可以通过 IP Deny 页面屏蔽 MyKinsta 中的单个 IP。

Kinsta’s IP deny feature

然而，残酷的事实来了:无论你的主机提供商有多好，他们都不可能提供完全的防御 DDoS 攻击的保护。一个好的主机提供商会做的是提供一个好的防火墙，这将减少攻击的机会，但不会完全消除它。一旦 DDoS 攻击开始，他们还会提供您或他们可以用来阻止它的工具，例如 IP 拦截。

这就是为什么任何声称为你提供 DDoS 攻击全面保护的主机提供商都不是完全诚实的。他们可以降低攻击的可能性，限制攻击的影响，但他们无法完全阻止 DDoS 攻击。

相反，为了更彻底地保护自己免受 DDoS 攻击，您需要使用一个庞大的网络，该网络可以使用其关于世界各地其他站点的攻击的信息数据库来预测攻击并阻止它们可能来自的 IP。让我们来看看其中的一些服务。

云耀斑

Cloudflare 是互联网上最受欢迎的内容交付网络提供商之一，它还提供针对攻击和黑客的保护。由于其庞大的规模，它可以获得关于 DDoS 攻击来自哪里的信息，然后可以阻止其网络上所有站点的 IP 地址。

Cloudflare DDoS protection

Cloudflare 基于云的网络始终处于开启状态并不断学习，这意味着它可以全天候识别潜在的攻击并阻止不必要的流量到达您的站点。它还为您提供了一个仪表板，您可以使用它来监控和减少 DDoS 攻击，以便您可以确定您的漏洞可能是什么。

如果您的站点托管在 Kinsta 上，您就不需要设置自己的 Cloudflare 帐户。我们基础架构上的所有站点都受到我们免费的 Cloudflare 集成的保护。

苏库里

Sucuri 是一家因提供黑客攻击后清理网站并帮助防止此类事件再次发生的服务而闻名的公司。但它也提供 DDoS 保护

Kinsta 上托管的网站不支持 Sucuri。在 Kinsta，我们的基础架构由安全的 Cloudflare 防火墙保护，内置 DDoS 保护。此外，我们执行例行的恶意软件扫描，并根据我们的恶意软件安全承诺提供免费的恶意软件删除服务。

Sucuri DDoS protection

Sucuri 的服务之所以有效，是因为它非常庞大，拥有超过 40 万名客户的网络，这意味着它可以像 Cloudflare 一样保留一个攻击数据库。这些 IP 地址可以在你的网站上被屏蔽。

Sucuri 的网络没有 Cloudflare 的大，但如果你也想要高级安全功能和监控，该公司值得考虑，这是他们的专长所在。Sucuri 将监控你的网站的停机时间和攻击或黑客，并将修复任何发生的黑客攻击。

因此，如果你确实遭受了 DDoS 攻击，你的 WordPress 网站在脆弱的时候被黑了，与 Sucuri 在一起意味着你可以尽快让它恢复运行。

DDoS attacks are spreading like fire but why in the world would anyone attack your site? Well, there are plenty of reasons... (and ways to keep your site protected) 👨‍🚒🛡️Click to Tweet

摘要

DDoS 攻击正变得越来越普遍，它们有可能造成价值数十亿美元的损失。

完全保护自己免受 DDoS 攻击是不可能的，因为你无法控制进入你网站的流量。但是，如果你使用上述服务之一，避免廉价的主机服务，并在 DDoS 攻击发生时做好准备，那么你遭受攻击的可能性就会小得多。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是防火墙？不同类型的防火墙以及您是否需要防火墙的入门指南

原文：https://kinsta.com/blog/what-is-a-firewall/

每个网站都需要保护。就像你的个人电脑一样，在线服务器也可能成为攻击的目标。你需要一种方法来阻止黑客或其他非法流量来源。这就是防火墙的用武之地。

简而言之，什么是防火墙？它是计算机和“外部世界”之间的一道屏障。

如果你的网站没有受到保护，恶意行为者可能会对你的服务器造成严重破坏，这就是为什么你应该尽一切努力来保护你的 WordPress 网站。设置防火墙应该是你的首要任务之一。

但是有许多不同类型的防火墙，您可能不知道从哪里开始。

A firewall is the barrier between your computer & the outside world. 🔥 So how do you choose the right one to keep your website safe from hackers? 🦹‍♂️ Read on for recommendations ⤵️Click to Tweet

让我们来看一下所有类型的防火墙，何时需要，以及如何在服务器上安装。

什么是防火墙？防火墙是做什么的？

每当你访问一个网站，你基本上是连接到另一台电脑:网络服务器。但是因为服务器只是一种特殊的计算机，它容易受到与你的个人电脑相同的攻击。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

如此直接地连接到另一个设备而中间没有任何保护是不安全的。一旦这种联系建立起来，就很容易让对方感染上恶意软件或者发起 DDoS 攻击。

这就是防火墙的作用。它是你和任何其他试图连接到你的设备之间的媒介，或者在 web 服务器的情况下，是它和它每天与其他设备建立的成百上千个连接之间的媒介。

Connecting to a web server

那么防火墙到底是如何工作的呢？

防火墙只是监控设备上的进出流量，扫描任何恶意活动的迹象。如果它检测到可疑的东西，它会立即阻止它到达目的地。

对你的电脑或者服务器来说是一个很大的过滤系统。

最初开发时，防火墙是非常简单的数据包分析器，它根据一组最小的预定义规则来允许或阻止传入流量。它们很容易被绕过。

如今，它们已经演变成复杂的程序，能够更好地抵御企图入侵，是所有设备的必备软件。

重要的

Kinsta 上托管的所有网站都自动受到我们免费的 Cloudflare 集成的保护，其中包括安全的防火墙和 DDoS 保护。点击此处了解更多。

当你需要防火墙的时候

您可能想知道:什么时候需要防火墙？我真的需要一个吗？

任何连接到互联网的机器都需要防火墙。不仅仅是你的电脑，还有你的网络服务器、手机、物联网设备，或者任何你能想到的有能力使用互联网的东西。

未受保护的设备很容易受到入侵和感染。

这可能让黑客有能力接管你的电脑，安装他们想要的任何东西，监视你输入的敏感信息，如银行凭证，甚至通过你的网络摄像头/摄像机，通过你的麦克风监听。

在网络服务器的情况下，如果黑客设法通过，他们可以破坏你的网站，嵌入感染你的访问者的恶意软件，改变你的 WordPress 管理员登录凭证，或者完全关闭你的网站。

A 404 page

如果没有防火墙，您的网站甚至您的个人设备都容易受到 DDoS 攻击，这是一种攻击媒介，它会发送数千或数百万个虚假数据包，使您的服务器过载，并使您的网站或互联网瘫痪。

不服气？以下是防火墙可以保护您或您的网站免受的攻击:

• 入侵:防火墙阻止未经授权的用户远程访问你的电脑或服务器，为所欲为。
• 恶意软件:设法潜入的攻击者可以发送恶意软件来感染您或您的服务器。恶意软件可能窃取个人信息，传播给其他用户，或者以其他方式损害你的电脑。
• 暴力攻击:黑客试图尝试数百个用户名和密码组合来发现你的管理员(或其他用户)登录凭证。
• DDoS 攻击:防火墙(尤其是 web 应用防火墙)可以尝试检测 DDoS 攻击期间出现的虚假流量流入。

防火墙的类型

有许多不同类型的防火墙，每一种针对不同的情况而设计。有些更适合单台计算机，而有些则适合网络范围的过滤。

它们的工作方式各不相同，更擅长阻止某些类型的流量。如果您想知道应该寻找哪一种，我们将分解所有主要类型的防火墙。

这里有一个简短的总结:除非你运行自己的服务器堆栈(为网站提供自己的互联网)，否则你主要需要担心的防火墙类型是个人防火墙、软件防火墙和 web 应用程序防火墙。

这三个是最重要的。然而，如果你想更好地理解防火墙是如何工作的，以及这些年来它们是如何发展的，请多读一些其他的内容。

个人防火墙

防火墙的工作方式非常不同，这取决于它们是由单台计算机、整个网络(例如在一个商业办公室内)还是 web 服务器使用。个人防火墙只能在一台计算机上使用。这是预装在 Windows 和 Mac 计算机上或与您的防病毒软件一起提供的防火墙。

虽然它的工作方式类似于服务器防火墙(根据一组预定义的规则允许或拒绝来自其他设备、应用程序和 IP 的连接)，但在功能上却略有不同。

个人防火墙可以保护您使用连接到网站和在线应用程序的端口(窃取它们，使攻击者看不到它们是打开的)，防御通过网络的攻击，防止人们访问和接管您的计算机，并分析所有进出的流量。

它们还充当应用程序防火墙，监控设备上应用程序的活动，并拒绝允许与不安全或未知软件建立连接。

如今，获得个人防火墙相当容易。如果你使用任何现代版本的 Windows，默认情况下应该已经有一个在运行了。

Windows Defender Firewall

Mac 电脑也配有一个，不过你需要自己打开它。为此，请导航到“系统偏好设置”，点按“安全性与隐私”，然后点按“防火墙:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

Firewall application in macOS

防病毒软件也经常自带。Avast antivirus 就是一个例子:它的软件防火墙与 Windows 兼容，是第二道防线。

付费的第三方个人防火墙也存在，但这些会与您的默认设置冲突。

硬件 vs 软件防火墙

防火墙有两种不同的形式:硬件防火墙和软件防火墙。软件防火墙是可下载的计算机程序，通过中央控制面板对其进行监控。硬件防火墙提供类似的功能，但它们是物理安装在建筑物中的。

你可能不知道，但你家里可能有某种形式的硬件防火墙:你的路由器，让你连接到互联网的设备。虽然它与专用硬件防火墙设备不完全相同，但它提供了类似的监控和允许或拒绝连接的功能。

软件和硬件防火墙都位于你的计算机和外界之间，仔细分析任何试图通过的连接。您可以让其中一个或两个在您的网络上运行。

然而，硬件防火墙也有一些缺点。它们很难安装，并且需要持续维护，因此通常不适合单台计算机或没有 IT 部门的小型企业。它们会导致性能问题，尤其是当与软件防火墙叠加时。它们不适合阻止设备上的应用程序或基于用户的限制。

另一方面，硬件防火墙会很容易地保护你的整个计算机网络，而安装软件则是一项比较困难的任务。虽然攻击者可以在设法进入时禁用软件，但他们无法篡改物理设备。

软件防火墙，顾名思义，更擅长与计算机上的程序一起工作。拦截应用、管理用户、生成日志、监控你网络上的用户是他们的专长。它们不太容易在网络范围内配置，但当安装在多个设备上时，它们允许更好的控制。

包过滤防火墙

最简单的防火墙是包过滤防火墙，也是最早开发的防火墙之一。数据包是计算机和服务器之间交换的数据。当您点击链接、上传文件或发送电子邮件时，您会向服务器发送一个数据包。当你加载一个网页时，它会向你发送数据包。

包过滤防火墙分析这些数据包，并根据一组预定义的规则阻止它们。例如，您可以阻止来自某个服务器或 IP 地址的数据包，或者那些试图到达您的服务器上的某个目的地的数据包。

缺点:这些类型的防火墙简单且容易被欺骗。没有办法应用高级规则。如果您允许流量通过某个端口，包过滤防火墙会让任何东西通过，甚至对现代防火墙来说显然是不合法的流量。

唯一的好处是它们非常简单，对性能几乎没有影响。它们不检查流量、保存日志或执行任何高级功能。如今，应该避免使用包过滤防火墙，或者至少与更先进的技术一起使用，因为有更好的解决方案。

需要一个超快的、可靠的、完全安全的网站托管吗？Kinsta 提供所有这些以及 WordPress 专家提供的 24/7 世界级支持。查看我们的计划

状态防火墙

在“无状态”之后，简单的包过滤出现了有状态防火墙技术。这是革命性的，因为有状态防火墙处理动态信息，并在数据包通过网络时继续监控数据包，而不只是在数据包通过时进行分析并根据简单的参数进行拒绝。

简单的包过滤防火墙只能基于静态信息(如 IP 地址或端口)进行拦截。状态防火墙更擅长检测和阻止非法流量，因为它们可以识别模式和其他高级概念。

与无状态防火墙相比，缺点是由于将数据包存储在内存中并对其进行更严格的分析，加上记录哪些被阻止，哪些通过，所以它们更加密集。但它们是更好的解决方案。

Web 应用防火墙

How WAFs work

虽然有状态技术今天仍在使用，但仅靠它已不足以有效地保证网络安全。应用程序和 Web 应用程序防火墙是下一个重大进展。

传统的防火墙只监控网络上的一般流量。他们很难或完全无法检测到来自应用程序、服务或其他软件的流量。应用程序防火墙被设计成与这些程序一起工作，捕捉利用软件漏洞溜过旧防火墙的入侵企图。

它们还可以作为企业的家长控制系统，完全阻止对某些应用程序和网站的访问。

Web 应用程序防火墙的工作方式类似，但它们监控的是 web 应用程序，而不是计算机上的程序。web 应用程序的例子是第三方表单或购物车插件，它们有时会被劫持来向您的服务器发送恶意软件。没有 WAF，你很容易受到这些攻击。

许多 WAFs 是基于云的，这意味着你不需要对你的服务器做任何根本性的改变来设置它们。但是它们也可以存在于硬件或服务器软件中。

如果你需要一个防火墙服务来保护你的网站，找一个像 Cloudflare 或 Sucuri 这样的基于云的 WAF。这些可以安装，而不必摆弄敏感的网络主机设置或设置昂贵的硬件。

下一代防火墙

最后是下一代防火墙(NGFW)，这是这一代安全技术的最新发明之一。这些企业级工具就像上述所有工具合二为一。深度包过滤、入侵防御和应用程序监控只是其众多网络功能中的一部分。

下一代云防火墙确实作为一种在线服务存在，但 WAFs 更常见，并提供类似的功能。但是如果你想要绝对最先进的防火墙技术，在一个程序中拥有一整套安全保护，那么就去找 NGFW 吧。

如何获得防火墙

为了保护你自己和你的网站，你需要一个高质量的防火墙来阻止入侵者。

就个人防火墙而言，通常没有必要特意去弄一个。Windows 的内置防火墙在没有任何配置的情况下也能很好地工作。在防病毒软件自带的应用程序防火墙和路由器上的包过滤之间，您的计算机通常得到了更多的保护。

只要确保你的防火墙被激活，你有一个好的防病毒软件安装，你的路由器配置正确。macOS 用户也可以这么说。

但是如果你有一个网站需要保护呢？

那就大不一样了。没有那么多内置的工具来保护你，通常是由你来保护你的网站。例如，如果你运行 WordPress，没有防火墙或任何东西来保护你的服务器，而安全插件是最常见的选项之一。

WordPress 开发者尽最大努力保持代码优化，但是当漏洞出现时，你没有办法阻止入侵。

每个站点都可以从 WAF 中受益。像 Sucuri 、 Wordfence 、 Cloudflare 这样的在线服务可以在几分钟内在你的服务器上安装一个。

Kinsta provides active and passive measures for improved security

除了自己安装防火墙之外，你还应该选择一个能够妥善管理他们的服务器的网络主机。太多廉价的主机不关心安全问题，如果你的网站遭到攻击，这可能会导致巨大的问题。

Kinsta 的 Cloudflare 集成

如果你的网站托管在 Kinsta 上，你就不必担心手动设置 WAF。我们基础设施上的所有站点都自动受到我们的免费 Cloudflare 集成的保护，其中包括一个带有自定义规则集和免费 DDoS 保护的安全防火墙。除了我们的 Cloudflare 集成，我们还实施了其他安全措施，如暴力检测、仅 SFTP 文件访问、谷歌云平台虚拟机、全面的恶意软件删除承诺等等。

总结

在现代个人电脑上，你通常不需要做太多事情，因为大多数操作系统都预装了防火墙。至于你的网站，太多的主机只是不关心保护他们的服务器，所以保护自己就成了你的工作。

如果你正在寻找一个有可靠安全基础设施的网络主机，可以支持任何规模的网站，考虑 Kinsta。有了我们免费的 Cloudflare 集成和安全保障，你知道你不会成为黑客攻击的受害者。在他们取得突破的罕见机会上，我们将采取措施免费清除恶意软件。

即使你选择了一个可靠的主机，在安全性上投入了很多，安装一个 web 应用防火墙作为第二道防线也是一个好主意。找一个像 Sucuri 这样的好服务，或者下载一个 WordPress 安全插件，你就可以开始了。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是全栈开发者？全栈开发指南

原文：https://kinsta.com/blog/what-is-a-full-stack-developer/

如果你对目前的开发角色感到厌倦，转换到全栈开发工作可能是你职业生涯中最好的事情。

根据 LinkedIn 的《2020 年新兴工作报告》,全栈开发人员的工作在增长的工作中排名第四位。美国劳工统计局(BLS)的研究显示了类似的轨迹，因为他们估计，到 2029 年，网络开发和设计工作将增加 8% 。

但是什么是全栈开发者，他们做什么，你如何成为一个？请继续阅读，我们将告诉您成为全栈开发人员所需了解的一切。

让我们开始吧！

T3】

“全栈”是什么意思？

在成为全栈开发人员之前，您需要理解术语“全栈”以“全栈”能力工作的开发人员在前端和后端开发项目上工作。

前端开发(或客户端开发)项目包括用户看到的任何东西。它包括客户与之交互的网站和 web 应用程序(就像电子商务 web 应用程序的界面)。

后端开发(或服务器端开发)项目包括网站或 web 应用程序的任何幕后部分。具体来说，后端开发关注三件事:

1. 服务器:运行网站后端的电脑
2. 数据库:网站存储数据的空间
3. 应用:与服务器和数据库通信的工具

由于全栈开发人员同时从事前端和后端项目，他们需要在工作中同时使用前端和后端编程语言和工具。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

这包括用于前端开发的语言，如 HTML 、 JavaScript 和 CSS ，以及用于后端开发的编程语言，如 Java、 Python 和 Ruby。

但是除了编码，全栈开发人员每天还做些什么呢？

对目前的角色感到厌烦吗？😴了解全栈开发职业可以提供什么👀 点击推文

全栈开发者做什么？

作为一名全栈开发人员，您的日常职责会因您工作的公司、您所在的行业和您的专业知识而有所不同。所有这些因素都会影响雇主给你的工作类型。

然而，如果你看看全栈开发人员的招聘信息，你会注意到许多职位都有十个典型的职责。其中包括:

• 设计新网站和基于网络的程序的架构。
• 开发应用程序编程接口(API)。API 是帮助应用程序相互通信的软件中介。
• 在设计新网站或程序时，与用户合作，了解他们的技术需求。
• 开发更新以增强网站后端的可用性和功能。
• 维护一个网站的前端，以确保它的工作。
• 优化网站确保它们对手机友好。
• 与平面设计师一起开发有吸引力和功能性的网站。
• 为网站创建服务器和数据库。
• 在系统开发生命周期(SDLC)的每个阶段监督项目。
• 与其他专业人员合作(包括 DevOps 工程师、网络安全专家、图形设计师和其他 web 开发人员)。

自然，由于全栈开发人员在工作中承担着广泛的责任，他们的报酬相当不错。

接下来我们来看看全栈开发者的平均工资。

全栈开发者赚多少？

让我们具体看看美国全职职位的一些数据。

根据 Glassdoor 的数据，全栈开发人员的平均年收入为 98，000 美元，大多数开发人员的收入在63，000 美元到156，000 美元之间。Glassdoor 的平均薪资数据是基于 3372 份薪资报告得出的。

根据 Payscale 的数据，全栈开发人员的平均基本工资为 75，057 美元，许多开发人员的年薪在 48，000 美元到 113，000 美元之间。

根据 Indeed 的数据，全栈开发人员的平均年收入为 104，396 美元。他们的数据基于 5000 份薪水的报告。

最后，根据 Talent.com 的调查，全栈开发的平均年薪为 107，434 美元，范围在每年87，750 美元到144，754 美元之间。Talent.com 的平均工资数字是基于 10，000 英镑的工资。

这些网站的平均工资差距很大。

这种偏离是由几个因素造成的，包括教育、经验、工作职责、公司(及其盈利能力)、工作地点以及该职位是否包括福利。

那么，全栈开发者的工资相比其他工作怎么样呢？

根据我们的计算，WordPress 开发人员在美国的平均全职工资为 63，348 美元，web 开发人员的平均工资在 T2 的 60，000 美元到 75，000 美元之间，PHP 开发人员的平均工资在 T4 的 63，000 美元(初级职位)和 94，000 美元(高级职位)之间。

这意味着全栈开发人员挣得更多——然而，全栈开发人员需要比其他开发人员掌握更广泛的工具和技术。

现在让我们来看看其中的一些工具。

成为全栈开发者需要哪些技能？

如果你想成为一名成功的全栈开发者，有十个前端和后端开发技巧和能力是你应该建立的。其中包括:

1.用前端语言编码的能力

由于全栈开发人员经常在网站前端工作，您需要掌握前端开发语言，如:

超文本标记语言

开发者使用超文本标记语言(HTML) 来创建网站的结构。当你创建带有不同标题、表格、列表、段落框和图片的网页时，你会用到 HTML。

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

开发者使用层叠样式表(CSS) 来创建网站用户界面的风格部分。

作为一名全栈开发人员，您将使用 CSS 添加风格元素(如颜色和字体)并为移动和平板设备调整网站。

java 描述语言

开发者使用 Javascript 来创建与用户交互的网页元素。

作为一名全栈开发人员，您将使用 Javascript 来构建功能部分，并将前端和后端的元素组合在一起。

例如，当创建按钮供用户点击时，可以使用 Javascript。

2.前端框架和库方面的专业知识

在前端开发项目中，全栈开发人员使用一系列框架和工具来快速工作。当然，如果您学习了这些框架和工具，会有所帮助，包括:

引导程序

Bootstrap 是一个广泛的代码框架，提供 HTML、CSS 和 Javascript 代码。Bootstrap 是目前世界上最流行的前端框架，所以它是你的武器库的一个极好的工具。

自举

jQuery 和 React

jQuery 和 React 都是开发者用于 JavaScript 项目的框架。

有角的

Angular 是一个开发人员用来构建网站和基于网络的应用程序的平台和框架。Angular 是一个非常新的工具，因为谷歌的 Angular 团队在 2016 年才发布了它。

对于需要设计在电脑、手机和平板电脑上一致工作的网站或 web 应用程序的开发人员来说，Angular 是一个绝佳的选择。

棱角分明

3.用后端语言编码的能力

由于全栈开发人员也处理网站的后端，你需要掌握后端开发语言，如:

服务器端编程语言（Professional Hypertext Preprocessor 的缩写）

超文本预处理器(PHP) 是一种用于 web 开发的通用脚本语言。

PHP 于 1995 年首次发布，此后一直相当流行，在所有已知语言的网站中，有 79.1% 在使用它。人们经常将 PHP 比作 Angular (尽管 Angular 是针对前端开发的)。

计算机编程语言

Python 是一种编程语言，可以追溯到 1991 年。Python 在处理数据库或构建 web 应用程序时特别有用。

Java 语言(一种计算机语言，尤用于创建网站)

Java 是一种基于对象的面向对象编程(OOP)语言。它于 1995 年首次发布，现在有 40.2%的软件开发者在使用它。

红宝石

Ruby 是另一种全栈开发人员使用的通用编程语言。Ruby 是一种开源语言，非常容易掌握。在所有已知服务器端编程语言的网站中，有 5% 使用 Ruby。

4.后端框架和库方面的专业知识

与前端开发一样，全栈开发人员使用一系列框架和工具来快速处理后端项目。

当然，您需要学习其中的一些工具和框架，包括:

Laravel 框架

Laravel framework 是一个 PHP 框架，它让开发者可以访问大量的预写代码库。Laravel 框架是开源的，遵循 MVC 架构模式(MVC 代表“模型、视图、控制器”)。

Github 上的 Laravel 框架

春天

Spring 是一个开源框架，开发者用它来快速地用 Java 构建项目。

Spring 使用面向方面编程(AOP)。AOP 是一种编程范式，它使用横切来创建一个灵活的程序，能够快速适应变化。

姜戈

Django 是一个可伸缩的、安全的、快速的框架，开发人员用它来用 Python 构建项目。Django 非常适合网站建设，因为它可以帮助你创建任何网站，并且可以与大多数客户端框架一起工作。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

5.数据库技能

在后端开发项目中，全栈开发人员需要构建和管理数据库。当然，您需要学习使用一些最流行的数据库工具，包括:

关系型数据库

MySQL 是开发者用来存储 web 数据库的免费开源数据库系统。

这是一个关系数据库管理系统，它将数据整理成表格。MySQL 也是 LAMP 软件栈的一部分(我们将在下一节介绍)。

MySQL

T4】

神谕

Oracle 是一个受大型项目和复杂数据库欢迎的数据库管理系统。Oracle 也使用关系数据库方法，尽管 Oracle 设计其系统专门用于复杂的数据库。

如果您想充分利用 MySQL 和 Oracle，您还需要学习使用结构化查询语言(SQL)。SQL 将帮助您与工具进行通信，以快速更新和检索数据。

MongoDB

MongoDB 是开发人员用于 web 应用的数据库工具。与 Oracle 和 MySQL 不同，MongoDB 不使用 SQL，因此您不需要学习如何使用 SQL 来使用 MongoDB。

6.流行书库方面的专业知识

作为一个全栈开发者，你需要学习使用流行的技术栈。

技术栈是用于产生网络应用、项目和网站的软件的集合。虽然您使用的栈将取决于您的雇主和团队，但是在成为全栈开发人员之前，您应该熟悉流行的栈。

这些流行的堆栈包括:

• LAMP 栈:包括 Linux、Apache、MySQL 和 PHP
• 平均栈:包括 MongoDB、 Express.js 、Angular.js、Node.js
• MERN 栈:包括 MongoDB、Express.js、React.js 和 Node.js
• SERN 栈:包括 SQL、Express.js、React.js、Node.js
• Django 栈:包括 Django、Python 和 MySQL
• Ruby on Rails 栈:包括 Ruby、SQLite 和 Rails

7.对 DevOps 的理解

根据您的组织，您可能需要以全栈开发人员的身份与 DevOps 工程师合作。DevOps 工程师将工具、实践和想法的组合应用到项目中，以帮助他们快速地从概念转移到发布。

当然，如果您需要采用 DevOps 方法，您应该了解 DevOps 框架。

DevOps 方法使用 SDLC 的修改版本，指导开发人员逐步构建和发布更新和项目(DevOps 工程师称之为“持续集成/持续交付”或 CI/CD)。

DevOps 生命周期(来源: 亚特兰蒂斯 )

一旦你理解了什么是 DevOps，你就会想要学习如何从这个方法中获得最大的收益。这意味着掌握以下工具:

• Atlassian Bamboo 和 Jenkins，自动化重复任务
• 木偶和厨师，帮助 DevOps 工程师配置系统的不同元素，使它们保持一致
• Nagios 和 Raygun，允许开发人员在部署后跟踪项目的性能
• Docker 和 Kubernetes，帮助开发人员将代码打包并部署到容器中

8.对 UX 设计原则的理解

由于全栈开发人员建立了许多网站，你需要学习如何使用用户体验(UX)设计原则来设计一个伟大的网站。这些原则包括:

需要为你的 WordPress 站点提供超快的、可靠的、完全安全的托管服务吗？Kinsta 提供所有这些以及 WordPress 专家提供的 24/7 世界级支持。查看我们的计划

• 关注用户
• 使用一致性
• 用层次结构构建你的网站(也就是说，把基本元素放在第一位)
• 为移动和桌面设备设计您的网站
• 让用户控制他们在网站上的体验
• 让所有用户都可以访问您的网站(即，确保盲人、聋人和色盲者可以与您的网站互动)
• 在发布之前，测试你的网站的可用性

9.使用开发工具的经验

如果你有开发背景，你可能已经知道如何使用必不可少的开发工具，比如 BitBucket、GitHub 和 Git。然而，作为一名全栈开发人员，您将进行大量的 web 开发，您也应该学会使用 web 开发工具,例如:

• MAMP
• XAMPP
• 图
• 素描
• 视觉工作室

你可能还需要学习如何使用 WordPress 开发工具，比如 DevKinsta 。DevKinsta 是一套免费的工具，可以帮助你建立、开发和测试 WordPress 网站。

目前有超过 10，000 名专业人士在使用 DevKinsta，包括网页设计师、自由职业者和开发人员。

德夫金斯塔

10.伟大的软技能

最后，任何开发人员都需要出色的软技能。虽然全栈开发是一项技术工作，但您需要与同事和用户合作来交付每个项目。

当然，您需要:

• 出色的积极倾听技巧:帮助你理解他人的观点
• 出色的团队合作技巧:帮助你与他人合作
• 接受建设性反馈的能力:你需要根据同事和用户的反馈调整你的工作
• 指导其他开发人员的能力:你的雇主可能希望你将自己的专长借给仍在培养技能的初级开发人员
• 时间管理技巧:你可能需要同时兼顾多个项目

那么，假设你拥有我们讨论过的所有 10 种技能，为什么要将它们应用到全栈开发中呢？

为什么要成为全栈开发者？

由于大多数全栈开发人员的年薪超过 75，000 美元，因此全栈开发是一个利润丰厚的职业。但它也提供了其他好处。

作为一名全栈开发人员，您将在前端和后端开发之间架起一座桥梁。这将给你一个独特的 web 开发方法，因为你将在一个项目的每个方面工作(而不仅仅是一个微小的部分)。

当你把一个项目从概念带到发布时，许多开发人员发现这部分角色令人满意。

对于喜欢在工作中展示不同肌肉的专业人士来说，全栈开发也是一个很好的职业。全栈开发人员使用许多工具和技能，从事各种各样的项目，这意味着您的工作将非常引人入胜。

作为一名全栈开发人员，你将学到许多技能，你也将成为雇主的一笔巨大财富。自然，如果你有兴趣进入管理角色，全栈开发可能是完美的垫脚石(取决于你的公司)。

那么，如何从全栈开始呢？

如何成为全栈开发人员

由于您需要很强的软件开发技能才能成功担任全栈开发人员的角色，大多数全栈开发人员在从事另一份软件开发工作后会过渡到这个职位。

如果你之前没有做过开发，不妨考虑先从事 web 开发、 java 开发、、软件工程师、前端开发、或者后端开发的工作。

一旦您有了一些经验，您可以通过以下步骤过渡到全栈角色:

第一步:掌握基础知识

首先，你需要提高你的编程技能。虽然你不需要精通每一种语言，但我们建议你提高以下方面的技能:

• 半铸钢ˌ钢性铸铁(Cast Semi-Steel)
• java 描述语言
• 超文本标记语言
• Java 语言(一种计算机语言，尤用于创建网站)
• 计算机编程语言
• 红宝石

有许多资源可以用来培养你的开发技能。例如，你可以使用 Odin 项目这样的资源，它会教你全栈开发的基础知识，以及如何使用 Ruby on Rails 和 Javascript 进行开发。

奥丁项目

由于 WordPress 现在支持互联网上 40%的网站，你也应该学习如何使用 WordPress 来管理网站，开发主题，以及使用插件。

虽然你可以通过试错来学习，但是学习 WordPress 的最好方式是通过在线课程。

如果你以前没有用过 PHP，你应该在学习 WordPress 的时候熟悉它。

由于 WordPress 主要建立在 PHP 之上，你可能需要 PHP 来进行后端开发。参加课程是学习 PHP 的好方法。你也可以安装 PHP ，并随着时间的推移建立你的技能。

第二步:增加你的知识

一旦掌握了基础知识，您应该通过增强知识和培养技能来为新的全栈开发角色做准备。有许多方法可以做到这一点，包括:

• 找出你知识中的差距，并通过练习或辅导来填补它们
• 在你的工作场所请一位全栈开发人员指导你，并就你对工作的准备情况给你反馈
• 通过编码训练营或在线认证提升技能，如 LinkedIn 的全栈 Web 开发人员学习课程或 IBM 的全栈云开发人员专业证书。

LinkedIn Learning 的全栈开发者课程

你也应该通过 StackOverFlow 这样的网站和 r/fullstack 这样的子编辑加入在线全栈开发社区。加入社区将有助于你通过观察他人来学习，因为你可以看到他们是如何解决问题的。

开发者在线对话的 r/fullstack subreddit 页面

第三步:创建作品集，申请工作

接下来，你应该建立一个数字作品集来展示你的全栈开发技能。理想情况下，你的作品集应该记录两到四个你的 web 开发项目。

最佳投资组合非常简单，因为它们包括:

• 每个网站或项目的链接
• 对每个项目使用的工具和流程的详细说明
• 您对流程的任何反思(例如，哪些工作做得好，您面临的任何挑战，您从流程中学到了什么)

一旦你完成了你的作品集，把它添加到你的简历中，开始申请全栈工作。您可以在以下网站上找到全筹码头寸:

• 的确
• 玻璃门
• LinkedIn

帮助你找到工作的建议

当你还在进入这个领域的时候，寻找一份全栈开发的工作可能会让人望而生畏。以下是一些帮助你获得完美角色的建议:

• 不要担心掌握每一种工具或语言，优先选择那些在你想要的工作中最适合你的
• 根据你的技能考虑选择一个合适的位置(例如，把自己标榜为全栈 WordPress 开发者)。
• 参加全栈会议，建立关系网，寻找导师
• 如果可能的话，和你的经理谈谈在你目前的工作中承担更多的全栈开发人员职责，因为这将帮助你更容易地过渡到全栈角色
• 从头开始开发你的投资组合网站，展示你的技能

你知道吗，到 2029 年，网页开发和设计工作将增长 8%。📈好奇吗？继续读...👀

摘要

如果您是一名寻求挑战的开发人员，那么转换到全栈开发工作可能是您职业生涯中的一个绝佳选择。

全栈开发职位要求很高，但也是值得的，因为你可以接手一个项目并从头开始构建。

成为一名开发者也是一项伟大的长期职业发展，因为 BLS 估计，从 2019 年到 2029 年，软件开发工作将增长 22% 。

作为一名成功的开发人员，你需要掌握 HTML、CSS、Javascript、Python、Java 和 Ruby 等编程语言。您还需要学习使用 Spring、Laravel、Bootstrap 等框架，以及 DevKinsta 等 web 开发工具。

当然，这不是一个详尽的列表，所以如果你能想到新的全栈开发人员应该知道的任何其他工具，请在下面的评论中分享它们。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是播客？它们是如何工作的？

原文：https://kinsta.com/blog/what-is-a-podcast/

虽然“播客”这个词在 30 年前还不存在，但播客现在已经成为许多人日常生活的一部分。

根据爱迪生公司的调查，三分之一 12 岁以上的美国人每月听一次播客。这相当于超过 1 亿人。

那么，什么是播客，为什么人们会被它吸引？在本文中，我们将回答这两个问题，并告诉你如何找到播客，如何收听播客，以及如何定制您的播客收听体验。

让我们开始吧。

T3】

什么是播客？

播客是人们通过电脑、平板电脑或互联网收听的有组织的广播式节目。“互联网”是这里的关键，因为播客是在线发布的。

播客是一种非常灵活的媒体，因为:

• 播客可能由单集或数百集的系列组成
• 播客的长度从每集一分钟到数小时不等(平均长度为 41 分 31 秒
• 播客主持人(主持播客的主持人)可以涵盖任何话题
• 播客可以在 Twitch 或 Youtube 等平台上发布他们的节目，包括预先录制的节目或直播节目

虽然每个播客都有其独特的风格，但播客通常以三种方式之一来呈现他们的剧集:

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

1. 单机:可以听每集不听别人
2. 你必须按照设定的顺序听每一集，才能完全理解故事
3. 基于主题:你可以单独听每一集，但每一集都呈现了一个主题的细微差别，你可能需要听完所有集才能充分欣赏

播客还结合了许多娱乐类型的元素。如果你要用 15 个词或更少的词来描述一个播客，你可能会说它们结合了 YouTube 频道的亲切感和广播节目的制作质量。

虽然“播客”这个词在 30 年前还不存在，但播客现在已经成为许多人日常生活的一部分🎧了解更多关于这种日益流行的媒体就在这里⬇️ 点击推文

播客的历史

为了理解播客的历史，我们需要回溯近 20 年，直到 2001 年第一台 iPod 发布。尽管 iPods 不是市场上第一款便携式 MP3 播放器，但它们的发布与 Pandora 等广播和音乐流媒体平台的发布相吻合。

随着 iPod 越来越受欢迎，人们开始将广播节目下载到他们的设备上。

企业家亚当·库里和戴夫·维纳在 2004 年让这一切成为可能。他们开发了一款名为 iPodder 的 RSS(简易信息聚合)软件，可以将互联网上的广播下载到 iPods 上。

根据 Winer 的说法，第一个真正的播客是他与 Christopher Lydon(一个主持开源的电台主持人，一个现在是播客的电台节目)的采访。

人们也在争论“播客”这个词的起源，但它似乎部分源于本·哈默斯利在 2004 年发表的一篇题为“听觉革命”的文章虽然这篇文章没有使用“播客”，但它提出了三个类似的术语:音频博客、播客和游击队媒体。

后来，这些术语变成了“音频博客”和“播客”，最终“播客”越来越受欢迎(到 2004 年底，成千上万的谷歌搜索)。

播客的谷歌趋势结果(来源:谷歌趋势 )

正如谷歌趋势所表明的，播客在 2004 年后开始在全球流行。

那一年，全球有了第一家播客服务提供商——libsyn.com。然后，在 2005 年,“podcast”一词成为新牛津美国词典的年度词汇。

到 2009 年， 43%的美国人听说过播客，到 2019 年，这一数字上升到 70% 。同年，估计有 1.44 亿美国人收听播客，其中 9000 万听众每月收听一次。

那么今天的播客是什么样的呢？

播客的类型

2021 年有许多不同类型的播客，包括:

• 主持人以脱口秀形式展示内容的对话式播客
• 采访播客
• 讲述虚构故事的播客
• 讲述非虚构故事或历史事件的播客
• 教授您某个主题的讲座式播客
• 呈现客观报道的调查性新闻风格的播客
• 游戏节目风格的播客，参赛者互相竞争或与主持人竞争
• 来电播客，来电者参与讨论

由于播客是一种非常灵活的媒体，许多节目融合了这些不同“类型”的元素例如，受欢迎的播客的一些剧集回复了对嘉宾的采访，而主持人通过叙事故事呈现了其他剧集。

自然，播客的灵活性意味着人们可以用它来制作各种类型的内容。截至 2020 年 10 月，最受欢迎的类型包括喜剧、新闻、真实犯罪、体育、健康和健身。

最受欢迎的播客流派(来源: Statista )

如果你对媒体行业感兴趣，这些类型可能会让你想起另一种流行的娱乐媒体——广播。虽然广播和播客可能涵盖相似的类型，但它们并不相同。

播客与广播

正如我们在 " 播客的历史 " 一节中提到的，广播在创建播客中至关重要。然而，虽然这两种娱乐媒体可能有着共同的历史，但今天有许多不同之处。

这些差异包括:

• 管理:播客通常比广播更有管理性，因为制作人可以在发布前编辑它们
• 制作质量:许多播客包含背景音乐和声音效果，制作人员在后期制作时会对其进行编辑
• 视觉:播客可能包含视觉元素(在“音频和视频”部分有更多相关信息)
• 焦点:播客经常在多集里深入探讨一个话题的细微差别，而许多广播节目(尤其是早间和晚间节目)采用“轻松收听”的风格，人们可以随时收听和理解
• 广播媒体:播客通过互联网分发

虽然播客和广播不同，但它们也有相似的元素。这些元素包括对叙述者的依赖，分隔各个部分的广告插播，以及对讲述故事的音频的强烈关注。

播客如何工作

播客的世界通常是这样的。首先，有人录制了一个播客并对其进行编辑。然后，他们通过播客平台或使用内置音频播放器直接发布到他们的网站上。一旦播客制作人发布了他们的播客，消费者就可以通过他们的电脑、平板电脑或手机收听。

要理解播客是如何工作的，你需要理解两件关键的事情:视频播客和典型的播客格式。

音频和视频

播客最初是一种纯粹基于音频的媒体，但今天情况不同了。截至 2021 年 10 月，播客数据库 Listen Notes 估计在线播客超过 260 万。专家认为大约 17%的包含视觉元素。

这些视觉元素可以是:

• 显示播客主持人谈话的实时视频
• 用不同的图片、信息图和图表演示要点的幻灯片
• 预先录制的短剧、视频和采访

虽然视觉元素对于一个成功的播客来说不是必需的，但是它们可以让播客变得更好。这是因为视觉元素可以:

• 演示难以通过音频传达的关键点
• 允许播客通过在 Twitch 或 Youtube 等视频平台上为用户创建内容来吸引更广泛的观众
• 在主持人和听众之间创造一个亲密的环境
• 提供竞争优势，提高视频播客的投资回报率(ROI)

典型格式(预期内容)

正如我们在播客类型一节中提到的，每一个播客都有独特的风格。然而，大多数播客遵循这样的结构:**

*** 上一集发生的事情的摘要(如果播客是连续的)

• 1-5 分钟的介绍和标题序列(这是播客最重要的部分之一，因为它需要抓住消费者的注意力)
• 5-25 分钟的内容部分
• 1-4 分钟的广告阅读
• 另一段 5-25 分钟的内容
• 另一则 1-4 分钟长的广告
• 结论
• 下一集的预告(如果播客是连续的)

虽然这可能看起来类似于广播节目的格式，但播客有一些独特的怪癖，使它们与众不同。

例如，许多播客主持人会在每集结束时向帕特里翁的支持者大喊。Patreon 是一个会员制平台，粉丝们通过定期支付订阅费来筹集演出资金。

或者，许多播客以容易搜索的关键字来命名他们的播客，这样人们可以在网上找到它们。例如，一集关于 2021 年电子商务趋势的播客可能有一个类似“2021 年电子商务状况”的名称

为什么播客如此受欢迎

在 2004 年的文章“听觉革命”中，本·哈默斯利将播客的好处描述为“报纸只能梦想的东西”，因为播客具有“声音的亲切感、博客的交互性以及 MP3 下载的便利性和便携性。”

虽然播客自 2004 年以来发生了很大变化，但这些好处今天仍然有效——尤其是哈默斯利关于便携性的观点。

虽然播客是讲故事的优秀工具，但它们的吸引力很大一部分来自于灵活性。

许多人在跑步、遛狗、跑腿、打扫卫生和通勤上班时听播客。所有这些活动都需要某人的部分注意力——所以你不能在看电视或看书的时候做这些事情。但是你可以边听播客边做。

要理解人们为什么选择听播客，你只需要看看最流行的播客类型。由于人们最喜欢喜剧、新闻、真实犯罪、体育、健康和健身，我们知道他们听播客是为了欢笑、学习新东西、发展新技能、提升自己和了解时事。

这解释了为什么人们喜欢播客。但是他们为什么要开始呢？

虽然每个播客都有自己的“为什么”，但许多人和企业创建播客是为了:

• 向潜在顾客推销他们的服务
• 发展网络形象(创建有机内容并在网上发布可以为你的网站和业务带来有机流量
• 教人们他们已经掌握的技能
• 娱乐大众
• 通过募捐、捐赠或广告赚钱
• 开创喜剧、娱乐或表演事业
• 玩得开心(自己或者和朋友一起)
• 通过附属链接出售物品

值得一试的播客

根据 Listen Notes，目前在线可获得超过 260 万个播客和 1.15 亿个播客片段。自然，有很多播客可供选择——那么你应该从哪里开始呢？

如果你是一个新的播客听众，并且对商业、网页设计和电子商务感兴趣，你可能会喜欢我们五大最佳播客之一。

1.逆向工程

我们将从提及我们自己的逆向工程播客开始。这是一个由 Kinsta 首席运营官 Jon Penland 主持的商业播客。在每一集里，Jon 都会与成功的企业家和商业人士坐下来，询问他们的业务、成功以及任何可以与他人分享的知识。

金斯塔的“逆向工程”播客。

如果你正在寻找一个经过充分研究的播客，充满了有助于你发展业务的可操作的见解，你会喜欢逆向工程的。这对喜欢视频播客的人来说也很棒，因为每一集都包括乔恩采访的镜头。

你可以在这里找到它:

• Kinsta.com
• 苹果播客
• Spotify
• YouTube

或者，如果你想找一集来开始，我们推荐布拉德·米勒的“创造伟大的文化是业务增长的关键”或者约翰·多尔蒂的“吸引合格线索的秘密”。

2.我是如何建造这个的

《我是如何建造的》讲述了一些世界上最知名公司的不为人知的故事。由盖伊·拉兹主持，NPR 制作,《我是如何建立的》涵盖了公司的起源、早期以及使某些公司成功的“事情”。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

我是如何建立这个播客的

对于企业主、投资者和任何对创业感兴趣的人来说，这是一个有趣的倾听。它有一个独特的风格，包括叙述故事，采访创始人，和脱口秀部分。

虽然我如何建立这个不会教你如何开始自己的事业，但它会通过向你展示公司获得成功的许多方式来激励你。

你可以在这里找到它:

• NPR
• 苹果播客
• Spotify
• 谷歌播客

3.HBR 理念传播

HBR IdeaCast 是一个每周播客，涵盖影响全球企业主和经理的热门事件。

HBR

T4】

由《哈佛商业评论》资深编辑艾莉森·比尔德和柯特·尼克施主持的 HBR 创意节目采访了从制药到科技等各个领域的领袖和专家。截至 2021 年 10 月，HBR IdeaCast 已经发布了 820 集。

HBR IdeaCast 是一个非常好的播客，适合喜欢密集、知识丰富的剧集的人。

你可以在这里找到它:

• HBR.org
• 苹果播客
• Spotify

4.影响者播客

如果你曾经考虑过影响者营销，你会从影响者播客中学到很多。

由 Julie Solomon 主持的影响者播客涵盖了影响的商业方面，包括成为影响者，通过影响发展你的品牌，以及影响者营销的科学。

该播客包括所罗门的故事，对品牌所有者和影响者的采访，以及对崭露头角的影响者的建议。虽然名字可能表明它专注于社交媒体，但 Solomon 涵盖了在网络上有影响力的影响者和思想领袖。

你可以在这里找到它:

• Juliesolomon.net
• 苹果播客
• Spotify

5.显影剂茶

Developer Tea 是一个商业和软件开发播客，涵盖网页设计、内容创作、产品设计、软件工程和专业开发。

由 PBSs 技术总监 Jonathan Cutrell 主持的 Developer Tea 包括对行业领导者的采访、讲座式教育和哲学思考。

开发者茶不仅仅是为开发者准备的，因为它包含了大量有助于品牌所有者、营销人员和任何从事数字产品后端工作的人改进工作的信息。

与我们世界一流的支持团队一起体验卓越的 WordPress 托管支持！与支持我们财富 500 强客户的同一个团队聊天。查看我们的计划

你可以在这里找到它:

• Developertea.com
• 苹果播客
• 谷歌播客
• Spotify

如何收听播客

听播客与听音乐非常相似:你打开播客服务，选择一个播客，然后按“播放”然后，您可以暂停您的播客，向前或向后跳过，或下载您的播客供以后使用。

听播客需要两个关键的东西:一个听播客的平台和一个可以欣赏的播客。

让我们从讨论播客平台开始。

顶级播客平台

播客平台是播客用户和播客消费者之间的中介。

虽然网上有几十个播客平台，但 76%的播客消费者依赖四个平台:Spotify、苹果播客、谷歌播客和 Pandora。

Spotify

Spotify 拥有超过 220 万个播客，统治着播客市场。你可以通过 iOS 设备、Android 设备、Spotify 桌面应用程序和 spotify.com 在线收听 Spotify 上的播客。

你可以在 Spotify 上免费下载播客。

苹果播客

苹果播客也是该行业的巨头，因为它目前拥有超过 200 万播客，在 170 多个国家运营。Apple Podcasts 可在 iPhone、iPad、Mac 和 Apple TV 上使用。如果您有 Windows 电脑，也可以通过 iTunes 访问它。

您可以免费使用 Apple Podcasts。

谷歌播客

谷歌播客是一个较新的播客应用程序，因为谷歌在 2018 年才发布它。然而，尽管年代久远，它仍然非常受欢迎，在谷歌 Play 商店上有超过 496，000 条评论。

目前，谷歌播客可以在 Android 设备、iPhone、谷歌 Nest 和谷歌 Home 上使用。

你可以免费使用它。

潘多拉

潘多拉是一个音乐和播客托管服务，可以追溯到 2004 年。Pandora 由 SiriusXM 控股公司所有，目前拥有5800 万用户。

Pandora 目前可以在 iOS 和 Android 设备、Google Home、Amazon Fire、Xbox One 和 pandora.com 上使用。潘多拉提供免费版本和付费计划。你可以通过免费版收听播客。

你不能在 Pandora 上下载播客进行离线收听。

查找播客的 3 种方法

一旦你选择了一个播客提供商，你需要找到一个播客来听，然后才能按下“播放”这里有三种方法可以找到播客。

1.浏览您推荐的播客

如果你通过 Spotify 或 Apple Podcasts 这样的平台收听播客，你可以通过浏览平台的“推荐”播客列表来找到新的节目。

这个列表是找到高质量播客的一个很好的方式，因为平台会推荐受听众欢迎、广受好评或当前流行的节目。

要在“推荐”列表中查找播客，只需:

• 去你的播客平台
• 点击“推荐”或“浏览”
• 向下滚动，直到找到您感兴趣的播客

2.使用互联网

正如在“典型格式(期待什么)”一节中提到的，许多播客听众通过像 Google、Yahoo 和 Bing 这样的搜索引擎找到新的播客。

要以这种方式查找播客，只需:

• 输入你感兴趣的话题，加上“播客”(比如“健康和健身播客”)
• 寻找 Spotify、Google 和 Apple Podcasts 上托管的 podcast，或者滚动搜索引擎推荐的列表

谷歌搜索结果为“健康与健身播客

一旦找到感兴趣的播客，您还可以使用互联网搜索评论。阅读评论可以帮助你从糟糕的播客中挑选好的播客。

3.使用听力笔记

Listen Notes 是一个播客搜索引擎，列出了超过 1.15 亿个播客片段。要在上面查找播客，您只需:

• 请访问听力笔记网站
• 键入与您想要的播客类型相关的关键词
• 向下滚动，直到找到您感兴趣的播客

如果您没有看到任何感兴趣的播客，请尝试点按其中一个标签来搜索相关节目。

订阅播客

一旦您开始收听播客，您可能会注意到播客主持人要求您“订阅”

当你订阅一个播客时，你会自动收到新的剧集。订阅播客是跟上新剧集的好方法，因为当新剧集发布时，你的播客平台会通知你并自动下载。

要订阅播客，请访问节目列表，然后按“订阅”或“关注”按钮(不同的平台使用不同的术语)。订阅后，您可以在“播客订阅”列表中找到它。

通过这篇指南，了解你需要知道的关于近年来最受欢迎的传播媒介之一的一切🎧🎙 点击推文

摘要

如果你喜欢策划的广播节目、纪录片或 Youtube 视频，你会喜欢播客。听播客是扩展你的思维、娱乐自己、了解世界和获得新技能的好方法，同时还能获得乐趣。

最重要的是，播客是灵活的。你可以在网上或网下，在你的电脑或手机上，在任何你想听的地方听。你只需要一个播客应用和一个播客来听。

当然，这引出了一个有趣的问题:你同意我们最喜欢的播客列表吗？如果不同意，你会向新的播客消费者推荐哪些播客？

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。**

什么是 SVG 文件(以及如何将 SVG 上传到 WordPress)？

原文：https://kinsta.com/blog/what-is-an-svg-file/

SVG 文件在开发人员和设计人员中特别受欢迎的主要原因是，它们是一种可缩放的图像格式，通常文件大小更小(有时小很多)，并且不会在 retina 屏幕上像素化。WordPress 默认不允许你上传 SVG 文件格式，主要是出于安全考虑。

今天我们将深入探讨什么是 SVG，它们如何有益，以及如何安全地启用 WordPress SVG 支持。我们还将讨论浏览器支持，以及如果您决定要切换到矢量图像格式的一些注意事项。

希望有一天我们会把 SVG 作为 WordPress 核心的一部分，但是我们还没有到那一步。

什么是 SVG 文件？

SVG(可缩放矢量图形)是一种基于 XML 的矢量图像，通常被网站和品牌用来在其网站上显示徽标和图标。维基百科将 SVG 定义为:

SVG(可缩放矢量图形)是一种基于 XML 的二维图形矢量图像格式，支持交互性和动画。SVG 规范是万维网联盟(W3C)自 1999 年以来开发的一种开放标准。

你甚至可以用代码或者文本编辑器来操作 SVG 文件。目前， 33%的网站使用 SVG，正如你在下面看到的，采用率正在快速增长。热门网站如 Google、Reddit、Dropbox、ESPN，甚至我们自己在 Kinsta 的网站都使用 SVG。

SVG usage statistics April 2020 – April 2021

SVG 文件浏览器支持

SVG 文件目前被所有主流浏览器支持，包括手机浏览器。您可能遇到的唯一问题是您是否仍然需要 IE8 支持，我们希望您不需要。IE8 在 T2 的浏览器市场份额只有 0.36%左右，并且不再受支持。这是 Lubos 写的一篇很棒的文章，关于为什么开发者应该停止支持 IE8、IE9 和 IE10 。从商业角度来看，这可能并不总是可能的，但他提出了一些好的观点。如果出于某种绝望的原因，您仍然需要 IE8 支持，您可以为您的 SVG 图像定义一个后备图像( PNG 或 JPG)，但是我们今天不会讨论这个。以下是支持的浏览器列表:

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

• Internet Explorer 9、10、11+和 Edge
• 火狐 2+
• 铬 4+
• Safari 3.1 以上版本
• Opera 10+
• iOS Safari 3.2+
• 安卓浏览器 3+
• Android 86+版火狐浏览器
• 迷你歌剧(全部)
• Opera Mobile 12+
• 安卓 89+版 Chrome
• 适用于 Android 12.12+的 UC 浏览器
• 三星互联网 4+
• QQ 浏览器 10.4
• 百度浏览器 7.12
• KaiOS 浏览器 2.5

SVG 浏览器支持

使用 SVG 文件的好处

SVG 文件是一种矢量格式，这意味着它们在浏览器和照片编辑工具中都可以自动缩放。这使得它们对于图形和网页设计师来说都很棒。通常情况下，当你试图在 Photoshop，Sketch 或 Paint 等工具中编辑 PNG 或 JPG 时，如果没有像素化，你就无法放大它们。有了 SVG，你可以无限放大它们，它们每次看起来都像像素一样完美(或者我们应该说向量一样完美)。这就是为什么他们是一个伟大的图像格式用于视网膜屏幕。

谷歌索引 SVG，这对 SEO 来说是个好消息。链接到文件本身的 SVG 内容将被编入索引，并显示在谷歌图像搜索中。通过进行高级图像搜索，你可以直接看到我们在 Kinsta 上使用的 SVG 插图。注意:内联 SVG，或者更确切地说，那些只由代码组成的 SVG，通常是没有索引的。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

SVG 通常(不总是)比 png 或 jpg 小。通过使用 SVGs，你实际上可以加速你的 WordPress 站点，因为你将减少你的整个页面大小。Genki 写了一篇很棒的文章，他比较了 SVG vs PNG vs JPEG 的大小，这里是我们的 JPG vs JPEG 比较。下面是他在测试中比较三种不同图像类型的一些收获。

JPG(优化大小:81.4 KB)

JPG image

PNG(优化大小:85.1 KB)

PNG image

SVG(优化大小:6.1 KB)

SVG image

如上所述，与 JPG 相比，SVG 的文件大小减少了 92.51% 。与巴新相比，为 92.83% 。这些都是非常令人印象深刻的文件大小差异。然而，有一个警告，当他测试更详细的图像时，SVG 最终实际上变得比 JPG 或 PNG 更大。

我们在所有的服务器上都启用了 GZIP，因此它们可以随时处理您的 SVG。免费试用 kin sta。

这就是为什么许多网站使用 SVG 来处理不太详细的图像，如徽标、图标等。因为他们会看到文件大小显著减小。但是对于更多细节丰富的图片，比如你的博客文章“特色图片”，你可能想坚持使用 PNG 或 JPG，但是你仍然可以优化它们。许多网站使用混合方法，在有意义的地方同时使用两种文件类型。

此外，值得注意的是，像脸书和推特这样的社交媒体网络不支持 SVG 分享。因此，如果你使用 SVGs 作为你的特色图片，你必须利用 Yoast SEO 功能，并上传一个 PNG 或 JPG 作为 OG 和 meta 标签，否则你可能会冒风险，你的特色图片根本不会显示。

为什么 SVG 安全性很重要

SVG 还不是 WordPress 核心的一部分的原因是有一些安全问题需要解决。你可以关注 WordPress core (#24251)中关于SVG 的积极讨论，这个讨论始于 2013 年。SVG 是一个 XML 文件，它本身暴露了不同的漏洞，而普通的图像格式不会受到影响。这些攻击包括 XML 外部实体攻击 (XXE)、炸弹嵌套实体和 XSS 攻击。

Mario Heiderich 发表了一篇颇有见地的演讲，讲述了由于使用 SVG 文件进行活动内容注入而带来的安全风险。给出的一个例子是 JavaScript 嵌入在 SVG 中，它实际上设法在 Skype 上呼叫 Mario。这有点吓人！WordPress 安全插件的作者 SecuPress ，也谈到了当向 WordPress 添加 SVG 时要小心的主题，以及以正确的方式做这件事的重要性。

资源库上的许多 SVG 插件都使用了下面的代码，这些代码简单地启用了 MIME 类型，允许将 SVG 上传到 WordPress 媒体库。这样做不安全！所以不要去下载你看到的第一个免费的 SVG 插件或者复制粘贴这段代码，认为你已经准备好了。

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

解决方案是SVG 需要被净化。净化基本上是清理代码或输入，以避免安全问题(如代码注入)、代码冲突和错误。这可能需要编码数据、过滤和验证字符串等。这就是 Daryll Doyle 的 SVG-Sanitizer 库发挥作用的地方，他称之为“他试图用 PHP 构建一个像样的 SVG sanitizer”看看的 SVG 消毒剂的演示，看看它的实际效果。

SVG sanitizer demo

考虑你的站点上谁有权上传 SVG 也很重要。例如，如果你在一个多作者的网站上，你不知道别人会上传什么样的 SVG，从而暴露你的网站。限制 SVG 上传给管理员和那些了解一些安全问题的人是明智的。
T3】

如何安全地启用 WordPress SVG 支持

Daryll 开发了一个插件，WP SVG(也称为安全 SVG ),当上传 SVG 图片到你的 WordPress 媒体库时,利用 SVG-Sanitizer 库。该插件还可以让你像在媒体库中查看普通图像一样查看 SVG。

WP SVG plugin

你可以从 WordPress 知识库免费下载安全 SVG ,或者在你的 WordPress 仪表盘的“添加新插件”下搜索它。只需简单点击几下，你就可以起身离开。

信息

这个插件没有收到任何最新的更新，所以在将它安装到您的生产站点之前，请确保在一个临时站点上测试它。

还有一个高级版本，可在wpsvg.com获得，它允许你限制某些用户上传 SVG 和额外的 SVG 优化。在下面的例子中，我们将简单地使用免费版本。

作为一个替代插件，你可能想要检查一下 SVG 支持。

我们在所有的服务器上都启用了 GZIP，因此它们可以随时处理您的 SVG。免费试用 kin sta。

在上传您的 SVG 文件之前，了解它们的行为与图像稍有不同是很重要的。当从照片编辑工具中导出 SVG 时，您会希望将文本导出为曲线(或创建轮廓)，否则，它在各种浏览器中的呈现可能会略有不同。

Affinity Designer – Export text as curves SVG

安装插件后，不需要任何设置，它会在上传时清理你的 SVG。在我们下面的测试网站上，你可以看到我们用一个 SVG 文件替换了我们的徽标，它可以像在媒体库中一样正常查看。

SVG in WordPress media library

这也允许我们使用主题的控制面板来改变 WordPress 标题中的 logo 到我们的 SVG 文件中。你可以在下面看到它确实提供了。svg 文件。现在在视网膜屏幕上看起来很漂亮。

SVG in WordPress header

我们必须做一个额外的调整。在 IE9-11 中，桌面和移动还不能正确缩放 SVG 文件。增加高度和宽度解决了这个问题。这可能因主题而异，但是在我们的测试站点上，我们简单地修改了我们的 header.php 文件并添加了这些自定义维度。一些 WordPress 主题使用 CSS 来修改缩放比例，这对于性能来说是不好的，但是由于这个原因，它可能需要你添加额外的代码来修复 IE 问题。

Modified header.php file for SVG IE scaling issue

就是这样！你现在已经安全地启用了 WordPress SVG 支持。WordPress 核心不认可或支持这个插件和/或方法，所以，当然，使用要自担风险。但是，如果您已经上传了只有 MIME 类型片段的 SVG，那么无论如何，请这样做。

此外，如果您以前从未使用过 svg，请确保在您的服务器上为“image/svg+xml”文件类型启用了 GZIP。这将确保它们被压缩，并尽可能快地加载。有时，系统管理员只启用更标准的文件类型。注意:GZIP 已经在所有的 Kinsta 服务器上为 SVG 启用。

摘要

SVG 是增强网站外观的好方法！我们建议同时使用 SVG、PNG 和 jpg 来实现最佳性能，因为非常详细的图像在 SVG 格式下的性能不会很好。SVG 非常适合你的徽标，可以确保它在每个屏幕上都像像素一样完美，还有图标。

你有什么想法？你在你的 WordPress 网站上使用过 SVG 吗？

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是缓存？学习这种常见而复杂的技术

原文：https://kinsta.com/blog/what-is-cache/

在网络上获取信息需要处理能力和时间。数据需要从一台服务器传输到另一台服务器。使用缓存减少了时间和资源的使用。

回答什么是缓存取决于上下文。总的来说，缓存是保存和快速调用常用数据的一种方式。管理你的缓存，尤其是在使用 WordPress 的时候，可能是一个流畅、快速运行的网站和一个令人沮丧的缓慢网站的区别。

本帖将回答“什么是缓存？”并提供一些关于如何管理自己的见解。

什么是缓存？

How web caching works.

缓存获取由应用程序处理的数据，并将其存储以备后用。它不一定要在浏览器本身中，但是你会发现网站和它们的底层技术大量使用缓存。“缓存”一词指的是存储和重新调用保存的数据的过程。

缓存通常包括两个要素:

• 缓存软件本身运行这个过程，并在各种其他元素之间穿梭。
• 随机存取存储器(RAM)和“内存中”引擎。它们存储通过缓存技术传递的数据。

这些要素必须是高质量和协作的。运行缓慢的 RAM 无法足够快地调用数据，因此软件无法有效地使用这些数据。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

考虑到页面文件的大小，缓存对于大多数 web 应用程序来说几乎是必需的。在某些情况下，可靠的实现可以为您节省宝贵的时间。一个评论网站加载速度快的用户间接称赞了网站服务器核心的缓存软件。

接下来我们将对此进行更详细的讨论。

在网络上获取信息需要处理能力和时间😅幸运的是，使用缓存减少了这种情况，可以帮助您的站点运行得更快💪在这里了解更多⬇️ 点击推文

缓存如何帮助您优化网站

计算机技术在不断发展。换句话说，内存、硬盘空间和其他此类计算机处理元素的大小正在快速增长。我们的个人电脑使用 64 KB 内存的日子已经一去不复返了；现在，在 tap 上看到千兆字节(GB)的 RAM 是很典型的。一些更新的苹果 MacBooks 甚至可以安装 64 GB 的内存。

由于现代网络开发和相关技术对现场代码的需求，网站也变得越来越重要。它不仅要求最终用户具有更高的处理能力，还需要更强大的服务器和技术来适应。如果没有内存(和缓存)，加载速度会慢如蜗牛。

因此，搜索引擎优化(SEO)早就认识到页面速度是网站排名的首要因素。虽然确切的细节还不清楚，但是搜索引擎结果页(SERPs)中网站排名的因素包括参考网站速度。

It’s just as well that Kinsta’s home page file size is lean and mean.

虽然排名指标不会像你想象的那样使用网站速度作为直接衡量标准——有太多的因素在起作用，以至于它本身不能作为一个可靠的指标——但许多其他方面都会考虑到它。例如，你网站的 HTML 代码质量和谷歌浏览器的加载时间也会产生影响。

Kinsta’s recorded page loading speed from within Brave’s DevTools.

关于用户体验(UX)，一个长期的标准是用户会在仅仅等待两秒钟后就放弃一个页面。这带来了几个问题:

• 你的谷歌排名优化——包括跳出率——需要准确无误；否则，你的搜索引擎优化的努力是死在水中。
• 更快的网站加载速度将有助于控制你的跳出率。
• 网站的 UX 是网站最重要的元素之一。

缓存可以通过减少页面加载时间在所有这些方面提供帮助。更重要的是，你的网站所使用的资源会更少，从而产生更大的影响。

总的来说，一个能够快速加载最相关和最新信息的网站会比其他网站表现得更好。

接下来，我们将看看缓存可能遇到的一些问题。

缓存有时会导致问题

当然，缓存并不总是花里胡哨的。主要关心的是实现一个工作得太好的缓存。对于许多小型站点(或者至少是非企业或网络)来说，大规模的频繁缓存周期是不必要的。它可以看到你的服务器浪费资源缓存页面没有改变。

另一方面，缓存不足(或缓存方式不当)的策略和实现可能会让您看到一个过时的页面。这个问题有时会发生在 WordPress 网站上。但是，有个小窍门和小技巧可以克服。

当然，提供旧的缓存版本的页面会导致问题。考虑一个需要定期更新信息的疫情资源网站。现在考虑浏览器缓存不足或不存在会如何影响页面。

好消息是，设置缓存来减轻这些缺点的影响是很简单的。我们稍后会讨论这个问题。

使用缓存的网站技术

我们已经注意到了高速缓存是如何以几种不同的方式贯穿整个计算的。然而，在本文中，我们关注的是非 CPU 缓存。如果你回头看看苹果 MacBook 的规格，你会注意到处理芯片中通常有几兆字节(MB)的缓存:

Apple MacBook specs, showing a built-in cache.

这种缓存也适用于移动设备。

但是我们正在考虑使用一定容量的服务器进行缓存。这里是我们正在谈论的一些不同的技术:

• 浏览器。谈到技术，你首先会想到的是T2 浏览器缓存。它将常规请求存储在缓存中，以便在下一次调用时更快地加载。
• 设备。虽然 CPU 本身超出了本文的范围，但设备上的浏览器和应用程序通常会使用存储和 RAM 来缓存数据。
• 应用。是的，这些应用程序还可以有一个缓存来存储常用数据。同样，这将使用非 CPU 的设备上存储来缓存数据。
• 服务器。缓存的另一个日常用途。一些来回传送的服务器数据可以被存储和调用，以便更快地执行和处理。这方面的一个例子是 Redis 缓存。
• 域名服务器(DNS)缓存。专注于缓存的应用。这里涉及的机器除了缓存数据之外什么也不做，所以当 DNS 缓存确保平稳运行时，前端服务器可以传送数据。

在我们继续之前，有必要指出一些与缓存相关的技术。例如，您可能认为存储 cookies 类似于缓存网页。在很多方面，这是真的。例如，cookies 在被浏览器触发后存储在您的计算机上。这里的区别在于, cookies 存储了关于你和你的使用的信息，而不是页面状态。

一个内容交付网络(CDN) 代表着更加模糊的水域，因为它做的事情与纸上缓存一样。CDN 将整个网站存储为一组静态文件，而不是直接与网站一起工作。因此，虽然它表面上有缓存的标志，但它是一种不同的存储和交付网站的方式，这些网站仍然需要缓存才能快速运行。

像 Cloudflare 这样的 cdn 可以兼顾这两个方面(甚至更多)，这就是为什么 Kinsta 选择了它们来使我们的客户端站点更快、更安全。
T3】

WordPress 如何处理缓存

尽管我们热爱 WordPress，但它并不是最快的平台。如果你在你的网站上使用 WordPress，你需要使用缓存来帮助提供快速的体验。你的站点速度是你、你的主机和你选择的缓存插件共同努力的结果。

如果你是 Kinsta 的客户，你不需要任何类型的缓存插件。我们在软件和服务器级别自动提供四种不同类型的缓存:

• 对象缓存。
• 页面缓存。
• 字节码缓存。
• CDN 缓存。

我们将覆盖您的所有基地，并确保您的网站是优化的速度。然而，对于其他主机的用户来说，一个专用的 WordPress 缓存插件可能是一个很好的补充。

WordPress 缓存插件领域有很多解决方案，必须做出选择可能会让人不知所措。让我们来看看一些我们最喜欢的选项。

重要的

我们已经实现了不同类型的服务器级缓存，这比任何一个 PHP 插件都要好。因此，这里列出的一些插件与 Kinsta 主机不兼容。查看 本节 了解更多信息和 本完整列表 。

WP 超级缓存

最直接的选择就是选择 Automattic 的 WP 超级缓存:

The WP Super Cache plugin.

它被认为是“官方的”WordPress 缓存插件。它提供静态的 HTML 文件来代替动态的 PHP 文件(这是几乎所有访问者都会看到的，而且不会损失任何功能)。

更重要的是，该插件包括“预加载”、“垃圾收集”(删除不再需要的缓存项)、CDN 和面向开发人员的 REST API 端点。这是缓存插件的一个坚实的切入点，可能是你所需要的一切。

W3 总缓存

W3 Total Cache 在许多用户的安装列表上已经存在很长时间了:

The W3 Total Cache plugin.

它被宣传为“web 性能优化(WPO)”框架，并声称对 Web 主机的选择是不可知的。它包含了许多特性和功能，但它因对新用户的吸引力而臭名昭著。W3 Total Cache 有很多特性，但是你需要时间来优化使用它。

也有一些简单的缓存插件，在一些用户看来，它们比领先的竞争者表现得更好。比如 WP 最快缓存和 LiteSpeed 缓存都是好评如潮，仪表盘简单。

WP 火箭

说到高级插件，WP 火箭独占鳌头:

The WP Rocket plugin.

这是一个高性能的插件，也很容易使用。它应用了一系列最佳实践，拥有超过 150 万用户。WP Rocket也兼容大多数 WordPress 产品和服务，包括 Kinsta。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

如何安装缓存插件

至于安装缓存插件，过程很简单，和其他任何 WordPress 插件一样。缓存将在激活时启用，通常会有一个专门的面板来处理插件如何缓存您的站点。例如，您可以在设置> WP 超级缓存面板中找到 WP 超级缓存的选项:

WP Super Cache’s settings.

您的特定插件将根据其复杂性和目标有不同的设置。WP 超级缓存这样的解决方案是骗人的。表面上看起来很简单，但是正如高级部分所显示的，有很多地方需要修改:

The WP Super Cache Advanced settings.

我们的建议是，如果你不确定一个特定的设置能做什么，就坚持简单的选项。大多数缓存插件都有针对不同缓存设置的快速设置选项。比如 WP 超级缓存使用简单或者专家缓存:

WP Super Cache’s delivery methods.

主要区别在于专家模式使用 Apache 的 mod_rewrite 选项来提供缓存文件。不过，对于一个不知道文件如何被缓存的内部工作原理的用户来说，简单的交付方法是可以接受的。

如何清除您的缓存

一个更常见的需求是知道如何清除你的缓存。正如您所料，根据您的设备或浏览器，有几种方法可以做到这一点。我们将带您了解各种方法，从您的桌面浏览器开始。

清除浏览器的缓存

到目前为止，最终用户与缓存最常见的关系是在浏览器中。如果出现问题，清除浏览器缓存是一种可靠的方法，可以让一切恢复正常。因此，这是一种经常出现的方法，就像关闭和重新打开一样。

每个浏览器都有一个专用的首选项屏幕，让您可以不同程度地访问缓存。例如，你可以在偏好设置窗格的隐私>隐私标签下找到 Safari 的缓存:

Safari’s Privacy tab.

相比之下， Firefox 在其首选项的隐私&安全部分拥有一套全面的功能，这与其作为一个注重隐私的浏览器的定位相符:

Firefox’ Privacy & Security preferences.

对于大多数基于 Chromium 的浏览器来说，比如 T2 谷歌 Chrome、T4 勇者和其他浏览器，缓存都在同一个地方。以 Brave 为例，它在首选项的附加设置中，在隐私和安全部分下:

Brave’s Privacy and security section.

相比之下，Chrome 将选项放在设置的前面和中间:

Google Chrome’s Privacy and security settings.

说到微软 Edge ，缓存在设置的隐私、搜索和服务部分，在清除浏览数据下:

厌倦了低于 1 级的 WordPress 托管支持而没有答案？试试我们世界一流的支持团队！查看我们的计划

Microsoft Edge caching options.

好消息是，清除缓存通常只需点击一次，然后等待浏览器完成它的工作。大多数浏览器会让您选择想要从缓存中清除的数据，因此，如果您有特定的需求，这当然会增加您的“点击次数”。

清除设备缓存

你的智能手机和电脑也有一个缓存，因为它们也需要存储数据，以便随时调用。正如您所料，每个操作系统和平台都有不同的处理方式。例如，在 Mac 上的，你将前往 macOS 中的~/库/缓存/ 位置:

The Finder’s Go window showing the location of the Mac cache.

在这里，您会注意到缓存是一个文件集合，您可以将它拖到垃圾箱中:

The macOS Caches folder.

至于 Windows 10，在整个操作系统中有几个不同的缓存。我们有点操之过急，但是要清除 DNS 缓存，您需要以管理员身份运行命令提示符:

The Windows Command Prompt.

从这里进入ipconfig/flushDNS。一旦运行它，Windows 将刷新 DNS 缓存:

Flushing the cache in Windows.

您还会发现 Linux 发行版使用终端和命令行来清除系统缓存:

Flushing the cache in Debian.

移动设备通常不像台式机那样需要清理中央缓存。因此，你必须一点一点地完成这项工作。苹果 iOS 是这里最“分散”的设备，尽管安卓做得更好。

清除 DNS 缓存

我们已经谈到了服务器和 DNS 缓存，特别是关于清除 Windows 10 DNS 缓存，但我们没有谈到为其他平台清除它。

对于不知道，DNS 缓存存储所有最近尝试连接到互联网，特别是其域名。换句话说，它是计算机用来确定如何连接到互联网的 DNS 查找列表。

它不同于设备上的其他缓存，但可能会有一些交叉。在开始清除 DNS 缓存之前，您应该做好三件事情:

• 对您的计算机或设备的管理员访问权限。
• 访问终端、命令提示符或命令行。
• 使用命令行界面(CLI)的必要技能，尽管您不一定需要知道要使用的确切命令。

当然，说到最后一点，我们是来帮忙的。我们已经在 Kinsta 博客的其他地方介绍了基于每个设备清除 DNS 缓存。我们建议您查看那篇文章，了解有趣的细节。

清除 WordPress 缓存

说到 WordPress，有几个地方你可以去清理缓存。平台本身没有缓存。相反，有两个接触点需要考虑:

• 你的主机提供商的选项，有时可以在 WordPress 中找到。
• 你的专用缓存插件。

根据你对主机的选择，你可以在你的控制面板中选择，或者在 WordPress 中安装的插件中选择(专用于你的主机的服务器端缓存)，或者两者都有。我们将进一步详细讨论这一点。

此外，你通常会有一个专门的第三方插件来帮助缓存你的网站，你会在相关的设置或首选项屏幕中找到清除它的选项。

你如何访问这个将取决于你的插件(接下来我们将介绍一些选项)。例如，WP 超级缓存在工具栏和设置> WP 超级缓存页面上都显示选项:

The Delete Cache button in WordPress, using WP Super Cache.

对于 W3 总缓存，你可以在 WordPress 顶部的工具栏中找到你需要的选项:

The options to purge the cache in W3 Total Cache.

对于大多数插件来说，清除缓存的选项在工具栏中(或者被标记)。至于你的主机，你通常会在两个地方找到清除缓存的选项:WordPress 仪表盘(如果有插件的话)和你的主机控制面板。

一些主机通过插件给 WordPress 管理员添加特定的选项来帮助 WordPress 用户。在大多数情况下，这些插件的行为类似于第三方缓存插件。不过，最好的方法(换句话说，你知道会起作用的方法)是打开你的主机控制面板，寻找你的缓存选项。

例如，在 MyKinsta 中，你可以从站点屏幕导航到你的站点，然后前往工具标签。在这里，您将看到站点缓存选项:

Kinsta’s Site cache option.

单击选项将清除服务器端的缓存，让您无所事事。你现在可以自由地回去运行你的网站，而我们可以继续为它服务。

是时候回到最基本的问题了:什么是缓存，你如何管理你的缓存？🤷‍♀️在此了解更多⬇️ 点击推文

摘要

网站需要快速运行。最有效的方法是通过缓存。这是一种存储经常在服务器之间拉取和推送的数据的方式。一旦保存，浏览器可以在一瞬间调用它，使你的网站加载速度更快，并保持你在搜索引擎优化的权利。

一个可靠的主机将会有服务器端的缓存，并尽一切可能确保你的站点最大限度地利用它。更重要的是，一个好的插件会让你的网站运行得更快，并确保缓存对你网站的各个方面都有帮助。

Kinsta 客户可以享受我们内置的边缘缓存功能。作为我们 Cloudflare 集成的一部分，Edge Caching 会将您的 Kinsta 站点/页面缓存保存到 Cloudflare 全球网络的任何一个 275+ 数据中心。

边缘缓存免费包含在所有 Kinsta 计划中，不需要单独的插件，并且平均减少了超过 50%的时间！

对于最终用户来说，缓存是一项简单的技术。对于那些深入挖掘的人来说，这是值得花大量时间去做的事情，因为你的表现依赖于此。

您是否利用缓存，如果是，您的首选“堆栈”是什么？请在下面的评论区和我们分享你的想法和观点！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是缓存数据？探索 3 种简单的方法来清除它

原文：https://kinsta.com/blog/what-is-cached-data/

如果你花很多时间在线，你可能熟悉“缓存数据的概念您知道这个术语指的是存储在某处的数据，但是您可能不确定为什么会出现这种情况。理解什么是缓存以及它是如何工作的是理解现代网络的关键。

您可以在浏览器或服务器上缓存数据。存储这些数据可以使访问变得更容易、更快。这意味着你可以为你网站的用户提供更好的体验。作为互联网用户，你也可以更快地加载网站。

在本文中，我们将深入挖掘缓存数据。我们将讨论存储什么类型的数据，为什么缓存很重要，以及清除这些信息的利弊。

我们开始吧！

缓存数据的工作原理

首先，必须建立多种类型的缓存数据。一些最常见的例子包括:

• 存储在本地缓存中的信息，例如，存储在个人电脑、笔记本电脑和智能设备上的信息
• 储存在服务器上的网站文件
• 储存在浏览器中的网站数据

在每种情况下，保存的数据并不完全相似。应用程序可能会在缓存内存中存储一些文件以加快加载速度。你的 WordPress 网站或网络主机可能会在缓存级别存储文件或页面副本，以提高性能。同样，您的浏览器可能会在本地保存一些文件，因此您不必在每次访问网站时都重新加载它们。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

在所有这些情况下，缓存数据通过提供更好的性能来改善用户体验。我们指的是更快的加载时间，不管你说的是应用还是网站。

一般来说，缓存数据在任何情况下都是一样的。有人为存储什么信息、存储在哪里以及存储多长时间制定了规则。缓存数据通常有一个截止日期。这可以确保你不会在更新网站或应用程序后很久还在加载过时的文件或信息。

准备好深入研究缓存数据了吗？👩‍💻了解存储的是什么类型的数据，为什么缓存很重要，清除这些信息的利弊等等👇 点击推文

为什么缓存数据很重要

如果你是我们博客的常客，你会知道我们非常关心网站的性能。让你的网站加载更快对于提供最好的用户体验至关重要。

如果配置得当，缓存可以全面大幅减少加载时间。比方说，由于大量的图片，你的网站的主页需要一段时间来加载。您可以做几件事来确保页面尽可能快地显示，包括:

1. 在上传前或上传过程中压缩图像以减小其文件大小
2. 使用平均重量轻的图像格式
3. 使用可以缓存图像的内容交付网络(CDN)
4. 选择在服务器级别处理缓存的 web 主机，比如 Kinsta
5. 配置访问者的浏览器应该缓存的文件

在五种可能的性能优化中，有三种与缓存有关。除了使用信誉良好的网络主机之外，缓存数据可能是确保你的网站加载更快的最有效的方法。

然而，缓存并不是灵丹妙药。正如我们之前提到的，缓存是临时的。你不能无限期地保存相同的数据，并期望它保持相关性。网站和应用程序会定期更新(至少好的会更新！).这意味着您可能偶尔需要清除缓存。

清除缓存数据的利弊

如果您没有遇到任何问题，您可以让缓存的数据自行过期。另一方面，清除缓存数据并没有太大的负面影响，除了您需要从头重新加载所有内容(一次。如果您清除浏览器的缓存数据，可能会导致特定网站的加载时间稍长。

大多数情况下不需要清除缓存的数据，除非你遇到错误。如果有一个网站不能正常工作，或者你在试图访问它时遇到了一个 HTTP 错误，清除你的缓存数据是我们经常推荐的故障排除步骤之一。

如果你正在运行一个 WordPress 网站，还有一些其他的原因让你想要清空它的缓存。每当你对你的站点进行重大修改时，比如改变主题，添加插件，删除页面，甚至上传新产品，清空缓存是一个好主意。

这样做可以确保新数据能够正确加载。根据您的 web 主机或缓存插件，您网站的缓存可能会在您更新内容时自动清除。

如何清除缓存数据(3 种方式)

清除缓存数据的工作方式非常不同，这取决于您在等式的哪一边。如果你运行一个网站，你需要在服务器级别清除缓存数据(或者通过你的 CDN，如果你正在使用的话)。

另一方面，如果您是最终用户，您将通过浏览器清除缓存的数据。让我们来探索这些选项中的每一个。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

1.清除您的浏览器缓存

如果你使用的是 PC 或笔记本电脑，你可以阅读我们的完整指南清除你的浏览器缓存。然而，在移动设备上清除缓存的工作方式略有不同。

对于移动设备，有两种类型的缓存数据可以清除:

1. 缓存的应用程序数据:这些文件是应用程序保存到设备的缓存中以缩短加载时间的文件。通常，您可以通过应用程序管理选项清除此类数据。
2. 网站缓存数据:这是网站通过浏览器缓存保存到您设备上的信息。如何清除这些数据将取决于您使用的手机浏览器。

清除移动设备上的浏览器缓存相对简单。例如，如果你使用的是移动版 Chrome，你可以打开设置菜单，跳转到隐私与安全 > 清除浏览数据。然后选择高级选项卡下的缓存图像和文件选项。

清除 Chrome 浏览器中的浏览数据。

这个过程会根据您使用的浏览器而有所不同。为了让你的生活更轻松，这里有一些在 Safari 中清理缓存的说明(因为 Chrome 和 Safari 是世界上最受欢迎的两个浏览器)。

2.清除服务器的缓存数据

如果你在服务器级别存储缓存数据，并且你正在使用 WordPress，有几种方法可以清除这些文件。您的 web 主机可能正在服务器级别缓存数据。在这种情况下，您应该能够从您的主机控制面板刷新这些数据。

这正是金斯塔的情况。如果您是 Kinsta 用户，您可以访问 MyKinsta 控制面板。从那里，你可以导航到网站，并选择有问题的网站。

与我们世界一流的支持团队一起体验卓越的 WordPress 托管支持！与支持我们财富 500 强客户的同一个团队聊天。查看我们的计划

接下来，转到工具选项卡。在这里，你会看到一个选项，在站点缓存下面写着清除缓存。

清除 MyKinsta 仪表盘中的缓存。

MyKinsta 还允许您修改缓存到期日期。为此，选择修改>更改缓存到期选项。

在 MyKinsta 中更改缓存到期日期。

总的来说，如果您设置了合理的缓存到期日期，那么您就不需要手动清除它。默认情况下，Kinsta 每小时清理一次站点的缓存，这对大多数网站来说已经足够频繁了。为了防止用户加载过时信息的问题，我们还会在你每次更新页面或在 WordPress 发帖时清除缓存。

如果你使用的是一个 WordPress 缓存插件，它应该包括一个选项手动清除缓存。具体的步骤会根据您使用的缓存插件而有所不同，所以我们建议查看其官方文档以获取更多信息。

3.清除你的 CDN 的缓存

cdn 的工作原理是将你的网站或应用程序的数据缓存在世界各地的服务器集群中。当访问者试图访问您的网站时，他们的请求会被路由到最近的服务器。这提供了一个你的站点或者它的部分数据的缓存版本。

简而言之，cdn 通过减少工作量来帮助您提高站点的性能。CDN 的服务器通常经过优化，可以无瓶颈地处理大量流量。另外，你的网站的数据不需要传播那么远。它可以从作为 CDN 一部分的附近服务器上获取。

如果你使用的是 CDN，它应该包括一个选项来清除你网站服务器上的缓存文件。在 Kinsta，我们将 Cloudflare CDN 用于所有客户网站。也可以通过 MyKinsta 控制面板清除 CDN 缓存。

为此，选择 Kinsta CDN 选项卡，然后打开您站点的设置。在里面，你会发现一个选项，上面写着清除 CDN 缓存。

清除 MyKinsta 中的 CDN 缓存。

如果你正在使用一个替代的 CDN 提供商，你将需要检查它的文档中关于清除缓存的说明。然而，这个选项应该不难找到，因为这是您在使用 CDN 时需要执行的操作。

Understanding what a cache is and how it works is key to understanding the modern web... and this guide is the perfect place to start 💪Click to Tweet

摘要

数据缓存是现代网络的重要组成部分。每次访问时重新加载每个网站的所有资源是非常低效的。通过利用缓存，你可以告诉访问者的浏览器他们应该存储什么数据，以及在多长时间后过期。此外，如果你使用一个著名的 web 主机或 CDN ( 最好两者都用)，你将在服务器级访问缓存。

让我们快速回顾一下清除这些保存数据的三种方法:

1. 清除您的浏览器缓存。
2. 清除服务器存储的数据。
3. 清除您的 CDN 缓存。

关于数据缓存，您有什么问题吗？请在下面的评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是云存储？

原文：https://kinsta.com/blog/what-is-cloud-storage/

问题“什么是云存储？”现在越来越普遍了。

如果你正在寻找一个简单的答案，云存储是一种云计算模式，在这种模式下，你将数据和文件保存到异地位置，通常通过互联网或专用网络访问。

There's more to cloud storage than meets the eye... and this article dives into the fundamentals of the cloud computing model 🚀Click to Tweet

然而，除了这个简单的定义之外，云存储还有更多的内容！有不同的存储类型、部署模式、无数的使用案例、惊人的优势以及其他负载。如果您是云存储的新手，或者正在探索将数据迁移到云中，那么您来对地方了。

在本指南中，我们将带您全面了解云存储的基础知识。我们开始吧！

云存储的类型

Visual representation of cloud storage. (Image source: Backup Everything)

当考虑在云中存储数据时，有三种主要的云存储类型可供选择。对每种类型有一个基本的了解是很重要的，因为它们提供了自己独特的优势和用例场景。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

让我们从探索每种云存储类型的基础开始。

块存储器

块存储是一种主要用于在基于云的存储环境或存储区域网络(San)中存储数据文件的技术。在云中，块存储通常通过将虚拟磁盘连接到基于云的虚拟机(VM)来实现。

这是将数据分成单个数据块的过程，然后可以将这些数据块存储为单个数据块。每个数据块都有一个唯一的标识符，允许存储系统将较小的数据块放在最有效的位置。该方法涉及跨不同系统存储块，每个块被配置(或分区)为与不同的操作系统一起工作。这意味着相同的原始数据块可以存储在 Linux 环境和 windows 单元中。

通过将数据从用户环境中分离出来，块存储允许数据分布在多个环境中。在创建多条数据路径时，检索数据的过程会加快。当您或某个应用程序从数据块存储系统请求数据时，底层存储系统会检索并重组数据，然后将数据返回给您。

对象存储

对象存储的过程包括将数据文件分割成称为对象的单个块。这些对象存储在一个独立的存储库中，可以分布在多个基于云的服务器和网络系统中。

每个对象都有一个唯一的标识符，当对象存储在分布式系统中时，应用程序可以使用该标识符来标识和检索对象。元数据附加到每个包含重要信息的对象上。这可能非常详细，包括对象大小、上次修改日期、介质类型和访问权限。

对象存储的平面结构使得存储大量数据非常有效。还可以将任何类型的数据、照片、视频和日志文件存储为对象。

文件存储器

云中的文件存储是一种存储数据的分层方法，也称为文件级或基于文件的存储。这个过程包括在文件中存储数据，这些文件被安排在文件夹中，然后被组织到目录和子目录中。对于要定位和检索文件的用户和应用程序来说，他们需要知道从目录一直到文件夹和特定文件的路径。该信息包含在附加到文件的一定数量的元数据中。

文件存储具有多种功能，几乎可以存储任何类型的数据。像任何电脑一样，你可以存储一系列复杂的文件，而且浏览起来也相当快。它也很容易配置。您可以通过用户权限、文件锁定和其他控制来控制对文件的访问。

从技术角度来看，分层文件存储在某种程度上表现良好。一旦您的文件存储达到一定的大小，您将开始遇到文件检索速度变慢的性能问题。这是由每个文件只有一条路径的限制造成的，随着文件夹、目录和子目录的增加，这种限制只会继续增加。

云系统的性质将允许您在一定程度上缓解这些性能问题。扩展以包括具有额外计算能力的更高容量的虚拟机是很容易的。但是，您可能会发现，与选择对象或块存储方法相比，这种方法效率更低，成本更高。

云存储模型

熟悉了可用的云存储类型之后，我们现在可以开始探索和理解可用的不同部署模型。

其中包括公共云、私有云以及混合云。每种云部署模式都是独一无二的，为您的存储设置提供了一系列不同的优势。让我们仔细看看。

Multi-cloud setup for storage. (Image source: Veeam Software)

公共云

公共云可能是您最熟悉的部署模式。公共云由云服务提供商拥有和运营。这些提供商负责其云的所有运营，包括托管、管理和维护其网络和基础设施。

在这种情况下，提供商与其他公司和个人一起向您出售他们的云服务。虽然您将在公共云环境中共享基础架构，但您的应用程序和数据只能由您自己访问。

选择公共云存储模式通常是最具成本效益和可扩展性的方法。虽然人们经常对公共云的安全性和隐私性表示担忧，但这在很大程度上是没有根据的。对于大多数希望提供最佳服务的公共云提供商来说，安全性和隐私是首要考虑的问题。

私有云

在大多数情况下，这种方法很大程度上仅适用于资金雄厚且迫切需要保护其应用程序和数据的大型企业。

私有云是专为单一企业构建的数据中心。他们托管、管理和保护自己的云网络和基础架构。该资源不与任何其他公司或个人共享，大多数情况下位于现场。

私有云存储是最安全的方法，但也是最昂贵的，因为您要支付所有技术和人力资源成本。这种方法增加了数据丢失的风险。由于所有数据都存储在一个位置，自然灾害或重大故障可能会危及本地存储的所有数据的安全性和可恢复性。

混合云

混合云结合了公共云和私有云，是一种两全其美的方法。

在混合云存储设置中，您可以利用公共云的灵活性和私有云的安全性，同时平衡您的总体成本。如果您处理敏感和非敏感数据的混合，混合云是理想的选择，您可以在两种模型之间拆分这些数据。

医疗保健、法律和财务信息等高度敏感的数据可以在私有云中得到保护。而不太敏感的日常数据存储在公共云中，仍然非常安全。

云存储用途

理解什么是云存储的答案不仅仅局限于不同的云存储类型和部署模型。这也是关于无数可能的用例的学习。如果您目前正在使用任何形式的本地存储—服务器或工作站—那么您可以将其迁移到基于云的场景。

更好的是，您将能够通过利用云的固有优势来增强您的存储场景的功能。无论是通过增加处理能力来提高性能，还是增强安全性，您都会发现无数种方法来改善您的情况，将您的存储用例切换到云。

前面，我们概述了不同的云存储类型。其中每一种都有自己独特的方法，因此适用于不同的用例。因此，让我们探索最适合数据块、对象和文件存储类型的最常见云存储用途。

基于云的数据块存储的使用案例

块存储结合了速度和效率，是要求低延迟和一致吞吐量的高性能、数据密集型任务关键型应用程序的理想解决方案。Oracle、SAP、Microsoft SharePoint 和 Microsoft Exchange 都是受益于与数据块存储方法相结合的应用程序示例。常见的使用案例包括:

• 数据库:大多数数据库系统需要一致的 I/O 性能和低延迟连接，这使它们成为块存储的理想用例。
• RAID 阵列:将块存储与独立磁盘冗余阵列(RAID)相结合，可以提高您的关键任务应用程序的运营弹性。RAID 通过将数据写入两个或更多驱动器来保护您的数据。如果一个磁盘出现故障，其他磁盘上的信息可以无缝替换它，而您甚至不会意识到中断。
• 虚拟机文件系统:块级存储通常用于交付虚拟机文件系统，从而提高迁移性能和可扩展性。VMware 在其一系列虚拟化解决方案中支持数据块存储协议。
• 电子邮件服务器:尽管不是首选，但像 Microsoft Exchange 这样的电子邮件服务器将在缺少文件或基于网络的存储系统的情况下利用块存储。

基于云的对象存储的使用案例

结合按需购买的结构，基于云的对象存储极具成本效益。对象存储的灵活性也使它成为云中各种不同用例的理想选择。

其中包括:

• AI &大数据分析:对象存储的可扩展特性允许您创建大规模数据湖，并利用就地查询分析和机器学习工具提取有价值的洞察力。
• 媒体内容存储和交付:云的低延迟和高吞吐量与对象存储的扁平结构相结合，为直接向应用和网站交付音频和视频流创建了一个理想的解决方案。
• 云原生应用:使用对象存储构建基于云的应用，以存储任意数量的数据并在任何地方访问这些数据。允许您更快地部署应用程序，同时接触更多的最终用户。
• 备份和恢复:对象存储的多功能性与云的持久安全特性相结合，是理想的云备份。
• 灾难恢复(DR): 存储在云中的对象可以跨多个位置复制。云基础架构提供无数冗余场景，以提供高度弹性的灾难恢复解决方案。
• 数据归档:对象存储的可扩展性与云现收现付模式的成本效益相结合，使其成为数据归档的理想选择。许多云提供商提供专门为不常访问和长期归档设计的存储类别，价格最低。

基于云的文件存储的使用案例

数据类型的简单结构和灵活性使得文件存储非常适合云中的各种不同用例。尤其是在需要团队间文件共享和协作的情况下。

其中包括:

• web 内容管理:云为内容管理系统和 Web 服务应用程序提供了一个高吞吐量和低延迟的文件系统，以便在基于 Web 的应用程序、网站、在线出版物和档案中存储和提供信息。基于云的文件存储解决方案旨在与 web 应用程序轻松集成。它们还反映了 web 开发人员习惯的文件系统目录结构、文件命名约定和权限，以便于使用。
• 开发工具:在云中为您的开发工具和环境创建一个公共存储库，让您能够以安全有序的方式共享代码和其他文件，并完成版本控制。
• 大数据分析:机器学习和大数据分析需要大量计算资源来处理工作负载，非常适合云环境。基于云的文件存储解决方案使数据科学家能够创建一个个性化的云环境，其中包含存储笔记本文件、培训数据和模型工件的主目录。
• 媒体渲染:声音设计、视频编辑、工作室制作、渲染和广播处理都涉及多个个人一起操作大型文件。基于云的文件存储为团队共享和协作文件提供了一个集中的存储库。由于云可以提供卓越的处理能力，团队还可以减少完成这些工作所需的时间。
• 集中式文件协作:在云中创建共享文件库，团队可以在其中上传、存储和共享文件。利用允许内部、外部和受邀用户协作并同时处理同一文件的技术。
• 数据库备份:基于云的解决方案非常适合数据库备份。您可以简单地备份数据库的整个文件目录。然后将其复制并按地理位置分布到数据中心，以提供多种故障切换场景。
• 应用程序迁移:大多数本地应用程序通过文件系统接口连接到数据。随着这些应用程序继续向云迁移，许多提供商正在提供基于云的文件存储解决方案，其中需要共享文件系统。

云存储的优势

当寻求我们“什么是云存储”的答案时问题，了解好处是等式的关键部分。

云计算技术带来了一系列令人印象深刻的好处。将您的数据存储迁移到基于云的设置中，您可以释放这些固有的优势。因此，如果您正在考虑迁移您的内部存储，以下是云存储的核心优势。

流动性

基于云的存储的主要优势是能够从任何台式机、智能手机或平板设备访问您的解决方案。所有领先的云提供商都支持通过 web 浏览器或移动应用程序界面访问其存储解决方案。

移动性释放了随时随地访问云存储解决方案中所有可用功能的优势。允许您为员工提供在家或在旅途中工作的能力，同时持续访问公司应用程序和数据。

在管理您的云存储解决方案设置时，您也将从随时随地访问该平台中受益。无论是添加额外资源、部署新服务还是更新用户访问设置，您都不再需要为了实现这些功能而束缚在办公室里。

可量测性

将云的可扩展性应用到您的存储解决方案中是一个极其强大的优势。如果您的存储容量不足，只需快速点击几下，您就可以添加额外的存储磁盘，这些磁盘将立即可用。

需要更快地访问您的数据，或者处理复杂的分析流程？只需添加更多具有更高计算能力的虚拟机，即可立即提升性能。相反，删除或降级资源以反映您减少的需求和控制成本也同样简单。

借助云，您可以利用现有的预配置技术网络。所以没有部署延迟；在几分钟内即可获得需要数周时间才能在内部部署的资源。

成本效率

采用有效的云模型可以说是满足您的存储需求的最经济高效的方法。云定价模式旨在提高成本效率。按需购买的方法让您可以灵活地控制存储成本，而保留实例等方法让您可以通过做出长期承诺来获得可观的折扣。

云计算还能让你实现比你自己实际实现的更低的可变成本。云提供商通过汇总成千上万用户的成本来实现巨大的规模经济。因此，您可以以经济实惠的方式获得尖端的云存储技术，而这是您在内部部署时永远无法负担的。

我们提到过自动缩放吗？这是一项允许您控制存储资源消耗及其相关成本的功能。借助自动扩展，您可以实施设置，在设定的参数范围内自动添加和删除存储资源，以根据需求优化资源消耗。这意味着您只需为您需要的东西付费。

有效性

与内部部署方法相比，领先的云提供商能够为其存储解决方案提供无与伦比的可用性。

作为一家企业，您不能承受公司数据和依赖这些数据的应用程序不可用的后果。云基础设施是设计好的，所以你不用面对这个现实。由相互连接的服务器和系统组成的全球网络为您提供了近乎无限的故障转移场景。

云技术让您可以复制和持续同步从单个文件到组织中的每个文件和应用程序的任何内容。如果出现中断(服务器故障或网络中断)，您的云设置将简单地故障转移到副本，并继续提供对您的系统和数据的访问。从最终用户的角度来看，在大多数情况下，过渡是无缝的，他们甚至不会意识到发生了故障，否则这在内部部署中会是灾难性的。

合作

将您的数据和存储解决方案迁移到云环境中，可以为您的员工带来协作的力量，即在云环境中共享和共同创作文件的过程。

当涉及到云计算时，协作变成了一个简单的过程。您的同事可以通过基于云的平台轻松访问和共享单个文件或整个存储库。多个用户甚至可以同时访问和处理同一个文件。

使用注释、评论和即时消息实时交流和设计项目。而版本控制确保协作工作不会导致同一数据的多个变体。

安全性

云安全通常是任何组织的首要任务。担心将关键系统和敏感数据迁移到云计算解决方案中的安全问题的不止你一个人。当文件、应用程序和其他数据不再存放在本地时，您如何确定它们仍然受到保护？

在金斯塔，我们明白安全的重要性。我们的安全应用托管、数据库托管和托管 WordPress 托管解决方案旨在提供主动和被动措施来防止攻击，并为我们的客户网站和相关数据提供最高级别的安全性。

A model for securing cloud workloads. (Image source: HyTrust)

在云设置中，您的存储服务将受益于无数的安全性增强。RapidScale 最近的研究发现 94%的企业报告在过渡到云环境后安全性有所提高。

在 IaaS 或 SaaS 设置中选择云存储将带来自动安全更新的好处。几乎在所有情况下，为您的存储解决方案处理安全更新和漏洞修补都是您的云提供商的责任。您还将解锁一系列尖端的云安全工具，以增强您的安全态势。这些可以包括:

DDoS 保护

获得自动检测和缓解 DDoS 攻击的能力。确保您的云存储服务保持可用，同时防止 DDoS 攻击带来的不可预见的成本，如过度的资源消耗。

高级防火墙

每个云提供商都将拥有最先进的防火墙，旨在保护他们的平台，进而保护您的数据。如果您想进一步加强您的安全立场，您可以访问高级防火墙解决方案，通过额外的保护层进一步保护您的云存储。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

身份访问管理

使用内置的身份访问管理工具控制对您的云存储部署的访问。管理和保护身份，使用设定的权限控制用户访问。定义哪些用户可以访问哪些文件，以及他们可以对该访问权限执行哪些操作—查看、编辑、删除。

加密

加密实践对于保护您的数据至关重要。默认情况下，领先的云提供商将此作为加密的固有优势。对你的数据进行编码，所以没有相应的解密密钥几乎不可能解密。这种保护发生在静态(在您的云存储解决方案中)和传输中(当您的数据在云中来回移动时)。

表演

云提供商为您提供尖端技术，因此您可以为您的员工和最终用户提供最高水平的性能。

您可以使用速度最快的计算机处理器和网络连接磁盘来改造您的云存储部署，这些磁盘的存储将载入史册。如果容量和性能下降，您可以简单地启动新的虚拟机并附加额外的存储。

这带来了许多好处，其中最重要的包括:

访问和检索数据

针对高性能调整您的云解决方案，加快从您的存储设置中访问和检索数据的能力。无论是一个单独的文件还是网页，这些都会影响最终用户的体验。

无论是员工还是客户，都会对你的底线收入产生直接影响。例如，如果你的网站加载时间太长，潜在客户会放弃你的网站，导致你错过了业务，如果你的登录页面可以加载，你就可以安全。

同样，员工等待文件加载的每一秒钟都是生产力损失的一秒钟。短期内是几毛钱，但几年下来可以变成几千块钱。乘以你的整个业务，这是一千个削减死亡。

处理工作负载

利用您的云存储设置的优化来提供最高级别的性能，您可以显著减少处理工作负载所需的时间。这对于大数据分析或媒体渲染等要求苛刻的工作负载尤其有用。

在这种情况下，为提高性能而增加支出可以带来更高的投资回报。更快地完成工作负载可以让您更快地完成项目并更快地发现关键见解。

灾难恢复

每个企业都需要一个备份计划，用于在多个位置复制和存储数据。在 Kinsta，我们了解准备好灾难恢复解决方案的重要性。不可避免的是，最终系统会出现故障，您会经历某种形式的数据丢失，这需要备份。

将数据托管在云中无疑是数据备份和灾难恢复的最佳解决方案。领先的云提供商可以提供全球云网络，在多个地理位置复制和分发备份数据。

无数的故障切换场景可确保您的数据始终可用，持续的文件同步可最大限度地减少数据丢失，确保最终用户始终能够以近乎无缝的体验访问公司数据和使用这些数据的应用程序，即使在重大停机期间也是如此。

云存储提供商

要完全掌握云存储是什么，您必须了解云存储服务的提供商。

自从云发明以来，一个日益复杂和不断扩大的云提供商市场已经出现。如果你正在寻找一个云存储解决方案，你会被众多的提供商宠坏。

The top 10 cloud storage providers. (Image source: allcode)

当然，选择太多可能会让人不知所措，因此，为了帮助您找到方向，以下是领先的云存储解决方案提供商:

• 亚马逊网络服务:AWS 无疑是领先的云提供商，它提供 11 种不同的云存储产品
• 微软 Azure :王冠的挑战者，Azure 提供了 7 款云存储产品，并且他们还拥有非常可观的市场份额。
• 谷歌云平台:快速扩张和缩小微软和亚马逊之间的差距，GCP 提供 9 种云存储选择
• 阿里云:阿里云凭借 7 款云存储解决方案成为四大云提供商之一
• IBM Cloud :除了前四名之外，IBM 还提供了一系列 5 个独立的高性能云存储解决方案，价格极具竞争力
• 甲骨文云:同样值得注意的是，甲骨文云平台提供了 7 款值得探索的云存储产品

为了进一步简化问题，我们更深入地列出了上述云提供商提供的核心块、对象和文件存储解决方案。

块存储解决方案

如果您正在寻找块存储解决方案，您可以从以下云提供商那里找到服务:

• 阿里云:块存储
• 亚马逊网络服务:亚马逊弹性区块商店(EBS)
• 谷歌云平台:持久盘
• IBM 云:块存储
• 微软 Azure: Azure 磁盘存储
• Oracle 云:块卷

对象存储解决方案

您可以从以下云提供商那里找到对象存储解决方案:

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

• 阿里云:对象存储服务
• 亚马逊网络服务:亚马逊简单存储服务(S3)
• 谷歌云平台:云存储
• IBM 云:对象存储
• 微软 Azure: Azure Blob 存储
• 甲骨文云:对象存储

文件存储解决方案

您可以从以下云提供商那里找到文件存储解决方案:

• 阿里云:文件存储 NAS
• 亚马逊网络服务:亚马逊弹性文件系统(EFS)
• 谷歌云平台:文件存储
• IBM Cloud: 文件存储
• 微软 Azure: Azure 文件
• 甲骨文云:文件存储

云存储注意事项和最佳实践

在选择和部署您的云存储解决方案时，您应该了解一些注意事项和最佳实践。了解并实施这些将有助于您交付满足您需求的最佳云存储部署。

下面介绍了最重要的云存储注意事项和最佳实践。

定价和持续成本

对于您的云存储设置来说，定价无疑是最大、最复杂和最重要的考虑因素。你如何正确地做到这一点将极大地影响你的持续成本。

以下是需要考虑的关键变量，它们会影响您的云存储成本，并帮助您在提供商之间进行价格比较:

• 虚拟机:您需要多少实例、多少 RAM 和多少 CPU？
• 存储磁盘:您需要多大的存储空间？您想要网络连接磁盘还是本地连接磁盘？你的数据类型是什么？您是否有冗余需求、IOPS 和吞吐量要求？
• 订购模式:您是按秒、分钟、小时、天、月还是年购买？
• 支付模式:您是选择现收现付、保留实例还是长期承诺合同支付模式？
• 位置:由于每个数据中心都有自己的成本，您将数据存储在哪里？

一旦您的云存储解决方案启动并运行，您可以通过以下最佳实践继续优化您的持续成本:

• 了解你的支付模式:无论你是短期还是长期承诺，探索你的支付模式是至关重要的。

  • 扩大或缩小你的计划容易吗？
  • 您能否切换到使用不同的技术类型，如新的服务器和磁盘类型？
  • 如果超出使用限制，是否需要付费？
  • 终止或转换您的云存储模式需要提前多长时间通知？

• 继续监控使用情况:每月跟踪您的存储容量和流量。您将发现您的云存储设置是否超出或未充分利用，因此您可以相应地调整资源。它还可以帮助您计划使用高峰，或者决定您需要切换到新的定价模式。

• 通过自动缩放优化您的使用:当您使用现收现付模式时，使用自动缩放工具尤其有用。当您为存储的数据量和消耗的资源付费时，自动扩展将帮助您优化消耗，从而降低成本。

服从

数据隐私的重要性持续增加。随之而来的是法规遵从性的高涨，以及一系列关于您能做什么和不能做什么的要求，其中讨论最多的包括 GDPR、HIPAA 和 PCI-DSS 法规。

The different types of compliance. (Image source: LinkedIn)

将数据移动到云存储设置中需要您仔细考虑合规性。这将包括存储、传输、处理和删除数据的方式、位置和内容。这是一个需要考虑的巨大任务，但是这里有一个简短的清单可以帮助你开始。

• 存储位置:对于 GDPR 等地的合规性至关重要，在这些地方，某些类型的个人数据不能存储在某个地理位置之外。因此，检查您的云提供商的服务器位于何处，这将包括任何备份站点。
• 数据传输:从云中存储和检索数据需要通过互联网传输。某些数据合规性法规将要求这种传输是安全的。探索潜在的云提供商如何处理这一过程，默认情况下对传输中的数据进行加密是必须的。
• 数据存储:许多合规性法规包括一系列关于数据存储和备份方式的安全要求。询问您的潜在云提供商，确保他们满足这些要求。同样，默认情况下静态加密是必须的，即使这不是法规遵从性要求。
• 删除数据:一些合规性法规要求您在删除前将特定类型的数据存储一段时间，该时间可能长达数年。许多云提供商创建了特定的低成本存储解决方案来支持这一点。它们还提供防止用户错误删除或替换数据的功能。合规性也可以管理数据删除，如擦除权，确保您知道您的云提供商如何实施数据删除。
• 现成的合规性:许多云提供商提供内置合规性的存储服务。因此，当您寻找新的提供商时，做一下调查，您可能会发现他们从一开始就符合关键的合规性要求。

表演

性能是您的云存储解决方案的一个关键考虑因素。它将直接影响您的最终用户体验和工作效率，所有这些都将影响您的底线——无论是希望访问您网站的潜在客户，还是查询您 CRM 系统的员工。

以下是选择和使用云存储解决方案时的一些关键考虑因素和最佳实践:

• 准确估计您的性能需求:在寻求提供满足您需求的最佳云存储设置时，准确估计您的性能需求将发挥重要作用。审查您当前的内部设置、历史流量使用和资源消耗。所有这些信息都将在构建适合您的云存储设置中发挥作用。
• 探索内容显示网络的使用:如果您想要提供最佳的用户体验，访问数据的速度至关重要——如果您提供的是面向公众的网站，则更是如此。您的云提供商提供的内容显示网络(CDN) 服务允许您复制数据并按地理位置分发数据，因此您可以在本地交付数据，以最大限度地减少延迟并加快访问速度。它还有助于防止流量高峰期间的性能下降。
• 监控持续性能:一旦您的云存储解决方案启动并运行，这只是开始。记录你的性能水平、使用情况和流量消耗。然后考虑相应地调整您的设置，无论是更高性能的虚拟机、更大的存储磁盘，还是完全相反的缩减资源。
• 自动扩展:为了优化您的云存储设置的性能，您应该考虑自动扩展工具。这将允许您根据需要在云存储设置中添加或删除资源，以便在任何情况下始终提供最佳和一致的性能水平。

安全性

迁移到云时，您的首要考虑因素之一可能是安全性。

您需要熟悉您的云存储提供商提供的安全基础设施，以及提供的附加工具来增强您的安全立场。这里有一些需要注意的注意事项和最佳实践。

加密

加密将是保护您的云存储解决方案中任何数据的关键机制。您需要一个默认情况下提供加密的云提供商，无论是静态还是传输中。确保您的数据在您的云存储解决方案中以及在您和云提供商之间传输时是安全的。

理想情况下，您需要尽可能高的加密级别。目前， 256 位 AES 加密似乎是大多数云提供商提供的行业标准，不要退而求其次。

身份访问管理(IAM)

身份访问管理对于保护您的云存储设置中的数据以及维护隐私至关重要。

确保您选择的提供商具有内置的 IAM 工具，或者(至少)能够通过附加服务访问这些工具。您需要对谁可以访问哪些数据以及他们可以对这些数据做什么进行严格的控制。这可以保护您最重要的数据不被编辑、下载或删除。

实施访问管理时，您将希望能够创建与不同角色、组和资历对应的访问权限模板。然后可以很容易地应用这些，以节省为每个用户设置复杂权限的时间。您还希望最大限度地减少拥有主管理员权限的用户数量，因为这样可以最大限度地降低内部威胁的风险。

分担责任

为您的云存储设置实施安全性将是一项共同的责任。寻找云提供商时，请熟悉他们的共同责任协议。这对于理解由您负责的安全实施以及了解我们的云提供商涵盖哪些内容至关重要。

同时，如果你存储的是欧洲公民的数据，你需要考虑 GDPR。根据您控制或处理的数据的类型，即使提供商声称对安全负责，根据 GDPR 的要求，责任可能仍然落在您身上。

备份

在云存储部署中，保护数据安全的最关键因素之一是备份。这是任何存储解决方案的必备组件，也是您肯定想要深入研究的领域。

您需要实施一个备份解决方案,提供多种故障转移场景。还要考虑同步以及备份与数据更改保持同步的频率。

虽然定期备份数据以防止数据丢失至关重要，但您需要在成本之间取得平衡。随着频率的增加，成本也会增加。总有一天，工作效率损失的成本会超过备份的价值，只有您才能做出这个决定。

支持

当考虑云存储提供商时，重要的是您了解使用他们的服务时您可以获得的支持范围。

作为基础，您需要一个易于使用的云存储平台，并且的停机时间最少，以最大限度地减少您的支持需求。但是，当出现问题时，您需要简单、可访问、响应迅速并能及时解决您的问题的支持。

云领域的支持主要分为两类，自助服务和支持计划。每一种都有自己独特的考虑因素，在做出任何承诺之前，您都应该探索一下。

自助服务支持

这是解决您可能遇到的任何问题的 DIY 方法。在考虑云存储提供商提供的自助服务支持时，您应该考虑:

• 文档:浏览他们的自助文档。确保它易于访问，易于阅读，并且包含多种内容类型。你需要文本、图像和视频的组合，使其尽可能全面。
• 论坛:确保你注册的服务有一个活跃的社区。同时进一步挖掘，发现任何可能提供指导的行业专家。
• 活动和网络研讨会:查看是否有免费支持活动的时间表，如上门诊所或解决常见支持问题的网络研讨会。
• 上报:当自助支持无法解决您的问题时，您希望了解支持上报途径是什么样的。

支持计划

当问题超出自助服务能力时，制定一个支持计划来解决您的查询或恢复服务至关重要。云领域的支持计划有各种形式和规模，以下是一些需要考虑的关键因素:

• 成本:虽然某些云提供商可能会提供免费支持，但任何物有所值的支持计划都有持续成本。一些你想纳入你的整体预算的东西。
• 可用性:根据您选择的支持级别，支持可用性范围从标准办公时间到 24/7。确保您选择的支持选项满足您的需求。
• 地点:并非所有的云提供商在您的国家都有支持工程师。因此，请务必检查这一点，因为它对可用性有连锁影响。
• 响应时间:随着支持计划的增加，响应时间会加快。根据事件的严重性，审查您的支持计划的预期响应时间。同时调查您在未达到这些响应时间时的权利。
• 培训:更全面的支持计划将包括针对您的云存储解决方案的培训。探索其中包含的内容以及如何对其进行调整，以改善您对平台的使用，从而最大限度地减少您的支持需求。
• 客户经理:高级支持计划可以包括一名客户经理，这是一个单一的联系点，您可以在这里获得一些急需的见面时间，以满足您的支持要求。看看这是不是一个选择，并与分配给你的客户经理建立稳固的关系，这真的会有回报。

易用性

任何产品最重要也是最容易被忽视的特性之一就是易用性。这是你在研究潜在云存储提供商时肯定要考虑的事情。您需要从管理和最终用户的角度来看待这个问题。

虽然有无数不同的云存储产品，但以下是一些值得关注的总体特性:

• 用户界面:您想要一个导航清晰明了的云存储解决方案。输入控件应该有清晰的标签，便于与平台功能交互。
• 执行任务:无论是启动新服务器，还是共享文件，在平台内执行关键任务都需要尽可能少的步骤。一路上有指导，这样你就不用花费精力去想接下来该做什么。
• 协作功能:任何云存储解决方案都应该提供使协作简单明了的功能。共享文件应该很简单，无论是与个人、团队还是整个星球共享。同步文件访问和编辑是必须的，通过版本控制来确保错误不会导致数据丢失。评论和实时聊天等附加功能也可以简化和支持协作过程。
• 支持工具:寻找拥有支持您使用平台的工具的解决方案。尤其是那些允许你自动完成平凡的、耗时的、如果设置正确不需要人工干预的任务。
• 集成:无论是通过 API，还是特定的软件兼容性，与任何云存储解决方案的集成都是必须的。

在您承诺解决方案之前，您应该知道几乎所有的云存储提供商都提供免费试用，或者永远免费的模式。利用这个机会，对平台进行路试，这样您就可以获得上述因素的第一手经验。

摘要

如果您已经在这里提出了“什么是云存储？”应该在你后面！现在，您可以选择最适合云存储部署的数据类型，更不用说您的云存储部署的所有潜在用例了，不包括您最初计划的用途。

Want to learn more about cloud storage? This post has you covered ☁️Click to Tweet

了解云存储带来的好处，以及最佳实践和选择提供商时的考虑事项将帮助您认识到云存储部署可以提供的潜力。

关于云存储，你还有什么不清楚的吗？请在评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

如何使用 Google My Business(2022 年针对本地 SEO 优化你的列表)

原文：https://kinsta.com/blog/what-is-google-my-business/

获得更多的本地线索和谷歌我的业务齐头并进。当人们搜索他们附近的产品或服务时，他们通常会购买一些东西。

事实上，根据搜索引擎 Land ，78%的本地移动搜索会导致店内或网上购买。这些人是你想吸引到你的企业。

在本指南中，您将了解什么是谷歌我的企业名录，它如何帮助您的本地 SEO ，如何设置它，以及如何优化它。

什么是谷歌我的业务？

Google My Business(或 GMB)是一个由 Google 支持的本地企业列表服务。

它完全免费使用，使用它的唯一要求是你必须与你的客户进行某种形式的面对面的互动。基本上，如果你是 100%在线的，你不可能真的有一个谷歌我的企业列表。

如果你曾经进行过本地搜索，你会看到它出现在谷歌搜索结果中。看起来是这样的:

An example of a Google My Business listing

谷歌我的业务是如何运作的？

谷歌允许你要求你的业务并让它活起来。这样，当人们在寻找你提供的东西时，你的网站就会出现在他们的搜索结果中。

你可以列出你提供的服务，添加一个 FAQ 部分，一些照片，也允许顾客留下关于你的业务的评论。你甚至可以为你的业务添加一些有趣的属性，这些属性将显示在你的知识图中，例如在线护理、在线预约、在线评估和在线课程。

为什么你应该使用谷歌我的业务

让我们面对现实:谷歌主导搜索，尤其是本地搜索。根据净市场份额，超过 70%的搜索发生在谷歌的搜索引擎。

Graph showing search engine market share

作为一个小企业主，你不能忽视使用谷歌我的业务(GMB)的好处。

研究表明，92%的网上购物者喜欢在购物前在网上比较品牌。他们中的大多数人会去谷歌搜索寻找他们想购买的商品。

此外， 49%的谷歌我的企业列表每月被搜索超过 1000 次，而 96%的列表每月至少被查看 25 次。

你知道当你的企业在谷歌我的企业上被列出和看到会发生什么吗？

统计数据显示，看到你的 GMB 清单的人中有 56% 会点击进入你的网站，而另外 24%会直接给你的公司打电话。对于那些希望在充满挑战的经济环境下生存和发展的企业来说，这是一个好消息。

这项调查显示，谷歌我的企业列表也可以推动小型企业在当地的 SEO 取得成功，很大程度上保证了中小型企业在谷歌地图和谷歌搜索上的可见性。

看看对谷歌本地排名因素的研究结果就知道了:

Local pack (GMB) vs local organic ranking factors study results

此外，GMB 让潜在客户马上与你联系，而你可以跟踪你的清单，了解老客户对你的品牌的看法，计划他们的访问，引导他们到你的位置，等等。

这就是使用 Google My Business 的很多理由！

现在你已经知道了什么是 Google My Business，以及为什么你应该在本地业务中使用它，让我们来看看如何设置它。

我如何设置谷歌我的业务？(并在谷歌上市)

建立你的 Google My Business 个人资料并在 Google 上注册是本地搜索的重要组成部分。以下是如何让你的企业获得谷歌我的企业档案:

第一步-进入官方的谷歌我的商业网站

访问官方 Google 我的业务页面，点击立即管理按钮:

Google My Business homepage, start here to set up your account

如果你还没有登录你的谷歌帐户，它会要求你登录后再继续。

请确保您已登录到要与您正在创建的 GMB 列表关联的帐户。

第 2 步-找到你的企业或创建一个新的列表

如果您过去没有建立过 GMB 列表，您可以搜索您的企业名称，或者单击添加新的列表。

Finding your business on GMB

有人已经列出了你的业务，这并不罕见。如果是这种情况，你应该看到你的业务出现。如果没有出现，请点击将您的企业添加到谷歌

步骤 3–设置您的姓名

现在，您可以添加您的企业名称:

Adding your business name to GMB

添加完成后，点击下一步。

第 4 步-选择类别

现在，您需要在 Google My Business 上选择最能描述您企业的类别。

如果你想在顾客搜索你提供的产品或服务时出现在谷歌的结果页面上，这一步非常重要。

你将能够设置主要和次要类别，明智地选择它们。

Choosing a business category on GMB

在“业务”类别下，输入你的业务，你会得到一些自动生成的建议供你选择:

Examples of the business category options on GMB (some a very obscure!)

第 5 步-设置您的企业地址

现在，您需要设置与您的列表相关联的位置。

Adding a location to GMB

您需要在以下选项中进行选择:

• 选项 1(是)实体企业列表
• 选项 2(否)服务区企业列表

让我们快速浏览一下每一项:

选项 1(是)实体企业列表

如果您要为有位置的实体企业设置列表，请在此处添加:

Choosing the address for a business with physical premises

选项 2(否)服务区企业列表

如果您没有实体场所，但仍然为某个地区的客户提供服务，您可以在此处添加:

Choosing the address for a business with a service area

您可以搜索您所在的地区或使用建议的选项。

第 6 步–添加您的联系方式

现在你需要添加一个客户联系你的方式(电话+网站):

Adding contact details to your GMB listing

将你的网站添加到 Google My Business 有可能将客户带到你的网站，在那里你可以更容易地转化他们。同样，列出你的电话号码可以让客户直接联系你

第 7 步-完成并验证您的列表

在 GMB 填写完所有相关信息后，您可以提交您的列表:

Finish and manage your GMB listing

差不多了，但是这里有一个重要的步骤你需要做:

验证你的物品。

Choose a method for verifying your listing (very important step)

为了让您的 Google My Business 列表显示出来，您需要验证它。这可能需要几天时间，不过你可以在等待的时候优化你的列表。

为了让您的列表得到验证，Google 将向您发送一张带有验证码的明信片。

Postcard verification for Google My Business

在谷歌我的业务上验证你的业务的 5 种方法

根据你要登记或管理的企业名录的类型，你可以选择验证你的企业:

• 通过邮件(明信片)验证
• 通过电话验证
• 通过电子邮件验证
• 即时验证
• 批量验证

1.通过邮件(明信片)验证

最常见的是通过明信片。登录您的 GMB 个人资料，检查您的公司地址是否正确，然后点击“邮件”。

一旦收到，你需要登录你的谷歌账户，点击菜单上的“验证”,输入你明信片上的验证码。

在等待您的明信片到达时(大约需要 5 天)，Google 建议您不要:

• 编辑您的企业名称
• 编辑您的地址
• 更改业务类别
• 请求新代码

这样做可能会减慢验证过程，并需要谷歌客户支持介入。

2.通过电话验证

谷歌允许一些企业通过电话核实他们的名单。如果这适用于您，您将看到一个“通过电话验证”的选项。

请确保您的电话号码正确无误，我们会通过短信向您发送一个验证码。

3.通过电子邮件验证

谷歌允许一些企业通过电子邮件核实他们的名单。如果这适用于您，您将看到一个“通过电子邮件验证”的选项。请确保您的电子邮件地址正确无误，我们会向您发送一个链接来验证您的列表。

4.即时验证

如果你已经用谷歌搜索控制台验证了你的业务，你也许可以立即验证你的列表。

这非常简单，只需使用您在搜索控制台验证业务时使用的同一帐户登录 Google My Business，就大功告成了。

一些 GMB 企业类别不符合即时验证的条件。如果您没有看到要求您验证列表的通知，您必须使用其他验证方法。

5.批量验证

如果您在 10 个以上的地方经营同一项业务，您可能有资格使用批量验证。为了获得资格，你不应该是一家服务企业或管理多种业务的机构。

以下是如何批量验证您的谷歌我的企业名录:

• 登录谷歌我的业务并选择一个位置
• 选择您所在位置旁边的“获得验证”
• 点击“链”。
• 现在在表格中填写所有信息(企业名称、位置、联系方式等)。)
• 提交表单(谷歌可能需要一周的时间来处理)。

优化谷歌我的企业名录的 6 个技巧

让我们回顾一下，到目前为止，您应该已经:

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

• 设置你的 GMB 列表
• 添加了您的业务详情
• 已验证您的列表

现在怎么办？好了，是时候优化你的房源了！

转到 Google My Business dashboard，点击您的列表，然后选择“信息”。然后选择要完成或更新的部分。

GMB dashboard for editing your listing information

查看以下提示，充分利用您的 Google My Business 个人资料:

1.随时更新你的刊登资料

优化你的谷歌我的企业列表的最好方法之一也是最明显的:保持更新。

至少，要确保以下几点总是正确的:

• 名字
• 地址
• 电话号码
• 网站(全球资讯网的主机站)
• 描述
• 类别
• 属性

作为一家企业，你应该展示联系信息，以方便客户联系你。GMB 只是这个的延伸。

你想让客户尽可能容易地找到你并联系你。

Name, address, phone number (NAP) are essential contact details to have on your GMB

正确的地址可以帮助客户快速接近您的业务/服务区域。如果他们不能轻易找到你，他们就有可能与竞争对手取得联系。

不断更新你的电话号码、工作时间和产品类别对潜在客户很有用。尤其是当你考虑到一家公司的详细信息平均每月在搜索结果中出现 1009 次。

你不想因为分享任何无效/虚假的信息而失去你的潜在客户。所以要注意定期更新你的列表。

如果您想要添加关于新产品或最近开始的服务的信息，并希望与客户分享，这可能会很方便。

谷歌通常需要三个工作日来核实和更新信息。您甚至可以添加经理来管理您的业务页面。

然而，要小心竞争对手，因为他们也可以改变你的列表。

2.上传照片到你的物品

你的 GMB 列表是一个完美的展示你的产品和服务的地方，你可以添加图片、视频和虚拟旅游来推广你的业务

你可以上传你的产品和服务的吸引人的图片，或者让访问者一窥你的办公地点。

An example of photos uploaded to a Google My Business listing

浏览这些页面会鼓励客户浏览企业网站，并最终与您联系以了解更多信息或下订单。

一旦您的企业名录被验证，它可以显示标记和上传照片的组合。这意味着不仅你可以作为企业主上传照片，顾客也可以。

Avg. number of photos on GMB listings

一项研究显示，小规模企业平均上传 11 张照片，但 GMB 有很多企业会上传上百张照片。另外，别忘了贴上你品牌的标志或封面照片。

谷歌搜索你的品牌和关键词的结果会在顶部显示浏览量最多的图片和视频。

上传照片时，尽量保持文件大小在 10KB 到 5MB 之间，使用 PNG 或 JPG 格式。

以下是谷歌我的商业图片的最佳尺寸:

• 个人资料图像–250 x 250 像素
• 封面照片–1080 x 608 像素
• 共享图像–497 x 373 像素

3.添加关于您的产品/服务的信息

有时候，你能做的促进业务的最好的事情之一就是炫耀你所做的。

厌倦了体验你的 WordPress 网站的问题？通过 Kinsta 获得最好、最快的主机支持！查看我们的计划

Show off your product or service offering on GMB

你可以通过清楚地提及你提供的服务和你销售的产品来定制你公司的 GMB 页面。这应该有助于你的客户了解你的业务是什么。

例如，餐馆可以添加链接到他们的菜单，并锁定他们的餐馆位置。

Run a restaurant? Add links to your menu + online orders on GMB

最好为餐厅提供的各种食物服务添加不同的部分。事实上，你可以添加每样东西的描述和价格来建立一种虚拟菜单，访问者可以浏览并挑选。

保险公司、营销机构、在线健康咨询、法律援助公司可以为他们提供的服务建立不同的板块，并提供直接预约咨询的能力。

Add an ability for potential customers to book an appointment via GMB

除了服务费之外，还应该给出一个描述来说服客户打电话。

使用“预订”选项，让您的客户不必排长队等待，也不必接听没完没了的电话。

Run a hotel? Add a button to book a room from your GMB

世界上任何地方的任何人都可以买票，预约，并在他们最喜欢的地方预定一个位置。

4.回答问题(在被提问之前)

你知道你的谷歌我的企业简介有一个内置的常见问题解答工具吗？

预见并消除人们对你的业务可能产生的任何疑虑。在线创建常见问题解答部分以方便您的客户。例如，潜在客户可能想知道某个产品适合的尺寸或年龄组。

Collect and answer customer questions on your GMB listing

在餐馆的情况下，顾客可能想要检查食物是否添加了任何过敏成分或者它服务的人数。

同样，在面向服务的企业中，一个人可能会检查他/她的领域是否提供了特定的服务，或者是否有任何副作用。

通过 FAQ 部分来消除这些疑惑和歧义。如果你想超越这一点，你也可以通过打开信息选项与客户沟通！

5.发布谷歌帖子

想赢得一些点击和潜在的销售？利用谷歌帖子:

You can use Google Posts to show off what you can do

谷歌贴子是一个很好的机会，通过吸引潜在客户的注意力，你可以直接联系到他们。

这些帖子有助于你的本地 SEO 策略产生更多的有机点击。您可以在您的帖子中包含 CTA 按钮，以鼓励用户采取行动。

以下是帖子如何帮助增加你的本地搜索引擎优化的:

• 在 CTA 按钮上产生有机点击，帮助提高页面排名。
• 增加网站上其他内容的流量(比如博客文章)
• 将帖子链接到一个调查表，并收集用户信息。

6.获取客户评论

你的顾客是你生意的命脉。所以确保你重视他们的评论和反馈评论，及时回复他们。

Google My Business 让客户可以轻松地在你的个人资料中添加关于你业务的评论，并让潜在客户阅读这些评论。

Make your GMB listing stand out by getting (hopefully positive) reviews

为什么你应该关心你的谷歌我的企业名录获得评论？

首先，82%的消费者会阅读当地企业的在线评论。

Results from a local consumer review study

除了凸显顾客对你品牌的信心和信任外，谷歌评论还会直接影响搜索排名。

谷歌我的商业评论是一个机会，通过提供更多关于你的产品或服务的信息来吸引更多的客户。

注意回复任何负面评论。

这可能看起来违反直觉(或者你可能只是想掩盖差评)，但花时间回应差评实际上比忽视它们更有效。这表明你正在与你的观众互动，并关心你的业务质量。

这从来都不是坏事

如何从 Google 我的业务支持团队获得帮助

有时你可能需要一些帮助你的 GMB 上市。如果你在操作你的页面时遇到任何问题，你可以一直依靠谷歌我的商业帮助社区。

Google My Business support site

您可以在 GMB 知识库中搜索查询，也可以联系志愿者和用户寻求帮助。

如果你想举报虚假列表或任何欺诈信息，你可以使用官方的商业补救投诉表向 GMB 提出投诉。

同样，在虚假客户评论的情况下，您可以标记为“不适当”，以确保可靠和诚实的客户服务。

谷歌我的商业常见问题

本部分回答了 GMB 用户最常提出的一些问题:

谷歌我的业务的目的是什么？

Google My Business 是一个免费的工具，企业用它来组织他们的在线活动。这种存在不仅有助于人们找到你的网站，而且有助于通过 ef = " https://kinsta . com/blog/WordPress-Google-Maps/" data-MCE-href = " https://kinsta . com/blog/WordPress-Google-Maps/">谷歌地图定位你的企业。

一旦你完成了公司的验证过程，你就可以增加营业时间，上传照片，并向客户征求评论。你可以在网上与你的买家互动，最终扩大你的存在，增强你的企业经营。

我如何使用谷歌我的业务？如何在谷歌上获得我的业务？

首先，您必须在 GMB 上创建一个帐户。前往www.google.com/business并填写信息。上传你的地址，选择你公司的性质，勾选你为客户提供的服务。

通过明信片、电话或电子邮件获得认证，并看到您的品牌上线。

谷歌我的业务要花钱吗？

不，谷歌我的业务对所有人完全免费。就像任何人都可以在谷歌地图上列出他们的业务一样，你也可以在 GMB 上创建一个账户，让你的业务上线。而且，谷歌还允许你在同一个账户下有几个房源，不收取任何费用。

Google My Business 中的商店代码是什么？

商店代码是一个数字，只有管理商店的人才能看到。除了让谷歌区分你的业务和唯一识别你的位置，代码没有太多的重要性。谷歌还使用这些代码向潜在客户显示库存信息。

如何阻止谷歌调用我的业务？

谷歌通常会打电话给在 GMB 上市的企业进行核实。大多数时候，这些电话都是自动录音的。他们可能想确认营业时间，询问你们的服务和广告(如果有的话)。

为了避免接到谷歌的电话，你可以举报电话并进行投诉。也可以屏蔽他们的号码或者举报。

我如何访问我的谷歌商务页面？

你所需要做的就是进入谷歌我的商业页面。一旦你到了那里，用你的凭证登录，谷歌会给你重定向。

如何在 Google My Business 上隐藏地址？

要隐藏您的地址，请登录您的 Google My Business 帐户。点击“信息”选项卡，找到地址部分。点击角上的小铅笔来编辑你的地址。要清除信息，请单击“清除地址”，然后在弹出的对话框中单击“应用”。请确保在退出页面时保存您的更改。

摘要

当谈到创建网上形象、产生潜在客户并让自己受到关注时，拥有一个谷歌我的商业档案和其他做法一样重要。

这不仅让你的品牌看起来更专业，还能让你管理你想让客户看到的东西，让你的企业在另一家谷歌的网站上免费上市。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是 IaaS？基础设施即服务与 SaaS 和 PaaS 有何不同

原文：https://kinsta.com/blog/what-is-iaas/

IaaS 到底是什么？它与 PaaS 和 SaaS 等其他云服务有何不同？

与 PaaS 和 SaaS 不同，前者提供部署应用的完整环境，后者提供完整的软件解决方案，IaaS 只能让您访问基本的虚拟机、存储、网络和计算能力。

还在迷茫？别担心。在这篇文章的结尾，你会明白它们之间的区别。随着 91%的公司至少部分转向云计算，这一基本理解至关重要。

让我们探索什么是 IaaS，明确它与其他云服务的区别，并查看一些实际使用的例子。

简单来说 IaaS 是什么？

IaaS(基础设施即服务)是指可从联网计算机租赁的硬盘空间或计算能力(如 CPU、RAM)。

你可以使用这些服务在云中托管商业应用，处理大量数据，甚至托管你的网站。

在大多数情况下，你租用的云计算基础设施是按小时付费的。你可以随时挑选出你需要的东西，而不是包含各种服务的固定月套餐。

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

例如，您可以添加几十台虚拟机，仅用几个小时来处理一个新数据集。你不需要承诺或支付你不使用的服务。

对于相对稳定的正在进行的用例来说，这也是一个很好的选择，在这些用例中，需求有时会剧烈波动。例如，你可以用它在托管你的内部 CRM 或其他应用。根据使用情况和需求变化，很容易扩大或缩小规模，比如在繁忙季节。

IaaS 的一个例子:Amazon EC2

亚马逊 EC2 是 2006 年向公众推出的首批云计算服务之一。它允许您在全球 77 个不同的数据中心创建实例(虚拟机)。

这些实例非常灵活，没有默认的操作系统或控制面板，因此您可以定制它们来满足您的需求，无论是在多个操作系统上测试您的软件，托管网站还是处理大数据。

亚马逊 EC2

这种可定制性使得它成为 IaaS 服务。它不是一个完整的打包解决方案，无法随时部署或使用。在使用之前，您需要设置服务器环境。

迄今为止，EC2 是领先的云服务提供商 AWS 的最受欢迎的服务之一，所有主要的竞争对手都提供类似的选项。

到目前为止，您应该对 IaaS 有了基本的了解，但是您可能还没有完全理解它与 SaaS，尤其是 PaaS 有什么不同。

我们来比较一下，突出他们的不同之处。

IaaS vs PaaS vs SaaS:有什么区别？

基础设施即服务(IaaS)仅提供存储和计算等基本功能，以及一些安全和扩展工具。这仅仅是一个现成的软件应用程序出租。另一方面，PaaS 服务是一个完整的应用部署平台。

要完全掌握它们之间的区别，最简单的方法是通过比较一些例子。

我们已经讨论了 AWS，所以让我们用 Google 的云服务来做比较。

谷歌计算引擎是谷歌云的主要 IaaS 服务之一。您可以根据需要租用各种类型的虚拟机。

信息

Kinsta 使用谷歌云平台的下一代计算优化(C2)虚拟机来托管我们所有的客户网站。它们构成了我们性能优化的托管基础设施的支柱。

谷歌计算引擎

但是这些虚拟机没有预装服务器环境或代码库。它们是空白的石板。

您所支付的只是计算能力和硬盘空间，换句话说，就是基础设施。

另一方面，谷歌应用引擎属于 PaaS 标签。不用设置您的服务器环境，您可以直接开发和部署您的代码。

谷歌应用引擎

App Engine 负责必要的代码库和服务器软件。它提供了您托管自己的(或开源)应用和软件所需的平台。

最后， Google Drive 是 SaaS 的产品，为特定的商业问题提供解决方案。

当然，这是一项专注于托管文件的云服务。但是它超越了 PaaS 级别，提供了一个完全成形的用户界面，具有共享、权限控制等特性。

谷歌驱动

它不允许运行其他应用，因此它不是一个合适的 IaaS 平台，但这不是重点。

SaaS 应用的定义元素是，你可以开始用它来解决业务问题，而不需要编写任何代码。你所需要做的就是注册(如果是付费服务，就付钱)。

这就是 Google Drive 的工作方式:你可以上传文件，分享它，或者查看你最新的 Google Docs 编辑，而无需编写或提交任何代码。

如果您仍然感到困惑，请查看以下每个云服务类别的并列示例列表:

| IaaS 示例 | 平台即服务示例 | SaaS 举例 |
| 亚马逊 EC2 | AWS 弹性豆茎 | 谷歌文档 |
| 谷歌计算引擎(GCE) | 谷歌应用引擎 | Microsoft Dynamics CRM |
| 谷歌云存储 | IBM 云代工厂 | 销售力量 |
| Azure 虚拟机 | 微软 Azure 应用服务 | 松弛的 |
| Rackspace | Heroku | Zendesk |
| 利诺德 | 数字海洋应用平台 | 谷歌工作空间(前身为 G 套件) |

好吧，但是 IaaS 和虚拟主机有什么不同呢？

如果你从一台联网的机器上租用计算机空间和计算能力，这与常规的虚拟主机服务有什么不同？

有四个主要区别:

1. 灵活性:您可以在不同的存储类型(基于访问频率)、硬件组件、操作系统和其他因素之间进行选择。
2. 实时可伸缩性:根据需要实时添加任意多的实例。
3. 虚拟联网:模拟一个网络，机器之间不使用公共互联网进行通信。
4. 随用随付模式:只需为您使用的资源付费，无论您使用它们的时间有多长。例如，您可以在几个小时内添加 12 台机器来应对激增，然后移除它们，而无需承诺每月计划。

廉价共享托管计划还会将多个客户聚集在同一台虚拟机上，导致安全问题和依赖同一台虚拟机上其他站点的不可靠性能。

你能用 IaaS 来托管一个网站吗？当然，但这需要更多的技术专业知识，而不仅仅是支付像 Kinsta 这样的托管服务。

现在，您已经了解了一些 IaaS 基础知识，让我们来探究它在更广泛的云服务市场中的市场份额。

IaaS 市场规模、份额和领先供应商

2019 年，世界各地的公司在 IaaS 服务上花费了超过 445 亿美元。行业专家预计，到 2022 年底，这个数字几乎会翻一番，达到 822 亿美元(T3)。

2015-2022 年 IaaS 市场规模(数据来源:Statista)

但是与其他类型的云服务相比，IaaS 有多大呢？我们来看数据。

根据 Gartner 的最新数据，PaaS、IaaS 和 SaaS 之间的云市场份额显示，SaaS 是明显的领导者，IaaS 位居第二。

公有云市场份额(来源:Gartner)

Gartner 将 BPaaS(业务流程即服务)如薪资管理工具、通信 API 等单独归为一类。

虽然很难说有多少属于 SaaS 和具有更广泛定义的 PaaS，但这些工具都不属于 IaaS 范畴。即使我们慷慨地将这部分收入的一半分配给 PaaS，IaaS 仍然更加突出，其增长速度比 PaaS 快得多。

现在我们已经了解了主要云计算类别的市场份额，让我们来看看哪些公司主导了 IaaS 市场。

领先的 IaaS 供应商及其市场份额

最新数据显示，2020 年，少数几家重要企业将控制超过一半的 IaaS 市场。

IaaS 厂商市场份额(来源:Statista)

据 Statista 统计， AWS 在 2020 年 IaaS 的市场份额为的 33% ，领先于微软 Azure 的份额的 18% ，谷歌云的市场份额为 9% 。

过去三年的数据讲述了一个有三个主要人物的故事。一开始，有 AWS。从过去几年的市场份额数据来看，领先优势是显而易见的。

AWS 巩固了其领先地位，仍占据近三分之一的市场份额。但是谷歌，尤其是微软，增长更快，开始迎头赶上。

短短三年，微软 Azure 的市场份额从 13% 增长到 18% ，而 AWS 却没有跟上。他们是怎么做到的？微软利用其企业关系定期达成数十亿美元的交易(如 2020 年波兰政府交易和美国国防部云交易)。

如果你只看这张图，IBM(人工智能创新者和企业云发电站)似乎几乎无关紧要。看起来微软和谷歌吞噬了 IBM 的份额，其份额已经下降到 7%以下，并且在最新的报告中与“其他”公司归为一类。

但根据 IBM 2020 年第三季度的官方收益报告，它从云基础设施服务(来自 IaaS 和 PaaS 的组合)中获得了49 亿美元的收入。因此，它仍然是云计算市场的重要参与者。

最近的其他报告显示，主要的中国公司，特别是阿里巴巴，在 2020 年将占据更大的份额。

2020 年 IaaS 市场份额(来源:科纳仕公司)

但是三个领先的玩家保持不变(AWS vs Azure&Google Cloud)。AWS 以几乎三分之一的市场份额坐在宝座上，微软 Azure 以 20%的份额徘徊，谷歌云正在慢慢追赶。

IaaS 服务和使用案例

IaaS 不仅仅是关于大数据处理。IaaS 保护伞下的不同服务有广泛的使用案例。

例如，您可能需要在定制的低功耗、低成本服务器上长期存储您不会频繁访问的数字存档文件。

下面，我们将详细探讨更多 IaaS 服务及其用例。

计算(数据处理、测试软件、托管应用等。)

您可以将第一种 IaaS 服务定义为“云计算即服务”本质上，您租用虚拟服务器或存储和计算能力的实例来运行云中的应用程序或其他进程。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

如前所述，与常规托管计划不同，您通常遵循按需付费模式，可以根据需要实时自由扩展。对于大多数供应商，您也可以选择每月计划进行可预测的付款。

但它不仅仅是物理硬件。例如，IBM 云虚拟服务器包括自动扩展、云安全和合规性工具。

IBM 云虚拟服务器

您还可以轻松地将这项服务与 IBM 的其他 PaaS 或 SaaS 产品捆绑在一起，比如数据仓库或 AI。

网站托管

即使是“仅仅”托管一个网站，IaaS 提供商也脱颖而出。大型 IaaS 供应商是世界上领先的 web 主机供应商。

虚拟主机提供商市场份额(来源:W3Techs)

2021 年 1 月，亚马逊是世界上排名第一的主机提供商。它为互联网上所有索引网站的 5.8%提供动力。

但是为什么这么多人选择 IaaS 提供商来提供基本的虚拟主机服务呢？

有几个原因。首先，因为你不需要为实践支持或特定环境付费，所以它往往更便宜，尤其是在大规模的情况下。因此，对于管理网站组合的机构和公司内部部门来说，IaaS 通常是理想的选择。

此外，如果你运行一个繁重的应用程序或每月有数十亿的访问者，一个常规的虚拟主机服务可能很难提供你需要的稳定性。但是，使用 IaaS，您可以自动扩展以满足不断变化的使用情况。

您还可以自定义虚拟机来优化网站的速度和性能。当然，如果没有合适的专业知识，您将很难建立合适的服务器环境。

存储(文件管理、备份)

您可以将第二个 IaaS 服务类别归类为“存储即服务”

计算机和数字文件已经存在了几十年，对于大公司来说，存储和文件管理变得更加困难。每次升级计算机和系统，导出档案和数据都会变得更加耗费人力。

幸运的是，IaaS 存储服务，如亚马逊的简单存储服务(或亚马逊 S3)可以提供帮助。

亚马逊 S3 功能

这是一个在云中存储文件和文档的 IaaS 解决方案。您可以管理对文件的公共访问，控制服务器位置，将文件自动分类到“桶”中，等等。

长期存储(存档)

S3(以及类似的存储 IaaS 服务)的一个有用特性是，您拥有多个存储层。例如，如果您认为不需要频繁访问数据，您可以选择超级便宜的慢速存储，也称为冷存储。

如果你想存档文件，以备将来需要，S3 冰川是一个不错的选择。

AWS S3 冰川

网络服务

网络是 IaaS 服务的第三层。连上了(懂了吗？)对其他产品整体可用性的影响。

例如，使用虚拟网络，您可以创建一个混合云，将本地机器和虚拟机用于同一目的。

即使您自己没有一台物理服务器，IaaS 机器也带有内置的网络服务。有了虚拟广域网和唯一的 IP 地址，您可以在虚拟机之间进行通信，而无需连接到公共互联网。

借助我们灵活的 Google Cloud powered 基础设施，将你的 WordPress 站点速度提升 200%。免费试用 kin sta

现代提供商还提供负载平衡、防火墙和实时安全以及广域网优化。

最大的 IaaS 提供商及其提供的服务

现在，您已经了解了一些 IaaS 基础知识，让我们更深入地了解一下领先的提供商及其产品。

自动警报系统

在其网站上，AWS 倾向于将其 IaaS 产品打包到不同的 PaaS 用例中。

AWS 云服务

但是当然，它允许你租用底层的计算能力。即使您使用像 Elastic Beanstalk 这样的 PaaS 解决方案，这通常也是您需要支付的全部费用。

作为公共云计算的原始创新者，它涵盖了从计算到长期存储和网络的方方面面。

| 计算 | 亚马逊 EC2 |
| 存储 | 亚马逊 S3 |
| 归档&备份 | 亚马逊 S3 冰川 |
| 安全 | 防火墙和实时威胁检测 |
| 私有云&混合云 | 基于 AWS 和 AWS 前哨的 VMware 云 |
| 联网 | AWS PrivateLink(虚拟网络内的内部数据传输，不使用公共互联网) |
| 数据中心 | 40 多个可用性区域中的 109 个数据中心 |

根据虚拟机规格和数据中心位置的不同，按需定价会有很大差异。最便宜的实例(0.5 GB 内存的 t4g.nano)每小时 0.0028 美元起。

亚马逊 EC2 定价

如果需要，您可以实时添加或删除机器来调整负载。

谷歌云

谷歌云提供广泛的云服务，从 IaaS 到 PaaS，甚至 SaaS。

随着 Google Workspace 和智能 Google 搜索在您的私有云中的出现，这对于全面过渡到云的公司来说是一个极好的选择。

谷歌云产品

但从基础设施来看，谷歌与 AWS 相比如何？

| 计算 | 谷歌计算引擎(GCE)，裸机 |
| 存储 | 谷歌云存储 |
| 归档&备份 | 云存储–归档 |
| 安全 | 防火墙和实时威胁检测 |
| 私有云&混合云 | 虚拟私有云/ Anthos |
| 联网 | 虚拟私有云(虚拟网络内的内部数据传输，不使用公共互联网) |
| 数据中心 | 73 个以上可用性区域中的 142 个数据中心 |

谷歌云覆盖了所有相同的基础，甚至提供了许多数据中心和位置。142 个以上的数据中心使其成为高可用性或灾难恢复的理想之选—如果您有 99.99%的服务 SLA，则是完美之选。

如果你更关心你的底线，你可能想知道更多关于 GCE 的价格。

谷歌云引擎价格

每 GB 小时内存的价格与 AWS 相当，至少对于 E2 机器类型是如此。在 1 年承诺期内，价格要低得多。

有了 3 年的承诺，您可以获得 56%的折扣，并且只需支付每 GB 小时 0.001316 美元。

如果你想更详细地比较这两个选项，你可以阅读我们关于 Google Clouds vs AWS 的完整帖子。

微软 Azure

微软是全球第二大 IaaS 供应商，也提供各种强大的云服务。

微软 Azure 云服务

不出所料，Azure 也涵盖了所有 IaaS 基础。

| 计算 | Azure 虚拟机(Linux 和 Windows) |
| 存储 | Azure 文件 |
| 归档&备份 | Azure 归档存储 |
| 安全 | 防火墙和实时威胁检测 |
| 私有云&混合云 | Azure 私有云 |
| 联网 | 虚拟广域网、VPN(虚拟网络内的内部数据传输，不使用公共互联网) |
| 数据中心 | 58 个以上可用性区域中的 100 个数据中心 |

凭借可靠的虚拟机、存储、归档和安全协议，这是一个很好的云平台。

但是价格呢？它能与谷歌和亚马逊竞争吗？

Azure 虚拟机定价

最便宜的实例有 0.5 GB 内存，比 AWS 的同类产品每小时 0.0052 美元略高。

但它包括高达 4 GB 的存储空间，不像 AWS 那样需要使用额外的存储服务。

你也可以通过向 Azure 承诺多年固定价格交易来降低价格。

IBM 云

当然，IBM Cloud 在增长方面赶不上“三巨头”，但是它的实际产品呢？

IBM 云产品

IBM 在所有类别中都提供了健壮的云基础设施，就像其主要竞争对手一样。

| 计算 | IBM 云虚拟服务器，IBM 云裸机服务器 |
| 存储 | IBM 云对象存储 |
| 归档&备份 | IBM 云存储(冷库) |
| 安全 | 防火墙和实时威胁检测 |
| 私有云&混合云 | IBM 虚拟私有云 |
| 联网 | IBM 虚拟私有云(在虚拟网络内部传输数据，不使用公共互联网) |
| 数据中心 | 18 个以上可用性区域中的 60 个数据中心 |

您可以设置虚拟机，存储或归档文件，等等。但是谈到价格，IBM 很难与行业领导者竞争。

一个 4 GB 的虚拟机每小时花费 0.084 美元，几乎相当于一个新的 8 GB 内存的谷歌 N2 实例。

IBM 云虚拟服务器定价

而且“只有”60 个数据中心分布在 18 个区域，这是最不适合分布式云的选择。

尽管如此，IBM 的主要优势并不在于物理基础设施本身，而是它的 PaaS 和 SaaS 解决方案，如 Watson AI。

所以这是否是你的正确选择取决于你在寻找什么。

什么是 IaaS，它与更广为人知的 PaaS 和 SaaS 有什么不同？🤔在本帖中了解更多⬇️ 点击推文

摘要

IaaS 为您提供全面的国际数字企业，只需点击一个按钮，您就可以获得所需的存储和计算能力。

你可以用它来处理数据，测试你的软件，甚至托管你的网站。但是，如果你是一个完全的初学者，设置和开始可能会有挑战性。

如果你想要一个利用尖端云技术的网络主机，你可以使用我们的免费迁移服务将你的网站迁移到 Kinsta。

我们可访问的应用托管、数据库托管和托管 WordPress 托管计划依赖于来自 Google Cloud 的云基础设施，没有令人头疼的问题(我们使用最新的 C2 计算优化虚拟机来优化性能)。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是 PaaS？平台即服务与 IaaS 和 SaaS 有何不同

原文：https://kinsta.com/blog/what-is-paas/

PaaS(平台即服务)将服务器、存储和网络基础设施与部署应用所需的软件相结合。借助 PaaS，您无需投资本地硬件，也无需担心设置虚拟环境来处理您的应用。

预计到 2020 年底，将近 85%的组织会将其大部分工作负载放在“云”中。然后，这些公司可以使用基于云的数据进行个性化营销，并在部门之间共享战略数据(避免孤岛)——这是数字化转型的两个主要目标。

PaaS 为您提供了实现这些目标所需的所有工具，甚至更多。

让我们探讨一下什么是 PaaS，一些真实的 PaaS 示例，领先的 PaaS 提供商的市场份额等等。

什么是 PaaS？(有例子)

平台即服务(PaaS) 是指云计算硬件和软件工具的预打包组合，可让您轻松开发和部署应用。

例如，AWS Elastic Beanstalk 是一个即插即用的平台，支持多种编程语言和环境。它使得跨多个平台为不同设备部署和快速测试、启动和扩展应用变得容易。

AWS Elastic Beanstalk

它自动部署上传的代码，并包括负载平衡和自动扩展工具，以保持您的应用程序始终平稳运行。

Google App Engine 是软件部署的 PaaS 的另一个例子。

Google App Engine

除了以任何语言部署应用程序，您还可以获得应用程序诊断、版本控制、 A/B 测试以及其他功能。

这些服务从根本上不同于仅仅租用存储空间或虚拟机。PaaS 解决方案是一个现成的平台，可以让您的应用程序运行起来。

单独租赁硬件属于 IaaS，而不是 PaaS。

让我们仔细看看这两个类别之间的区别。

85% of organizations expected to have most of their workloads in the cloud by the end of 2020. Are you ready to move to the cloud? Read on to find more! 🌩📊.Click to Tweet

IaaS 和 PaaS 有什么区别？

基础设施即服务(IaaS) 指云服务的硬件组件，如虚拟机和可扩展存储。PaaS 还包括一个用于部署应用程序的生态系统。

当然，它们都是云计算服务的例子，但是有不同的使用案例和目标市场。

让事情更加混乱的是，许多 PaaS 提供商也提供 IaaS 解决方案，反之亦然。

让我们通过比较具体的产品来澄清困惑。

| 平台即服务示例 | IaaS 示例 |
| AWS 弹性豆茎 | AWS EC2 |
| 谷歌应用引擎 | 谷歌计算引擎(GCE) |
| 微软 Azure 应用服务 | 微软 Azure 存储 |
| IBM 云代工厂 | IBM 云虚拟服务器 |
| 数字海洋应用平台 | 数字海洋水滴 |
| Heroku | Rackspace ，Linode |

例如，使用 AWS EC2 实例为您的 web 应用程序存储数据意味着您只利用了基本的云基础设施。因此，在这种情况下，您只使用 IaaS 服务。

如果您使用 AWS Elastic Beanstalk 来部署 web 应用程序，您将使用 PaaS 服务。Elastic Beanstalk 实现使用 AWS 基础设施，如 S3、 EC2 和 DynamoDB，但是将它们组合成一个即时可用的开发平台。

这就是区别。

PaaS 是一个打包的解决方案，可以帮助您开发和部署应用程序，而 IaaS 只是一个基本的云基础架构。

这类似于一个非托管的虚拟主机服务(你必须安装服务器环境，比如 PHP & MySQL)和一个应用、数据库和托管的 WordPress 托管平台比如 Kinsta 。

在某些情况下，像 AWS、Google 和微软这样的供应商只会向你收取资源使用费，而不会向你收取软件平台使用费。

SaaS 和 PaaS 有什么区别？

软件即服务(SaaS) 另一方面，它提供完整的软件，而不是一个可以用来部署定制应用的平台。

例如，像 Salesforce 这样的基于云的 CRM 让你无需任何编程就能管理客户数据和工作流程。

Salesforce dashboard

你只需要注册，它就可以使用了。这是 SaaS 服务的原则。

相比之下，要用 PaaS 做同样的事情，你需要开发一个定制的应用，或者部署和定制一个具有类似功能的开源软件。

为了理解其中的区别，让我们再看一些例子。

| 云服务类型 | 例题 |
| SaaS | Google Workspace、Microsoft Dynamics CRM、IBM Watson 助手、Salesforce、Workday、Slack |
| PaaS | AWS Elastic Beanstalk、Google App Engine、微软 Azure App Service、Heroku、IBM Cloud Foundry |

任何人一注册，SaaS 的产品就可以使用。例如，一旦你加入谷歌文档，你就可以开始创建、保存和分享文档。

但谷歌应用引擎或 IBM Cloud Foundry 并不是解决业务问题的成品应用。相反，它们是你可以部署定制应用的云平台。

大多数公司结合使用 SaaS(我们使用 40+ SaaS 产品)和 PaaS 来运营他们的业务。最佳解决方案取决于每个用例以及您公司的经验和基础架构。

PaaS 市场规模、份额和领先供应商

PaaS 市场的报告规模及其与其他云服务的比较取决于来源。

例如，根据 Gartner 的预测，到 2021 年，PaaS 将被 IaaS 超越，分别为275 亿美元和619 亿美元。

Public cloud market share (Source: Gartner)

这将使 IaaS 市场的规模超过 PaaS 的两倍。IaaS 是整个云服务市场的重要组成部分，而 PaaS 相比之下几乎是小众的。

但是其他研究显示了一个不同的画面。

根据国际数据公司(IDC)的数据，2019 年的收入要接近得多，PaaS 要大得多，为 359 亿美元对 490 亿美元。

Worldwide public cloud services market growth (Source: Gartner)

这两个类别的增长率几乎相同，IaaS 的同比增长率为 38.4% 而 PaaS 的同比增长率为 38.8% 。

虽然 PaaS 可能不会缩小差距，但它也不会落后。

不同云服务类别之间的云市场份额取决于定义它们之间的边界。请注意，IDC 在其分类中没有单独列出管理和安全服务或业务流程服务。

这可能是 SaaS 和 PaaS 在列表中明显较大的原因。

领先供应商及其市场份额

自 2016 年以来，云行业专家、研究公司和专家已经从单独报告过渡到涵盖 IaaS 和 PaaS 相结合的公共云行业。

Public Cloud Services Market Share – 2019 (Source: IDC)

其中一个主要原因是，这两个类别中的主要参与者大多是相同的。

无论你是在分析 IaaS 还是 PaaS 市场，你都会看到一些熟悉的名字，比如亚马逊、谷歌、微软和 IBM。

第二个原因是，这些市场领导者倾向于将 IaaS 和 PaaS 服务捆绑在一起，因此很难将收入分开。

例如，AWS 获得了大量 IaaS 收入，因为它免费提供了一些 PaaS 环境(如 Elastic Beanstalk)。由于人们只为资源使用付费，因此很难区分平台和基础设施各带来多少收入。

PaaS and IaaS revenue share (Source: Statista)

据 Statista 统计， AWS 的市场份额目前在为 24.3% ，超过 8% ，领先 IBM Cloud 的 16% 。

谷歌云的市场份额为的 7.4% ，仅仅比微软 Azure 的 7% 多一点点。但在全球范围内，这四家总部位于美国的巨头显然是市场领导者。

它们合起来占全球所有 IaaS 和 PaaS 收入的 54 %。

在领先的美国供应商之后，中国的阿里巴巴占全球总收入的份额为 4.4% ，日本的 NTT 数据为 2.8% 。

就实际使用和持续创新而言，这在很大程度上仍是美国主导的全球产业。

AWS 是领先的 IaaS 和 PaaS 提供商，并在 2021 年继续快速增长。

PaaS 包括哪些服务？

虽然 PaaS 最常见的用例是 web 应用程序部署，但许多其他云服务也属于这种情况。

让我们仔细看看。

数据库即服务(DBaaS)

手动安装在虚拟机上的云托管数据库只是 IaaS 的一种实现。

要被视为 PaaS 产品，它需要是一个集成的解决方案，提供存储、计算能力和关系数据库功能。

这方面的一个例子是 Azure SQL 数据库服务，它提供了一个完全托管的数据库，具有自动更新、可伸缩性、智能威胁保护和人工智能搜索。

Azure SQL Database

这一类别的云服务产品也称为 DBaaS，是 PaaS 的一个子类别。

物联网(IoT)平台

比以往任何时候都有更多的物品由电脑驱动并连接到互联网上。新的 HTTP/3 标准只会进一步加速这一进程。现在，联网设备包括灯、恒温器、烤箱、洗衣机、锁，甚至卡车引擎。

互联网连接的基本框架可以被认为是 IaaS，但是用于跨设备和应用程序控制和共享数据的复杂的API属于 PaaS。

移动服务(API)

公司不再满足于用电子邮件向客户发送通知和营销活动。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

他们还大规模使用自动短信。

有了 SMS APIs，公司可以在其应用程序中构建自动消息。

例如，他们可以发短信给客户:

• 提醒他们预定的电话或会议。
• 推广新的相关产品或服务。
• 就最近遇到的客户服务寻求反馈。
• 招募客户加入案例研究或调查。

这些服务有时被单独归类为通信平台即服务(CPaaS)，这是 PaaS 的一个子类别。

推送通知 API

与 SMS 文本消息一样，除了浏览器和移动推送通知之外，这些 API 支持推送通知。

您可以使用它们来:

• 提醒客户为你的应用安装新的更新。
• 赢回已有数周未访问你的应用的非活跃用户。
• 做一个相关的限时促销广告。

机器学习

如果你真的想利用你的数据，仅仅把它存储在云中是不够的。数据仍然闲置着，只是在一个新的位置。

你需要建立算法来筛选你的数据，找到有意义的见解和可行的步骤。

借助基于云的机器学习平台，您可以轻松地(从模板)创建模型，将它们应用到您的数据库，并根据需要扩展您的计算能力。

IBM Watson Studio

例如，IBM Watson Studio 让您可以自动化人工智能生命周期管理，只需单击一下就可以部署和运行模型，等等。

这是利用大数据的一个很好的 PaaS 环境。

人工智能支持的搜索和建议也是四大提供的 PaaS 开发工具的一部分。

Hadoop、Spark 和其他数据处理框架

Apache Hadoop 是一个开源软件框架，它使得跨分布式虚拟机集群处理大数据集成为可能。

您可以使用任何领先的 PaaS 供应商的 Hadoop 作为服务，而不是从零开始设置环境。

这些领先的公司还提供 Hadoop 之外的定制数据湖和数据处理服务。

最受欢迎的 PaaS 服务

许多最流行的云解决方案都是 PaaS 服务。看看 2020 年关于公共云服务的调查结果就知道了。

The most popular cloud service (Source: Flexera)

基于云的关系数据库是最受欢迎的，67%的公司已经在使用它们， 17% 正在试验，还有 10% 计划使用它们。

第三，你有数据仓库。 53% 的公司目前将此作为处理和分析大数据的解决方案。

Google Cloud BigQuery 就是这类 PaaS 产品的一个例子。

借助我们灵活的 Google Cloud powered 基础设施，将你的 WordPress 站点速度提升 200%。免费试用 kin sta

4 家领先的 PaaS 提供商:他们提供什么服务？

正如我们已经提到的，在公共云服务中，有四个明显的市场领导者。

但是，它们在 PaaS 服务产品中如何相互竞争呢？

下面，我们将仔细看看每一个著名的云服务提供商，以及他们带来了什么。

自动警报系统

AWS 是最早的云计算提供商，在 2006 年推出了主要的 EC2 产品。

这种领先地位巩固了他们作为明显的市场领导者的地位，并且它仍然是世界上最大的云服务公司。

但是具体到 PaaS，它带来了什么？

快速浏览一下亚马逊的服务概述，你就会知道你需要知道的一切。

AWS services overview

大多数突出显示的用例实际上代表了一个 PaaS 产品。让我们具体分析一下 AWS 在 PaaS 产品方面提供了什么。

| 平台即服务 | AWS |
| 应用部署 | 亚马逊弹性豆茎 |
| 大数据处理 | 亚马逊电子病历 |
| 数据库 | 亚马逊红移 |
| 巴波斯 | 亚马逊极光、亚马逊 RDS |
| 通知(短信、电子邮件、推送) | 亚马逊社交网站 |
| 机器学习 | 亚马逊 SageMaker |

AWS 只提供计算能力和虚拟机出租的日子早已一去不复返。

现在，从应用部署和大数据到 DBaaS 和机器学习，它为每个主要的 PaaS 服务和用例提供定制产品。

亚马逊一直是先行者，在 2010 年推出了原生通知服务，简单通知服务(SNS)。同年，Twilio 成立。

如果您正在寻找一个多功能的 PaaS 提供商，那么这个行业最有经验的老手绝对不会错。

IBM 云

IBM 云呢？作为计算领域的早期创新者，IBM 在开发云服务套件上投入了大量资金和精力。

IBM 在 2014 年首次推出其 PaaS 服务，名为 IBM Bluemix。

2017 年，IBM 放弃了 Bluemix 品牌，并将其 PaaS、IaaS 和私有云产品归入 IBM Cloud 保护伞下。

IBM Cloud 拥有广泛的企业客户端，自 2011 年推出以来，已经迅速发展成为领先的 PaaS 提供商之一。

这体现在它的一系列服务中:

IBM Cloud products overview

但是 IBM 在 PaaS 部门的排名如何呢？

| 平台即服务 | IBM 云 |
| 应用部署 | IBM 云铸造厂 |
| 大数据处理 | IBM BigInsights |
| 数据库 | IBM DB2 |
| 巴波斯 | IBM Cloud 数据库(Redis、PostgreSQL 等)。） |
| 通知(短信、电子邮件、推送) | IBM 推送通知、短信(通过第三方提供商) |
| 机器学习 | IBM 沃森工作室，IBM 沃森 |

IBM Cloud 涵盖了基本的 PaaS 用例，如应用部署、大数据处理和数据仓库。

但是对于通知，IBM 还没有提供完整的解决方案。你必须依靠像 Twilio 这样的第三方提供商来将 SMS 引入到你的应用程序工作流程中。

而 IBM 早就走在了机器学习和 AI 的前沿。IBM 深蓝在 1997 年成为第一个打败国际象棋世界冠军的人工智能。

IBM Watson Studio 使 Watson AI 的工作变得简单，帮助您理解数据。

谷歌云

谷歌不仅仅是一个搜索引擎。它也是领先的 SaaS 公司之一，拥有 Google Docs、Drive、Gmail 和整个 Google Workspace。

谷歌还允许你租用基础设施和平台，这使得每月处理数十亿的访问者成为可能。

谷歌云于 2008 年推出，是第二家进入该市场的主要公司。其广泛的产品清单显示了它仍然是市场领导者之一的原因。

Google Cloud products overview

对于特定于 PasS 的产品，情况也是如此。

| 平台即服务 | 谷歌云 |
| 应用部署 | 谷歌应用引擎、谷歌 Kubernetes 引擎 |
| 大数据处理 | ✓ Google Dataproc |
| 数据库 | 谷歌大查询 |
| 巴波斯 | Google BigTable、Google Cloud SQL 等。 |
| 通知(短信、电子邮件、推送) | Firebase 云消息(推送和应用内消息) |
| 机器学习 | 谷歌人工智能平台 |

对于应用部署和开发，谷歌提供了广泛的工具，包括谷歌应用引擎和 Kubernetes 引擎。

Google 还通过其 Dataproc 服务提供了许多大数据处理选项。您可以使用 Hadoop、Spark 或其他框架来建立集群并开始快速处理万亿字节的数据。

对于常规数据库和仓库，Google 也提供了几个选项，比如 BigTable、Google Cloud SQL 等等。

通过 Firebase 云消息，你可以安排和发送推送通知和应用内消息，但不能发送文本。

谷歌人工智能平台提供了一个用户友好的界面，以尽快创建、管理和部署新的机器学习模型。

这是一个适合您所有 PaaS 需求的完整平台。

微软 Azure

微软不仅负责全球大多数台式电脑和笔记本电脑的操作系统。

它还拥有最大的公共云服务集合之一，包括 Office 365、微软团队 (SaaS)和 Azure (IaaS & PaaS)。

Azure 云平台包括从人工智能和机器学习到分析、开发工具、数据处理等一系列服务。

Azure products overview

在平台层面，微软也为你提供了保障。

| 平台即服务 | 微软 Azure |
| 应用部署 | Azure 应用服务 |
| 大数据处理 | Azure 数据砖 |
| 数据库 | Azure SQL 数据仓库 |
| 巴波斯 | Azure SQL 数据库 |
| 通知(短信、电子邮件、推送) | Azure 通知中心(推送)、Azure 通信服务(短信、语音) |
| 机器学习 | Azure 机器学习 |

Azure 应用服务通过内置补丁、安全、扩展和大量集成，使应用部署变得简单。

您可以使用一系列基于 SQL 的解决方案来存储和处理数据，如数据仓库或较小规模的数据库。然后，您可以使用 Azure 机器学习来创建和部署模型，以理解您的数据。

Azure 还支持在你的应用体验中构建自动推送和短信通知。

PaaS has grown into a huge cloud computing market. Know who's leading this industry through our in-depth cloud market share analysis 🌩📊.Click to Tweet

摘要

PaaS 不仅为您提供所需的计算能力和基础设施，让您能够在整个组织中更好地收集、共享和实施数据。它还包括实时利用数据和实施内部或外部应用程序所需的环境。

如果您希望利用 PaaS 为您的网站提供的强大功能，而无需费力寻找最佳的服务组合来创建您的环境，您可以使用我们的免费迁移服务。我们的无障碍托管计划依赖于来自谷歌云的尖端云基础设施，无需设置这一切。

如果您对 PaaS 产品和服务有任何疑问或体验，请在评论区留言！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

SSD 是什么？关于固态存储，你需要知道的一切

原文：https://kinsta.com/blog/what-is-ssd/

如果你想知道，“什么是固态硬盘？”不过不太了解，你来对地方了。固态硬盘(SSD)是一种存储设备，允许在没有恒定电源的情况下永久读取、写入和存储数据。

SSD 与硬盘驱动器(HDD)有何不同？哪个更好？您如何根据自己的需求选择合适的固态硬盘？

在本指南中，我们将帮助您了解什么是固态硬盘，固态硬盘和硬盘的区别，固态硬盘的各种类型，以及如何选择最佳固态硬盘。

继续读！

固态存储(SSD)的历史

A 2.5-inch bay SSD. (Image source: Dsimic, via Wikimedia Commons)

你知道 SSD 存储及其发展的漫长旅程始于 20 世纪 50 年代吗？

没错，就是那么老！

Kinsta 把我宠坏了，所以我现在要求每个供应商都提供这样的服务。我们还试图通过我们的 SaaS 工具支持达到这一水平。

Suganthan Mohanadasan from @Suganthanmn

View plans

当时，他们通过两种类似的技术在第一代计算机(真空管计算机)中使用它们:卡容量只读存储器和磁 磁芯存储器。

然而，这两种解决方案在 20 世纪 50 年代和 60 年代就过时了，因为像磁鼓存储器这样的廉价存储组件越来越受欢迎。

随着技术的不断发展，到 20 世纪 70 年代和 80 年代，固态硬盘重新出现，但它们非常昂贵，直到 1976 年 Dataram 推出 Bulk Core 固态硬盘才被广泛采用。尽管这款 2 GB 固态硬盘的革命性创新仍然使用核心内存，但它具有高度兼容性，运行速度比固定磁头磁盘快得多。

公司开始开发 SSD 技术，如 1983 年配备 128 KB SSD bubble 内存的夏普 PC-5000。到 20 世纪 90 年代，基于闪存的固态硬盘问世，并开始在全球范围内流行起来，但它们仍然非常昂贵(高达 47，000 美元)。

2003 年，Transcend 推出了带有并行高级技术附件(并行 ATA 或 PATA)连接器的廉价闪存固态硬盘，价格低至 50 美元。PATA 连接器插在电脑硬盘上。

直到 2006 年，三星才开始大规模销售 32 GB 容量和 PATA 接口的闪存固态硬盘。OCZ Technology 在 2009 年推出了大量存储固态硬盘，并配有 1 TB 基于闪存的固态硬盘，而 Virident Systems 在 2012 年开发了第二代基于闪存的固态硬盘，存储容量高达 2.2 TB。

到 2012 年底，我们看到了用于高性能应用的可靠的企业级闪存驱动器，例如英特尔的 SDD DC S3700 驱动器。对速度、高性能和可靠性的日益增长的需求是固态硬盘相对于硬盘发展和进步的关键因素。

固态硬盘与硬盘有何不同？哪个更好？您如何根据自己的需求选择合适的固态硬盘？🤯点击了解更多⬇️ 点击推文

固态硬盘和硬盘的区别

为了理解对固态硬盘的大肆宣传，你应该首先知道它是如何工作的，以及它与传统的存储技术(如硬盘驱动器)有何不同。尽管固态硬盘和硬盘都用于存储数据，但它们的操作方式不同。

硬盘如何工作

硬盘比固态硬盘存在的时间更长。您可以在各种电子设备中找到它们，如台式机、笔记本电脑、游戏机、手机和平板电脑。然而，由于其操作方法，它现在被认为是一种存储数据的旧技术。

An HDD drive (Image source: Wikimedia Commons)

如果你熟悉老式唱机，硬盘有点类似。硬盘驱动器是一种机电、易失性存储设备，由围绕主轴(中心轴)旋转的多个盘片(磁盘)组成。它有一个机械臂，使它能够写和读数据。

有两种流行的硬盘尺寸:用于笔记本电脑的 2.5 英寸硬盘和用于台式机的 3.5 英寸硬盘。硬盘的速度取决于它每分钟旋转的次数。

固态硬盘的工作原理

与硬盘不同，固态硬盘存储设备没有移动部件，并且几乎是即时访问时间。使用 SSD，数据存储在微芯片中，速度更快。与硬盘相比，固态硬盘的尺寸更小，甚至可以直接安装到主板上。你可以说它是一种更高级、更复杂的 u 盘。

An SSD drive (Image source: Wikimedia Commons)

SSD 依赖于基于闪存的内存，NOR 和 NAND 是两种最受欢迎的闪存类型。大多数固态硬盘使用 NAND 闪存，因为它的写入速度更快，尺寸也比 NOR 更小。NAND 是一种非易失性闪存，即使磁盘关闭，数据也能保存在其中。

硬盘使用机械臂来读写数据，而固态硬盘则使用处理器(控制器)来读写数据。它还负责存储、恢复、缓存和清理数据。

SSD 读写数据的速度及其整体性能由其控制器决定。

为什么固态硬盘比硬盘好

现在，让我们来看看存储驱动器之战。虽然许多数据中心和预算消费者仍在销售和使用优质的旋转磁盘，但更多的企业和消费者正在转向固态硬盘。原因如下:

• 速度:速度是固态硬盘相对于硬盘最显著的优势。由于没有移动部件，固态硬盘读取数据的速度比硬盘快 10 倍，写入速度快 20 倍。此外，硬盘的复制过程在 30 MB/s 到 150 MB/s 之间，而标准 SSD 需要 500 MB/s。这样，SSD 可以提供更快的启动时间、应用程序和文件(例如游戏和视频)的加载时间以及数据传输。

• 能效:由于硬盘依赖于大量的机械操作，它是一种耗电的存储设备。相比之下，固态硬盘更节能，功耗更低，延长了电池寿命。

• 不会过热:固态硬盘更加耐热，而硬盘往往会过热，影响系统的整体性能。

• 构建:固态硬盘没有活动部件，在耐用性方面比硬盘更胜一筹。这是一种更可靠的存储设备，不会振动，可以承受冲击，这是 HDD 所不能的。固态硬盘也很安静，而硬盘噪音很大。

• 重量:与硬盘相比，固态硬盘重量更轻，使其在性能和功能方面更高效。

当您需要使用固态硬盘时

鉴于固态硬盘相对于硬盘的各种优势，许多人和公司都在采用固态硬盘。但这并不一定意味着你必须拥有一个固态硬盘或耗尽你的钱包。

那么，让我们来看看 SSD 的一些顶级用例。

1.商业

SSD 是管理和存储大量数据的企业的绝佳选择，因为它在文件传输和访问时间方面具有高速、高性能和可靠性。

以编程和平面设计为例。虽然硬盘因其大存储容量而在图形设计师和程序员中很常见，但专业人士最近因其速度而转向固态硬盘。与硬盘相比，它们可以在更短的时间内交付更多的项目。

2.网站托管

速度是虚拟主机行业的一个重要因素。如果你的网站加载缓慢，你会失去收入和流量，最终扼杀你的在线业务。你知道速度是提高你的网站在谷歌上的排名的关键因素之一吗？

专业网站包括丰富的内容和互动功能，尤其是托管在 WordPress 上的数据库密集型网站。固态硬盘的快速读/写速度有助于减少延迟和快速执行请求，使你的 WordPress 网站加载更快。我们已经写了很多关于如何提高你的 WordPress 网站速度的文章。

数据安全性是使用 SSD 的另一个重要原因，因为 HDD 容易发生机械故障，导致数据丢失风险。如上所述，固态硬盘对物理损坏的抵抗力更强，是保护数据的更好选择。

与硬盘不同，固态硬盘不会出现数据碎片，从而提高了整体性能。他们的低功耗也是理想的网站托管公司，以节省电力和降低电力消耗，从而使他们变得更加环保。

在 Kinsta，我们相信固态硬盘的力量，我们所有的计划都采用固态硬盘存储。了解我们如何开发出最快的托管解决方案以及如何为您的网站选择合适的存储容量。

3.赌丨博

SSD 受到游戏发烧友的欢迎，这并不奇怪。从速度到耐用性和能效，固态硬盘的性能非常适合游戏。如今的游戏加载了大量的纹理和模型，用硬盘加载可能需要 3 分钟。但有了固态硬盘，同样的游戏不到一分钟就能加载完毕。

4.旅行

无论你是研究人员、公用事业工作者，还是博客作者/ vlogger ，如果你经常旅行，你都需要一个便携式固态硬盘。固态硬盘和硬盘确实有内部和外部两种形式。然而，由于其非易失性机制，固态硬盘更耐用，并且与外置硬盘相比不占用太多空间。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

不同类型的固态硬盘

如今市场上有不同类型的固态硬盘。你可能听说过术语“萨塔”、“NVMe”、“T0”、“PCIe”和“M.2”，但它们到底是什么呢？

首先，不同类型的固态硬盘主要取决于存储单元和计算机或服务器之间的连接接口。让我们深入了解每一种类型。

Different types of SSD (Image source: Tech Society)

萨塔（人名）

固态硬盘使用的第一代接口称为串行高级技术附件(SATA)。这是硬盘和存储设备中最常用的接口。

SATA 提供高达 600 MB/s 的速度，其大小适合大多数笔记本电脑和个人电脑，因此广受欢迎。SATA 也有较小的尺寸，称为迷你 SATA (mSATA)。

SATA 是所有 SSD 类型中最慢的，但它的数据传输率仍然比 HDD 快 5 倍。

NVMe

非易失性快速内存(NVMe)是一种固态硬盘协议，允许数据交换速度高达 2600 MB/s，几乎是 SATA 固态硬盘的 5 倍。NVMe SSD 比 SATA SSDs 更新，通常使用外围组件互连快速(PCIe ),下面将详细讨论。

NVMe 固态硬盘比 SATA 固态硬盘更贵，通常需要更大的功率。这就是它们仅用于特定需求的原因，例如优先考虑高数据处理和传输速度的企业。

NVMe 协议也适用于闪存，这意味着即使是外部或便携式 NVMe 固态硬盘也能像内部连接的 NVMe 固态硬盘一样快。

PCIe 连接器

您还可以根据使用的连接器对固态硬盘进行分类，连接器定义了数据传输速度。

PCIe 是用于将高性能显卡直接连接到主板的同一种连接器。当 NVMe 固态硬盘使用 PCIe 连接器时，它们可以提供最快的数据处理和传输速度。

然而，在处理更大的文件 (50 GB 或更大)时，速度或带宽的差异是最明显的，但在启动 Windows 或启动游戏时，它与使用典型的固态硬盘不会有太大区别。

M.2 连接器

以前被称为下一代外形(NGFF)，M.2 连接器确保 SSD 达到最快的速度(高达 2600 MB/s)。如果电脑的主板没有 M.2 连接器，那么或者，一个带有 M.2 连接器的 PCIe 卡用于将 NVMe SSD 连接到主板。

您的新网站需要顶级、快速、安全的固态硬盘托管吗？Kinsta 提供超快的服务器和来自 WordPress 专家的 24/7 世界级支持。查看我们的计划

如果电脑的主板已经有一个 M.2 连接器，你会发现存储标签为“SATA M.2”或“NVMe M.2”。但是，如果主板没有它，有一个内置 M.2 连接器的 PCIe 卡，它会被标记为“PCIe NVMe M.2 SSD”

M.2 连接器尺寸相对较小，是用来替代 mSATA 的。它也适用于小型笔记本电脑和大型设备。M.2 连接器兼容 SATA、PCIe，甚至 USB 3.0。

固态硬盘的优势和劣势

从我们到目前为止对固态硬盘的讨论来看，你现在对固态硬盘的主要优势有了一个很好的了解。

让我们概括一下:它们比传统的磁盘驱动器快得多。它们也更可靠，因为它们提供了更稳定的性能。更重要的是，它们节能且体积更小。

固态硬盘的缺点呢？固态硬盘确实在几个方面落后了:

• 价格点:价格是固态硬盘最大的劣势。虽然它们变得越来越便宜，越来越实惠，但仍然比硬盘贵。尽管如此，固态硬盘仍然不适合所有人，尤其是预算紧张的用户。

• 存储容量:一些用户将存储容量优先于性能，因为他们通常将存储用于大型文件，如电影、音乐、照片等。虽然固态硬盘可以为您提供高达 4 TB 的存储，但如果与硬盘相比，它们的容量仍然有限。

• 有限写入/擦除:固态硬盘的写入/擦除周期有限。例如，消费级固态硬盘的写入/擦除周期数量有限，在 3，000–5，000 个周期之间。高级固态硬盘的写入/擦除周期可达 100，000 个周期。

固态硬盘定价

尽管固态硬盘通常比硬盘更贵，但对固态硬盘的需求一直在快速增长，特别是对于基于云的平台，以实现我们上面讨论的优势。自推出以来，其他因素也导致了 SSD 价格的下降。

例如，NAND 闪存的价格在过去几年一直在下降。此外，从 32 层和 64 层技术到 96 层和 128 层工艺的转变，使得更小的空间可以容纳更多的存储空间，从而降低了材料成本。

另一个因素是如今市场上面向消费者的固态硬盘种类繁多，从经济型到高级选项。例如，你可以以低至 150 美元的价格买到配有 1TB 存储和 3D NAND NVMe Gen3x4 PCIe M.2 2280 接口的阿达塔 XPG SX8200 Pro，或者以大约 60 美元的价格买到配有 500 GB 存储的关键 MX500 3D NAND SATA SSD。

当你购买固态硬盘时，计算每千兆字节的成本。但请记住，大存储容量驱动器(大于 256 GB 的驱动器)将为您带来更高的性价比。

如何选择合适的固态硬盘

选择正确类型的固态硬盘取决于几个因素，包括您的预算、所需存储容量的大小以及设备(台式机、笔记本电脑、服务器等)的种类。).

1.预算

最实惠的存储形式确实是硬盘，而固态硬盘，即使有各种类型，通常也更贵。

SATA 固态硬盘是最实惠的固态硬盘类型。换句话说，如果你预算不多，但追求性能，那么 SATA SSD 是最适合你的选择。

另一方面，如果预算不成问题，表现更好的 NVMe 是更有效的选择。

2.存储容量

固态硬盘的存储容量越来越大。容量越大，它们的性价比越高。一个简单的计算可以帮助您确定您的电脑需要多少固态硬盘存储空间。

首先，知道你平均每月使用多少数据。然后，为了安全起见，再加上至少 20%。这就是你需要的储物方面。

例如，如果您使用的所有文件和数据的平均总大小为 700 GB，那么 1 TB 的 SSD 将非常适合您。但是，如果你的使用量不超过 500 GB，那么 512 GB 的 SSD 似乎就足够了。

3.设备类型

由于固态硬盘及其连接器的不断发展，它们的尺寸在保持性能的同时不断变小。因此，大多数固态硬盘与大多数计算机设备及其主板兼容。

也就是说，使用的 SSD 类型取决于您的设备是否与之兼容。但是可以通过合适的连接器进行调整。

唯一不能用于某些设备的类型是 SATA SSD，因为它的尺寸很大。这就是为什么它在台式机等更大的设备中更常见。

另一方面，NVMe 固态硬盘兼容几乎所有设备，尤其是在使用 M.2 连接器时。

如果您仍然不确定应该使用哪种固态硬盘，请查看下面的对照表:

| 固态硬盘类型 | 负担能力 | 优势 | 缺点 | 最适合 |
| 萨塔（人名） | 负担得起的 | 最便宜的固态硬盘 | 性能比 NVMe 固态硬盘慢 | 国内消费 |
| NVMe | 相对昂贵 | 高性能和小尺寸 | 相对昂贵并且可能需要连接器来与一些设备兼容 | 业务用途、游戏、网站托管 |

了解什么是固态硬盘，固态硬盘和硬盘的区别，固态硬盘的各种类型，&如何选择最佳固态硬盘👇

摘要

毫无疑问，由于企业和网络托管服务需求的增加，固态硬盘市场正在蓬勃发展。但是固态硬盘会永久取代硬盘吗？鉴于硬盘的巨大存储容量和可承受的成本，它是否会成为过去仍不确定。

然而，固态硬盘的成本正在下降。它们有不同的存储容量、大小和配置，比以往任何时候都更加经济实惠。

我们建议您对台式机和笔记本电脑使用固态硬盘而非硬盘。如果你正在为你的 WordPress 站点寻找托管的固态硬盘，我们已经为你准备好了！

在选择固态硬盘和硬盘时，你的选择是什么？请在评论中告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

什么是虚拟主机？它是如何工作的？

原文：https://kinsta.com/blog/what-is-web-hosting/

如果你想建立一个在线的存在，了解什么是虚拟主机是很重要的。无论你是自己建立一个网站，还是想了解更多关于这个话题的知识，我们都可以帮助你了解虚拟主机是如何工作的。

让我们开始吧！

什么是虚拟主机，它是如何工作的？

虚拟主机是购买在线空间来存储你的网站的过程。注册一个虚拟主机服务可以让你在线发布你的网站。

当你创建一个 WordPress 网站时，你需要两样东西:一个域名和一个主机选项。

需要在这里大声喊出来。Kinsta 太神奇了，我用它做我的个人网站。支持是迅速和杰出的，他们的服务器是 WordPress 最快的。

Phillip Stemann

View plans

WordPress 是世界上最顶级的 内容管理系统【CMS】，可以免费使用，但需要一个网络主机——它提供并存储你的网站文件——和一个域名，也就是你网站的地址。

信息

网站由不同的文件组成，如 HTML、CSS 和图像，这些文件是在线显示内容所必需的。这些文件从您的计算机上传并存储在 web 服务器的在线空间中。

web 服务器是一台物理计算机，它将其他用户连接到你的网站。每当有人在浏览器中键入您的网站地址时，您的主机就会传输满足该请求所需的所有文件。

除了存储和传送文件，托管服务通常也帮助你维护网站，如备份，安全和正常运行时间。由于主机服务提供商的功能和价格差异很大，选择一个符合你需求的主机方案是至关重要的。

What is web hosting? 🤔 This post breaks down everything you need to know 💪Click to Tweet

虚拟主机和域名系统

我们提到 WordPress 网站需要主机和域名。

当用户想要访问您的网站时，他们会在浏览器中键入您的域名。他们的计算机发送一个连接到保存你的文件的网络服务器的请求。

在到达你的网络服务器之前，请求通过一个域名服务器网络，这个网络组成了域名系统(DNS)。在 DNS，请求查找服务器的 IP 地址，并将请求转发给它们。

简而言之，DNS 确保浏览器连接到正确的服务器。

你可以把网络服务器想象成你家的所在地，把域名想象成它的地址。你的家可以在全球任何地方，但域名可以让人们找到你。

DNS 的诞生是因为网站通过难以记忆的数字串 IP 地址进行交流。将一个易于记忆的域名与网站的 IP 地址绑定在一起，可以让浏览网页变得更加简单。

网站所有者可以从域名 注册商处购买域名。

虚拟主机的类型

现在你知道什么是虚拟主机，我们将看看不同类型的虚拟主机计划。

不同的客户有不同的需求。一个使用多种媒体文件并接待众多访问者的在线企业比一个用于写博客的个人网站有更多的托管需求。

主机提供商考虑速度、存储空间和他们的主机方案产品的价格。每种选择都有不同的收益。

让我们看看最受欢迎的选项。

共享主机

Shared WordPress hosting

当你学习什么是虚拟主机时，你可能会听说共享虚拟主机。共享主机最适合入门级功能。因为它是针对初学者的，所以共享主机包通常带有网站构建器、模板和电子邮件功能。

通过共享主机，您可以与其他网站共享服务器资源，如磁盘空间和带宽，这是最实惠的选择。但是，因为您在一台服务器上与多个网站共享空间，所以存在风险。

共享主机会影响网站性能。例如，如果其中一个网站的流量过大，就会降低您网站的速度。共享主机也有安全风险，可能导致网站被黑。

共享主机上的网站也共享一个 IP 地址。如果邻近的网站进行非法活动，你的 IP 地址将被封锁，阻止用户甚至谷歌访问你的网站。

最适合:接收最小网络流量的新网站，如小型商业网站。

优点:

• 低成本
• 预配置的服务器选项
• 几乎不需要技术知识
• 主机负责服务器维护

缺点:

• 与其他网站共享资源会影响安全性和速度
• 共享 IP 地址
• 对服务器配置的控制很少甚至没有

专用主机

Dedicated WordPress hosting

专用托管在共享托管的对面。这通常是最昂贵的托管类型，因为它让网站所有者对他们的服务器拥有最大的控制权。

有了专用主机，你就可以租用整个服务器，所以从选择操作系统到维护，一切都由你负责。

最适合:拥有高流量或需要控制服务器的网站所有者。

优点:

• 专用服务器空间
• 更快的网站速度
• 可扩展和可定制

缺点:

• 最昂贵的托管类型
• 需要专业技术知识

虚拟专用服务器(VPS)托管

VPS hosting

虚拟专用服务器(VPS)托管介于共享托管和专用托管之间。

VPS 主机模拟专用主机，因为每个网站在服务器上都有自己的空间，但 VPS 主机上的网站仍然与其他网站共享服务器空间。

最适合:需要更好地控制服务器但不一定需要专用服务器的网站所有者。

优点:

• 提供专用的服务器空间，而没有高昂的价格标签
• 网站所有者可以配置他们的服务器空间
• 不需要太多的技术知识

缺点:

• 无法处理高流量水平或高峰
• 服务器上的其他网站仍会影响性能

云托管

Cloud hosting

虚拟主机最可靠的选择是什么？云托管。不同于常规的主机托管，它采用一种集中的方法，将多个网站的数据存储在一个物理服务器上，云主机托管运行在虚拟化之上。

通过虚拟化，数据看似存储在一台服务器上，但多个存储设备共享物理服务器的容量。因为数据存储在不同的位置，所以很容易备份和检索。它也更灵活，因为它更容易添加存储空间。

最适合:需要大量处理能力、带宽和磁盘空间的高流量网站，如电子商务商店。

优点:

• 几乎没有停机时间
• 按需付费
• 资源根据用户需求进行扩展

缺点:

• 难以估计实际成本，因为它每月都在变化
• 依赖互联网

虚拟主机通常由这四个计划中的一个组成，但是主机包也迎合特定的市场。

WordPress 主机

托管 WordPress 主机(或简称为 WordPress 主机)是 WordPress 用户的一种共享主机。

服务器是专门为 WordPress 配置的，所以你的网站运行得更快更流畅。WordPress 托管计划还包括一些特殊功能，例如:

• 预装插件。
• 一键式 WordPress
• 预先设计的 WordPress
• 拖放构建器。
• 熟悉 WordPress 的客户支持团队。

电子商务托管

Kinsta’s WooCommerce hosting page

随着电子商务商店的盛行，主机提供商推出了电子商务 主机。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

像 WordPress 主机一样，电子商务主机提供了为企业量身定制的独特功能。这些通常包括:

• 免费的 SSL 证书
• 帮助设置支付网关
• 额外的安全性

WooCommerce 主机托管是电子商务主机托管的一个分支，如果你的网站有一个 WooCommerce 驱动的商店，你可以考虑一下。

注册虚拟主机之前需要考虑什么

现在，我们已经介绍了什么是虚拟主机和不同的主机方案，我们将权衡每一个功能，以帮助您选择正确的虚拟主机服务提供商，以及为什么 Kinsta 是优于其他虚拟主机的最佳选择。

选择正确的托管计划和公司是确保您的业务成功的关键。两者都会影响网站的速度、安全性、可扩展性和可用性。

这里有一些标准的功能，主机计划提供和什么寻找当选择一个主机。

1.磁盘空间

什么是没有磁盘空间的虚拟主机？

Disk space

所有的主机方案都提供了一定的磁盘空间，你可以用来存储你的文件。

我们建议在选择托管方案之前，确定您网站的存储要求。通过这样做，您可以更好地估计使用哪个计划。

不同网站有不同的存储要求。如果你的网站是媒体丰富的，投资一个额外存储的计划，因为那些文件会占用很多空间。

如果你还不能估计你的存储需求，选择一个可以让你购买更多磁盘空间的主机提供商来为增长做准备。

Kinsta 的优势:附加磁盘空间

在 Kinsta，我们不仅提供多种托管方案，而且你还可以选择购买附加软件 磁盘空间——并非所有的托管公司都这样做。

在 Kinsta 购买磁盘空间很简单:你必须从你的 MyKinsta 仪表板注册额外的磁盘空间。还可以通过 MyKinsta 监控计费和磁盘空间使用情况。

2.带宽

没有带宽，虚拟主机服务是不完整的。

带宽余量(也称为“数据传输”或“流量”)是衡量服务器在特定时间范围内传输数据的能力。它用每秒兆字节(MB/s)或每秒千兆字节(GB/s)来表示。

如果你想让你的网站运行得更快，带宽是一个关键因素，因为带宽的大小决定了从你的网站传输给你的用户的最大数据量。

如果你想要更高的带宽，你需要你的服务器，或者与更少的网站共享资源的服务器。但是请记住，更高的带宽需要更高的价格，因为有更少的用户来分摊租用服务器的成本。

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

主机包每月提供一定量的带宽。在选择托管方案之前，通过估算网站的大小和访客数量来确定适合网站的带宽。

信息

当你学习什么是虚拟主机，你有时会看到主机广告无限的带宽…但它不可能有无限的带宽。由于物理限制，总会有最大速度限制。

金斯塔优势:基于游客的定价模式

与大多数虚拟主机公司不同，Kinsta 不提供基于带宽的方案。相反，我们转向了基于访客的定价模式,因为这更容易让我们的客户理解和计算。

虽然我们已经脱离了基于带宽的模式，但你仍然可以在 MyKinsta 仪表板上跟踪带宽和访客计数数据。

我们的客户选择与我们合作是因为我们很棒，而不是因为我们按带宽收费。

3.正常运行时间和停机时间

最好的虚拟主机可以在没有停机 或中断的情况下运行，所以你的网站总是可以访问的。

如果服务器出现故障，高性能托管计划可以让它快速恢复运行。

正常运行时间衡量的是您的网站保持运行并对访问者可用的时间百分比——越接近 100%的正常运行时间越好。Kinsta 提供了 99.9%的正常运行时间保证，因为我们托管在谷歌云平台上。

Kinsta 优势:私有云托管

Kinsta 的整个基础设施都建立在 Google Cloud 平台上，该平台允许我们的物理服务器的容量由多个存储设备共享。由于数据存储在不同的位置，如果托管您网站的服务器出现故障，您的网站将立即恢复。

4.网站速度

用户希望网站在五秒或更短的时间内加载。

除了影响用户体验，网站速度也影响 SEO。不是所有的虚拟主机公司都能保证网站的快速运行。

让 Kinsta 的主机计划脱颖而出的一点是，我们不属于任何传统的主机类别。相反，我们的虚拟主机建立在谷歌云和 Cloudflare 之上，允许托管在我们平台上的每个网站在一个隔离的软件容器中运行，该容器包含运行网站所需的所有软件(Linux、 NGINX、 PHP 、MySQL)。

隔离软件容器确保每个软件都是 100%私有的，甚至不会在你的网站之间共享。除了安全方面的好处，客户报告网站加载速度降低了50%——导致流失率低于 5%。

金士达的优势:多个全球数据中心

Kinsta 通过让您在不同的谷歌云数据中心位置之间选择来确保网站速度。这使您能够将您的网站靠近您的访问者，确保低延迟和时间到第一字节(TTFB) 和快速加载时间。

所有这些特性与 HTTP/3 CDN 和最新版本的 PHP 8 相结合，确保您拥有业内最佳的性能堆栈。

5.安全性

Kinsta offers secure web hosting plans

网站安全可不是闹着玩的。

除了磁盘空间和带宽，网站还需要主机提供商提供的安全性。

虽然 WordPress 是安全的，但它的流行使其成为数据泄露的目标。

如果你不精通技术，我们建议你比较一下每个主机方案的默认安全特性。许多廉价或免费的虚拟主机计划可能会提供一些默认的安全功能，但提供附加的高级功能。

Kinsta 上托管的所有网站都带有免费的 SSL 证书。我们还支持双因素身份验证和 IP 地理位置阻止。我们对所有新安装的系统强制使用强密码，并自动禁止一分钟内登录失败超过六次的 IP 地址。

我们甚至提供恶意软件安全保证。如果您的网站遭到破坏，我们将免费修复。

因为没有一个网站是 100%防黑客的，我们还会自动创建两周的备份。

Kinsta 优势:Cloudflare 的企业级防火墙

Kinsta 利用 Cloudflare 的企业级防火墙来保护客户网站。Cloudflare 的防火墙让我们能够阻止恶意流量，我们的 Cloudflare 集成包括免费的分布式拒绝服务(DDoS)保护。这意味着更好地保护您的网站。

6.控制面板

虽然这不会直接影响网站的性能，但你也应该检查一下你的主机账户的控制面板。

控制面板使您能够控制服务器进程。您可以找到不同的工具来:

• 上传和管理网页、域和子域
• 管理隐私和安全
• 将访问者重定向到另一个位置
• 安装应用程序
• 创建和管理电子邮件帐户
• 备份数据
• 保护目录

控制面板还允许您访问文件传输协议( FTP ) ，该协议在您的计算机和在线服务器之间传输文件。

当你为主机计划货比三家时，不要忘记阅读公司控制面板可用性的评论。如果你的网站使用起来复杂或者混乱，你将无法探索或者最大化它的功能。

金斯塔的优势:MyKinsta

MyKinsta landing page. (Image source: Kinsta)

MyKinsta 是 Kinsta 的控制面板。它是作为 cPanel 或 Plesk 的替代品开发的，考虑到了 WordPress。

MyKinsta 让您能够:

• 轻松管理多个 WordPress 网站
• 预安装插件
• 迁移你的 WordPress 网站
• 克隆您现有的网站
• 添加和管理域
• 跟踪绩效和分析

Whether you're building a website yourself or just want to learn more about the topic, learn how web hosting works in this guide ⬇️Click to Tweet

摘要

现在你知道什么是虚拟主机，不同的类型，以及在你注册一个计划之前要考虑什么，是时候建立你的网站了。

无论您计划创建一个个人网站、经营一家代理公司、开发一个应用程序、还是建立一个数据库、，Kinsta 都能为您提供完美的计划。

Kinsta 所有的 WordPress 计划包括:

• 免费 WordPress 安装
• 免费 SSL 证书
• 企业 Cloudflare 集成
• 高级暂存环境
• 全天候正常运行时间监控
• 技术支持

有了 30 天退款保证，您可以享受所有这些以及更多。查看我们满意的客户或联系我们，为您找到合适的计划。

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。

你的邮件变成垃圾邮件的 9 个原因

原文：https://kinsta.com/blog/why-are-my-emails-going-to-spam/

电子邮件是接触目标受众和扩大客户群的一种强有力的方式。近 60%的用户表示营销邮件会影响他们的购买。然而，随着在线隐私和保护法的收紧，让你的电子邮件进入收件人的收件箱变得更加困难。

如果你的电子邮件最终出现在用户的垃圾邮件文件夹中，不要担心。通过遵循一些简单的最佳实践，你不仅能确保你的邮件到达收件人手中，还能提高打开率，产生更大的影响。

在这篇文章中，我们将探讨为什么电子邮件最终成为垃圾邮件，以及你可以做些什么。

有很多内容要讲，所以我们开始吧！

更喜欢看视频版？

为什么垃圾邮件是电子邮件营销人员的一个问题

估计表明，在 2019 年至 2023 年期间，每天将发送多达 60 十亿 垃圾邮件。显然，用户并不欣赏大量的垃圾邮件。然而，这也是电子邮件营销人员的一个主要问题。多达 20%的电子邮件将永远不会到达收件人的收件箱，从而阻止你接触到你的受众。

随着电子邮件的平均投资回报率(ROI)达到 122 %( T1 ),最大限度地减少你的邮件出现在那 20%中的的机会是很重要的。每封垃圾邮件都是对你的浪费，包括邮件本身和它可能产生的任何潜在的转化。

幸运的是，你可以做很多事情来将你的邮件从垃圾邮件文件夹中清除出去，而且大部分都相当简单。在下一节中，我们将看看电子邮件变成垃圾邮件的一些最常见的原因，并看看如何避免它们。

为什么我的电子邮件会变成垃圾邮件？(9 个潜在原因)

有许多原因会导致电子邮件被识别为垃圾邮件，从触发垃圾邮件过滤器的关键字到不正确的权限。

让我们浏览一些最常见的场景，并探索如何确保您的邮件到达用户的收件箱。

1.您的收件人将您的电子邮件标记为垃圾邮件

你的电子邮件最终成为垃圾邮件的第一个也是最明显的原因是因为你的收件人把它们放在了那里。

即使你的内容是强有力的，并且收件人明确允许你联系他们，他们仍然可能决定将你的电子邮件标记为垃圾邮件，以此来清理混乱的收件箱。

他们也可能忘记了当初为什么订阅你的名单，或者只是犯了一个错误。

Reporting email message as spam

不幸的是，如果有足够多的邮件被用户标记，它会导致垃圾邮件过滤器标记您的地址，并开始自动将您的邮件发送给垃圾邮件。

这意味着你的信息可能最终看起来像垃圾邮件，即使对于过去没有明确标记你的用户来说。这在 T2 的 Gmail、Outlook、雅虎和其他有大量人工智能驱动算法的服务中尤其可能发生。

一旦邮件发出，你就无法阻止别人将你的邮件标记为垃圾邮件。

你能做的是确保你的内容是一流的，并遵循其他最佳实践来避免你的邮件被用户视为垃圾邮件。这可以最大限度地减少有人故意标记您的通信的机会。我们将在接下来的章节中讨论其中的一些策略。
T3】

2.你没有遵循 HTML 最佳实践

虽然纯文本电子邮件相当简单，但对于电子商务商店等一些企业来说，它们可能不是一个可行的选择，因为与包含品牌、图像和其他 HTML 元素的电子邮件相比，它们可能会导致较低的参与度。

然而，当在你的消息中包含 HTML 时，遵循一些简单的规则来确保它们不会出现在垃圾邮件文件夹中是很重要的。

根据 Mailchimp 的说法，这里有一些电子邮件的 HTML 最佳实践:

• 保持邮件的最大宽度在 600 到 800 像素之间。这确保了它足够大，容易阅读，同时在电子邮件客户端预览窗格中也表现良好。
• 假设任何图像都将被电子邮件客户端阻止，如果关键信息包含在媒体元素中，用户可能看不到这些信息。
• 尽可能保持你的代码简洁明了，尤其是 CSS。此外，完全避免 JavaScript 和 Flash。这些可能被视为垃圾邮件过滤器攻击的媒介，而且许多电子邮件客户端根本不支持它们。
• 确保你的信息是手机友好的。事实上，如今用移动优先的理念来设计一切通常是个好主意。这意味着拇指友好的按钮，不会使移动网络过载的小的图像，以及在小屏幕上可读的电子邮件安全字体。
• 说到字体，你也要确保你选择的字体是跨平台的，清晰易读的。Arial、Verdana 和 Georgia 都是不错的选择。
• 查看添加到您的电子邮件签名中的任何链接，避免任何可能被标记为垃圾邮件的网站。

最后，让你的电子邮件的大部分内容都是文本，尽量减少 HTML 的数量是一个好主意。你的公司品牌和一种流行的颜色可以在不过度的情况下创造参与的奇迹。

3.您的主题行具有误导性或包含垃圾邮件触发器

主题通常是用户对你的邮件的第一印象，所以他们需要抓住注意力，吸引读者打开邮件。然而，他们也需要诚实。根据 CAN-SPAM 法案，误导性的主题不仅是不礼貌的，也是违法的。

根据 Litmus 的说法，超过一半的电子邮件回复者报告说，他们感觉被欺骗了，或者被骗去打开一封基于主题行的邮件。这是让你的邮件被扔进垃圾邮件文件夹的快捷方式，甚至可能导致一些用户退订。

注册订阅时事通讯

想知道我们是怎么让流量增长超过 1000%的吗？

加入 20，000 多名获得我们每周时事通讯和内部消息的人的行列吧！

Subscribe Now

Messages that begin with RE: but are not replies commonly get labeled as spam

误导性的主题是什么样的？以下是一些例子:

• RE 或 FW。不要以“回复”开始你的主题，除非你真的在回复什么。这是一个明目张胆的伎俩，也是获得退订的快速方法。同样，使用“FW”会让对方认为他们认识你(误导的定义)。
• 个人信息或引导性问题。像“我把手机落在你家了吗？”或者“你听说过某某人吗？”可能会让用户质疑是否认识发件人。
• 过分耸人听闻的主张。有些主题并不一定是谎言，但仍然有点过分。一般来说，你需要确保你的主题和读者在邮件中看到的内容相匹配。

你的主题也应该是专业的。这意味着不用全部大写，也绝对没有拼写或语法错误。免费工具语法可以自动检查你的拼写、语法和标点符号，并提醒你任何可能引起垃圾邮件过滤器的问题。

现在你知道应该避免什么主题，但是你仍然需要吸引用户打开你的邮件。Hubspot 有一些很好的建议来创造强有力的标题:

• 从动作动词开始。
• 创造一种紧迫感和重要性(但同样，不要被误导)。
• 提出一个有趣或引人注目的问题。

最后，记住:无论你的主题是什么，确保内容兑现了它的承诺。否则，你有可能损害你的名誉。

4.您没有收件人的许可

这个很简单:像 GDPR 这样的网络隐私法要求你必须得到收件人的明确许可才能给他们发邮件。这意味着你不能简单地购买电子邮件列表来快速访问一群联系人(出于其他原因，这也不是一个好主意，包括不良的针对性)。

然而，这也意味着，即使是在你的网站上提供了电子邮件地址的用户也需要明确告诉你，他们希望收到你的电子邮件，尤其是如果他们是欧盟公民的话。这可以是在创建账户时的免责声明，或者是在你的联系表格上，也可以是用户需要勾选以表明其意愿的复选框。

虽然在美国这不一定是要求的，但这仍然是一个很好的实践。如今，人们会收到很多电子邮件，如果你的邮件突然出现在某人的收件箱中，而他们并没有要求这些邮件，那么这些邮件很有可能会被标记为垃圾邮件。

5.您的内容会触发垃圾邮件过滤器

垃圾邮件过滤器会检查某些单词(或单词组合)。如果一封电子邮件获得足够的点击量，或者除了这个列表中的一些其他项目之外还包含这些词，它可能会最终出现在垃圾邮件文件夹中。垃圾邮件触发关键字可以包括:

• “免费”
• “最低价格”
• “额外收入”
• “轻松赚钱”
• “无成本”
• 连续出现多个感叹号或美元符号
• 带有不必要的空格或标点的单词
• 全大写的单词

一般来说，这些词要么是以销售为导向的，要么显然是为了绕过垃圾邮件过滤器而设计的(比如额外的空格)。虽然使用少量的这些并不一定意味着你的信息被判了死刑，但是使用太多的可能会被判死刑。

厌倦了体验你的 WordPress 网站的问题？通过 Kinsta 获得最好、最快的主机支持！查看我们的计划

Overly ‘salesy’ language and too many keywords can trigger spam filters

当然，有些关键词是很难避免的，尤其是当你发送电子商务或金融邮件时。为了解决这个问题，你可以使用各种各样的语言，并尝试在措辞上有所创新。

最重要的是，明智的做法是避免咄咄逼人或“推销”的语言，并确保你遵循我们在这里强调的写邮件内容的最佳实践。

6.您没有包含退订链接

像美国 CAN-SPAM 这样的法律明确规定，你的电子邮件必须包含退订的明确方式。此外，如果有人点击了取消订阅链接，您需要在 10 天内处理该请求，并且您不能强迫用户通过任何障碍。

虽然这似乎是一件坏事(你为什么要给人们退订的机会？)，其实可以起到相反的效果，前提是你的内容很强。给人们一个简单的方法让他们从你的订户名单上消失，这表明你的品牌是值得信赖的。

另一方面，隐藏或者干脆不提供退订选项肯定会让人沮丧。这也可能导致对你的时事通讯的负面报道(消息在互联网上传播得很快)，通常会引起人们的反感。

7.您的“发件人”信息是错误的或误导的

你的电子邮件可能成为垃圾邮件的一个主要原因是不正确的“发件人”信息。“发件人”这一行告诉你的收件人是谁发的邮件，这一行需要准确无误，不能有误导性。在某些情况下，你网站上的一个工具，比如一个联系表单插件，可能会发送带有“发件人”详细信息的“欺骗”电子邮件，从而触发垃圾邮件警报。

如果你的联系方式邮件被标记为垃圾邮件，解决方法通常很简单。您需要确保联系人表单设置中的“发件人”字段包含您网站的管理员地址，而不是表单中输入的电子邮件地址。如果您让联系人表单向您发送电子邮件通知，也要确保“发件人”和“收件人”中使用的地址不同。

8.您尚未设置电子邮件认证

你的电子邮件“发件人”信息可能错误的另一个常见原因是，当电子邮件认证没有通过像 Mailchimp (或的替代品)这样的服务正确设置时:

身份验证授权该服务代表您发送电子邮件，因此它们会附带您的域名，即使它们是由第三方发送的。如果您的身份验证设置不正确，您的电子邮件可能会直接发送到收件人的垃圾邮件箱中。

有几种不同类型的电子邮件认证，主要的有域名密钥识别邮件(DKIM) 、发件人政策框架(SPF) 和 DMARC 。

DKIM 提供加密密钥和数字签名来验证电子邮件，而 SPF 的工作方式是根据批准的 IP 列表来验证发件人的 IP 地址。DMARC 有点不同，因为它要求启用其他两个，并让发件人表明他们的电子邮件受到 DKIM 或 SPF 的保护。

如果您使用自动电子邮件服务，并且在发送方面遇到问题，那么首先要检查的是身份验证。如果你需要这方面的帮助，我们有一篇方便的文章，详细介绍了如何设置电子邮件认证。

9.您发送的附件太多

对于大多数垃圾邮件过滤器来说，附件是一个巨大的危险信号。这是因为文件很容易成为恶意软件和病毒的载体。一般的经验法则是干脆不发送任何附件，尤其是在简讯中。如果您确实需要发送附件，请确保收件人提前知道，并尽量减少您在一封电子邮件中附加的文件数量。

如果你必须在电子邮件中附上一份文档或文件，更安全的做法是先把它上传到云存储服务，比如谷歌驱动或 T2 的 Dropbox。然后，您可以在电子邮件中包含该文件的链接。这样，你的邮件就不会触发任何垃圾邮件过滤器。

使用本指南从垃圾邮件文件夹中保存您的营销邮件📩 💥#EmailMarketing # 邮箱 点击发推

摘要

您的电子邮件可能会出现在垃圾邮件文件夹中有很多原因，从糟糕的主题行到触发垃圾邮件过滤器的关键字。不管是什么原因，重要的是要解决这个问题，以最大化你的投资回报，并在你的观众中保持值得信赖的声誉。

通过快速解决这些问题并实施一些行之有效的最佳实践，您可以轻松地将您的邮件与垃圾邮件隔离开来。最重要的是，这些相同的做法也可以增加你的信息的影响力，并有望将更多的订户转化为顾客。

您对上述电子邮件营销最佳实践有任何疑问吗？请在下面的评论区告诉我们！

---

让你所有的应用程序、数据库和 WordPress 网站在线并在一个屋檐下。我们功能丰富的高性能云平台包括:

• 在 MyKinsta 仪表盘中轻松设置和管理
• 24/7 专家支持
• 最好的谷歌云平台硬件和网络，由 Kubernetes 提供最大的可扩展性
• 面向速度和安全性的企业级 Cloudflare 集成
• 全球受众覆盖全球多达 35 个数据中心和 275 多个 pop

在第一个月使用托管的应用程序或托管的数据库，您可以享受 20 美元的优惠，亲自测试一下。探索我们的计划或与销售人员交谈以找到最适合您的方式。