高端
網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法詳解。
網(wǎng)站建設(shè)公司提醒制作設(shè)計(jì)網(wǎng)站除了站點(diǎn)的資源數(shù)量和大小，還有其他的計(jì)時(shí)度量會(huì)影響用戶對(duì)網(wǎng)站性能的體驗(yàn)。首字節(jié)時(shí)間首字節(jié)時(shí)間是指從瀏覽器請(qǐng)求網(wǎng)站頁(yè)面開(kāi)始，到瀏覽器接收到第一個(gè)字節(jié)之間的毫秒數(shù)。這個(gè)數(shù)值用來(lái)測(cè)量瀏覽器和服務(wù)器之間的連通路徑，包括 DNS 查詢、初始連接和數(shù)據(jù)接收。它并不是判斷站點(diǎn)性能的最佳標(biāo)準(zhǔn)，卻是一個(gè)值得關(guān)注的指標(biāo)。開(kāi)始渲染時(shí)間更有價(jià)值的計(jì)時(shí)度量是“開(kāi)始渲染時(shí)間”。這個(gè)度量是指用戶開(kāi)始在頁(yè)面上看到內(nèi)容的時(shí)間。這意味著所有阻塞渲染的文件都已經(jīng)加載完成，瀏覽器已經(jīng)開(kāi)始渲染文檔模型了?？梢酝ㄟ^(guò)以下方式優(yōu)化開(kāi)始渲染時(shí)間：延遲加載阻塞渲染的 JavaScript 和 CSS 文件、將關(guān)鍵的 CSS 代碼內(nèi)聯(lián)到頁(yè)面頭部、用數(shù)據(jù) URI 代替圖片資源，以及延遲加載所有在文檔模型渲染完成后才下載的資源。文檔完成時(shí)間只要最初請(qǐng)求的資源已經(jīng)加載成功，就可以認(rèn)為文檔“完成”了。文檔完成時(shí)間不包括 JavaScript 中拉取資源消耗的時(shí)間，因此延遲加載的資源不會(huì)影響這個(gè)指標(biāo)。
一、端網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法之混合度量標(biāo)準(zhǔn)
混合度量標(biāo)準(zhǔn)不是度量離散的值，而是根據(jù)多個(gè)性能指標(biāo)綜合打分得出。PageSpeed分?jǐn)?shù)
PageSpeed（https：//developers.google.com/speed/pagespeed/insights/）是 Google 開(kāi)發(fā)的網(wǎng)站工具和 Chrome 瀏覽器的擴(kuò)展程序，用來(lái)分析站點(diǎn)的性能和網(wǎng)站的可用性，它給出一個(gè)用百分比表示的分?jǐn)?shù)，并解釋了提高分?jǐn)?shù)的方法。測(cè)試包括：
· 是否存在阻塞渲染的 JavaScript 或者 CSS
· 重定向至登陸頁(yè)
· 圖片優(yōu)化
· 文件壓縮
· 服務(wù)器響應(yīng)時(shí)間
· 服務(wù)器端壓縮
· 瀏覽器端緩存
· 點(diǎn)擊目標(biāo)的大小
· 窗口可見(jiàn)區(qū)域的配置
· 清晰的字體大小
二、端網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法之Speed Index指標(biāo)
根據(jù) Speed Index 項(xiàng)目主頁(yè)上的描述，Speed Index（https：//sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index）指的是頁(yè)面可見(jiàn)部分展示完成的平均時(shí)間，該指標(biāo)通過(guò)用毫秒表示，并取決于視圖端口的大小?；旌隙攘繕?biāo)準(zhǔn)的分?jǐn)?shù)考慮了上述多個(gè)單一的度量標(biāo)準(zhǔn)，并將這些標(biāo)準(zhǔn)和頁(yè)面加載時(shí)用戶可以實(shí)際看到的標(biāo)準(zhǔn)結(jié)合起來(lái)。Speed Index 是度量終端用戶實(shí)際體驗(yàn)的最好標(biāo)準(zhǔn)之一。
三、端網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法之設(shè)置性能測(cè)試
現(xiàn)在我們已經(jīng)知道可以測(cè)試哪些指標(biāo)，以及如何制定性能預(yù)算。那么接下來(lái)看幾個(gè)用于自動(dòng)化測(cè)試流程的方法。不管是測(cè)試站點(diǎn)是一個(gè)還是幾十個(gè)，恐怕沒(méi)有人愿意手動(dòng)測(cè)試。
四、端網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法之Grunt PageSpeed插件
我們要了解的第一個(gè)測(cè)試流程自動(dòng)化工具是 Grunt 的 PageSpeed 插件（https：//www.npmjs.com/package/grunt-pagespeed）。顧名思義，這個(gè) Grunt 插件可以自動(dòng)化地運(yùn)行 Google 的 PageSpeed 來(lái)測(cè)試我們的站點(diǎn)。我們能在所有的分支合并請(qǐng)求和后續(xù)集成構(gòu)建之前就運(yùn)行該 Grunt 任務(wù)， 而不用將你的 URL 插入到 Page Speed 頁(yè)面中或使用 Chrome 擴(kuò)展。為了設(shè)置 Grunt PageSpeed 插件，首先使用標(biāo)準(zhǔn)的命令安裝和引入該插件。
$ npm install grunt-pagespeed ——save-dev
// 加入Gruntfile.js
grunt.loadNpmTasks('grunt-pagespeed');
// 在Gruntfile.js中加入grunt.initConfig
$ npm install grunt-perfbudget ——save-dev
// 加入Gruntfile.js
grunt.loadNpmTasks('grunt-perfbudget');
perfbudget：{
default：{
options：{
url：'http://www.redhat.com/en'，
key：'SEE_NOTE_ABOVE'，
budget：{
visualComplete：'4000'，
SpeedIndex：'1500'
}
}
}
}
深圳網(wǎng)站建設(shè)公司資深設(shè)計(jì)師上述設(shè)置使我們可以在 Red Hat 主頁(yè)上自動(dòng)運(yùn)行全部的 WebPageTest 測(cè)試集。在這個(gè)例子中，我設(shè)置視覺(jué)完成時(shí)間指標(biāo)為 4000 毫秒，而 Speed Index 指標(biāo)為 1500 毫秒。如果有任何測(cè)試返回結(jié)果超出預(yù)算，那么就會(huì)得到一個(gè)嚴(yán)重錯(cuò)誤提示信息，提示我們重新審視最新提交的代碼，檢查究竟是什么導(dǎo)致超出預(yù)算。通過(guò)適當(dāng)?shù)淖詣?dòng)化測(cè)試流程和有競(jìng)爭(zhēng)力的預(yù)算，你就有了一個(gè)很好的起點(diǎn)，在此基礎(chǔ)上可以持續(xù)開(kāi)發(fā)新的功能并改進(jìn)網(wǎng)站，同時(shí)確保提交的改變不會(huì)超出預(yù)算。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“高端網(wǎng)站改版建設(shè)對(duì)于用戶訪問(wèn)體驗(yàn)在設(shè)計(jì)工作的計(jì)時(shí)度量設(shè)計(jì)方法詳解”就分享到這里。如果您需要聯(lián)系深圳的高端網(wǎng)站建設(shè)公司，請(qǐng)撥打我們網(wǎng)站聯(lián)系電話，有專人為您提供免費(fèi)建設(shè)制作設(shè)計(jì)方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
