Key Words:靜態化,偽靜態,預加載,懶加載

自1.24建站以來一直沒有發新post,因為訪問該站時的TTFB一直久居不下(現在也是),成為我心頭之痛,這幾天一直狂想優化訪問速度的辦法。終於,今天摸索的結果還算提升了一點使用者的體驗,可以在PC端表現得更流暢,移動端也因為有像WeChat內置瀏覽器的加載效果讓人部分忽略等待頁面加載所花的時間(所以到底在WeChat的加載頁面上花了多少時間啊喂)。
這篇post就說說在這個探索過程中所遇到的坑,和目前所選擇的優化方案。


2021.03.30號更新!!
果然什麼優化都比不過系統架構優化來得猛,自從服務器長把服務器從Windows Server升級到Linux之後,,,
速度直接起飛了.....

現在加載速度如圖,之前是 2s~4s 不等

New Website loading time consumption
New Website loading time consumption

這還優化個屁!收工


讓主頁更快!

輸入域名Enter——進入網站主頁——等了一年3 4秒——Ctrl+W退出並大大咧咧地罵了幾句辣雞站長,加載辣麼慢

網站的門面的訪問速度很大程度影響了訪客的留存率,要是還是一開始的訪問主頁速度真是大災難了...

於是!經過多方搜索,我最後採用了首頁靜態化的解決方案,把本來需要訪問index.php(調用php真的是災難)變成訪問index.html,速度直接起飛!首頁本就沒有太多需要動態互動的元素,而且目前頁頭頁腳各js在html上也表現得正常~ 所以直接直接採用首頁靜態化!
方法如下:

  1. 調用一個cache.php腳本(可隨意命名)生成主頁html;
  2. 在服務器後台(我的是寶塔面板)修改index.html的優先級;
  3. 如果配置了偽靜態的話,除掉index.php的後綴,在一級域名就可以直接訪問html的主頁啦!

生成主頁靜態html

修改頁面優先級或指定主頁文件

消除最後的.php


讓頁面看起來切換得更快!

鼠標指向預加載


讓網站更美!

更有逼格——今日詩詞

本來是想用一言的,但這個應用直接有API就免了很多麻煩,先用一段時間hhh
添加方式很簡單,選好某頁面顯示的地方插入這段代碼就好了:(通常會放在footer.php或者header.php裡面,我就放在了頁腳,因為比較契合手機端和電腦端的主題~)

<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

最後附上今日詩詞的網站,還有很多高級用法,有空再探索一下。


由於又是早八,有時間再繼續寫啦~

該post頂部圖來源
參考文章“typecho首頁靜態化