為了更好地提升用戶的瀏覽體驗(yàn)，《移動(dòng)落地頁體驗(yàn)白皮書4.0》中規(guī)定：頁面的首屏內(nèi)容應(yīng)在1.5秒內(nèi)加載完成。百度搜索對(duì)用戶行為的研究表明，頁面首屏的加載時(shí)間在1.5秒以內(nèi)的頁面，會(huì)帶給用戶流暢快捷的極速體驗(yàn)。近期我們發(fā)現(xiàn)有部分站點(diǎn)移動(dòng)端頁面首屏打開速度多于1.5秒，為了方便開發(fā)者對(duì)頁面進(jìn)行優(yōu)化，技術(shù)特地總結(jié)了問題的主要原因以及優(yōu)化方法給大家進(jìn)行參考。

　　1、清除不必要的資源，避免進(jìn)行不必要的下載

站點(diǎn)應(yīng)當(dāng)定期審核網(wǎng)頁上的資源是否是必需的，并評(píng)估該資源的價(jià)值與性能影響。網(wǎng)頁中往往會(huì)包含一些冗余資源，影響網(wǎng)頁性能的同時(shí)還無法給網(wǎng)頁帶來價(jià)值，可以考慮清除不必要的資源，避免不必要的資源下載帶來性能上的消耗。

　　清除阻塞渲染的JS和CSS

如果要以最快速度完成首屏渲染，需要大限度地減少網(wǎng)頁上關(guān)鍵JS/CSS子資源的數(shù)量，并盡可能清除這些資源，大限度地減少下載量。

　　2、使用代碼拆分減少JS負(fù)載

有的網(wǎng)站可能將所有的JS組合成一個(gè)大型的組合包，以這種方式加載的話頁面性能會(huì)受到影響。長(zhǎng)時(shí)間運(yùn)行的JS可能會(huì)阻塞主線程，這時(shí)可以考慮使用requestAnimationFrame() 或 requestIdleCallback() 來進(jìn)行優(yōu)化。

根據(jù)不同的業(yè)務(wù)需求，開發(fā)者可以將JS中首屏的關(guān)鍵代碼拆分出來，這樣可以提前加載執(zhí)行首屏中必需的少量JS代碼，從而縮短頁面的加載時(shí)間，其余的可以按需加載或者置后加載，同時(shí)建議開發(fā)者將JS優(yōu)先放在首屏渲染完成之后，放在body閉標(biāo)簽前面。

　　3、優(yōu)化阻塞渲染的JS

JS允許我們修改網(wǎng)頁的同時(shí)也會(huì)阻止DOM構(gòu)建，阻塞網(wǎng)頁渲染。默認(rèn)情況下，JS的執(zhí)行會(huì)阻塞內(nèi)核渲染：無論我們使用外鏈還是內(nèi)嵌JS，當(dāng)遇到文檔中的JS腳本時(shí)，它將暫停 DOM 構(gòu)建，將控制權(quán)移交給 JS，腳本執(zhí)行完畢后再繼續(xù)構(gòu)建 DOM，處理剩余的HTML文檔。如果是外鏈JS文件，瀏覽內(nèi)核需停下來，等待從磁盤、緩存或遠(yuǎn)程服務(wù)器中獲取JS腳本，這就可能給關(guān)鍵渲染路徑增加數(shù)十到數(shù)百毫秒的延遲。

為了實(shí)現(xiàn)好性能，可以讓頁面的JS進(jìn)行異步執(zhí)行，建議優(yōu)先考慮使用defer的方式，其次是async方式，并去除關(guān)鍵渲染路徑中任何不必要的JS。

　　(1)優(yōu)化JS的使用方式，優(yōu)先使用異步JS資源

默認(rèn)情況下，JS資源會(huì)阻塞解析，強(qiáng)制等待CSSOM并暫停DOM的構(gòu)建，繼而大大延遲首屏渲染的時(shí)間。異步JS資源則不會(huì)阻塞文檔解析器，如果腳本可以使用defer/async 屬性，也就意味著它并非是首屏渲染所必需的，可以考慮在首屏渲染后異步加載腳本。

　　(2)延遲解析加載JS

為了大限度減少內(nèi)核渲染網(wǎng)頁的工作量，建議開發(fā)者延遲所有非必需的、對(duì)構(gòu)建首屏渲染無關(guān)緊要的JS腳本，將JS優(yōu)先放在body閉標(biāo)簽處。

　　(3)避免長(zhǎng)時(shí)間運(yùn)行的JS

運(yùn)行時(shí)間長(zhǎng)的JS會(huì)阻塞構(gòu)建 DOM、CSSOM以及網(wǎng)頁的渲染，所以任何對(duì)首屏渲染無關(guān)緊要的初始化邏輯和功能都應(yīng)延后執(zhí)行。如果需要運(yùn)行較長(zhǎng)的初始化序列，請(qǐng)考慮將它們拆分為若干個(gè)階段，以便瀏覽內(nèi)核可以間隔處理其它的渲染任務(wù)。

　　4、優(yōu)化阻塞渲染的CSS

默認(rèn)情況下，關(guān)鍵CSS子資源是會(huì)阻塞內(nèi)核渲染的，請(qǐng)務(wù)必精簡(jiǎn)網(wǎng)頁的CSS資源，同時(shí)需要將CSS盡快地完成下載，關(guān)鍵CSS子資源優(yōu)先放在head標(biāo)簽內(nèi)，以便縮短首屏渲染的時(shí)間。

　　(1)優(yōu)化CSS的使用方式

CSS是構(gòu)建渲染樹的必備元素，首次構(gòu)建網(wǎng)頁時(shí)，確保將任何非必需的CSS資源都標(biāo)記為非關(guān)鍵資源(比如print)，并應(yīng)確保盡可能減少關(guān)鍵CSS子資源的數(shù)量。

　　(2)將關(guān)鍵CSS放在文檔head標(biāo)簽內(nèi)

盡早在HTML文檔內(nèi)指定所有必需的關(guān)鍵CSS資源，以便瀏覽內(nèi)核盡早發(fā)現(xiàn)link標(biāo)記并發(fā)出CSS請(qǐng)求下載。

　　(3)避免使用CSS import指令

一個(gè)樣式表可以使用CSS import指令從另一個(gè)樣式表文件導(dǎo)入規(guī)則。不過應(yīng)避免使用這些指令，因?yàn)樗鼈儠?huì)在關(guān)鍵路徑中增加往返次數(shù)從而影響首屏渲染性能。

以上就是《如何優(yōu)化SEO網(wǎng)站的頁面性能?》的全部?jī)?nèi)容，僅供站長(zhǎng)朋友們互動(dòng)交流學(xué)習(xí)，SEO優(yōu)化是一個(gè)需要堅(jiān)持的過程，希望大家一起共同進(jìn)步。

網(wǎng)頁題目：【網(wǎng)站優(yōu)化】如何優(yōu)化SEO網(wǎng)站的頁面性能?
轉(zhuǎn)載來源：http://aaarwkj.com/news47/126847.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)