觸屏版
全國(guó)服務(wù)熱線:0571-87205688
登錄
注冊(cè)
客戶中心
關(guān)注云客
網(wǎng)頁(yè)打開(kāi)速度的好慢直接影響到網(wǎng)站的訪問(wèn),大多數(shù)用戶基本上不會(huì)對(duì)超過(guò)5秒鐘還沒(méi)有完全打開(kāi)的網(wǎng)頁(yè)產(chǎn)生任何好感。根據(jù)相關(guān)的研究發(fā)現(xiàn),一個(gè)網(wǎng)站的圖片太多,圖片文件過(guò)大,頁(yè)面太長(zhǎng),是導(dǎo)致網(wǎng)頁(yè)打開(kāi)時(shí)間過(guò)長(zhǎng)的主要原因之一。
有人經(jīng)常抱怨Wordpress網(wǎng)頁(yè)打開(kāi)速度太慢,為了提升WordPress的打開(kāi)速度,我們不妨好好研究一下如何來(lái)加快網(wǎng)頁(yè)中的圖片的打開(kāi)速度。 對(duì)圖片太多的網(wǎng)頁(yè),不妨借鑒一下微博、淘寶和瀑布流主題的“按需加載”方式來(lái)加快速度。
于是就有了本文的實(shí)現(xiàn)文章圖片真正延遲加載的主題了,它的目的就是實(shí)現(xiàn)在瀏覽器可視區(qū)域外的圖片不會(huì)被載入,直到用戶將頁(yè)面滾動(dòng)到它們所在的位置。對(duì)于一些圖片特別多的網(wǎng)站,利用圖片延遲加載技術(shù)可以在一定程度上減輕服務(wù)器壓力。
圖片延遲加載效果之前部落也用過(guò)一段時(shí)間,不過(guò)后來(lái)發(fā)現(xiàn)在網(wǎng)速慢的情況下有看到網(wǎng)頁(yè)上的圖片實(shí)際已經(jīng)全部加載完成了,然后才看到Lazy Load的漸隱效果,這樣實(shí)際上是“偽延遲”,頂多給圖片加了點(diǎn)展示的特效,實(shí)際用處不大,之后就放棄了。
這次說(shuō)要的是實(shí)際真正的延遲加載,實(shí)際上仍然來(lái)源于以前的Lazy Load插件,只不過(guò)經(jīng)過(guò)改良之后,Lazy Load插件讓圖片真正實(shí)現(xiàn)了延遲加載。
WordPress圖片實(shí)現(xiàn)真正延遲加載-加快頁(yè)面打開(kāi)速度減輕服務(wù)器壓力
一、Wordpress圖片延遲加載準(zhǔn)備工作
1、Lazy Load jQuery plugin地址:
1、官方網(wǎng)站:http://www.sz-seo.org/tuupola/jquery_lazyload/master/jquery.lazyload.js
2、下載并上傳jquery.lazyload.js到你的網(wǎng)站服務(wù)器上,這是 Lazy Load jQuery plugin下載地址(http://www.sz-seo.org/dl-lazy-load-jquery-plugin/)。
3、編輯你的Header.php文件,或者是其它的能夠使用JS在任意頁(yè)面調(diào)用的Wordpress主題文件,放入以下代碼:
<script src=“http://www.sz-seo.org/jquery.lazyload.js” type=“text/javascript”></script>
4、注意要將代碼中的域名換你自己的,JS的路徑也要相應(yīng)的更改過(guò)來(lái),如果你的Wordpress沒(méi)有加載jQuery,還得自己手動(dòng)添加代碼加載jQuery v1.4.4+。(PS:現(xiàn)在的Wordpress主題應(yīng)該都有加載jQuery)
圖片延遲加載引入JS文件
5、然后在你的</head>前面加入以下JS代碼,激活jquery.lazyload.js。
<script type=“text/javascript”>jQuery(function() {jQuery(“img”)。lazyload({effect : “fadeIn”,failure_limit : 10 });});</script>
二、修改圖片IMG標(biāo)簽啟用遲延加載
1、Lazy Load 要求圖片的IMG屬性寫成這樣的才可以正確啟用延遲加載效果。
<img src=“http://www.sz-seo.org/uploadfile/2017/0614/20170614112844601.png” data-original=“xxxx/xxxx/example.jpg” width=“600” heigh=“400”>
2、基本要求是:src中賦予一個(gè)1x1大小圖片,data-original中寫入圖片的真實(shí)地址。
3、Lazy Load 延遲加載圖片的原理是:打開(kāi)網(wǎng)頁(yè)時(shí)所有的圖片是一個(gè)1x1大小默認(rèn)圖片,隨著網(wǎng)頁(yè)的拖動(dòng),Lazy Load jQuery plugin會(huì)“按需”將可視窗口內(nèi)圖片的src值替換成data-original的值,從而顯示圖片,其它的不在可視范圍內(nèi)的依然是被默認(rèn)的圖片所代替。
4、所以,建議大家將默認(rèn)的src的圖片放在一些免費(fèi)CDN服務(wù)器上,或者是其它的主機(jī)空間上,以最大限度地減少圖片對(duì)自身服務(wù)器的請(qǐng)求,同時(shí)最好是個(gè)微小的圖片,例如1x1大小,這樣可以保證默認(rèn)圖片以最短的時(shí)間加載進(jìn)來(lái),將圖片加載時(shí)間降低到最低。
5、通過(guò)上面的設(shè)置,網(wǎng)站上所有的圖片就會(huì)啟用Lazy Load延遲加載技術(shù)了。
如何通過(guò)百度站長(zhǎng)平臺(tái)快速篩選出垃圾外鏈?
百度SEO與谷歌SEO的10大區(qū)別
五種方法教你用谷歌分析做自己的用戶體驗(yàn)研究
網(wǎng)頁(yè)改版實(shí)戰(zhàn)!日本設(shè)計(jì)師如何徹底優(yōu)化招聘網(wǎng)站?
SEO核心概念:什么是內(nèi)容增益
詳解Web服務(wù)器安全攻擊及防護(hù)機(jī)制
網(wǎng)頁(yè)改版實(shí)戰(zhàn):日本設(shè)計(jì)師如何徹底優(yōu)化旅游網(wǎng)站?
百度SEO優(yōu)化排名需要多長(zhǎng)時(shí)間
關(guān)于如何寫好一篇好軟文的思考
新站上線如何解決收錄技巧
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論