加速部落格體驗：靜態資源最佳化技巧大揭秘！

努力的小雨發表於2024-04-28

如今有許多人涉足部落格寫作，其中大多數正處於部落格創作的旅程中。每位程式設計師都夢想擁有自己的伺服器，理想情況下，伺服器配置越高越好，價格越實惠越好。購買一臺基礎款伺服器用於建立部落格是一個不錯的選擇，因為並不需要處理大流量。這完全是出於個人興趣和堅持寫作的良好習慣。

當然了寫部落格都會插入圖片的時候，畢竟一篇圖文並茂的博文才更吸引讀者的注意，但是反之而來的問題就出現了，圖片的載入速度完全跟我們自己的伺服器頻寬有很大的影響，但是頻寬越高價格也就越貴，所以單獨去配置一下媒體的快取。本篇就以這個問題展開來解決一下。

靜態資源加速方式

在本文中，我將重點介紹我熟悉且經常使用的方法，包括但不限於圖片壓縮、Nginx靜態資源快取以及類似EdgeOne這樣的CDN產品。透過這些方式，我們可以提高網站的效能和使用者體驗，有效地解決圖片載入速度受頻寬影響的問題。

圖片壓縮

這個方式是我想到最簡單的，而且也不用花錢，完全就是靠自己使用程式碼實現的一個效果。現在有很多程式碼都可以去實現這類功能，我這裡主要使用Java程式碼去實現的功能。可以簡單看下實現：

// 從URL下載圖片並儲存到本地儲存中
File savedImage =  FileUtil.file(imagePath);
HttpUtil.downloadFile(imgUrl,savedImage);
log.info("高畫質圖片已生成：{}",imagePath);
//縮圖地址
String scalePath = rootPath + "/scale-images/" + png;
//webp檔案直接複製
if ("webp".equals(extension)) {
    FileUtil.copy(imagePath, scalePath, true);
} else {
    File scaleImage =  FileUtil.file(scalePath);
    //hutool的工具類直接使用壓縮
    ImgUtil.scale(savedImage,scaleImage, 0.15f);
}
log.info("縮圖片已生成：{}",scalePath);
ImgDetailLog imgDetailLog = new ImgDetailLog();
//直接使用檔案路徑對映儲存下來
baseMapper.insert(imgDetailLog);
StringRedisUtils.add(saveKey, hex16);

這段程式碼只是冰山一角，可以想象到，如果採用這種方法，你需要編寫一個完整的部落格平臺，或者修改現有平臺以實現這一功能：使用者在瀏覽文章時體驗壓縮後的內容，以提高使用者體驗；下載時則可獲取高畫質圖片。這將涉及大量的程式碼修改，而我們顯然沒有足夠的時間來完成這一任務。

Nginx靜態資源快取

相比之前的步驟，這部分要簡單得多，無需進行大規模的程式碼更改，只需在您的伺服器上新增一個Nginx元件即可。Nginx具有多個主要功能：負載均衡，這是非常常見的功能；另一個是動靜結合，可以讓靜態圖片或資源直接通知瀏覽器進行快取。這也是常見的應用場景，另外，您還可以為Nginx單獨配置一個靜態目錄。

讓我們簡要說明一下：可以透過簡單地通知瀏覽器快取圖片30天來提高效能。此外，還可以考慮對JavaScript、CSS等檔案進行類似的處理。

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
    expires      12h;
    error_log /dev/null;
    access_log /dev/null;
}

這樣做的好處是可以有效地減輕伺服器資源佔用的頻寬壓力，然而其中一個缺點在於當瀏覽器禁用快取時會出現問題。另外，刪除了快取，請求仍然也會繼續進入伺服器佔用頻寬。

image

除了開發人員外，很少有其他人願意禁用快取，因為在開發過程中快取會耽誤我們的工作。因此，我通常會保持快取關閉的狀態，以防止出現意外錯誤。

EdgeOne

在前幾篇文章中，我已經詳細介紹了EdgeOne的主要功能，包括邊緣函式和Web安全防護功能。今天我們再來探討另一個功能，即加速功能，除此之外，還有其他一些小功能也值得探索，這些功能都非常適合用於部落格系統的加速。你可以將EdgeOne理解為擁有Nginx功能的同時又能夠進行視覺化配置。

靜態加速

首先，讓我們來詳細討論EdgeOne的主要功能——加速。它消除了之前提到的兩種方式的缺點，但同時也可能增加一定的費用支出，因此在選擇是否使用該功能時，也需要考慮個人的需求。

image

EdgeOne具有設定自定義快取時間的功能，例如，如果我們在Nginx上配置了30天的快取時間，那麼我們可以在EdgeOne上修改這個時間，或者直接使用預設的快取設定。我預設使用我們的快取配置，並且還具有離線快取功能。如果我的網站出現當機情況，EdgeOne可以從離線快取中獲取資源，而無需訪問我們的伺服器，這意味著可以使用之前快取的資源來顯示網站內容。這對於靜態網站來說是非常有用的功能。

image

然而，我們發現了一個問題，即無法阻止瀏覽器禁用快取。儘管無法完全禁止此行為，但是EdgeOne擁有節點快取功能，這是預設CDN提供的服務之一。

image

讓我們看一下沒有進行加速最佳化的效果。

image

加速效果十分顯著，因為我通常使用高畫質圖片，所以每張圖片載入時間基本在8秒左右，受限於我的頻寬。不過，配置了EdgeOne快取後，可以明顯感受到載入速度提升，基本在1至2秒之間即可完成載入，而且不會給我的伺服器頻寬帶來額外壓力。

image

image

再來看一下快取分析結果：可以觀察到絕大部分流量都在EdgeOne上，而伺服器的響應則非常有限。

image

image

網站證書

如今，大多數網站已經實現了HTTPS訪問。這不僅讓使用者感到網站更加安全可信，也符合國家推行的HTTPS訪問政策。回想起幾年前，我還曾經親自操作生成免費證書並安裝，雖然操作熟練，但仍需耗費將近1小時的時間。而現如今，EdgeOne提供了免費證書一鍵安裝功能，使用起來非常方便，讓我受益匪淺。

image

http重定向到https

為什麼有些使用者會習慣使用非加密的HTTP而不是加密的HTTPS呢？比如說，我通常很少在網址前加上“s”。但是現在許多網站都會將HTTP請求重定向到HTTPS，這也是我之前為了我的網站進行過配置的原因。當然，這些重定向操作都是在Nginx上進行的。

#   server {
#         listen 80;
#         listen [::]:80;
#     server_name 域名;
#     return 301 https://域名$request_uri;
#     }

確實，雖然不是特別費勁，但是還是有點麻煩，不過EdgeOne也提供了一鍵配置的功能，讓操作更加便捷。

image

剩下的就不一一列舉了，總的來說，這些基本上已經足夠滿足我的需求。

總結

在部落格寫作中，靜態資源加速方式是解決圖片載入速度的關鍵。透過圖片壓縮、Nginx靜態資源快取和EdgeOne等CDN產品的應用，我們提高了網站效能和使用者體驗，減輕了伺服器頻寬壓力。EdgeOne的功能包括靜態加速、網站證書和HTTP重定向至HTTPS，簡化了網站管理流程，提升了安全性。合理利用這些靜態資源加速方式，部落格創作者可以享受更優秀的寫作環境和展示平臺。

相關文章