Sunny. 2016-08-09
網(wǎng)站建設(shè)
如何設(shè)計(jì)一個(gè)加載速度很快的網(wǎng)站
速度是現(xiàn)在比以往任何時(shí)候都更本質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)。在2016年,你的網(wǎng)站訪客想要快得多的網(wǎng)站體驗(yàn),如果你不送,就會(huì)去別的地方,在那里他們可以!這只是現(xiàn)在的方式,這種趨勢(shì)正朝著越來(lái)越快的網(wǎng)站。
設(shè)計(jì)師不斷地測(cè)試,以確保他們的客戶有快速的網(wǎng)站會(huì)比那些不得到重視。快速的網(wǎng)站你問(wèn)是什么?我們?nèi)绾瘟炕@一數(shù)值而言?
看看數(shù)據(jù),我們有一些研究說(shuō)以下幾點(diǎn):
● 47%的用戶想要一個(gè)網(wǎng)站在兩秒或更少(根據(jù)負(fù)載Akamai研究)
● 電子商務(wù)消費(fèi)者想要一個(gè)網(wǎng)站加載在兩秒,但谷歌的目標(biāo)是不到半秒(根據(jù)谷歌網(wǎng)站管理員)
● 57%的用戶會(huì)放棄一個(gè)移動(dòng)網(wǎng)站如果它花費(fèi)的時(shí)間超過(guò)三秒加載(根據(jù)版的研究)
顯然,共識(shí)是更快更好,因?yàn)樗蟠筇岣吡擞脩趔w驗(yàn)。這里有一些奇妙的想法讓你客戶的網(wǎng)站更快!
讓你的設(shè)計(jì)簡(jiǎn)約
顯而易見(jiàn),當(dāng)您創(chuàng)建一個(gè)簡(jiǎn)單的設(shè)計(jì),你的網(wǎng)站有更少的元素加載。當(dāng)有更少的元素加載,可以有效地提高你的網(wǎng)站的速度。
這完全取決于你的網(wǎng)站設(shè)計(jì)的哲學(xué)方法。你可以節(jié)省很多麻煩從一開(kāi)始通過(guò)設(shè)計(jì)巧妙地避免有害的行為影響你的網(wǎng)站的加載速度。
設(shè)計(jì)師需要堅(jiān)持極簡(jiǎn)主義的真正原理提出的網(wǎng)站的光腳,不需要很長(zhǎng)時(shí)間的負(fù)載從一個(gè)頁(yè)面到另一個(gè)。
簡(jiǎn)約的特點(diǎn)是:
● 一個(gè)漢堡菜單而不是一個(gè)標(biāo)準(zhǔn)的導(dǎo)航欄
● 更多的白色或負(fù)空間
● 短的web表單
● 小的圖片
● 只有一個(gè)字體,而不是不同類型的字體在你的網(wǎng)站上
維基百科是一個(gè)理想的例子go-light-for-minimalism設(shè)計(jì)方法。
從它的主頁(yè)在酒吧里,當(dāng)我們輸入一個(gè)搜索詞,比如說(shuō)“老虎”。它只需要不到一秒的時(shí)間去老虎的維基百科頁(yè)面?？碅lexa工具條擴(kuò)展,我們可以確認(rèn)這是真的!
理解的重要性的感知性能
即使在網(wǎng)頁(yè)設(shè)計(jì)中,知覺(jué)是現(xiàn)實(shí)。這意味著設(shè)計(jì),只是認(rèn)為是高度有用的不一定要快得多,以生產(chǎn)高水平的用戶滿意度或認(rèn)為,優(yōu)秀的用戶體驗(yàn)。
雖然擁有快速的網(wǎng)站是至關(guān)重要的,您還可以創(chuàng)建更快的網(wǎng)站,經(jīng)常的感覺(jué)如果它認(rèn)為是快,用戶會(huì)很高興。
在這個(gè)深刻的視頻Luke Wroblewski,他解釋說(shuō),速度是關(guān)鍵路徑的用戶體驗(yàn)。而不是實(shí)現(xiàn)復(fù)雜的技術(shù)解決方案來(lái)提高網(wǎng)站的響應(yīng)時(shí)間,使用好的設(shè)計(jì),我們可以增加的感知性能和使界面看起來(lái)更快。
從谷歌獲得一些幫助
谷歌希望你的網(wǎng)站要快。幫助其整體的使命讓互聯(lián)網(wǎng)更快,它促進(jìn)了發(fā)布了壓縮技術(shù),叫做“Brotli”去年。那么為什么不使用谷歌提供的神奇的工具作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師嗎?
最好的起點(diǎn)是谷歌開(kāi)發(fā)的使網(wǎng)頁(yè)更快的頁(yè)面。在這里,你會(huì)得到一個(gè)恒星各式各樣的工具和信息,加快你的網(wǎng)站設(shè)計(jì)。
谷歌提供了最好的工具之一PageSpeed見(jiàn)解,你獲得詳細(xì)的見(jiàn)解是什么導(dǎo)致你目前的網(wǎng)站是緩慢的。最好的部分是你可以得到詳細(xì)的報(bào)告和建議對(duì)移動(dòng)和桌面版本的網(wǎng)站,所以你真的沒(méi)有借口再呈現(xiàn)一個(gè)緩慢的網(wǎng)站你的客戶!
后把你的站點(diǎn)的URL字段中,你得到的東西你應(yīng)該修復(fù)列表網(wǎng)站速度和用戶體驗(yàn),當(dāng)然,攜手并進(jìn)。
例如,在我的網(wǎng)站上我們看到一個(gè)72/100的速度得分,這是好的,但顯然不是很好。分?jǐn)?shù)下面,我們看到一群建議我應(yīng)該修復(fù)我的網(wǎng)站使它更快,接近100/100的分?jǐn)?shù)。不過(guò),盡管速度得分,手機(jī)網(wǎng)站幾乎有一個(gè)完美的分?jǐn)?shù),表明速度并不是唯一的因素在確定移動(dòng)用戶體驗(yàn)!
當(dāng)我們點(diǎn)擊桌面選項(xiàng)卡中,我們明顯看到一個(gè)更好的速度得分在84/100。相同的,下面列出了新建議,。
更多的谷歌建議您遵循和實(shí)現(xiàn)速度,更快的網(wǎng)站您將創(chuàng)建你的客戶。
偷懶延遲加載
聽(tīng)說(shuō)過(guò)延遲加載嗎?這種設(shè)計(jì)模式的特點(diǎn)是才渲染對(duì)象的時(shí)間點(diǎn)是必要的。例如,對(duì)象在折疊時(shí)才會(huì)開(kāi)始加載和初始化用戶實(shí)際上是向下滾動(dòng)頁(yè)面。這僅在必要時(shí)設(shè)計(jì)方法意味著你的網(wǎng)站需要依賴更少的資源,從而使它更快的性能。
特別注意:如果你的頁(yè)面有很多內(nèi)容,因此需要用戶向下滾動(dòng),延遲加載自然是非常有效的。如果你設(shè)計(jì)一個(gè)long-scrolling頁(yè)面客戶端,使用延遲加載,因?yàn)檫@將大大提高網(wǎng)站的速度和用戶體驗(yàn)!
將延遲加載到您的設(shè)計(jì),只需挑選各種延遲加載插件可用。
幾個(gè)好習(xí)慣包括:
· · 延遲加載為jQuery插件
· · 延遲加載WordPress插件
· · BJ延遲加載
· · Unveil.js
· · bLazy.js
· · 角懶惰IMG
· · ocLazyLoad
· · React-Lazy-Load
· · 杰森Slyvia的React-Lazyload
蘋果的iPhone 6 s產(chǎn)品頁(yè)面是一個(gè)long-scrolling頁(yè)面。這使得一個(gè)完美的候選人延遲加載。如果您向下滾動(dòng)頁(yè)面,你可以看到有多少不同的圖像,每一個(gè)頁(yè)面的速度,征稅需要加載。頁(yè)面可以受益于延遲加載,Alexa工具條擴(kuò)展表明它加載在不到兩秒,只是平均!
優(yōu)化你的服務(wù)器
讓你的網(wǎng)站的一個(gè)重要方面超快是你如何處理你的服務(wù)器。特別是,解決您的服務(wù)器響應(yīng)時(shí)間,這樣,也是超快是關(guān)鍵。你的服務(wù)器響應(yīng)時(shí)間需要多長(zhǎng)時(shí)間你的服務(wù)器響應(yīng)瀏覽器請(qǐng)求。
這是一個(gè)必備實(shí)施以下策略與您的服務(wù)器,以確保您的服務(wù)器響應(yīng)時(shí)間是超快:
● 為每一個(gè)頁(yè)面(使用更少的資源推遲的圖片,結(jié)合外部CSS文件,結(jié)合外部Javascript文件)
● 使用一個(gè)內(nèi)容交付網(wǎng)絡(luò)或CDN
● 使用一個(gè)高速緩存解決方案
● 提高您的web服務(wù)器軟件配置
更快的網(wǎng)站獲得更多的用戶,買家和讀者
設(shè)計(jì)速度不能強(qiáng)調(diào)高度足夠的這些天!是2016,你的用戶,買家和讀者想要快速的用戶體驗(yàn)。否則,他們一定會(huì)去你的一個(gè)競(jìng)爭(zhēng)對(duì)手的網(wǎng)站優(yōu)化了速度!
通過(guò)實(shí)施以下技巧上面,你保證改善你設(shè)計(jì)的網(wǎng)站的速度。這意味著快樂(lè)的客戶會(huì)對(duì)你的設(shè)計(jì)技能,因此,更多的業(yè)務(wù)來(lái)了你作為一個(gè)設(shè)計(jì)師!
當(dāng)然,保持測(cè)試你的網(wǎng)站看到它真的是最快的,可能您可以創(chuàng)建的迭代?？傆姓{(diào)整你可以到處讓它盡可能快。
文章標(biāo)簽：
網(wǎng)站設(shè)計(jì) 網(wǎng)站優(yōu)化
文章評(píng)論：