网页设计师不再需要为了美观而牺牲性能

网页设计是一个需要技术知识和风格感的领域。我们不仅要想象完美的一页；我们还必须建造它。

这种阴阳是一种挑战。如何创建一个既美观又能保持最佳性能的网站？

多年来，这种平衡似乎已经向前者倾斜。我在自己的旅途中遇到过。例如，尽管我知道海量图像将使加载时间陷入停滞，但它看起来非常好。

但是，在现代网络上，如果视觉增强意味着性能受到重大影响，那么它是否值得实施？如果方法正确，你就不必这么做。

性能与以往一样重要

这感觉有点讽刺。硬件继续以更强大的方式发展。即使是手机也有多个处理器核和大量内存。更不用说宽带越来越普及了。

然而，我们仍然被告知要弥补每一个可能的加载时间毫秒。为什么？

这可以归结为两个原因：注意力跨度短和谷歌。首先，用户不倾向于等待加载速度较慢的网站。他们只会在别处找到他们想要的东西。

由于谷歌的核心网站现在影响着搜索排名，那么，性能是一个相当大的问题。这可能是在搜索引擎结果的下方区域被发现或永远消失的区别。

此外，网络不再是新鲜事物。认为用户会等待你的精彩介绍（RIP Flash）是不现实的。

人们访问你的网站是为了一个特定的目的。因此，任何阻碍他们的事情都可能不值得实施。

现代CSS和JavaScript技术提供了可靠的替代方案

作为一名设计师，很容易养成使用大量媒体文件来增强网站外观的习惯。几十年来，这一直是做事的方式。无论是全屏图像还是视频背景，这些项目都可以带来变革。然而，它们也会影响性能。

谢天谢地，现代CSS和JavaScript可以提供更好的选择。每个文件都有一些功能，可以替代媒体，也可以使浏览器更容易消化这些文件。

CSS渐变和混合模式等视觉效果就是很好的例子。它们看起来就像你在Photoshop中制作的任何东西一样好，但没有多余的膨胀。

如果您希望添加运动，CSS动画和JavaScript库（如GSAP）可以满足需要。它们不仅能让人瞠目结舌，而且这些技术也快得惊人。

此外，延迟加载提供了一个很好的折衷方案——至少对于不在页面初始视口内的媒体是这样。包括图像和iFrame在内的元素仅在需要时加载。这节省了加载时间，同时仍然能够使用这些资产。本机浏览器支持使实现比以往更容易。

巧妙地使用这些技术可以帮助您避免为了外观而降低性能。相反，你将实现更可持续的平衡。

美与性能可以共存

网站不仅仅是它的外观、内容或功能。这是一种有凝聚力的用户体验。这意味着这些方面必须结合起来为用户服务。

为了有效地做到这一点，网站还必须优先考虑性能。几年前，如果有一个加载速度很慢、外观很好的网站，可能会更容易逃脱惩罚。在强大的设备和快速的互联网之前，速度不一定是用户的期望。

这发生了巨大的变化。我们现在生活在一个随需应变的世界，在这个世界上，我们所需要的一切只需点击一下即可实现。如果你的网站不能实现这一承诺，那么很难与访问者建立持久的关系。

网页设计师需要随着这些期望而改变。在实践中，它要求我们长期而认真地思考我们创建了什么视觉元素以及如何实现它们。按照我们一贯的做法行事可能不再可行。

相反，一切都必须着眼于最佳性能。这当然是一个挑战。好消息是，我们拥有实现这一目标的正确工具和技术。

来源：https://speckyboy.com/no-need-to-sacrifice-performance-for-beauty/