前兩天有被問到一個網站媒體資源加載速度優化的問題，今天這里單獨分享一下。

情況是這樣的，張三在網站的頂部放了一個視頻，主要內容便是工廠的全景視頻介紹，看起來非常的高大上。

不同于傳統的使用第三方分享鏈接的做法，張三是直接將這個視頻放在自己的網站上的。

這就導致一個問題，網站頁面在加載的過程中會非常耗時，單單這個視頻的加載就需要十多秒鐘，外加頁面上其他內容的加載肯定就需要比較長時間了。

怎么解決現在的問題？

首先肯定是要解決這個視頻大小的問題了，不改變既定方案的話，最佳的做法肯定是使用 GIF 動效圖片去替代這個視頻。

視覺效果上沒什么影響，可以的話加點圖片文字的效果進去，感官體驗上可能會更好，且更關鍵的是頁面的加載速度能提升得非常明顯。

其次就需要一些常規的頁面優化技巧了。

比如頁面的內容的懶加載、圖片資源的壓縮等等之類的，這部分內容使用緩存插件基本都能實現出來。

上述這樣的措施做完，頁面的加載速度大概率能回到正常范圍，可能因為這種大圖的緣故還是需要 4-5 秒左右的加載時間。

如果想這類媒體資源的加載速度更快一些，就需要使用 CDN 技術了。

其實 CDN 并不是什么高大上的技術，通俗點講就是相關服務商把你的媒體資源拷貝很多很多份，然后放在全世界不同地域的服務器上。

有了這樣的操作之后，當地用戶肯定就能從物理位置最近的服務器上獲取到你的網站內容，訪問速度自然也就上去了。

要想實現這樣的效果，基本的方案有兩種。

第一種是購買付費版本的緩存插件，然后選擇對應的 CDN 服務，緩存插件自然就會將后續的所有操作自動處理好了。

如果你只有一兩個網站，且懶得折騰技術這塊內容，這類付費方案肯定是最合適的。

第二種則是我們自己手動托管網站的多媒體資源，然后借助這類免費服務的能力來實現 CDN 托管的目的。

目前的免費方案，我肯定是推薦 Cloudflare 平臺了，不僅有 10G 的免費空間大，而且每天的流量請求額度也異常大。

具體的做法就是三步，先去平臺創建一個圖片服務，然后將自己需要托管的媒體資源上傳上去并生成訪問鏈接，最后將這個訪問鏈接填寫到我們的網站上。

具體的搭建教程，可以搜索下「Cloudflare 圖床搭建」這樣的關鍵詞，能找到非常多資源。

注：最好用英文搜索，老外做的一些教程真的非常細致，老奶奶看完都可以上手操作。

這里再補充一個開源的圖床管理軟件，有了這款軟件的幫助我們便可以實現類似圖片網盤那樣的功能，于是就可以非常方便的管理我們的線上托管資源了。

這種方案是我接觸下來，屬于新手友好類型的那一類吧。