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

 

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

 

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

 

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

 

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

 

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

 

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