整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
果你有長(zhǎng)期看我的部落格文章，應(yīng)該會(huì)知道我強(qiáng)調(diào)很多次，Google非常的重視用戶(hù)體驗(yàn)，只以用戶(hù)為最優(yōu)先考量、重視用戶(hù)體驗(yàn)的網(wǎng)站主，才能夠真的理解SEO該怎么做，而『網(wǎng)站速度』自然在網(wǎng)站優(yōu)化上是一個(gè)很重要的項(xiàng)目，對(duì)于SEO以及網(wǎng)站的體驗(yàn)都有很大的影響。尤其自從Google發(fā)布了網(wǎng)頁(yè)體驗(yàn)訊號(hào)（Page Experience）之后，網(wǎng)站速度顯然只會(huì)越來(lái)越重要，我想我應(yīng)該要特別更新一下速度優(yōu)化的文章，來(lái)提供更多的觀點(diǎn)以及分享。
這篇文章我會(huì)完整分享『網(wǎng)站速度』對(duì)于網(wǎng)站的影響，以及你該怎么做。
通常我在承接顧問(wèn)專(zhuān)案時(shí)，『網(wǎng)站速度』會(huì)是我們?cè)u(píng)估『網(wǎng)站健康程度』的重要指標(biāo)之一，因?yàn)樗俣仁且粋€(gè)非常綜觀的指標(biāo)，他影響的層面非常多，我們也先來(lái)初步了解一下，究竟對(duì)于『網(wǎng)站速度優(yōu)化』這件事過(guò)于怠慢的話，影響層面有哪些：
Google在2010年時(shí)就發(fā)過(guò)官方聲明，網(wǎng)站的速度、效能將正式影響搜尋排名，Google在評(píng)估一個(gè)網(wǎng)站是否值得得到好的排序時(shí)，網(wǎng)站速度已被列入為排名因素。
不過(guò)Google的所謂的『排名訊號(hào)』是有分強(qiáng)度的，每一個(gè)優(yōu)化項(xiàng)目的『排名訊號(hào)』強(qiáng)度都不同，簡(jiǎn)單來(lái)說(shuō)，Google在判斷你的網(wǎng)站是否值得被排序到搜尋結(jié)果頁(yè)的前面時(shí)，有著非常復(fù)雜的演算法并且參考了非常多的訊號(hào)，這些訊號(hào)有強(qiáng)弱之分，若我們針對(duì)訊號(hào)強(qiáng)度較高的項(xiàng)目進(jìn)行優(yōu)化的話，你在SEO的成效上會(huì)較容易看到成效，反之若是訊號(hào)強(qiáng)度較弱的排名訊號(hào)，則是優(yōu)化了也未必會(huì)看到成效。
舉例來(lái)說(shuō)，網(wǎng)站整體的內(nèi)容是否夠豐富、夠優(yōu)質(zhì)就是屬于高強(qiáng)度訊號(hào)。你網(wǎng)頁(yè)的網(wǎng)址里面有沒(méi)有提到關(guān)鍵字，就是屬于極度低強(qiáng)度的訊號(hào)，通常網(wǎng)址里面沒(méi)有塞關(guān)鍵字，也能得到好的排序。
那么我們這篇文章正在談的『網(wǎng)站速度』是屬于多高強(qiáng)度的排名訊號(hào)呢？如果我們優(yōu)化了網(wǎng)站速度，對(duì)于SEO的成效有多大的影響呢？
答案是：『網(wǎng)站速度』屬于中至高強(qiáng)度的訊號(hào)，而且訊號(hào)強(qiáng)度只會(huì)被設(shè)定得越來(lái)越強(qiáng)。
多年前，Google剛開(kāi)始宣布『網(wǎng)站速度』會(huì)影響排名的年代，當(dāng)時(shí)在很多專(zhuān)案上，我們優(yōu)化網(wǎng)站速度后，都未必會(huì)觀察到網(wǎng)站的排名、SEO表現(xiàn)、SEO流量會(huì)提升，還是要依靠反向連結(jié)、內(nèi)容、On-Page的調(diào)整，才會(huì)看到顯著的成效。但這兩年在優(yōu)化的實(shí)務(wù)經(jīng)驗(yàn)以及數(shù)據(jù)觀察之下，我開(kāi)始發(fā)現(xiàn)『網(wǎng)站速度』的訊號(hào)強(qiáng)度越來(lái)越高，優(yōu)化后的效果大多都很顯著，同時(shí)，Google在2018年時(shí)有公開(kāi)聲明『網(wǎng)站速度』的訊號(hào)強(qiáng)度會(huì)提高到影響手機(jī)排名，2020年時(shí)又宣布了Page Experience（網(wǎng)頁(yè)體驗(yàn)訊號(hào)）這個(gè)與網(wǎng)站速度有關(guān)聯(lián)性的排名訊號(hào)，我只能說(shuō)，結(jié)論很顯而易見(jiàn)：
這兩年Google越來(lái)越重視『網(wǎng)站速度』，他對(duì)SEO的影響是逐年在提升，明年、后年、大后年也肯定會(huì)越來(lái)越重要，是現(xiàn)在做SEO一定會(huì)優(yōu)化的超級(jí)重要項(xiàng)目之一。
先前我有寫(xiě)一篇文章談?wù)撨^(guò)，Google有所謂的爬取額度（Crawl Budget），如果你的網(wǎng)站速度太慢，會(huì)影響爬蟲(chóng)來(lái)爬你網(wǎng)頁(yè)的健康程度，如果速度慢到爬蟲(chóng)爬不動(dòng)你的網(wǎng)頁(yè)、或爬起來(lái)的效率很差，那整體SEO的成效也會(huì)不好。
從『排名訊號(hào)』的角度以及從SEO技術(shù)優(yōu)化的『爬取』角度來(lái)看，網(wǎng)站速度都是至關(guān)重要的。
根據(jù)Google的研究報(bào)告指出，網(wǎng)站速度對(duì)于跳出率的影響是非常顯著的，你的網(wǎng)站載入速度若是1~3秒以?xún)?nèi)，客戶(hù)跳出網(wǎng)站的可能性會(huì)增加32%，但只要慢到5秒，客戶(hù)跳出網(wǎng)頁(yè)的可能性就會(huì)增加到90%（其實(shí)這是非常驚人的數(shù)據(jù)），客戶(hù)跳出率高，那么當(dāng)然就會(huì)影響你的轉(zhuǎn)換率、訂單成交率等各項(xiàng)商業(yè)表現(xiàn)數(shù)據(jù)。
網(wǎng)站速度的優(yōu)化影響的層面很多，從跳出率、使用者體驗(yàn)、影響爬蟲(chóng)的爬取效能、甚至影響SEO的排名。因此網(wǎng)站速度優(yōu)化，是一個(gè)對(duì)整體網(wǎng)站都非常有幫助的優(yōu)化工作。
在優(yōu)化時(shí)我們不能用公司、家里的電腦來(lái)＂體感＂網(wǎng)站的速度有多快，我們的用戶(hù)可能位于網(wǎng)路環(huán)境較差的地方、或是他的手機(jī)正連上某個(gè)速度較差的wifi 網(wǎng)路。同時(shí)，＂你感覺(jué)網(wǎng)站速度很快＂并不代表Google認(rèn)同你的網(wǎng)站速度很快，若今天我們是要為了SEO而優(yōu)化網(wǎng)站速度，最終目的還是＂Google是否評(píng)斷你的網(wǎng)站速度良好＂，因此不論是為了用戶(hù)還是為了SEO而去優(yōu)化速度，我建議還是避免用自己體感的方式來(lái)判斷網(wǎng)站速度是否良好，而是應(yīng)該要使用一些網(wǎng)站速度分析工具來(lái)做分析以及檢測(cè)：
Google Page Speed Insight是Google官方所開(kāi)發(fā)的工具，如果你希望了解＂Google如何看待你網(wǎng)站的速度＂，用Google的工具就可以達(dá)到目的，Google開(kāi)發(fā)的這套Page Speed Insight算是操作起來(lái)比較容易上手，介面也不會(huì)太復(fù)雜的工具之一，故一開(kāi)始做速度優(yōu)化時(shí)，我都推薦先以Google的工具為主。
使用上只要點(diǎn)開(kāi)Google Page Speed Insight的工具，在工具上方輸入網(wǎng)址，工具就會(huì)給予你的網(wǎng)站一個(gè)1~100的分?jǐn)?shù)，除了分?jǐn)?shù)之外，你可以在下圖底部的地方看到First Input Delay（ FID）、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）等三個(gè)指標(biāo)，這三個(gè)指標(biāo)是Page Experience（網(wǎng)頁(yè)體驗(yàn)訊號(hào)）的三大重要指標(biāo)（若還不知道FID、LCP、CLS這些指標(biāo)是什么的話，建議你先閱讀網(wǎng)頁(yè)體驗(yàn)訊號(hào)這篇文章，再回頭來(lái)閱讀網(wǎng)站速度優(yōu)化的文章），這三個(gè)指標(biāo)也是你1~ 100分能得到多少分?jǐn)?shù)的重要依據(jù)（也請(qǐng)?zhí)貏e注意，行動(dòng)版的網(wǎng)站速度表現(xiàn)以及電腦版的網(wǎng)站速度表現(xiàn)是分開(kāi)的，有可能你的電腦版網(wǎng)頁(yè)速度很快，但手機(jī)版卻有許多優(yōu)化空間）。
值得一提的是，Google Page Speed Insigt這套工具有一個(gè)其他工具無(wú)法取代的地方，那就是＂Chrome用戶(hù)體驗(yàn)報(bào)告＂，F(xiàn)ID、LCP、CLS等指標(biāo)都有一個(gè)綠橙紅所構(gòu)成的長(zhǎng)條圖，這個(gè)長(zhǎng)條圖所顯示的是真實(shí)的、真正有造訪過(guò)你網(wǎng)頁(yè)的使用者們所產(chǎn)生的資料，以下圖來(lái)說(shuō)，有62%的使用者在LCP上體驗(yàn)良好、24%有待改善、15 %為不良。
再把檢測(cè)報(bào)告往下卷動(dòng)，我們會(huì)看到許多的速度優(yōu)化項(xiàng)目，這邊是Google的工具提出的速度優(yōu)化建議，直接建議你該如何進(jìn)行優(yōu)化（這些項(xiàng)目我們會(huì)在文章的后段來(lái)進(jìn)行說(shuō)明），實(shí)務(wù)上我們會(huì)根據(jù)報(bào)告檢測(cè)出來(lái)的問(wèn)題，與網(wǎng)站的PM、網(wǎng)頁(yè)技術(shù)人員來(lái)討論該如何改善這些項(xiàng)目。
WebPageTest雖然不是Google所開(kāi)發(fā)的工具，但仍是Google官方推薦的可用工具之一，打開(kāi)工具后，同樣只要輸入網(wǎng)址就可以開(kāi)始做測(cè)試，WebPageTest比較不同的是，你可以選擇速度測(cè)試的國(guó)家以及瀏覽器，如果你是國(guó)際品牌，網(wǎng)站的目標(biāo)族群來(lái)自于各種不同的國(guó)家地區(qū)，則可以用此工具來(lái)檢測(cè)不同的地區(qū)造訪你網(wǎng)站時(shí)的速度表現(xiàn)。
當(dāng)WebPageTest 幫你跑出報(bào)告之后，你可以點(diǎn)開(kāi)＂Detail報(bào)表＂ 就會(huì)看到下圖的瀑布流資料報(bào)表，我們可以從這個(gè)報(bào)表中找出最耗費(fèi)你網(wǎng)頁(yè)資源的檔案是哪些，行銷(xiāo)人（非技術(shù)人員）可以從報(bào)告中的副檔名辨識(shí)出拖累網(wǎng)站效能的是圖片還是程式檔案，jpg/png是圖片的檔案格式，js/css則是程式檔案，若是特定程式檔案花費(fèi)太多效能的話可以找技術(shù)人員討論該如何優(yōu)化，若是圖片檔案拖累效能的話，則可以將圖片透過(guò)Photoshop進(jìn)行壓縮或圖片壓縮工具，調(diào)整圖片后再重新上傳圖片。
大多的時(shí)候我們其實(shí)都可以用Google的Page Speed Insight來(lái)解決問(wèn)題。若感受到網(wǎng)站速度很慢，但透過(guò)Page Speed Insight來(lái)檢測(cè)卻檢測(cè)不出問(wèn)題時(shí)，就可以改用WebPageTest來(lái)交叉分析，找出是網(wǎng)頁(yè)上的那些檔案在拖累網(wǎng)站的速度。
實(shí)務(wù)上我們要優(yōu)化的網(wǎng)頁(yè)很多，因此會(huì)把每一個(gè)網(wǎng)頁(yè)的版型都用速度檢測(cè)工具來(lái)檢測(cè)一遍并進(jìn)行優(yōu)化（比方說(shuō)：以電商網(wǎng)站來(lái)說(shuō)至少會(huì)有三個(gè)重要版型，包括『首頁(yè)』、『商品列表頁(yè)』、『商品詳細(xì)頁(yè)』），但實(shí)務(wù)上如果你的網(wǎng)頁(yè)數(shù)量太多，不知道該從哪些網(wǎng)頁(yè)開(kāi)始優(yōu)化，你可以打開(kāi)Goog?le Analytics的『網(wǎng)頁(yè)操作時(shí)間』報(bào)表，這張報(bào)表會(huì)呈現(xiàn)出哪些網(wǎng)頁(yè)速度最慢，你可以先找出最多使用者瀏覽、但網(wǎng)站速度較慢的網(wǎng)頁(yè)，優(yōu)先對(duì)這些網(wǎng)頁(yè)進(jìn)行優(yōu)化。
上面我們看完了工具，現(xiàn)在來(lái)談，那么工具跑出數(shù)據(jù)之后，要怎么著手優(yōu)化網(wǎng)站速度呢？網(wǎng)站速度優(yōu)化的項(xiàng)目與要顧的事情非常多，在你開(kāi)始優(yōu)化之前，我希望你先注意幾件事情：
#1有技術(shù)人員協(xié)助：網(wǎng)站速度有很多優(yōu)化項(xiàng)目都是需要技術(shù)人員協(xié)助的，請(qǐng)先確保你身旁邊有愿意陪你討論、規(guī)劃、執(zhí)行的技術(shù)人員提供協(xié)助。
以我來(lái)說(shuō)，我的本質(zhì)以及專(zhuān)長(zhǎng)仍然是在『行銷(xiāo)人』，通常在速度優(yōu)化上還是要依賴(lài)網(wǎng)頁(yè)技術(shù)人員的協(xié)助以及支援，這都是很正常的。
#2如果你是使用架站平臺(tái)：如果你是使用電商平臺(tái)，那你很可能沒(méi)辦法優(yōu)化網(wǎng)站速度，若你感到網(wǎng)站速度太慢且已經(jīng)影響了SEO、轉(zhuǎn)換率、跳出率等多項(xiàng)商業(yè)表現(xiàn)，最直接的解決方案還是跟平臺(tái)的廠商聯(lián)系并請(qǐng)他們協(xié)助，但若廠商沒(méi)辦法協(xié)助，那很遺憾，若希望速度更好，可能要考慮更換一個(gè)平臺(tái)。
#3如果你是使用架站系統(tǒng)：如果你是使用開(kāi)源架站系統(tǒng)（像是Wordpress），那么你如何使用架站系統(tǒng)很可能會(huì)影響你的網(wǎng)站速度（像是你使用的主題、插件、功能…等），在優(yōu)化時(shí)最好有很熟悉系統(tǒng)的人從旁協(xié)助。如果是像WordPress這種很流行的系統(tǒng)，網(wǎng)路上的文章跟資源也很多，也可以一邊爬文一邊自己優(yōu)化。
那么，我們?cè)賮?lái)就要開(kāi)始介紹速度優(yōu)化上常見(jiàn)的優(yōu)化項(xiàng)目，以下條列出來(lái)的項(xiàng)目我以本文提到的Google Page Speed Insight 這個(gè)檢測(cè)工具會(huì)條列出來(lái)的優(yōu)化項(xiàng)目為主，這些也是Google官方建議我們優(yōu)化的項(xiàng)目，至于你是否需要優(yōu)化這些項(xiàng)目，跑一次Google Page Speed的速度檢測(cè)工具，工具就會(huì)條列出來(lái)：
圖片的大小太大、解析度太高、品質(zhì)太高是我們?cè)谒俣葍?yōu)化上最為普遍的項(xiàng)目，很多人在上傳圖片（不論是商品圖片還是文章圖片）時(shí)都沒(méi)有特別壓縮的習(xí)慣，事實(shí)上就算你上傳的圖片解析度為4,000 x 4,000 還是800 x 800，你的使用者實(shí)際看到的圖很可能根本是沒(méi)有太多差別的，但4,000 x 4,000 與800 x 800的圖片容量大小可能可以差到數(shù)倍以上。
通常我會(huì)建議你找到一個(gè)＂解析度不會(huì)失真的最低限度＂為多少，并以此為標(biāo)準(zhǔn)即可，以我的文章來(lái)說(shuō)，我也是從400 x 400、 500 x 500、 600 x 600來(lái)逐一嘗試，最后我選擇圖片盡可能最大不要超過(guò)600，寬度600在我的網(wǎng)頁(yè)上是清晰且容量不會(huì)太大的大小。你可以透過(guò)Photoshop調(diào)整圖片的品質(zhì)、解析度、大小，也可以使用Google官方的免費(fèi)圖片壓縮工具『Squoosh』來(lái)壓縮自己的圖片。
上述的情況是＂如果你的網(wǎng)頁(yè)是你可以自己上傳圖片＂的前提，你可以用Photoshop或是用壓縮工具先將圖片壓縮到一定尺寸大小再上傳。但如果你是電商網(wǎng)站可能就會(huì)遇到下圖的情況，很多電商網(wǎng)站的商品列表頁(yè)（下圖左側(cè)）以及商品詳細(xì)頁(yè)（下圖右側(cè)）是使用同樣一張商品詳細(xì)頁(yè)的圖片，使用者看起來(lái)大小不同，是因?yàn)榫W(wǎng)頁(yè)上的CSS將圖片在網(wǎng)頁(yè)上進(jìn)行大小的縮放調(diào)整（下圖僅是示意圖，ebay其實(shí)是有做好圖片的壓縮，如果想看一下壓縮后的樣子也可參考ebay的商品列表頁(yè)）。
舉例來(lái)說(shuō)，以網(wǎng)頁(yè)介面來(lái)說(shuō)，你的商品列表頁(yè)的圖片區(qū)塊為400 x 400 解析度的小圖，而商品詳細(xì)頁(yè)的圖片為了讓消費(fèi)者可以看得清楚，是使用較大張的800 x 800。
你的商品列表頁(yè)在網(wǎng)頁(yè)介面上其實(shí)只要400 x 400尺寸的圖片即可，這時(shí)如果你將商品列表頁(yè)的圖片壓縮到400 x 400，檔案容量可以控制到一定的大小以?xún)?nèi)，但很多網(wǎng)頁(yè)在運(yùn)作上是＂商品列表頁(yè)的圖是直接抓取商品詳細(xì)頁(yè)的圖＂，就會(huì)導(dǎo)致商品列表頁(yè)的載入了解析度較高、容量較大的圖片，尤其商品列表頁(yè)通常會(huì)有大量的圖片，如果每一張圖的大小都是載入太大解析度的圖，這會(huì)讓整體速度表現(xiàn)很差。
如何確定你的網(wǎng)頁(yè)是否有這樣的情況呢？你可以透過(guò)我的文章中介紹到的分析工具來(lái)檢測(cè)，或是透過(guò)下圖的方式，在你的商品列表頁(yè)的圖片上按右鍵來(lái)開(kāi)啟圖片，看圖片是否太大張。
這個(gè)問(wèn)題的最佳解決方案，其實(shí)是透過(guò)圖片壓縮套件來(lái)解決，當(dāng)我們把圖片上傳時(shí)，我們網(wǎng)站會(huì)在后臺(tái)壓縮好幾張不同尺寸大小的圖片，根據(jù)網(wǎng)站的需求來(lái)使用，舉例來(lái)說(shuō)，網(wǎng)站側(cè)欄的板位較小，只需要200 x 200、商品列表頁(yè)只需要400 x 400，就讓壓縮程式來(lái)壓縮出不同尺寸的圖片。不論是Wordpress還是自家網(wǎng)站都有類(lèi)似的套件可以使用，但網(wǎng)站若要安裝此類(lèi)的套件，同樣也是需要技術(shù)人員提供協(xié)助才能做。
JavaScript以及CSS都是網(wǎng)頁(yè)上的程式檔案，如果Google Page Speed Insight針對(duì)你的網(wǎng)站拋出這項(xiàng)建議，代表工具偵測(cè)你的網(wǎng)頁(yè)上有些程式檔案是沒(méi)有使用到的，這些程式檔案等于既沒(méi)有在使用、但使用者的瀏覽器卻需要去載入這些程式檔，理所當(dāng)然的網(wǎng)站速度就會(huì)被拖累。若看到這個(gè)項(xiàng)目還請(qǐng)跟技術(shù)人員確認(rèn)一下，是否這些確實(shí)是用不到且可以移除掉的程式檔案。
這個(gè)項(xiàng)目是屬于需要技術(shù)人員協(xié)助做修正/檢查的項(xiàng)目。
這同樣是需要技術(shù)人員提供協(xié)助的優(yōu)化項(xiàng)目，白話一點(diǎn)來(lái)說(shuō)，就是網(wǎng)頁(yè)上有JavaScript/CSS 干擾到了首次畫(huà)面的繪制，實(shí)務(wù)上我們會(huì)建議延遲較不重要的JavaScript/CSS的執(zhí)行時(shí)間。
『排除禁止轉(zhuǎn)譯的資源』以及『移除未使用的JavaScript / 移除未使用的CSS』都算是對(duì)程式檔案的清整以及大掃除。
這是Google官方推薦的優(yōu)化項(xiàng)目之一，透過(guò)gzip壓縮技術(shù)我們可以有效的壓縮網(wǎng)站上的檔案大小（包括HTML、CSS、JavaScript），進(jìn)而優(yōu)化網(wǎng)站速度，也同樣需要技術(shù)人員提供協(xié)助來(lái)幫你安裝gzip。
如果你的速度檢測(cè)報(bào)告顯示出這個(gè)項(xiàng)目Reduce initial server response time，代表你的主機(jī)回應(yīng)時(shí)間太慢，這時(shí)會(huì)需要重新清整主機(jī)的環(huán)境、或升級(jí)主機(jī)的環(huán)境/硬體。
Next-gen 其實(shí)指的是新世代（Next Generation）的意思，過(guò)去我們使用的圖片格式大多為JPG以及PNG 居多，但Google現(xiàn)在特別提倡使用新世代的JPEG 2000、JPEG XR 、WebP這些圖片格式，因?yàn)檫@些格式的圖片檔案容量更小、圖片失真不嚴(yán)重、對(duì)于整體速度體驗(yàn)更好。但由于目前并不是所有的瀏覽器都支援這些格式，所以這些格式還尚未普及，目前Google也還沒(méi)有強(qiáng)制要大家采用這樣的格式，僅是在一個(gè)推廣的階段。
以我的網(wǎng)站來(lái)說(shuō)，我是使用WebP的圖片格式，并且透過(guò)判斷式來(lái)進(jìn)行優(yōu)化（當(dāng)使用者的瀏覽器支援時(shí)，網(wǎng)站就會(huì)提供WebP圖片，若遇到使用者的瀏覽器不支援WebP時(shí)，我的網(wǎng)站就會(huì)改為提供PNG圖片），由于大多版本的Chrome還是支援WebP的，所以我最近決定采用了這個(gè)圖片格式，在更換到WebP之后，平均我的每一張圖片的大小縮小了60~70%左右。
Google判斷網(wǎng)站排名的訊號(hào)有很多，即便我們把Google Page Speed 做到90分、確保網(wǎng)站速度的優(yōu)化工作很確實(shí)，但畢竟網(wǎng)站速度只是搜尋引擎演算法中的其中一環(huán)，雖然他的訊號(hào)強(qiáng)度偏高，但也不要期待只做好網(wǎng)站速度優(yōu)化，排名就能上升。從網(wǎng)站內(nèi)容、關(guān)鍵字布局、反向連結(jié)…等很多訊號(hào)都跟排名有關(guān)，網(wǎng)站速度只是其中一環(huán)。
同時(shí)，網(wǎng)站速度優(yōu)化很多項(xiàng)目都是需要技術(shù)人員協(xié)助的，像是『排除禁止轉(zhuǎn)譯的資源』、『排除禁止轉(zhuǎn)譯的資源移除未使用的JavaScript / 移除未使用的CSS』都算是對(duì)程式檔案進(jìn)行清整、整理、優(yōu)化的工作，如果你是使用較難更動(dòng)的架站平臺(tái)、或公司沒(méi)有技術(shù)人員可以提供協(xié)助，那么就會(huì)很難進(jìn)行下去。
、BeautifulSoup簡(jiǎn)介
BeautifulSoup是Python爬蟲(chóng)應(yīng)用解析Html的利器，是Python三方模塊bs4中提供的進(jìn)行HTML解析的類(lèi)，可以認(rèn)為是一個(gè)HTML解析工具箱，對(duì)HTML報(bào)文中的標(biāo)簽具有比較好的容錯(cuò)識(shí)別功能。lxml是一款html文本解析器，BeautifulSoup構(gòu)建對(duì)象時(shí)需要指定HTML解析器，推薦使用lxml。
BeautifulSoup和lxml安裝命令：
1.pip install -i https://pypi.tuna.tsinghua.edu.cn/simple bs4
2.pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lxml
加載BeautifulSoup：
1.from bs4 import BeautifulSoup
BeatifulSoap解析HTML報(bào)文的常用功能：
通過(guò)標(biāo)簽的contents屬性，可以訪問(wèn)其下嵌套的所有下級(jí)HTML元素，這些該標(biāo)簽下的子標(biāo)簽對(duì)應(yīng)的HTML元素放到一個(gè)contents 指向的列表中。
如：print(soup.body.contents)
可以訪問(wèn)標(biāo)簽對(duì)應(yīng)的父、子、兄弟及祖先標(biāo)簽信息；
使用strings屬性迭代訪問(wèn)除標(biāo)簽外的所有內(nèi)容；
可以使用find、find_all、find_parent、find_parents等系列方法查找滿(mǎn)足特定條件的標(biāo)簽；
使用select通過(guò)css選擇器定位特定標(biāo)簽。
二、一些解析技巧
在HTML解析時(shí)，如果通過(guò)簡(jiǎn)單的tag、或單個(gè)tag屬性（如id、class）或文本一次搜索或select定位是最簡(jiǎn)單的，而有些情況需要使用組合方法才能處理。
2.1、通過(guò)標(biāo)簽的多個(gè)屬性組合定位或查找
經(jīng)常有些要定位的標(biāo)簽有很多，按單個(gè)屬性查找也有很多，得使用多個(gè)屬性查找。如：
上面的html文本中有多個(gè)id為article_content的div標(biāo)簽，如果使用：
就會(huì)返回兩條記錄。這時(shí)候就可以使用多標(biāo)簽屬性定位的如下4種語(yǔ)句：
以上四種方式是等價(jià)的，因?yàn)閕d可以用#來(lái)標(biāo)記，class在查找時(shí)需要和Python關(guān)鍵字class區(qū)分，因此有上述不同方法，注意select的每個(gè)屬性必須用中括號(hào)括起來(lái)，不同屬性的中括號(hào)之間不能有空格，如果有空格表示的就不是查找同一標(biāo)簽的屬性，空格后的屬性表示前一個(gè)屬性對(duì)應(yīng)標(biāo)簽的子孫標(biāo)簽的屬性。
2.2、利用tag標(biāo)簽關(guān)系定位內(nèi)容
tag標(biāo)簽關(guān)系包括父子、兄弟、祖先等關(guān)系，有時(shí)要查找或定位的內(nèi)容本身不是很好定位，但結(jié)合其他標(biāo)簽關(guān)系（主要是父子、祖先關(guān)系）則可以唯一確認(rèn)。
案例：
這是博文中關(guān)于博主個(gè)人信息的部分報(bào)文：
以上報(bào)文中，如果要取博主的原創(chuàng)文章數(shù)和周排名，原創(chuàng)文章數(shù)和博主周排名的tag標(biāo)簽完全相同，二者都在span標(biāo)簽內(nèi)，標(biāo)簽的屬性及值都相同，只是span標(biāo)簽的父標(biāo)簽dt標(biāo)簽的兄弟標(biāo)簽dd標(biāo)簽的string的中文內(nèi)容才能區(qū)分。對(duì)于這種情況，首先要通過(guò)祖先標(biāo)簽<div class="data-info d-flex item-tiling">定位到祖先標(biāo)簽，再在祖先標(biāo)簽內(nèi)通過(guò)中文字符串定位到要訪問(wèn)屬性的兄弟標(biāo)簽的子標(biāo)簽，然后通過(guò)該子標(biāo)簽找到其父標(biāo)簽的父標(biāo)簽，再通過(guò)該父標(biāo)簽的dt子標(biāo)簽的span子標(biāo)簽訪問(wèn)具體取值。
示例代碼如下：
注意：上面的select使用的也是標(biāo)簽的屬性來(lái)定位標(biāo)簽，并且兩個(gè)中括號(hào)之間有空格，表明后一個(gè)要查找的標(biāo)簽在前一個(gè)屬性對(duì)應(yīng)標(biāo)簽的子孫標(biāo)簽范圍內(nèi)。
2.3、分析前去除程序代碼避免干擾
在解析HTML報(bào)文時(shí)，絕大多數(shù)情況是需要分析有用的標(biāo)簽信息，但作為技術(shù)文章，大部分的博文中都有代碼，這些代碼可能會(huì)對(duì)分析進(jìn)行干擾。如本文中的代碼含有一些分析的HTML報(bào)文，如果獲取本文的完整HTML內(nèi)容，這些報(bào)文在非代碼部分也會(huì)出現(xiàn)，此時(shí)要排除代碼的影響，可以將代碼先從分析內(nèi)容中去除再來(lái)分析。
目前大多數(shù)技術(shù)平臺(tái)的博文編輯器都支持對(duì)代碼的標(biāo)識(shí)，象markdown等編輯器代碼的標(biāo)簽為code標(biāo)檢，如果有其他編輯器用不同標(biāo)簽的，只有確認(rèn)了標(biāo)簽名，都可以按下面介紹的類(lèi)似方式來(lái)處理。
處理步驟如下：
獲取報(bào)文；
構(gòu)建BeatifulSoap對(duì)象soup；
通過(guò)soup.code.extract()或soup.code.decompose（）方式就從soup對(duì)象中去除了代碼部分，decompose方法與extract方法的區(qū)別就是decompose直接刪除對(duì)應(yīng)對(duì)象數(shù)據(jù)而extract再刪除時(shí)將刪除對(duì)象單獨(dú)返回。
三、小結(jié)
本文介紹了使用BeatifulSoap解析HTML報(bào)文的三個(gè)使用技巧，包括通過(guò)多屬性組合查找或定位標(biāo)簽、通過(guò)結(jié)合多個(gè)標(biāo)簽關(guān)系來(lái)定位標(biāo)簽以及去除html報(bào)文中的代碼標(biāo)簽來(lái)避免代碼對(duì)解析的影響。
寫(xiě)字不易，敬請(qǐng)支持：
如果閱讀本文于您有所獲，敬請(qǐng)點(diǎn)贊、評(píng)論、收藏，謝謝大家的支持！
————————————————
版權(quán)聲明：本文為轉(zhuǎn)載文章，如有侵權(quán)，請(qǐng)聯(lián)系作者刪除。
當(dāng)今的Web開(kāi)發(fā)領(lǐng)域，隨著應(yīng)用規(guī)模和復(fù)雜性的不斷增長(zhǎng)，JavaScript代碼的組織和管理變得尤為關(guān)鍵。模塊化編程，作為一種有效的代碼組織和重用方法，已成為JavaScript開(kāi)發(fā)中的核心概念。本文將深入探討JavaScript模塊化的原理，并通過(guò)實(shí)際代碼示例展示其在JavaScript編程中的應(yīng)用。
1. 理解模塊化編程
1.1 什么是模塊化編程？
模塊化編程是一種將大型程序分解成可管理和可重用的獨(dú)立小塊（即模塊）的編程技術(shù)。每個(gè)模塊都包含執(zhí)行特定任務(wù)所需的相關(guān)代碼和數(shù)據(jù)，模塊之間通過(guò)定義良好的接口進(jìn)行通信。
1.2 模塊化的好處
2. JavaScript模塊化的演變
2.1 AMD和CommonJS
在ES6模塊出現(xiàn)之前，AMD（異步模塊定義）和CommonJS是JavaScript模塊化的主要方式。
2.2 ES6模塊
ES6（ECMAScript 2015）引入了官方的模塊系統(tǒng)，現(xiàn)在已成為JavaScript模塊化的標(biāo)準(zhǔn)。
3. ES6模塊的實(shí)際應(yīng)用
3.1 導(dǎo)出模塊
示例代碼：
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };
3.2 導(dǎo)入模塊
示例代碼：
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 輸出: 8
console.log(subtract(5, 3)); // 輸出: 2
3.3 默認(rèn)導(dǎo)出
示例代碼：
// greet.js
const sayHello = () => 'Hello, world!';
export default sayHello;
// main.js
import sayHello from './greet.js';
console.log(sayHello()); // 輸出: Hello, world!
3.4 命名空間
示例代碼：
// shapes.js
export const Triangle = {
type: 'triangle',
draw() {
console.log('Drawing a triangle');
}
};
export const Circle = {
type: 'circle',
draw() {
console.log('Drawing a circle');
}
};
// main.js
import * as Shapes from './shapes.js';
console.log(Shapes.Triangle.type); // 輸出: triangle
Shapes.Triangle.draw(); // 輸出: Drawing a triangle
4. 模塊化的性能考量
雖然模塊化編程帶來(lái)了許多好處，但在大型項(xiàng)目中，過(guò)多的模塊和復(fù)雜的依賴(lài)關(guān)系可能會(huì)影響性能。因此，在模塊化設(shè)計(jì)時(shí)，需要權(quán)衡模塊的粒度和項(xiàng)目的復(fù)雜性。開(kāi)發(fā)者應(yīng)該根據(jù)項(xiàng)目的需求和規(guī)模來(lái)決定模塊的數(shù)量和大小，避免過(guò)度模塊化。
5. 構(gòu)建工具和模塊打包器
為了更高效地管理和打包模塊，現(xiàn)代JavaScript開(kāi)發(fā)中經(jīng)常使用構(gòu)建工具和模塊打包器，如Webpack、Rollup和Parcel。這些工具可以幫助優(yōu)化模塊加載，減少打包文件的大小，提高應(yīng)用的性能。
總結(jié)
模塊化編程是JavaScript中一個(gè)關(guān)鍵的概念，它通過(guò)將代碼分解成獨(dú)立、可重用的模塊，提高了代碼的可維護(hù)性和重用性。隨著ES6模塊的引入，JavaScript模塊化變得更加標(biāo)準(zhǔn)化和方便。在實(shí)際應(yīng)用中，無(wú)論是導(dǎo)出和導(dǎo)入模塊，還是使用默認(rèn)導(dǎo)出，模塊化都極大地簡(jiǎn)化了代碼的組織和共享。然而，在使用模塊化編程時(shí)，也需要注意性能和代碼結(jié)構(gòu)的問(wèn)題，確保項(xiàng)目的可維護(hù)性和高效運(yùn)行。通過(guò)合理地設(shè)計(jì)和使用模塊，開(kāi)發(fā)者可以構(gòu)建出更健壯、可擴(kuò)展的JavaScript應(yīng)用。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
