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




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




首先，直接結(jié)果是web代碼復(fù)雜，網(wǎng)站加載速度慢。 鑒于國內(nèi)互聯(lián)網(wǎng)速度慢的大環(huán)境，存在復(fù)雜的網(wǎng)頁打開慢、加載慢的問題。




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




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




最后，對于網(wǎng)站管理者和seo優(yōu)化者來說，繁瑣的網(wǎng)頁存在維護(hù)困難的問題。




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




啟用GZIP壓縮頁面。




什么是GZIP壓縮？ GZIP最初由Jean-loup Gailly和Mark Adler創(chuàng)建，用于UNIX系統(tǒng)的文件壓縮。 在Linux中，GZIP格式的后綴. gz文件是很常見的。 現(xiàn)在，它是互聯(lián)網(wǎng)上非常常見的數(shù)據(jù)壓縮格式或文件格式。




什么是GZIP壓縮頁？




HTTP協(xié)議上的GZIP編碼是提高WEB應(yīng)用程序性能的技術(shù)。




在大流量網(wǎng)站上，用戶經(jīng)常使用GZIP壓縮技術(shù)感覺更快。




這通常是安裝在WWW服務(wù)器上的功能，當(dāng)有人訪問此服務(wù)器的網(wǎng)站時(shí)，服務(wù)器的這個功能將被壓縮并傳送到訪問過的計(jì)算機(jī)瀏覽器中顯示。 通?？梢詫⒓兾谋緝?nèi)容壓縮到原始大小的40%




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




2 :網(wǎng)頁(前端)支持瀏覽器緩存，達(dá)到速度優(yōu)化效果。




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




瀏覽器緩存在哪里？




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




示例：如何使用瀏覽器緩存優(yōu)化網(wǎng)頁(前端)。




使用瀏覽器緩存優(yōu)化網(wǎng)頁(前端)




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




3 :利用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN )優(yōu)化網(wǎng)站的加載速度。




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




內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN )的概念： CDN是建立在網(wǎng)絡(luò)上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依賴于部署在各地的邊緣服務(wù)器，通過中央平臺的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊




內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN )的原理： CDN的基本原理廣泛采用各種緩存服務(wù)器，將這些緩存服務(wù)器分布在用戶訪問比較集中的地區(qū)和網(wǎng)絡(luò)，用戶訪問網(wǎng)站時(shí)，輝光




內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN )的目的是使用戶能夠在附近獲取所需的內(nèi)容，解決互聯(lián)網(wǎng)擁擠的情況，提高用戶訪問網(wǎng)站的響應(yīng)速度。




內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN )的主體不是站點(diǎn)管理者本身而是空間商。




4 :刪除剩馀代碼。




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




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




站點(diǎn)頁面(前端)優(yōu)化方法和推薦-css樣式




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




6:CSS代碼的優(yōu)化和控制。




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




7 :前端js代碼優(yōu)化。




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




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




計(jì)時(shí)器：如果是針對持續(xù)執(zhí)行的代碼，則必須使用setInterval而不是setTimeout。 因?yàn)閟etTimeout每次都初始化計(jì)時(shí)器，setInterval只在開始時(shí)初始化計(jì)時(shí)器。




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




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




把數(shù)字轉(zhuǎn)換成字符串：一般最好”1把數(shù)字轉(zhuǎn)換成字符串看起來很丑，但實(shí)際上這個效率最高。




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




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




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




使用DocumentFragment優(yōu)化多次append。




使用innerHTML賦值代替構(gòu)建dom元素。




根據(jù)模板元素clone，代替createElement；




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




刪除DOM節(jié)點(diǎn)




使用事件代理程式




重復(fù)使用的調(diào)用結(jié)果預(yù)先保存在局部變量中。




有關(guān)優(yōu)化前端js代碼的其他說明，請?jiān)L問http://www.cn blogs.com/LI yunhua/p/4529086.HTML。 我有詳細(xì)的說明。




注意： seo優(yōu)化人員不需要掌握前端js代碼優(yōu)化的具體代碼。 這是前端負(fù)責(zé)人的工作。




8 :使用tab表的提案




tab表單布局頁是過時(shí)的技術(shù)，現(xiàn)在更有效的是div。 關(guān)于使用tab表，建議盡量不要使用tab表，并禁止在嵌套條件下使用表。




9 :站點(diǎn)圖像seo優(yōu)化。




網(wǎng)站圖像優(yōu)化是加快整個工作站打開和提高加載速度的重要一環(huán)，對網(wǎng)站來說，需要使用正確的圖像尺寸和格式，在不損害畫質(zhì)的情況下壓縮圖像。




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




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




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




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




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




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




小明seo教程評價(jià)：




網(wǎng)站頁面(前端)的優(yōu)化方法和建議既為硬件也為軟件設(shè)計(jì)，與車站內(nèi)外有關(guān)。 車站外側(cè)是內(nèi)容分發(fā)(CDN )、GZIP壓縮頁面等優(yōu)秀的空間商的責(zé)任。 在局內(nèi)側(cè)，seo優(yōu)化者和前端開發(fā)人員需要精簡網(wǎng)頁，優(yōu)化圖像。 總的來說，網(wǎng)站頁面(前端)的優(yōu)化是目前技術(shù)條件下比較容易完成的工作，也是seo優(yōu)化的基礎(chǔ)工作。