小時的需要不是響應式設計，而是響應式性能

響應式設計最近出現了幾個性能問題。 具有諷刺意味的是——響應式設計在最新系列的智能手機上表現相當不錯，但除此之外別無他法。

您可能會感到困惑，因為大多數網絡用戶都擁有高端智能手機。 然而，大量用戶仍在使用運行在舊版 Android 或 iOS 上的小屏幕移動設備，並且可能只是功能很少的功能手機。 結果，響應式設計並沒有像預期的那樣服務於更廣泛的受眾。

響應式設計適用於任何屏幕尺寸的移動設備的長期信念與此問題有很大關係。 隨著性能的下降和不滿的增加，有必要超越響應式設計。 相反，重點應該放在確保響應性能上。 這個帖子差不多。

那麼，最大的問題是該怎麼做？

摒棄桌面優先的設計理念

這個持續存在的問題的一個重要原因是，重點仍然是桌面優先的設計方法。 重點是為台式機設計網站，然後為智能手機和平板電腦等其他設備設計。 對於任何缺失的功能，開發人員會大量使用 shims 和 polyfills。 當然，有大量的庫可以確保快速發展。 但是，這並不能解決瀏覽器不兼容的問題。 參與沒有產生預期結果的設計概念是否合理？

實施移動優先的設計方法並不是很困難，其目的是在移動用戶的屏幕上只向移動用戶提供預期的信息，而不是所有會扼殺設備的東西。 Luke Wroblewski 於 2011 年首次將這種設計方法概念化，從那時起，許多行業專家都稱讚他的突破性設計方法。

更多數據，即使只需要幾分之一秒，也會對整體加載時間產生顯著影響。 然而，網站也隨著圖形豐富的內容變得越來越重，越來越多的人使用他們的移動設備訪問這些內容也是事實。 當用戶在低分辨率屏幕的手機上鍵入網站的 URL 時，他的目的始終是訪問網站內容，但他所經歷的卻是一場噩夢。 這是因為在無休止的不必要廣告中導航很困難。 刪除此類可避免的內容元素，以允許您的用戶訪問主要內容。 這會增加網站流量，因為除了擁有高端智能手機的用戶外，許多人會通過低分辨率的移動設備訪問您的網站。 如果移動設備功能有限，則提供純文本版本非常有意義，但話又說回來，您可能會說用戶體驗受到影響。 嗯，確實是這樣，但總比完全不接收內容要好。 至少在這種情況下，用戶將訪問有關您網站的基本信息。 以這樣一種方式設計一個網站是否有任何意義，它會減少它的潛在影響？

你肯定會接受這樣一個事實，即無休止地等待只是為了檢查一個網站不會讓任何人興奮。 根據 Akamai 和 Gomez.com 的一些調查，大約 50% 的網絡用戶高度期望網站在 2 秒甚至更短的時間內加載。 如果網站在 3 秒內無法在瀏覽器中加載，則網站被放棄的可能性更大！ 而且，現在大多數電子商務網站都有大量的社交分享按鈕，如 Facebook、Google Plus、Twitter、LinkedIn 等。你知道這些按鈕會給你的響應式網站增加超過 500KB 並影響其性能嗎？ 僅 Facebook like 按鈕就需要 270KB 的壓縮代碼！ 它還需要多個 HTTP 請求。 相反，請使用基於 URL 的社交分享按鈕，因為即使移動連接速度很快，如此大的尺寸也會不可避免地影響響應式網站的加載時間。

網站的性能對企業的業績有直接影響，而響應速度慢的網站永遠不會對企業產生任何好處。 信不信由你，大多數移動用戶對做研究或閱讀長篇文章不感興趣。 他們中的大多數人使用他們的移動設備來輕鬆訪問 Facebook、WhatsApp、Twitter，並沉迷於網上購物的樂趣。 此外，移動不再是趨勢，而是未來。

根據 Comscore 去年的統計，美國僅使用移動設備的互聯網用戶數量急劇增加，而僅使用桌面設備的用戶減少到 10.6%。

還需要說什麼來說服嗎？

確保優雅降級

在過去的幾年裡，你可能會遇到響應式設計領域的新流行語，那就是“優雅退化”。 是的，優雅降級意味著即使一個功能不能成功運行，它也應該以一種有助於可接受可用性的方式失敗。 這意味著，為桌面創建網站設計，然後逐漸轉向平板電腦、智能手機和功能手機。 網站優雅降級的響應式設計的性能必然很高，因為用戶體驗在這裡始終是一流的。 儘管存在任何缺陷，該網站仍將保持正常運行，並且訪問者肯定會對整體質量印象深刻。

現在，您可能會想到一個問題，即優雅降級有什麼令人著迷的地方。 答案很簡單。 這是因為它使您的內容無論使用何種瀏覽器都可見且可讀，這是一項了不起的壯舉！ 幸運的是，如果您使用的是 CSS3，優雅的降級變得很容易，因為 CSS3 的大多數屬性會自動降級，例如圓角變成方形，文本被換行而不是單行，漸變變成純色等等。

讓我們舉一個優雅降級的例子。 假設您設計了一個具有 JavaScript 功能的響應式網站，而您的瀏覽器不支持這些功能，或者您的客戶端可能會禁用這些功能。 那麼，你能做些什麼來獲取內容呢？ 好吧，在這種情況下，優雅降級允許您的瀏覽器顯示“noscript”標籤內的內容。

您可以通過下面給出的編碼更好地理解這一點：

[xhtml]
<無腳本>
<h1>親愛的約翰，您遇到了問題！</h1>
<p>您的瀏覽器不支持 JavaScript 或被暫時禁用。
請訪問我們的<a href="/support/browsers/">瀏覽器支持</a>尋求幫助。</p>
</noscript>
[/xhtml]

我想再分享一個優雅降級的例子，那就是 YouTube 使用 HTML5 播放視頻。 假設您的瀏覽器不支持 HTML5，視頻將使用 Flash 顯示，如果沒有安裝 Flash，您將收到一條消息，要求您在移動設備上安裝它。 無論哪種情況，您都可以觀看視頻。 然而，這種優雅降級的一個缺點是，雖然性能很好，但如果您使用過時的瀏覽器，則必須在某些設計元素上做出妥協。 我想事先確定您網站的基本視覺元素可以解決問題。

無需保留未使用的庫

一種最佳做法是不保留未使用的庫。 是的，跟踪已使用和未使用的庫確實非常耗時，但確實值得。 有時，您可能已經註意到在包含庫後您只使用了一個功能。 有時甚至可以是兩三個。 我用於創建響應式設計的最常用工具是 jQuery。 事實上，有很多 jQuery 庫可以幫助開發人員創建響應式網站。 僅僅因為您喜歡一些小部件而包含幾個庫（如 JavaScript 庫）將在很大程度上增加您的頁面加載時間。 但是，分析正在使用的庫以及使用的程度將是一種巧妙的做法。

檢查功能的可用性

您可以在激活之前檢查您的設備是否支持某個功能。 例如，儘管您在過時的 Android 手機上安裝了最新版本的 Google Chrome，但它仍然沒有顯示您的網站。 有時，在嘗試加載這樣的網站時，瀏覽器會嚴重崩潰，以至於整個移動設備都沒有響應。 您需要重新啟動設備，這是您最不想要的，不是嗎？ 由於這個問題，某些 Web 應用程序的許多用戶已經受到影響。

設備上的功能不可用以及設計網站或應用程序導致了一些明顯的問題，例如無論瀏覽器類型如何，全球 Android 設備上的 Google Hangout 應用程序都會立即崩潰。 儘管該應用程序是一個輕量級應用程序，但這是一個事實。 您可能會爭辯說，用戶使用的是舊版本的 Android 智能手機，但這些設備在任何移動商店中仍然可以作為全新的現成設備購買，這也是事實。 許多移動用戶在使用 YouTube 和 Twitter 應用時也面臨同樣的性能問題。 甚至通過 Google Play 更新 Google 的 Android System Webview 服務也會凍結許多智能手機，成為用戶的噩夢。

優化圖像

包括視覺上吸引人的大圖像對設計師來說總是很誘人。 當他們在將這些圖像上傳到 CMS 之前沒有壓縮這些圖像時，就會出現問題。 對於網絡上的多個電子商務網站尤其如此。 根據 Radware 最近的研究，頁面越來越大，前 100 家零售網站中約有 45% 沒有進行圖像壓縮。 這使此類網站變得更加龐大，因此加載時間增加了，但作為設計師，您可以避免這個問題。

使用合適的圖像優化工具使圖像尺寸更小。 事實上，網絡上不乏此類工具。 您可以使用的一些值得注意的是 Dynamic Drive、Smush it 和 Riot。 如果您是 Photoshop 的專業人士，您還可以自己優化圖像大小。 使用智能壓縮技術並將其從任何冗餘元數據中剝離。 將圖形轉換為 PNG，將色彩豐富的圖像轉換為 JPEG，將動畫圖像轉換為 GIF 也可以做到這一點。

為極端情況做好準備

當您開始設計時，您一定已經註意到您很想設計更容易的頁面。 至少，這使您能夠向利益相關者展示一些東西。 乍一看這似乎很好，但如果你把精力集中在最具挑戰性的場景上，一開始你會得到一個好的結果。

例如，包含一些文章、博客和新聞稿的網頁。 它也必須有一個標題。 現在，如果您認為顯示“響應式網頁設計技巧”的標題空間必須顯示“成功響應式網站設計的 10 個基本技巧和技術”的標題，會發生什麼？ 現在，這是一個極端的案例。

像上面這樣優化響應式網站性能的努力似乎是無形的。 然而，這些努力為用戶帶來了滿意的回報。 您可以藉助各種工具，例如 Pingdom 工具，這些工具可以讓您輕鬆監控響應式網站的加載時間。 不要跳過測試的重要方面，以確保您的響應式網站按預期運行。 在盡可能多的真實設備上進行測試。

您還可以利用 Screenfly 等資源，使您能夠在多種屏幕分辨率上測試您的網站。 您可以爭辯說，所有這些策略都需要大量時間，但話又說回來，一個人需要付出艱苦的努力才能獲得收益。 如今，創建具有響應性能的響應式網站至關重要，因為谷歌根據網站的性能對網站進行評級。 如果您是設計師或開發人員，請不要將自己限制在上述任何一種最佳實踐中。 您應該尋找更多解決方案，並且可能會努力提供一個表現出響應性能的網站。