每個人都喜歡一個很酷的小動畫，對不對？但是，如果該動畫加載的時候持續好幾秒以上，它只會讓訪問者感覺到網站加載速度緩慢的事實。這是一個網站設計中急需(xu)要需(xu)要的(de)地方。雖然現在網絡越來(lai)越好，帶寬越來(lai)越高，導致(zhi)很多網站(zhan)設(she)計(ji)公(gong)司在設(she)計(ji)的(de)時候就沒有考(kao)慮(lv)到這些拖慢(man)加載速度和(he)網站(zhan)提樣(yang)的(de)點。

很顯然，用戶期望網站能夠快速有效地加載。所以對于深圳網站設計公司來說，不僅要確保網頁設計令人滿意，而且要(yao)注意快(kuai)速載入網站(zhan)所有的(de)功能，這是您的(de)工作(zuo)很重要(yao)的(de)點(dian)之一。

1.注意動畫部分，不要濫用網站CSS3動畫效果

網(wang)站(zhan)設計中動(dong)畫(hua)的(de)(de)(de)使(shi)用從2015年開(kai)(kai)始(shi)越演越烈(lie)。不要因創建(jian)無法(fa)加載(zai)的(de)(de)(de)大量文件而導致加載(zai)速度被拖慢。從開(kai)(kai)始(shi)使(shi)用這種類型(xing)的(de)(de)(de)效果開(kai)(kai)始(shi)，以較小的(de)(de)(de)動(dong)畫(hua)實驗開(kai)(kai)始(shi)，然后(hou)在對自己(ji)的(de)(de)(de)整體(ti)網(wang)站(zhan)框架的(de)(de)(de)工(gong)作方式和工(gong)作狀況有良(liang)好(hao)的(de)(de)(de)感(gan)覺后(hou)再繼續進行(xing)更大的(de)(de)(de)動(dong)畫(hua)。

動畫(hua)的(de)關鍵不(bu)是(shi)將一(yi)堆視(shi)頻文件加載(zai)到您的(de)網站上。動畫(hua)越小，創建占用空間更小。

做一些簡單而有趣的事情。比如創建一個動畫懸停狀態。讓按鈕改變顏色或展開是一個漂亮的效果，它可以幫助您掌握更多CSS效果，并獲得讓人心情愉悅的基本動畫的良好感受，然后再轉向更大的元素。您也可以考慮使用AJAX或視差加載動畫。這些選項中的任何一個都很好，它可以讓你有時間加載元素，而用戶甚至不會注意到它。由于元素在用戶滾動時加載，所以，用戶在這個過程中其實是感覺不到的。

2.優化圖像，保持質量上盡可能的壓縮

隨著用(yong)戶(hu)可以使用(yong)高(gao)清和視網(wang)膜顯示(shi)器的(de)數量越來越多，當您構建(jian)網(wang)站時，您可能會試圖以高(gao)分(fen)辨率將(jiang)所(suo)有圖像加(jia)載(zai)，即(ji)全尺寸圖片加(jia)載(zai)。不要陷入這(zhe)個(ge)陷阱。大多數這(zhe)些圖片可能太大，以致您的(de)網(wang)站無法高(gao)效處理用(yong)戶(hu)的(de)需求。

首先你需要了解你想要用你的文件類型。網絡上最常見的圖像文件格式為JPG，PNG，GIF和SVG。
JPG：最(zui)適合照片，JPG文(wen)件的(de)大(da)小可以從小到大(da)。當為網(wang)站使用保(bao)存JPG文(wen)件時，請確保(bao)保(bao)存優(you)(you)化的(de)文(wen)件。 （在Adobe Photoshop中，您可以使用“文(wen)件”>“導(dao)(dao)出(chu)”>“導(dao)(dao)出(chu)為”下的(de)導(dao)(dao)出(chu)設置優(you)(you)化Web圖像。）

PNG：對包含文字的圖像使用此文件格式，以便字體呈現良好。這通常是一個相當小的文件。
GIF：較小動畫元素的首選文件格式，例如流行的動畫模式樣式圖像。但要小心，如果你不小心，這個文件格式可能會變得非常大。
SVG：如果你需要網絡的矢量圖像，這是最好的選擇。它可以用于從圖標到徽標的任何事情。

3.盡可能使用代碼解決問題

您可能會試圖為您的網站創建一些漂亮的圖標和圖像，并將它們作為單獨的元素加載。這可能會導致一些問題。相反，盡可能使用代碼來調用這些元素。
使用CSS來加(jia)載背景(jing)圖片。這(zhe)將“強制”您的(de)網站在(zai)后臺加(jia)載其(qi)他所有(you)(you)內容，以便(bian)用戶可以立即(ji)開(kai)始查看(kan)網站上的(de)其(qi)他元素(su)和文本。 W3Schools有(you)(you)一個簡單的(de)教程(cheng)教你如何(he)做到這(zhe)一點。

有許多工具，從Font Awesome圖標到其他CSS和JavaScript庫的加載都可以很方便的調用，您可以使用這些工具創建輕量級且有趣的優秀元素。 

4.保持視頻的簡短有效

另(ling)一個(ge)流行(xing)的(de)網頁設(she)計元素是(shi)在您的(de)主頁上(shang)使用全屏視頻(pin)。這(zhe)可能是(shi)另(ling)一個(ge)加載時(shi)間(jian)陷阱。你(ni)會(hui)發現自己陷入了視頻(pin)質量，視頻(pin)內容和速度之(zhi)間(jian)艱難的(de)抉擇中(zhong)，這(zhe)個(ge)時(shi)候，你(ni)必須在某個(ge)地方做出犧牲了。

最好的視頻超短其實只有幾秒鐘，然后循環播放。記住，您不需要包含聲音或其他效果。
您可以嘗(chang)試一些(xie)其他技巧(qiao)，盡可能減小文件大小。考慮一個使用顏色疊(die)加或模(mo)糊一個較低分辨率的(de)視頻。它仍然可以看起(qi)來很(hen)整潔(jie)，但不會占(zhan)用盡可能多(duo)的(de)帶寬。這是一個不錯的(de)技巧(qiao)。

考慮一個尺寸小于全屏的視頻。關閉自動播放功能，可以“欺騙”用戶，使其認為您的網站的載入速度比現在更快。相反用一張視頻第一幀的圖片代替，等視頻完全加載完了之后，再將圖片封面切換到視頻播放，這樣是非常自然的。

5.壓縮，壓縮，再壓縮

不僅應(ying)該對網(wang)站(zhan)(zhan)的各個(ge)組件(jian)進(jin)行壓縮，還要(yao)將(jiang)網(wang)站(zhan)(zhan)作(zuo)為一個(ge)整(zheng)體進(jin)行壓縮，以(yi)幫助(zhu)保(bao)持網(wang)站(zhan)(zhan)的快速(su)運(yun)行。可(ke)以(yi)壓縮的元素(su)包括CSS和JavaScript文件(jian)，圖像和視頻（通過(guo)調(diao)整(zheng)大(da)小(xiao)）以(yi)及站(zhan)(zhan)點使用諸如GZIP之類的工具等。

網(wang)站(zhan)必須快速，以(yi)便用(yong)戶可以(yi)立(li)即進行互動。無論設備如(ru)何，加載頁(ye)面所用(yong)的時間越(yue)長，用(yong)戶將完全放(fang)棄訪問(wen)該網(wang)站(zhan)的可能性越(yue)大。因此(ci)，今天或本周花幾分鐘時間看看這篇文章，以(yi)確保您的網(wang)站(zhan)在(zai)最佳的狀態運行。