返回播客

成績單

John Jantsch：這一集是 Duct Tape Marketing Podcast，由 pixelz.com 提供給您。 你必須讓這些圖像看起來很棒。 如果你想讓它們流行，如果你想讓它們代表你的產品，這是一項修飾服務，讓你的圖像看起來很棒。

您好，歡迎收聽管道膠帶營銷播客的另一集。 這是約翰·詹奇。 我今天的客人是 Lukas Haensch。 他是前谷歌用戶體驗經理和 pathmonk.com 的 Pathmonk 創始人。

John Jantsch：我們將討論頁面速度、網站加載速度以及所有 UX 因素。 如果人們訪問了您的網站並且加載速度很慢，那將是一種糟糕的體驗，這就是為什麼它如此重要的原因。 事實上，這是一個非常重要的因素，谷歌對外稱其為 SEO 的排名因素。 盧卡斯，謝謝你加入我。

Lukas Haensch：謝謝約翰。 感謝您的款待。

John Jantsch：那麼，我的意思是，很多時候人們都在談論頁面速度，並且有很多因素在起作用。 有人可能有一個加載速度很快的好網站，但有人卻很慢，就像我以前說的撥號一樣。 我們不再說撥號了，是嗎？ 但是連接慢。 所以他們的經歷很糟糕。 我的意思是，我們怎麼知道我們的立場？ 我的意思是，我們如何衡量，我們的頁面速度是多少？

Lukas Haensch：非常非常高興你問到。 所以我認為也許首先，我認為要記住的一個關鍵概念是，我們為什麼還要關心頁面速度？ 非常非常簡短，我們為什麼還要關心這個？ 如果您將其與您的零售店進行比較，那麼將其與您的零售店的滑動門進行比較可能是非常非常好的類比。 如果這是打開超級超級超級慢，有多少人會等待真正通過？

Lukas Haensch：只要你在今天經歷了所有這些，就把這種類比留在你的腦海裡。 因此，頁面提要基本上是您對用戶的開門器。 那裡有很多指標，我知道有很多營銷人員在傾聽。 所以我基本上會給你一個指標，我們在與穀歌最大的客戶合作時在谷歌內部使用，那就是速度指數。 因此，您可以擁有大量指標，加載時間，加載的第一口，何時開始渲染？

Lukas Haensch：但是如果你看一下速度指數，我會在一秒鐘內告訴你你是如何得到它的，但是如果你看一下速度指數，你實際測量的是到第一個屏幕需要多長時間，以上折疊內容，需要多長時間才能完全繪製，這反過來意味著用戶對您的網站有有意義的體驗？ 因此，這就是我們在 Google 團隊中真正真正專注於優化首屏渲染的內容。

Lukas Haensch：而且，所有其他行動都將從那裡開始，因為行動號召已經存在，英雄形像已經存在，然後，其他一切都將從那裡展開。 所以速度指數是你可以很容易得到的。 有一個名為webpagetest.org 的工具。 它實際上是在 Google 中構建的。 從這個意義上說，它不是官方的 Google 工具，但它是由 Google 內部的團隊構建的，用於查看網站的頁面速度。

Lukas Haensch：如果你把你的 URL 放在那裡，你會得到一個稱為頁面速度指數的指標，它會告訴你 3000 或 4000，基本上是毫秒。 因此，如果您的頁面速度指數為 3000，那麼您就處於領先地位。 內容將在三秒後完全加載。 所以這是一件非常好的事情，請注意。

John Jantsch：再重複一遍，webpagetest.org？

盧卡斯·海恩施：正確。 Webpagetest.org 就像一個深藍色的網站，您可以在其中放置幾個參數，您可以選擇網絡，這非常重要。 您必須選擇對您的用戶群有很大意義的東西。 不是每個人都在使用 5G，甚至不是每個人都在使用 4G。 聽起來可能很有趣，但是當我們大約在兩年前，一年半前在 Google 內部這樣做時，實際上，我們仍在快速測試 3G，因為如此龐大的用戶群實際上速度較慢，而且低端設備。 因此，在您辦公室的 wifi 中進行測試可能不是最好的選擇。

John Jantsch：你在哪裡找到或者你發現了什麼是最大的罪魁禍首，我的意思是，減慢網站速度？

Lukas Haensch：這與我們之前所說的概念完全相關。 我們正在查看上面的折疊內容渲染，並且只有一個非常高的級別。 有一個關鍵概念稱為關鍵渲染​​路徑，這意味著瀏覽器必須經過大量資源才能開始在屏幕上顯示任何內容。 因此，如果您的網站在顯示任何內容之前有很多空白，那麼您通常會阻塞關鍵的渲染路徑。

Lukas Haensch：如果您訪問webpagetest.org，您會在視覺上看到這一點，您將能夠準確地看到，因為它基本上是您的頁面加載方式的減慢版本。 您將在第二個中看到，我們有一個白屏，在第二個 1.5 中我們有一個白屏，依此類推，直到您實際顯示第一個內容。 因此，影響最大的因素是阻礙渲染的所有內容，因為如果您阻止渲染，您將擁有一個寬頁面，這通常是幾件事。

Lukas Haensch：默認情況下，這將永遠是，因為它只是渲染阻塞。 這是您頁面中的 CSS 和 JavaScript。 無需贅述。 但是，當你有一個包含大量 Java 腳本的東西並且可以是視頻播放器時，它可以是一個輪播，在你的網站頂部有一些翻轉的營銷信息，這通常是由 Java 腳本驅動的.

Lukas Haensch：技術人員，您將擁有一個您可能不再使用的舊 AB 測試工具。 那將是Java腳本。 因此，即使屏幕頂部並不真正需要它，它也會阻塞，一旦你開始在屏幕上實際看到某些東西就會發生什麼。 因此，關鍵練習之一是始終檢查，是我們正在使用的所有 Java 腳本文件，是我們實際使用的所有 CSS 文件，或者你可以，它被稱為，延遲它們或推遲它們技術術語，您可以延遲加載其中一些項目，然後解除關鍵渲染路徑的阻塞，然後在不更改服務器站點上的任何內容的情況下更早地顯示相同的內容，而不會改變您的任何戲劇性內容。

Lukas Haensch：所以我們一直在 Google 中學到和交流的關鍵是，你不必做那些大的改變。 基本上，您加載的每個文件都有改進的潛力。 它是一個 CSS 文件嗎？ 它可能是，目前不需要。 它可以稍後加載。 它是一個 JavaScript 文件嗎？ 可以延期。 是字體文件嗎？ 也許這是一種舊的字體格式。 等等等等。 你可以瀏覽所有的事實和圖片，我認為有一個重要的技巧對圖片很有幫助。

Lukas Haensch：我可以深入探討，但最終是關於瀏覽這些單獨的項目以及作為營銷人員的您，如果是這樣，那可能是您一直沒有使用過的東西，只需通過 URL 訪問webpagetest.org你可以一步一步地看到，好的，實際加載的是什麼，我可以在我的屏幕上看到什麼？ 這將使您對頁面上發生的事情有一個很好的感覺。 如果有大量的 Java 腳本，如果有大量的圖像，如果有長時間加載喜歡的文件，所有這些。

John Jantsch：我的意思是，我知道它最終會起到什麼作用，但是託管在減慢網站速度或提供更快的負載方面發揮了什麼作用？

Lukas Haensch：我的意思是，它基本上會影響整個方程式的第一部分，即你發送的速度，你的第一口，基本上，你發送信息的速度基本上是在管道中。 我們雖然一次又一次地發現，顯然它發揮了它的作用，但更重要的是，在優化單個文件方面取得的勝利要快得多，因為就像我們之前討論的那樣，阻塞了關鍵的渲染集群。 在完全接觸該主機之前，您可以做很多小事。 因此，在切換任何主要設置之前，我會查看關鍵渲染路徑以及您如何多次加載文件。

John Jantsch：你有沒有發現，今天出現的一些內容管理系統，顯然 WordPress 是迄今為止最受歡迎的。 尤其是當人們開始添加主題和插件之類的東西時，這些是問題的一部分嗎？

盧卡斯·海恩施：100%。 我認為您必須考慮什麼是插件。 在許多情況下，插件基本上是一堆 JavaScript。 顯然，這取決於它的功能，但如果它具有很多功能，是的。 例如，應用相同的邏輯，讓我們從 WordPress 中獲取插件邏輯。 所以你正在加載幾個插件。 其中一些您實際上甚至不需要在此頁面上。 其中一些您只需要在一個特定頁面上。 或者其中一些您只需要在頁面底部。

Lukas Haensch：所以你可以做的是，你可以，甚至還有一個用於這種元插件的插件。 但是您也可以通過代碼運行它。 您可以有條件地加載插件。 因此，如果我的第一步，我的屏幕正在加載，如果我的頁面正在加載，你可以做的只是使用插件的調節器加載器，然後選擇何時實際加載哪個插件。

Lukas Haensch：如果您通過代碼執行此操作，您將有更大的靈活性說，好吧，現在應該加載哪個？ 再一次，你提到了那裡的主題，因為團隊附帶了很多 Java 腳本，所有這些都是在開始時加載的。 這反過來又會阻止渲染。 您可以再次通過檢查逐個文件檢查，好的，哪些可以延遲並稍後加載。

Lukas Haensch：所以這就是營銷部門必須與開發人員坐在一起檢查的地方，好吧，[聽不清] 實際上是 Java 腳本文件，讓我給你一個簡單的例子。 您擁有結帳頁面上需要的 Java 腳本。 在最初的幾秒鐘內根本不需要 JavaScript。 用戶甚至必須到達那裡。 所以這是一個組合。 真的，你看看插件，[聽不清 00:10:52]，你看看 Java 腳本，你試著推遲一些，這就是你基本上一秒一秒地削減的方式。

John Jantsch：所以我已經使用您分享的頁面測試以及 Google 的頁面速度見解進行了測試。 移動負載與桌面負載似乎存在顯著差異。 事實上，我已經測試了很多網站，但很少能找到在移動設備上獲得 Google 好評的網站。 有沒有我們應該做的事情？ 我的意思是，我們是否應該 [聽不清] 幾乎獨立的網站或不同的移動體驗？

Lukas Haensch：所以，這是一個非常好的問題。 我的意思是，我認為移動負載……我的意思是，移動設備的加載時間變得特別明顯，因為設備和我們處於連接狀態。 所以有更多的突破點，比方說，或者更多的點，有點危險，降低了性能。 這意味著，如果我正在查看我的移動頁面，我確實認為，而且我認為即使使用 WordPress，您也可以將加載某些項目的條件設置為拒絕、不要在移動設備上顯示或在移動設備上顯示。

Lukas Haensch：其中包含某些元素。 讓我們舉個例子，我想也許可以給你一個旋轉木馬的例子。 如果頂部有不同圖像的粉色輪播。 所以你可能在桌面上有這個，它並沒有真正影響你的性能，但是你看一下移動設備，突然之間它會嚴重影響性能，因為你要加載五六張圖片，這是相當多的東西加載。

Lukas Haensch：您正在加載 Java 腳本，正如我所提到的，它是隨機阻塞的。 同樣，這意味著現在你基本上必須有一個性能預算，你說，好吧，我有這個和那個預算可以發揮作用。 如果您正在查看您的移動頁面，並且您已經在您的六張圖片和您的 Java 腳本上花費了相當多的預算，那麼您已經花費了相當多的時間來加載它，而您甚至需要查看在您的指標和分析中，人們甚至會與第五或第六張圖像進行交互。

Lukas Haensch：或者僅僅是因為營銷部門或其他人想要將這些信息傳遞出去？ 所以，我肯定會考慮，看特別重的東西，比如視頻。 我並不是說不使用視頻，但也有更聰明的方法來顯示視頻。 輪播，這些類型的項目非常嚴格，不要在移動設備上使用它們，因為它們通常沒有強大的用戶體驗價值，而且肯定會從速度預算中佔用很多。

John Jantsch：如果你有一個網站，如果你今天在網上銷售產品，你就會知道圖片對於人們如何對你的產品和服務發表意見至關重要。 pixelz.com that's pixel with a z.com 是一種圖像修飾服務，可以拍攝您的所有圖像。 他們可以修飾它們，增加形狀和對稱性，撫平凸起，對齊肩膀，諸如此類的東西，可以減少皺紋，可以減少和去除棉絨標籤，所有看起來並不適合的東西。 找人幫你做。 加快您的上市時間，因為他們會在第二天早上為您提供修飾過的圖像。 訪問pixels.com，即PIXELZ.com，了解他們令人印象深刻的圖像服務。

John Jantsch：您能否在不讓人目瞪口呆的情況下，談談這個方程式中的 AMP，加速移動頁面。 這是人們應該使用的東西，以獲得更好的負載，更好的體驗，但是你的圖形更少，你的控制更少？ 那你怎麼看？

Lukas Haensch：所以就個人而言，我的意思是，我如何看待它基本上是一個普通的網站，所有規則都已經預先給出。 它已經為您的 Java 腳本提供了很多限制。 它已經為您提供了，然後顯然 HTML 中還有進一步的優化。 所以在某種程度上，它採用了我們剛剛討論過的這類規則，並以某種方式將它們推給你。 所以，這就是為什麼這就是這些頁面加載速度非常快的原因之一。

Lukas Haensch：我不認為自己是 AMP 專家，但我絕對認為純粹從它的本質來看，它基本上只是一個網站，一個普通的網站，裡面有很多規則，基本上阻止你過度使用您的速度預算，因此它們是快速頁面。 因此，如果它適合您的內容類型，我認為這對某人來說是一個很好的方式，如果您可以通過它傳達您的信息，我認為這是一個很好的方式。

John Jantsch：所以我知道，如果什麼都沒有發生，我會給一個網站三四秒的時間，我可能會點擊離開，尤其是在我的移動設備上。 是否有統計數據明確表示，是的，X 人會等待 X 時間，但如果您的網站在這段時間內沒有加載，不僅是一種糟糕的體驗，而且他們會離開？

盧卡斯·海恩施：是的。 只有大量的指標。 我們在團隊中使用的幾個指標可能會變得更糟，至少他們的狀態或者我們正在變得更糟，就像，如果網站花費的時間超過三個，53% 的消費者會離開網站秒加載。 因此，根據這些指標，如果您的加載速度沒有更快或在三秒內沒有加載，那麼您的一半流量已經在移動設備上發生了。

Lukas Haensch：當我說三秒速度指數為 3000 時，能夠在三秒內將其繪製成屏幕，因為這樣一個人就沒有理由離開了。 因為我認為當我們談論速度索引或頁面速度時，也許還有一個關鍵因素，我們也在談論一個人看到有意義的東西。 通過查看大量不同的指標來將其與人類體驗分開可能不是一個好主意。

Lukas Haensch：比如你能不能向一個人展示一些有意義的東西，這意味著他們不會因為看不到東西而離開。 他們可能會因為其他原因離開。 所以 53%，還有很多其他的指標是關於如何有一個指標的，如果你加載速度快一秒，轉化率就會增加大約 20% 或更多。 我很難發布，這實際上取決於用例和您獲得的流量。 但我認為，如果你的學習速度不低於三秒，那麼這 53% 是一個非常好的想法。 至於你的情況是否是 100%，那是另一個故事。

John Jantsch：我認為它說明了這些原因，很多時候，一些企業、營銷人員只有這麼多的預算注意力跨度、時間來做事情。 我認為，我認為讓他們意識到為什麼這應該是優先事項很重要。 我認為這是一個很好的衡量標準。

盧卡斯·海恩施：100%。 就像你在經營一家零售店，如果你的門打不開，你會立即跳上去。

約翰·詹奇：沒錯。 我認為部分問題是很多營銷人員實際上並沒有訪問他們自己的網站。 不幸的是，他們實際上並沒有與他們的客戶或潛在客戶相同的體驗。

盧卡斯·海恩施：是的。 如果他們這樣做，它通常是一個緩存版本。 緩存版本或 wifi 上的版本。 所以真的要努力。 繼續使用類似的工具，或者您甚至可以使用 Chrome 進行操作，但要繼續在 webpagetest.org 上進行測試，只是為了自己看看，大多數人對您的網站的實際體驗是什麼。

John Jantsch：我知道 Google 不一定會列出他們用於排名的所有因素。 但我認為，頁面速度或缺乏頁面速度是您的頁面是否排名的變量，這一點已被廣泛接受。 你能談談嗎？

Lukas Haensch：我的意思是，顯然我對影響排名的所有事情都沒有全部見解。 如果是這樣，我可能會，不必再工作了。 但我認為有一件事很重要，也許要記住。 這一切都是有一定原因的。 因此，越來越多的流量正在移動。 所以移動流量明顯超過了桌面流量。 因此，越來越多的流量來自移動端的谷歌搜索，而不是桌面端，因此更多的是訪問者，也就是更多的市場。 在這些渠道中有更多的營銷機會。

Lukas Haensch：但我們普遍看到的是移動端的轉化率低於桌面端。 因此，顯然對提高頁面速度非常感興趣，因為它是影響用戶體驗的一個方面。 因此，在某種程度上，它對排名很重要的原因也是它對用戶有利的原因，這就是它對轉化有利的原因，這反過來又對在該頻道上投放廣告的人有利。 所以，我真的不能，我對排名因素沒有任何進一步的見解。 我只能說這一切都來自一個很好的理由。

John Jantsch：我一直告訴人們的就是你所說的。 加載緩慢的頁面是一種糟糕的體驗。 所以穀歌不希望人們有糟糕的體驗。 所以他們不會顯示該頁面。 我認為這就是看待它的方式。 我認為這一直是他們的意圖。 因此，事情會隨著算法而改變，不僅僅是因為他們更好地理解頁面的所有因素都在網站上。

John Jantsch：所以我認為毫無疑問，事實上，測試這一點的最簡單方法之一是，當我們的客戶的移動體驗非常糟糕時，無論是設計還是加載速度，我的意思是，我們無法讓他們出現在移動搜索中。 他們只是不會。 所以我認為這是一個明確的指示，因為有人需要表明，無論你如何將它放在排名中的哪個位置，它都是一個因素。

Lukas Haensch：我想我想說的是，我在谷歌工作的所有時間裡最大的收穫是，很多團隊高估了即使是很小的修復也需要付出的努力。 所以移動頁面的頁面速度優化是一個大項目。 但正如我之前試圖強調的那樣，沒有很多事情可以做很多小事情來提高。

Lukas Haensch：就像給我一兩個例子，可能會非常突出這一點。 很多人試圖優化他們的英雄形象。 你可以做的事情就像你可以做的那樣非常簡單，你把你的英雄形象，你可以把它轉換成比如說一串代碼。 它在編碼中稱為 base 64，突然之間，您可以在 HTML 文件中的第一個請求中發送您的英雄圖像。 我只是想說的是，沒有大的改變要做。

Lukas Haensch：你會拍攝一張圖像，然後將其轉換為另一種格式，現在將它與你的第一個文件一起發送，並且你的第一個折疊內容的很大一部分已經可以繪製。 所以，我認為這可能是我最大的收穫，有很多小事情可以做而不是做，把它作為一個大項目不必要地炸毀。

John Jantsch：那麼有人會在哪裡，比方說一個聽眾在那裡思考，他說了一些很有意義的話，但我不知道該怎麼做。 你在哪裡找到這樣的人，因為再次，如果你只是谷歌頁面速度顧問，你會得到非常技術的人，你會得到那些只是說他們知道的人，但他們是真的，他們想要做的就是將您轉移到新的託管或其他東西。 我的意思是，您如何找到合適的資源來幫助您解決這些小問題？

Lukas Haensch：我認為這是一個非常好的問題。 我可以說的是，如果您的團隊合理地逐一檢查文件，那麼其中很多內容已經可以被發現。 您的字體文件可能只是舊字體文件格式嗎？ 有字體文件格式是TTF。 如果您將其轉移到 [聽不清]，它會縮小 30%。 字體顯示更大、更快。 所以我唯一不能說的就是一個地方，我能說的就是和你的團隊一起穿過你網站的瀑布。 我認為這是誠實的最佳來源。

John Jantsch：所以我們，在介紹中我提到你最近成立了一家名為 Pathmonk 的公司。 你想告訴我們一些關於 Pathmonk 的工作。

盧卡斯·海恩施：當然。 因此，絕對在 Pathmonk 中，我們更加關注移動設備和桌面設備的轉化率。 我們意識到，營銷人員實際上很難回答諸如用戶實際轉化需要多少訪問量之類的問題？ 或者你在頁面上有多少秒來真正說服他們？ 而且我不是在談論跳出率，我是在談論某人在註冊之前平均花費的秒數是多少？ 或者哪些用戶操作表明訪問者已準備好進行轉換？

Lukas Haensch：所以我們已經看到，在能夠回顧性地理解某種匿名信息方面存在很大差距，比如穀歌分析數據或查看熱圖視頻，比如某人的行為方式。 但是我們發現存在一個實時的差距，人們很難立即對此做出反應。 如果用戶 X 一直在頁面上並且一直在做看起來像是正在轉換的人的行為，你能對市場做出反應嗎？ 我們發現大多數市場都是最新的。

Lukas Haensch：所以我們構建了基本上稱為智能卡的技術，它基本上是在幫助自動基於人工智能，了解用戶在頁面上所做的事情，以及可能的轉換模式。 那麼用戶在頁面上時有哪些意圖。 然後我們向他們展示有關您的產品的內容，例如常見問題、推薦、關於我們所謂的從底部或頂部滑動的智能卡的案例研究。 這基本上就是我們如何讓網站實時響應每個給定訪問者頁面上發生的事情，直至他們感興趣的產品類型或功能。

John Jantsch：而且我認為，用最簡單的術語來說，如果有人正在訪問某個頁面，他們可能對該主題感興趣。 確實如此，而不只是給他們通用的幻燈片，這確實是一種個性化他們在幾乎每一頁或每次訪問或如你所說的整個路徑上的體驗的方式。 因為很多時候在網站上，人們會做五六件事，這肯定表明他們正在探索某個主題或有某種意圖。 因此，正如您實時所說，能夠對此做出反應，我認為不幸的是，人們開始期待的行為正在成為一種行為。 我說，不幸的是，因為它肯定會提高營銷人員的門檻。

Lukas Haensch：有趣的是，我們看到的是，有元素，有預期的元素，顯然有人正在下載某個白皮書。 但是還有其他事情，例如有人深入關注您的頁面。 我們看到有人深入關注您的頁面，然後再次提交其中一個重新關注的內容之間存在很強的相關性。 這就是數據在某種程度上揭示的東西，然後智能卡可以自動做出反應。

John Jantsch：我再次認為，因為我訪問了該工具並觀看了它的運行情況，我認為智能卡在交付方式方面非常優雅。 他們不只是接管屏幕或真的，進入某人的臉。 但是因為它們有點個性化，我認為它們會被看到，我懷疑它們會更受歡迎。

Lukas Haensch：這很有趣。 我們進行了大量的用戶體驗測試和用戶體驗工作，因為聰明人必須克服許多先入為主的觀念。 它的拍攝和感覺不像聊天機器人，因為聊天機器人有很多先入為主的概念。 很多人甚至不與聊天機器人開始對話，因為他們認為這是正確的，它是一個機器人，他們不想與它交談。

Lukas Haensch：所以指標清楚地表明很多人不會開始對話。 或者，如果它看起來像一個 cookie 橫幅，我們在 cookie 橫幅上點擊了 1 億次。 因此，基本上，我們將智能卡作為您網站的一部分使用，使其外觀和感覺成為您網站的一部分，因此它們完全可以根據您網站的風格和主題進行定制。 然後基本上只是通過上下滑動與從無處彈出來成為網站的一部分。

John Jantsch：嗯，Lukas，非常感謝您加入我們並談論頁面速度，希望我們很快會在路上遇到您。

Lukas Haensch：非常感謝。 感謝您的款待。