真是不平凡的一年，对吧？就像我们每年都会做的那样，我想对您阅读 CSS-Tricks 表示衷心的感谢，并回顾一下这一年。总的来说，不如意的事情多于如意的事情。在 CSS-Tricks，情况更像是平淡无奇。请允许我与您分享一些关于我们 2020 年旅程的数字、里程碑和想法。
让我们看看基本数据
今年网站的页面浏览量达到9400 万次。去年我们的页面浏览量略有下降（从 9100 万次降至 9000 万次），因此看到这个数字再次上升并创下新高真是太好了。现在我不必再自圆其说，例如“天哪，阻止 Google Analytics 的浏览器扩展程序的使用量一定上升了”。在未来的某一年达到 1 亿次页面浏览量将是一个不错的里程碑。从长期来看，这个数字增长非常缓慢。这提醒我，仅仅维持内容网站的流量需要花费多少时间、金钱和精力，更不用说试图推动增长了。
今年我在网站前面使用了Cloudflare。我认为这通常是一个好主意，尤其是在他们拥有特定技术使其变得更加出色的情况下。我赞成尽可能多地将内容推送到边缘，现在不仅静态资产由 CDN 提供服务，内容也一样。
我之所以提到这一点，是因为我现在可以访问 Cloudflare 分析数据，因此可以跨工具进行比较。我无法在 Cloudflare 上查看整整一年的数据，但比较两个服务上个月的独立访客数量，我发现 Cloudflare 上有6,847,979 个独立访客，而 Google Analytics 上有 6,125,272 个会话（或 7,449,921 个独立页面浏览量——我不确定哪个可以直接比较）。它们看起来非常接近。比我预想的要接近，因为 Google Analytics 需要客户端 JavaScript，而 Cloudflare 分析数据据推测是在 DNS 级别收集的，因此不会像客户端 JavaScript 那样会被阻止。我已经关闭了 WordPress 提供的分析功能，因为三个分析工具似乎“有点多”，尽管我可能会重新打开它们，因为没有它们，我就无法查看网站上最热门的搜索结果，而我绝对喜欢查看这些结果。
今年来自自然¹搜索的流量为77.7%，而去年为 80.6%。3% 的波动幅度感觉相当大，但几乎完全是由“直接”流量从 9% 波动到 12% 造成的。我不知道该如何解释这种情况，但我认为我不介意来源更加多元化。
我发现这些年底的数字回顾很有趣，但我通常不是一个热衷于分析数据的人。去年我写道
今年有很多数字我不想看。我们传统上会关注诸如人们来自哪些国家、他们使用哪些浏览器（Chrome 占主导地位）、移动设备使用情况（奇怪地低）以及诸如此类的事情。今年，我根本不在乎。这是一个网站。它是为世界上所有关心阅读它的人准备的，无论他们在哪个国家，使用什么浏览器。
今年我对概括性的分析数据更加漠不关心。我认为分析数据非常棒，当你心中有一个想要答案的问题时，数字可以帮助你找到答案。或者对于那些你自己认定对你网站明显重要且有影响的数字。只是随意查看数字可能会让你误以为自己在收集重要的见解并做出深思熟虑的决定，而实际上你只是在挖鼻孔。
我确实感兴趣的一个问题是，按流量计算，最受欢迎的内容是什么（稍后我们将讨论这个问题）。查看最受欢迎的内容（按实际流量计算）可以让我了解是什么吸引了人们来到这里。吸引网站流量是一个目标。虽然我们通常不会直接根据页面浏览量出售赞助/广告，但这些数字对赞助商很重要，并且与我们可以收取的费用直接相关。
我关心的另一个数据是人们搜索哪些内容会将他们带到网站。以下是细分情况
- 前 10 名：与 Flexbox 和 Grid 布局相关的各种术语组合
- 排名前 20 名：网站名称的各种变体
从那里开始，第 10 到 100 名是“随机的特定 CSS 问题”。超过 100 名之后，SVG、JavaScript、设计内容和 CSS 会混合在一起。排名第 251 的搜索词是 React 首次出现。这里的见解是：（1）我们的布局指南仍然表现得非常好，（2）很多人喜欢先访问网站，然后找到他们需要的东西，以及（3）搜索特定库的内容并不是访问此网站的常见方式。
今年的热门文章
感谢Jacob，我们可以查看基于内容撰写年份（以及其他一些元数据）的分析数据。
这里有一个有趣的事情。2019 年，2019 年撰写的文章产生了大约630 万次页面浏览量。这些相同的文章在 2020 年产生了730 万次页面浏览量。很酷，对吧？随着时间的推移，文章吸引了更多流量。
2020 年撰写文章产生了1200 万次页面浏览量。以下是前 10 名
- 纯 CSS 轮播
- 流体宽度视频（作弊，因为这是几年前作为独立页面编写的，我只是在 2020 年将其移动到博客中）
- 如何使用 HTML、CSS 和 JavaScript 创建动画倒计时器
- 链接和按钮完整指南
- React Router 的 Hook
- 网络黑暗模式完整指南
- 拟态设计和 CSS
- 数据属性完整指南
- 为什么 JavaScript 正在吞噬 HTML
- 前端挑战
关于该列表的有趣背景故事。我深入研究了 Google Analytics 并根据它在自定义报表中向我显示的数据创建了该前 10 名列表，这是 Jacob 教我的。碰巧的是，Jacob 就在之后给我发了电子邮件，向我展示了他计算出的前 10 名，这与我的略有不同。然后我返回并重新运行了我的自定义报表，它与其他两个报表都略有不同。奇怪！Jacob 知道原因。当你在 Google Analytics 中查看如此庞大的数据集时，它只会对报表中使用的样本数据进行采样。它会显示一个“黄色徽章”，并告诉你报表基于多少百分比的数据。500,000 个会话是最大值，这仅占我们需要查看的会话数的 0.7%。这足够低，以至于导致列表不同。Jacob 已经完成了一些数据的导出和调整以解决此问题，因此上面的列表是所有会话 100% 准确的列表。
来自任何年份的整个网站上的热门文章
没有来自年鉴的文章进入前 10 名，但有趣的是，紧随其后的是接下来的 20 名，其中大量散布着来自那里的随机文章。总的来说，年鉴约占所有流量的14.8%。
我认为我们对内容所做的另外两件非常酷的事情是
- 发布了Jay Hoffman 的网络历史系列，其中包括 Jeremy Keith 的音频改编版本，作为播客提供。
- 发布了我们的年度总结系列，就像我们去年做的那样。
我喜欢使用 WordPress 的众多原因之一是它可以轻松地创建此类系列。我们所做的只是设置一个特定类别的模板文件并在上面添加一些自定义 CSS。这使得文章拥有自己酷炫的登录页面，但仍然是网站其余“流程”（RSS、搜索、标签等）的一部分。
COVID-19
也许流量略有增加与 COVID-19 相关？随着更多人将编码视为在家工作的良好选择，也许有更多人正在搜索编码帮助。谁知道呢。
我们肯定发现，我们合作的几乎每个赞助商都出于可以理解的原因收紧了开支。加上与我们合作的广告计划减少或取消，粗略估计，我认为我们的赞助收入下降了 25%。这将是毁灭性的，但事实是我们尽量避免把鸡蛋放在一个篮子里。
现在似乎是提到这一点的好时机：如果您的公司经营状况良好，并且可以通过接触构建网站的人员获益，让我们谈谈赞助合作。
我正在尝试使收入来源多样化，即使是在这个网站上。例如……
电子商务
我们一直在使用 WooCommerce 来销售一些东西。
海报，主要是。一张印在纸上的实物，通过邮寄发送给你。海报的设计独一无二，取材于 Lynn Fisher 为弹性盒和网格指南创作的精彩插图。我们基本上是“代发货”，这意味着它们由另一家公司按需印刷和发货。所以，你从这个网站购买它们，但另一家公司会接手并完成剩下的所有事情。这很有吸引力，因为工作量很小，但有两个主要的缺点：（1）订单的客户支持变成了我们的问题，我想大约 20% 的订单需要某种支持，以及（2）与我们自己承担更多工作相比，利润率相当低。
我们还销售 MVP 支持者会员资格，这很棒，因为它不需要太多持续的工作。那里的诀窍是确保它对人们来说足够有价值，值得购买，这需要我们随着时间的推移做更多努力。目前，你基本上可以获得一本 书、视频下载，并且没有广告。更新：不再了！现在所有内容都是免费的。
粗略计算，电子商务占5%的收入损失。还有很长的路要走，但可能值得一试，因为我猜测这种收入波动性较小。
我仍然对网络货币化长期发展持乐观态度（这是我之前写的一篇文章）。但目前，它并不是一个能带来大量新收入的解决方案。乐观地说，它大约占收入的0.05%。
社交媒体
就网站流量来源而言，社交媒体并不是特别大，仅占所有流量的2.2%（低于去年的 2.3%）。这始终是这个水平，无论我们在一年中投入多少精力，这正是为什么我尽量不在这上面花费精力。我们所做的少量努力，95% 都投入到了 Twitter 上。我们主要依靠 Jetpack 的社交自动化功能。拥有 @css 作为用户名仍然很酷，我们的粉丝数量即将达到 50 万。你可能会认为这值点什么。我们总有一天需要弄清楚这一点。
当我们手写推文（很少）时，这些推文仍然拥有最大的潜力。我只有在觉得做某件事很有趣的时候才会这样做，因为即使它们可以获得最多的互动，但时间/价值的因素仍然使其不值得。
手写推文示例
我们的大多数推文都是在发布新文章时自动生成的。我们已经这样做很长时间了，我认为这正是 Twitter 粉丝所期望的，这很好。我们确实可以在推文发布前进行自定义，我们也会尝试，但通常不会。
自动生成推文示例
剩下的 5% 的精力花在了 Instagram 上，仅仅因为它有点有趣。我甚至不想考虑从 Instagram 中提取直接价值。也许如果我们有更多可以直接销售的产品，它就会有意义。但目前，只是随机的技巧和内容来维持受众。
Instagram帖子示例
屏幕录制
今年我制作了22个 屏幕录制。与过去几年相比，这非常多！我不确定 2021 年我是否会如此雄心勃勃，但我怀疑我可能会，因为我的办公桌设置越来越适合录制，我的编辑技能也在慢慢提高。我喜欢做这些，它也是一个偶尔的收入来源（我最喜欢的是与公司里的某个人合作，一起深入研究他们的技术）。此外，我们还请 dina Amin 为我们的视频制作了 那个很酷的新片头。
屏幕录制发布在网站上，并作为视频播客发布到 iTunes，但人们观看的主要平台是 YouTube。我想我们可以将 YouTube 视为“社交媒体”，但我认为屏幕录制更像是“真正的内容”，而其他社交媒体则不是。它们当然更耗时，我希望它们比一次性的推文之类的东西更经久耐用。
时事通讯
我们的时事通讯订阅者达到81,765人。一方面，这是一个可观的数字。另一方面，考虑到它有多棒，这个数字太低了！我希望今年能达到 10万，但我实际上并没有做太多事情来鼓励订阅，所以这是我的责任。我认为我们没有错过任何一周，所以这是一个胜利，考虑到我们去年有 65,000 人，这仍然是一个相当不错的增长。
评论
你们今年在网站上留下了4,322条评论。这比 4,710 条略有下降，但仍然不错，平均每天近 12 条。
我对评论的情绪像过山车一样。有一天觉得它们太麻烦了，需要太多的审核和时间来过滤垃圾信息。恶毒的言论可能非常激烈（在一个关于代码的网站上，哇），所以有些日子我真想关闭它们。而其他时候，我很高兴能获得额外的见解和更正。更不用说，嘿，那就是内容，内容是好的。我们从未不使用过评论，所以，嘿，让我们现在保留它们吧。
我绝对始终鼓励你们提供有帮助、有见地和友好的评论，并承诺永远不会发布粗鲁或错误的评论（由我决定）。
论坛今年完全关闭了（进入“只读”模式），因此来自那里的评论活动并没有完全转移到博客区域。关闭论坛仍然感觉……很奇怪。我喜欢有一个地方可以（尤其是初学者）发送问题。但是，我们没有资源（或商业模式）来支持安全且活跃的论坛。所以它们将保持关闭状态，至少目前是这样。
目标回顾
- ❌ 邮件列表达到 10 万。这方面失败了。无论如何，这本来就是一个有点激进的目标，而且我们从未执行任何计划来帮助实现它。例如，我们可以在社交媒体上更多地鼓励它。我们可以尝试在其他地方投放广告，并附带加入订阅的号召性用语。我们可以以某种方式为新订阅者提供激励。我们可能会做这些事情，也可能不会。我现在对此没有足够强烈的感受，将其作为明年的目标。
- ✅ 两本指南。我们在这一方面取得了巨大成功。我们发布了9本指南。我认为这些内容是我们最有价值的内容。虽然我不想只做这种内容（因为我认为将 CSS-Tricks 视为一个类似每日报纸的网站也很有趣），但我希望将我们大部分精力投入到这里。
- ✅ 将重点放在如何操作的参考技术内容上。我认为我们在这一方面做得不错。始终牢记这一点，无论是对我们自己还是对客座文章，都意味着确保我们展示了如何使用技术，而不是过多关注客座社论之类的内容，不幸的是，这些内容是我们最没有用的内容。我希望将来能在这方面更加严格。我们在该网站上已经走过了很长的路。人们的期望是，该网站能解答他们关于前端技术的问题，因此没有理由不完全转向这个方向。
- ✅ 使用 Gutenberg。我们也在此取得了巨大成功。我认为在今年的第一个月里，我们就开始在新内容中使用 Gutenberg，几个月后，我们就在所有帖子中启用了 Gutenberg。 这确实需要一些工作！ 而且我们还有很长的路要走，因为网站上的大多数帖子尚未“转换为”区块，这仍然不是一项轻而易举的任务。但是，我认为这是一个巨大的成功。我认为 Gutenberg 在很大程度上令人愉快，它使内容创作变得更加愉快、高效和有趣。
新目标
- 三本指南。我知道今年我们做了九本，但目标只有两本。我实际上还有三个想法，所以我会把目标定为三本。相关的小目标：我想尝试将其中一些指南制作成迷你书籍，要么单独出售，要么将其作为 MVP 支持者订阅的一部分。
- 专注于围绕我们优势的实用技术内容。例如有用的技巧。有背景的技术新闻。关于最佳实践的建议。我想让我们更多地朝着我们的优势方向发展。HTML、CSS 和 JavaScript 方面的内容在我们的优势列表中排名很高，但并非每个框架、无服务器技术或构建工具都是如此。我希望我们能够更加谨慎地发布内容，除非我们能够对其进行强有力的背书。
- 完成所有缺失的年鉴条目。还有大约 15-20 篇年鉴文章可以存在，但还没有。就像我们在其中包含了
place-items，但没有place-content或place-self。然后还有深奥的东西，比如:current、:past和:future时间维度伪类，坦白地说，我甚至不太理解，但它们确实存在。如果你想帮忙，请联系我们。
总结
再次感谢您成为本网站的读者。我希望这些关于我们业务的小窥探能以某种方式帮助您的业务。我也非常希望 2021 年对我们所有人来说都比 2020 年更好。
🧡
- 实际上，除了有机之外，我还更喜欢我的搜索草饲，但好吧。↩️
谢谢您，Chris！这个网站是一个非常宝贵的资源，每天都为我提供见解和灵感。新年快乐！
我必须感谢你！！你的工作非常棒，你深入研究主题并让我们了解和指导我们……非常感谢，并继续进行这项非凡的工作。我在这方面是一个新手，但我喜欢通过你的博客学习。干杯，来自德国的 Ute
一如既往地富有洞察力。惊人的增长。祝愿 Chris 和团队再创辉煌。我在 2021 年的目标是在 CSS Tricks 上发表几篇文章。拭目以待。
老实说，我甚至都不再为 CSS 问题搜索 Google 了。直接去 CSS-tricks 并搜索。对我来说，Laravel 文档确实是唯一的另一个例子。杀手级内容与无与伦比的展示（信息和视觉方面）。保持良好的工作状态！
多年来一直是读者，期待着 2021 年及以后你们会带来更多精彩的东西！
谢谢，CSS-tricks 为我在代码之旅中提供了宝贵的资源：D