免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何優(yōu)化網(wǎng)站的多圖片文章

2020-09-08    分類: 網(wǎng)站建設(shè)

關(guān)于如何將網(wǎng)站圖片優(yōu)化到極致的問題已經(jīng)詳細(xì)的介紹過(guò),包括做圖片懶加載優(yōu)化,也討論過(guò)當(dāng)網(wǎng)站SEO優(yōu)化與用戶體驗(yàn)發(fā)生沖突時(shí)該如何選擇的問題,所以今天就以我的seo學(xué)堂網(wǎng)的實(shí)戰(zhàn)優(yōu)化經(jīng)歷來(lái)簡(jiǎn)單的分享,利用懶加載與圖片壓縮及自動(dòng)裁剪提升網(wǎng)站加載速度和性能優(yōu)化。

需求分析

首先來(lái)談?wù)劄槭裁磗eo學(xué)堂網(wǎng)為什么迫切的需要將網(wǎng)站的圖片優(yōu)化做到極致,這個(gè)就不得不從seo學(xué)堂網(wǎng)的定位和內(nèi)容方向來(lái)思考,seo學(xué)堂網(wǎng)目前專注于探索科技生活方式,致力于做電子產(chǎn)品或科技數(shù)碼類的酷品分享及測(cè)評(píng)體驗(yàn),其中文章中就無(wú)法避免出現(xiàn)較多的圖片內(nèi)容,了解一個(gè)產(chǎn)品最直觀的就是圖文方式,所以在很多的文章創(chuàng)作中我們都會(huì)在文章中適配大量的圖片內(nèi)容,有的是直接插入,有的就會(huì)使用相冊(cè)圖集功能進(jìn)行插入,提升并達(dá)到文章的優(yōu)質(zhì)閱讀體驗(yàn)和效果展示。

目前seo學(xué)堂網(wǎng)雖然使用的是云服務(wù)器,但是為了降低服務(wù)器成本支出,其配置為2G、1核、2M,屬于入門型配置,但是服務(wù)器放置了seo學(xué)堂旗下的所有網(wǎng)站,包括seo學(xué)堂博客,所以一天下來(lái)整個(gè)服務(wù)器都還是非常緊張的,其中最重要的是因?yàn)閟eo學(xué)堂網(wǎng)擁有大量的圖片直接放置在服務(wù)器,并未使用像七牛云、又拍云這類的第三方服務(wù),雖然這兩個(gè)都提供一些免費(fèi)的流量,但是對(duì)于我們seo學(xué)堂網(wǎng)來(lái)說(shuō)可能就夠用一兩天吧,而目前seo學(xué)堂網(wǎng)的盈利模式并不明顯,所以不可能在服務(wù)器上做過(guò)大的投資,所以最后選擇在服務(wù)器和網(wǎng)站上做深度的優(yōu)化,依舊可以讓網(wǎng)站非常流暢的運(yùn)營(yíng)。

圖片優(yōu)化方案

針對(duì)于網(wǎng)站整體的圖片優(yōu)化,必要的圖片出現(xiàn)就是LOGO圖片、首頁(yè)大圖、文章縮略圖、編輯作者頭像圖片,整個(gè)頁(yè)面上下左右基本都會(huì)有圖片的顯示位置,其中最多的就是文章的縮略圖展現(xiàn),有利于視覺沖擊和吸引點(diǎn)擊,下面就詳細(xì)的來(lái)分析一下seo學(xué)堂網(wǎng)的圖片優(yōu)化方案和步驟。

圖片本身的優(yōu)化處理

seo學(xué)堂網(wǎng)的各個(gè)頁(yè)面中都會(huì)大量的出現(xiàn)文章縮略圖,所以這些圖片并不能直接調(diào)用原圖片使用,所以這些縮略圖都是經(jīng)過(guò)合適大小的裁剪、質(zhì)量壓縮后再進(jìn)行網(wǎng)站中的實(shí)際使用,不然直接引用原圖可能一張圖片就是幾百字節(jié)或者一兩兆的大小,并且圖片也會(huì)被css控制變形,不僅僅占用網(wǎng)絡(luò)帶寬還影響用戶體驗(yàn)和整體網(wǎng)站效果。由于seo學(xué)堂網(wǎng)對(duì)圖片的處理用了一些特色的方式方法,所以并不是很方便透露。


不過(guò)大家對(duì)于圖片的優(yōu)化和處理可以通過(guò)服務(wù)器安裝圖片處理組件實(shí)現(xiàn),同樣也可以使用像七牛、又拍等第三方服務(wù),甚至可以用一些開源的第三方庫(kù),如WordPress開發(fā)者喜歡使用的timthumb.php來(lái)做圖片的縮略圖處理。

圖片懶加載優(yōu)化處理

seo學(xué)堂網(wǎng)的首頁(yè)就個(gè)人審美來(lái)看,算是非常不錯(cuò)的布局和結(jié)構(gòu)化展現(xiàn)了,并沒有想傳統(tǒng)的門戶布局,把內(nèi)容堆得過(guò)于繁多,因?yàn)閟eo學(xué)堂網(wǎng)目前的更新力度并不是非常大,所以整體的頁(yè)面設(shè)計(jì)偏向于博客或者自媒體風(fēng)格,這樣的目的就是為了便于用戶能夠最直觀的看到最新更新已經(jīng)我們置頂推薦的四篇文章。

所以首頁(yè)頂部的圖片主要是有這四張置頂文章的縮略圖,在之前“網(wǎng)站該如何做好首屏的打開加載速度優(yōu)化?”的文章中就說(shuō)到過(guò)關(guān)于網(wǎng)站首屏的優(yōu)化,所以為了保證網(wǎng)站首屏的加載效果和速度,所以頂部的LOGO和這四篇推薦文章并沒有做懶加載。

其中圖片優(yōu)化的重點(diǎn)就是具體的左側(cè)文章列表和側(cè)邊欄的文章縮略圖,所有的都做了圖片的懶加載。以此來(lái)達(dá)到網(wǎng)站打開時(shí)將服務(wù)器帶寬都給予了首屏頁(yè)面的載入,減少了服務(wù)器帶寬資源的浪費(fèi)。

由于seo學(xué)堂網(wǎng)的分類頁(yè)面和標(biāo)簽頁(yè)面主要內(nèi)容都與首頁(yè)文章列表一致,所以就不用過(guò)多的介紹,同樣做得是懶加載,就沒有其它什么好說(shuō)的了,下面必須針對(duì)文章內(nèi)多圖片優(yōu)化詳細(xì)的分析一下。

文章內(nèi)容多圖片優(yōu)化方案

終于說(shuō)到今天的重中之重了,前面的內(nèi)容其實(shí)都算是為了本文的完整性而簡(jiǎn)單寫的,而且大多數(shù)網(wǎng)站對(duì)于上面說(shuō)得也都能非常容易的做到,而對(duì)于文章內(nèi)的多圖片或者有大量圖片的優(yōu)化卻做得不是非常到位,來(lái)看看是怎樣的一個(gè)優(yōu)化思路吧!

作為一個(gè)專業(yè)的SEOer,我們要做圖片的優(yōu)化,自然離不開對(duì)搜索引擎方面的研究,看過(guò)前面寫的“解析網(wǎng)站該如何做好搜索引擎結(jié)果縮略圖優(yōu)化”文章就應(yīng)該知道,搜索引擎是會(huì)自動(dòng)抓取文章中的圖片來(lái)適配搜索結(jié)果頁(yè)面的縮略圖,所以對(duì)于文章中的圖片優(yōu)化就不能全部做懶加載。

通過(guò)對(duì)搜索引擎的觀察不難發(fā)現(xiàn),普通文章的搜索展現(xiàn)結(jié)果有三種可能,一種是有縮略圖,一種是單張縮略圖,還有一種就是四張縮略圖或者三張縮略圖的顯示結(jié)果,單張縮略圖搜索結(jié)果為最常見的,多張圖片展示的搜索結(jié)果在三大搜索引擎中都比較少。


所以為了保證搜索引擎蜘蛛抓取到足夠的圖片,我們將seo學(xué)堂網(wǎng)的第5張圖片開始做的懶加載,減少了某些文章一次性載入過(guò)多的圖片導(dǎo)致頁(yè)面很難加載完成的問題,也不影響搜索引擎的正常抓取。

另外還有一點(diǎn)的是,文章中的圖片還可以做一個(gè)優(yōu)化,雖然恨得文章內(nèi)容圖片都做了自適應(yīng),但是不排除有些圖片確實(shí)過(guò)大,為了防止文章中插入一些像素過(guò)大的圖片流量費(fèi)帶寬和網(wǎng)絡(luò),所以還可以判斷圖片寬度超過(guò)多少像素后自動(dòng)裁剪,盡可能的做到了圖片方面的深度優(yōu)化和網(wǎng)站的整體打開速度。

總結(jié):

以上便是對(duì)seo學(xué)堂網(wǎng)多圖片深度優(yōu)化的一些解決方案,希望能夠幫助到那些可能和的網(wǎng)站有一樣境遇的朋友,同樣可以在低配服務(wù)器上游刃有余的跑一個(gè)多圖片的站點(diǎn),真正的極致就是在不浪費(fèi)資源的情況下依舊可以做得很好,至少覺得通過(guò)一番優(yōu)化后,網(wǎng)站的整體速度已經(jīng)非常的棒了,這就是我心中的極致追求。

本文標(biāo)題:如何優(yōu)化網(wǎng)站的多圖片文章
文章網(wǎng)址:http://m.newbst.com/news44/86094.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、服務(wù)器托管靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)