WordPress速度優化

終極WordPress速度優化指南

130多個性能技巧可克服WordPress速度上癮的問題。

  • 您是速度迷嗎?
  • 您是否擔心SEO排名不佳?
  • 您是否希望即時加載您的網站,甚至在移動電話上?!
  • 您想節省服務器成本嗎?
  • 您想讓客戶眼花bed亂嗎?
  • 還是只是一些自己動手尋找新策略的人?

無論成癮的原因是什麼,您都來對地方了。我不會判斷你的。或致電OCD詢問速度。我將向您展示在WordPress加速成為一種趨勢之前,我在一個漫長的時間裡巧妙地思考過的策略。(我還會警告您那些只會浪費時間的愚蠢行為。)

我保證這是您讀過的最困難的加速指南。

編輯:

  • 2017年8月15日–開始撰寫。放棄,因為時間太長。
  • 2020年4月22日–在電暈停機期間完成。

我的WordPress速度成癮之旅

我對更快的加載時間的迷戀始於2007年,當時使用的是Joomla(不是WordPress)。

我有一些成功的網站變得一發不可收拾。安裝了許多插件,廣告,許多帖子上有數百條評論(有些有數千條)。前端和後端速度慢。由於我可能是世界上最不耐煩的人,因此很難進行更新。我受不了了……作為一名拳擊手,我什至可以感覺到100毫秒的加載時間差異。

那我該怎麼辦?

我在2008年左右搬到WordPress。將主題切換了20次。然後切換了3次我的虛擬主機。然後得到了一個VPS計劃。然後我又獲得了5個VPS,因為第一個很爛。然後,我自學瞭如何管理服務器,因為我厭倦了當我的站點關閉時管理員不可用的情況。

當我最終使網站穩定時,便進行了主題重建。我從頭開始重建主題幾次。還招募了一些比我自己經驗更多的開發人員和編碼人員。然後我與其中一些人爭論,因為我不相信他們的邏輯。有時候,只有我們一個人是正確的,而其他時候我們都是錯誤的。

加載時間有所改善,但我的癮卻越來越嚴重。事情變得越快,我就越習慣。當我突破神話般的1秒障礙時,感覺就像到達了一座山的底部。現在我想要一個低於500毫秒的網站!

每個與我合作的開發人員都爭論過同一件事,

為什麼要更快?您的網站已經快了!

我知道我的網站已經比其他網站快。我不明白的是,為什麼自定義編碼的網站仍然需要加載半秒的時間。與我合作的任何人都需要了解他們正在與上癮者而不是業餘愛好者打交道。無論如何,我找到了一個開發人員朋友,他樂於與我一起探索。他走了代碼路線。我走了服務器路線。

他從頭重寫了我們的WP_Query,完全重構了我們所有的CSS。將所有自定義工作重新構建為移動優先。當我從頭開始說的時候……我的意思是從頭開始。您現在看到的所有CSS / JS優化都是手工完成的。他將我們的許多插件直接集成到主題中,或將其完全重寫。

同時,我正在搞服務器。我不喜歡服務器,但在我們兩個之間,我是更支持Linux的服務器。所以我測試了各種堆棧。擰緊配置。打開和關閉事物。嘗試了不同的安全系統。對我來說幸運的是,服務器領域在性能調整方面已經有了很大的發展。在幾位高級管理員的幫助下,我在1-2年內“加快了步伐”。

我們領先於時代。

廣告

這次,我再次使用了WordPress。現在和我的開發者朋友一起擔任速度設計師。我們變得更加激進,發明了許多今天已經過時或通過插件更方便實現的策略。令人驚訝的是,在WordPress和Web服務器不那麼用戶友好的時代,我們取得了多少成就。我們想做的任何事情,我們都必須手動完成或自己發明。

如今,似乎所有WordPress用戶都希望提高速度。現在實際上是一種趨勢。哈哈哈 不僅僅是約翰尼“速度上癮者”騷擾開發人員。有速度測試。以及性能插件,例如緩存,組合,縮小,圖像壓縮等。看來,即使是普通用戶也試圖消除膨脹並提供最佳的用戶體驗。

速度優化比以往任何時候都重要……

儘管我們確實擁有更快的互聯網,但網站卻比以往任何時候都更加腫。主題和插件變得越來越奇特,並具有更多功能。大多數互聯網訪問者正在通過移動設備進行瀏覽(帶寬和處理能力更低)。Google現在將您的速度視為排名的信號。當您的網站運行緩慢時,Facebook廣告不會很好地轉換(用戶只需單擊“返回”並繼續滾動)。更快的網站也能賺更多錢!毫不奇怪,對吧?

更快的網站可以賺更多的錢,排名更好,並改善整體用戶體驗!

您是WordPress速度成癮者嗎(沒有像我這樣的生活)?

如果是,那麼您已經找到了我的提速秘訣黑皮書。如果您只需要簡單的提示,請選擇一個更簡單的速度優化指南。本指南將使您與開發人員分手,並與服務器管理員進行較量。我要你學習,但也要開心。我已經做了很多年了,並且在沒有太多可用工具的情況下經歷了很多困難。

我在這里分享的一切正是我向所有客戶推薦的。甚至2萬美元也可以。他們正是這樣。我不僅列出了胡說八道的通用建議,還列出了許多偷偷摸摸的建議。其中一些是非常技術性的。如果您不理解我對此的簡短解釋,則可能不適合嘗試!遵循您的能力,但如果需要,可以僱用。仔細測試。

我有很多不錯的網站–漂亮的圖形,超過1mb的大小,超過100個請求,可以立即加載並在500ms以下。我相信你也可以。我將為您提供我所知道的幾乎所有WordPress加速技巧!😉

我們開始做吧!

速度優化規則#1:
始終針對人類游客進行優化!(不是速度測試)

為人類優化!

技能:

  • 初學者 –可以Google並按照說明進行操作。
  • 中級 –擔任WordPress承包商。
  • 進階 –程序員或服務器管理員。

影響:

  •  –可能相差100-200ms。可能不明顯。
  •  –大約500ms的差異。
  •  – 1秒或更長時間。

目錄:

  1. 虛擬主機優化
  2. 主題優化
  3. 插件優化
  4. 圖像優化
  5. 字體優化
  6. 緩存優化
  7. 本地資產優化
  8. 外部資產優化
  9. 安全優化
  10. 最差的優化(策略)

1.虛擬主機優化

您的網站託管速度決定了它可以處理代碼的速度以及可以處理的訪問者數量。比較您的網站和汽車。為了使汽車行駛得更快,您可以A)增強引擎強度和/或B)減輕重量。對於網站,Web服務器是“引擎”,代碼是“權重”。

  • 目標是改善我們的網絡服務器“引擎”,同時減少代碼“權重”,好嗎?

更改虛擬主機是提高速度的最簡單方法之一。那些使用每月5美元的廉價共享虛擬主機的人將從遷移到託管託管服務甚至您自己的VPS中受益最大。區別在於白天和黑夜,沒有任何站點更改。從託管主機遷移到優化的VPS或專用的“裸機”服務器將是另一個日夜的轉變。

不同之處不僅在於速度,還在於成本(節省)的問題。快速的服務器可以處理比慢速服務器更多的訪客。如果您的服務器可以處理兩倍的流量,那麼從理論上講,費用可以便宜兩倍。對於一個小型網站而言,這不是什麼大不了的事情,但是對於每月電費為1000美元的大型電子商務網站呢?降低50%的成本聽起來很有吸引力!

1.選擇附近的數據中心位置(BEG,LOW-MED)

顯然,您應該選擇最接近訪客的服務器位置。理想情況下,您不希望DNS ping從服務器到訪客計算機的時間超過100毫秒。根據您的需求有很多含義。

  • 本地企業應該使服務器盡可能靠近其訪客。請將其保持在100ms或更短的時間內,最好在50ms以內。使用WonderNetwork檢查ping時間。
  • 美國從海岸到海岸大約80毫秒。加拿大和墨西哥也很接近。
  • 西歐全境只有40-50ms,非常接近。
  • 亞洲與大多數國家之間的距離不超過80毫秒。
  • 印度/巴基斯坦,澳大利亞/新西蘭,非洲有些孤立。那裡的本地企業需要本地數據中心。就DNS標準而言,甚至新加坡到澳大利亞也是“遙遠”的邊界(約150毫秒)。
  • 南美洲的基礎設施可能不可靠。因此,中/南美洲的許多公司仍然使用美國的數據中心,例如加利福尼亞,德克薩斯州或佛羅里達州(邁阿密)的數據中心。幸運的是,Google Cloud在巴西聖保羅開設了一個數據中心。可靠,但價格昂貴。
  • 如果您的業務遍及全球(包括亞太地區),並且沒有特定的核心區域,那麼我喜歡美國西海岸,是快速前往歐洲和亞洲的理想地點。
  • 如果您只有美國和歐洲的交通量,而沒有特定的核心區域,那麼我喜歡美國東海岸,可以快速到達歐洲。

在您的核心受眾所在的時區設置虛擬主機公司也很不錯。這樣,當大多數訪問者都醒著時,他們可以(快速)支持或解決問題。

  • 那些認為CDN可以彌補遠端服務器位置的人(不一定是真的!)

您正在尋找專用節點的人……最好的是帶有四個9(可保證99.9999%的正常運行時間)的TIER-4數據中心。但是祝您好運!

廣告

2.選擇合適的網站託管服務(BEG,高)

  • 共享主機(每月5-30美元)–適用於小型網站,流量低,每月點擊量高達10萬。無法訪問服務器配置。安全選擇是SiteGroundKinstaWP Engine
  • VPS /雲託管(每月30-300美元)–非常適合中型站點,每月點擊量高達3000萬次。安全的選擇是Cloudways或Gridpane,或嘗試完全託管的VPS服務。
  • 專用(裸機)服務器(每月200美元及以上)-非常適合流量眾多的大型站點。安全的選擇是LiquidWeb。
  • 閱讀我對許多公司的虛擬主機評論
  • 我也對自己的虛擬主機服務JohnnyVPS抱有偏見

購買您可以負擔得起的最好的。一個小型網站並不需要太多功能,但是當您擁有更好的服務器並獲得比您想像的更多的讚賞時,它仍然會很明顯。想想一部新手機,它打開應用程序的速度只有幾分之一秒。您確實可以感覺到差異,並且可以極大地改善用戶體驗。

  • 共享的虛擬主機通常很慢,因為它們會將數百個客戶/網站填充到同一台服務器上(以最大化利潤)。這會增加速度減慢,意外崩潰或服務器重新啟動,安全攻擊以及您的電子郵件IP被標記為垃圾郵件。
  • 共享主機環境也很慢,因為它們會加載許多腳本/模塊,以最大程度地為盡可能多的用戶提供兼容性。由於沒有專用資源,您的訪問者最終會在服務器首先處理其他網站時排隊等候。
  • VPS /專用服務器是更快,因為有每個賬戶可用的更多的資源,你的資源是服務只有你的網站。您可以更好地控制環境,可以根據需要進行配置。VPS /專用於普通用戶可能會很昂貴或難以管理。有云面板服務可以幫助管理它,還有完全託管的服務,它們可以為您處理所有事情。
  • 那些無法處理VPS技術職責的人可以選擇Kinsta或WP Engine之類的“高級共享託管”。他們並沒有太多擁擠服務器,但是性能(雖然比常規共享託管更好)仍將遠遠落後於VPS。

3.選擇一個高性能的Web服務器(INT-ADV,HIGH)

使用除Apache外的任何Web服務器軟件。最好的選擇是NGINX或LiteSpeed或高度優化的Apache(很少見)。您的流量越高,差異越明顯。

  • NGINX在簡單的站點上閃耀。只需設置並繼續。沒有太多要優化的設置。但是,一旦您擁有一個複雜的網站,NGINX就是好壞參半。一些NGINX功能不容易配置。如果您需要服務器管理員進行微調,那很好,但許多人卻沒有。
  • 與NGINX相比,LiteSpeed具有更易於訪問的功能。就像您需要緩存某些東西而不需要緩存其他東西一樣,或者需要通過htaccess處理服務器級重定向。LiteSpeed還具有NGINX所沒有的WordPress緩存插件。那是巨大的優勢。(我個人更喜歡LiteSpeed。)
  • OpenLiteSpeed是LiteSpeed的免費社區版本。對於那些想要NGINX免費價格但功能強大的LiteSpeed緩存插件的用戶來說,這是一個不錯的選擇。
  • 一些虛擬主機具有Apache + NGINX混合堆棧。我覺得這些現在已經過時了,從而導致不必要的較慢/較重的堆棧。
  • 如果使用Apache,則MPM事件最好(與worker或prefork相比)。
  • 保持您的網絡服務器更新。更高版本可以明顯加快某些協議和過程的速度。

4. Web服務器配置(ADV,MED-HIGH)

大多數Web服務器都附帶了安全/功能配置。足以滿足一般小型網站的訪問量。當您獲得更多的流量和更多的安全攻擊,或者擁有更多要求苛刻的應用程序時,對配置進行微調會帶來很大的不同。

  • 超時– 30至60秒是安全的開始。如果需要較長的過程(導入,導出,備份),則最多可以增加600個或更多。請記住,這會使編碼不正確的進程或黑客攻擊耗盡服務器資源。
  • 允許的子進程數–取決於服務器環境。默認值可以。
  • 允許並發連接-1-20k之間的任何地方。更高不一定更好!
  • 保持活動狀態–開,關或LiteSpeed的“智能保持活動狀態”。我認為“上”更安全。如果您擁有LiteSpeed,那麼智能保持連接功能真棒!
  • 保持超時– 3-5秒是安全的開始。如果需要,增加。

您可以在線查找多少線程,主體/緩衝區大小,工作者,客戶端等…。這取決於您的服務器大小和使用方案。跳到論壇上詢問,或者為您配置sys-admin。請記住,不同的管理員具有自己的配置方式。

對我來說,最重要的區別是決定是否應將此服務器設置為激進或保守:

  • 主動配置–為每個站點提供盡可能多的資源。適用於低租戶或專用服務器。
  • 保守配置–為每個站點提供盡可能少的資源。適用於高租戶或共享服務器。

5.禁用未使用的服務(高,低)

許多服務器會自動設置為運行所有功能,從而使您的工作變得簡單。但是它們就像帶有預裝軟件的全新計算機一樣。擺脫不使用的東西。即使他們不使用的內存,他們仍然可以被黑客和轟炸吃資源。

  • DNS –如果您使用外部DNS服務,請禁用。(Cloudflare,DNSME等)
  • 電子郵件-如果您使用的是第三方電子郵件,請禁用。(G-Suite,MXroute等)
  • FTP / SFTP –如果不使用,請禁用。
  • Memcache / Redis –如果不使用,請禁用。
  • 其他服務–清漆,Elastipress等

如果要成為OCD,請在系統中掃描所有偵聽端口和服務。

6.卸下未使用的服務器模塊(ADV,LOW)

想要成為更多的強迫症嗎?禁用服務器未使用的每個模塊。其中一些是垃圾未使用的服務器。其他是未使用的Linux發行版東西。老式的Apache兼容堆棧或未優化的控制面板通常會默認啟用許多未使用的模塊(同時也不會啟用您可能需要的模塊)。

閱讀文檔並在線檢查,然後盲目刪除或更換它們。危險是您禁用了您需要的東西(或更糟糕的是,它提高了性能)。您應該列出禁用的服務/模塊的列表,以便以後參考或在進行故障排除時提供給承包商。

7.使用最新的PHP版本(INT-ADV,HIGH)

僅PHP版本會帶來巨大的變化。

  • 盡可能使用最新的PHP版本!(可從您的虛擬主機控制面板輕鬆配置。)
  • 例如,PHP 7.0比PHP 5.6快3倍。
  • 甚至PHP 7.3也比PHP 7.2快10%。
  • 在撰寫本文時,PHP 7.4可用。
  • 警惕任何仍在使用舊PHP的Web主機!

保持網站PHP版本更新不僅是為了提高速度,而且是為了提高安全性。唯一的問題是某些主題或插件可能與最新的PHP版本不兼容。您會知道,因為您的網站無法正常運行,或者看起來很奇怪。因此,請仔細測試並更新主題/插件,以幫助它們與最新的PHP兼容。

8.推薦的php.ini配置(INT,MED):

你們大多數人(在共享主機上)甚至都無法訪問這些設置或不知道如何設置它們。但是,儘管如此,這是我的建議。

  • max_execution_time –較低的(30-60秒)更好,可以防止資源消耗超出服務器。但是對於較長的流程(例如導入,導出,備份),您可能需要更長的執行時間。
  • max_input_time –較低(60秒)更好。僅當您嘗試導入需要永久使用的東西時才增加。
  • max_input_vars –設置為“ 1000”,除非某些插件需要更高。
  • memory_limit –為安全起見嘗試使用“ 256M”。如果您有笨重的插件,請提高。我喜歡調低一些,所以當有內存佔用時,我會立即得到通知。“ error_log”將告訴您是否需要更多。
  • zlib.output_compression –可能有幫助,也可能沒有幫助。我把它關掉。

9.使用更新的MySQL fork版本(INT-ADV,LOW)

大多數人只知道MySQL,而MySQL現在被Oracle收購/擁有。還有MariaDB(MySQL的原始創建者的一個分支)和Percona,以及其他。

  • MySQL 8比MySQL 5.7好得多。
  • 但是最好是可以通過MySQL使用MariaDB。與原始MySQL 5.7相比,對社區友好且性能更好。
  • 使用最新的MariaDB版本。
  • 無論您做什麼,都不要使用MySQL 5.7。

那Percona呢?其他第三方兼容MySQL的分支又如何呢?對於大多數站點,如果有的話,差別不大。在更改或升級MySQL之前,請不要忘記備份數據庫。

10.將MySQL表從MyISAM轉換為InnoDB(BEG,低):

  • 確保將表設置為InnoDB而不是MyISAM。
  • InnoDB是更新的,被認為是更好的整體(更快,更安全)。
  • 在某些情況下(大多數情況下為只讀),MyISAM可能會更快。
  • 您可以在phpMyAdmin中手動轉換也可以使用插件(Servebolt OptimizerLiteSpeed Cache)。如果不需要,可以在以後刪除該插件。

11.調優MySQL配置(ADV,LOW):

  • 一般站點通常不需要(或明顯受益),但對於流量大且查詢長度不同的大型站點可以有很大幫助。
  • 您可以運行MySQLTuner以獲得一般建議,也可以向sys-admin社區詢問以了解其他人使用的東西。
  • 緩衝區大小,數據包大小,緩存,連接,緩存,堆棧等…都是需要調整的常規內容。
  • 簡單的Linode指南

在線嘗試隨機配置或複制他人的配置時,請確保其環境與您的環境相似。主要區別是:

  • 服務器大小,可用資源
  • 服務器上有多少個客戶端/站點
  • 服務器上有多少個最終用戶
  • 多少流量
  • 這些網站有多大
  • 什麼樣的讀/寫行為

重要的是要知道它們的設置是為了提高效率(高租戶webhost)還是為了提高性能(低租戶webserver)。

12.服務器全頁緩存(ADV,高)

全頁緩存可以幫助加快任何網站的速度。但是,直接通過服務器進行緩存比通過插件進行PHP /應用程序級緩存要強大得多,並且資源效率更高。

  • 一些Apache或NGINX服務器使用Varnish – ugghhh,已過時。不要使用Varnish代理。只需升級到pure-LiteSpeed或pure-NGINX堆棧即可。
  • LiteSpeed服務器可以使用LiteSpeed緩存-強大的許多功能,並帶有方便的WordPress緩存插件(稱為“ LiteSpeed緩存”)。
  • NGINX服務器可以使用FastCGI –太好了!雖然沒有適用於WordPress的官方NGINX緩存插件,但有各種“ NGINX helper”插件可用於實現基本的緩存功能(如清除)。

為了安全起見,您應該禁用包含表單,購物車或結帳頁面的緩存。私人頁面(登錄用戶)CAN緩存,但除非你有那麼多的私人交通和準備花時間配置私有緩存不亂用那個。

如果您擁有或有權訪問服務器,則只能啟用服務器級緩存。否則,您的網絡主機將決定您擁有哪些緩存選項。

  • 共享主機通常允許所有緩存插件。
  • 託管託管通常將您限制在其專有的範圍內。

13.內存對象緩存(ADV,LOW-HIGH)

對象緩存僅緩存數據庫查詢,而不緩存整個頁面html。從技術上講,這使其比全頁緩存“慢”(因為您沒有緩存整個頁面),但對於加速無法靜態緩存的動態頁面或私有頁面(已登錄用戶,管理員後端)非常有用。

任何在前端有大量不斷刷新的數據,或在後端有大量數字和報告的站點……都將從對象緩存中受益。靜態站點或低流量站點根本不會從對象緩存中受益;不要在它們上使用它……它會使它們變慢!

  • Redis現在是對象緩存的黃金標準。在幾乎所有方面,它都優於舊的內存緩存。
  • Memcache僅在Redis無法正常工作或速度較慢的罕見情況下使用。
  • 如果數據變化不大,則可以設置更長的對象緩存時間(例如60分鐘及以上)。時間越長,意味著數據庫查詢越少。
  • 否則,請堅持默認的5-10分鐘以​​確保安全……除非您不介意用戶看到過時的數據。
  • 對象緩存可以通過WordPress插件進行管理。如果您有一個緩存插件來管理全頁緩存和對象緩存,則是最理想的選擇。

內存緩存的一些背景知識…

內存緩存是緩存的黃金標準,因為緩存從內存運行的速度比從磁盤運行的速度快。問題是我們的內存量有限(大部分內存已用於應用程序),因此我們無法在其中存儲整個站點緩存。無論如何,如今這已經不再那麼重要了,因為服務器磁盤現在快得多了(這要歸功於SSD技術)。

當然,現在內存也更加豐富,但是應用程序又更大了。您可能聽說過其他人將整個站點加載到內存中……有些人使用緩存路由,而另一些人則將其WordPress目錄安裝到內存中。如果您的站點足夠小,但對於大多數人來說,它的工作原理很好:您的內存僅夠存儲數據庫查詢,您要緩存的其他任何內容都將存儲在磁盤上。

14.使用最新的HTTP協議(BEG,HIGH)

HTTP / 2加載瀏覽器請求的速度比HTTP / 1快得多(這要歸功於parallelization)。對我來說感覺快了三倍。

  • 您應該使用HTTP / 2或什至HTTP / 3(最近發布)。
  • 避免舊的Web服務器仍在舊的HTTP / 1上。
  • 檢查您的站點的HTTP / 2HTTP / 3
  • 使用HTTP / 2需要HTTPS / SSL。如果您的站點不在HTTPS中,請立即執行!

15.內容編碼(INT,HIGH)

GZIP在2016年是如此。如今,每個Web服務器都應具有BROTLI壓縮功能。它優於GZIP(可在更短的時間內生成更小的文件)。但是令人震驚的是,BROTLI仍然不是在所有Web服務器上都可用。

  • 如果使用BROTLI –將靜態壓縮設置為4。
  • 如果使用GZIP –將動態壓縮設置為1,將靜態壓縮設置為6。

如果您的CPU較強(或使用率較低的服務器)和/或您的靜態內容被長時間緩存(有效期很長),則可以將靜態壓縮級別提高。如果您使用的是CDN或Cloudflare,請確保同時也啟用了BROTLI壓縮。

16.控制面板(高,中)

此問題僅對VPS用戶重要。過去曾經批評控制面板放置在服務器上的初始重量。這是因為控制面板最初是為大型專用服務器設計的,但此後已針對小型VPS進行了優化。的確,沒有控制面板比擁有一個更輕便,但這使日常任務變得更加困難。考慮到面板的實用性,現在它們的足跡可以忽略不計。

效果最佳的控制面板就是適合您需求的面板。

  • 允許您選擇所需的Web服務器-NGINX或LiteSpeed。
  • 在服務器級別輕鬆配置重定向-而不是較慢的PHP級重定向插件。
  • 輕鬆配置粒度緩存規則–選擇要緩存的內容和不緩存的內容。
  • 易於管理–適用於您或您的系統管理員。
  • 可以籠罩用戶-防止佔用高租戶服務器上的資源。
  • 安全防範黑客攻擊-黑客嘗試會消耗大量資源。
  • 易於使用–適用於您或您的客戶。

17.使用外部DNS服務(INT,LOW)

  • 降低DNS延遲(小好處)
  • 易於更新DNS(便捷)

使用諸如Cloudflare或DNS Made Easy這樣的外部DNS是否會在虛擬主機速度方面帶來不同?我認為它可以縮短查找時間,但不會那麼引人注目,除非您以前的DNS服務器被廉價的Web主機所取代。

對我來說,主要的好處是可以快速重定向內容。假設您遭到黑客入侵,並且需要通過安全代理進行重定向。或者,也許您要將站點的某些方面切換到另一台服務器。在這樣的時刻,擁有DNS服務非常方便。您可以在停機時間很少的情況下進行切換,如果出現問題,甚至可以快速將其切換回去。

DNS服務似乎設置起來很麻煩,但是一旦安裝就可以使您集成新服務並以更快的速度緩解性能問題。

18.從您的服務器(BEG,MED)運行WP-cron

許多WordPress任務需要觸發器才能起作用。例如發送系統電子郵件,運行備份,發布計劃的帖子。默認情況下,WordPress使用稱為WP-Cron的功能(通常位於yourdomain.com/wp-cron.php)。每當有人訪問該網站時,它都會通過檢查(並執行)任何未完成的任務來工作。這對小型站點非常有用,但是如果您有大量的流量(觸發許多不必要的cron檢查),那就太糟糕了。也是一個明顯的DDOS漏洞。

明智的做法是禁用WP-cron並使用真實的cron作業,無論是從服務器還是從外部cron服務:

一些cron職位直接訪問該網站。其他人進入Linux目錄。使用任何一種有效的方法。我認為每隔5分鐘就好。

19.限制用戶和資源限制(ADV,MED-HIGH)

您在同一台計算機上是否有許多站點或客戶端?您無法有效地監管他們嗎?如果您失去對租戶的控制,可能是時候限制他們的資源了。我將從下面的一些策略開始。你看看其餘的。

  • Cloudlinux和CageFS –限制CPU和內存使用
  • 服務器範圍內禁止緩存預建,鏈接斷開檢查器和其他資源消耗。
  • 減少php執行時間。
  • 全局配置阻止了常見的違規者,機器人等

最壞的情況是,將一些客戶端拆分到另一台服務器上。隨便將它們按大小,空間使用量,流量進行拆分。

20.追踪資源消耗(ADV,MED-HIGH)

我們經常遇到服務器緩慢的問題,沒有明顯的位置提示。今天是這個客戶 明天就是那個客戶。在任何一天,似乎任何站點都可能是罪魁禍首。當您有如此多的客戶端,而又沒有一個客戶端能夠負擔得起打開和關閉插件時,要查找問題確實非常困難。

這裡有一些想法:

  • 檢查服務器日誌– 您是否被黑客入侵?是否有過多的要求?
  • 檢查服務器監視器–哪些用戶佔用了CPU,內存和帶寬?
  • 一旦知道了哪個網站,請檢查WordPress錯誤日誌。運行查詢監視器。
  • 當然,它甚至可能不會一直發生。您必須跟踪發生減速時用戶或進程在做什麼。

有時,您需要更多的開發人員心態。最近更新了哪個插件?是否有任何自定義編碼的新主題或插件?(檢查是否有用盡內存的命令。)是的,您可以使用New Relic之類的應用程序監視器,但對我而言,這太過分了。最棘手的問題是似乎每個站點都存在問題時。或者,當服務器負載較低但站點仍然很慢時。祝好運!

2.主題優化

我看到的大多數速度較慢的網站最多只能將其速度的50%歸因於主題。緩慢的主題會導致太多垃圾,為每個用戶提供各種奇特效果。想像一下卡車上有行李箱中的所有工具,而不是只裝載您使用的工具。當然……許多主題宣稱自己是“輕量級”的,但仍然有很多不必要的處理過程。最糟糕的是當它們過多的CSS和JS與其他插件(電子商務,多語言,滑塊,緩存等)發生衝突時。

理想情況下,您將擁有一個專注於設計而不是其他任何主題的主題。它會盡快加載樣式,以便內容可以快速繪製瀏覽器的顏色。沒有用於非必需項的愚蠢庫,或者用於用戶選擇的選項的無休止的功能檢查。

而且您真的不希望讓處理重功能的主題留給插件更好。當然,這些主題具有無窮無盡的“額外功能”,看起來像是一站式便利店……直到您意識到它們不像專門的插件那樣出色,並與其他插件發生衝突。

21.使用編碼良好的WordPress主題或框架(BEG,高)

最輕便,編碼最好的WordPress主題是專門為您使用的自定義編碼主題。它僅具有您需要的功能,而沒有其他功能。沒有為未使用的選項加載額外的CSS / JS。如果從頭開始編碼,請小心如何進行數據庫查詢。

  • 我喜歡Genesis作為自定義編碼主題的基礎框架。
  • 我喜歡GeneratePress作為DIY(非編碼器)主題的基礎框架。
  • Oxygen Builder是一個很好的視覺生成器,但對開發人員而言比DIY更重要。
  • 如果您知道自己在做什麼,則下劃線,Bean或Roots …也可以。
  • 對於需要輕鬆編輯的自定義佈局,請使用或製作一個Gutenberg塊。對於其他所有內容,請將其設為靜態。😉

並非每個人都能負擔得起(高質量)自定義編碼的主題。如果您要購買現成的主題,我建議以下內容:

想著我沒提到的任何主題嗎?查看他們的支持渠道和Facebook組。他們的支持水平如何?他們的社區中有哪些類型的用戶?(初學者還是專業人士?)

22.自定義編碼主題的提示(ADV,HIGH)

  • 移動優先設計–更清晰的代碼解析,並將重繪工作放在功能更強大的台式機處理器上,而不是迫使性能較弱的移動CPU重新繪製。
  • 明智地使用WP_Query-功能強大,但不要濫用數據庫/內存。
  • 選擇性地進行硬編碼–我喜歡對菜單,頁眉,頁腳和盡可能多的首頁進行硬編碼。我讓您決定什麼應該容易更改或不容易更改。
  • 乾淨的CSS –從一開始就乾淨地編寫它。Grid vs flexbox,無論Sass與否,明智的選擇。隨著時間的推移重構它!
  • 沒有JS –如果可以幫助,就不要JS。(如果需要移動菜單和移動搜索,請簡潔地進行!)
  • CPT或自定義的Gutenberg塊之間選擇。
  • 在主題中構建功能–避免不必要的微型插件。

23.清理您現有的主題(BEG,MED)

已經有主題,無法更改?不用擔心,我們將研究設置並優化我們可以做到的。

  • 禁用加載動畫/微調器-改善感知的負載。
  • 禁用圖像的延遲加載-改善可感知的負載。
  • 禁用未使用的功能-效果,平滑滾動,Google地圖等。
  • 合併自定義CSS –禁用插件排隊的所有自定義CSS,並合併到主題自定義CSS區域。
  • CSS / JS優化–如果您的主題具有CSS / JS縮小或組合選項,請啟用它們!

如果您的主題仍然運行緩慢,我認為僅獲取另一個主題並使它看起來相同會更容易。您也可以從頭開始重新編碼主題,並複制相同外觀。

24.減少JS(ADV,MED)

我喜歡盡可能減少JS的使用以使主題更簡潔。我的共同信念是CSS用於樣式,JS用於效果/功能。而且效果/功能對於頁面加載幾乎從來不是必不可少的。可能唯一必需的JS是用於移動菜單,搜索框或ATF滑塊的JS。除非所有其他JS都加載在每個頁面上,否則它們可能都是非必需的IMO(動畫,選項卡框,彈出窗口)。

  • 將JS效果轉換為CSS(如果可能)–這不僅輕巧,而且可以減少與插件的衝突。
  • 從移動菜單中刪除JS依賴關係–嘗試在CSS中構建它。甚至更好,只是避免漢堡包菜單
  • 禁用jquery遷移 -如果您不需要它。
  • 將所有JS hack合併到一個全局JS中-比擁有許多小JS更好。(拆分的唯一原因是它們是否有條件地加載。)
  • 確定您是否可以使用jQuery構建所有效果–還是讓jquery出隊並創建自己的微型庫。
  • 所有非關鍵JS(如果有的話)都應該放在頁腳中!

25.刪除Pagebuilder(INT-ADV,高)

通常,許多站點(懶惰地)使用a腫的pagebuilder來生成自定義頁面佈局。但是有2種更好的方法:

我保證你的努力是值得的。這樣做,以後您會很高興!擺脫Pagebuilders也可以減少DOM元素的數量(瀏覽器可以處理的工作量更少)。

3.插件優化

插件最多可導致您網站的速度降低50-80%。精益插件僅加載您使用的功能,並進行盡可能少的有效數據庫查詢。膨脹的插件會執行許多不必要的處理,使查詢變慢,甚至在不使用CSS和JS的頁面上加載CSS和JS。多年來,最糟糕的插件會添加無窮無盡的功能,並且永遠不會從頭開始重寫,吐出PHP錯誤,佔用內存,還會創建安全漏洞。

更好的是知道您真正需要什麼插件!只需知道插件通常會執行以下兩項操作之一:

  1. 給您的網站一個新功能(使用php / database),或者
  2. 使您的網站具有新的美感(使用CSS / JS效果)。

您是否真的需要這些功能或視覺效果?有沒有可以用更少的代碼/膨脹實現相同功能的插件?而對於你的插件有,不要讓每一個功能,如果你能幫助它。僅加載對實際創建轉化至關重要的內容。

26.僅使用基本(編碼良好)的插件(BEG,HIGH)

有很多指南試圖教什麼是“好插件”。不幸的是,您將只有時間和經驗才能知道。許多插件都在宣傳類似的東西,而普通用戶很難知道哪些插件編碼正確。

  • 消費級插件–許多功能和样式選項。比速度或代碼質量更關心易用性和擁有更多賣點。
  • 開發人員級插件–確實能很好地完成基本功能,包括有用的開發人員功能/過濾器,並且內置樣式不多。
  • 許多小型的專用插件可能比一個腫的廚房水槽插件更精簡,並且具有許多您不使用的功能。
  • 一個大插件也可以比具有重疊功能的許多小插件更精簡。

不幸的是,許多人認為閱讀WordPress存儲庫評論足以知道插件是否不錯,但有時會引起誤解。那裡的高收視率可能僅意味著它受歡迎。並不一定告訴您它在受人尊敬的開發人員中是否受歡迎。

如有疑問,請使用在其他開發人員中享有較高聲譽的插件。向開發人員徵求意見!專家們也總是問對方。我們沒有時間免費試用或閱讀評論。我們要求我們的朋友快速獲取信息。

27.避免插件過大(BEG,HIGH)

我不討厭所有具有許多功能的大型插件。我的問題是編碼錯誤和功能不必要。這些插件在我的名單上,因為它們不必要地增加了網站的運行速度。我可以向您保證,還有更好的選擇:

  • Pagebuilders – WPBakery,DIVI,AVADA,Elementor,Beaver Builder。他們都沉重!改用古騰堡塊
  • Slider Revolution(RevSlider)–改用Metaslider(最輕)或Smart Slider 3(全功能)。
  • UberMenu –如果您確實需要,請使用Max Mega Menu。或自定義代碼。或者使用簡單的簡單菜單。
  • 興旺評論或興旺線索-興旺所做的任何事情。我也不喜歡Thrive Architect。
  • Jetpack – eww。避免使用,除非您絕對需要它(例如WooCommerce)。您還可以嘗試Toolbelt,它被編寫為Jetpack的一種更清潔(垃圾郵件少)版本。
  • ExactMetrics –改用GAinWP(這是原始GADWP的分支)
  • 圖像燈箱效果–嘗試WP Featherlight(是的,它仍然有效)。
  • 圖像庫–試試Meow Gallery而不是Envira,NextGEN,FooGallery等…,或者甚至是帶有WP Featherlight的默認Gutenberg畫廊。

疑似膨脹的常用插件:

  • 媒體插件-帶有大量精美圖片/圖庫顯示的任何內容。
  • 任何具有視覺效果的東西–動畫或彈出式窗口,都需要加載JS。
  • 條件加載邏輯–可讓您決定在哪些頁面上顯示哪些內容和小部件的任何內容。
  • 字體插件–它們通常會增加大量的自動加載功能。
  • 很多選項–任何具有很多選項的插件,或者您在其中輸入很多信息的插件。

如何檢查腫脹?使用開發人員工具檢查網站前端,並查看它加載了什麼CSS / JS。然後,在查詢監視器上檢查前端的慢查詢,並檢查數據庫是否增加了許多自動加載。還應該檢查錯誤日誌中是否有php錯誤以及它們的更改日誌,以查看更新頻率。

28.避免使用不必要的插件(BEG-ADV,MED)

這些是您真正不需要的插件。有很多其他方法可以完全不需要任何插件來獲得相同的結果。是的,我知道其中一些插件將比其他插件更容易替換。

  • 添加自定義CSS –可以直接放入主題設置中,或使用“定製程序”>“其他CSS”。
  • 瀏覽器緩存或有效期限–只需使用您的緩存插件即可。
  • 字體插件–請按照您的主題進行。
  • 頁眉和頁腳代碼注入器–可以將代碼直接放入主題文件中。詢問主題開發人員是否需要幫助。
  • HTTPS / SSL插件–您根本不需要它們!您可以手動設置HTTPS
  • Gallery插件–使用Gutenberg塊和WP Featherlight更加干淨。
  • 性能插件–簡單的插件可禁用表情符號/嵌入或進行簡單的htaccess編輯。您唯一需要的性能插件是緩存插件。
  • 重定向插件–如果可以,請避免使用這些插件。也不要在您的SEO插件中使用重定向功能。如果您的服務器具有.htaccess,請使用該地址進行重定向!如果您需要登錄404,只需檢查您的Google Search Console。
  • 安全插件–其中許多插件僅會為您的htaccess添加內容,您可以手動進行操作。
  • 未使用的插件–停用和刪除!
  • 小部件條件加載–您可以嘗試在主題中使用其自己的小部件位置創建新的頁面模板,而不是使用小部件加載插件。

29.防止插件全局加載(INT,MED-HIGH)

即使不使用它們,許多插件也會在每個頁面上加載其CSS樣式和JS腳本!他們這樣做是為了確保它始終有效,但缺點是它會使您的網站變慢。某些插件在設置中有一個選項可以禁用全局加載和/或配置要加載的頁面。其他功能只能通過在functions.php文件中放置一個過濾器片段來禁用。

全局加載的插件示例:

  • 聯繫表格7 –即使沒有表單,也會在每個頁面上加載CSS / JS。當然,有針對CF7的優化技術,但也許您可以嘗試使用諸如Caldera或WP Fluent Forms之類的更新技術。
  • 表單安全性插件–一些驗證碼或表單安全性插件也可能在沒有表單的頁面上不必要地運行。
  • Pagebuilders –非常內!許多頁面上的廢話不使用它們,以及不使用的功能!
  • 滑塊插件–禁用設置中的“全局加載”選項。
  • WooCommerce –如果您不需要每個頁面(例如非購物頁面),都可以使用functions.php代碼段。也有人禁用ajax購物車片段功能

當心任何在前端創建自己的自定義帖子類型或內容佈局/樣式的插件。也是任何創建或解析自己的短代碼的插件。

如果您不知道哪些插件不需要加載,則很簡單:

  • 打開瀏覽器開發人員工具,然後單擊“網絡”選項卡。然後單擊CSS或JS選項卡,然後在您的站點上瀏覽。
  • 您還可以加載查詢監視器並在前端瀏覽,以查看插件是否在進行不必要的查詢。
  • 哦,順便說一句,僅因為您刪除了插件的CSS / JS並不意味著您停止了其加載。它仍然可以在後台運行php和DB查詢。

30.出隊插件CSS&JS(ADV,高)

許多插件加載自己的CSS和JS,可以很容易地從插件中將其解列/禁用,並組合到您的主題自定義CSS / JS中(甚至根本不需要)。

  • 簡單的插件-有一個複選框可以從插件設置中取消選中“加載CSS樣式”。如果看到JS選項,則可以禁用它,但請檢查您的插件是否仍然有效。
  • 更難的插件-如果插件具有供開發人員放入主題functions.php文件的過濾器,則只能使CSS / JS出隊。

禁用CSS / JS後,可以將它們(如果需要)複製到主題自定義CSS。

31.清理wp_option自動加載(ADV,HIGH)

許多插件看似“精簡”,但實際上在每次頁面加載時都會消耗大量內存!他們通過濫用WP自動加載功能來做到這一點,該功能會在每個頁面上加載數據,並且僅用於關鍵數據。但是有些插件開發人員卻在抽搐,他們自己浪費所有內存,就像您討厭的鄰居浪費所有洗衣機一樣。他們之所以這樣做,是因為否則他們腫的插件加載得不夠快!

您會驚訝於數據庫中有多少不必要的自動加載以及它們可以達到多少自動加載。讓我們通過清除autoloads找到最大的數據庫內存違規者。

  • 保持自動加載的大小低於1mb(良好),低於500kb(最佳)。
  • 許多舊主題/插件即使在刪除後也會在數據庫中留下垃圾!
  • 如果名稱不明顯,請嘗試將其打開並瀏覽數據。
  • 如有疑問,請在Google中搜索數據庫條目,並用引號將其名稱引起來。(例如“ cherry_fonts_css”)
  • 您也可以在PluginTests上搜索數據庫條目名稱或插件名稱。
  • 您會驚訝於哪些插件具有很多自動加載功能。任何具有大量設置或數據保存的東西都值得懷疑,但是即使是很小的插件也可以創建巨大的自動加載。
  • 刪除條目之前備份數據庫!

注意現有插件的自動加載。在刪除/禁用活動插件的自動加載之前,請先與開發者聯繫。如果您仍然想嘗試(即使我不建議這樣做),則可以將自動加載選項編輯為“否”,如果沒有任何問題,則可以在一個月後刪除。更好的主意是完全擺脫該插件。

32.向插件開發人員提供反饋(BEG,HIGH)

通常,您可以直接向開發人員投訴,他們可能會立即解決性能問題。我的建議是告訴他們您對插件有多愛,只是希望他們可以修復某某某事,這樣您就不必使用競爭對手的插件。這比1星評論“ THIS PLUGIN SUCKS!”要好得多。

33.自定義編碼自己的插件(ADV,HIGH)

有時,唯一的方法是自己編寫一些插件。您也可以使用現有的插件,然後從其代碼中刪減掉多餘的內容。如果足夠簡單,您也可以將其加入主題。

34.不要使用重定向插件(INT,MED)

盡量不要從插件(無論是重定向插件還是SEO插件)進行重定向。快速地這樣做是個壞主意,因為php級重定向比服務器級重定向慢。提醒您,它會減慢所有流量,而不僅僅是重定向的流量。

  • 要從服務器運行重定向,請使用htaccess(如果您具有Apache或LiteSpeed)和適當的重寫規則/指令。
  • 如果您擁有NGINX,除非您有權訪問server-config 知道如何進行NGINX配置,否則這幾乎是幾乎不可能的。如果幸運的話,某些NGINX網絡主機將在其控制面板中具有重定向功能。
  • 大多數重定向插件可以導出到htaccess規則。
  • 如果您需要監控404,請使用Google Search Console。
  • 如果您絕對需要重定向插件,請使用安全重定向管理器(而不是重定向或YOAST重定向功能)。

這也是清除重定向的好機會。消除沒有流量的鏈接的重複項或重定向。通常,我看到數百條規則可以通過一些巧妙的重寫指令而更有效地重定向。如果您看到許多用於Apple觸摸圖標的404,請創建它們!

也許有些人擔心這句老話:Apache 由於 htaccess而運行緩慢(如果有幫助,則不應使用它)。是的,這是事實。但是htaccess仍然比php-redirects快得多。另外,如果您使用的是LiteSpeed,則完全不用擔心,因為LiteSpeed會緩存htaccess,因此影響為零。

35.選擇備受推崇的插件(INT,HIGH)

除了選擇具有基本功能的編碼良好的插件外,還要選擇具有良好聲譽的插件。當然,您可以查詢他們的網站並閱讀銷售副本,但最好四處詢問。詢問有經驗的開發人員他們使用什麼。為什麼他們喜歡某些插件。

最好的插件通常具有最好的功能(大量更新),最好的支持,與其他主題/插件的最佳兼容性,最好的UI(易於使用),易於使用(易於開發人員定制),擴展性好(不要放慢大網站的速度)。

當我尋找插件時…

  • 我檢查開發社區。
  • 我檢查了WordPress資料庫評論。
  • 我檢查他們的開發公司,看看他們還建立了什麼。
  • 備受尊敬的開發公司喜歡用其他主題或插件以及背後的人來展示自己的成功!
  • 邏輯業務模型。小插件的一次性費用,大插件的每月費用,新插件的生命週期計劃,更新/支持的持續成本。

最糟糕的插件尚未被其開發公司所知道。他們在ThemeForest,Code Canyon,Envato或其他糟糕的商店中。他們對產品的展示要比其背後的公司更多(當然,它們不顯示過去的失敗)。而且它們的價格太便宜了。價格低廉的插件會隨著時間的流逝而被廢棄,並且不會經常更新。看他們的市場營銷……如果針對新手用戶,那可能不是最好的市場。

4.圖像優化

圖像實際上是非常簡單的資產,不需要Web服務器進行太多複雜的處理。它們阻止您的頁面加載的地方是它們在整個網絡中的傳遞以及在用戶瀏覽器中的呈現。將它們設置得太大,它們將花費更長的時間發送和占用瀏覽器的內存。圖像最重要的是,它會影響您網站的感知加載時間。

以下是我提供不僅可以快速加載圖片,而且還可以讓您的網站保持與設計一樣美觀的圖像的策略。請閱讀我的MONSTER WordPress圖像優化指南。它比本節中的某些簡短解釋更詳細地解釋。

36.選擇適當的圖像格式(BEG,MED)

  • JPEG  –為具有多種顏色的照片或圖像生成較小的文件。
  • PNG  (又稱“ png-8”)–為顏色,銳利的線條和對比度很少的圖像生成較小的文件,並且還可以進行透明處理。
  • PNG 24  –適用於照片的PNG高質量版本,但文件大小仍比JPEG大,因此不建議使用,除非需要透明性。
  • WEBP  –結合了JPEG和PNG的優點,可提供出色的照片質量和透明度,並且比JPEG(較小的文件大小)具有更好的壓縮率。可以代替JPEG或PNG 24使用,但應該有備用以防萬一!(FWIW,我個人還沒有使用WebP。)
  • GIF  –最常見於低質量的模因動畫。當您想要共享視頻但不需要清晰度或聲音時,該功能很有用。GIF基本上是一種偽裝成低質量視頻格式的圖像幻燈片格式。很少在像網站這樣的專業環境中使用,通常您需要高清圖像和視頻。只知道GIF也可以優化。

37.選擇合適的圖像尺寸(BEG,MED)

不要使用超出您需要的圖像!

  • 調整圖像大小以適合確切的區域大小。(例如,將400px寬的圖片用於400px寬的區域。)
  • 為了使重要或較大的圖像在視網膜屏幕上顯示更好,請使用兩倍於區域大小的圖像(例如,800px寬度的圖像表示400px寬度的區域。)
  • 不太重要或較小的圖像可以按區域大小精確調整大小(不需要與視網膜兼容)。
  • 我相信大多數人不會使用全分辨率的視網膜或超高清顯示器。許多圖像將以150%的比例縮放,這意味著(大概)您可以僅獲得1.5倍的圖像尺寸。
  • 不要直接從相機上傳原始照片。調整大小,裁剪和編輯它們!或使用圖像壓縮插件自動優化上傳的照片。
  • 將2000px寬的圖像加載到300px寬的空間中是一大浪費。它浪費了服務器存儲,互聯網帶寬和瀏覽器處理。

38.在主題和插件(ADV,MED-HIGH)中設置適當的媒體大小

幸運的是,大多數主題已經控制了佈局,因此已經設置了正確的圖像尺寸。當您擁有使用通用媒體尺寸的框架或插件時,問題就更多了,因為它們不知道最終會使用什麼。或者,您創建了一個新的佈局,該佈局需要主題尚未設置的特定媒體尺寸。

  • 完成主題設計。
  • 然後轉到WordPress設置>媒體,並設置整個網站使用的正確大小。
  • 如果您有WooCommerce…請檢查外觀>自定義> WooCommerce>產品圖像。
  • 如果您的主題或插件創建了自己的圖像尺寸,請同時檢查其設置和圖像尺寸。(有些被硬編碼在主題文件中。)
  • 如果調整或創建了任何媒體尺寸,請重新生成所有縮略圖

您不想要的圖像尺寸與佈局不匹配。例如:您的網站只有400像素和800像素的圖片大小,但是某些圖片區域為500像素大小…它將浪費掉800像素的圖片!在這種情況下,解決方案是將最接近的媒體尺寸調整為500px或創建一個全新的媒體尺寸。(理想情況下,我們希望媒體尺寸盡可能少,以節省服務器空間。)

39.對較小的設備(INT,MED)使用響應(自適應)圖像

  • 確保您的主題是移動設備專用的(大多數主題是),並且為較小的設備顯示較小的圖像。

此功能是WordPress和大多數編碼正確的主題的默認設置,也可以通過自適應圖像插件啟用。顯然,為移動設備加載桌面大小的圖像不是很好!問題在於某些主題無法正確啟用此功能。他們要么只為所有設備加載桌面大小版本,要么更愚蠢……他們為所有設備都加載(桌面和移動)大小。

如果您的網站使用大背景圖片,則最好確保此功能在移動設備中正常運行!

40.圖像壓縮(BEG-INT,MED)

  • 手動JPEG壓縮–使用圖像編輯器(例如Photoshop)確定所需的確切質量輸出。jpeg的60%是安全的。可以測試上下幾個百分點。適用於大型或重要圖像。
  • 手動PNG壓縮–使用圖像編輯器並調整顏色數量。
  • 自動壓縮–使用插件來完成。我最喜歡的圖像壓縮插件(依次)是ShortPixelLiteSpeed CacheWP Compress。您可以將它們用於不太重要的圖像或不精通技術的用戶。

手動壓縮圖像的另一種快速方法:只需上傳到ShortPixel的壓縮工具(免費)。

41.將不必要的透明PNG轉換為JPEG(INT,MED)

我經常看到坐在純白色背景上的大型透明PNG圖像。吞噬大量的空間時,它們的大小很容易變成一半,甚至看起來比 JPEG 更好

  • 如果您的透明PNG位於純色背景上,則可以輕鬆地將該圖像轉換為JPEG並匹配背景顏色。
  • 您將節省許多字節,並且不會發現任何差異!
  • 如果您的圖像很簡單,則純背景PNG可能仍小於透明PNG。

42.用CSS重畫圖像或圖標(ADV,LOW)

  • 某些主題或插件不必要地將圖像文件用於非常簡單的圖形(線條,塊,圖標),而僅使用CSS即可輕鬆繪製它們。
  • 您可以通過檢查圍繞網站主題的視覺裝飾來進行檢查。
  • 在CSS中重繪它們,您將保存一些不必要的HTTP請求。
  • 這是512個純CSS圖標的有趣集合(通過CSS Icon),有些甚至可以動畫!

想要變得聰明嗎?您可以將圖像和CSS混合在一起。使用CSS在圖像或濾色鏡中繪製形狀。有許多巧妙的用法可以節省空間和看起來更好

  • 漸變–一段時間以來一直是CSS的一部分,尤其是在Web 2.0時代。
  • 陰影–使用CSS而不是在圖像中放置邊緣陰影!
  • 黑白濾鏡–非常適合重用現有的彩色圖像。
  • 彩色濾光片–上面的相反。

43.圖標字體與SVG的對比(ADV,MED)

在開發人員世界中,關於圖標是否比SVG或圖標字體更好的爭論很多。開發人員可以自由選擇,因為他們知道哪種適合他們的用途和工作流程。在您和我之間,這是我的準則:

  • 可以使用CSS繪製簡單的圖標(箭頭,搜索杯,漢堡菜單)。
  • 複雜的圖標(社交媒體圖標,購物車,記事本等)需要SVG或圖標字體。
  • 如果只有2-3個圖標,則SVG的重量會減輕(甚至可以內聯)。
  • 如果您有10個或更多圖標,請使用自定義圖標字體服務(Fontastic,Fontello,IcoMoon)。或創建自己的自定義字體。
  • 自製圖標字體(我最喜歡)並在本地加載是最快的,因為即使一個2kb的小圖標字體文件也可以加載10-20個圖標,這正是您真正需要的。
  • 自製圖標字體的麻煩之處在於,如果您以後要添加/編輯圖標,它們將花費更多時間進行更新。
  • 最差的圖標字體是第三方加載的第三方字體!例如,Font Awesome的大小為30-200kb,並加載許多未使用的圖標。
  • 如果使用SVG,則可以使用Jake Archibald的SVGOMG對其進行優化。查看可以禁用或降低質量而不影響外觀的內容。
  • 請勿內嵌SVG,除非它非常小且僅在頁面上的一個位置使用。

大多數人不具備重新繪製CSS或創建自己的圖標字體的技能。我只想問您是使用SVG還是遵循其中一種自定義字體服務。無論您做什麼,都請不要加載FontAwesome,因為這是一個40-75kb的好消息,並且會花費100-150ms的加載時間。當然,許多主題開發人員會加載FA,因為這是在主題上放置許多圖標的最簡單/最懶惰的方法。

44.刪除未使用的介質尺寸(ADV,LOW)

  • 擁有大量圖像文件是否真的會使您的網站變慢?可能不是。
  • 它會減慢後端站點的功能嗎?也許。
  • 較長的備份時間會影響您的網站速度嗎?是!
  • 它可以使您的虛擬主機更加昂貴嗎?是。

最重要的是,它使您的網站不必要地混亂。使它變得更大和更大。讓我們清理一下。轉到主題和插件設置,然後取消選中/禁用您不需要的任何媒體尺寸。其中一些工作可能需要開發人員徹底檢查您的所有頁面模板,編輯functions.php並手動使未使用的介質尺寸出隊。

很難找到您的網站正在使用的所有媒體尺寸嗎?對我來說,一個方便的技巧是安裝這些圖像壓縮插件之一。他們會在一個方便的地方列出所有尺寸。😉

  • 擺脫不使用的介質尺寸。
  • 也可以刪除太相似的尺寸。(保持更大的一個。)
  • 刪除未使用的介質尺寸後,您將必須刪除未使用的圖像…但是要小心!
  • 有些插件說他們可以勝任。請仔細研究和測試。老實說,我不確定哪些會刪除未使用的介質尺寸,哪些會刪除整個未使用的圖像。
  • 十分警惕有許多圖像大小的報紙/雜誌的主題!

45.使用CSS子畫面(ADV,LOW)

Css Sprite是一種古老的策略,實際上仍然可以在某些用例中使用。很久以前,一些開發人員曾經將許多微小的圖像組合到一個圖像文件中,然後僅在CSS中調用其中的一部分。這是減少HTTP請求的聰明方法。如今,不再需要這種策略,因為HTTP / 2允許您有更多的HTTP請求,並且大多數較小的圖像都可以用CSS,圖標字體和SVG繪製。(如今,設計顏色也變得更加平坦,而不是過度使用顏色風格的WEB 1.0時期。)

  • 如果您有許多具有多種顏色的小圖像(和/或無法以圖標字體或SVG繪製),則可以嘗試CSS Sprite

46.視頻壓縮(BEG-INT,MED-HIGH)

  • 盡可能壓縮視頻。
  • 以webm或mp4格式輸出。(我喜歡mp4。)

頁面加載時自動播放的任何視頻都應絕對壓縮。如果您是前任編輯,並且知道如何在小文件大小和高質量之間取得完美的平衡,那就去做。對於其他人,只要做我容易的作弊!

  • 將視頻上傳到Vimeo,Youtube,Facebook等。
  • 然後重新下載其壓縮版本。

這些服務每天都會發布數十億個視頻,我認為它們擁有最好的算法!Youtube的壓縮是小尺寸和高質量之間的最​​佳平衡。如果您想要更高的質量,請嘗試使用Vimeo。如果您想要較小的尺寸,請嘗試使用Facebook。

比壓縮視頻更重要的是,確定您需要的視頻:

  • 你甚至需要聲音嗎?(如果沒有,請刪除。)
  • 您甚至需要彩色嗎?
  • 視頻只是文本的背景嗎?(甚至可以降低質量。)
  • 它甚至必須那麼大嗎?

您甚至需要視頻嗎?它甚至被監視嗎?也許不錯的大圖像更好,更清潔使用!

5.字體優化

您會認為字體在文件大小中是如此之小,以至於它們不會影響性能,但它們會完全影響性能。用戶通過您的內容來感知您的網站負載,而字體則是允許您加載文本的內容。有效地加載字體,用戶可以看到即時內容。

這樣做的效率低下,用戶會看到很多空白(又稱FOIT,即看不見的文本)…或更糟糕的是,醜陋的未樣式化文本,然後在字體加載之前出現屏幕閃爍(又名FOUT,即未樣式化的Flash,文本)。這真是一次令人不快的經歷。看起來像廢話,使您的網站顯示緩慢(對用戶和速度測試都如此)。

如今,使字體如此緩慢的原因在於大量免費的奇特字體(Google字體)。過去,您必須為精美字體付費,因此您對它們的選擇要更加明智。現在,即使是免費的插件也可以加載數百種Google字體。這使得更難以監視從何處加載字體以及為哪個文本加載字體。

無論您的網站大小,字體都會對速度產生明顯的影響。實際上,這是我最喜歡的優化策略之一,用於加速本來就輕巧的網站。加載字體時需要考慮許多因素,所有這些因素都會明顯影響您的內容加載時間!

47.系統字體vs本地加載vs webfont(BEG-ADV,MED)

  • 系統字體–比本地加載的字體或Web字體快。
  • 本地加載的字體–比Web字體快,並且可以CDN /瀏覽器緩存。
  • Webfonts –最慢,但如果已經緩存,則可以加載得同樣快。

系統字體(已內置在操作系統中)的加載速度比第三方服務器(Google webfont,Adobe,Typekit,Typography.com等)的Webfonts加載速度更快。只需知道Windows和Mac上都可以使用某些系統字體(例如Arial,Helvetica),而其他系統字體則不能使用,並且必須回退到類似的字體(例如Windows的Segoe UI和OS X的System UI)。

我為2個網站使用系統字體。像今天的大多數網站一樣,它們的其餘部分都需要一個漂亮的Webfont才能顯得美觀。幸運的是,Web字體以各種方式不斷改善其加載時間。它們不斷減輕重量並刪除不必要的字節。

Webfonts也緩存在瀏覽器中,因此,如果您使用的是流行的Webfonts,您的用戶很有可能不必重新下載它(因為他們已經從另一個站點獲得了它)。另外,我認為流行的Google webfonts很快將以本地方式存儲在Chrome瀏覽器中(如果尚未存儲)。但話又說回來,移動瀏覽器經常清除其緩存。但是再說一次,還有DNS預取可以幫助webfonts。

本地加載的字體(意思是服務器中的“本地”)在某種程度上被視為使字體排隊的一種過時方法。Web設計師曾經從第三方網站購買精美字體,下載整個字體系列軟件包,然後仔細選擇並加入該網站。這是一個繁瑣的過程,沒有讓最終用戶(輕鬆)切換字體。但是,由於Webfonts的部署有點膨脹,因此本地加載的字體在註重速度的開發人員中仍然很流行。

我個人僅使用系統字體或本地加載的Webfonts。

48.使用更少的字體(BEG,MED)

  • 僅使用一種字體是最快的。
  • 如果使用2或3種字體,請確保禁用未使用的樣式!

顯然,減少字體會有所幫助。如果您僅能使用一種字體,那就太好了。這是IMO的最簡潔外觀,您仍然可以通過使用大小,重量,字母間距,字母大小寫,顏色等來創建不同的樣式。但是,如果需要,您可以添加僅用於標題的第二種字體。一些真正經過專業設計的網站甚至會為字幕,H3標頭,報價,價格或其他強調的文本區域提供第3種字體。

  • 有些字體比其他字體重。有時,即使一種字體也可能比其他兩種字體重。
  • 不要忘記從站點禁用字體加載(入隊)。僅僅停止使用它是不夠的。

49.不要排隊未使用的字體粗細,樣式,字符集(INT,MED)

很多人沒有註意到網站上加載的未使用字體樣式!我見過很多加載所有字體粗細(100、200、300、400、500、600、700),字體樣式(常規,斜體)和字符集(擴展的拉丁語,希臘語,西里爾字母等)的網站……。實際上,它們只需要字體粗細400(常規)和700(粗體),並且只需要基本的拉丁字符集。

  • 檢查您的網站上所有未使用的字體樣式。
  • 從主題和插件設置中刪除他們的請求。
  • 還要從標題和样式表中刪除(如果手動安裝)。

如果您不知道實際使用的是哪個,請列出。鏈接到瀏覽器書籤欄上的FOUNT字體查找器,並標識網站上使用的每種字體。在不同的頁面佈局上進行測試,然後單擊所有內容位。標題,導航,標題,內容,頁腳和小部件中的文本。不要忘記檢查諸如轉盤,彈出窗口,選項卡式或折疊式內容之類的隱藏元素。你感到不知所措嗎?這僅表明您的負載量超出了您的需要!

  • 正文通常需要常規(400),斜體(400)和粗體(700)
  • 標題和標題可以重複使用常規的400或700,但是有些人希望使用超瘦(300)或超重型(900)。
  • 大多數網站從不對標題/標題使用斜體,因此,如果您為它們加載900,則可能不需要斜體900。

無論如何,大多數是常識。那些手動將字體排入隊列的人已經知道並做出明智的選擇。新手是通過pagebuilder或插件加載字體的,這些字體可能具有不必要的粗細,樣式和字符集。

50.字體入隊方法(ADV,MED)

這是IMO在發展世界中的藝術和廣泛辯論領域。有許多種方法可以使字體(尤其是網絡字體)入隊,每種方法各有優缺點。我將在下面留下一些一般準則:

  • 字體應該在內容之前加載-我不在乎FOIT或渲染阻止,最好從一開始就以適當的字體加載文本。
  • 字體應(小心地)由主題而不是插件加載。如果您的插件具有字體/排版選項,請選擇“繼承”。

在本地加載時,Webfonts加載速度更快,並且緩存過期時間較長。但是,如果您使用的是普通的(輕量級)網絡字體,那麼速度差異就不會那麼明顯。

webfonts如何入隊的最大問題是由於開發人員試圖使其易於使用。如果您隻手動排隊一種Web字體並將其小心地插入主題中,通常就沒有問題。當開發人員試圖為新手用戶提供無窮無盡的字體選擇下拉菜單時,它會變得凌亂,並且會加載比所需更多的東西。

不要在閱讀瘋狂的詳細指南一樣陷入了這個這個。他們會通過各種預緊力和後退震顫搖動您的頭。我的底線是…在文本之前加載字體。不要讓文本首先加載,因為這會給腫的WordPress網站造成很多FOUT混亂。

51.自動字體設置(ADV,MED)

字體子集是一種巧妙的減重策略,它僅加載內容中實際使用的字體字符。在許多用例中,您不需要字體中的所有字符。對於某些人來說,擺脫未使用的字符會使字體文件大小減小1040倍

  • 僅基本的拉丁字符-如果您不需要重音符號,埃及符號等。
  • 僅大寫–標題字體,標題。
  • 僅數字-用於特定樣式的數字?
  • 僅貨幣符號–如果僅將此字體用於價格菜單?
  • 僅某些字符-徽標,標題
  • 僅通用字符-99%的網站使用所有通用字符。

Webfont服務很容易允許某些字體子集。其他的,您只能手動執行(但是有有用的工具)。以下是一些工具和指南。

  • 使用CSS字體子設置(新代碼)來減少頁面加載時間 –子集Web字體和本地加載的字體的簡易指南。
  • Webfont Generator(字體松鼠)–很棒的工具,有很多選擇。選擇“專家”,向下滾動,然後選擇基本或自定義子設置。我喜歡這個。
  • 字體訂購者(所有字體)–簡單的工具,用於上傳和子集您喜歡的任何字體。他們有有用的基本選項。您也可以在底部選擇“其他字符”。
  • 使用Web字體子集(Benjamin Black)節省頁面粗細 -使用fonttools,glyphhanger和pyftsubset從服務器CLI設置字體子集。

通常,當您執行此級別的字體優化時,您的字體文件會變得很小,以至於只有在本地加載它們才有意義。多次調用Google的字體服務器僅獲得字體的1/3毫無意義。嘿,那是您的要求。我認為,如果您要手動優化到這一點,請一直進行下去。

  • 這種“本地加載的子集網絡字體”方法為我提供了不錯的字體和輕量級的超快速加載。
  • 是的,我無法從已經從其他網站緩存或通過字體託管服務輕鬆更新的好處中受益。
  • 但是同樣,它們更輕巧,也可以按我指定的時間間隔緩存在CDN和瀏覽器中。(在頁面測試中也顯示得更快。)總體而言,好處勝過任何缺點。
  • 我建議僅使用WOFF2,因為它是最壓縮/最輕的並且適合所有現代瀏覽器。有時,字體服務會加載更大的WOFF,但與真正的舊瀏覽器兼容(對我而言並不重要)。

字體設置也可以提高創意設計的靈活性。就像將一種字體的字母與數字或另一種的符號混合在一起。或者也許您只想要一個真正獨特的“&”符號或獨特字母,因為那是您自定義的徽標字母。如果您已經這樣做了,至少現在您知道它是如何完成的,而無需加載整個字體。

52.手動字體設置(ADV,MED)

一些真正的速度迷(例如我)會手動編輯字體,以刪除所有不必要的字符和字形。我的意思是……ALLLLLL!這種策略非常繁瑣,肯定會為您贏得“我沒有生命”獎。

這裡唯一選擇的工具就是傳奇的FontForge,專業設計人員使用它來創建和編輯新字體。它看起來像一個巨大的圖庫,包含字體中的每個字符。允許您手動調整每個人的形狀和與相鄰字符的間距。

使用FontForge的2種方法:

  • 減少–加載字體,然後刪除不需要的字符。(從已經被子集化的字體開始可能更聰明。)
  • 從頭開始構建–並排打開現有字體和新字體,然後進行複制。如果您只需要幾個字符,則此路由很有意義。

是的,您必須瘋狂調整一下,但這確實可以使您的字體超輕量。實際上,我發現它非常有趣(儘管有工作)。這是使已經輕量級站點變得更加輕量級的少數策略之一。

有關字體優化和子集的其他想法:

53.在單個請求中加載所有Google Webfonts(MED,LOW)

請求Web字體時,將其全部放入一個請求中,而不是多個。如果有的話,這是將所有webfonts加載到一個地方的一種做法!不要按主題加載某些字體,按插件加載其他字體等等。

54.優化超讚字體(ADV,MED)

我不喜歡FA,但也許喜歡它,或者不想重新設計已經為FA建立的主題。這是減輕重量,提高速度和頁面得分的方法!

  • 將“真棒字體”優化為10kb的低得離譜!–由WEBJEDA
  • 懶?只需在本地加載即可。
  • 有更多時間嗎?擺脫未使用的圖標。
  • 如果您認為重建一個新的iconfont或使用SVG更容易,那可能是……唯一的問題是替換所有對FA的CSS調用。

我發誓在本地加載FA很容易。只需從網站下載(甚至可以匹配您已經使用的相同版本)即可。將FA文件夾上載到您的網站目錄,然後進入您的主題或從中加載FA的任何位置,並更改從網站(而不是FA域)加載網站的請求。

55.預加載字體(ADV,LOW)

您是否覺得自己的內容沒有立即顯示出來?您可以在標題中預加載字體,而不必等待CSS加載。這也使字體預加載對具有巨大(或合併)CSS文件的人們有用。

56.避免重複的字體調用(BEG,MED)

新秀錯誤,我一直都在看。主題稱為webfont(假設是Google的Montserrat),pagebuilder稱為完全相同的字體,彈出插件又將其命名。因此,現在,我們接到了3個電話和30個請求,分別請求Google的webfont服務器下載相同的該死字體。真蠢!

  • 嘗試僅從一個位置(最好是主題)加載字體。
  • 所有其他字體設置位置(如插件)應使用“繼承”選項,而不是選擇字體。
  • 當心用於選擇字體的插件(頁面構建器,滑塊,彈出窗口,超級菜單)。

常見錯誤是用戶認為他們必須在每個網站設置中重新選擇其字體。不要那樣做!

6.緩存優化

最好將緩存定義為保存已處理的請求,以便在再次請求時可以更快地處理它們。從一開始,它就一直用於計算機技術的各個方面,並且對於加快頁面加載速度絕對必要。

緩存的種類很多(跨不同的層,協議和服務),並且有許多配置方式。正確設置它們,您將擁有一個快速的站點,可以減輕服務器負載並節省資金。將它們設置錯誤,您的站點有時速度很快,或者設計和功能損壞。

如果您曾經聽說過有人抱怨緩存,這是他們不知道如何針對其用例進行配置和/或使用為服務器效率而非速度而配置的緩存解決方案的結合。

57.選擇合適的服務器進行緩存(BEG-ADV,HIGH)

全頁緩存(也稱為“靜態緩存”或“緩存”)是指預先構建整個頁面,使其像HTML一樣靜態,因此可以在訪問頁面時立即提供服務。無需等待任何數據庫查詢或PHP處理……該頁面會立即顯示。就像在訂購之前製作的漢堡一樣!

過去,緩存僅由Web服務器完成(因此稱為“服務器緩存”),並用於降低服務器負載。這是幫助繁忙的Web服務器處理大量流量的策略。後來有人意識到這可以幫助加快當今s腫的站點的速度,因此現在,從速度的角度來看,緩存也被使用,甚至可以在流量很少的小型Web服務器上部署緩存。

開發人員甚至創建了軟件級緩存機制,以為沒有服務器訪問權限的用戶或在未啟用“服務器緩存”模塊的服務器上重新創造相同的收益。當然,它們的速度不如真正的服務器緩存快,但仍然具有巨大的影響力,並且由於具有額外的緩存功能,在某些情況下甚至更有用。

對於普通用戶而言,最重要的區別是要了解他們對每個Web主機或Web服務器的緩存限制。在網絡服務器方面,Apache,LiteSpeed和NGINX都有不同的服務器緩存。

在虛擬主機方面……只要知道某些虛擬主機可以讓您自由使用其服務器緩存或您選擇的任何第三方插件。其他Web主機迫使您使用專有的緩存解決方案。當然,他們將其作為高科技和“最佳性能”來出售,但通常它是一種精簡的緩存解決方案,旨在提高資源效率而不是提高性能。如果您嘗試使用外部插件,則該插件將無法正常工作,否則網站託管公司會自動將其禁用。

  • 從服務器而不是通過軟件級PHP緩存,緩存通常更快,資源效率更高。
  • 如果使用LiteSpeed服務器,則可以使用內置的LiteSpeed服務器緩存。
  • 如果使用NGINX服務器,則可以使用內置的FastCGI服務器緩存。
  • 如果使用Apache(不應該使用),則可以使用Varnish代理甚至NGINX代理。
  • 所有的網絡服務器都可以使用任何軟件級的php緩存(通過緩存插件)。但是有些插件是為Apache / LiteSpeed服務器設計的,而其他插件是為NGINX服務器設計的。
  • 小心某些Web主機(尤其是“託管Web主機”)會迫使您使用緩存解決方案,而不會讓您使用其他緩存插件。

只要知道您選擇的Web服務器或Web託管公司會影響您的緩存體驗以及可以使用的緩存插件。

58.選擇合適的緩存插件(BEG-ADV,HIGH)

我已經嘗試了50多種不同的緩存插件。最好的網站具有有用的功能,易於使用且不會破壞您的網站。如果您僅管理少數幾個站點,則可能更喜歡具有許多優化功能的激進插件,甚至是人們共享技巧的Facebook組。如果您管理數十個客戶,您將更喜歡功能更少,出現問題的機會更安全的插件。

  • 最好的全方位緩存插件(可在任何Web服務器上使用)是Swift PerformanceWP Rocket。迅捷更進取,火箭更穩定。
  • 還有其他好的緩存插件(WP Fastest Cache,Breeze,WP Performance,Comet Cache,Borlabs)。
  • W3TC很爛,很難配置。除非您是專業人士,否則請勿使用。
  • 如果使用LiteSpeed服務器,則可以使用LiteSpeed緩存插件。我的最愛。
  • 如果使用NGINX服務器,則可以堅持使用NGINX幫助程序插件以保持簡單,也可以使用功能齊全的緩存插件(如Swift或WP Rocket)。
  • 不要組合多個緩存插件!
  • 我也不喜歡將緩​​存插件與其他性能插件結合使用,但是如果仔細配置(並且不重疊功能),它可以正常工作。

確定使用哪個緩存插件取決於您的用例。

  • 小型網站只有400頁,流量很少?–啟用預緩存的Swift或WP Rocket。
  • 具有400-1k頁的中等網站,以及中等流量?–可以與緩存插件Swift / Rocket或服務器緩存LiteSpeed / NGINX一起使用。兩者都有優點和缺點。
  • 大型網站擁有1k或更多的頁面,流量很大?–我喜歡自定義配置的LiteSpeed高速緩存或本機NGINX高速緩存,由於您的流量非常大,因此無需預高速緩存。

59.緩存插件配置(INT-ADV,高)

現在,緩存插件的配置比以往任何時候都更加複雜,因為它們所做的事情不只是緩存。本節僅專門介紹與緩存相關的設置。關於您在緩存插件設置中看到的其他選項,我的建議將在本指南的其他部分中。

  • 重寫vs PHP –大多數緩存插件僅提供PHP選項。如果您可以選擇使用重寫方法,請嘗試這樣做,因為它更快。如果導致問題,請切換到php方法。
  • 緩存TTL –這表示緩存應持續多長時間。您應該將其設置的時間大約與內容更新間隔相同。如果每天更新,則設置24小時。如果您幾乎從不更新,可以將其設置為1個月。
  • 專用緩存或已登錄用戶/頁面–除非您確實有很多已登錄用戶並且知道如何防止緩存在用戶之間混淆內容,否則不要使用。
  • 獨立的移動緩存–除非您擁有AMP或僅在移動設備上顯示的特定設計或內容,否則不要使用。僅僅因為您擁有一個響應移動設備的網站,並不意味著您需要此網站。
  • 緩存404頁-如果您有很多用戶點擊,則可以。如果將它們全部重定向到實際頁面,則更好。
  • 動態緩存–非常適合緩存帶有查詢或過濾器的網址,例如搜索或電子商務產品過濾器。
  • 排除-對於排除不應緩存的頁面絕對重要。我通常排除簽出,已登錄的用戶頁面或帶有表單的頁面。
  • 瀏覽器緩存–是,啟用它。
  • 心跳控制–我通常禁用除帖子以外的所有頁面。或者,如果需要,可以將其間隔增加到每120秒一次。

並非每個緩存設置或緩存插件都允許您配置所有這些選項。如果看不到它們,請不要驚慌。實際上,有太多可能的設置……請參考以下我的緩存配置指南:

60.配置緩存預構建(INT,MED-HIGH)

對我而言,緩存最容易被忽略的方面之一是緩存預構建過程。一些插件稱其為“ cache-preload”,另一些插件稱其為“ cache-warming”或“ cache-crawler”。緩存預構建功能是一種預緩存頁面的機制,因此頁面在訪問時可以快速加載。過去,緩存僅用於高流量站點,因此不需要緩存預加載。緩存是由第一個訪問者構建的,所有後續訪問者都將從已經構建的緩存中受益。很好,因為您有成千上萬的訪問,而且只有第一個人才很不幸看到“速度較慢”的頁面。

但是在當今的緩存時代,如果流量很少,讓“第一人稱呼”緩存是一個可怕的主意。在沒有預先構建緩存的不太繁忙的站點上,您的所有訪問者似乎訪問了一個冷的(未緩存的)頁面。僅供參考:與沒有任何緩存相比,訪問冷緩存的用戶看到的頁面加載速度會更慢!

所以無論如何,我們現在已經進行了緩存預構建。具有或允許服務器範圍的緩存預構建功能的服務器很少。他們可能擔心用戶濫用它。出於同樣的邏輯,許多虛擬主機不允許您使用這些損壞的鏈接檢查器插件(因為它會佔用寶貴的資源)。

  • LiteSpeed服務器具有內置的緩存爬網功能。不過,很少有Web主機在共享服務器上允許它。如果您在自己的VPS上擁有訪問權限,則可能只會獲得訪問權限。
  • 不在LiteSpeed上的任何人…。嗯,那裡有許多服務器級緩存預熱機制和腳本,但是並不十分友好。如果您堅持可以搜索它們。但是,如果您使用LiteSpeed,則要容易得多。
  • (對於大多數人而言)唯一的選擇是使用一個緩存插件,該插件具有內置的緩存預構建功能,例如Swift Performance和現在的WP Rocket(從Swift複製了這個想法)。
  • 預先構建可以極大地改善您網站上的緩存體驗。如果可以,請啟用它!

在某些情況下,您不應該使用cache-prebuild。一種是,如果您有許多訪問者,那麼這是沒有用的,因為已經有實時流量在緩存中加溫了。另一個是當頁面太多時。

我會說1k頁是一般的門檻。如果您的頁面超過1k,並且經常更新您的網站,建議您不要預先緩存,因為您的服務器將使用很多資源,甚至永遠無法完成工作。如果您的緩存在完成之前就被清除了,那麼它就陷入了一個永久性的循環,即不斷預建從未使用過的緩存。

61.對象緩存配置(BEG-INT,MED-HIGH)

對象緩存對於動態站點(不斷刷新的數據和/或無法緩存)或管理後端中具有大量計算的數字/報告的任何站點很有用。對象緩存將數據庫調用保存在RAM中,因此不必在每次查詢時都對其進行查詢。

由於RAM非常寶貴(沒有硬盤空間那麼多,並且是運行程序所必需的),因此通常在許多共享主機計劃中都不允許對象緩存。此外,還必須通過服務器啟用它……因此,只有在擁有自己的服務器或允許對象緩存的託管計劃中才有可能。

  • 必須從服務器啟用對象緩存。
  • 可以通過虛擬主機控制面板或WordPress插件管理對象緩存。(插件更好。)
  • 最好是擁有一個可同時管理頁面緩存和對象緩存的緩存插件(例如LiteSpeed緩存)。這樣,它們將同時清除緩存。
  • 為了安全起見,您可以使用5到10分鐘的對象緩存到期時間。但是,如果您的內容不經常更新,則可以將其提高到30-60分鐘。

如果您只有靜態站點,建議不要使用對象緩存。在某些情況下,它比普通的頁面緩存還要慢。“以防萬一”啟用它沒有幫助!當然,您可以自己測試並查看。

使用對象緩存的主要原因:

  • 緩慢的管理員後端。
  • 繁重的數據庫功能。
  • 不知道您的網頁是否遇到查詢緩慢的問題?檢查與查詢監視器。

62.瀏覽器緩存又名“ htaccess過期標頭”(BEG,LOW)

這是一種常見的策略,人們將很多行粘貼到htaccess中,因此靜態文件在瀏覽器中緩存了很長時間(1週,1個月甚至一年),因此用戶無需重新下載它們。也許以前沒什麼大不了的……現在不再了。

  • 許多設備(如移動電話)具有有限的空間,並刪除他們的瀏覽器緩存時,他們想要的,而不是當你想要的。
  • 瀏覽器緩存僅有助於回頭客,而且許多站點反正流量很少。(此外,我們更關心改善用戶體驗的是新訪客。)
  • 如果您想使用瀏覽器緩存,可以通過緩存插件來完成,而不是將長命令複製粘貼到htaccess文件中。

63.忽略頁面緩存上的查詢字符串(BEG,MED)

查詢字符串(URL末尾的多余文本)用於向服務器發送信息。下面的查詢字符串示例及其作用:

  • 搜索–顯示不同的搜索結果。(例如,搜索?= wordpress +提示)
  • ref –讓網站跟踪誰推薦了用戶,並將信息保存在轉換跟踪軟件中。(例如ref?= affiliateID)
  • fbclid –讓網站知道用戶來自Facebook。(例如fbclid = 123ABC)
  • (產品)過濾器–根據名稱,價格,尺寸或其他產品規格顯示不同的產品。(例如filter_size?= large)

如您所見,其中一些查詢字符串實際上會更改頁面內容,而其他字符串則不管查詢字符串如何都顯示相同的頁面內容。這裡的想法是從緩存中排除查詢字符串(不會更改內容),以便您的緩存機制不會將這些匹配存儲為其他頁面。這將使您的服務器免於不必要的工作,而無需在不同的URL字符串下訪問同一頁面,並更快地將頁面提供給現有緩存中的訪問者。

對於來自查詢字符串網址(例如Facebook廣告,會員鏈接,電子郵件新聞通訊鏈接(帶有轉化跟踪))的訪問者,這有很大的不同。

64.為登錄用戶(ADV,MED)提供專用緩存

私有緩存很少使用,因為大多數站點都不需要私有緩存(它們沒有很多登錄用戶)。緩存公共頁面很容易,因為每個人都可以看到同一頁面。緩存私有頁面非常困難,因為必須緩存每個用戶如何以不同的方式看待頁面,並且(最好)不要浪費太多空間,從而一遍又一遍地將大多數相似的頁面節省下來。

  • 某些私有頁面很容易–所有登錄用戶的內容都是相同的,但對於未登錄用戶的內容則有些不同。
  • 某些私人頁面會更難-根據用戶顯示大部分相同的內容,但還顯示自定義數據(例如其名稱/用戶名)。
  • 其他私人頁面比較棘手-向每個用戶顯示完全不同的內容。

處理私有頁面的最簡單方法是使用對象緩存而不是頁面緩存。為了更加積極主動,您可以仔細啟用私有緩存…但是請確保用戶看不到彼此的信息,而公眾也看不到私有內容。

這裡有某些機制,例如LiteSpeed的ESI功能,您可以根據用戶顯示不同的內容和小部件……這很好。但是最終,在這個級別上,您需要聘請專業人士或花費大量時間來配置一些既有用又不會消耗太多資源(內存和空間)的東西。專用緩存很難!

65.邊緣的HTML緩存(INT,MED)

這是WordPress的一種相對較新的技術。有一些插件和服務可以將頁面緩存在邊緣,並使用CDN鏡像將其提供給世界各地的客戶。有3個主要好處:

  • 在他們的服務器上而不是您的服務器上進行緩存–減少了服務器負載,有助於減慢網絡託管速度,降低服務器成本,即使服務器沒有緩存也可以進行緩存。基本上……即使您的虛擬主機/服務器很糟糕,也可以讓您更快地移動!
  • CDN提供的HTML –傳統上,CDN僅傳輸靜態資產,例如圖像和CSS / JS。借助針對HTML的這種新的邊緣緩存,他們還可以從附近的彈出服務器中提供HTML…從理論上改善遠離原始服務器的訪問者的頁面負載。
  • 進一步的DDOS保護–由於使用了較少的服務器,因此較少的服務器受到DDOS攻擊。

可用的顯著邊緣緩存插件和服務:

  • QUIC.cloud –來自LiteSpeed網絡服務器的製造商。他們的質量控制服務使任何網站都可以從LiteSpeed快速性中受益,即使他們沒有LiteSpeed服務器也是如此。
  • Shifter –作為“ WordPress的靜態站點生成器”出售。似乎與通常的WordPress工作流程截然不同。
  • WP Cloudflare超級頁面緩存 –允許您使用免費的Cloudflare計劃緩存所有內容。以前的插件聲稱可以做到,但是以一種或另一種方式失敗。
  • 我相信還有更多,但現在找不到。

您是否需要這些服務,或者如果您已經擁有快速服務器,它們是否對您有好處?我認為不是很多。我不使用任何一個,因為我對服務器緩存已經很滿意。但是對於那些服務器較弱的服務器來說,這些可能是不錯的選擇。請密切注意這一部分,因為我相信它會迅速發展。

7.本地資產優化

資產是從服務器加載的任何靜態文件。CSS樣式表,JS腳本,圖像,字體,視頻。由於它們經常是內容,或者它們直接影響內容的顯示方式,因此需要快速進行處理。簡而言之,您的內容只有在加載資源後才能加載!

現在的訣竅是如何加載資產。一些應該首先加載,其他應該隨後加載。頁面頂部附近可見的東西應優先處理。我們不想要的是不太重要的資產來阻止關鍵資產。我們還能如何優化它們的加載方式?

66.減少資產要求。(BEG-ADV,高)

最快的要求是沒有提出!減少資產請求(和整體HTML)的最明顯方法是不首先調用它們。許多人花費大量時間試圖壓縮和組合垃圾,這些垃圾本來不應該存在的!請重新考慮頁面上的所有內容。

  • 擺脫不必要的東西。(插件,圖像,字體等)
  • 擺脫不必要的視覺效果。(動畫,鼠標懸停等)
  • 禁用不必要的插件CSS / JS。
  • 考慮將內容移動到其他頁面。不要將整個網站都放在首頁上。
  • 您加載的東西越少,所需的資產越少。

對於您仍然擁有的資產?我們還有更多花樣……

67.刪除未使用的WordPress核心JS(BEG,低)

WordPress默認包含一些可能不使用的JavaScript。您可以在functions.php文件中使用一些簡單的片段來禁用它們。

  • wp-embed.js –在編輯器和內容中方便地嵌入Youtube視頻或取消鏈接鏈接。如果您從不真正嵌入視頻,而您所有的內容僅僅是文本和圖像,則可以將其出隊。
  • wp-emoji-release.js –將標點符號轉換為表情符號的小JS。您可以禁用此功能,因為現代瀏覽器已經原生支持表情符號。
  • jquery-migrate.min.js –支持舊的WordPress主題和仍在舊的jquery庫上運行的插件。使用更新的主題/插件的網站可以安全地禁用此功能。
  • jquery.js –許多主題/插件使用的大型JS庫。這很方便,因為如果主題/插件可以使用默認的jQuery JS,則它們不會加載額外的JS。問題是某些主題/插件不使用它,反正它們會加載自己的JS。如果您的主題/插件不使用它,則將其禁用。如果您不知道,請禁用並仔細檢查所有內容……或查閱所安裝的每個主題/插件的文檔。

我確定您已經看過一些性能插件,可以為您禁用這些插件。我建議不要使用它們,因為它們有時會創建自己的額外負載。我更喜歡在functions.php中手動禁用這些功能,或者使用我的緩存插件中的內置功能。

68.使用主題和插件(BEG,MED)中的本機CSS / JS優化

如果您的主題或插件具有內置的CSS / JS優化功能,請使用它們,因為它們更安全,並且可能不會引起任何問題。

  • 允許CSS / JS合併和縮小的主題或頁面構建器–使用它。
  • 允許使用不同CSS生成選項的插件–始終選擇“外部CSS文件”,因為它比將它們“內聯”或“存儲在數據庫中”更快,更安全。如果內聯是超小的CSS(例如3行),則僅使用內聯。

69.僅將CSS / JS組合用於小型網站!(低BEG)

是否應該結合併最小化CSS / JS(也稱為“串聯”),存在著巨大的爭論。我相信,如果您結合使用CSS / JS會更好(通常)。話雖如此,較小的站點可以從合併中受益,因為小型CSS / JS的大部分加載時間將來自DNS查找而不是代碼處理。

對於較大的站點或較大的CSS文件,我絕對建議不要將它們組合在一起。您可以閱讀上面的鏈接以獲取我的解釋。基本上,這是因為HTTP / 2使得不需要串聯,而且並非所有CSS / JS都應加載到一個文件中。

  • 如果您打算結合使用CSS / JS,最好的IMO方法是僅通過主題CSS選項來實現。(當然,它只結合了主題相關的CSS而不是插件。)

70.結合CSS / JS用於大型網站(ADV,MED)

我已經說過為什麼不結合使用CSS / JS,我仍然堅持。但是我知道有些人還是會堅持這樣做,因為他們更關心頁面分數或互聯網上其他人所說的……好吧,這樣做是這樣的:

  • 輕鬆–在緩存插件中使用CSS / JS組合選項。測試您的網站。如果某些樣式或功能中斷,則排除有問題的樣式或功能。
  • 進階– 在緩存插件旁邊使用專用的CSS / JS組合插件(“自動優化”是最好的)。此方法需要更多的配置,但可以使您對優化進行更精細的控制,並減輕緩存機制的負擔。由於內容更改不會清除CSS / JS,因此實際上可以很好用。
  • 注意:如果要與另一個插件一起使用,請不要在緩存插件中使用組合功能。h!
  • 注意2:如果您的主題/頁面構建器也具有合併選項…是的,則可以將它們一起使用。但是先將pagebuilder和插件結合起來,然後再從緩存插件中整體進行。

樣式或功能中斷時該怎麼辦(這將對您中的95%發生)。禁用優化並一次重新啟用一項-測試每個更改。僅使用CSS執行一項操作,然後僅使用JS執行一項操作。有時,導致問題的原因僅是一個CSS或JS。找出是哪一個並將其從合併中排除:

  • 染料溶液的方法#1 -與結合CSS / JS,在Chrome中打開你的網站>開發工具>網絡(標籤),並重新加載頁面。單擊紅色小錯誤圓圈,查看缺少的CSS / JS。排除它們,看看一切是否正常。
  • 隔離方法2 –禁用合併(以及緩存),然後在Pingdom中掃描您的站點  。按文件類型對瀑布項排序(整齊顯示所有CSS / JS)。現在,重新啟用合併,但是手動排除您認為引起問題的CSS / JS。
  • 提示:遇到任何問題都可能與問題有關。某個插件或主題功能是否停止工作?嘗試禁用  那些  CSS / JS。是的,這需要大量的反複試驗。它可以在任何地方;也許是插件,也許是您的主題。
  • 提示:是否想隔離問題?如何僅將CSS / JS組合為最most腫的擴展?對於大多數人來說,這是主題或頁面構建器。因此,將所有資產合併為一件事物,而排除其他所有事物。這是一種在沒有合併衝突問題的情況下獲得所需大部分收益的簡便方法。

如果您仍然遇到問題怎麼辦?如果您的站點看似很快,但FOIT或FOUT問題很小,該怎麼辦?如果您的網站感覺更怎麼辦?這就是為什麼我告訴你不要這樣做!

71.手動組合自定義CSS(INT-ADV,LOW)

  • 減少不必要的CSS請求的另一種巧妙方法是禁用所有由插件排隊的自定義CSS,並將它們手動添加到主題自定義CSS區域。
  • 是的…如果將所有CSS組合到主題自定義CSS中,則可能不再需要那些“添加自定義CSS”插件。擺脫它們。

如果幸運的話,某些插件會提供一個簡單的複選框來禁用其CSS樣式。其他情況下,您只能通過在functions.php中放置過濾器代碼片段來使CSS出隊。對於既不允許也不支持的插件,您可以從插件手動編輯CSS調用(但是如果您更新插件,則必須重新進行這些修改)。

72.刪除未使用的CSS樣式(ADV,MED)

您可以通過刪除所有未使用的樣式來簡化CSS。只需進入您的主題或插件CSS並刪除所有未使用的內容。主題和插件具有相同元素的冗餘/不必要樣式的情況很常見。編輯之前,可能有助於在台式機和移動設備上製作網站頁面模板的屏幕截圖。

  • 未使用的部分。
  • 未使用的塊或元素。
  • 未使用的按鈕或圖標。
  • 未使用的表。
  • 未使用的版式。

需要注意的一件事是,如果您要從主題或插件中刪除默認CSS,則稍後再更新主題/插件時,它們可能會再次出現。

希望有條不紊的過程嗎?

  • 從WordPress刪除未使用CSS的故事(WP Speed Matters)–由另一個受人尊敬的WP Speed Addict撰寫的優秀指南。他還提到了我列出的所有工具。
  • 檢查前端上的所有網站模板。查看它們加載了哪些腳本。查看哪些零件顯然未使用。通常,您從未使用過許多主題/插件的設計元素。開始註釋掉樣式,如果您的網站沒有問題,則在一個月後將其完全刪除。或根據需要進行備份並立即刪除。

73.手動重構CSS / JS(ADV,LOW-MED)

如果您掌握了這些技能,則可以通過從頭開始重寫整個CSS來更進一步。仔細清潔和重新整理樣式,以使其更易於閱讀和解析。在這樣的時刻,您甚至可以重新考慮設計,使事情變得更簡單。

74. Javascript異步和延遲(ADV,MED)

JS異步/延遲策略背後有很多話題,但並非總是有充分的理由使用它們。當惱人的頁面測試為不了解JS工作原理的用戶提出通用建議時,這無濟於事。

  • 並非所有的javascript都應該異步或推遲!
  • 用於ATF項目的所有JS都應單獨放置。
  • 如果您不立即需要任何不用於關鍵元素的JS功能,則應將其推遲使用
  • 只要先進行測試,就可以使用JS async。

速度測試的問題在於,他們不惜一切代價試圖提高頁面得分。他們不知道您的JS專門用於什麼,所以他們提出了愚蠢的建議,可能實際上會損害您的頁面加載!

推遲JS會延遲依賴於它們的可見效果或功能!

  • AJAX(自動填充)搜索功能–可以推遲。
  • 轉化跟踪-您想早晚開始跟踪嗎?(我稍後再說。)
  • 聊天框–用於銷售/支持。推遲是有道理的。
  • 內容渲染–您是否有依賴JS的特殊頁面或內容?如果該特定內容很重要或在頁面頂部附近,請不要推遲。
  • 鏈接插件–您是否具有用於呈現會員鏈接的特定JS?我認為推遲可以。
  • 彈出式窗口–延遲更好。
  • 安全功能–應用驗證碼或防止右鍵單擊的任何JS或任何其他安全功能。我認為推遲可以。
  • 滑塊或圖像動畫–如果它們位於您網站的頂部,那就太糟糕了!如果推遲,它們的加載速度會變慢!
  • (大概的好規則是永遠不要將可見元素推遲到頁面頂部附近。)

對我來說甚至更有趣的是,您可以通過將代碼放在頁腳而不是頁眉中來手動“推遲”自己。諸如Google Analytics(分析)之類的東西可以稍後放置,稍後再加載(在解析所有HTML之後)。因此,如果您真的考慮過這一點,那麼人們使用JS異步/延遲的唯一原因就是為自動放置在標頭中的任何JS優化負載。而且,如果將其放置在此處,您是否認為它可能意味著應該更早加載???

因此,就像我說的,請注意異步/延遲!如果您想使用它,請仔細測試。但是總的來說,為了安全起見,我寧願保持原狀。在頁面測試中得分較高沒有任何意義,但是某些站點元素或功能的加載速度較慢。JS對編碼良好的網站幾乎沒有影響。

75.如何最小化HTML,CSS,JS(BEG,LOW)

代碼最小化通過刪除所有空格和不必要的代碼註釋來減小文件大小。這樣可以減少通過互聯網發送的字節,而不會造成任何功能損失。到處都是雙贏!

  • 小型站點沒有太多好處可從縮小中受益。
  • 較大的站點將受益更多(尤其是對於移動速度較慢的訪問者),但是即使這樣,無論如何,只要將CSS / JS緩存在瀏覽器中,縮小操作就無濟於事!

我唯一的問題是如何最小化此代碼。

  • 通過緩存插件–小型站點可以。
  • 通過特定的CSS / JS優化插件(Autoptimize)–大型網站的更好選擇。
  • 通過CDN –最佳和最簡便的方法,IMO。

大多數人通過插件執行此操作,無論是緩存插件還是專門用於組合和最小化CSS / JS的“性能插件”(自動優化)之一。緩存插件最方便,並且適用於所有站點。但是,如果您的網站很大,頁面很多,和/或流量很大,那麼專用的CSS / JS優化插件將為您帶來更好的結果。它們具有更多的功能,更多的控制權以及最好的一切……它們在清除緩存時為您節省了大量服務器負載(因為在重建頁面緩存時,您的緩存插件不必重建CSS / JS)。

  • 如果您有一個大型站點(並使用緩存插件將其最小化),則緩存預構建上的額外負載會很糟糕。每次清除緩存時,它都會完全重建所有頁面和CSS / JS。在10至20頁的網站上速度很快,但是如果您有很多頁面和不同的頁面佈局,那就太糟糕了。
  • 如果您的流量較低(並且沒有緩存預構建),那麼額外的負載也可能很糟糕。由於未緩存的訪問將需要更長的時間來加載(這要歸功於縮小的額外任務)。

要縮小最簡單的方法是從你的CDN啟用它(所以它會處理他們的西弗斯),而不是減慢你的Web服務器。

  • 我只啟用Cloudflare的縮小功能。我沒有從任何插件中使用它。
  • 啟用它很容易。只需選中復選框即可。

76.延遲加載圖像(INT,LOW)

討厭lazyload作為一般策略。它可以使您的網站在進行頁面測試時顯得更快,但對於人類訪客而言,加載圖像的速度較慢。這是糟糕的UX!如果要使用它,則必須知道哪些內容應該延遲加載,哪些不應該。

  • 將圖片懶散地加載到首屏之下是很安全的,但是如果您的網站有許多快速滾動用戶(例如購物網站),則不會。
  • 建議不要將任何圖像懶惰地加載到網站頂部(標題,橫幅),因為這樣做會使訪問者看上去較慢。
  • 如果您沒有很多圖像或者圖像很小,則不需要延遲加載圖像。

在每週優化許多網站時,我可以向您保證,有99%的網站在沒有延遲負載的情況下看起來會更快。令人遺憾的是,大多數站點無法控制是否延遲加載哪些圖像。當前,它是緩存插件中的ON或OFF設置。沒有細粒度的訪問。在最近的瀏覽器中,可以通過屬性指定“延遲”(打開)或“緊急”(關閉)或“自動”(瀏覽器確定)來提供本地延遲加載。但是,如果您想讓自己輕鬆一些,我建議不要延遲加載。

  • 因此,延遲加載不會加快頁面加載速度嗎?– 不!它延遲了。您的網站只會獲得更高的頁面得分,因為它們不會像真正的訪問者一樣觸發您的圖片加載。
  • 但是,延遲加載不會減少帶寬使用嗎?–是的,但是除非您的圖片很大或您有很多圖片,否則這並不會帶來太大的好處。
  • 延遲加載不會通過加載較少的內容來提供幫助嗎?–它不會加載更少。它加載相同但延遲它們。如果您的用戶不滾動,則有幫助。如果您的用戶滾動,那會很痛。

77.有條件的CSS / JS資產加載程序(ADV,LOW-MED)

那裡有幾個插件(通常稱為“資產優化器”,“資產組織器”或“插件組織器”)可以決定哪些頁面允許加載哪個CSS / JS。有些插件按插件組織,在您選擇的頁面上禁用PLUGIN激活。其他人則通過CSS / JS進行組織,從而在您選擇的頁面上禁用CSS / JS加載。

如果您不小心,則需要大量工作來配置您的網站並導致您的網站出現問題。您還必須注意選擇哪個。有些寫得很好。其他人則很糟糕,因為他們的插件增加了自己的負載開銷,從而達不到目的!如果您堅持將它們弄亂,請自己研究並祝您好運。

  • 不要試圖從每個小頁面上刪除所有小東西。
  • 專注於較重的插件和CSS / JS。
  • 專注於較慢的頁面和更重要的頁面(例如“主頁”或“購物車/結帳”)。
  • 我喜歡WP GonzalezAsset CleanUp
  • 通常,我建議您不要使用任何這些插件,而應該首先選擇精益插件。我不使用這些,因為我喜歡手動優化。

78.部署CDN,也稱為“內容交付網絡”(INT,MED)

  • 您需要CDN嗎?如果您的流量是本地流量-不!
  • 嘗試Cloudflare以獲得最簡單的免費CDN。(非常適合初學者和許多站點。)
  • 是否想要比Cloudflare更好的性能?嘗試使用BunnyCDN(仍然很便宜)。
  • 大型文件需要CDN嗎?嘗試使用S3和Cloudfront!
  • 想要更具侵略性的“推送CDN”嗎?查一下!
  • 一些CDN覆蓋某些地理區域要比其他區域更好。

網絡延遲時間是交付靜態資產(圖像,css,js)時通常會變慢的地方。遙遠的訪客必須等待1-3秒才能收到請求的資產。但是,如果您使用CDN服務,則文件加載速度更快,因為它們來自更靠近訪問者的鏡像服務器。這實際上是CDN服務的全部,一家在全球擁有多個鏡像服務器的公司。它們在全球範圍內的價格,功能和性能上有何不同。

如果您不知道自己在做什麼,只需獲取Cloudflare並完成它即可。它是免費的,並且運行良好。如果您想冒險進入CDN的困境。只需知道CDN有2種:

  • 拉取CDN –一種主要方法,因為它對用戶而言沒有那麼麻煩。第一個訪問者加載CDN(遇到延遲的頁面加載),但是所有後續訪問者都獲得更快的速度。由於CDN緩存會在下一個訪問者到達之前過期,因此流量較低的網站可能會覺得不值得。
  • 推送CDN –更高的性能,因為或您的CDN管理插件將文件手動“推送”到CDN的鏡像服務器。使用推式CDN,沒有任何訪客會經歷“緩慢的CDN拉動”。缺點是,如果訪問者訪問缺少更新文件的CDN站點,則推送文件將更加麻煩,並且可能會損壞或看起來不正確。

傳統CDN與Cloudflare

  • 從技術上講,Cloudflare 不是 CDN,但具有類似CDN的功能。它實際上是DNS服務。您可以通過將域(從註冊商處)指向Cloudflare的名稱服務器來啟用它。然後從Cloudflare管理您的DNS功能,將其指向您的Web主機並啟用Cloudflare的性能/安全功能。
  • 傳統CDN的工作方式是為您提供一個鏡像您的資產的域區域(例如“ 123yourdomain.maxcdn.com”)。然後,您將站點配置為從該區域加載所有靜態資產。您還可以將CDN域掩蓋在您的CDN域後面(例如“ cdn.yourdomain.com”)。
  • 傳統CDN和Cloudflare都可以通過您站點上的CDN插件進行管理。您也可以從緩存插件中管理它們(最方便)。這樣,您的緩存插件可以同時清除服務器緩存和CDN緩存。

79. Cloudflare優化(INT,LOW-MED)

除了僅啟用CDN外,您還可以對Cloudflare進行很多優化。還有一些您不應該觸摸的設置(因為它們可能會破壞您的網站或損害性能)。請遵循我的指導:

是的,即使您不想要Cloudflare的性能/安全性功能,我也應該使用Cloudflare。您只能將它們用於DNS功能。可以從DNS選項卡輕鬆禁用其代理;只需將所有的橙色雲變成灰色即可。

80.在本地託管視頻還是在外部託管視頻(INT,HIGH)

  • 不要託管服務器中的視頻(尤其是如果需要快速加載它們),或者流量很高或視頻量很大。
  • CDN可以幫助提供本地加載的視頻。
  • 視頻主機(Youtube,Vimeo)可以使外部主機更便宜。
  • S3或Vimeo非常適合託管私人視頻。

如果您的視頻是在頁面加載時自動播放的,則您需要盡可能快的加載速度。我不建議從您的服務器加載它們,因為那樣會迅速增加帶寬限制並降低服務器的速度。

  • CDN –由於您的視頻仍位於服務器上,因此技術工作量較少。CDN將在全球範圍內快速投放視頻,但如果您的視頻較大和/或流量很大,則價格會很高。
  • 免費視頻託管(Youtube,Vimeo)–低成本,與視頻社區集成,但加載速度較慢的外部腳本。您可以使用iframe-lazyload解決外部腳本問題,但這對自動播放視頻沒有幫助。
  • 付費外部託管(S3 + Cloudfront,Vimeo業務)–需要花錢,但可以讓您更好地控制視頻的外觀,還可以將其設置為私有,只能從您的站點觀看。(適合僅用於會員的內容。)諸如Wistia之類的某些服務確實很昂貴,但具有轉換跟踪功能和其他垃圾,哈哈哈。

在其他地方託管視頻始終是個好主意。唯一的問題是確保它們加載速度足夠快,並且不會增加您的賬單。如果您希望對視頻有控制權和靈活性,則將它們存儲在S3中非常方便。

  • S3非常適合與其他軟件集成,例如電子商務或下載管理,但需要更多的技術工作,並且可能會花錢。
  • S3適用於視頻下載和流傳輸,但對於海外用戶而言可能會很慢。因此,您應該始終將S3與Cloudfront CDN集成!
  • S3和Cloudfront都是Amazon AWS,因此易於集成。

Vimeo付費計劃絕對很棒。我也喜歡他們。易於生成特色圖像(使用插件),易於放入內容中(僅嵌入)。可以控制它顯示在哪個域上。隨附精美的視頻報告,統計觀看次數和其他用戶跟踪。

我的最後一點是,如果該視頻位於您首頁的頂部,則可能值得測試不同的方法,以查看哪種方法加載速度最快。也許來自您的服務器,也許是S3 + Cloudfront,也許是Youtube / Vimeo …誰知道,對其進行測試!對於所有其他非必需視頻,它們的減速更多是因為視頻播放器而不是實際視頻本身。對於那些,我有更多的戰術。🙂

81.託管大文件(INT,MED)

就像視頻一樣,您根本不應該在服務器上託管大型文件。即使很少訪問或下載它們。僅一個人從您的服務器下載1gb文件就足以減慢您的常規網絡流量。另外,在進行站點備份(浪費空間)時,在服務器上不要有巨型文件是更明智的選擇。

  • 使用S3存儲文件。
  • 如果您需要更快的下載速度,以將它與Amazon的Cloudfront CDN功能結合使用,可以吸引世界各地的訪問者。
  • 對我來說,大文件大小超過50mb。如果只有200mb很少下載,可以。如果您有一個1gb的文件或許多200mb的文件……可能沒有。
  • 有些服務器比其他服務器強,對嗎?

82.管理大型媒體庫(INT,MED)

一些站點具有如此龐大的媒體庫(大量圖像),以至於不再適合網絡服務器。這是一個性能問題,因為Web服務器磁盤通常是檢索網站文件最快,最方便的位置。將圖像放在其他任何地方都可能會降低檢索速度。

在這樣的時刻,您有幾種選擇,各有利弊:

  • 升級服務器計劃–一種無需過多更改站點即可獲得更多空間和更好性能的簡便方法。但是成本更高,但空間可能仍然不夠。
  • 使用出色的WP Offload Media插件卸載到S3 。它還允許Cloudfront CDN集成!我喜歡這種方法,但有些人可能不喜歡這種方法。
  • 添加塊存儲-理論上足夠快,可以用於應用程序使用,並且價格合理(每10gb 1美元/月),但我感覺這很麻煩,而且不夠靈活。確保您可以將其安裝到某些目錄,甚至整個wp-uploads目錄。
  • ORRR如果您要快速縮小庫,則只能刪除未使用的介質大小。我見過網站從100k到10k的圖像沒有進行設計更改!

是的,有一些替代插件可以執行WP Offload Media的功能,但是沒有一個插件與其開發團隊(Delicious Brains)具有相同的尊重。

8.外部資產優化

即使不是不可能,優化外部資產也非常困難。這些都是從Web服務器以外的其他位置加載的所有文件(因此稱為“外部資產”)。這可以是webfonts(Google字體)或字體圖標(FontAwesome),圖像,用於Google Analytics(分析)的JS腳本,用於轉化跟踪的JS腳本(Facebook Pixel,Hotjar),用於會員(亞馬遜)的JS腳本(亞馬遜),JS圖書館,用於YouTube的JS腳本(或Vimeo),嵌入框(如Facebook框或Twitter),用於社交媒體共享計數的JS等等。

最難的部分是它們的服務器並不總是最快的(不,不,免費服務不會將所有服務器資源都奉獻給您),並且文件也不總是最輕的。您可能已經從頁面測試中看到抱怨,稱它們沒有被足夠長的瀏覽器緩存或太大,等等。無論如何,您都無法控制服務器上未加載的文件!

所以,我們能做些什麼?

  • 本地加載它們。
  • 儘早加載它們(也稱為“預取”)。
  • 延遲加載它們(也稱為“延遲”)。

84.審核所有外部請求(INT,MED)

您甚至不知道其他域從外部加載了什麼?這很有趣,但是我看到許多客戶不知道從他們的站點發出的所有外部呼叫。要檢查:打開開發人員工具,單擊“源”選項卡並加載所有站點頁面。

常見(意外)外部請求:

  • 絕對網址–到您自己的頁面。從技術上講不是外部請求,而是嘗試使用相對URL。如果您打算採用過時的SEO策略,請停止該操作。
  • 庫存主題圖像–從演示站點鏈接的默認圖像(即使它們存在於您的站點中)。
  • 舊的轉換腳本(Hotjar,Pixel)–您已停止使用但忘了從主題文件中刪除。
  • 不必要的廢話–任何圖像,CSS,JS腳本或庫,都可以加載甚至不需要的東西。

85.在本地加載簡單資產(INT,MED)

  • 任何足以讓您本地加載的簡單操作都可以。
  • 圖片,CSS,JS…將它們複製到您的網站。

86.在本地加載webfonts(BEG-ADV,HIGH)

正如我已經解釋的那樣,您可以在本地加載webfonts以降低其速度影響。

  • 最好是您可以手動進行操作(也可以分出不必要的內容)。
  • 您也可以使用方便的插件,例如OMGF | 在本地託管Google字體
  • 不要使用FontAwesome!(使用其他方式顯示圖標)
  • 順便說一句,Swift Performance緩存插件有一個很酷的Critical Font選項,可以優化Font Awesome。

87.在本地加載Google Analytics(分析)(BEG,MED)

那裡有大量的駭客。他們中的一些人做了過多的工作,例如將JS文件縮減到最低限度或從公共CDN(jsDelivr)加載GA腳本。其他方法是乏味的黑客,他們喜歡將GA腳本複製到您的服務器並運行cron命令以保持其更新。我認為這對於完全沒有任何轉化跟踪的小型網站來說是很好的。但是否則……保持簡單並使用CAOS插件(我最喜歡的插件)。

88.延遲加載視頻(INT,HIGH)

  • 您可以在緩存插件中使用“延遲加載iframe”功能。
  • 不要在首頁頂部延遲加載任何視頻!

如果您要通過Youtube,Vimeo或其他iframe嵌入視頻,那麼有些插件不僅可以延遲加載它,還具有其他功能:

  • 僅在用戶交互時加載–鼠標移動,滾動或移動觸摸。好點子!
  • 延遲加載敏感度–屏幕關閉後,加載iframe。好點子!
  • 偽圖像–使用偽造的播放按鈕加載視頻播放器的圖像,並且僅在單擊後才加載真實視頻。非常聰明!(通常只與Youtube兼容,有些也可以做Vimeo。)
  • (其中許多可以在Swift Performance中找到。)

即使您的緩存插件中沒有所有這些高級功能,僅能夠延遲加載iframe也是一個巨大的區別。您可以手動修改內容的另一種方法是顯示播放器的虛假圖像,然後打開其中包含視頻的燈箱模式。無論如何,我確信更多本地瀏覽器的延遲加載即將到來。

  • 關於執行pseduo視頻圖像效果的最佳插件,我建議您自己進行測試。嘗試在WP repo中搜索“ video lazy load ”。
  • 如果延遲加載有任何問題,我想知道它是否會影響您的SEO,因為抓取工具看不到視頻。誰知道,對嗎?

89. Google Maps優化(BEG,高)

請勿成為直接在您的網站上加載Google Maps框的那些新手之一!它使您的網站速度大大降低!

  • 改用地圖圖像,然後從該圖像或其中的一些文本鏈接到Google地圖。
  • 或使用緩存插件中的“延遲加載iframe”選項來延遲Google Map加載。

90.社交媒體整合;Facebook,Twitter,Instagram(BEG,高)

  • 您是否曾經想過在頁面上顯示“像Facebook”框?只是不要!像地獄一樣落後。將花費您穩定的1秒鐘。如果需要,可以將其放在特定頁面上,而不要放在主頁或全局窗口小部件上!
  • Twitter框也是如此。
  • Instagram流怎麼樣?不管出於什麼原因,這些對我來說都不那麼落後。我喜歡QuadLayers 的Social Feed Gallery
  • 那Facebook Pixel呢?抱歉,我還沒有任何方法。

除非這些框是您的主頁內容…。請相信我,您不需要它。它們造成的巨大速度下降是不值得的,尤其是在移動設備上。

  • 仍然堅持在您的網站上添加社交供稿?也許這個Social Feed Cloudflare應用程序可以提供幫助。

91.評論和引力(INT,LOW-MED)

評論是大多數人沒有的問題,直到他們的博客變得流行並且有成百上千的評論為止。實際上,即使一篇文章中有100條評論也足以使您的頁面瀏覽速度下降,並開始使您的網站訪問變得不那麼有趣。我們有一些需要關注的問題以及解決這些問題的不同方法。

  • 使用哪個評論系統?以及他們如何處理第三方資產。

內置的WordPress註釋系統快速,免費,但可一次全部加載。如果您不希望在一頁上全部加載500條評論(及其Gravatar),這可能會很煩人。這不僅是速度問題,還是設計問題。當然,有解決方法。

  • 您可以限制加載的評論數。
  • 有些人對此發表評論
  • 在我最繁忙的網站上,我在移動設備上放置了[LOAD COMMENTS]按鈕,因此用戶不會被手機上巨大的滾動頁面所嚇倒。
  • 您還可以使用替代頭像系統,或緩存Gravatar(通過緩存插件或特定的Gravatar緩存插件)。
  • 還是根本不使用任何評論頭像!
  • 我個人更喜歡本機WordPress評論系統

Disqus是一個第三方註釋系統,該系統不再免費,但具有許多參與功能,並且外觀漂亮(樣式簡潔,僅加載最近的註釋)。除了價格之外,最大的缺點是,即使沒有任何評論,它也會在所有頁面上加載第三方資源。

Facebook評論也是一個不錯的選擇,而且免費。這是獲得大量參與的絕佳選擇,而且不會一次顯示所有評論(例如Disqus)。它還會在每個評論中增加您的Facebook分享數。我只是不喜歡它,因為外部負載。

請不要發表評論!如果您對Disqus感興趣,則可以考慮使用Commento,但要小心(您不能從WordPress本地遷移到那裡,但是……您必須首先通過Disqus)。

92.延遲聊天框(BEG,MED)

由於您的(銷售/支持)聊天框,許多人的頁面加載速度很慢。這些與您的頁面設計無關,也不應該妨礙您。幸運的是,它們很容易處理。

  • 手動將代碼放在頁腳中。
  • 推遲JS –大多數緩存插件都具有此功能。
  • 延遲加載JS – Swift緩存具有此功能。這是夢幻般的。

93.加速電子郵件表單(INT,MED)

如果您的網站上有新聞簡報表單可以與電子郵件營銷服務(Mailchimp,MailerLite等)集成,則您會注意到其中許多加載了煩人的第三方腳本。這些JS中的一些用於表單安全(防止垃圾郵件註冊),其他用於其他功能(例如轉換)。

這是我處理它們的策略:

  • 不要在全球範圍內加載電子郵件表單-不要將其放在每個頁面上!我也從UX的角度討厭它們(討厭用戶)。您可以嘗試“註冊”按鈕或將其重定向到新聞稿頁面的鏈接。但是,是的,這可能會影響您的轉化並使其脫離頁面。
  • 使用不需要外部JS的表單-一些電子郵件服務可以做到這一點。
  • 在本地加載表格-但如果有一天停止工作,則存在風險!
  • 始終手動嵌入-而不是通過插件自動執行。

最終,您選擇的服務將決定您的選擇。有些具有無JS選項。其他人無論如何都需要JS。

94. DNS預取(INT,低)

加快外部資產呼叫的一種好策略是加快其DNS等待時間。降低外部資產速度的通常是網絡延遲時間,以便將請求發送到第三方服務器。文件本身可能很小,但是網絡時間延遲了它。通過將DNS預取放入外部域,您的服務器會在站點加載期間更早地發出HTTP請求,從而在需要時更快地加載資產。

常見的預取網址:

  • Google字體
  • Facebook像素
  • 其他社交媒體網絡
  • 聊天腳本?
  • 轉換腳本?

不知道要預取哪些網址?

  • 運行Pingdom速度測試 -並查看列出的域。
  • 或獲取完整列表–打開瀏覽器的“開發人員工具”>“源”(標籤)。
  • 您應該瀏覽站點的多個頁面,以確保獲得所有常見頁面。
  • 僅預取根域/子域,而不預取整個URL。
  • 也不必預加載您看到的所有域。
  • 請注意,每次頁面加載時與廣告相關的域都會發生變化。(您不應該預取這些。)

95. DNS預連接(INT,低)

“預連接”是鮮為人知的“預取”兄弟。啊,這是一個解釋:

  • preload –為當前頁面預加載資產。
  • prefetch –僅預加載下一頁的DNS調用。
  • PRECONNECT -預加載的DNS通話,TLS協商和TCP握手……在接下來的頁面。

不應使用預加載,因為它會佔用很多資源,並且對WordPress沒有意義,除非您確切知道為什麼首先需要加載某些資產(並且不能以其他方式確定優先級)。預取又名“ DNS預取”,是一種安全的低資源預載呼叫方式,並且受到瀏覽器的大力支持。它可以方便地建立DNS連接,以便在需要時可以更快地下載來自外部域的資產。

Preconnect就像prefetch一樣,但是做得更多(它建立TLS / TCP連接以及DNS),但是由於幾個原因並不流行。一是因為不被許多瀏覽器支持。另一個是因為大多數瀏覽器中存在同時連接限制。最終,必須決定什麼是最重要的預連接,其餘的可以預取。

96. Cloudflare應用程序(INT,MED)

它是一個相對較新的遊戲,我玩的很少。但是它看起來非常有前途!在新的應用程序Apps允許開發者創建集成在邊緣級(又名“DNS”),而不是在軟件級(又名WordPress的,PHP)的應用和服務。這帶來了廣泛的可能性,因為:

  1. 應用程序/腳本是從Cloudflare服務器加載的!(使它們更快。)
  2. 對於開發人員而言,工作量較少。他們的應用程序可以應用於任何網站(不限於任何CMS或WordPress)。

自己檢查一下!https://www.cloudflare.com/apps/

  • 查看您正在使用的應用程序。
  • Tawk.to,Facebook(聊天/贊/評論),社交供稿,聊天框,表單,支持,媒體等。
  • 有這麼多!!!

真不可思議的東西,因為它們不從您的服務器加載任何東西!沒有要安裝或配置的插件。只需從您的Cloudflare帳戶啟用即可。驚人!(這不僅可以徹底改變遊戲規則,不僅在於將來的應用程序和服務如何與網站集成,還可以使緩慢的網站成為過去。)

9.安全優化

如果不是直接中斷,黑客和網絡攻擊可能會導致大規模的服務器性能問題。許多人不知道服務器受到攻擊的頻率,因為他們從未看到日誌。我可以向您保證,每個服務器每月都會受到數千次攻擊(有時在一小時之內)。您的站點甚至可能立即受到攻擊,但您只是不知道。

抵禦這些攻擊需要微妙的平衡。您不想要讓黑客自由轟炸您的端口和資源的服務器。但是,您也不希望服務器過於安全並且過度審核所有流量,這會使您的用戶變慢或變得更糟(阻止合法用戶)。在以下建議中,遵循您有權使用的建議。

僅託管您和/或少量租戶的服務器:

  • 由於邀請黑客入侵的網站較少,因此更易於保護,並且您可以安全地禁用許多端口而不會影響您的網站。
  • 如果您自己管理並且缺乏經驗,則很難獲得保護。

託管許多租戶的服務器:

  • 如果管理員已經在監視服務器,則更易於保護。許多常見的攻擊已經防範。
  • 如果需要針對不同的客戶端用例打開許多服務,則很難保護。因此,更多站點和開放服務可以邀請黑客。

97.關閉不必要的服務器服務(ADV,高)

您可以將未使用的服務視為未使用的電話或電子郵件帳戶。他們坐在附近消耗資源(內存),並通過不必要的連接(垃圾郵件,黑客)佔用您的時間。無論您不使用什麼,請從您的服務器上禁用它!

  • DNS –如果使用外部DNS服務器,則禁用。(Cloudflare,DNSME等)
  • 電子郵件–如果使用第三方電子郵件則禁用。(G-Suite,MXroute等)
  • FTP / SFTP –如果不使用,請禁用。
  • 其他代理-例如Varnish。

默認情況下,服務器堆棧或控制面板會啟用其中的許多服務。您可以閱讀他們的文檔以獲取列表。對於需要運行的服務,您可以使用防火牆將其暴露於不良流量。

98.服務器防火牆配置(ADV,高)

大多數默認防火牆配置設置得太寬鬆,以免引起問題。您應該跳進去並儘可能地封鎖。下面是一些示例邏輯:

  • 特定人員使用的端口(SSH,FTP)–僅您或其他幾個人使用。進行IP白名單,並阻止其餘部分。
  • 某些國家/地區使用的端口(POP3,IMAP,FTP)–如果某些服務僅在一個國家/地區內使用,則可以阻止所有其他國家/地區。但是要小心,因為旅行的人將無法進入!
  • 僅受特定國家/地區攻擊的端口-如果您有許多來自特定國家或地區的攻擊,則可以按國家或整個IP範圍禁止。

那裡有許多服務器防火牆。每種都有各自的優缺點,並推薦用於不同的用例。您可以在線閱讀他人如何使用和配置它們。最簡單的方法是從堆棧附帶的默認堆棧開始。

99.服務器暴力保護(ADV,高)

暴力保護就像一個智能防火牆。它使服務和端口保持開放狀態,但會自動禁止明顯的違規者。

  • 它會自動禁止任何人輸入錯誤的身份驗證或使用列入黑名單的通用用戶名等。

它們易於設置且功能強大。請注意不要阻止合法用戶/流量。您可以查看服務器附帶了哪些暴力破解或DDOS保護並啟用了它。如果您在此服務器上有許多用戶,則可能不要設置得太嚴格。

100. wp-login.php上的暴力保護(BEG,高)

殭屍程序經常轟炸WordPress管理員登錄頁面,這些殭屍程序會嘗試隨機輸入用戶名和密碼。儘管他們可能無法進入,但他們不斷的嘗試消耗了很多資源。有幾種預防方法,每種方法各有利弊。

  • 服務器級別的暴力保護–簡單高效,但可以使用Cloudflare在站點繁忙的服務器上鎖定合法用戶。問題是暴力封鎖被IP阻止,並且通過Cloudflare進入的訪問者都共享相同的(代理)IP。當然,您可以配置為通過Cloudflare標頭傳遞真實的客戶端IP,但這會減慢頁面加載速度!
  • 應用程序級暴力保護–許多WordPress安全插件可以做到這一點。他們通過禁止具有不良憑據的用戶來保護登錄頁面。
  • 一些插件會隱藏登錄頁面-將其移動到其他URL。只需確保標準登錄URL被阻止或緩存,以防止訪問它使用資源。
  • 其他插件則通過放置驗證碼並禁止某些機器人,搜尋器和設備來保護登錄表單。這可以很好地工作,但可能會惹惱或錯誤標記合法用戶。

我知道只有在wp-login.php上具有本機暴力保護的服務器才是LiteSpeed。所有其他服務器(Apache和NGINX)都必須使用安全插件或http auth啟用它。

101. HTTP身份驗證(BEG,MED)

您是否轟炸了特定頁面,並且沒有方便的方法來阻止對其的訪問?HTTP AUTH是一種鎖定所有用戶的快捷方法。唯一的問題是,這對合法用戶來說有點麻煩。大多數指南都向您展示瞭如何保護wp-admin目錄,但是您也可以保護其他經常訪問的目錄。

102.禁用XML-RPC協議(BEG,MED)

XML-RPC協議允許外部應用程序(如移動應用程序)登錄WordPress並編輯內容或查看WooCommerce銷售。不幸的是,它經常被黑客和殭屍程序利用,強行進入您的網站。

  • 如果不使用它,則禁用XML-RPC可以防止由成千上萬的XML-RPC hack請求引起的服務器速度下降。
  • 如果需要保留它,則可以將您的IP列入白名單(如果使用的話,也可以包含在Jetpack中)。

103.安全插件配置(BEG-INT,MED)

如果您無權訪問服務器,則可以使用安全性插件。是的,安全性在服務器級別(更接近原始計算能力)比在應用程序級別(PHP處理更慢)更有效地運行…但是有時候,當您有許多客戶端/站點並且每個站點都需要時,很難設置全局安全性規則有些不同。

儘管如此,像WordFence這樣的軟件級安全插件仍然是阻止服務器不會進行的攻擊和/或防止被黑客入侵的網站造成更大破壞的有用選項。

  • 我最喜歡的WordPress安全插件是WordFence。
  • IMO安全插件的最重要功能是惡意軟件掃描。手動掃描或安排在交通流量小時內進行。此功能不一定能提高網站速度,它可以檢測系統漏洞並阻止其占用資源(託管垃圾郵件站點或攻擊其他服務器)。
  • 如果您已經具有服務器防火牆,則可能不需要安全插件上的防火牆功能。在PHP級別激活的防火牆會降低所有傳入請求的速度。

安全插件的性能問題歸因於A)過度積極地過濾所有傳入流量,以及B)過於頻繁地掃描。兩者都消耗了很多資源,尤其是在頁面和訪問者很多的大型網站上。我建議不要使用軟件防火牆,並且還應將惡意軟件掃描設置為較慢的速度。

104. DNS邊緣級安全性配置(BEG,MED)

還記得我怎麼說安全性在服務器級別比在應用程序級別更有效地完成嗎?在邊緣級別(DNS級別)做得比在服務器級別更有效,因為它正在使用其他人的服務器。在服務器上的邊緣VS處理安全性之間存在一些性能影響。您可以決定哪種方法最適合您的用例。

  • 由於您擁有更多控制權,因此在服務器上處理安全性會更加方便。您可以針對您的特定用途進行優化。唯一的缺點是它會佔用您的服務器資源,並且還需要管理技能。
  • 通過其他服務器(例如DNS代理,Cloudflare)或安全服務(Sucuri)處理安全性可以節省服務器寶貴的資源,但由於訪問者在到達您的Web服務器之前會通過一個額外的代理,因此可能會增加一些負載延遲問題。

服務器和服務器管理員的技能越弱,安全服務阻止DDOS請求的可能性就越大。再說一次,對於較小的站點,您可能沒有太多的安全問題。無論您做什麼,都不要試圖在兩個級別(DNS和服務器)上都設置過於激進的DDOS安全性。這可能會導致誤報,導致合法訪問者被阻止,因為所有訪問者(好的和壞的)通過代理訪問時都共享相同的IP。

  • 大多數人都不必擔心DDOS攻擊,好嗎?
  • 您的服務器可以輕鬆地處理大多數較低級別的DDOS攻擊。
  • 最高級別的DDOS攻擊是使服務器不堪重負的攻擊(即使具有良好的安全性),但它們卻要花錢,並需要黑客集中精力。除非有人專門針對您,否則您不必擔心他們。
  • 應對高級DDOS攻擊的最簡單方法是立即與Sucuri這樣的專門安全公司註冊(一旦發生)。
  • 我不建議您購買您通常不需要的高級安全服務。

105. HTTPS和HTTPS重定向(BEG,LOW)

  • 您絕對應該使用HTTPS。(這是獲得HTTP / 2協議好處的唯一方法。)
  • 在您的服務器上放置301 HTTPS重定向,以便將訪問者快速重定向到正確的HTTPS協議和站點的正確域版本(帶或不帶“ www”)。沒有這些服務器重定向,WordPress仍然可以做到,但需要更長的時間。

另外,不要忘記確保所有內部URL都使用HTTPS(請按照步驟3進行操作)。不要依靠SSL插件(不必要)或WordPress(慢)來重定向您。從服務器設置重定向!

  • 溫馨提示:如果使用Cloudflare,請設置頁面規則以從此處進行HTTPS 301重定向。(比從本地服務器還要快!)

10.糟糕的優化(策略)

Internet上傳遞了所有不必要,不合邏輯或過時的優化建議。如果您感到好奇,請在此處列出(連同我的想法)。有些網站由於其用戶而變慢!

這些策略大多數都是不好的,因為:

  • 他們沒有解決根本問題。
  • 他們不會增加速度。有些使情況變得更糟。
  • 它們已過時/與當今的技術無關。
  • 可能會破壞您的網站設計或功能。
  • 增加服務器負載。
  • 幾乎沒有任何好處。
  • 僅在有限的情況下工作。
  • 僅給您更好的頁面分數,但使用戶體驗更糟。
  • 他們的好處不超過缺點。

錯誤的虛擬主機優化

106.水平擴展(添加更多服務器)。

  • 擴展絕不會比本地運行所有服務(在一台計算機上)更快。將服務器鏈接在一起意味著您的數據還有更多需要跳過的代理。
  • 水平縮放旨在防止高流量降低您的基本速度。它無法加快低流量的環境。
  • 唯一可以提高基準性能的擴展垂直擴展,即“升級服務器資源”,例如CPU,內存,磁盤等。

107.購買昂貴的服務器。

  • 這是解決緩慢設置的臨時方法。
  • 您花在託管上的額外資金可以輕鬆支付更好的編碼。
  • 如果您的網站流量很少,但需要一個每月$ 300的服務器才能容忍,只需修復代碼即可!
  • 僅對於動態加載(管理頁面,簽出),昂貴的服務器明顯要快得多。如果有效地緩存了您的站點,則沒有任何區別。

108.優化速度測試和頁面分數。

109.為低租戶服務器部署籠子策略。

  • 許多人閱讀了服務器的隨機指南和策略(例如安裝CloudLinux / CageFS),並認為它確實對服務器有所幫助。
  • 這些指南大多數是為繁忙的專用租戶服務器編寫的。與只有幾個站點的負擔得起的VPS的新時代無關。
  • 籠子策略會限制您的資源,因此會降低您網站的速度。

錯誤的主題優化

110.使用過少的主題。

  • 如果您的主題太空了,您必須加載have腫的pagebuilder和額外的插件才能獲得所需的外觀,那麼您可能首先就擊敗了輕量級主題的目的!
  • 也許考慮為GenesisGeneratePress設計一個漂亮的兒童主題或預建的網站設計。
  • 也許考慮工匠主題

111.切換到靜態CMS(而不是WordPress)。

  • 啞巴動作。(WordPress vs靜態CMS
  • 靜態CMS速度更快,因為它們更簡單。
  • 他們無法完成WordPress可以完成的所有精美設計和功能。
  • 切換到靜態CMS實際上需要更多的開發技能!

錯誤的插件優化:

112.安裝多個性能插件。

  • 您唯一需要的就是緩存插件。
  • 不要安裝多個性能插件!(瀏覽器緩存,禁用wp嵌入式,CSS合併,延遲加載等)
  • 也不要為其他插件安裝“ booster”插件。他們可能正在使用自動加載(內存)來加快速度……但是,這只會加快特定插件的速度,卻以整個網站的加載為代價。

113.使用(條件加載)插件組織器。

  • 如果您必須告訴插件不要在不使用它們的頁面上加載,那麼一開始它可能不是一個好插件。
  • 最好只是刪除或替換這些插件。

錯誤的圖片優化:

114.延遲加載圖像。

  • 是的,我知道我的信念與許多人的想法背道而馳。
  • 我不在乎,我討厭懶惰的負荷
  • 當然,它可以獲得更好的頁面分數,但會減慢用戶體驗。
  • 關閉網站總是看起來更好!

115.過度壓縮圖像。

  • 不要過度做,以至於它們看起來很難看。
  • 也許讓它們變小?
  • 或者,如果降低它們的質量,則將其變暗並在其頂部放上文本,以使其不太明顯。

116.嵌入式SVG過多。

  • 如果您擁有1或2,就可以了。
  • 除此之外,您只是在擴大HTML。
  • SVG幾乎始終不是關鍵項目。
  • 而且通常會在每個頁面上加載它們。讓它們與HTML分開,以便可以將它們緩存在瀏覽器中。
  • 如果您真的想減輕重量,請創建自定義圖標字體!

117.將圖像壓縮備份保留在服務器上。

  • 如果使用圖像壓縮插件,請從服務器上刪除其備份,以使其輕巧。
  • 如果要保留原件,請將其下載到計算機上。

錯誤的緩存優化。

118.在緩存插件上啟用所有功能。

  • 不要白痴用緩存插件破壞他們的網站。
  • 如果沒有,請不要啟用單獨的移動緩存或AMP!
  • 除非必須,否則不要緩存私人或已登錄用戶。
  • 不要緩存WooCommerce購物車會話(幾乎不需要)。
  • 如果您不了解某個功能,請查閱文檔或尋求幫助。
  • 僅使用您需要的東西。少即是多!

119.在不需要時啟用對象緩存。

  • 僅用於動態頁面。
  • 如果所有頁面都是靜態的,則使用對象緩存會使其變慢。
  • 不必要的對象緩存還會佔用內存並提供舊數據。

120.瀏覽器緩存時間過長。

  • 瀏覽器緩存通常用於很少變化的靜態資產(圖像,CSS,JS)。
  • 安全設置可以是1到7天,因此如果在同一時間段內再次訪問相同的瀏覽器,則不會再次下載它們。
  • 積極的設置可能長達30天,甚至一年。
  • 問題是,如果您在該時間段內更改了圖像或CSS,則某些用戶會看到舊版本。

121.預加載頁面。

  • 單擊頁面之前預加載頁面的巧妙策略!(然後,它們在單擊時立即顯示。)
  • 有些會預加載所有可用的鏈接。其他人僅猜測或預加載鼠標懸停的內容。
  • 關於預加載有很多技術含義……例如額外的服務器請求(針對甚至沒有單擊的項目),搞亂轉換/聯盟跟踪,意外的自我DDOS,甚至可能由於意外加載CSS / JS而中斷頁面設計或功能。
  • 我最大的困擾是,他們試圖通過在速度不夠快的服務器上使用額外的服務器負載來加速站點。當然,如果流量不大,它可以在速度較慢的服務器或膨脹的站點上運行。無論如何,使用時要小心!
  • Quicklink,Instant.page,Flying Pages –為什麼我創建了Flying Pages(WP Speed Matters)–比較Gijo Varghese的預加載插件的好指南。

122.靜態WordPress插件/服務。

  • 我認為這些是使用緩存的更複雜(手動)方式。
  • 但是對於知道自己在做什麼的高級用戶可能很有用。
  • 對於其他所有人,使用它們可能會帶來更多麻煩。
  • 要嘗試嗎?自己看看…… WP2StaticShifter

不良的資產負載優化。

123.結合CSS / JS資產。

  • 討厭結合CSS / JS
  • 可能會破壞站點設計,延遲初始響應,增加服務器負載,甚至使站點變慢 。好處甚至不明顯(除了愚蠢的頁面測試)。
  • 在big腫的大型站點上,這樣做的好處更好,但缺點也是如此。只需在打開與關閉之間進行測試即可。(並用眼睛測試,而不要通過頁面測試。)

124.生成關鍵CSS。

  • 除非您的站點實際需要它,並且您正在認真生成關鍵的CSS,否則不會有太多好處。
  • 通常會減慢您的站點負載,破壞樣式或創建FOIT / FOUT問題。
  • 生成關鍵CSS的唯一有效方法是手動進行。但是大多數人沒有這種技能,只能通過自動插件(通常包括不必要的樣式並錯過必要的樣式)來實現。
  • 對於已經很精簡的站點完全不需要。
  • 對關鍵CSS充滿怨言

125.內聯CSS。

  • 主要是愚蠢的想法。
  • 僅用於特定頁面的CSS,例如不需要額外的HTTP請求的簡單1-liner。
  • 不適用於將整個CSS輸出到HTML。這會為可能已全局緩存的每個頁面增加額外的負載。
  • 實際上,這將減慢後續訪問的速度,因為必須重新解析CSS,並且可能甚至不對其進行緩存。
  • 此策略僅適用於樣式幾乎為零的超輕頁面。加快腫的頁面非常糟糕。

126.刪除CSS / JS助手的查詢字符串。

  • 也許某些頁面測試告訴您執行此操作。
  • 但是,當您這樣做時會發生什麼呢?CSS更改將永久顯示在已經看到您網站的瀏覽器上(因為它們已緩存了舊版本)。
  • 幹得好,天才。現在,您將遇到緩存清除問題。
  • 由於大多數瀏覽器和服務(例如CDN)可以有效地緩存帶有查詢字符串的資產,因此該策略已經過時了。
  • 如果您仍然堅持這樣做,至少要等到網站設計完全完成為止。否則,設計更改將需要更長的時間才能顯示出來。

127.延遲CSS或JS。

  • 另一個潛在的愚蠢想法。(通常由用戶嘗試避免“渲染阻止”警告。)
  • 它可能會延遲頁面頂部使用的關鍵CSS / JS(例如滑塊或其他內容效果)。
  • 如果您推遲和延遲關鍵項目的CSS / JS加載,則您的頁面可能會獲得更高的頁面得分,但對於訪問者而言卻顯得較慢
  • 僅供參考:出於某種原因,某些資產需要渲染。這是因為它們控制內容的外觀。例如……您是否希望在輪播之前加載輪播圖片?還是要在字體之前加載文本?否!…因為它看起來醜陋或全部亂成一團!

128.全部使用Cloudflare進行緩存。

129.壞的Cloudflare設置。

  • 火箭裝載機–請勿啟用此功能!它打破了東西。
  • 完全(嚴格)上的SSL / TLS =請勿使用此選項,因為它會使您的SSL握手花費更長的時間。只需使用默認選項即可!很好,並且掛鎖看起來一切正常。
  • HSTS –不用管了!如果您遇到SSL問題,它將阻止瀏覽器顯示您的網站。
  • 使用頁面規則緩存整個頁面-上面已經提到。
  • 只需遵循我的Cloudflare設置指南,好嗎?

不良的外部資產優化。

130.在擁有本地業務時使用CDN。

  • 完全沒有必要!根本無濟於事!
  • PS:Cloudflare 可以不使用CDN功能而使用。您可以將其僅用於DNS。

131.使用Google AMP。

  • 我認為AMP的主​​要好處是可以通過Google的搜索引擎結果提供更好的聯合組織和SEO。
  • 但是我認為這僅對博客和新聞類型的站點有用。
  • AMP 不是提高速度的好方法。它增加了您網站的複雜性,並且經常破壞功能和設計。最糟糕的是,它並不能完全提高您的速度,並使您的站點(和服務器)更加難以緩存內容。

安全優化不佳

132.部署了過多的安全性。

  • 激進的防火牆過濾–減慢網站訪問速度。
  • 安全代理(Sucuri)–減慢訪問速度。
  • 蠻力安全性太嚴格–阻止合法用戶。

133.將服務器安全性與Cloudflare安全性相結合。

  • 由於來自Cloudflare的所有用戶共享相同的IP,因此可以阻止合法用戶。如果黑客觸發了IP禁令,那麼許多合法用戶將被禁止!
  • 將Cloudflare代理與服務器安全性一起使用時要小心。
  • 除非您在自己的服務器上,否則通常不成問題。
  • 需要說明的是:問題通常是針對登錄用戶的,普通公眾訪問者通常不會有任何問題。

134. HTTP嚴格傳輸安全(又稱為“ HSTS”)。

  • 愚蠢的想法!收益很小,但是上帝禁止您出現任何隨機的SSL問題(遷移後SSL不會更新或丟失),您的網站將無法加載。
  • 這是巨大的風險,最終總是會導致噩夢。
  • 你從來沒有打開這個!我對所有這樣做的客戶大喊大叫。

加快WordPress網站的秘訣是什麼?

對我而言,過去一直在尋找無窮的策略和優化的地方。而且有效。我能夠從4秒降至1秒。然後1秒到500ms。然後從500毫秒變為380毫秒,然後每10到20毫秒刻苦地削掉。此時的主要增益僅為50ms。

…但這不是現實世界的工作方式。

  • 沒人會那樣的時間。
  • 不是沒有人願意花那麼多錢。

現實世界中的速度優化需要直覺。您必須能夠查看站點,聞到氣味並立即知道它的需求。因此,您不會在沒有任何區別的策略上浪費大量時間。

大多數速度優化策略和加速服務存在的問題:

  • 他們使用的通用公式不適用於每個站點。
  • 他們以簡單的方式做事,而不是最佳的方式。
  • 他們沒有考慮用戶的工作流程和內容間隔。
  • 他們不考慮虛擬主機的類型(這是局限性)。
  • 他們不考慮用戶體驗。
  • 他們幾乎從不進行任何手動優化。

他們只爭取A +頁面得分和降低總加載時間……這遠不及TTFB和內容繪製時間那麼重要。

無論如何,我希望本指南對您有所幫助。或者至少可以幫助您找到可以像您一樣照顧您的網站的人。速度優化是一門精湛的技藝,它結合了Web開發人員,服務器管理員,UI / UX設計人員和網站所有者的技能,後者以前實際上是擁有高流量網站的。