seo優(yōu)化網(wǎng)站首頁(yè)代碼的目的是加快網(wǎng)站首頁(yè)的打開速度。 加快站點(diǎn)的打開速度有助于提高用戶體驗(yàn)和便于使用搜索引擎。 因此，網(wǎng)站首頁(yè)科




很多網(wǎng)站增加了很多組件來吸引訪問者的注意，但這樣的組件越多，網(wǎng)站的開放速度就越慢。 另一方面，如果你的網(wǎng)站是圖像站，你必須更合理地優(yōu)化首頁(yè)代碼。 數(shù)據(jù)顯示，代碼變瘦最多可以將頁(yè)面縮小30%。 在這里，seo教程自學(xué)網(wǎng)絡(luò)建議閱讀網(wǎng)站的頁(yè)面速度優(yōu)化原則，引導(dǎo)知識(shí)點(diǎn)。




作為seo員工，必須知道如何精簡(jiǎn)代碼、如何提高網(wǎng)站的開放速度、即使不是技術(shù)流程也要知道原理。 其中，seo教程自控網(wǎng)絡(luò)總結(jié)了一些網(wǎng)站主頁(yè)代碼的優(yōu)化方法和原則，詳情如下。




1 :刪除多馀的社交組件。




https://www.xminseo.com/wp-content/uploads/2017/09/1-46.jpg




這里建議在網(wǎng)站上加入適當(dāng)?shù)纳缃唤M件，但為了提高網(wǎng)站的加載開放速度，必須刪除多余的社交組件。 例如，某個(gè)第三方網(wǎng)站提供的共享按鈕代碼的體積約為1/2M，而且平臺(tái)的共享代碼很小，所以我們可以選擇更小的。 例如，網(wǎng)站有各種組件、布告欄、在線交流工具、共享按鈕等，站長(zhǎng)本來的目的很好，但很多組件在加載頁(yè)面之前進(jìn)行，網(wǎng)站打開。 在這種情況下，優(yōu)化主頁(yè)代碼，選擇體積更小的代碼，刪除更多的組件代碼。




2 :采用用戶點(diǎn)擊加載技術(shù)。




https://www.xminseo.com/wp-content/uploads/2017/09/1-47-e1506672336830.jpg




如果你的網(wǎng)站是視頻網(wǎng)站或圖片網(wǎng)站，你不應(yīng)該一次加載網(wǎng)站的所有內(nèi)容，而是自動(dòng)加載視頻，圖片等內(nèi)容加載API。 這直接降低了整個(gè)局的速度。 提案根據(jù)用戶的需要，自由點(diǎn)擊，用點(diǎn)擊行為提示。 例如，如果首頁(yè)有大量的圖像內(nèi)容，您可以采取滾動(dòng)頁(yè)面，通過用戶的下拉行為加載新頁(yè)面。 這有助于用戶體驗(yàn)，也有助于提高首頁(yè)的打開速度。




3 :使用矢量技術(shù)處理圖像。




https://www.xminseo.com/wp-content/uploads/2017/09/1-48.jpg




可縮放向量圖形基于可擴(kuò)展的標(biāo)記語(yǔ)言(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集)，是用于描述二維向量圖形的圖形格式。 這是由網(wǎng)絡(luò)聯(lián)盟制定的，開放標(biāo)準(zhǔn)。




矢量技術(shù)處理圖像有很多優(yōu)點(diǎn)，包括：




用戶可以在不損害圖像清晰度和細(xì)節(jié)等的情況下任意放大縮小圖像的顯示。




SVG圖像中的文字與圖像獨(dú)立，文字保持可編輯且可檢索的狀態(tài)。 沒有字體限制，用戶系統(tǒng)可以看到與他們創(chuàng)建時(shí)完全相同的畫面，即使沒有安裝其中一種字體。




通常，SVG文件比GIF和JPEG格式的文件小得多，所以下載速度也很快。




可以搜索、索引、腳本化或壓縮SVG圖像。




即，通過搜索引擎識(shí)別利用向量技術(shù)處理的圖像，在相同的情況下，該文件會(huì)變得更小。




這里，推薦的工具是SVG edit，可以將通常格式的文件轉(zhuǎn)換為矢量圖。




4 :巧妙地使用css3代替圖像效果。




https://www.xminseo.com/wp-content/uploads/2017/09/1-49.jpg




隨著css3的發(fā)展，可以生成陰影、圓形框、按鈕、背景等效果，幾乎可以取代傳統(tǒng)的切片技術(shù)。 在這些前提下，可以用css代碼完全替換某些圖像效果。 它的優(yōu)點(diǎn)很明顯。 代碼比圖像小得多，網(wǎng)站首頁(yè)的打開也快。




另一方面，如果使用大量的圖像布局網(wǎng)站，不同的瀏覽器會(huì)形成一些視覺問題，但css3技術(shù)沒有這些問題，完全支持每個(gè)瀏覽器的兼容性問題，而不會(huì)犧牲網(wǎng)站的前端效果。




另外，seo教程自學(xué)網(wǎng)絡(luò)警告說，使用css3制作影子等效果難度較高，需要更專業(yè)的前端技術(shù)人員來實(shí)現(xiàn)。




5:javascript簡(jiǎn)稱js代碼優(yōu)化。




https://www.xminseo.com/wp-content/uploads/2017/09/1-50.jpg




眾所周知，javascript特效的使用是阻礙網(wǎng)站打開速度的重要因素，這一點(diǎn)需要掌握和注意。 前面提到的css3可以代替很多圖像效果，但是如果能代替js的一部分特殊效果的話，效果很強(qiáng)。




使用css3，可以替換js的部分特效，有幾個(gè)優(yōu)點(diǎn)。




在許多情況下，css3代碼的特效可以直接替換js代碼。




css3代碼理解小，容易寫。




6 :用圖標(biāo)字體代替首頁(yè)圖像。




https://www.xminseo.com/wp-content/uploads/2017/09/1-51.jpg




使用字體工具將我們平時(shí)在Web上使用的icons轉(zhuǎn)換為Web fonts后，成為icon fonts，使用CSS的@font-face嵌入網(wǎng)頁(yè)，可以顯示icons。 字體是矢量化的圖形，因此天生具有“不依賴分辨率”的特性，無(wú)論在哪個(gè)分辨率和PPI下，都可以像以往的位圖，例如png、jpeg那樣，在放大后沒有鋸齒和模糊地完全放大縮小。




由于圖標(biāo)字體的靈活性和易用性，圖標(biāo)字體的使用正在擴(kuò)大，所以在不同的UI框架中集成了各種圖標(biāo)字體是很常見的。




除了“與分辨率無(wú)關(guān)”的最大優(yōu)點(diǎn)外，icon fonts還具有以下優(yōu)點(diǎn)：




文件大小：與圖像的幾十幾百KB容量相比，icon fonts是翼級(jí)的輕量級(jí)。




加載性能好：圖標(biāo)打包為一套字體，因此http request減少。 這就像我們常用的css sprites技術(shù)。




CSS樣式支持：與普通字體一樣，可以使用CSS定義大小、顏色、陰影、懸停狀態(tài)、透明度、漸變等。




兼容性好： web fonts起源早，主流瀏覽器當(dāng)然可以很好地支持到IE6/7。 安卓2.1以下的第一代瀏覽器、Opera mini等舊的移動(dòng)終端瀏覽器除外。




當(dāng)然，icon字體也有不足之處




您不能針對(duì)不同的分辨率調(diào)整icon細(xì)節(jié)，例如樣式單一，降低大尺寸icon的線寬。




顏色單一，CSS不能簡(jiǎn)單地定義顏色的icon，目的是通過組合來達(dá)到顏色圖標(biāo)。




移動(dòng)瀏覽器的兼容性還不夠，ICON字體無(wú)法像Opera mini、Windows phone 7.0-7.8那樣正常顯示。




少數(shù)移動(dòng)設(shè)備可能會(huì)與icon fonts的字符代碼沖突，icon可能無(wú)法正常顯示(我們自己的風(fēng)車Android版本遇到了這個(gè)問題)。




icon fonts也不是完美的響應(yīng)性圖像解決方案。 例如，適用于以下應(yīng)用程序場(chǎng)景：




你的網(wǎng)站是扁平化或簡(jiǎn)單的風(fēng)格，圖標(biāo)風(fēng)格單一，顏色單色。




你的目標(biāo)用戶以桌面瀏覽器為主，或者




你希望為不兼容設(shè)備制作兼容的hack。




icon fonts是激怒設(shè)計(jì)師和前端工程師的方案。




icon fonts的制作主要有兩個(gè)想法。




用字體工具手工制作




使用在線工具自動(dòng)生成




7. sprite技術(shù)優(yōu)化首頁(yè)圖像的體積。




https://www.xminseo.com/wp-content/uploads/2017/09/1-52.jpg




Sprite (向?qū)?一詞在計(jì)算機(jī)圖形學(xué)中有獨(dú)特的定義。 游戲和視頻等畫質(zhì)越來越高，因此需要智能地處理材料和地圖，同時(shí)保持畫面流暢的技術(shù)。 “Sprite”是將很多圖像合并成一個(gè)網(wǎng)格，并將各網(wǎng)格的內(nèi)容以程序形式配置在畫面上的技術(shù)。




Sprite配置在靜止圖像中，用簡(jiǎn)單的程序和硬件正確地配置在畫面上。 一張圖像就像被“改變”了，沒有單獨(dú)使用內(nèi)存，因此被命名為“Sprite向?qū)А薄?




時(shí)間推進(jìn)到2000年，網(wǎng)頁(yè)設(shè)計(jì)向精致巧妙的方向發(fā)展。 設(shè)計(jì)師們開始考慮用Javascript以外的方法制作鼠標(biāo)幻燈片和懸停菜單的效果，這時(shí)CSS Sprite基于與上述游戲Sprite相同的原理，使用CSS更容易控制，迅速流行。




加載頁(yè)面時(shí)，不加載單個(gè)圖像，而是一次加載整個(gè)組合圖像。 這是一個(gè)很好的改進(jìn)，大大減少了HTTP請(qǐng)求的次數(shù)，減輕了服務(wù)器的壓力，減少了同時(shí)加載圖像所需的時(shí)間延遲，使效果更平滑，不停止。




CSS Sprites在很多情況下都可用。 在大型網(wǎng)站上，通過有機(jī)地組合許多單獨(dú)的圖像，使維護(hù)和更新變得容易。 通常，圖像之間留有很大的空白，圖像不會(huì)影響網(wǎng)頁(yè)的內(nèi)容。 但是同時(shí)CSS Sprite多用于固定的像素定位，其彈性差，受到定位等的制約。 因此，在可維護(hù)性vs減輕負(fù)荷的期間，必須權(quán)衡利弊，選擇最適合你的項(xiàng)目的方法。




在網(wǎng)站圖像的解決方案中，CSS3優(yōu)先，其次是SVG和icon字體，最后是Bitmap。 常用的Bitmap文件必須打包在另一個(gè)sprite中，以便圖像可以通過CSS訪問，如下所示：




. sprite {。




width: 16px；




height: 16px；




background : URL (“sprite.PNG”) 00no-repeat；









. sprite.help { background-position 3360-16px；




. sprite.info { background-position 3360-32PX；




. sprite.user { background-position 3360-48px；




使用data URIs減少http請(qǐng)求的數(shù)量。




你有圖像，將其顯示在網(wǎng)頁(yè)上的標(biāo)準(zhǔn)方法如下。




https://www.xminseo.com/”http://gbtags.com/images/A.png”/




獲得這份資料的方法被稱為http URI scheme，同樣的效果可以用data URI scheme寫如下。







7 ljmraageleqvqiw2P4 dwcmdaxafbvmaheqmygcacehg8elxtbpaaaaelftksuqmcc /




也就是說，通過在HTML文件中內(nèi)置圖像文件的內(nèi)容，節(jié)約了HTTP請(qǐng)求。




data uri的主要優(yōu)點(diǎn)是減少http請(qǐng)求數(shù)，比css sprite更靈活地調(diào)用，具有客戶端資源消耗增加的缺點(diǎn)。




在所有瀏覽器的非緩存模式下，CSS sprite方法比data URI方法快幾百微秒。 但實(shí)際上，CSS Sprite發(fā)送的連接請(qǐng)求比Data URI方法多。 這包括TCP慢啟動(dòng)會(huì)導(dǎo)致所有相關(guān)的連接開銷。




在緩存條件下，Android 4.2和iOS 6的CSS sprite模式均以約兩倍的速度提高，但在iOS條件下減少了220ms，在Android下減少了70ms (本機(jī)瀏覽器)。 與此相對(duì)，Chrome和Firefox的情況下平衡良好，緩存和非緩存的情況下只有50%到60ms左右的性能差。




這里建議將data URIs用于非常小的資源。 此外，不能在CSS或內(nèi)聯(lián)HTML中多次使用它們。




利用相關(guān)技術(shù)瘦了網(wǎng)站的首頁(yè)代碼、圖像、組件后，需要使用相關(guān)的檢查工具測(cè)試網(wǎng)站的速度。 通常，網(wǎng)站的打開速度必須小于4秒。




推薦的網(wǎng)站速度檢查工具包括“奇云測(cè)測(cè)試你的網(wǎng)站速度”，免費(fèi)提供PIG檢查、get檢查、DNS劫持檢查、網(wǎng)站評(píng)分等服務(wù)，構(gòu)建最清潔的網(wǎng)站檢查平臺(tái)。




地址： ce.cloud.#/




此外，百度政府也主要推動(dòng)移動(dòng)頁(yè)面加速M(fèi)IP相關(guān)技術(shù)，以應(yīng)用于移動(dòng)頁(yè)面的開放技術(shù)標(biāo)準(zhǔn)，無(wú)需使用MIP等待加載，頁(yè)面內(nèi)容以更友好的方式瞬間到達(dá)用戶。




地址： https://www.mipengine.org/




小明seo評(píng)分：




了解如何優(yōu)化網(wǎng)站的首頁(yè)代碼的目的是加快網(wǎng)站的速度。 建議的典型方法是刪除多余的代碼和組件，并使用諸如css3之類的最新技術(shù)優(yōu)化現(xiàn)有代碼。 另一個(gè)重要的方面是服務(wù)器端的選擇