網頁設計是一(yī)個需要技術知(zhī)識和風格感的領域。我(wǒ)(wǒ)們不僅要設計完美的頁面，同時我(wǒ)(wǒ)們也必須實現它的功能。如何平衡這兩方面是一(yī)個挑戰。您如何創建一(yī)個既美觀又(yòu)保持最佳性能的網站？

多年來，天平似乎已經向前者傾斜。我(wǒ)(wǒ)在自己的旅程中(zhōng)遇到過。例如，即使我(wǒ)(wǒ)知(zhī)道大(dà)圖像會拖慢(màn)加載時間，它看起來還是那麽好。但是，在現代網絡上，如果這意味着顯着的性能損失，是否值得實施任何視覺增強？鑒于正确的方法，您不應該必須這樣做。

性能一(yī)如既往的重要
感覺有點諷刺。硬件繼續以更快的方式發展，甚至手機也有多個處理器内核和大(dà)量内存。更不用說寬帶已經變得越來越普遍了。

然而，我(wǒ)(wǒ)們仍然被告知(zhī)要盡量減少每毫秒的加載時間。爲什麽？歸結爲兩個原因：注意力持續時間短和搜索引擎。首先，用戶不願把時間花在緩慢(màn)的網站加載上。他們隻會在别處找到他們正在尋找的任何東西。

随着網内因素現在影響搜索排名，網站性能非常重要。此外(wài)，互聯網不再是新鮮事物(wù)。認爲用戶會等待您花哨的介紹性演示 （比如FLASH動畫）是不現實的。

人們出于特定目的訪問您的網站。因此，任何妨礙他們的事情可能都不值得實施。

現代 CSS 和 JavaScript 技術提供可靠的替代方案

作爲一(yī)名設計師，很容易養成使用龐大(dà)的媒體(tǐ)文件來增強網站外(wài)觀的習慣。幾十年來，這一(yī)直是做事的方式。無論是全屏圖像還是視頻(pín)背景，這些項目都具有變革性。但是，它們也會影響性能。

幸運的是，現代 CSS 和 JavaScript 可以提供更好的替代方案。每個都具有可以替換媒體(tǐ)或使浏覽器更容易消化這些文件的功能。

CSS 漸變和混合模式等視覺效果就是很好的例子。它們看起來和你可以在 Photoshop 中(zhōng)制作的任何東西一(yī)樣好，但沒有所有多餘的膨脹。

如果您想添加動畫，CSS 動畫和 JavaScript 庫（例如 GSAP）可以滿足要求。它們不僅可以産生(shēng)令人瞠目結舌的外(wài)觀，而且這些技術也非常快速。

此外(wài)，延遲加載提供了一(yī)個很好的折衷方案——至少對于不在頁面初始視口内的媒體(tǐ)而言。包括圖像和 iframe 在内的元素隻會在需要時加載。這可以節省加載時間，同時仍然可以使用這些資(zī)産。本機浏覽器支持使實現比以往更容易。

巧妙地使用這些技術可以幫助您避免爲了外(wài)觀而降低性能。相反，您将實現更可持續的平衡。

美與性能可以共存

一(yī)個網站不僅僅是它的外(wài)觀、内容或功能。這是一(yī)個有凝聚力的用戶體(tǐ)驗。這意味着這些方面中(zhōng)的每一(yī)個都必須結合在一(yī)起才能爲用戶提供服務。

爲了有效地做到這一(yī)點，網站還必須優先考慮性能。多年前，一(yī)個外(wài)觀漂亮但加載緩慢(màn)的網站可能更容易讓用戶退出。在強大(dà)的設備和快速的互聯網出現之前，快速加載不一(yī)定是用戶期望的事情（大(dà)多數網站加載都很慢(màn)）。

如今這已經發生(shēng)了巨大(dà)的變化。我(wǒ)(wǒ)們現在生(shēng)活在一(yī)個随需應變的世界中(zhōng)，我(wǒ)(wǒ)們需要的一(yī)切都隻需點擊一(yī)下(xià)即可。如果您的網站不能兌現這一(yī)承諾，就很難與訪問者建立持久的關系。

網頁設計師需要随着這些期望而改變。在實踐中(zhōng)，它需要我(wǒ)(wǒ)們仔細思考我(wǒ)(wǒ)們創建的視覺元素以及我(wǒ)(wǒ)們如何實現它們。像我(wǒ)(wǒ)們一(yī)直做的那樣做事可能不再可行。

相反，一(yī)切都必須着眼于最佳性能。好消息是我(wǒ)(wǒ)們已經擁有正确的工(gōng)具和技術來實現這一(yī)目标。