如何讓你的靜態(tài)網(wǎng)站極速打開

時(shí)間：2023-09-16 22:48:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-16 22:48:02 來源：網(wǎng)站運(yùn)營(yíng)

如何讓你的靜態(tài)網(wǎng)站極速打開：關(guān)于個(gè)人博客，網(wǎng)絡(luò)上已有很多篇文章介紹了如何使用「Github Page」來搭建個(gè)人網(wǎng)站，但是「Github Page」在國(guó)內(nèi)的速度對(duì)于很多讀者來說 體驗(yàn)并不好。本文主要針對(duì)搭建靜態(tài)網(wǎng)站 已有一定經(jīng)驗(yàn)或充滿濃厚興趣 的讀者，介紹 如何提高靜態(tài)網(wǎng)站的訪問速度 的方法，不討論加速 WordPress 等動(dòng)態(tài)網(wǎng)站的內(nèi)容。

如何讓你的靜態(tài)網(wǎng)站極速打開

為什么本文標(biāo)題要寫「靜態(tài)網(wǎng)站」而不是「靜態(tài)個(gè)人博客」，原因很簡(jiǎn)單，這兩者本質(zhì)上都是一堆 HTML,CSS,JavaScript,XML 等文件，只要你的網(wǎng)站是「靜態(tài)的」就可以使用本文推薦的方法。本文不講如何搭建博客，主要從「Page 服務(wù)」講起，分析問題，到如何加快打開速度。個(gè)人推薦使用 CDN 或者騰訊云阿里云學(xué)生計(jì)劃的價(jià)格為 9.5 元/月，峰值帶寬為 5Mbps 輕量應(yīng)用服務(wù)器。

• 為什么你的網(wǎng)站打開速度很慢
• 如何加速網(wǎng)站
• 使用 CDN 加速
• 將網(wǎng)站部署到服務(wù)器

為什么你的網(wǎng)站打開速度很慢

不少人都是從 Github Page 開始的個(gè)人博客之旅，在 Github Page 上部署的網(wǎng)站就是靜態(tài)網(wǎng)站。下面是摘自「維基百科」對(duì)于靜態(tài)網(wǎng)頁的介紹。

靜態(tài)網(wǎng)頁多數(shù)為單一的超文本標(biāo)記語言文件，每次請(qǐng)求該頁面時(shí)，都會(huì)返回相同的內(nèi)容。在網(wǎng)站設(shè)計(jì)期間內(nèi)容只需創(chuàng)建一次。它通常是手動(dòng)編寫的,盡管有些站點(diǎn)使用類似于動(dòng)態(tài)網(wǎng)站的自動(dòng)創(chuàng)建工具,其結(jié)果將長(zhǎng)期存儲(chǔ)為完成的頁面。這些自動(dòng)創(chuàng)建的靜態(tài)網(wǎng)站在 2015 年左右變得更受歡迎，其中包括 Jekyll 和 Adobe Muse 等生成工具。

但是為什么你的靜態(tài)網(wǎng)站打開速度很慢，主要有以下兩個(gè)方面的原因。（由于靜態(tài)網(wǎng)站基本不需要后臺(tái)處理，所以不討論 nginx 的響應(yīng)時(shí)間）

• 「訪問服務(wù)器的網(wǎng)絡(luò)環(huán)境」，由于 GitHub 的服務(wù)器基本沒有部署在國(guó)內(nèi)，導(dǎo)致了我們要訪問服務(wù)器不管是在物理距離還是網(wǎng)絡(luò)距離都十分遙遠(yuǎn)，加上一些訪問的限制，導(dǎo)致用戶訪問服務(wù)器得到響應(yīng)的時(shí)間過長(zhǎng)，打開速度對(duì)于國(guó)內(nèi)用戶并不友好。
• 「帶寬與文件大小的不匹配」，如果服務(wù)器部署在國(guó)內(nèi)，那么基本不會(huì)出現(xiàn)第一個(gè)問題，但為什么還是有些網(wǎng)站還會(huì)打開龜速呢？一般就是因?yàn)樵L問網(wǎng)站資源文件過大，超出了原有的帶寬上限，比如將一張 3MB 大小的圖片放到一個(gè)帶寬僅有 1Mbps 的服務(wù)器，打開含有該圖的網(wǎng)頁時(shí)，一般需要幾十秒的時(shí)間。

談?wù)劽赓M(fèi)的 Page 服務(wù)

Github Page 是非常良心而且穩(wěn)定的服務(wù)，但在國(guó)內(nèi)效果不太好。Coding Page 我使用了 2 年多時(shí)間，由于該服務(wù)經(jīng)常崩潰，導(dǎo)致博客時(shí)常無法訪問，在網(wǎng)上抱怨其表現(xiàn)的帖子也數(shù)不勝數(shù)，但是作為一個(gè)免費(fèi)的服務(wù)，我們也不好要求太多，后來我將靜態(tài)網(wǎng)站從 Coding Page 遷移到了自己的服務(wù)器。對(duì)于 Gitee 等其他的 Page 服務(wù)我沒有體驗(yàn)過，也就不作出過多的評(píng)價(jià)。

如何加速網(wǎng)站

主要推薦兩種方法，使用 CDN 加速和部署到服務(wù)器，兩種方式各有優(yōu)劣。CDN 的使用稍微簡(jiǎn)單，如果有一定的 Linux 服務(wù)器使用經(jīng)驗(yàn)，并且年齡在 25 歲以下，推薦使用申請(qǐng)阿里云學(xué)生計(jì)劃的輕量應(yīng)用服務(wù)器部署，而且服務(wù)器還可以有更多的用途。

事前準(zhǔn)備

本文講的是如何讓你的網(wǎng)站打開極速，所以你的網(wǎng)站和域名應(yīng)該是已經(jīng)申請(qǐng)好的，下面是你需要準(zhǔn)備好的東西。

• 已備案的域名?，F(xiàn)在國(guó)內(nèi)的 CDN 云服務(wù)商必須使用已備案的域名才可使用 CDN 加速功能，如果想通過域名訪問自己的網(wǎng)站，服務(wù)器也基本都需要已經(jīng)備案的域名
• 已生成好靜態(tài)網(wǎng)站。例如在 hexo 中就是生成的 public 或 .deploy_git 文件夾，你在 GitHub Page 部署的內(nèi)容也就是這里所說的靜態(tài)網(wǎng)站

使用 CDN 加速

據(jù)我了解，還是有很多人不太理解 對(duì)象存儲(chǔ) 和 CDN。 首先以我的理解，簡(jiǎn)單科普一下，對(duì)象存儲(chǔ)可以理解一個(gè)數(shù)據(jù)中心，這里存放了你上傳的文件資料。對(duì)于各家來說，對(duì)象存儲(chǔ)有著不同的名字，阿里云的 OSS 和騰訊云的 COS 雖然名字不同，但是他們都是對(duì)象存儲(chǔ)。 CDN 則可以理解為分布在各個(gè)地區(qū)的機(jī)器，他們緩存了對(duì)象存儲(chǔ)的數(shù)據(jù)，如果你需要請(qǐng)求一個(gè)東西，直接找到最近的 CDN 節(jié)點(diǎn)問，就可以拿到對(duì)應(yīng)的緩存數(shù)據(jù)，這樣大大降低了訪問服務(wù)器的時(shí)間。如果 CDN 上沒有你要的內(nèi)容，那么就去源站（可能是對(duì)象存儲(chǔ)，可能是你設(shè)置的網(wǎng)站地址）那兒拷貝一份數(shù)據(jù)，這個(gè)過程產(chǎn)生的流量即「CDN 回源流量」

使用圖床加速

在介紹博客搭建的文章中，一般在搭建好了之后，都會(huì)推薦使用圖床，那么為什么要使用圖床？目的就是為了減少對(duì)于站點(diǎn)帶寬的使用，僅僅一張 3MB 的圖片（這里舉個(gè)例子，大部分時(shí)候都應(yīng)該在盡量不損失觀看效果的情況下壓縮圖片體積），對(duì)我們買的僅有 1Mbps 或者 5MBps 帶寬的服務(wù)器來說在傳輸上就已經(jīng)不堪重負(fù)，所以我們要使用圖床進(jìn)行加速，打開網(wǎng)站加載圖片時(shí)從 CDN 加速域名那兒獲取內(nèi)容，減少服務(wù)器的帶寬壓力。 網(wǎng)上的教程也十分多，這里就不再贅述。

設(shè)置源站直接加速

CDN 一般與 OSS 配合使用，但是在前講了對(duì)象存儲(chǔ)可以理解為一個(gè)數(shù)據(jù)中心，CDN 負(fù)責(zé)的只是從數(shù)據(jù)中心拿到文件然后緩存到自己的磁盤，那么 Github Page 或者部署使用的服務(wù)器當(dāng)然也可以是一個(gè)數(shù)據(jù)中心，存放了你的網(wǎng)站內(nèi)容，所以我們可以設(shè)置源站地址，直接通過 CDN 加速。

以我使用的七牛云為例，設(shè)置好源站，測(cè)試通過之后即可開啟 CDN 加速。注意這里創(chuàng)建的加速域名就是你的網(wǎng)站地址

全站使用對(duì)象存儲(chǔ)

由于靜態(tài)網(wǎng)站都是一些已經(jīng)生成好的靜態(tài)文件，所以還可以將整個(gè)網(wǎng)站（即生成的所有文件）直接存儲(chǔ)到對(duì)象存儲(chǔ)中，配合 CDN 來進(jìn)行加速。 這種方式涉及到了一個(gè)問題，刷新 CDN 緩存，由于數(shù)據(jù)是被不同的 CDN 節(jié)點(diǎn)緩存的，在更新網(wǎng)站的時(shí)候很多的節(jié)點(diǎn)還有之前緩存的內(nèi)容，在你更新之后無法第一時(shí)間看到你的網(wǎng)站修改，這對(duì)于我來說是不可忍受的。當(dāng)然這個(gè)問題也有對(duì)應(yīng)的改善方法

• 一般來說推薦設(shè)置「緩存時(shí)間」，但是肯定肯定會(huì)有延時(shí)，一般推薦的網(wǎng)站文件的更新時(shí)間都是一天，當(dāng)然也可以設(shè)置成 1 個(gè)小時(shí)更新一次，具體效果沒有試驗(yàn)過。
• 是在部署時(shí)手動(dòng)刷新 CDN，一般需要找別人寫的插件，官方只提供了根據(jù) URL 刷新的接口，但是據(jù)我了解在 hexo 中也有在部署時(shí)刷新更新文件的插件，具體效果也沒有試驗(yàn)過。

將網(wǎng)站部署到服務(wù)器

將網(wǎng)站部署到服務(wù)器，對(duì)于國(guó)內(nèi)的用戶訪問比較便捷，由于我所學(xué)的是計(jì)算機(jī)專業(yè)，對(duì)于服務(wù)器相對(duì)熟悉一點(diǎn)，所以我在實(shí)際過程中使用的是這種方法。

服務(wù)器帶寬與流量

騰訊云和阿里云都有對(duì)于學(xué)生的優(yōu)惠計(jì)劃，一個(gè)月只需要 10 元左右，價(jià)格優(yōu)惠。但是我主要推薦使用阿里云的有 5Mbps 的 輕量應(yīng)用服務(wù)器，點(diǎn)擊 鏈接 可進(jìn)行申請(qǐng)，之前條件是「學(xué)生以及 25 歲以下新用戶」可申請(qǐng)，現(xiàn)在改為「未購(gòu)買過服務(wù)器、數(shù)據(jù)庫(kù)和存儲(chǔ)產(chǎn)品的學(xué)生新用戶」，一次可以只購(gòu)買一個(gè)月，然后續(xù)費(fèi)也是 9.5 元/月。

這個(gè)套餐中含有 1T 的流量，首先簡(jiǎn)單介紹一下，對(duì)于大多數(shù)國(guó)內(nèi)的服務(wù)器來說，流量的計(jì)算只計(jì)算下行流量，簡(jiǎn)單理解就是只計(jì)算客戶端從服務(wù)器下載的內(nèi)容大小，如果從別人的網(wǎng)站下載到你的服務(wù)器這一部分是不計(jì)算流量的。對(duì)于 5Mbps 的服務(wù)器來說，我們假設(shè)每秒的下行網(wǎng)速是 400KB/s，那么一個(gè)月按照 30 天計(jì)算每秒都是 400KB/s 計(jì)算一個(gè)月使用的總流量。

400 * 60 * 60 * 24 * 30 / 1024 / 1024 = 998.77 GB計(jì)算可知，即使在每時(shí)每刻跑滿帶寬的近 70%，一個(gè)月下來也達(dá)不到服務(wù)器的流量上限，更何況正常情況下我們的服務(wù)器也不會(huì)一直持續(xù)在這個(gè)下行網(wǎng)速，總結(jié)來說，阿里云的學(xué)生計(jì)劃就兩個(gè)字，良心！

為了演示和騰訊云的學(xué)生計(jì)劃以及阿里學(xué)生計(jì)劃中 ECS 服務(wù)器區(qū)別，我借了一臺(tái) 1Mbps 的學(xué)生機(jī)，通過下載可以看到明顯的帶寬瓶頸，1Mbps 的服務(wù)器穩(wěn)定速度只有 120KB/s 左右，而 5Mbps 服務(wù)器則穩(wěn)定在 600KB/s 左右。也就是說如果你的網(wǎng)站首頁的內(nèi)容超過 100KB，就會(huì)受到帶寬的限制，在多人同時(shí)訪問時(shí)影響尤為明顯。

Nginx 部署

一般在服務(wù)器部署使用的是 Nginx 的部署方式，簡(jiǎn)單介紹一下 Nginx 的使用方法，對(duì)于使用不太熟練的同學(xué)請(qǐng)積極使用搜索引擎或請(qǐng)教別人。

// 安裝 nginx$ sudo apt-get install nginx// 查看 nginx 的配置文件路徑，檢查配置文件語法$ nginx -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful// 啟動(dòng) nginx$ nginx// 修改配置文件之后重啟 nginx$ nginx -s reload// 停止 nginx$ nginx -s stop我創(chuàng)建了 /etc/nginx/sites-enabled/blog.cugxuan.cn 作為配置文件，按照對(duì)應(yīng)的路徑寫入配置。對(duì)于 HTTPS 的配置請(qǐng)查詢你使用的云服務(wù)商的對(duì)應(yīng)配置文檔。

server { listen 80; server_name blog.cugxuan.cn; access_log blog.cugxuan.cn.log; error_log blog.cugxuan.cn.error; location / { root /root/blog.cugxuan.cn; index index.html index.htm; } # 強(qiáng)制跳轉(zhuǎn) HTTPS rewrite ^(.*) https://$server_name$1 permanent; error_page 500 502 503 504 /50x.html; location = /50x.html { root html; }}server { listen 443; server_name blog.cugxuan.cn; #填寫綁定證書的域名 ssl on; ssl_certificate tecent-ssl/blog.cugxuan.cn/Nginx/1_blog.cugxuan.cn_bundle.crt; ssl_certificate_key tecent-ssl/blog.cugxuan.cn/Nginx/2_blog.cugxuan.cn.key; ssl_session_timeout 5m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照這個(gè)協(xié)議配置 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照這個(gè)套件配置 ssl_prefer_server_ciphers on; location / { root /root/blog.cugxuan.cn; #站點(diǎn)目錄 index index.html index.htm; }}

Gzip 加速

使用 Nginx 部署之后很多同學(xué)還是沒有將 Nginx 的能力利用到最大化，Nginx 還有一個(gè)很常用的配置就是 開啟 Gzip 加速，下圖是對(duì)于我博客中搜索功能需要導(dǎo)入的 search.json 是否開啟 Gzip 的對(duì)比。從圖中可以看到，在開啟了第 4 級(jí)的壓縮之后傳輸?shù)奈募笮】s小了一半多，請(qǐng)求時(shí)間也大大減少。

修改 /etc/nginx/nginx.conf，在 http 的配置中修改 gzip 設(shè)置，最關(guān)鍵的是需要注意 gzip_types，默認(rèn)的配置中有很多選項(xiàng)沒有包括，如 application/json。

http{ ... gzip on; gzip_min_length 1k; #低于1kb的資源不壓縮 gzip_comp_level 4; #壓縮級(jí)別【1-9】，越大壓縮率越高，同時(shí)消耗cpu資源也越多，建議設(shè)置在4左右。 gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/json; #需要壓縮哪些響應(yīng)類型的資源，多個(gè)空格隔開。不建議壓縮圖片 gzip_disable "MSIE [1-6]/."; #配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因?yàn)閕e低版本不支持） gzip_vary on; #是否添加“Vary: Accept-Encoding”響應(yīng)頭 ...}那如何尋找沒有添加的 type 呢？我們打開 Chrome 的「開發(fā)者工具」，打開自己的網(wǎng)站，對(duì)于「Network」中請(qǐng)求自己網(wǎng)站的包，看是否啟動(dòng) Gzip，如果「Response Headers」顯示「Accept-Ranges: bytes」則表示該包沒有開啟加速，可以將「Content-Type」后面的值填入「gzip_types」并且使用空格隔開。

雖然我的博客圖片都是使用圖床進(jìn)行加速，但是還需要補(bǔ)充的一點(diǎn)是最好 不要將圖片格式進(jìn)行 Gzip 壓縮，因?yàn)楝F(xiàn)在大多數(shù)在傳輸上的壓縮方案都對(duì)圖片效果不太好，而且壓縮和在客戶端解壓會(huì)消耗 CPU 性能而影響網(wǎng)頁渲染速度。推薦的方法是在上傳圖片前使用圖片壓縮工具在盡量不降低顯示效果的情況下縮小圖片體積。

總結(jié)

總結(jié)來說也就是從兩個(gè)方向入手，在不損失效果的前提下，加大帶寬或者使用 CDN 節(jié)點(diǎn)，減小文件體積。如果大家在配置的過程中遇到問題查找不能解決，請(qǐng)積極提交工單，云服務(wù)商的技術(shù)客服基本都能解決你遇到的問題。 雖然各種網(wǎng)盤搭建的文章層出不窮，但是大部分文章只寫搭建，不介紹后續(xù)的維護(hù)和優(yōu)化，導(dǎo)致很多用戶在使用個(gè)人博客的時(shí)候也是虎頭蛇尾，寫了一兩篇文章就不了了之。作為一個(gè)使用 hexo 三年的個(gè)人博主，我對(duì)于如何更新和維護(hù)個(gè)人博客也有一定的心得，如果大家有興趣，下次可以講講如何維護(hù)和更新 hexo 博客。