可见性得以保障,并不意味着

After yesterday’s post, someone on Twitter expressed concern about providing a “degraded experience” to users who have Save-Data enabled.

在昨天的帖子之后 ，Twitter上的某人表达了对为启用了“保存数据”的用户提供“降级的体验”的担忧。

It’s far from the first time I’ve heard this concern expressed. A user sees “Save Data” as an option and says, “Yeah, of course!” but they may not want a lesser experience as a result.

这距离我第一次听到这种担忧还很遥远。 用户看到“保存数据”作为选项，然后说：“是的，当然！” 但他们可能不希望因此而减少体验。

It’s a fair concern, I think. We make a lot of decisions on people’s behalf online and certainly deciding to provide a degraded experience in this situation would be a questionable one.

我认为这是一个令人担忧的问题。 我们代表人们在网上做出了很多决定，并且确定在这种情况下提供降级的体验肯定是一个有问题的决定。

But it’s also an avoidable one. One of the things I think is so great about the Save-Data feature is that it gives companies some sort of control over how their brand is experienced in data-constrained environments. They’re not relying on a proxy service to do a bunch of manipulation on their behalf, hoping it turns out alright. Instead, they have an opportunity to be proactive and careful consider how they can provide a low-data experience that still reflects their brand in a positive light.

但这也是可以避免的。 我认为“保存数据”功能之所以如此重要，是因为它使公司可以在某种程度上控制他们在数据受限环境中的品牌体验。 他们不依靠代理服务来代表他们进行大量操作，希望一切顺利。 相反，他们有机会积极主动并认真考虑如何提供低数据体验，从而仍然以积极的态度反映其品牌。

There are endless ways you could do this without causing your the experience to feel lesser in any way. Here are a few ideas.

您可以通过多种方式来完成此任务，而又不会使您的体验降低。 这里有一些想法。

低分辨率图像 (Lower resolution images)

Often we serve high-resolution images to high-resolution screens. When the Save-Data header is enabled, we could instead serve up a lower resolution image by default.

通常，我们会将高分辨率的图像提供给高分辨率的屏幕。 启用S​​ave-Data标头后，默认情况下，我们可以提供较低分辨率的图片。

That’s exactly what Shopify is doing now. If I open the homepage with Save-Data off on my phone, the site weights 906kb. 292kb of that are images.

这正是Shopify 现在正在做的事情 。 如果我在手机上关闭“保存数据”的情况下打开首页，则该站点的权重为906kb。 其中292kb是图像。

If I pass the Save-Data header and reload the page, the site weighs 791kb, with 176kb of that being images. That’s a 12% drop in page weight. And visually, I frankly can’t tell the difference.

如果我传递Save-Data标头并重新加载页面，则该站点重791kb，其中176kb是图像。 页面重量下降了12％。 从视觉上讲，坦率地说，我无法分辨出区别。

This may not be the most significant change you could make, but it’s also one of the least intrusive. After yesterday’s post, Gatsby was super quick to get an issue filed for adding support to their gatsby-image plugin, and it looks like someone already submitted a PR for review to handle it.

这可能不是您可以进行的最重要的更改，但它也是侵入性最小的更改之一。 在昨天的帖子发布之后，盖茨比很快就提出了向其gatsby-image插件添加支持的问题 ，看来有人已经提交了PR进行审查以处理它。

This is also something browsers could do by default, though it sounds like that isn’t the case so far.

默认情况下，浏览器也可以执行此操作，尽管到目前为止，情况并非如此 。

更少的图像 (Fewer images)

Taking it a step farther, you could serve fewer images (something Jeremy Wagner recommends in his excellent article on Save-Data).

更进一步，您可以提供更少的图像( Jeremy Wagner在他关于保存数据的出色文章中建议这样做)。

One of my favorite examples to use here is a news site. I don’t know of one that does this currently, but it’s easy enough to imagine what it would look like.

我最喜欢在这里使用的示例之一是新闻网站。 我不知道目前正在执行此操作的人，但是很容易想象它会是什么样子。

Take, for example, the BBC site. Like many news sites, you have some major stories with larger hero images, and then you have supporting stories with thumbnails for each. On my desktop, that’s 1.5MB of images.

以BBC网站为例。 像许多新闻站点一样，您有一些带有较大英雄形象的重大故事，然后有带有缩略图的辅助故事。 在我的桌面上，这是1.5MB的图像。

I went through and removed the thumbnails for the supporting stories and got that total down to 966kb of images. I was pretty conservative too. I didn’t touch any of the thumbnails used as backgrounds and didn’t touch any of the thumbnails related to videos. There’s plenty more that could have been shaved.

我仔细阅读并删除了支持故事的缩略图，然后将总数减少到966kb。 我也很保守。 我没有触摸任何用作背景的缩略图，也没有触摸任何与视频相关的缩略图。 还有更多可以剃光的东西。

As it is, the experience looks different, sure, but I would argue not in the least bit degraded. It’s still very clean and reflects nicely on the BBC brand.

确实，体验看起来有所不同，当然，但是我认为至少不会降级。 它仍然非常干净，可以很好地反映BBC品牌。

删除网络字体 (Remove web fonts)

Another example from Jeremy’s post (he’s smart, that guy) is to remove web fonts if Save-Data is turned on.

杰里米(Jeremy)帖子(他很聪明， 那个家伙 )中的另一个示例是，如果打开“保存数据”，则删除Web字体。

Now, depending on the site and font in question, this may be a more controversial change to make. As always, your mileage may vary, you certainly don’t want to start implementing every optimization here without first considering if it’s right for your situation.

现在，根据所讨论的站点和字体，这可能是一个更具争议性的更改。 与往常一样，您的里程可能会有所不同，您当然不希望在不首先考虑是否适合您的情况下开始此处的所有优化。

But I would argue that more sites than not could get away with this, provided they took the time to have a solid fallback font stack in place.

但是我要说的是，如果他们花时间在适当的位置使用可靠的后备字体堆栈，那么更多的网站就会摆脱困境。

Take, for example, the CNN site. On the home page, CNN loads 6 different files for their CNN Sans font, totaling 251kb. (Let’s just ignore for a moment that they could probably cut a few out or do some subsetting to help reduce that a bit.)

以CNN网站为例。 在主页上，CNN为其CNN Sans字体加载6个不同的文件，总计251kb。 (让我们暂时忽略一下，他们可能会减少一些或进行一些子设置来帮助减少这一点。)

Falling back to Helvetica Neue, as they currently do, is a bit too jarring even for me. But falling back to Helvetica or Arial isn’t. There’s a difference, sure, and I do think the CNN font looks a bit better. But 251kb better when I need to save data? Probably not. Again, nothing here looks broken.

像他们目前所做的那样，退回到Helvetica Neue甚至对我来说还是有点令人不快。 但是不是回到Helvetica或Arial。 当然有区别，我确实认为CNN字体看起来更好。 但是，当我需要保存数据时，性能提高了251kb？ 可能不是。 同样，这里看起来什么也没有。

You could probably do even better than this in most cases. I’ve had a lot of success using Monica’s Font style matcher tool to tweak different CSS properties to create fallback font stacks that are nearly indistinguishable from the original web font (often with similar results to what Harry has seen).

在大多数情况下，您甚至可能会做得更好。 使用Monica的 字体样式匹配器工具来调整不同CSS属性，以创建与原始Web字体几乎无法区分的后备字体堆栈，我取得了很多成功(通常与Harry看到的结果相似 )。

减少广告和跟踪 (Cut back on the ads and tracking)

Ok, I’ll be the first to admit this is a broader discussion around the business implications, but I promise you none of your visitors will complain if you decide to scale back a bit on the ads and tracking in a data-constrained situation.

好的，我将首先承认这是有关业务含义的更广泛的讨论，但是我保证，如果您决定缩减广告规模并在数据受限的情况下进行跟踪，则不会有任何访客抱怨。

Some companies are already doing something similar when GDPR applies. USA Today is a notable example. Someone profiled their page soon after GDPR and found that while their site originally loads 5.2MB of data, the GDPR version only loads 500kb. That’s a massive data saving right there, and again, the site doesn’t feel broken in any way.

应用GDPR时，一些公司已经在做类似的事情。 《今日美国》就是一个明显的例子。 有人在GDPR之后不久对他们的页面进行了分析，发现他们的站点最初加载5.2MB数据，而GDPR版本仅加载500kb。 那是一个巨大的数据保存空间，而且该站点也丝毫没有受到破坏。

渐进增强而不增强 (Progressive enhancement without the enhancement)

If you build using progressive enhancement, Save-Data is a chance to consider maybe skipping a few of the enhancements. That’s not that far from the “cutting mustard” approach that was popularized by the BBC.

如果使用渐进式增强功能进行构建，则可以考虑使用Save-Data跳过一些增强功能。 这与英国广播公司流行的“切芥末”方法相距不远。

Maybe leave the carousel out in place of a single image

也许将轮播替换为单个图像

Maybe don’t load that extra JavaScript file that turns some of the static content into more dynamic interfaces.

也许不要加载额外JavaScript文件，该文件会将一些静态内容转换为更动态的界面。

With progressive enhancment in place, not only would the change be pretty simple to implement, but you would also know that the experience you provide would work and look just fine. Because building with progressive enhancement means you’ve already considered what happens without those extra resources showing up.

通过逐步增强功能，不仅使更改非常容易实施，而且您还将知道所提供的体验会奏效并且看起来还不错。 因为使用渐进增强进行构建意味着您已经考虑了会发生什么而没有那些额外的资源。

减少并不意味着坏了 (Less doesn’t mean broken)

That’s just a small set of ideas. The possibilities are endless. If you treat data as a constraint in your design and development process, you’ll likely be able to brainstorm a large number of different ways to keep data usage to a minimum while still providing an excellent experience. Doing less doesn’t mean it has to feel broken.

那只是一小部分想法。 可能性是无止境。 如果您将数据视为设计和开发过程中的约束，那么您可能可以集思广益，以多种方式将数据使用量降至最低，同时仍然提供出色的体验。 少做并不意味着一定要感到沮丧。

You may even end up finding opportunities to apply those same considerations to your site, no matter if Save-Data is enabled or not.

无论是否启用了“保存数据”，您甚至可能最终找到机会将相同的注意事项应用于您的站点。

If you carefully consider the experience and treat data as a valuable resource not to be wasted, I don’t think anyone is going to be complaining.

如果您仔细考虑经验并将数据视为不可浪费的宝贵资源，那么我认为没有人会抱怨。

翻译自: https://timkadlec.com/remembers/2019-08-30-less-data-doesnt-mean-a-lesser-experience/

可见性得以保障,并不意味着