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