網(wǎng)站設(shè)計(jì)是一個(gè)需要技術(shù)知識(shí)和風(fēng)格感的領(lǐng)域。我們不僅要設(shè)想完美的頁面；我們也必須建造它。這個(gè)要求是一個(gè)挑戰(zhàn)，我們?nèi)绾蝿?chuàng)建一個(gè)既美觀又保持最佳性能的網(wǎng)站？

多年來大家更多的是只能實(shí)現(xiàn)其中一點(diǎn)，要不考慮美觀而舍去性能，反正亦然。作為有網(wǎng)站設(shè)計(jì)多年經(jīng)驗(yàn)的我非常清楚這一點(diǎn)。例如，就像我知道大圖像會(huì)拖慢加載時(shí)間，但為了美觀好看我還是盡量放大。但是，在現(xiàn)代網(wǎng)絡(luò)上，如果這意味著顯著的性能損失，是否值得實(shí)施任何視覺增強(qiáng)？鑒于正確的方法，您不應(yīng)該必須這樣做。

感覺有點(diǎn)諷刺。硬件繼續(xù)以更強(qiáng)大的方式發(fā)展。甚至手機(jī)也有多個(gè)處理器內(nèi)核和大量內(nèi)存。更不用說寬帶已經(jīng)變得越來越普遍了。然而，我們?nèi)匀槐桓嬷M量減少每毫秒的加載時(shí)間。為什么？

首先，用戶不傾向于停留在緩慢的網(wǎng)站加載上。他們只會(huì)在別處找到他們正在尋找的任何東西。此外，網(wǎng)絡(luò)不再是新鮮事物。認(rèn)為用戶會(huì)等待您花哨的介紹性演示是不現(xiàn)實(shí)的。人們出于特定目的訪問您的網(wǎng)站。因此，任何妨礙他們的事情可能都不值得實(shí)施。

作為一名設(shè)計(jì)師，很容易養(yǎng)成使用龐大的媒體文件來增強(qiáng)網(wǎng)站外觀的習(xí)慣。幾十年來，這一直是做事的方式。無論是全屏圖像還是視頻背景，這些項(xiàng)目都具有變革性。但是，它們也會(huì)影響性能。幸運(yùn)的是，現(xiàn)代 CSS 和 JavaScript 可以提供更好的替代方案。每個(gè)都具有可以替換媒體或使瀏覽器更容易消化這些文件的功能。

CSS 漸變和混合模式等視覺效果就是很好的例子。它們看起來和你可以在 Photoshop 中制作的任何東西一樣好，但沒有所有多余的膨脹。如果您想添加運(yùn)動(dòng)，CSS 動(dòng)畫和 JavaScript 庫（例如 GSAP）可以滿足要求。它們不僅可以產(chǎn)生令人瞠目結(jié)舌的外觀，而且這些技術(shù)也非?？焖佟４送猓舆t加載提供了一個(gè)很好的折衷方案——至少對(duì)于不在頁面初始視口內(nèi)的媒體而言。包括圖像和 iframe 在內(nèi)的元素只會(huì)在需要時(shí)加載。這可以節(jié)省加載時(shí)間，同時(shí)仍然可以使用這些資產(chǎn)。本機(jī)瀏覽器支持使實(shí)現(xiàn)比以往更容易。巧妙地使用這些技術(shù)可以幫助您避免為了外觀而降低性能。相反，您將實(shí)現(xiàn)更可持續(xù)的平衡。

一個(gè)網(wǎng)站不僅僅是它的外觀、內(nèi)容或功能。這是一個(gè)有凝聚力的用戶體驗(yàn)。這意味著這些方面中的每一個(gè)都必須結(jié)合在一起才能為用戶提供服務(wù)。為了有效地做到這一點(diǎn)，網(wǎng)站還必須優(yōu)先考慮性能。多年前，一個(gè)外觀漂亮但加載緩慢的網(wǎng)站可能更容易逃脫。在強(qiáng)大的設(shè)備和快速的互聯(lián)網(wǎng)出現(xiàn)之前，速度不一定是用戶的期望。

這發(fā)生了巨大的變化。我們現(xiàn)在生活在一個(gè)隨需應(yīng)變的世界中，我們需要的一切都只需點(diǎn)擊一下即可。如果您的網(wǎng)站沒有兌現(xiàn)這一承諾，就很難與訪問者建立持久的關(guān)系。網(wǎng)頁設(shè)計(jì)師需要隨著這些期望而改變。在實(shí)踐中，它需要我們仔細(xì)思考我們創(chuàng)建的視覺元素以及我們?nèi)绾螌?shí)現(xiàn)它們。像我們一直做的那樣做事可能不再可行。相反，一切都必須著眼于最佳性能。這是一個(gè)挑戰(zhàn)，當(dāng)然。好消息是我們擁有正確的工具和技術(shù)來實(shí)現(xiàn)這一目標(biāo)。