WordPress網站訪問慢解決方案(超詳細圖文教程)

當年的春天發表於2020-10-14

前言

之前自己搭建一個WordPress個人網站:https://zhanghan.xin;最近發現訪問比較慢,於是乎進行了排查,下面是優化的方案。

優化前:

  • 載入耗時:21秒+

優化後:

  • 載入耗時:250毫秒

優化後訪問速度提升84倍+

解決方案流程圖

  • 流程圖
    在這裡插入圖片描述

問題&解決方案&驗證

  • 定位問題(載入一個CSS超時)

在這裡插入圖片描述

  • 解決步驟

    • 下載訪問超時的CSS(Google瀏覽器中F12中可以找到載入CSS地址)並儲存到本地(用可以連上google網路)
https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C700%2C400italic%7COpen+Sans%3A400%2C700%2C400italic%7CMontserrat%3A400%2C700&subset=cyrillic%2Clatin%2Clatin-ext%2Cgreek-ext

在這裡插入圖片描述
在這裡插入圖片描述

  • 檢視當前WordPress使用主題(通過其他載入正常css可以看出當前使用bento主題)
    在這裡插入圖片描述
  • 進入伺服器WordPress程式及當前使用主題目錄下
cd /www/wwwroot/zhanghan.xin/wp-content/themes/bento/

在這裡插入圖片描述

  • 查詢引用css的檔案(在此以all.css為例,因為從F12結果可以看出all.css是本地載入)
find . | xargs grep -ril 'all.css'

在這裡插入圖片描述

  • 檢視functions.php內容,並定位到all.css位置,通過分析找出載入google的css程式碼
vim functions.php

在這裡插入圖片描述

  • 修改程式碼從本地讀取css檔案
    在這裡插入圖片描述

  • 將本地之前下載好的css.css上傳到伺服器當前主題檔案目錄下
    在這裡插入圖片描述

  • 驗證

    • 再次訪問網站,發現載入速度正常且樣式載入正常
      在這裡插入圖片描述

總結

  • 遇到問題解決完後及時總結共享,一方面自己以後再遇到類似問題可以參考博文快速解決,另一方面為其他博友提供一種解決問題的思路和方案

  • 後續會寫快速搭建個人網站及小程式系列博文

  • 我的小程式也是連的我的個人網站,歡迎大家關注
    在這裡插入圖片描述

相關文章