優(yōu)化的技術(shù)建議包括但不限于:資源加載
1、將同類型資源在服務(wù)器端壓縮合并,減少網(wǎng)絡(luò)請求次數(shù)和資源體積。
2、引用通用資源,充分利用瀏覽器緩存。
3、使用CDN加速,將用戶的請求定向到最合適的緩存服務(wù)器上。
4、非首屏圖片懶加載,將網(wǎng)絡(luò)帶寬留給首屏請求。
頁面渲染:
1、將CSS樣式寫在頭部樣式表中,減少由CSS文件網(wǎng)絡(luò)請求造成的渲染阻塞。
2、將JavaScript放到文檔末尾,或使用async方式加載,避免JS執(zhí)行阻塞渲染。
3、對非文字元素(如圖片,視頻)指定寬高,避免瀏覽器重排重繪。
希望廣大站長持續(xù)關(guān)注頁面加載速度體驗。視網(wǎng)站自身情況,參照建議自行優(yōu)化頁面,或使用通用的加速解決方案(如MIP),不斷優(yōu)化頁面首屏加載時間。
為什么說會影響國外的站點(diǎn)呢?
首先,國內(nèi)的服務(wù)器線路對美國,香港,韓國等國外地區(qū)的線路不一致,訪問速度肯定是有問題的,用戶訪問的時候肯定會稍微延遲幾秒,但是對于百度蜘蛛來說,他已經(jīng)開了CDN了,不管是哪里的機(jī)器,只要你不是太爛的機(jī)房開的服務(wù)器,一般都不影響百度蜘蛛的抓取速度。
對于用戶訪問來說呢?這個肯定是有問題了,那么百度此次的算法,肯定也會考慮到這部分的原因來打壓,所以,近期,國內(nèi)比較出名的站點(diǎn),做擦邊的或者有優(yōu)質(zhì)內(nèi)容的,建議還是備案,或者無法備案的建議開通CDN,來提供訪問速度,增加用戶的體驗性。!
其實不僅是百度,各大搜索引擎對于移動網(wǎng)頁的打開速度都越來越重視,并且將加載速度作為衡量網(wǎng)頁移動友好度的重要標(biāo)準(zhǔn)。因此,再次建議站長重視移動端體驗,打造用戶與站點(diǎn)共贏的網(wǎng)絡(luò)生態(tài)。為推進(jìn)Web技術(shù)的發(fā)展,Brilliant Open Web 團(tuán)隊特推出每月一期的《移動Web加速技術(shù)月報》,該月報將整理較流行的移動Web加速技術(shù),并跟進(jìn)各項技術(shù)的進(jìn)展和發(fā)展方向,以期幫助開發(fā)者了解或選用相關(guān)的技術(shù),把握技術(shù)發(fā)展趨勢。歡迎關(guān)注【OpenWeb開發(fā)者】公眾號并回復(fù)“加群”,一起探討相關(guān)技術(shù)。
一、前言
移動設(shè)備已經(jīng)成為當(dāng)下使用頻率最高的電子設(shè)備,而移動Web依然是移動設(shè)備中使用頻率最高的應(yīng)用場景。
站點(diǎn)頁面性能提升可以使得用戶瀏覽站點(diǎn)時的體驗得到良好改善,作為其中一條技術(shù)分支,移動Web加速技術(shù)的方法和技術(shù)方案在近幾年得到了不斷發(fā)展。無論是內(nèi)容分發(fā)平臺、瀏覽器提供商、網(wǎng)絡(luò)提供商還是Web站點(diǎn),都在通過各種各樣的移動Web加速技術(shù)為用戶提供更良好的頁面瀏覽體驗。
二、移動Web加速技術(shù)有哪些方向?
開始的前言內(nèi)容中我們已經(jīng)提到,參與移動Web生態(tài)的幾個重要角色分別是內(nèi)容分發(fā)平臺、瀏覽器提供商和網(wǎng)絡(luò)提供商以及Web站點(diǎn)。每個角色都在自己所擅長的領(lǐng)域通過技術(shù)創(chuàng)新來給用戶提供更快速的移動Web體驗。因此,移動Web加速的幾個技術(shù)方向也和幾個重要參與者的角色職能密不可分。
幾個重要的技術(shù)方向分別是:
1. 頁面加載與緩存
移動Web加速的其中一個重要技術(shù)方向是針對頁面加載和緩存相關(guān)的加速技術(shù)。
在此方向中,頁面分發(fā)端、瀏覽器和移動網(wǎng)絡(luò)是主要的影響因素,頁面加載相關(guān)的技術(shù)解決方案,也是從這三個影響因素為出發(fā)點(diǎn),來進(jìn)行技術(shù)設(shè)計和實現(xiàn)的。
頁面加載加速主要聚焦在頁面云加速(CDN Cache)以及移動端加速、頁面預(yù)取/預(yù)渲染等相關(guān)技術(shù)點(diǎn)。2. 頁面構(gòu)建
移動Web加速的另一個核心技術(shù)方向是通過明確頁面的正確構(gòu)建方法,來提升頁面在渲染和瀏覽時的用戶體驗。
移動頁面的渲染對用戶體驗的影響是非常巨大的,直接關(guān)系到用戶在打開頁面時能否很快的看到首先想要瀏覽的內(nèi)容(首屏渲染)。
影響首屏渲染的因素非常多,通過正確的頁面構(gòu)建方法,可以進(jìn)一步提升站點(diǎn)頁面的首屏渲染性能并且不傷害用戶的瀏覽體驗。
三、相關(guān)技術(shù)介紹
在每期的網(wǎng)頁加速技術(shù)月報中,我們都會為大家介紹相關(guān)的加速技術(shù)知識點(diǎn)。本期先為大家介紹頁面云加速相關(guān)的技術(shù)知識。
頁面云加速的主要核心其實就是使用云端緩存或代理的方案,讓用戶能通過更快的網(wǎng)絡(luò)獲取加載頁面。主要的核心技術(shù)點(diǎn)有兩部分:基于CDN的頁面Cache或代理、基于端(Web容器或移動瀏覽器)與云端交互的協(xié)議機(jī)制。
1.基于CDN的頁面Cache或代理
此技術(shù)其實在近幾年已經(jīng)非常成熟,無論是各種云服務(wù)解決方案還是CDN服務(wù)提供商都已經(jīng)有非常成熟的技術(shù)能力。此項技術(shù)的思路是從Web服務(wù)提供者角度來提供更好的網(wǎng)絡(luò)環(huán)境來進(jìn)行移動Web加速。在此就不做更多的介紹。
2.基于端與云端交互的協(xié)議機(jī)制
最近兩年開始興起的新的云端加速技術(shù)方案,該技術(shù)在云端的Cache機(jī)制(主要是CDN)的基礎(chǔ)上,使用端來代理用戶頁面加載行為,調(diào)用云端的Cache頁面返回給端使用。此項技術(shù)的思路與前者不同的是它想解決用戶在該端上(Web容器或移動瀏覽器)的所有移動Web站點(diǎn)的訪問加速,而不是某一個站點(diǎn)或已經(jīng)提供了CDN訪問的站點(diǎn)。主要作用是可以提升用戶在該端上的Web瀏覽體驗,讓用戶體驗優(yōu)于其他競品。
主要技術(shù) 有:Google AMP Cache、Baidu MIP Cache、UC瀏覽器云加速、QQ瀏覽器云加速等。
四、主要技術(shù)進(jìn)展
1.AMP本月進(jìn)度
AMP(Accelerated Mobile Pages)是谷歌提供的網(wǎng)頁加速技術(shù),其官方網(wǎng)站是“https://developers.google.com/amp/”。AMP在本月不僅進(jìn)行了技術(shù)方面的優(yōu)化,還計劃在全球范圍內(nèi)進(jìn)行推廣,具體如下。
(1) AdWords 支持AMP化廣告落地頁:AdWords是廣告提供商,使用AMP落地頁能夠快速加載,提高廣告轉(zhuǎn)化率。AMP的表單,內(nèi)容實時更新和統(tǒng)計支持,使AMP適用于廣告落地頁。(相關(guān)鏈接:https://amphtml.wordpress.com/2017/09/07/faster-amp-ad-landing-page-support-from-adwords/)
(2)COND? NAST是如何使用AMP的: COND? NAST擁有多個新聞業(yè)務(wù),選擇AMP不是因為原來頁面慢,而是相信Google的服務(wù)和CDN; NAST公司將AMP和CMS結(jié)合使用,自動將新聞生成為AMP頁面。(相關(guān)鏈接:https://amphtml.wordpress.com/2017/09/08/the-why-and-how-of-accelerated-mobile-pages-at-conde-nast/)
(3) AMP技術(shù)團(tuán)隊將要進(jìn)行全球巡回推廣:包括新加坡、悉尼、倫敦、北京、上海等地,感興趣的讀者可以關(guān)注。(相關(guān)鏈接:https://amphtml.wordpress.com/2017/09/19/introducing-the-amp-roadshow-bringing-the-amp-team-to-you/)
2.MIP本月進(jìn)度
MIP的官方網(wǎng)站是:https://www.mipengine.org/,GitHub地址是:https://github.com/mipengine/。MIP在本月也更新了諸多新功能,進(jìn)行了一系列升級,具體如下。
MIP新增功能
(1)增加儲存功能,使用localStorage和fetch實現(xiàn)。儲存功能可用于代替cookie保存用戶設(shè)置,登錄狀態(tài),攜帶信息,與服務(wù)器進(jìn)行數(shù)據(jù)通信。
(2)MIP-Cache鏈接全量上線二級域名,詳細(xì)說明及影響見《MIP-Cache域名升級》。
MIP升級功能
(1) mip-video 視頻組件升級。支持source多視頻源播放。
(2)mip-showmore 折疊組件交互升級。支持展開后不再顯示收起按鈕(https://www.mipengine.org/examples/mip-extensions/mip-showmore.html)。
(3)mip.js 升級。修復(fù)a鏈接在mip-iframe中不能跳出的問題。
校驗規(guī)則更新
在9月初,MIP更新了少量校驗規(guī)則,對90%以上的MIP頁無影響,保證MIP校驗的嚴(yán)謹(jǐn)性。更新后的規(guī)則為:
(1) 對 head 中 base 標(biāo)簽增加了限制,避免cache改寫后鏈接指向有問題。
(2)強(qiáng)制要求頁面引用https 的 mip.js,避免腳本被不法劫持。
(3)認(rèn)定src=” “(引號之間只有空格)情況等同于src=”“,視內(nèi)容為空。
(4)升級template src校驗,支持文檔中src={{url}}的寫法。
進(jìn)行中mip-bind 組件支持?jǐn)?shù)據(jù)雙向綁定。頁面異步更新,可用于電商等復(fù)交互頁面。MIP-Cache 支持返回webp圖片。使用壓縮率更高的圖片,減少圖片大小。
四、總結(jié)
移動Web加速的下一個方向應(yīng)該是探索頁面加速上的標(biāo)準(zhǔn)策略分級,并影響內(nèi)容分發(fā)平臺、搜索引擎等流量入口使用標(biāo)準(zhǔn)的頁面性能分級來進(jìn)行更廣泛層面的引導(dǎo),提升真實用戶接觸到的互聯(lián)網(wǎng)站點(diǎn)的頁面體驗。
歡迎各位讀者補(bǔ)充各項移動Web加速技術(shù)及其最新進(jìn)展,可以發(fā)送郵件到 openweb@baidu.com,也可以關(guān)注【OpenWeb開發(fā)者】公眾號并回復(fù)“加群”,一起來探討相關(guān)技術(shù),與我們攜手推進(jìn)Web技術(shù)的發(fā)展!