優化網站速度的 8 個技巧

已發表: 2022-08-03


你的網站有多快？

我們都知道，緩慢的網站會對用戶行為產生負面影響。 但是，您真的在盡一切努力將您的網站速度降到最低嗎？

今天，我們正在與一個喜歡網絡開發、岩石學、WordPress、科幻小說和杜松子酒的人討論網站速度優化的八個技巧。 誰是最快樂的，當他們深入了解 PHP、在舞台上或閱讀一本好書時。 他是數字戰略家、數字營銷技術專家和全棧開發人員，並且是 Yoast 的 SEO 負責人。

熱烈歡迎 In Search SEO 播客 Jono Alderson。

這八個步驟是：
  1. 核心網絡生命力
  2. Cloudflare
  3. Chrome 開發者工具
  4. 高級圖像優化技術
  5. 高級字體優化技術
  6. CSS 和 JavaScript 技巧
  7. 緩存和版本控制
  8. 聰明的第三方工具包





快速網站的八個基本要素



J：嘿，很高興來到這裡。 感謝您的款待。 這非常令人興奮。

D：太棒了，喬諾。 很高興有你。 你可以在 jonoalderson.com 上找到 Jono。 那麼，Jono，對於慢速網站實際上如何影響用戶行為，您認為目前的立場是什麼？

J：有很多研究。 我認為這些都不是新聞。 現在有研究可以追溯到幾十年前。 所有這些都表明，你讓人們等待多少毫秒，以及這對他們購買東西的可能性有多大影響之間存在著令人驚訝的直接相關性。 人們可能不會有意識地說：“哦，這花了 200 毫秒的時間太長了，我要和你的競爭對手一起購物。” 但在這段時間裡，他們可能會看向窗外或打開另一個標籤，或者想知道午餐吃什麼。所有這些都削弱了他們停留在當下並轉變或採取行動的可能性。

我最近從一家大型諮詢公司德勤那裡看到了一些非常有趣的研究。 他們研究了英國和美國電子商務和潛在客戶生成以及不同行業中 50 個最大的不同網站的一個子集。 他們發現了大約 200 毫秒的延遲，也就是你眨眼的時間，從而降低了網站速度，增加了大約 10% 的收入。 這只是其中一項研究。 有很多這樣的。 他們都說更快、更時尚、更容易獲得、更實用，只是意味著更多的錢。 所以，是的，我們看這個是不費吹灰之力的。

D：我記得看過亞馬遜的一項研究，我想那是 10 多年前的事了，但我還沒有看到關於它的最新統計數據。 但這肯定也是比較的。 因為如果人們習慣於瀏覽其他網站，並且他們認為您的網站比其他網站慢很多，那麼他們就不會停留太久。

J：是的，人們真的不考慮這個。 他們認為他們的網站可能足夠快。 但是你的競爭對手的網站越來越快，Facebook 越來越快，Instagram 越來越快，並且對用戶體驗基線變化的期望。 因此，您必須比預期更快，否則，您會相對變慢。

D：所以今天，您將分享快速網站的基本要素，從第一名，Core Web Vitals 開始。



1. 核心網絡生命力



J：我認為除此之外可能還有更多。 但這絕對是我的首選清單。 我相信現在每個人都聽說過 Core Web Vitals。 但如果你還沒有，我認為谷歌在 2020 年中期推出了這個。 他們試圖創建某種標準化的通用指標來衡量 PageSpeed 是什麼。 因為在技術上和概念上，它非常複雜。 頁面加載，有各種不同的階段和各種影響它的不同事物。 因此，他們將其簡化為一組指標，您可以隨著時間的推移對其進行監控、趨勢和分析。

關於這一點的真正好處是，這只是第一步。 目前有三個指標，今年我們將增加兩個。 指標本身正在發展。 這正在成為一個成熟的生態系統，用於將硬數字與這些衡量標准進行對比，這意味著作為一家在線企業，我們更容易說我們的得分不是很好，而我們的競爭對手得分更高。 我們知道所有的研究都與收入掛鉤，所以我們應該專注於改進這一點。 突然之間，我們有一種方法可以讓利益相關者相信，不僅頁面速度很重要，而且我們有一個衡量標準，每個人都會同意，這不是固執己見，也不是角落裡的 SEO 人說他不同意那個角落的開發人員，並且沒有真正擁有共同的語言。 所以這作為一個商業工具真的很強大，更不用說只是一個技術措施。

D：我知道你的大腦在說你不能承諾說只有八項最重要的最快的事情是你實際上可以做的來改善你的網站。 我知道你的大腦目前實際上可以想到 1024 件事情，但我們只是分享你提出的八個初步想法，這些想法也是我們之前討論過的。 所以排名第二的是 Cloudflare。



2. Cloudflare



J：如果我只有足夠的時間和資源來做一件事來加快我的網站的頁面速度，那麼它將進入 Cloudflare。 Cloudflare 是巨大的。 他們是該領域最大的技術科技公司之一。 然而，可以理解的是，有大量的開發團隊和企業從未聽說過它們，因為它有點書呆子氣。 Cloudflare 是一個內容交付網絡。 它是位於您網站前面的基礎設施。 他們有一個免費版本。 設置大約需要 10 分鐘。 他們只是使用魔法來加速您的網站。 它們會自動縮小你的圖像，縮小你的 JavaScript，改變加載方式，確保連接更有效地在全球範圍內路由，以用於不同地方的不同用途，以及 1000 種其他事情。 這些都是理論上你可以做的事情，如果你有一個非常聰明且資源豐富的開發團隊，你可以做一些事情。 但是，當 Cloudflare 免費產品完成大部分工作，而每月 20 美元的產品幾乎完成其餘所有工作時，您為什麼還要這樣做呢？

因此，如果您的網站評分可能不是很好，這可能有點慢，您可以通過單擊幾個按鈕將一個需要 6 秒加載的網站縮短到 2 秒。 基礎級別非常出色，但有了高級用戶和高級案例，您可以走得更遠。 您可以說我想將 Cloudflare 更深入地集成到我的網站的工作方式中。 我想卸載一些業務邏輯。 我想在靠近用戶位置的雲端邊緣的谷歌分析中運行這個標記和跟踪。 對於難以讓網站本身更快、或者它在舊硬件上運行、或者託管有點糟糕的情況，它是一個了不起的工具，你實際上可以讓 Cloudflare 坐在所有這一切的前面，而且從來沒有再次擔心它。 這確實引發了一些有趣的問題，即他們負責多少不同的堆棧部分以及您希望卸載多少業務邏輯。 但作為一種快速破解，它是一個了不起的工具。

D：第三，使用 Chrome 開發者工具來發現性能瓶頸。



3. Chrome 開發者工具



J：是的，所以運行像 PageSpeed Insights 和 Web Page Test 這樣的 Core Web Vitals 工具會給你頂級分數和一些通用的建議。 使用較少 JavaScript 等通用建議的問題在於，將其應用於您的網站和麵臨的挑戰並不是一件容易的事。 您的網站是獨一無二的，它以一種非常特定的方式內置。 如果您想真正發現機會所在的下一個級別，您需要查看您的網站的加載方式。 你可以使用的最好的工具之一是 Chrome 開發者工具。

我在 Windows 電腦上。 所以我在瀏覽器中按 F12，我確定有一個 Mac 等價物，我得到了 Inspect 概覽。 您可以單擊“網絡”選項卡，然後您會得到一個瀑布圖，該圖會按照加載順序和加載時間顯示頁面上加載的所有內容。 如果你點擊刷新幾次，你可以看到這種情況發生並且你開始看到模式。 而且您不必是一個非常深入的開發人員，就可以看到這一特定的事情所花費的時間是其他事情的兩倍。 它拿著一堆東西。 而且它是一個大 JPEG，也許我們應該縮小這個 JPEG。 因此，作為一種診斷站點的方法，特別是逐頁或逐個模板，它是查看最大違規者所在位置的有效方法。

是的，除此之外還有細微差別，但是知道如何解決最大的瓶頸意味著所有被阻止的東西都會加載得更快。 作為一種挑选和發現簡單機會的方式，這是一個很好的方法。 找到阻礙其他事物的事物，並使其更快一點。 您可以截屏並將其傳遞給您的開發人員等。他們應該能夠攻擊任何內容。

D：第四，使用先進的圖像優化技術。



4. 高級圖像壓縮技術



J：是的，我以大 JPEG 為例。 這仍然很常見。 許多網站運行緩慢的一個重要原因是有人將 10 兆字節的 GIF 上傳到他們的主頁上，或者他們用手機或相機拍了一張照片，然後把它放到了 CMS 中。 而且沒有任何邏輯可以說，也許我們應該縮小一點。 也許我們應該適合它的大小。 很多時候，當您查看 Chrome 開發人員工具和 Cloudflare 時，您會發現瓶頸在於加載此圖像需要很長時間，因為它很大。 您可以使用各種工具來解決這個問題。 最重要的是你用來生成這些圖像的任何過程，可能有一個工作流程。 如果您在 Photoshop 中製作內容，則在導出內容時，請確保您正在為 Web 導出內容。 考慮一下這個 JPEG 是否真的需要完美的像素質量，或者我們可以稍微降低質量並節省文件大小。 如果這有點技術性，請訪問 squoosh.app。 Squoosh 是由一些 Google 開發團隊構建的工具。 他們是超級書呆子，他們真的很喜歡圖像空間。 您將圖像拖放到其中。它為您提供了可以單擊的選項，您可以在其中將 PNG 更改為 JPEG。 您拖放時，您可以看到圖像中的質量變化。 我對這種權衡感到滿意嗎？ 還有一大堆高級複選框，我可以單擊並查看會發生什麼，並在這里和那裡再減少幾千字節。 只需幾秒鐘的拖放和使用設置，您就可以非常輕鬆地獲得 2 MB 到 200 KB 的圖像。 它不是很融入您的工作流程，但作為縮小一些大瓶頸圖像的快速修復，它真的很酷。

D：是的，我需要了解圖像優化，因為我不想承認，但我實際上仍在使用 Macromedia Fireworks 來製作軟件。

J：哦，我想念Fireworks。 大約有十年左右的時間，那是我的玩具。

D：我知道。 我創建了一個圖像，然後以大約 80% 的質量將其導出為 JPEG，然後說：“這對網絡來說沒問題。” 也許這在 10 年前是遙遠的事情。

J：這可能是很多人的工作流程，他們只是將其投入到 80% 就可以了。 在大多數情況下，這會很好，但偶爾會有一些事情發生。 而且，如果您想做到消除瓶頸和暢通無阻，真的值得花時間查看每張圖片並說：“我對尺寸上的這些權衡感到滿意嗎？”

D：當然。 對於一個必須與最好的網站競爭的超高速現代網站，我剛剛描述的肯定無法做到這一點。 所以這將我們帶到第五個，即使用高級字體選擇優化技術。



5. 高級字體優化技術



J：我提到過大的 JPEG 通常是一個阻塞問題。 最大的罪魁禍首之一是字體，尤其是 Google 字體，或者實際上是您從第三方域加載的任何字體。 這些通常是頁面上最慢的東西，也是頁面上最大的東西，作為用戶，您會一直看到這一點。 當你加載一個頁面時，需要幾秒鐘來整理，然後字體就會閃入。這是一個非常糟糕的用戶體驗。 Core Web Vitals 在很多方面都非常糟糕，但有一些修復。 所以穀歌字體和類似字體的問題之一是你進行跨域連接，這需要一點時間。 您要連接的東西會查詢一大堆需要一段時間的後端系統。 它吐出字體，然後你必須下載該字體，然後你必須渲染它。 這個過程大概有五個步驟，只需要幾秒鐘，而且沒有辦法讓它更快。

因此，最簡單的勝利之一就是本地化這些字體。 不要從 Google Fonts 加載它們，忽略 Google Fonts 為您提供的有關複製和粘貼 CSS 的說明。 做一些谷歌搜索，找到一些關於如何自託管這些字體的指南。 這會因您的設置和 CMS 而異。 通常，有一些插件和流程可以使這變得非常簡單。 這消除了所有這些。 然後你想做的另一件事是看看我正在加載的這個字體到底是什麼以及我是如何加載它的。

在現代字體加載 CSS 中，您可以定義特定的字符集。 因此，例如，如果您知道您的網站主要是英文的，那麼您可能不需要為一大堆擴展的拉丁字形加載字體字符，這實際上是默認情況下發生的。 因此，您正在加載的字體，您只使用 AZ，1 到 9，但實際上，您正在加載 200 個從未出現在您的頁面上的奇數字符。 因此，如果您可以將其分割，那會快得多。 您還可以說，“我是否希望此字體快速加載，但可能不被緩存？或者在權衡取捨的情況下，我要等待它加載多長時間？我是否要退回到其他東西？還是我只是在它應該在的地方顯示一個空白空間？” 您可以修改不同的設置，也可以使用 Google 工具來優化它。同樣，作為您想要查看每一位的圖像，真正詢問您是如何加載這些字體的。csstricks.com 有一些很棒的指南對於一大堆方法，你可以去挑選它。但是，再看看你的 CMS 和你的堆棧，會有插件和購買來簡化這個。

D：第六，使用 CSS 和 JavaScript 技巧。



6. CSS 和 JavaScript 技巧



J：所以下一個最常見的問題是樣式和腳本的加載方式。 如果你的網站有很多複雜的視覺內容，並且可能有移動、交互、小部件和你可以點擊並使用的東西，那麼幾乎可以肯定的是 CSS 和 JavaScript 過去常常需要一段時間以不同的方式加載頁面並與之交互。 當您查看阻礙其他事物的事物時，您會在 Chrome 開發人員工具報告中看到這一點。 JavaScript 是一個非常糟糕的罪犯。 如果我有一個腳本可以為頁面頂部的輪播提供動力，我不想在輪播開始滾動之前等待該腳本加載。 所以你可以用這個做一些事情。 一個是你可以把它們變小。 Cloudflare 非常擅長這一點。 如果它更小，它的字節數更少，它的頁面加載時間就會更快。 但是你可以做的另一件事，真的很強大，就是說對於這個JavaScript文件，我不需要立即加載，我可以等到頁面完成。

有不同的方法可以做到這一點。 您可以異步加載，也可以延遲加載。 延遲通常是當今的最佳實踐。 人們會做各種奇怪的事情，將異步和延遲結合起來會弄得一團糟。 但是，只需在您不需要的 JavaScript 文件上使用 defer 屬性，就可以使您的頁面變得更快。 因此，如果我有一些 JavaScript 來控制頁腳中的某些內容，我真的不需要等待它來加載頁面的其餘部分，尤其是當您考慮到 JavaScript 和 CSS 交互的方式變得非常混亂時。 如果我有很多腳本，我的頁面上有很多樣式，其中一些要等到 JavaScript 被加載。 所以你的東西在整個地方都阻礙了其他東西。 因此，真正的戰術並說我不需要立即使用它可以釋放巨大的性能提升。 同樣，這真的很容易在 Chrome 開發者工具中看到這些違規者的位置。 而且，如果您有開發資源，那麼執行此操作非常容易。 您實際上只是向標籤添加一個屬性，它會自動完成。

D：第七是充分利用緩存和版本控制。



7. 緩存和版本控制



J：Cloudflare 做得非常好的一件事是，當它第一次遇到資源時，無論是圖像、一段 JavaScript 還是樣式，它都會將其保存到 Cloudflare 中，然後任何人將來需要它獲取緩存版本。 這從某個地方對他們來說是超級本地的。 太高效了，真好。 許多網站的工作方式使這變得非常棘手。 例如，您希望確保對樣式表和腳本進行版本控制。 因此，當您發布最新版本的 JavaScript 時，您想說這是第六版。 然後，Cloudflare 可以為所有訪問者很好地緩存它。 當您對其進行更新時，您想要更改該文件類型，更改文件名，所以這是版本 7。 然後你所有的緩存都過期了，人們正在請求不同的資源，他們開始很快回來。

當您開始緩存實際網頁本身時，這開始變得非常強大。 所以默認情況下，Cloudflare 只會緩存一些 JavaScript 和 CSS。 您想要緩存網頁。 但是您希望以一種不會意外緩存已登錄的人或購物車中有東西的人的方式來執行此操作。 如果您使用的是 WordPress，Cloudflare 提供了一項名為自動平台優化的服務，它會自動執行此操作。 因此，現在您可以從距離您的用戶最近的 Cloudflare 數據中心為您的網站提供服務，並且他們將在 50 毫秒而不是 600 毫秒內獲得它的緩存保存版本。

如果您有一個更複雜的網站設置，您可以使用 Cloudflare 和 Workers 產品來完成此操作，該產品在 Page Rules 產品下允許您為此定義一些自己的邏輯。 但基本上，前提是，您不希望您的網站做任何事情。 如果有人正在打開您的頁面，您希望該頁面、JavaScript 的每一點以及樣式的每一點都可以從離您最近的數據中心的任何地方提供。 我想我的服務器在挪威。 但是，如果你現在打開我的網站，上面的所有內容都來自曼徹斯特，因為那是 Cloudflare 擁有數據中心的最近的地方。 你可以修改這個。 您可以在 Chrome 開發人員工具中查看此內容，您可以在視圖中添加一個額外的列，說明這是否正在緩存 Cloudflare。 而且您可以開始挑选和調整這些設置，以確保沒有任何東西擊中後端。

D：這將我們帶到最後一個。 第八，使用聰明的第三方工具包。



8. 聰明的第三方工具包



J：有一大堆東西，你可以用這些來作弊。 目前我有兩個真正的最愛。 一個是 Instant Page，它位於 instant.page，它有一個有趣的域。 這真的很酷。 因此，它不會立即使您的網站更快，但會使後續導航更快。 因此，當用戶將鼠標移到您頁面上的鏈接上時，它會在您的瀏覽器背景中預加載它，以便在他們單擊時，它已經可用。 他們有一大堆研究表明，在實際點擊之前，普通人將鼠標移動到鏈接上 16 毫秒。 所以那裡有一點緩衝時間。 在這 16 毫秒內，這剛好足夠開始在後台加載頁面。 所以感覺是瞬間的。

這真的很好有幾個原因。 一，這是一個很好的用戶體驗。 第二，它會影響您的 Core Web Vitals，即使它不是初始頁面加載，Core Web Vitals 也會在您的 URL 中匯總整個站點的速度和加載時間。 因此，如果這些導航是超級即時的，那將為您的整體得分創造奇蹟，這可能會讓您更接近提高 Google 排名的聖杯。

對於技術含量更高的人來說，我現在真正喜​​歡的另一個玩具是派對小鎮。 前提是您在網站上加載的某些內容是第三方的。 這通常是跟踪像素和谷歌標籤管理器，也許還有其他零碎的東西。 您不希望這些內容與對您的網站至關重要的主要重要內容競爭。 因此，如果我有一堆 JavaScript 來支持頁面加載，我不希望 Google 跟踪代碼管理器加載它並竊取資源然後進行戰鬥。 我想將這些東西分開，以便我在瀏覽器中的頁面知道它應該優先考慮關鍵的東西，並且第三方的東西可以在後台發生，它可以單獨發生。 從技術的角度來看，它會將所有這些第三方資源加載到一個單獨的工作程序中，這意味著它發生在正常流之外，它不會影響性能，並且它在後台安靜地發生。 我已經從這類東西中看到了一些令人難以置信的性能提升。 我認為這是性能優化的主要方向。 設置起來有點棘手，它並不適用於所有東西。 但是，如果您真的想在競爭中領先，這是一個非常酷的玩具。 所以它有點測試版，但值得探索。

D：我試圖查找 Party Town 的 URL，因為如果你在 Google 上搜索它會很難找到，但它在 GitHub 上。

J：是的。 我剛剛向您發送了一個可以共享的鏈接。 這是非常測試版。 這是非常 GitHub。 目前它非常書呆子和開發人員。





帕累托泡菜 - 做 100 個小改變



D：讓我們以 Pareto Pickle 結束。 所以帕累託說，你可以從 20% 的努力中獲得 80% 的結果。 您會推薦哪一項 SEO 活動，以適度的努力提供令人難以置信的結果？

J：我能給出的最好建議是忽略 SEO 的帕累托最優。 我認為這不再是這樣了。 如果您是我們 100 年前經營實體零售店的祖父母，我認為這是一個很好的建議。 我認為我們的生態系統是不同的。 我認為特別是對於搜索引擎優化，你獲勝的方式是你做 100 個小改變，今天和明天一次一個地迭代，直到你死。 否則，您的競爭對手會走得更快。 這一切都與質量、品牌和業務有關。 任何你可以在戰術上說“哦，就這樣做”的事情，你的競爭對手也可以這樣做。

所以，是的，可能會有一些聰明的答案，比如讓你的品牌聲譽翻倍，因為那肯定會做得很好。 但這是一件非常複雜的事情。 我認為更好的思考方式是今天下午，我可以改進哪十件事？ 就去做吧。 而且它們不必很大或很聰明，只需迭代並變得更好。

D：你不必優先考慮事情。 但肯定有些事情比其他事情有更大的影響。

J: 是的，但大事都會變成更好的解決方案，擁有更好的內容，與產品市場更加一致，或者打動並幫助你的觀眾，但這些都不是你能做的有形的、戰術性的事情。

你知道嗎，我改變主意了。 你能做的 80% 的事情就是去獲取 Cloudflare。

D：我一直是你的主持人大衛·貝恩。 Jono，非常感謝您參加 In Search SEO 播客。

J：謝謝你邀請我。 這是令人愉快的。

D：謝​​謝你的聆聽。