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