GNU/Linux >> Linux の 問題 >  >> Panels >> Plesk

WordPressを高速化する方法

このガイドには、ほぼすべての WordPress サイトの読み込み時間を最大 1 ～ 2 秒にする方法を示す 9 つのヒントが含まれています。 定期的に更新され、2020 年の第 1 四半期に拡張され、いくつかのボーナス ヒントが追加されました。

ホスティング パートナーとリソース (テーマ、プラグインなど) を選択し、高速化のためにゼロから構築され、大量のトラフィックで適切に動作することが期待されている場合 (多くはそうではありません)、到達できます。ページあたりの読み込み時間はわずか 1 秒です。キャッシュされたサイトは、500 人を超える同時訪問者のスパイクを簡単に処理できます 、および 20k 以上 毎日 ページビューは問題ありません。このガイドは、GTMetrix や Google Page Speed などの合成ベンチマークで最高点を獲得するのにも役立ちます。

これから説明する内容の概要は次のとおりです。

この記事の内容

楽な道を…

WordPress Web サイトを Websavers でホストし、WP Super Cache や WP Rocket などのキャッシュ プラグイン + Imagify や ShortPixel などの画像最適化プラグインを有効にするだけで、このガイドのすべてのステップが自動的に実行または自動化されます。いいですね?

見てみな

読み進めて始めましょう!

このガイドはしません :

  • ホスティング プロバイダの問題やパフォーマンスの低下を解決するのに役立ちます。高品質の WordPress ホストを使用すると、大きな違いが生まれます。
  • 処理速度を大幅に低下させたり、合成ベンチマーク スコアを低下させたりする可能性のあるプラグインやテーマに関する問題を解決するのに役立ちます。たとえば、多くのプラグインやテーマは、制御できない外部リソースの呼び出しを行います。これにより、本質的にサイトの速度 (およびベンチマーク スコア) が低下します。同様に、多くのプラグインやテーマは、不必要に大量のデータ処理を必要とする貧弱なコーディング手法を使用しています.したがって、キャッシング プラグインとうまく連携させるには、Web サイトの一部 (テーマ、プラグインなど) を無効にする必要がある場合があります。パフォーマンスを最適化するテーマとプラグインを使用している場合、キャッシュを有効にすると、それほど手間をかけずに完全に機能することがわかります。
  • ケーキを食べてもいい:パフォーマンスの向上と Google PageSpeed Insights などの合成ベンチマークでの最高評価を優先して、機能や品質の低下を受け入れる必要があるかもしれません . 1MB 以上の非常に高品質な画像や、十分に圧縮されていないビデオ ファイルが好きな人は、Web サイトのベンチマーク ユーティリティで最高の評価を得ることはできません。同様に、ページの読み込みごとに動的コンテンツを読み込むサイトの一部がある場合は、その機能をオフにするか、別の読み込み方法を見つけて最適なパフォーマンスを得る必要があります。

ページがコンテンツの読み込みを開始するまでに 10 秒以上かかるという問題が発生している場合は、解決策としてキャッシュに切り替える前に解決しなければならない WordPress またはホスティング構成に根本的な問題があることがよくあります。ページの読み込みが突然非常に遅くなる問題のトラブルシューティングについては、ここをクリックしてください。

この記事のすべての手順に慣れている場合は、Web サイトのパフォーマンスを向上させるためにすべての手順を実行する必要があります。基本的なユーザーの場合は、慣れているセクションのみを完了することもできます.すべてのオプションを完了することができる場合ほどではありませんが、それでもパフォーマンスは向上します。

一部のパーツはロード時間を大幅に改善しますが、他のパーツはごくわずかです。一部の部分は、Google の PageSpeed や GTMetrix 速度テストなどの合成速度テストでサイトを高く評価しますが、実際の読み込み時間には違いがない場合があります.これが合成ベンチマーク ツールの性質です。

簡単に言うと、ウェブサイトのパフォーマンスを劇的に改善するためにできる 9 つのことを次に示します。

1.パフォーマンスを重視するウェブ ホストを使用する

Web ホスティング プロバイダーが何千もの Web サイトでサーバーの負荷を下げている場合、またはサーバーを最大限に活用する方法がわからない場合、頻繁な速度低下に遭遇することは避けられません.

共有ホスティングを使用している場合は、ホストがサーバーあたりのサイトの総数を人為的に制限して、サイトが適切に機能するために必要なリソースを確保できるようにしてください.独自の VPS をお持ちの場合は、ホストにどのように構成されているか、および構成のどの部分が最高のパフォーマンスを確保するように設計されているかを尋ねてください。彼らの答えに、SSD ストレージ、nginx またはライトスピード Web サーバー、および静的キャッシュ ファイルを提供するためのカスタム最適化構成などが含まれていない場合は、より優れた WordPress Web ホストを見つける時が来ました。

あなたが とても パフォーマンスが心配な場合は、独自の VPS を取得して、サイトに専用のリソースがあることを確認することをお勧めします.多くの場合、負荷の低い共有ホスティングを最初に試すことをお勧めします。さらに優れたパフォーマンスが必要な場合は、いつでも VPS に移行できます。

2.最新の PHP バージョンを使用

ここでいくつかのメトリックを確認できます。 PHP 8.x または 7.4 を使用できる場合、7.2 以前に比べてパフォーマンスがさらに 30 ～ 70% 向上します。 ただし、注意してください:キャッシュされたフロントエンド ページでは、この改善に気付かないでしょう。このパフォーマンスの向上は、キャッシュ プラグインが最初にページをキャッシュするときと、WordPress の管理領域をトラバースしているときに、ページの読み込み時間に見られます。

それはいいですね…でも、どうやって使うの？

  • まず、Plesk にログインします
  • 問題のドメインの下で、「PHP 設定」に移動します
  • ページの上部に 2 つのドロップダウンがあります。 1 つは PHP バージョン用、もう 1 つは PHP ハンドラー用です。バージョンについては、最新バージョンを試してから、問題が繰り返し発生する場合は、サイトが機能するまでバージョンを下げてください。 する場合 PHP の最新リリースで問題が発生した場合、最終的には、互換性のないプラグインやテーマを更新するなど、問題の原因を見つけて修正することが最善の策ですが、これが常に可能であるとは限りません。
  • 一番下までスクロールして、[OK] または [適用] をクリックします

3. Brotli または Gzip 圧縮を有効にする

Websavers の共有ホスティングまたはハンズオン サポート付きの VPS を使用していますか?もしそうなら、すでに Brotli (gzip フォールバック付き) 圧縮を有効にしています! Websavers の違いをまだ体験していませんか?それでは、またお会いしましょう。

私たちと一緒にホストしていない場合、ほとんどのキャッシュ プラグインがこれを処理しますが、そうでない場合は、これらの値を .htaccess ファイルに追加して、Web サイトで GZIP 圧縮を行います:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

これにより、送信前にすべての互換性のあるコンテンツを圧縮するように Apache に指示し、時間と帯域幅を節約します!

Nginxのみを使用していますか?これを Nginx ディレクティブで使用して、gzip フォールバックで brotli を有効にします:

brotli on;
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

4.ブラウザ キャッシュの長期有効期限を有効にする

まず、ブラウザのキャッシュとは何かを正確に理解することが重要です。ブラウザの「キャッシュをクリアする」ように誰かに言われたことがありますか?これは、最新のブラウザーがリソース (HTML/CSS/JS/画像) のコピーをダウンロードして、その後のアクセスでページの速度を上げるように構成されているためです。ただし、デフォルトでは、これらのアイテムの一部は非常に早く「期限切れ」になるように設定されています。これは速度の面であまり役に立ちません!

後のセクションでは、WordPress のキャッシュ プラグインの使用について説明します。厳密に apache ウェブ サーバーを使用している場合、すべてのキャッシュ プラグインはブラウザ キャッシュの長い有効期限値も有効にします。 .

まだサイトを開発中の場合、これはお勧めできません。この設定は、サイトが稼働しているときにのみ適用してください。

とはいえ、サイトが稼働していて、そのパフォーマンスをもう少し絞り出したい場合は、特定のリソースを保持する時間を訪問者に伝えるようにサーバーを構成できます.

これらのディレクティブはサーバーから送信され、すべての訪問者のブラウザにさまざまなファイル タイプを「保持」する時間を指示します。

Apache Web サーバーを使用していますか?

以下を .htaccess ファイルに追加してください。

## EXPIRES CACHING ## 
<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresByType image/jpg "access plus 1 year" 
ExpiresByType image/jpeg "access plus 1 year" 
ExpiresByType image/gif "access plus 1 year" 
ExpiresByType image/png "access plus 1 year" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/html "access plus 1 week" 
ExpiresByType application/x-compressed "access plus 1 week" ExpiresByType application/x-gzip "access plus 1 week" 
ExpiresByType application/pdf "access plus 1 month" 
ExpiresByType text/x-javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" 
ExpiresDefault "access plus 1 week" 
</IfModule> 
## EXPIRES CACHING END ##

Plesk で nginx を使用する

  • Plesk にログインし、最適化するドメインの下の「Apache &nginx 設定」に移動します
  • 有効期限の下> カスタム値を入力 365 日と入力してください .チェックボックスをオンにします:静的ファイルのみの Expires ヘッダーを含む応答
  • Smart static files processing の横にあるチェックボックスをオンにします 静的ファイルを nginx で直接提供

「nginx で直接静的ファイルを提供する」オプションに、これらの静的ファイル拡張子のすべてがリストされていない場合 (スペースまたは | で区切られています)、提供されたボックスにこれを貼り付けます:

ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip

[適用] または [OK] をクリックして、変更を保存します。

ベアボーン nginx の使用

これを nginx 設定に追加してください:

location ~* \.(css|js)$ {
        gzip_vary on;
        expires 30d;
}
location ~* \.(ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip)$ {      
        gzip_vary on;
        expires max;  
        log_not_found off;
}

5.サーバー側の静的キャッシュ ジェネレーターを使用する

私たちのテストでは、これに最適な商用オプションは WP Rocket であり、これに最適な無料オプションは WP Super Cache です。 どちらも、サイトのページと投稿ごとに静的キャッシュ ファイルを作成し、重い Apache や PHP プロセスを起動する必要なく、静的ファイルを自動検出して提供するカスタム nginx 構成で非常にうまく機能します。無料のキャッシング プラグインよりも WP Rocket を購入する利点は、ほとんどウェブサイトのコードの縮小と最適化の部分だけです。詳細については、以下のこのガイドのパート 6 を参照してください。

すべてのサーバーで社内で構築されたカスタム nginx 構成を使用して、最も一般的なサーバー側のページ キャッシュ プラグインの使用を自動検出し、静的な html ファイルを nginx で直接自動的に提供します。 PHP プロセッサ。これにより、CPU とメモリの使用量が削減されます。当社のシステムは、WP Rocket、WP Super Cache、WP Fastest Cache、W3 Total Cache、および WP Optimize からの静的キャッシュ出力を自動検出して提供できます。残念ながら、Hummingbird はランダムに生成された静的キャッシュ ファイル名を使用するため、当社のシステムでは動作しません。 Hummingbird を使用する場合は、WPMUDEV サポートにキャッシュ ファイル名の修正を依頼してください。

これらの静的キャッシュを生成するプラグインを使用すると、サイトは共有ホスティング サービスでも苦労することなくトラフィックの急増を処理できます!

これらの構成を使用して、共有ホスティング上のサイトを問題なく 1 日あたり約 10 万回のユニーク ビューに、独自の VPS 上のサイトを平均負荷 1.0 で 1 日あたり 50 万回以上のユニーク ページ ビューにしました。

ホストが対応できない場合は、カナダの WordPress ホスティング オプションをチェックしてください。さらに良いことに、このステップ、ステップ 6 (最適化)、およびステップ 7 (画像圧縮) で説明されている最適化を使用すると、テーマによっては、サイトの Google Page Speed スコアが失敗した、または低いから 90+ になる可能性があります。および使用されるプラグイン。

お気に入りの 2 つのキャッシュ プラグインから静的キャッシュ出力を取得する方法は次のとおりです。

  • WP ロケット ：ガイドを使用してWP Rocketをインストールおよびアクティブ化する方法は次のとおりです.アクティブ化すると、静的キャッシュの作成が自動的に開始されます。
  • WP スーパー キャッシュ :WordPress インストールにログインし、[プラグイン]> [新規追加] に移動します。 WP Super Cache をインストールして有効化します。 [設定]> [WP Super Cache] に移動し、[キャッシュをオンにする] を選択して、[ステータスの更新] ボタンを押します。 [詳細設定] タブをクリックします。その横にある「推奨」ですべてをチェックしてください。ステータスの更新ボタンを押します。 「有効期限とガベージ コレクション」セクションまでスクロールし、間隔を 1 日 1 回または 2 回に設定してから、「有効期限の変更」ボタンを押します。

多くの中でも、W3 Total Cache を好む人もいれば、WP Fastest Cache を好む人もいます 他のキャッシュプラグイン。一般に、これらのプラグインはパフォーマンスの向上に優れており、上記のプラグインはいずれも静的キャッシュ ファイルを生成して Web サイトのパフォーマンスを高速化するのに優れています。以下のステップ 6 で説明されているように、それらのすべてが一貫して最適化に優れているわけではありません。

次に、WordPress にログインしているブラウザとは別のブラウザを開き、サイトの任意のページを読み込みます。読み込みが完了したら、ページを更新します。更新は、最初のページの読み込みよりも大幅に高速になっていることがわかります。これは、ブラウザがリソースをキャッシュするために最初のページの読み込みを使用したためだけでなく、(最も重要な) サーバーが最初のページの読み込みを使用して静的キャッシュ ファイルを作成し、その後の訪問で提供されるためでもあります。

静的ページ キャッシュを有効にしても、サイトの機能に影響はありませんが、サーバーが以前よりもはるかに高速に各ページを提供できるようになるため、Web サイトの TTFB (最初のバイトまでの時間) が劇的に改善されます。これに対する唯一の例外は、AJAX を使用しないサイトで変更される動的データがある場合です。サイトのその部分は、ページが読み込まれるたびに自動的に更新されるわけではありません。これが発生した場合は、Web サイトの開発者に相談して、AJAX を使用するように機能を変更するよう依頼してください。

以下のパート 6 では、WP Rocket または SuperCache + Autoptimize のいずれかを構成して、Google ページ速度スコアを劇的に改善するより積極的なオンサイト最適化を処理する方法について読むことができます.

6. Code Minifier と Optimizer プラグインを使用する

一般的に言えば、一度に 1 つの最適化プラグインに固執する必要がありますが、WP Super Cache と Autoptimize は実際には連携して動作するように設計されています. WP Rocket には WP Super Cache と Autoptimize の機能が組み合わされており、静的キャッシュ ファイルを生成し (上記のパート 5 で説明)、サイト コードを最小化して最適化します。

Autoptimize は WP Rocket で機能します。Autoptimze が検出されると WP Rocket は単純に最適化機能を無効にしますが、ほとんどの場合、WP Rocket には同じ機能が既に組み込まれているため不要であることがわかりました。WP Rocket の最適化機能も縮小やスクリプトの延期などの機能が有効になっている場合は、Autoptimize よりも Web サイトを壊さないようにする方が優れています。

Google Page Speed や GTMetrix でより高いスコアを得るためにしばしば必要とされるサイト コードの最適化 (ミニフィケーションなど) に関して言えば、W3 Total Cache や WP Fastest Cache (とりわけ) を同様に機能させることはできませんでした。 Autoptimize または WP Rocket の最適化機能として。

注意:これは、特にテーマ、プラグイン、またはカスタム コードが最適化でうまく機能するように書かれていない場合に、一部の最適化を有効にするとサイトの一部が壊れる可能性がある段階です。これが発生した場合は、以下のトラブルシューティング手順を参照して、修正方法を確認してください。

WP Rocket (私たちのお気に入り、有料)

上記のパート 5 を完了していない場合は、ガイドを使用して WP Rocket をインストールしてアクティブ化します。次に、[設定]> [WP Rocket] に移動して開始します。

キャッシュ タブ:

  • モバイル デバイスのキャッシュを有効にする .完全に別のモバイル サイトを使用している場合 (推奨されません)、または たくさん 使用している場合 モバイルでのみ表示される要素 (モバイル バージョンとデスクトップ バージョンの間でページの一部を入れ替えるなど) の場合は、[モバイル デバイス用に個別のキャッシュ ファイル] チェックボックスをオンにします。 .
  • ログインしている WordPress ユーザーのキャッシュを有効にする

変更を保存

ファイル最適化タブ:

  • CSS を縮小: 有効
  • CSS ファイルを結合する: 無効*
  • CSS 配信の最適化: 「CSS を非同期的に読み込む」オプションを使用することをお勧めします。これは、(現在ベータ版の) 未使用の CSS を削除するよりもはるかに信頼性が高いためです。未使用の CSS を削除するとパフォーマンスが劇的に向上しますが、通常の使用や気弱な人にとっては信頼できません。使用する場合は、適切に調整するために手動で調整する準備をしてください。
  • JavaScript ファイルを縮小する: 有効
  • JavaScript ファイルの結合:無効*
  • 遅延 JavaScript の読み込み: 有効
  • JavaScript の実行を遅らせる: 有効**

WP Rocket キャッシュをクリア 別のブラウザーでサイトを読み込みます

* Web サーバー エンジンがファイルを同時に送信するため、Web サーバーが http/2 または http/3 (私たちのような) をサポートしている場合は、個別のファイルの方が適しています。

** ブラウザの Web インスペクタのコンソール タブでエラーを確認します。 「jQuery is not defined」または「jQuery is not found」のようなエラーが表示された場合は、プラグイン、テーマ、またはカスタム コードがリソースを適切にロードしていない理由を突き止め、必要なものを除外する必要があります。 Javascript の延期および/または遅延機能から、または簡単な方法で Javascript 実行の遅延 のデフォルトの除外を適用します。 WP Rocket 設定のこのページに表示されます。

その他の JavaScript エラーが表示された場合は、Load JavaScript Deferred を無効にするか、プラグインまたはテーマの開発者と相談して JavaScript ファイルを遅延できない理由を特定する必要があります。

メディア タブ:

  • このページのすべてを有効にする

アドオン タブ:

  • サイトで Google アナリティクスを有効にしている場合 (Google タグ マネージャーを使用していない場合) ) Google トラッキング アドオンを有効にします。 [注:MonsterInsights プラグインは、このアドオンと互換性がありません。この Rocket アドオンを使用する場合は、MonsterInsights を削除し、Google の SiteKit などの別のプラグインを使用して分析コードを含めるか、UA コードを手動でコピーしてテーマのヘッダー コード フィールドに貼り付ける必要があります。]
  • サイトで Facebook ピクセル トラッキング コードを使用している場合は、Facebook ピクセル アドオンを有効にしてください。
  • サーバーが Varnish キャッシュを使用している場合 (代わりに nginx キャッシュが利用できるため、私たちのサーバーは使用していません)、ここで Varnish アドオンを有効にする必要があります。
  • Shortpixel または Imagify を使用してサイトの WEBP 画像を生成している場合は、ここでオプションを有効にして、JPG/PNG 画像よりも優先して配信することができます。

WP スーパーキャッシュ + 自動最適化 (無料)

上記のパート 5 を完了していない場合は、ここで完了してから、WordPress インストールにログインし、[プラグイン]> [新規追加] に移動して、Autoptimize をインストールしてアクティブ化します

自動最適化の構成

  • [設定]> [自動最適化] に移動し、Javascript、CSS、HTML の縮小が有効になっていることを確認してください。
  • [追加] タブの [Google フォント] の横にある [Webfont.js を使用してフォントを非同期的に結合して読み込む] オプションと [クエリ文字列を削除する] オプションを試してください。
  • [変更を保存] をクリックします。

壊れた要素のトラブルシューティング

WP Rocket または Autoptimze のいずれかで最適化を有効にした後、使用するプラグイン、テーマ、およびその他のさまざまなものによっては、サイトに壊れた要素が表示される可能性があります.一般的な理由と修正方法を次に示します。

画像または動画がありません:

テーマまたはページ ビルダーが Javascript を使用してサイトに画像を読み込む場合、画像と動画の遅延読み込み オプションはそれを壊す可能性があり、このコンテンツを含むページで遅延ロードを無効にする必要があります。これを行う方法については、以下の「ページごと」セクションを参照してください。

メニューなど、サイトのグローバル部分が機能しない

カスタム コードの場合は、原因となっているコードを修正することをお勧めします。テーマまたはプラグインによって提供される機能である場合は、その機能を別のテーマまたはプラグインに置き換えてみてください (テーマまたはプラグインはおそらく速度のために構築されていないため)。また、互換性の問題をテーマまたはプラグインの開発者に報告して、修正できるようにすることもできます。

コードを修正したり、速度が最適化されていないソフトウェアを置き換えたりできない場合は、各タイプの縮小を無効にします (例:[ファイルの最適化] タブの下)。 WP Rocket で) 問題が解決するまで 1 つずつ実行し、最後に無効にした設定以外のすべてを再度有効にします。それが問題の原因だったからです。

上級ユーザーの場合は、機能しなかった設定を再度有効にしてから、Web インスペクターを使用してページを検査し、問題の原因となっているファイルを見つけることができます。見つかったら、WP Rocket または Autoptimize の設定に移動し、その単一のファイルだけを縮小から除外します。 (これにより、ページ速度スコアが低下する可能性があります)

ページごとの除外

選択したページだけに問題がある場合は、そのページだけで問題を引き起こしているオプションを無効にすることができます。 WordPress でページを編集し、右側の [キャッシュ オプション] ボックスを探します。

キャッシュ プラグインのどの部分が問題を引き起こしているかがわかっている場合は、チェックを外します。そうでない場合は、一度に 1 つずつチェックを外し、ページを表示して問題が解決したかどうかを確認します。問題の設定が見つかるまで、各オプションについてこれを繰り返します。

未使用の CSS を削除 (WP Rocket) を使用している場合

状況に応じて、これを修正するための 2 つのオプションがあります:

<オール>
  • 未使用の CSS の削除を始めたばかりですか?ええと、これが起こる可能性が高いと言いました。ただし、問題ありません。 「おかしくなった」要素の CSS 識別子を探して、WP Rocket の除外リストに追加するだけです。次に、別のブラウザーでページを再読み込みし、問題が修復されたことを確認します。そうでない場合は、次の CSS 要素を見つけて試してみてください。それを理解しても、サイトのパフォーマンスが大幅に向上するはずです。
  • Remove Unused CSS をしばらく実行していて、突然壊れた場合は、WP Rocket -> Clear Used CSS に移動して更新してみてください。これは、一部のプラグイン/テーマの更新時に発生する可能性があり、WP Rocket にそのファイルを再生成するよう求める必要があります。

    • 7.画像ファイルを圧縮

    これは、低速のインターネット接続を使用したり、サイトに非常に大きな画像をアップロードしたりしない限り、わずかな顕著な速度向上のみをもたらしますが、モバイルの Core Web Vitals スコアが基づいているため、Google ページの速度スコアを大幅に改善できます。 3G インターネット速度で。

    注:サイトを最適化してパフォーマンスを最後の一滴まで引き出すことに真剣に取り組んでいる場合は、画質の低下が予想されます。 .より高品質の画像を好む場合は、a) 低速接続でのページ読み込み時間と、b) Google PageSpeed や Core Web Vitals などの合成ベンチマーク スコアを犠牲にして、このオプションを選択することになります。高品質の画像とベンチマーク スコアのどちらを優先するかを選択する必要があります。両方を持つことはできません。

    元の手動方法: すべての PNG ファイルをコンプレッサーで実行してから、以前のバージョンの上にアップロードします。これらのツールを使用できない場合もありますが、私はすべての PNG ファイルを Photoshop で開き、Web 用にエクスポートしました。これを行う場合、ファイルがしないことを確認してください。 特にアイコンの場合、ファイルの大部分を消費する可能性があるため、メタデータを含めます。

    より簡単な有料の方法: Imagify を使用して、すべてサーバー側でこれを処理します。これは、WP Rocket と同じ人々が提供する素晴らしいプラグインで、画像の圧縮をワンショットまたは継続的に自動的に管理します。別のオプションは、ShortPixel と呼ばれるプラグインです。これは、テストでは Imagify と同じように機能し、非常に公正な価格設定も提供します。 すべてをチェック おすすめのリソースはこちら

    Gravatar のキャッシュ

    これは画像 (投稿者が使用するもの) を指しているため、これについて話すのに適切な場所のように感じました。 WP Rocket と WP Super Cache は、デフォルトでは gravatar をキャッシュしません。つまり、さまざまな作成者からの投稿に多くのコメントがある場合、外部の gravatar 画像を読み込むと、ページの合計レンダリング時間が長くなる可能性があります。

    WP Rocket ブログには、これを管理する方法に関する素晴らしい記事があり、要点は「FV Gravatar Cache」と呼ばれるプラグインをインストールすることです.

    8.静的キャッシュ出力をロードするように Nginx を構成する [詳細]

    このオプションを利用できるのは、nginx リバース プロキシを備えたホストを使用している場合のみです。これは、ホストがサーバー構成で奇妙なことを行っていない限り、Plesk 12 以降を使用しているすべての人に適用されます。

    nginx は apache よりも軽量な Web サーバー エンジンであるため、これらの静的ファイルを直接提供するように nginx を構成することで、パフォーマンスが大幅に向上します。リクエストごとに、nginx スレッドを使用して apache プロセスを起動してリクエストを処理するのではなく、nginx を構成して nginx スレッドのみを使用し、すべてのページでわざわざ apache をロードしないようにします。静的キャッシュ ファイルがあります .かっこいいでしょ？

    ホスティングに Websavers を使用している場合、これを行う必要はありません。これは、すべての共有ホスティングおよび管理 VPS ホスティング アカウントで自動的に行われるためです。

    ホスティングが当社にない場合は、Plesk への管理者アクセス権が必要です これらの変更を適用できるようにします。通常、独自の VPS または専用サーバーがある場合は、管理者アクセスのみが許可されます。

    WP Super Cache の静的キャッシュ ファイルをロードするように nginx を構成する

    上記で WP Super Cache に mod_rewrite を使用してキャッシュ ファイルを提供するように指示したことを覚えていますか? Apache を使用している場合、WP Super Cache が必要な mod_rewrite ルールを含めるように .htaccess ファイルを自動的に変更するため、これはほぼ自動的に行われます。

    nginx 設定に以下を挿入すると、nginx は WP Super Cache の静的出力を提供するときに apache を完全にバイパスするように指示されます。 Plesk では、ドメインの「Apache &nginx 設定」の下でこれを行い、次に「追加の nginx ディレクティブ」フィールドの下で行います。

    ### WP Super Cache Below ###
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
    set $cache_uri 'null cache';
}   
if ($query_string != "") {
    set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
     set $cache_uri 'null cache';
}
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
   try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri /index.php;
}

    サブディレクトリで WordPress を使用している場合、特に「ネストされた」インストール (WordPress がベースディレクトリにあり、別の WordPress インストールがサブディレクトリにある) を使用している場合、提供されている nginx ルールに問題が発生する可能性があることに注意することが重要です。これは、提供されたルールに多くのトリッキーな変更を加えることで実現できますが、サブフォルダーではなくサブドメインを使用するように構造を変更すると、すべての点で間違いなく簡単になります.

    WP Rocket の静的キャッシュ ファイルを読み込むように nginx を構成する

    この便利な WP Rocket nginx 構成を使用して、構成を生成し (インストール手順に従います)、その結果を Plesk の高度な nginx 構成ディレクティブの場所に貼り付けました。

    環境に最適であることがわかった構成に調整を加えました。最適化を利用したい場合は、Websavers でのホスティングを検討してください!

    9.未使用の PHP モジュールを無効にする [詳細]

    Plesk 管理者アクセスが必要 (VPS のみ)

    VPS への完全な管理者アクセス権を持っている場合は、不要な PHP モジュールを実際に無効にすることができます。メモリにロードするものが少なくなり、メモリの使用量が減り、集中的な処理が減り、パフォーマンスが向上します。ただし、これは非常に高度な作業であるため、自分が何をしているのかを理解していることを確認してくださいまたは ライブサーバーで実行していないので、何も壊していません 😉

    • ツールと設定に移動 Plesk で
    • 一般設定の下 [PHP 設定] をクリックします
    • 設定を変更する PHP バージョンとハンドラーを選択します
    • 使用していない PHP モジュールをオフに切り替えます
    • [OK] をクリックします または適用 保存する

    ウェブサイトに戻って、何も壊れていないことを確認してください。 Web サイトのすべての側面でどのモジュールが使用されているかがわからない場合があるため、これを正しく行うにはかなりの試行錯誤が必要になる可能性があります。

    ボーナス ヒント #1:ReCAPTCHA v3

    お問い合わせ/見積もりフォームで、またはブログ投稿のコメントを保護するために、ボット保護のために Google ReCAPTCHA を使用している場合、私たちはあなたを責めません.ボットがフォームを送信するのを防ぐための適切なシステムです.

    ReCAPTCHA v2 は、誰もが知っているタイプのキャプチャであり、自分がボットではないことを確認するために「ボックスにチェックを入れる」場所がちょっと嫌いです。システムが検証をポップアップ表示すると、「トラックが入っているすべての画像を選択してください」などの説明に一致する画像をクリックする必要があります。おなじみですか？

    ReCAPTCHA v3 は、チェックボックスが必要ないという点で「見えない」ため、ユーザー エクスペリエンスが向上します。ただし、ウェブサイトのすべてのページにすべてのスクリプトをロードする必要があるという点で、サイト速度の欠点があります .ユーザーの行動がボットであるかどうかを判断するのに役立つため、サイトをナビゲートするユーザーを追跡します。

    これらのスクリプトはすべてのページに読み込まれるため、これらのリソースが GTMetrix やその他の合成ベンチマーク ツールによってフラグ付けされないようにする唯一の方法は、v2 に戻すことです (フォームまたは recaptcha プラグインで許可されている場合)。フォームが存在するページに読み込まれます。

    Advanced users:you can write a WordPress hook that dequeues the ReCAPTCHA v3 resources on all pages except those with your forms, but you should know that doing this will very likely decrease the effectiveness of ReCAPTCHA’s protection.

    Bonus Tip #2:Detect and Reduce Dynamic Processing

    There’s a few common cases where, regardless of all the caching and optimizations, we just implemented, your server will still launch dynamic PHP processes to serve the requests, thus requiring CPU and memory to handle that request.

    Check out our guide to analyzing dynamic processing with WordPress!

    UPDATE HISTORY:

    • Jan 12, 2022:Updates to PHP Versions, simplify wording, add brotli compression details
    • Aug 28, 2020:Add notes about content encoding headers, MonsterInsights incompatibility with WP Rocket’s GA Addon, Gravity Forms incompatibility with deferred jQuery
    • Apr 30, 2020:Add Bonus Tip 2:Detecting and Reducing Dynamic Processing
    • Apr 26, 2020:Add tip for caching Gravatar images.
    • Jan 10, 2020:Add improved instructions for configuring browser caching rules in Plesk to improve scores on synthetic benchmarks like Google Page Speed and GTMetrix.
    • Dec 31, 2019:Remove our recommendation to use nginx direct to PHP-FPM processing and instead use rules that will ensure nginx will directly serve your caching plugin’s static cache file output, bypassing apache. This results in identical performance for most website visitors, but much better security, if your host has Plesk’s web application firewall properly configured.
    • Oct 15, 2019:Split step 5 into 2 sections (now 5 and 6) — static cache generating in step 5 (which improves performance but doesn’t break websites) and optimization of resources in step 6 (which improves scores on things like Google Page Speed, but which can also break your website).
    • Feb 4, 2019:Replace Better WordPress Minification with Autoptimize as recommended minification system.
    • Jan 9, 2019:Add PHP 7.3 Info
    • Dec 3, 2018:Reformatted post for better understanding of difference between browser cache vs. nginx->php-fpm direct mode. Use Plesk recommended rewrite rules for nginx.
    • Jul 4, 2017:Added ShortPixel as an image compression option, reformatted post.
    • Feb 20, 2016:Added commercial option, WP Rocket, as a great paid replacement for WP Super Cache + WP Minify.
    • Jun 16, 2017:Added some hosting/server tips.
    • Dec 25, 2013:Original Post Date.

    Plesk

    1. ダッシュで検索を高速化する方法は？

    2. PleskにWordPressをインストールする方法

    3. PleskでWordPressのURLを更新する方法

    1. PleskでWordPressWebサイトのクローンを作成する方法

    2. PleskでWordPressプラグインを管理する方法

    3. Ubuntu 18.04でWordPressを高速化するためにRedisキャッシングを構成するにはどうすればよいですか？

    1. CentOS7にWordpress4をインストールする方法

    2. GoogleChromeを高速化する方法

    3. WordPress でファイルへのリンクを挿入する方法