seo優化網站首頁代碼的目的是加快網站首頁的打開速度。 加快站點的打開速度有助于提高用戶體驗和便于使用搜索引擎。 因此，網站首頁科




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




作為seo員工，必須知道如何精簡代碼、如何提高網站的開放速度、即使不是技術流程也要知道原理。 其中，seo教程自控網絡總結了一些網站主頁代碼的優化方法和原則，詳情如下。




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




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




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




2 :采用用戶點擊加載技術。




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




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




3 :使用矢量技術處理圖像。




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




可縮放向量圖形基于可擴展的標記語言(標準通用標記語言的子集)，是用于描述二維向量圖形的圖形格式。 這是由網絡聯盟制定的，開放標準。




矢量技術處理圖像有很多優點，包括：




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




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




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




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




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




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




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




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




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




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




另外，seo教程自學網絡警告說，使用css3制作影子等效果難度較高，需要更專業的前端技術人員來實現。




5:javascript簡稱js代碼優化。




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




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




使用css3，可以替換js的部分特效，有幾個優點。




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




css3代碼理解小，容易寫。




6 :用圖標字體代替首頁圖像。




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




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




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




除了“與分辨率無關”的最大優點外，icon fonts還具有以下優點：




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




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




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




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




當然，icon字體也有不足之處




您不能針對不同的分辨率調整icon細節，例如樣式單一，降低大尺寸icon的線寬。




顏色單一，CSS不能簡單地定義顏色的icon，目的是通過組合來達到顏色圖標。




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




少數移動設備可能會與icon fonts的字符代碼沖突，icon可能無法正常顯示(我們自己的風車Android版本遇到了這個問題)。




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




你的網站是扁平化或簡單的風格，圖標風格單一，顏色單色。




你的目標用戶以桌面瀏覽器為主，或者




你希望為不兼容設備制作兼容的hack。




icon fonts是激怒設計師和前端工程師的方案。




icon fonts的制作主要有兩個想法。




用字體工具手工制作




使用在線工具自動生成




7. sprite技術優化首頁圖像的體積。




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




Sprite (向導)一詞在計算機圖形學中有獨特的定義。 游戲和視頻等畫質越來越高，因此需要智能地處理材料和地圖，同時保持畫面流暢的技術。 “Sprite”是將很多圖像合并成一個網格，并將各網格的內容以程序形式配置在畫面上的技術。




Sprite配置在靜止圖像中，用簡單的程序和硬件正確地配置在畫面上。 一張圖像就像被“改變”了，沒有單獨使用內存，因此被命名為“Sprite向導”。




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




加載頁面時，不加載單個圖像，而是一次加載整個組合圖像。 這是一個很好的改進，大大減少了HTTP請求的次數，減輕了服務器的壓力，減少了同時加載圖像所需的時間延遲，使效果更平滑，不停止。




CSS Sprites在很多情況下都可用。 在大型網站上，通過有機地組合許多單獨的圖像，使維護和更新變得容易。 通常，圖像之間留有很大的空白，圖像不會影響網頁的內容。 但是同時CSS Sprite多用于固定的像素定位，其彈性差，受到定位等的制約。 因此，在可維護性vs減輕負荷的期間，必須權衡利弊，選擇最適合你的項目的方法。




在網站圖像的解決方案中，CSS3優先，其次是SVG和icon字體，最后是Bitmap。 常用的Bitmap文件必須打包在另一個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請求的數量。




你有圖像，將其顯示在網頁上的標準方法如下。




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




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







7 ljmraageleqvqiw2P4 dwcmdaxafbvmaheqmygcacehg8elxtbpaaaaelftksuqmcc /




也就是說，通過在HTML文件中內置圖像文件的內容，節約了HTTP請求。




data uri的主要優點是減少http請求數，比css sprite更靈活地調用，具有客戶端資源消耗增加的缺點。




在所有瀏覽器的非緩存模式下，CSS sprite方法比data URI方法快幾百微秒。 但實際上，CSS Sprite發送的連接請求比Data URI方法多。 這包括TCP慢啟動會導致所有相關的連接開銷。




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




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




利用相關技術瘦了網站的首頁代碼、圖像、組件后，需要使用相關的檢查工具測試網站的速度。 通常，網站的打開速度必須小于4秒。




推薦的網站速度檢查工具包括“奇云測測試你的網站速度”，免費提供PIG檢查、get檢查、DNS劫持檢查、網站評分等服務，構建最清潔的網站檢查平臺。




地址： ce.cloud.360.cn/




此外，百度政府也主要推動移動頁面加速MIP相關技術，以應用于移動頁面的開放技術標準，無需使用MIP等待加載，頁面內容以更友好的方式瞬間到達用戶。




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




小明seo評分：




了解如何優化網站的首頁代碼的目的是加快網站的速度。 建議的典型方法是刪除多余的代碼和組件，并使用諸如css3之類的最新技術優化現有代碼。 另一個重要的方面是服務器端的選擇