​

上篇，我們已經瞭解了網站速度的三大支柱，現在我們可以分別具體深入探討一下。

AMP及其優勢

什麼是AMP，它是如何工作的？

谷歌AMP是一個開源框架，建立的移動網頁中位數載入時間為500毫秒。通過簡化HTML並對CSS和JavaScript實施嚴格的限制，AMP能夠為移動web創造更好更快的體驗。隨後這些網頁在谷歌伺服器上快取並預渲染，通過這種方式實現快速交付。

AMP頁面為來自谷歌SERP的流量提供了500毫秒的中位數頁面載入時間。能達到這種速度，是因為在使用者點選連結到AMP頁面之前，谷歌伺服器就已預抓取並預渲染AMP內容到使用者的瀏覽器上。對於一般的電商網站來說，谷歌搜尋（包括自然搜尋和付費搜尋）大約佔其流量的50%，所以這些優勢可以應用於您的大部分流量。

使用AMP的網站還可以看到跳出率的降低，因為通常在等待頁面載入時可能會跳出的使用者，現在將得到閃電般快速的體驗。

改變遊戲規則

我們來看看，AMP+PWA是如何改變遊戲規則的：AMP和漸進式Web應用程式（PWAs）的結合覆蓋了從搜尋開始的整個使用者瀏覽過程，帶來端到端的快速體驗。購物者從谷歌SERP載入AMP頁面，然後在瀏覽AMP頁面時，在後臺載入PWA版本網站所需的資源。這樣，當用戶採取行動（例如點選網站上的任何地方）時，PWA已經開始為後續頁面預載入內容，從那裡開始，所有剩餘的轉換都是客戶端渲染的瀏覽轉換，而不是新的交付。

為什麼用AMP

就速度而言，AMP和PWA結合是天作之合，但從開發角度來看卻是一場噩夢。有效地支援這項技術需要建立兩個網站版本——一個使用編寫前端的語言(通常是JavaScript或CSS )，另一個遵循AMP專案的標準——而這僅僅是個開始——每一個bug修復、佈局變更、新功能等等可能都需要傳播到AMP和PWA程式碼庫。

而在React Storefront框架下，Layer0能幫助開發人員更輕易地在React應用中支援AMP。 

兩個案例       

零售業新秀的表現勝過數十億美元的競爭對手！

時裝零售商AKIRA 通過使用Layer0 AMP技術，不僅僅從搜尋開始就交付即時的首頁載入，同時在關鍵短語上排名超過亞馬遜、諾德斯特龍、Zappos等其它大品牌。

​編輯​編輯

在使用Layer0技術之前，AKIRA的首頁平均載入時間為4.8秒，這一表現很平淡無奇，有了Layer0的技術加持，頁面的載入時間減少到2.5秒。 

AKIRA利用Layer0內建的先進技術改善了結果，並達到了亞秒級的頁面載入速度；具有服務端渲染和AMP轉換的電商PWA，Layer0 “JavaScript即CDN”（Layer0 CDN-as-JavaScript）為邊緣的動態內容提供了95%以上的快取命中率（並使網站領先購物者5秒），Layer0無伺服器JavaScript服務於前端的後端，用於優化伺服器和API。

該零售商借助Layer0在許多領域都獲得了立竿見影的提升:

​編輯

Lighthouse也很好地反映了這些改進——AKIRA的效能得分提高了36分，超過了75%的網站，併為客戶提供了更好的瀏覽體驗。 

Annie Selke是另一個傑出的例子，說明對網站速度的投資可以幫助零售商在搜尋引擎結果頁面上提升排名。

在選擇Layer0之前，家居和裝飾零售商Annie Selke甚至沒有出現在谷歌搜尋結果上。如今，Annie Selke的自然流量增長了32%，移動自然流量增長了40.41%，超過了價值數十億美元的競爭對手。

對於AKIRA和Annie Selke這樣的線上零售商來說，效能良好的移動網站是唾手可得的。這可能正是他們所需要的，以面對來自亞馬遜、諾德斯特龍和Zappos等電商巨頭的無情競爭。

網站速度越快，排名就越高，這就像是即時的、有保證的SEO。在Layer0的客戶中，有很多例子可以證明這一點。AKIRA、Annie Selke和Shoe Carnival只是其中幾個例子，他們的排名超過了包括亞馬遜在內的許多大牌公司。

Layer0的技術優勢

Layer0結合了多種先進技術來加快電商的發展速度:

• 支援服務端渲染和AMP轉換的電商PWA 

• 預測性預取

• JavaScript 即CDN（CDN-as-JavaScript）為邊緣的動態內容提供95%以上的快取命中率，使網站比購物者領先5秒。

• Layer0 無伺服器JavaScript服務於前端的後端平臺優化了伺服器和API。

​編輯

下面分別介紹和討論一下Layer0的相關技術優勢：

1、什麼是伺服器端渲染，它是如何工作的？其優勢是什麼？

伺服器端渲染（又稱SSR）是一種流行的技術，用於在伺服器上渲染通常只有客戶端的PWA頁面，然後將完全渲染的頁面傳送到瀏覽器。隨後客戶的JavaScript bundle接管，PWA可以正常執行。SSR本質上是在伺服器上將JavaScript頁面翻譯成HTML，是搜尋爬蟲和瀏覽器都能理解的語言。這可以確保瀏覽器和搜尋爬蟲可以很容易地傳遞和索引您的頁面。

使用SSR的一個主要優勢是，可以擁有一個能被所有搜尋引擎抓取和索引的應用程式，這有助於SEO以及向社交媒體渠道提供元資料。

通常情況下，SSR也有助於提高效能，因為在第一次請求時，伺服器會發送一個完全載入的應用程式。不過，對於比較複雜的應用程式，過程可能會有所不同，因為SSR需要的設定可能會有點複雜，而且會給伺服器帶來更大的負載。值得慶幸的是，有一些現成的服務和工具不會顧此失彼，比如同構前端和支援開箱即用SSR的Layer0。

最後，是否在網站上使用伺服器端渲染取決於您的具體需求，並且基於您的使用情況進行權衡考量。

2、什麼是現代CDN和邊緣計算？

邊緣計算是一種網路理念，致力於使計算更接近資料來源，並在此過程中減少延遲和頻寬使用——可以通過使用許多不同的技術來實現——讓計算更靠近網路邊緣（使用者的電腦、物聯網裝置或邊緣伺服器），可以最大限度地減少客戶端和伺服器之間的長距離通訊。

具有邊緣計算能力的CDN通過將內容傳輸到離使用者最近的CDN PoP節點，以此來減少從網站伺服器到使用者瀏覽器的傳輸時間，比如，舊金山的使用者可以從舊金山南部的PoP節點獲得內容，而紐約的使用者可以從布魯克林的PoP節點獲得內容。

3、Layer0 “JavaScript 即CDN”（CDN-as-JavaScript）的優勢

為了確保更快的頁面載入，CDN在多個地理位置儲存網站的快取版本。每個這樣的PoP節點都包含許多快取伺服器，負責向附近的訪客交付內容。 

Layer0的“JavaScript 即CDN”將這個概念帶到了另一個層次。這是一個應用感知型CDN，能夠理解您的應用。使用和您的前端開發人員相同的語言，並讓您完全控制快取。因此，使用Layer0的網站在邊緣的動態內容的快取命中率達到95%以上。 

Layer0 “JavaScript 即CDN”的邊緣計算功能通過預測性預取技術，將使用者最有可能在接下來要瀏覽的頁面在請求之前將它們傳輸到邊緣，比購物者提前5秒鐘，在使用者點選連結之前，它們已被快取並準備好供使用者使用。

總結            

頁面載入的時間過長極大影響使用者的體驗和網站的搜尋排名。

AMP部分解決了這個問題——實現極速的搜尋首頁載入，但這只是成功的一半，提高網站速度需要付出額外的努力和更全面的方法——結合加速移動頁面(AMP)、現代行動式前端、服務端渲染(SSR)和具有邊緣計算能力的CDNs等技術。 

Layer0幫助複雜、動態的電商網站達到亞秒級速度，同時提高開發速度和盈利增長，並降低開發運維成本。Layer0的“JavaScript 即CDN”為動態內容提供95%以上的快取命中率，而其他CDN只有15%。

Layer0始終為擁有數十個標籤和指令碼的大型電商網站交付低於500毫秒的頁面載入中位值時間，更不用說動態定價和實時庫存查詢了。眾所周知，這些速度提升會帶來15-30%的轉換率提升和更好的可見性、觸達率，並最終帶來更高的營收。

​編輯

 ​編輯​