如何使您的網站超越快速

如何使您的網站超越快速

搜尋聖經:

慢速網站讓消費者感到沮 挫折要花錢。

為了取悅消費者,擊敗競爭對手,並取悅谷歌,您的網站將需要在一秒鐘內加載。 你需要快速到達那裡,否則,你的競爭對手可能會擊敗你到終點線。

聲音不可能? 網路表現不再是藝術,而是科學。

4月24日,我主持了由Yoast的特別行動的Jono Alderson主持的

用戶期望快速 快速的網站,快速的應用程序,快速的數位體驗。 Web性能和用戶行為之間的關係得到了大量研究的支持。

時間就是金錢,每一毫秒可能會耗費用戶或轉換成本。 人們不耐煩,延遲降低了他們消費,轉換或採取行動的可能性。

提到的統計數據可以追溯到2014年。大約在那個時候,網站速度變得非常明顯。

按照這種邏輯,我們應該已經掌握了這一點,並將其釘在上面。 但事實證明,事實並非如此。

此表格顯示了Google 移動頁面速度行業基準測試數據,該表格告訴我們,不同行業和不同國家/地區的普通網站的網站在3G連接上通過移動電話完成加載所需的秒數。

在3g連接上加載秒數

這些站點加載時間超過8秒,這非常慢。

我們知道用戶不喜歡這種體驗以及它會對轉化產生多大影響,因此Google將事情掌握在自己的手中。

谷歌的網站速度

現在世界正在發生變化,主要是因為谷歌作為一個影響力和權威的強者,已經對速度變得非常感興趣 – 並且出於一系列不同的原因。

在2018年初,谷歌宣布他們認為速度有多重要,並且從那年7月開始,它正式成為移動搜尋的排名因素。

搜尋引擎的建議?

“我們鼓勵開發人員廣泛思考性能如何影響用戶對其網頁的體驗,並考慮各種用戶體驗指標。”

谷歌在這裡所說的是速度是用戶體驗的基礎。

當您瀏覽,嘗試加載您的頁面或頻道,或將產品添加到購物車時,發生這種情況的速度是整個用戶體驗的一個重要組成部分。

對谷歌而言,速度=效率。 隨著網站變得越來越快,慢速感覺會變慢。

消費者的期望將會增加,他們所擁有的最快,最好的體驗將成為他們對常態的期望。

那麼,我們需要做什麼?

接近速度優化

秘訣就是 不要做一個大的網站(再)開發項目。

在速度優化方面,你將贏得一千次調整 – 現在,每一天,永遠。 你需要找到重要的位並使它們更快。

在速度優化的核心,您需要了解兩個基本事實:

  • 沒有速度這樣的東西。
  • 唯一重要的是對速度的感知。

速度沒有這樣的事情

當你開始探索這個問題時,很難回答這個問題:“你如何測量速度 ?”

您如何根據網站的速度製定指標?

您可以先說“頁面完成加載需要多長時間”。

但是,這是什麼意思?

如果服務器響應很快,但顯示內容需要多長時間呢?

如果頁麵包含僅在您進行交互時加載的組件或滾動,該怎麼辦? 它們“完成了”嗎?

我們需要更好的定義來了解我們的表現。

來自速度檢查和優化工具的大多數庫存指標都存在缺陷,旨在給您帶來虛假的舒適感。

直到最近,谷歌的PageSpeed Insights工具同樣無稽之談。 分數實際上並沒有衡量速度,而且圖表也不好,因為對抗緩慢的競爭對手讓你自滿。

Google更新該工具時,它添加了指標First Contentful Paint ,其中:

“…報告瀏覽器首次渲染任何文本,圖像(包括背景圖像),非白色畫布或SVG的時間。 這包括具有待定webfonts的文本。 這是用戶第一次開始使用頁面內容。“

換句話說, 我們能夠多快地展示一些有趣的東西?

我們可以在屏幕上放一些看起來像是做某事的東西,而不是只有一個微調器或加載圖標的空白頁面,這要多少毫秒?

我們有多快能讓它看起來像是在發生? 對於許多人來說,這將是頁面頂部的英雄形象,徽標或導航欄。

如果你能以這樣的方式優化你的網站,你以最小的延遲加載重要的位(然後擔心加載所有其他的東西),那麼感覺要快得多。

這是有效的,因為沒有視覺反饋的等待是最糟糕的一種。

優化First Contentful Paint將使您的網站外觀更快。

您的分數可能不會有太大變化,但目標不是優化分數。 只是讓它更快。

唯一重要的是對速度的感知

谷歌自己的文檔說了這麼多。

負載不是一個單一的時刻 – 這是一種沒有任何一個指標可以完全捕獲的體驗。 在加載體驗期間有多個時刻可以影響用戶是將其視為“快”還是“慢”。

但是,無論您的網站是什麼,您所在的行業或工作方式,都有一個您可能想要衡量的重要時刻。 這是互動的時候了

交互時間(TTI)度量標準衡量頁面成為交互所需的時間。

簡單地說,我們能多快讓它感覺到準備好了嗎

如果有一個根本重要的事情需要理解,那就是谷歌不太可能專門測量實際頁面速度。

他們更感興趣的是對速度的感知。 如果你製作一個閃電般快速的網站,加載緩慢,你浪費了大量的時間和金錢。

需要強調的是:

  • 我們如何快速展示一些東西?
  • 我們如何讓它感覺到準備好了?

挑戰在於感知速度難以量化。 該生態系統中有許多活動部分。

但好消息是,性能優化現在已成為一門科學。 您可以遵循硬性規則,流程,指南和技術來實現這一目標。

世界上每個站點都可以在不到一秒的時間內加載。 你只需要遵守規則。

值得慶幸的是,Google提供了大量有關該主題的文檔

你從哪裡開始?

你需要從找到緩慢的東西開始。 雖然工具不能隨著時間的推移為您提供指標,但它們非常善於發現問題。

關於速度優化,您可以學到的最有影響力的事情是查看頁面加載的方式,並找出等待其他內容的內容。

如果你可以消除這些瓶頸,改變加載方式的順序,讓它們一次加載而不是一次加載,那麼其他一切都會更快地發生。

另一件需要記住的事情是,谷歌正在以移動優先的方式監控,測量和分析網站。 我們的許多用戶都在使用移動設備,這就是特別慢的痛點。

沒有靈丹妙藥。 我們正在進行1000次調整之旅。

以下是您今天可以開始做的事情。

快捷方式的重要提示

加載更少的東西

您可能需要考慮減少網站的元素。

有些事情要看:

基本

  • 插件,擴展和集成
  • 字節轉移
  • DOM複雜性
  • 字體
  • 顏色,細節,圖標,線條,邊框,陰影
  • JavaScript的

高級

  • 延遲加載,延遲或異步資源
  • 跨域資源減少
  • DNS和資產預取/預加載

整理你的CMS

使用插件,擴展和集成進行測量。

使用方法: Query MonitorNew Relic

CDN上的螺栓(Cloudflare)

高級

使用方法: Cloudflare

好主機

你需要做自己的研究才能

使用靜態頁面緩存

而不是每個用戶觸發您的網站加載請求其所有主題和插件來完成該過程來操作結果,為什麼不只是保存頁面和結果或保存該數據庫查詢及其說的內容。

這不適合所有人。 如果你想輕鬆獲勝並且你在一個簡單的網站上,這可能是一個很好的解決方案。

使用方法:用於WordPress, RedisVarnish Cache的 WP RocketTotal Cache

優化您的資源

考慮使用像這樣的工具TinyPNGSquoosh

您還可以做一些高級的事情,例如:

  • 將媒體卸載到例如Amazon S3。
  • 使用像Cloudinary或Imgix這樣的圖像CDN。
  • 模塊化CSS和JavaScript。

使用AMP(?)

AMP項目的核心是嘗試解決互聯網的破壞和緩慢,尤其是移動網路。

您可能希望使用AMP框架,而不是使用普通的HTML,JavaScript和CSS構建示例。 您的網站會很快,但是您會受到他們的指導和限制的限制。

特別是通過自定義JavaScript進行自定義更加技術複雜,因此您的所有廣告,分析等都將受到限制。

這就是說,值得研究。

使用方法: “官方”AMP WordPress插件

你可以做的其他事情

除了上面提到的提示和技巧,您還可以嘗試:

  • Canonical AMP
  • 後載交互改進
  • 關於CSS的新思路

Q&A

以下是Alderson回答的一些與會者問題。

問: 谷歌正在推動移動設備的AMP頁面,但作為設計師,這個選項非常有限。 您是否建議我們使用AMP路線進行移動負載選項?

:正如我們所說,採用AMP是一個重大決定。

至於設計限制,我將看看amp.dev(它是用AMP代碼構建的!),並閱讀他們最近發布的AMPConf的一些內容。

他們已經刪除了一些先前的限制(現在支持自定義JS),他們甚至計劃在50kb CSS限制上更加靈活。

現在還有大量現成的組件,用於最佳練習UI元素等等。 值得去探索。

問: WordPress與Wix等其他平台相比如何?

答:我顯然是一個WordPress書呆子,我很高興地說它是迄今為止最好的CMS和幾乎所有用例的選擇。

它遠非完美,但它比其他任何東西都要糟糕得多。 如果您重視您的業務,您的客戶或您的SEO,請不要離Wix一英里。

問:生產網站的HTTP / 2服務器推送有多穩定?

它得到了廣泛的支持和穩定,然而,緩存存在一些有趣的挑戰和權衡。 使用它時需要非常小心,以及使用它的方法。 你可以在這裡閱讀一篇很棒的文章。

問:我們如何選擇Time to Interactive首先加載什麼?

:您不能輕易選擇首先加載的內容(當然不是現有網站),但您可以選擇加載的內容。

您可以使用延遲加載圖片等技術(Chrome很快就會獲得本機支持!),推遲使用JavaScript或異步加載腳本。 這將使他們不受初始負荷的影響。

有趣的是,瀏覽器在自動化方面也變得更加智能。 Chrome可以很好地確定可見事物的優先級,重要性等等。

當然,它並不總能做到這一點,因此值得仔細檢查所有CSS,腳本和字體的加載方式。

問:是否可以檢查您是否使用HTTP2?

:是的,確實如此! https://http2.pro/check?url=https%3A//yoast.com/

問:在下一代格式中使用圖像有多重要?

答:很好的問題! 新的圖像格式通常更小,更快,更好。 WebP就是一個很好的例子; 它通常比JPG或PNG更好。 但是,支持並不普遍。

您可以使用一些技術來檢測用戶是否有支持,如果沒有,則回退到正常格式。 但這意味著您必須生成,存儲和維護每個資產的兩個版本。 或者,Cloudflare會自動完成所有這些操作!

問:你能談談如何自動緩存頁面嗎? 這樣做有什麼好處?

答:當您加載頁面時,會發生大量進程。 您的CMS會喚醒,對數據庫進行查詢,計算向您顯示的內容等等。所有這些都需要時間。

但對於大多數訪問者而言,大多數情況下,所有這些計算的結果都是相同的。 靜態頁面緩存只保存輸出 – 最終的HTML頁面 – 而是將其提供給用戶。

如果您更改了有關頁面的內容(例如,您在WordPress中更新文章),配置良好的緩存將“清除”該頁面的靜態版本,並使用新版本進行更新。

它還應檢測您是否已登錄,如果是,則繞過其緩存頁面。 WP Rocket和W3 Total Cache可以很好地完成所有這些工作,非常開箱即用。

問:WP上插件的插件數量是多少,還是插件的質量/尺寸更多? 另外,您對在WP中使用Page Builders有何看法,特別是Elementor?

答:這絕對是關於質量/尺寸/影響的。 我看過網站運行50多個插件,所有插件都有用,而且所有插件都具有高性能。

插件不是非常糟糕或緩慢 – 它們只是代碼和功能的容器。 只有當它們編碼嚴重時,或者當它們之間存在重疊時(例如,兩個插件做類似的事情,效率低下)才會出現問題。

像Elementor這樣的Page Builders傾向於增加很多重量,但是,它們提供了大量的功能。 這總是一個權衡!

問:我們使用包含基本CDN的Sucuri Website Security Pro。 將它與Cloudflare結合起來是理想的嗎? 有些文章說是,有些文章不是,但很少有人談論這兩個工具。

答:我不熟悉他們的CDN是如何工作的,但通常情況下,組合它不應該受到傷害。

Cloudflare可能會位於您的網站/ Sucuri CDN的“前方”,這意味著它可以按預期工作,並在Cloudflare“未命中”時回到Sucuri。 值得測試一下!

問:嘗試清理臃腫的WordPress網站的最佳策略是什麼? 加載模板選項中甚至不使用的資產似乎是一個恆速問題。

答:絕對; 值得一試,看看插件在哪裡加載不需要的東西(例如,在沒有聯繫表格的頁面上加載CSS或JS的聯繫表單插件……)

如果您不想涉及代碼, Asset CleanUp是一個用於管理這些類型場景的簡潔插件。

問:我知道這主要是關於單個頁面 – 但是優化網站結構呢? 較重的CSS和JS頁面首先還是重要? 還有,重定向呢?

答:很好的問題 – 這是我想的很多。 事實上,我最近寫了一篇文章,提出(我認為是)為網站建立CSS結構的最佳實踐方法。 它是 – 讓我知道你的想法!

問:如果我使用CloudFlare和WP火箭,我應該在哪個服務上縮小? 兩者都有選擇權。

A:我會離開Cloudflare進行縮小; 那麼你不會給你的服務器帶來額外的壓力。

雖然WP Rocket通過一系列優化來加速您的網站,但這樣做需要花費時間/資源 – 所以您可以卸載到Cloudflare的任何過程都會減少您使網站緊張的過程!

問:我們可以獲得有關AMP的更多信息嗎?

答:當然,雖然我建議去做自己的研究,但這是一個相當廣泛的話題!

該項目的網站(包含所有文檔等)在這裡 。 官方的WordPress插件就在這裡

[影音回顧]如何使您的網站超越快速

觀看下面的網路研討會演示和問答環節的影音回顧。

這是SlideShare:


圖片來源

所有截圖均由作者拍攝,2019年4月

加入我們的下一次網路研討會!

在5月8日星期三東部時間下午2點加入我們的下一個贊助網路研討會,我們將分享電子商務品牌如何通過用戶生成的內容在搜尋結果中脫穎而出。

如何用用戶生成的內容改進電子商務SEO

Close Menu