幾乎每個人都喜歡一個很酷的加載動畫,對吧?但是,如果這個效果持續(xù)超過一兩秒或者更久,它只會引起用戶的注意并強(qiáng)化用戶認(rèn)為這個網(wǎng)站加載緩慢這件事實(shí)的想法。所以,這對于網(wǎng)站來說簡直就是致命的。
用戶希望網(wǎng)站能夠快速高效地加載。確保
網(wǎng)站設(shè)計不僅僅只是在視覺上令人滿意,同時,你需要保證它能100%的發(fā)揮它的功能,這是你的工作。如果你的網(wǎng)站目前剛好存在這方面的制作的話,你現(xiàn)在可以停止擔(dān)心,因為我們有七個提示可以來幫助你加速你的網(wǎng)站,同時對設(shè)計進(jìn)行微調(diào)(你可以訪問在文章中介紹的每個網(wǎng)站,它們看起來都很棒,并且它們打開網(wǎng)頁的速度“快如閃電”)。
1.盡可能使用代碼你可能會嘗試為你的
網(wǎng)頁設(shè)計創(chuàng)建一堆漂亮的圖標(biāo)和圖像,并將其作為單個元素加載。這可能會導(dǎo)致一些問題。相反,盡可能使用代碼調(diào)用這些元素。
使用css加載背景圖像。這將“強(qiáng)制”你的網(wǎng)站加載背景之外的所有內(nèi)容,因此用戶可以立即開始在網(wǎng)站上查看其他元素和文字。w3schools有一個很有效,簡單的教程,教你如何做到這一點(diǎn)。
還有很多工具可以幫助你制作,如font awesome圖標(biāo),通過加載其他css和javascript庫,你可以輕易的使用它們,并創(chuàng)建有趣的元素與輕量級的效果。
2.注意動畫的使用在
網(wǎng)站設(shè)計中使用動畫是2015年到現(xiàn)在一直在流行的“趨勢”之一。當(dāng)你在使用這個技巧的時候,確保你創(chuàng)建的動效不會加載大量以及大格式的文件。你可以在剛開始接觸的使用使用較小的動畫,當(dāng)你獲得靈感以及了解它們的工作方式和在整個網(wǎng)站框架中如何工作的時候,你可以繼續(xù)更大的動畫效果。
使用動畫的關(guān)鍵不是將一堆視頻文件加載到你的網(wǎng)站中。動畫越小,創(chuàng)建的東西越容易,所占的空間以及版塊就越小。所以,你會從哪里開始呢?
動畫的使用不僅僅只是限定在大范圍和大動作,做一些簡單的效果同樣是一個有趣的事情,比如創(chuàng)建懸停動畫狀態(tài)。按鈕更改顏色或擴(kuò)展是一個很簡單但是卻很有效的的動作,它不僅能夠幫助你掌握css,同時,在這個過程中你可以獲得對基本動畫的感覺,然后再轉(zhuǎn)到更大的元素。你也可以考慮使用ajax或視差加載動畫。對于這些選項中的任何一個都有好處,這樣可以讓你有時間加載元素,而無需用戶注意。因為元素在用戶滾動時加載,所以你可以獲得一些寶貴的時間來準(zhǔn)備好所有的東西。
3.制作圖像隨著用戶使用高清和視網(wǎng)膜顯示器的數(shù)量不斷增加,你可能會在構(gòu)建你的網(wǎng)站時將所有圖像以高分辨率加載。不要陷入這個陷阱。大多數(shù)這些圖像可能太大了,以致于你的網(wǎng)站不能有效地處理,導(dǎo)致網(wǎng)站整體的加載速度被拖慢。
你要充分了解你的文件類型。web上圖像最常見的文件格式有jpg,png,gif和svg。
· jpg:適合于照片,jpg文件的大小不定,可以很大,也可以很小。保存jpg文件以供網(wǎng)站使用時,請確保保存制作的文件。
· png:對于包含文本的圖像,使用此文件格式,以使文字呈現(xiàn)的效果好。這通常是一個相當(dāng)小的文件。
· gif:較小動畫元素的選文件格式,例如流行的動畫圖像。但請注意,如果你不當(dāng)使用,此文件格式可能會變成一種累贅
· svg:如果你需要web格式的矢量圖像,這是最好的選擇。它可以適用于從圖標(biāo)到logo的任何東西。
4.保持視頻簡短
另一種時尚的
網(wǎng)頁設(shè)計元素是在你的主頁上使用全屏視頻。這可能是另一個使你的網(wǎng)站“負(fù)載”的陷阱。 你會發(fā)現(xiàn)自己被困在在視頻質(zhì)量,視頻內(nèi)容和速度之間,“魚和熊掌不可兼得”,你必須在某個方面作出犧牲。
最好的視頻題材是超短的(只有幾秒鐘)循環(huán),以使動作不會停止,也不需要包括聲音或其他的效果。
你可以嘗試一些其他的技巧來盡可能地減少文件的大小。
· 想想在較低分辨率的視頻上的使用顏色疊加或模糊。它仍然在視覺上看起來很整齊,但不在會占用太多的資源。
· 考慮一個小于全屏尺寸的視頻。
· 自動播放,這可以“欺騙”用戶認(rèn)為你的網(wǎng)站加載速度比其他的更快。
· 不要陷于長視頻的陷阱中。如果你必須要顯示多個視頻的話,請考慮使用視頻“滑塊”元素,或者使用按照時間表來手動更改視頻,以便用戶每次訪問該網(wǎng)站時都可以看到新內(nèi)容(無論你的剪輯的多么好,沒有幾個用戶會觀看超過幾秒的,所以不要為視頻的長度而犧牲加載時間)。
5.注意你使用的插件你的網(wǎng)站使用了多少插件或第三方應(yīng)用程序?你是否每個都有使用到?確保關(guān)閉未使用的插件以制作效率。
wordpress用戶可以利用插件性能分析器來查看哪些插件是活動的,以及它們的工作原理。這可以幫助你排除故障并識別問題,并刪除或重新配置這些插件。
6.壓縮,壓縮,壓縮,重要的事情說三遍
你的網(wǎng)站不僅僅是單個組件需要壓縮,你還可以整合網(wǎng)站做整體的壓縮,以便保持網(wǎng)站快速的運(yùn)行速度。 可以壓縮的元素是css和javascript文件,圖像和視頻(通過調(diào)整大?。?,通過使用相關(guān)的壓縮工具,如gzip。
精簡文件是插件和創(chuàng)建較小文件時的好路徑。你還要檢查代碼在站點(diǎn)內(nèi)的設(shè)計。為了保證能夠獲得大的速度,所有的javascript應(yīng)該包含在一個文件中,所有的css應(yīng)該包含在另一個文件中(另外一個注意事項:放置代碼的時候你也需要注意,將css鏈接到頁面頂部,將javascript鏈接到底部以提高網(wǎng)站速度)。
總結(jié)你的網(wǎng)站加載速度夠快嗎?如果還不夠,現(xiàn)在是調(diào)整它以滿足好加載時間的時候了(如果你不能馬上回答,需要考慮這個問題才能告訴答案的話,那么證明你的網(wǎng)站可能不夠快)。
網(wǎng)站必須快速,以便用戶可以立即進(jìn)行交互。無論設(shè)備如何,頁面加載所需的時間越長,用戶越有可能放棄網(wǎng)站。因此,請在今天或本周花上幾分鐘時間,然后瀏覽此列表,以確保你的網(wǎng)站正以好的狀態(tài)運(yùn)行。
本文名稱:為什么別人的網(wǎng)站加載速度連博爾特都追不上?
網(wǎng)站網(wǎng)址:http://jinyejixie.com/news0/106700.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、微信小程序、營銷型網(wǎng)站建設(shè)、App開發(fā)、外貿(mào)建站、Google
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)