在很多情況下，與web頁面(前端) seo的優化相關的點是頁面的緊湊化。 本教程概述了如何精簡網頁，以及關于縮短網站加載時間和提高網站性能的建議。




從相反的方面考慮，如果網頁雜亂，網頁打開的速度慢，會怎么樣呢？




首先，直接結果是web代碼復雜，網站加載速度慢。 鑒于國內互聯網速度慢的大環境，存在復雜的網頁打開慢、加載慢的問題。




其次，移動用戶的興起導致了許多用戶通過移動用戶(如手機和平板電腦)訪問網站的情況，網站打開速度慢的問題變得更加突出。




另外，站點加載速度的速度和速度直接影響站點對搜索引擎友好的多與少。




最后，對于網站管理者和seo優化者來說，繁瑣的網頁存在維護困難的問題。




其實，優化網站頁面(前端)不是技術難題，減肥頁面也是很容易操作的。 小明seo教程的建議是很容易做到的，很快就會做到的。 網頁(前端)的優化方法和建議如下。




啟用GZIP壓縮頁面。




什么是GZIP壓縮？ GZIP最初由Jean-loup Gailly和Mark Adler創建，用于UNIX系統的文件壓縮。 在Linux中，GZIP格式的后綴. gz文件是很常見的。 現在，它是互聯網上非常常見的數據壓縮格式或文件格式。




什么是GZIP壓縮頁？




HTTP協議上的GZIP編碼是提高WEB應用程序性能的技術。




在大流量網站上，用戶經常使用GZIP壓縮技術感覺更快。




這通常是安裝在WWW服務器上的功能，當有人訪問此服務器的網站時，服務器的這個功能將被壓縮并傳送到訪問過的計算機瀏覽器中顯示。 通常可以將純文本內容壓縮到原始大小的40%




以小明seo教程為例，使用AlibabaCloud (阿里巴巴云)服務，其默認有GZIP壓縮模塊，網站原來的網頁大小為78120，壓縮后的大小為10544，估計的壓縮率。 忽略硬件條件時，網站代碼越少越緊湊，相對打開的速度越快。




2 :網頁(前端)支持瀏覽器緩存，達到速度優化效果。




瀏覽器緩存有什么用？ 瀏覽器緩存為了節約網絡資源加速閱覽，瀏覽器將最近請求的文檔保存在用戶磁盤上，訪問者再次請求此頁面時，瀏覽器可以從本地磁盤上顯示文檔，因此可以加速頁面的閱覽。




瀏覽器緩存在哪里？




文件、內存(session等)、cache (緩存)、cookie、session、viewstate等我們經常使用的東西，可以認為是緩存數據。 實際上，cache與session具有相似的功能，但cache可以為代碼設置到期日期和依賴關系。 如果所謂的依賴關系(例如，微軟的cachedependcysqlcachedependency類)依賴關系更改，則會通知cache過期且無效。 緩存有服務器緩存、客戶端緩存。




示例：如何使用瀏覽器緩存優化網頁(前端)。




使用瀏覽器緩存優化網頁(前端)




對seo優化者來說，不需要掌握瀏覽器緩存代碼的使用方法，但需要知道原理。




3 :利用內容分發網絡(CDN )優化網站的加載速度。




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




內容分發網絡(CDN )的概念： CDN是建立在網絡上的內容分發網絡，依賴于部署在各地的邊緣服務器，通過中央平臺的負載均衡、內容分發、調度等功能模塊




內容分發網絡(CDN )的原理： CDN的基本原理廣泛采用各種緩存服務器，將這些緩存服務器分布在用戶訪問比較集中的地區和網絡，用戶訪問網站時，輝光




內容分發網絡(CDN )的目的是使用戶能夠在附近獲取所需的內容，解決互聯網擁擠的情況，提高用戶訪問網站的響應速度。




內容分發網絡(CDN )的主體不是站點管理者本身而是空間商。




4 :刪除剩馀代碼。




一個網站的網頁通常有很多余地的代碼。 就像首頁使用的js一樣，列表頁不能使用。 如果所有站都使用標頭調用，則不需要相關代碼的頁面也無緣無故地添加很多代碼。 這些代碼的緊湊化有助于前端打開的速度。 也就是說網站內的所有頁面都不需要多余的代碼。




5 :有效利用CSS控制模式。




站點頁面(前端)優化方法和推薦-css樣式




前端代碼是緊湊的站點，css代碼和div是分離的，前端不需要在一些代碼中使用style定義樣式，全部用css控制即可。 例如，即使在一個網頁中使用style定義樣式，使用css定義樣式也會重復代碼，從而降低網站前端的加載速度。




6:CSS代碼的優化和控制。




小明seo教程提供的所有網站頁面(前端)的優化方法和建議最終目的是加快網站的打開速度。 這些方法和建議的落地點是簡化代碼，減肥網站前端。 css代碼的優化點如下： css代碼的排列同屬性提取共同css選擇器把網頁的顏色和背景設定樣式分離(大網站需要注意)條理性化css代碼等。




7 :前端js代碼優化。




與css代碼一樣，前端js代碼的優化方法包括但不限于：




避免全局搜索：在將全局對象存儲為局部變量的函數中，訪問全局變量比訪問全局變量更快，因此可以減少全局搜索。




計時器：如果是針對持續執行的代碼，則必須使用setInterval而不是setTimeout。 因為setTimeout每次都初始化計時器，setInterval只在開始時初始化計時器。




字符串連接：如果連接多個字符串，則為=； 如果是收集字符串，例如多次=操作同一字符串，建議使用一個緩存，使用JavaScript數組收集，最后使用join方法連接。




避免with語句：與函數類似，with語句創建自己的范圍，因此增加要執行的代碼的范圍鏈的長度。 通過搜索其他范圍鏈，在with語句中執行的代碼總是慢于在外部執行的代碼。 如果不使用with語句，請盡量不要使用with語句。




把數字轉換成字符串：一般最好”1把數字轉換成字符串看起來很丑，但實際上這個效率最高。




將浮點轉換為整數：許多人喜歡使用parseInt ()，但實際上parseInt ()用于將字符串轉換為數字，而不是浮點和整數轉換。 Math.floor ()或Math.round ()； 如果要定義toString ()方法并進行類型轉換，最好顯式調用toString ()。 內部操作在嘗試所有可能性后，會嘗試對象的toString ()方法是否可以轉換為String，因此直接調用更有效率。




多種類型聲明： JavaScript可以用單個var語句聲明所有變量。 這是一個分組語句，用于減少整個腳本的執行時間。 和上面的代碼一樣，上面的代碼格式也非常規范，容易看到。




插入迭代子： var name=values； I； 前面兩個句子是var name=values；




使用DocumentFragment優化多次append。




使用innerHTML賦值代替構建dom元素。




根據模板元素clone，代替createElement；




使用firstChild和nextSibling而不是childNodes來遍歷dom元素。




刪除DOM節點




使用事件代理程式




重復使用的調用結果預先保存在局部變量中。




有關優化前端js代碼的其他說明，請訪問http://www.cn blogs.com/LI yunhua/p/4529086.HTML。 我有詳細的說明。




注意： seo優化人員不需要掌握前端js代碼優化的具體代碼。 這是前端負責人的工作。




8 :使用tab表的提案




tab表單布局頁是過時的技術，現在更有效的是div。 關于使用tab表，建議盡量不要使用tab表，并禁止在嵌套條件下使用表。




9 :站點圖像seo優化。




網站圖像優化是加快整個工作站打開和提高加載速度的重要一環，對網站來說，需要使用正確的圖像尺寸和格式，在不損害畫質的情況下壓縮圖像。




首先，使用jpg格式等正確圖像格式的圖像。




其次，使用合理的圖像尺寸。 圖像尺寸越大，對加載速度的影響就越大。 據統計，圖像減少了50%，整個網站的頁面減少了75%。 處理圖像尺寸的基本要求是在滿足用戶需要的基礎上使用合適尺寸的圖像。




再次使用工具壓縮圖像。 圖像變小可以加快網站的打開速度，使用壓縮工具可以減少圖形占用的空間。




10 :刪除多馀的字體和web注釋。




從字體方面分析，如果字體使用過度，則網站加載速度會變慢，不利于提高網站前端的打開速度。




根據網頁注釋分析，網頁注釋有利于前端開發者網站的維護，但另一方面，這些注釋對搜索引擎不起作用，是多余的“噪音”。




小明seo教程評價：




網站頁面(前端)的優化方法和建議既為硬件也為軟件設計，與車站內外有關。 車站外側是內容分發(CDN )、GZIP壓縮頁面等優秀的空間商的責任。 在局內側，seo優化者和前端開發人員需要精簡網頁，優化圖像。 總的來說，網站頁面(前端)的優化是目前技術條件下比較容易完成的工作，也是seo優化的基礎工作。