消失的浮动标签和绿色灯塔分数

mdruhul13

想知道 Smashing 发生了什么事吗？嗯，我们一直很忙。这是一个关于我们如何删除浮动标签、改进移动设备性能以及推出新系列文章的小故事。哦，还有你如何为 Smashing 做出贡献。
Smashing 的幕后总会发生一些事情。在过去的几个月里，我们一直在努力改善网站的性能，但我们也从我们的表单中删除了浮动标签，重新设计了我们的错误消息，改进了我们的会员仪表板，重构和调整了我们的响应表并使用了新的将在未来几个月内在网站上发布的一系列新文章的作者。所以，这是您的每月 Smashing 更新。

浮动标签消失了 #在我们发表了 Adam Silver 的关于为什么浮动标签不是一个好主意的文章之后，我们在 Twitter 上和关于它们的评论中看到了巨大的讨论。当然你可以用它们节省相当多的垂直空间，但它的成本有很多可访问性 阿联酋电话号码列表 和自动填充问题。具有讽刺意味的是，在 2 月下旬发表那篇文章时，我们的大部分表单中仍然使用浮动标签，我们想探索删除它们是否真的能帮助我们改善网站的整体体验。

对于浮动标签，我们遇到了与自动填充相同的问题——一遍又一遍。（大预览）
所以我们删除了浮动标签并重新设计了输入字段，将标签放在输入字段上方，就像 Adam 所建议的那样。我们也借此机会对我们的实际形式进行了一些细微的调整，我们仍在努力。但结果看起来已经好多了。



没有使用浮动标签。自动填充值看起来也不错！（大预览）
经过几天的改进，我们偶然发现了autofill的样式问题。:-webkit-autofill我们想通过CSS 伪类调整字体大小和与自动填充一起使用的字体——当<input>浏览器自动填充一个元素的值时它匹配——但它在一系列浏览器中不受支持，坦率地说造成了相当大的影响。当访问者离开输入字段后验证自动填充的值时有点麻烦。

一段时间以来，致力于提高性能是 SmashingMag 上的一个持续旅程。去年年底，我们注意到 2020 年的业绩大幅下滑，因此我们卷起袖子开始工作。通过更改 CSS 和 JavaScript 的交付，我们在桌面视图中为站点上的大多数页面登陆了绿色分数区域；但是在移动设备上的表现仍然很低，大多数文章的 Lighthouse 得分平均在 60-70 之间。

进行更积极优化的最后提示是Google Search Console 中的“Core Web Vitals”仪表板。2 月 19 日，超过 3590 篇文章在桌面和移动设备上被标记为 CLS 分数较差 (>0.25)。我们首先认为这可能与我们最近所做的 cookie 横幅调整有关，但结果证明这是 Google 搜索更新似乎更积极地惩罚我们以获得高 CLS。