想讓產品加載更快？來看這3個性能優化小技巧！

數字性能管理平臺 Dynatrace 研究，當你打開網站時，等待其加載內容的時間，近半數人最多等3秒，如果網站不能在3秒內加載完內容，許多人會失去耐心甚至選擇離開，對任何行業來說，這都意味著損失大量業務和體驗。

HTTP Archieve 統計，圖片內容已經占到了互聯網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片。從性能優化的角度看，圖片也絕對是優化的熱點和重點之 一，Google PageSpeed 或者 Yahoo 的14條性能優化規則無不把圖片優化作為重要的優化手段。

我們負責的產品，大部分面向的是 Web端企業級用戶，由于行業的原因，我們實際用戶的電腦和網絡環境，遠沒有大數據統計中電腦設備的良好性能，而且大多數企業電腦設備更新換代周期長，致使大多員工用的電腦老舊性能差，為了讓產品運行使用流暢，產品自身性能的重要性不言而喻，作為產品設計師我們如何在不影響系統運行正確性的前提下，使之運行更快，如何能兼得美麗與才華而又不失用戶體驗？

文章目錄

• 何為性能優化
• 性能優化的目的
• 我們是如何進行性能優化的

何為性能優化

性能優化（Optimize），簡而言之，就是在不影響系統運行正確性的前提下，使之運行地更快，完成特定功能所需的時間更短。

性能優化的目的

對Web端產品來說：

• 從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應更及時，能夠給用戶提供更為良好的體驗；
• 從服務商角度而言，優化能夠減少頁面請求提升服務器性能、減小流量，能夠節省可觀的成本。

總之，恰當的優化不僅能夠改善站點的用戶體驗并且能夠節省相當多的資源。

我們是如何進行性能優化的

1. 圖片

了解圖片格式

圖片格式多種多樣，其自身的優缺點決定了使用場景及環境，在什么情況下采用何種圖片格式，是我們進行的第一步，首先從了解他們入手。

我們對常用的圖片格式做了簡單的對比總結：

盡量減少圖片數量

之前的 web 圖片調用方式是一張一張調用，這樣會增加服務器的請求次數，降低界面響應速度，推薦使用下面兩種方法來優化圖片：

CSS Sprites，是一種網頁圖片應用處理方式，是把產品相關圖片整合到一張圖片文件中，這樣載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來，這是減少圖像請求的有效方法。通過 CSS 的 background-image和background-position 屬性來顯示圖片的不同部分，合并后的圖片會比單個分離的圖片總和要小，好處在于能夠在網頁加載圖片時減少對服務器的請求次數，降低服務器儲存和請求壓力，同時提高了頁面的加載速度。缺點是維護的時候比較復雜。

Opacity，設置 div元素的不透明級別，通過透明度的處理，且在不影響用戶體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態，從而減少圖片的使用和網絡請求。

缺點是 IE8 及以下瀏覽器不支持此屬性。

圖片大小的優化

目前正在使用的圖片優化壓縮工具「智圖」→http://zhitu.isux.us/

騰訊的智圖工具推出不久，但實測效果很好，而且提供了 Gulp 的自動化支持。提高用戶在線壓縮圖片，智能轉換圖片格式，在線生成 webP 格式圖片等功能，壓縮率穩定在30%左右（處理帶半透明的 png圖片效果更佳）。

詳細的介紹和使用方法：《騰訊出品！方便好用的免費圖片壓縮工具「智圖」（可導出WebP）》

ImageOptim（Mac）→https://imageoptim.com/

Mac 平臺下非常贊的圖片優化工具，只需要把需要優化的圖片拖拽進 ImageOptim，就能夠完成對圖片的優化。設置選擇的也很豐富，目前支持 JPG 和 PNG 的優化。這是我在寫文章時最常用到的工具，把網站用到的圖片拖進去，優化就完成了。

以微平臺首頁界面為例

如果使用圖片的方法，把所用圖片整合一張圖存儲為 png格式，并直接應用。

將原圖（4.03MB），用「智圖」優化壓縮并保持最高品質，大小為40.4KB，壓縮了100倍，優化效果明顯。

2. iconfont

iconfont，矢量圖標庫，把圖標處理成字體來顯示在屏幕上，同樣瀏覽器也會將其視為字體進行抗鋸齒處理，有時效果并沒有想象中的那么清晰銳利（相對于純圖片效果還是相當可人的）。iconfont，作為字體，其位置和大小也會受 css屬性的影響，同時為了得到最大范圍的瀏覽器支持，需要生成 TTF、WOFF、EOT、SVG 四種字體格式，這些問題阿里UX矢量庫就可以完成。

矢量圖標庫除了對產品整體的性能提升外，對跨部門協作起到了資源與信息同步的作用，也可以作為項目資源備份，方便產品以后維護使用。

詳細使用方法：《重大更新！阿里媽媽矢量圖標平臺iconfont+全新上線！》

如果是自己畫的 svg 想用 font 的類型引入到網頁中可用以下的方法。

首先在 Iconfont 阿里巴巴矢量圖標庫上面將你需要的圖標點擊購物車按鈕加入「暫存架」。

選擇完所有要用的圖標后「存儲為項目」，給它命名。然后在「圖標管理」-「圖標應用項目」中找到這個項目，獲取在線鏈接，把里面的代碼復制到 CSS 中。

在 HTML 中需要使用到圖標時，使用 iconfont 類名。

<i>&#xe600;</i>

里面寫上你想用的圖標下面的 Unicode：

然后你可以通過控制 iconfont 類的屬性改變圖標的樣式，比如：

.iconfont{

font-family:"iconfont";

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

padding-left:20px

}

就可以在頁面中引用和修改了。

矢量圖標庫在「移動端」的應用，有多項超過位圖的高級特性，這些特性所帶來的好處會影響你的設計工作流，以及產品的最終品質。移動端的設計變的越來越復雜，原因在于多樣的屏幕尺寸與不同的分辨率。對于可縮放的自適應設計來講，Icon fonts 是一種驚人的解決方案：

• 可縮放性（Scalability）：基于字體的 icon 是與分辨率無關并能縮放到任何想要程度的技術，而不需要考慮retina，HDPI，XHDPI等等屏幕，渲染時會根據目標設備自動調整。
• 尺寸（Size）：icon 使用 icon font 時，你不需要根據不同設備準備不同的圖片，你的 APP 只需要在啟動時加載一次 icon font 文件即可。
• 可維護性（Maintainability）：通過管理字體文件你可以很自然的組織你的 icon 集合，任意的進行修改或擴展，而你僅需要維護這個單一的字體文件。
• 靈活性（Flexibility）：操縱 icon fonts， 改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀。
• 可交互性（Interactivity）：由于靈活性以及能夠通過代碼方便的操縱， 你能輕松的在不同狀態顯示對應的不同效果，創建動畫。

3. CSS

Web的諸多樣式其實都是可以用 CSS 來實現，例如：圓角、漸變、陰影、簡單的幾何圖形等等，代碼畢竟屬于文本模式，請求資源小，加載和渲染速度都是圖片不可比擬的，因為每一個圖片的加載都需要一個 http 的請求，而瀏覽器同一時間對同一域名下的請求是有一定數量限制，超過限制數目的請求會被阻塞，從而延長用戶的感知時間，因此減少請求次數，也就提高了頁面的呈現速度。

另外通過 css 實現，在任何屏幕上都可以顯示出良好視覺的效果，無需多分辨率、多端適配。若軟件具有的自定義外觀的功能，css 的優勢就更加的強大，屬性修改一下就可以了。在后期維護時需要修改，比修改圖片要方便容易。

產品實際案例應用——CSS

圓角、漸變、陰影、線條、背景等等，都由 css 來實現，通過css，實現全兼容的良好視覺效果，自適應多分辨率。

產品應用

產品使用 iconfont + css + 圖片優化。

• 圖片 ：Logo用智圖壓縮優化。
• iconfont ：單色圖標使用 iconfont。例：返回、消息、設置、下拉、各模塊圖標、各文件類型的圖標、搜索、新建文件夾、上傳、刪除、文本、文件夾、下載、編輯、check box等。
• CSS ：CSS樣式。例：圓角、背景、有色彩的圖片、甘特圖表、圓角按鈕、背景、輸入框、表格、隔行差色、圓角按鈕、線條等。

使用 iconfont + css + 圖片優化，首界面應用圖片2張，總大小為38.9KB，其他均為 iconfont+css。

結論

在產品設計過程中，慎重選擇設計方式，減少因徑向漸變、不規則漸變引起的必須使用大圖片元素的方法，避免用戶因為長時間的等待加載而煩躁或選擇離開，從而影響產品整體體驗。

作為產品體驗設計師必須為用戶著想，需要自己去真正使用、去運行你設計的產品，將「用戶體驗」意識貫穿整個產品環節。

總結

性能優化的方法有很多種，本文選擇的方法只是其中之一，我們的目的是提高 Web端產品的響應速度，保證頁面的快速呈現，所以，降低圖片的使用頻次，減少界面元素請求次數，能有效減少用戶的等待時間，從而提升產品的性能。

基于圖片的 CSS Sprites 整合和智圖工具的壓縮優化，到 iconfont 字體化的應用，再到 CSS 的樣式呈現，無需增加硬件成本、投入人力，只要從方法上應用，就可以減少產品界面的圖片應用數量，提升用戶操作響應速度。

好的設計是產品成功的基礎，產品優化首先要從設計開始，我們在后續的工作中，也會不斷的優化和運用這些方法，持續總結沉淀提升，為產品設計貢獻價值。

歡迎關注作者的微信公眾號：「51UED」

「性能優化的方法指南」

• 《騰訊干貨！從四個方面幫你做好移動頁面性能優化》
• 《給網頁設計師和前端開發者看的前端性能優化》
• 《全是干貨！移動Html 5前端性能優化指南》