网站设计是一个需要技术知识和风格感的领域。我们不仅要设想完美的页面;我们也必须建造它。这个要求是一个挑战,我们如何创建一个既美观又保持最佳性能的网站?
多年来大家更多的是只能实现其中一点,要不考虑美观而舍去性能,反正亦然。作为有网站设计多年经验的我非常清楚这一点。例如,就像我知道大图像会拖慢加载时间,但为了美观好看我还是尽量放大。但是,在现代网络上,如果这意味着显着的性能损失,是否值得实施任何视觉增强?鉴于正确的方法,您不应该必须这样做。
首先,用户不倾向于停留在缓慢的网站加载上。他们只会在别处找到他们正在寻找的任何东西。此外,网络不再是新鲜事物。认为用户会等待您花哨的介绍性演示是不现实的。人们出于特定目的访问您的网站。因此,任何妨碍他们的事情可能都不值得实施。
作为一名设计师,很容易养成使用庞大的媒体文件来增强网站外观的习惯。几十年来,这一直是做事的方式。无论是全屏图像还是视频背景,这些项目都具有变革性。但是,它们也会影响性能。幸运的是,现代 CSS 和 JavaScript 可以提供更好的替代方案。每个都具有可以替换媒体或使浏览器更容易消化这些文件的功能。
CSS 渐变和混合模式等视觉效果就是很好的例子。它们看起来和你可以在 Photoshop 中制作的任何东西一样好,但没有所有多余的膨胀。如果您想添加运动,CSS 动画和 JavaScript 库(例如 GSAP)可以满足要求。它们不仅可以产生令人瞠目结舌的外观,而且这些技术也非常快速。此外,延迟加载提供了一个很好的折衷方案——至少对于不在页面初始视口内的媒体而言。包括图像和 iframe 在内的元素只会在需要时加载。这可以节省加载时间,同时仍然可以使用这些资产。本机浏览器支持使实现比以往更容易。巧妙地使用这些技术可以帮助您避免为了外观而降低性能。相反,您将实现更可持续的平衡。
一个网站不仅仅是它的外观、内容或功能。这是一个有凝聚力的用户体验。这意味着这些方面中的每一个都必须结合在一起才能为用户提供服务。为了有效地做到这一点,网站还必须优先考虑性能。多年前,一个外观漂亮但加载缓慢的网站可能更容易逃脱。在强大的设备和快速的互联网出现之前,速度不一定是用户的期望。
这发生了巨大的变化。我们现在生活在一个随需应变的世界中,我们需要的一切都只需点击一下即可。如果您的网站没有兑现这一承诺,就很难与访问者建立持久的关系。网页设计师需要随着这些期望而改变。在实践中,它需要我们仔细思考我们创建的视觉元素以及我们如何实现它们。像我们一直做的那样做事可能不再可行。相反,一切都必须着眼于最佳性能。这是一个挑战,当然。好消息是我们拥有正确的工具和技术来实现这一目标。