WordPressを高速化する方法（コアWebバイタルに使用する最適化）

公開: 2021-02-24

WordPressは、世界をリードする最も人気のあるコンテンツ管理システム（CMS）です。実際、現在インターネット上のすべてのWebサイトの43％以上に電力を供給しており、毎年市場シェアを獲得し続けています。スタンフォード、国立公文書館、クリエイティブコモンズ、ソニーミュージック、フォーチュン、さらにはホワイトハウスなどの有名なブランドや組織は、WordPressを使用してサイトを強化しています。

20年以上インターネットで働いてきた私は、Drupal、Joomla、Ghost、Mediumなど、あらゆる種類のプラットフォームを使用してきました。 WordPressは、SMB、教育機関、トラフィックの多いブログ、さらにはエンタープライズサイトなど、あらゆるセクターに最適なソリューションだと思います。

なんで？ WordPressは、ウェブサイトの構築、管理、マーケティングにおいて最も制御性と柔軟性を提供するためです。ただし、WordPressを使用するだけでは十分ではありません。スピードはあなたが成功することを確実にする上で大きな役割を果たします。そして、それは私たちが以下に飛び込むものです。

遅いウェブサイト（グーグルを含む）が好きな人はいません

WordPressは非常に人気がありますが、何をしているのかわからない場合は、WordPressを使用するとパフォーマンスが低下する可能性があります。当初、WordPressは主にブログプラットフォームでした。しかし、何年にもわたってより多くの機能が追加されたため、それはそれ以上のものに進化しました。現在の問題は、非常に多くの異なる構成とオプションがあるため、WordPressが正しくセットアップまたは最適化されていないと、実行速度が低下する可能性があることです。

なぜ遅いウェブサイトが重要なのですか？

それは訪問者の経験と第一印象に常に非常に有害であるからです。これは、バウンス率とコンバージョン率に重要な要素を果たします。ダイヤルアップの時代は過ぎ去り、人々は以前のような忍耐力を持っていません。ページが読み込まれるまで長時間待たなければならない場合は、戻るボタンを押して次の検索エンジンの結果を選択する可能性があります。

WordPressが何年にもわたって進化してきたように、パフォーマンスの測定も進化しています。合計ロード時間は依然として重要ですが、これ以上注目すべき測定値ではありません。 Googleは現在、CoreWebVitalsと呼ばれるものを使用しています。サイトは、最大のコンテンツペイント（LCP）、最初の入力遅延（FID）、累積レイアウトシフト（CLS）などの組み合わせに基づいてスコアを取得します。

Webコアバイタル（CLFS、FID、LCP） — コアWebバイタル（CLFS、FID、LCP）

簡単に言うと、コードの量は常にパフォーマンスにとって重要ですが、Webサイトがコードをロードする方法も考慮する必要があります。

そして、ミックスに別のレンチを投げます。モバイルページの速度もランキング要素です。そのため、Core Web VitalsとSERPのインデックス作成方法は、完全にモバイルデバイスに基づいています。 Googleは、ウェブサイトがデスクトップにどれだけ速く読み込まれるかを気にしません。

どこから始めますか？

最初にすべきことは、WordPressサイトの速度をテストすることです。これにより、ベースラインとして使用できるベンチマークが得られます。無料のPageSpeedInsightsツールを使用することをお勧めします。アクセシビリティ、SEOなどに関するもう少しデータが必要な場合は、web.dev測定ツールを使用できます。これらは両方ともGoogleによって開発され、Lighthouseを利用しており、スコアリングにCoreWebVitalsを使用しています。

GTmetrixは、パフォーマンスメトリックの多くでCoreWebVitalsを使用するもう1つの便利なツールです。また、アセットのウォーターフォールを確認することもできます。これは、何が起こっているのかをよりよく把握するために必要になる場合があります。ただし、無料バージョンでは、モバイルではなくデスクトップでのみスコアが表示されることに注意してください。

キャッシュ、CDN、およびその他のサードパーティスクリプトがあるため、正確な結果を得るには、必ず速度テストを少なくとも3回実行してください。また、使用するツールに関係なく、ツールを1つ選び、それを使い続けることが重要です。ツールごとに速度の測定方法が異なり、パフォーマンスの向上を監視するには正確なベースラインが必要です。

クエリとデータベースの読み込みパフォーマンスを測定する必要がある場合は、QueryMonitorとNewRelicAPMが優れたソリューションです。 Kinstaでホスティングしている場合は、MyKinstaダッシュボードに無料のAPMツールもあります。

WordPressのスピードアップ（フロントエンド、バックエンド）

この投稿では、トラフィックの多いブログとeコマースサイトを組み合わせたすべてのWordPressサイトをどのように構成するかを段階的に説明します。フロントエンドとバックエンド（WordPress管理ダッシュボード）の両方に適用される推奨事項と、Google CoreWebVitals用に特別に調整された最適化が含まれています。

まず、私について少し説明します。私はWordPressを14年以上使用しています。以前はKinstaで働いていました。高性能のマネージドWordPressホスティング会社。それ以前は、グローバルコンテンツ配信ネットワークであるKeyCDNで働いていました。つまり、Webパフォーマンスは私の血の中にあると言えます。

私はWordPressサイトを最適化して、最適なパフォーマンスで実行されるようにするために何千時間も費やしてきました。インターネットマーケターとして、WordPressは私が信じられないほどのことを成し遂げるのを助けてくれました、そしてそれはあなたを助けることもできます！以下の手順に従って、 WordPressを即座に高速化します。

あなたの経歴や専門知識のレベルに関係なく、この投稿で役立つものが見つかることをお約束します。

WordPressホスティング
キャッシング
WordPressテーマ
CDN
画像の最適化
データベースとディスク容量
Webフォント

フォントアイコン
JavaScriptを最適化する
CSSを最適化する
HTMLを最適化する
その他最適化、リソース、およびヒント
スピードテスト結果
サイトを変換するか、パフォーマンス監査を取得する

1.高速のWordPressホスティングに投資する

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）。

WordPressをスピードアップするための最も簡単で最も重要な方法の1つは、強固な基盤から始めることです。つまり、高速で信頼性の高いWordPressホストを選択する必要があります。残念ながら、この最初のステップは多くの人が混乱するところです。多くの人は、ホスティングプロバイダーがあなたのパフォーマンスにどれだけの影響を与えるかを過小評価しています。これを正しく行うことで、時間とフラストレーションを大幅に節約できます。

あなたが小さなウェブサイトを利用している場合、あなたはおそらく安価な共有ウェブホスティングプランを利用しています。プラン自体の名前はそれが何であるかを定義します。「共有」という用語は、あなたのWebサイトが他の多くの人々のWebサイトと一緒にサーバー上でホストされていることを意味します。これは、彼らがすべて同じリソースをめぐって争っていることを意味します。

ホスティングに関しては、「無制限のリソース」などはありません。これは単なるマーケティングの仕掛けです。クリックしてツイート

BlueHostやGoDaddyのような安価なホスティングプロバイダーを宣伝しているブロガーやアフィリエイトマーケターをいつも目にしていると思います。悪いニュースの担い手になって申し訳ありませんが、これらのサイトの99％は、単に手っ取り早い金儲けをしようとしているアフィリエイトマーケターによって運営されています。ほとんどの場合、彼らはそれらを使用しません。彼らはできるだけ多くを参照しようとしているだけです。

安いホストを選ぶことはあなたがあなたのウェブサイトをホストするときあなたがこれまでに行うことができる最悪の決定の1つです。たとえば、BlueHostがEIGによって所有されていることをご存知ですか？ EIGは、何年にもわたってすべての低パフォーマンスのホストを買収してきた企業です。 EIGが所有するホストの完全なリストは次のとおりです。あなたはそれらすべてから同じ恐ろしいサービスをほとんど期待することができます。彼らが気にするのは彼らの収益だけです。

私がアフィリエイトマーケターでもあるのは事実ですが、ウェブパフォーマンスに対する私の情熱は常にそれを打ち負かしてきました。私は自分のサイト（woorkupを含む）に実際に使用しているホスティングプロバイダーのみをお勧めします。適切なホストを選択することは、ダウンタイムや速度について心配する必要がないことを意味します。以下は、私が100％支持している2つのWordPressホスティングプロバイダーです。

SiteGround

より手頃なWordPressホスティングをお探しの場合は、SiteGroundを強くお勧めします。彼らは、HTTP / 3（QUIC）、PHP 8、SSD、および月額わずか6.99ドルから始まる他の多くの機能を備えたGoogle CloudPlatformでのマネージドWordPressホスティングを提供します！これは、より安価なホスティング業者にとって得られるものとほぼ同じです。私の詳細なSiteGroundレビューを必ずチェックしてください。

SiteGroundは、常に最新のテクノロジーを備えた手頃な価格のホストが必要な場合に最適です。ただし、大量のトラフィックを獲得し始めたら、Kinstaのようなよりプレミアムなホスティングプロバイダーに投資することをお勧めします。

キンスタ

あなたが高性能のマネージドWordPressホスティングを探しているなら、私はKinstaを称賛するだけです。彼らの膨大な機能セットは、他のホスティングプロバイダーとは一線を画すものです。 Kinstaのインフラストラクチャは、GoogleCloudPlatformとそのプレミアム階層ネットワークを利用しています。彼らは、すべての計画で利用可能な最速のマシン（C2コンピューティング最適化VM）を使用しています。

Kinstaは分離されたソフトウェアコンテナを使用します。つまり、サイト間でリソースが共有されないため、スケーラビリティとセキュリティに最適です。きびきびとしたWordPress管理ダッシュボードが必要な場合、またはShark Tankで放映されようとしている場合は、これが必要なホストです。現在のクライアントには、Buffer、Flippa、Mint.com、Ubisoft、TripAdvisorなどの有名企業が含まれます。

Kinstaの機能と技術スタックには、29以上のデータセンターの場所、Nginx、PHP 8.1、HTTP / 3、無料のCDNとSSL、ステージングサイト、MariaDB、稼働時間の監視、APM、DDoS保護が含まれます。最新のPHPバージョンを使用することは、想像以上に重要です。なんで？ PHP8.1はPHP8.0（1秒あたりのリクエスト数で測定）より47.10％速く、PHP 7.2（ソース）より50％速いためです。これは無料のパフォーマンス向上であり、ユーザー側で作業を行う必要はありません。

キンスタはまた、ビジネスで最高のサポートを持っています！彼らの専門家のWordPressチームが24時間年中無休でお手伝いします。 woorkupを含む私のサイトはすべて、Kinstaでホストされています。私のKinstaの詳細なレビューを必ずチェックしてください。

ホスティングを超えて、KinstaはDevKinstaと呼ばれる信じられないほど無料のローカル開発ツールを提供します。これを使用すると、ローカルのWordPressテスト環境を数分で簡単にセットアップできます。ステージングサイトでこれを使用することの大きな利点は、ネットワークの遅延がないことです。

2.キャッシングを実装します

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）

ユーザーが初めてサイトにアクセスすると、サーバーは、ページのレンダリングに必要なすべてのデータベースクエリを含むリクエストを処理します。その後、ページはユーザーのブラウザに配信されます。初期処理時間は、高速ホスティングプロバイダーを持つことが非常に重要である理由です。

キャッシュは、サーバーの間にあるレイヤーです。キャッシュは、その最初のリクエスト中に構築されてRAMまたはディスクに保存され、後続のリクエストはサーバーではなくキャッシュレイヤーに到達します。これにより、サーバーの処理フェーズが本質的にバイパスされるため、ユーザーにとっては超高速（私のテストでは最大40％高速）になります。もう1つの利点は、サーバーの負荷も軽減されることです。

キャッシュが正しく設定されていない場合、最初のバイトまでの時間（TTFB）が高くなり、「待機時間」とも呼ばれます。 Google Core Web Vitalsに関しては、これにより「サーバーの初期応答時間を短縮する」という警告が生成されます。警告は、TTFBが600ミリ秒（ソース）よりも高い場合にトリガーされます。

前述のように、キャッシュがあるため、正確な結果を得るには、必ず速度テストを少なくとも3回実行してください。サイトのキャッシュの有効期限が切れたばかりの場合は、最初にテストを実行したときに上記の警告が表示されます。

キャッシングは通常、2つの異なる方法で実装されます。

サーバーレベルのキャッシュ
WordPressキャッシングプラグイン

サーバーレベルのキャッシュ

サーバーレベルのキャッシュは、高速で簡単なので、私がお勧めするものです。 KinstaのようなWordPressホスティングプロバイダーは、サーバーレベルのキャッシュをすでに用意しており、プラグインや設定に煩わされることはありません。トラフィックの多いブログであろうと、よりダイナミックなeコマースサイトであろうと、すべてが箱から出してすぐに機能します。このWebサイトで実行されているキャッシュプラグインはありません。

WordPressキャッシングプラグイン

ホスティングプロバイダーにサーバーレベルのキャッシュがない場合は、WordPressキャッシュプラグインをインストールする必要があります。私は何年にもわたって多くのキャッシングプラグインをテストしてきましたが、次のいずれかを使用することをお勧めします。

WP最速キャッシュ（無料）
キャッシュイネーブラー（無料）
WPロケット（プレミアム）

キャッシュを改善する

キャッシュを改善する簡単な方法は、WordPressサイトのキャッシュの有効期限を長くすることです。キャッシュ時間が長くなると、サイトのパフォーマンスが向上し、キャッシュのHIT率が向上します。また、「効率的なキャッシュポリシーで静的アセットを提供する」というGoogleからの警告を修正することもできます。

以下は、Kinstaキャッシュの有効期限を1時間から7日に延長したときに起こったことの例です。ご覧のとおり、HITキャッシュ比率のパーセンテージは劇的に上昇しました。つまり、より多くの訪問者が超高速キャッシュを使用してWebサイトを配信し、必要なPHPワーカーが少なくなります。

Kinstaでホスティングしている場合は、MyKinstaダッシュボードから次のキャッシュ長時間を利用できます。

1時間
2時間
4時間
8時間
24時間
7日

Kinstaには、更新を行うとすぐに単一ページやホームページなどの重要なページを自動的に削除するルールがあります。これにより、常に高可用性が確保され、訪問者に最新の更新が表示されるようになります。

別のホスティングプロバイダーまたはキャッシングプラグインを使用している場合は、それらのドキュメントを確認するか、サポートに依頼して、WordPressサイトの有効期限を延長する方法を確認してください。

3.軽量のWordPressテーマを使用する

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）

WordPressのテーマは、サイトを作成または破壊する可能性があります。あなたのサイトを這わせることができる肥大化したテーマがたくさんあります。高速なWordPressホスティングとキャッシュが実装されていても、特にGoogle Core Web Vitalsに関しては、コードとリクエストの量が重要です。

WordPressテーマを探しているときは、優れた開発者とサポートを備えた評判の良い会社から購入していることも確認する必要があります。

過去5年以上、ブログやeコマースサイトを含むすべてのWordPressサイトでGeneratePressを使用してきました。私はこれ以上幸せになることはできず、それを十分に推薦することはできません！ GeneratePressは軽量でありながら、多くの機能が含まれています。

Googleによると、GeneratePressWordPressテーマの基本インストールのスコアは100/100でした。また、このテストはモバイルデバイス用にエミュレートされています。非常に印象的！

また、ThemeForestでテーマや製品を購入する際には注意が必要です。 ThemeForestのすべての開発者が悪いと言っているわけではありませんが、残念ながら、彼らの多くは単に売り上げを増やすために肥大化を加えています。私のGeneratePressの詳細なレビューをチェックしてください。

ページビルダーはインターネットを破壊しています

私は何年にもわたって何千ものWordPressサイトに取り組んできましたが、本当に遅いサイトにはすべて共通点が1つあります。それはページビルダーです。高速なサイトが必要な場合は、今すぐページビルダーから離れる必要があります。

ページビルダーは元々、コードなしでWebサイトを簡単にデザインできないために開発されました。正直に言いましょう。コーディング方法を知らない限り、5年前にWordPressサイトを構築するのは困難でした。多くのWordPressの人々は「ウェブサイトの実装者」であり、コーダーではないため、ページビルダーはその目的を果たしました。そしてそれが多くのページビルダーが急成長を経験した理由です。

しかし、最近は状況が大きく異なります。これで、GenerateBlocksのようなすばらしいプラグインができました。これにより、コード量の1/10でWebサイトを設計できます。ああ、実際のコーディングもする必要はありません。

GenerateBlocksとElementor、Oxygen、Diviの全体的なコードベースサイズを見てみましょう。

酸素より87％小さいです。
Elementorより93％小さいです。
Divi Builderより96％小さいです。

もちろん、すべての派手なベルやホイッスルを持っているわけではありませんが、これらはCoreWebVitalsで上位にランク付けしようとするときに問題を引き起こしているものです。スライダーを例にとってみましょう。スライダーは何年も前に死んでいたはずですが、まだ残っています。これらにより、累積レイアウトシフト（CLS）警告が発生します。静的ヘッダーを設計することをお勧めします。アニメーションを捨て、可動部分を捨てます。

次に、DOM（Document Object Model）があります。簡単に言うと、ページが読み込まれるたびに、ブラウザはページのHTMLを解析し、DOMをレンダリングします。これをある意味で構造化されたツリーと考えてください。ただし、JavaScriptで操作できるため、これはHTMLソースコードだけではありません。正確には、DOMとは何かについて、この記事をチェックしてください。

DOMを完全に理解する必要はありません。コードのレイヤーが多いほど、ページに含まれるDOM要素が多くなります。ページビルダーに共通する問題は、DOMサイズが大きすぎることです。これは、本質的に、ネストされたdivのような追加のコードを追加しているためです。これにより、より大きなDOMが作成されます。 DOMが大きいほど、パフォーマンスの面でペナルティが高くなります。

GenerateBlocksのようなプラグインは少し異なって動作します。それらはまだコードを追加しますが、WordPressコアの既存のコードパラメーター内でより緊密に機能します。また、パフォーマンスを念頭に置いてゼロから開発されたため、そもそもコードの追加が少なくなります。そのため、多くのCoreWebVitalsの警告が表示されることはありません。

GenerateBlocksは、ページごとに1つのCSSファイルのみを追加します。このファイルには、オプションによって生成されたすべてのCSSが含まれています。 JavascriptやインラインCSSはありません-すべてが1つの整頓された場所にあります。一方、ページビルダーは通常、各ページに数十のファイルをロードします。

多くの人は、それはすべてパフォーマンスとデザインの間のトレードオフに帰着すると考えています。ただし、これはもはや当てはまりません。私が取り組んだページビルダーサイトの多くは、GenerateBlocksなどのプラグインを使用して簡単に再作成できます。私のGenerateBlocksの詳細なレビューを確認してください。

そのため、 GeneratePress+GenerateBlocksは現在のサイトに最適な組み合わせです。文字通り、（コーディング方法を知らなくても）必要なタイプのサイトを構築できます。そのため、これらのソリューションの両方を使用することを強くお勧めします。あなたのサイトは、パフォーマンスとGoogle CoreWebVitalsの将来性が保証されます。

4. CDN

影響：フロントエンドの速度。

WordPressホスティングプロバイダーがどれほど高速であっても、ネットワーク遅延の問題に打ち勝つことはできません。それは基本的な数学です。データはデータセンター内のサーバーに物理的に保存されます。ユーザーが遠く離れた場所にいると、Webサイトを遠くからダウンロードする必要があるため、処理が遅くなります。

コンテンツ配信ネットワーク（CDN）は、資産（画像、CSS、JS、さらにはHTML）のコピーを世界中のエッジサーバーに保存することで、これを修正します。また、それらをキャッシュします。訪問者がWebサイトを検索すると、コンテンツはWebサーバーではなく、最も近い地理的エッジサーバー（キャッシュ）から配信されます。 CDNの仕組みについて詳しく知りたい場合は、ダミーのCDNに関する私の記事を確認してください。

CDNはどのくらい役立ちますか？ CDNがWordPressサイトの速度を最大68％向上させるのを見てきました！これがその証拠です。それの多くは距離に依存します。

これは、ホスティングプロバイダーで堅牢なキャッシングソリューションをセットアップすることの重要性を否定するものではないことにも言及することが重要です。その理由は、CDNのキャッシュが期限切れになるためです。その場合、高速フォールバックレイヤーが必要です。

私がお勧めする2つのCDNプロバイダーがあり、それぞれが少し異なるアプローチをとることができます。

APOを使用したCloudflare
KeyCDN

APOを使用したCloudflare

Cloudflareは、世界中に270以上のエッジロケーションを持つ、群を抜いて最も人気があり著名なCDNプロバイダーです。ただし、これらは従来のCDNではありません。従来のCDNは、世界中のアセット（画像、CSS、JS）のみをキャッシュして配信するアドオンのようなものです。 Cloudflareはリバースプロキシです。

リバースプロキシとは、Webサイト（DNS）をCloudflareに向け、すべてのトラフィックをそれらを介してルーティングすることを意味します。彼らはあなたのウェブサイトと公共のインターネットの間に座っています。

フルプロキシサービスになることの欠点は、ルーティングに時間がかかることです。以前、Cloudflareには、このオーバーヘッドによって待機時間（TTFB）が増加する可能性があるという問題がありました。しかし、当時は過ぎ去りました。現在、自動プラットフォーム最適化（APO）と呼ばれるサービスがあり、アセットだけでなくHTMLも含めてサイト全体をエッジサーバーにキャッシュします。

なぜこれがそんなに大したことなのですか？以前は、リクエストはホスティングプロバイダーのサーバーに送信され、HTMLとCDNをダウンロードしてアセット（画像、CSS、JS）をダウンロードしていました。 APOを使用すると、すべてのリクエストは、ユーザーに最も近いCloudflareエッジサーバー（画像、CSS、JS、およびHTML）に直接送信されます。

これにより、待機時間（TTFB）の問題が解消され、めちゃくちゃ高速になります。また、従来のCDNのように、エッジサーバーごとにキャッシュをプリロードする必要もありません。 APOはKVを使用してキャッシュを保存し、最初のアクセス時に、すべてのエッジサーバーに即座に分散されます。ほとんどのサイトでは、世界中でWebサイトの別のコピーを自動的にホストしていると考えることができます。また、紛らわしいページルールをいじる必要もありません。

CloudflareのCDNサービスは無料で、APOサービスの料金は、トラフィックの量に関係なく、ドメインあたり月額5ドルです。だからそれは非常に費用対効果が高いです！興味があれば、私はこのウェブサイトでCloudflareのAPOサービスを使用しています。 APOにサインアップして、無料のCloudflareWordPressプラグインをインストールするだけです。

注： Kinstaはまもなく、すべてのクライアントに無料でAPOサービスを統合する予定です。

最高のパフォーマンスを得るには、Cloudflareのこれらの推奨設定も確認してください。

代替Cloudflareソリューション

高度にカスタマイズ可能な完全に無料のソリューションが必要な場合は、WP Cloudflare SuperPageCacheプラグインもお勧めします。これにより、同じタイプのフルページエッジキャッシュと低い待機時間（TTFB）が実現されます。唯一の違いは、エッジサーバーごとにキャッシュをプリロードする必要があることです。このプラグインの開発者は非常に役に立ち、迅速に対応します。

KeyCDN

従来のCDNをお探しの場合は、KeyCDNを強くお勧めします。 $ 0.04 / GBで、彼らは信じられないほど手頃な価格であり、彼らの速度は途方もなく速いです。適切な量のトラフィックがあるブログは、通常20〜25 GBの帯域幅の範囲にあり、KeyCDNを使用すると、月額5ドル未満の費用になります。

KeyCDNは何年も前から存在しており、そのサービスは非常に信頼性が高く（Cloudflareよりもさらに信頼性が高い）、CDNプロバイダーにとって非常に重要です。 40以上のエッジロケーション、Let's Encrypt SSL、オリジンシールド、およびセキュアトークンを無料で提供します。また、WebPキャッシングも提供します。

KeyCDNの完全なレビューを確認してください。 Perfmattersプラグインを使用して、KeyCDNをWordPressサイトにデプロイすることもできます。

5.画像の最適化

影響：フロントエンドの速度。

画像サイズと配信の最適化は無視できないものです。 HTTPアーカイブによると、2021年2月の時点で、画像はモバイルデバイス上のWebサイトの総ページ重量の平均48％を占めています。これは、ブラウザがダウンロードしてユーザーに配信する必要のあるアセットの半分にかなり近いものです。

そこで、画像圧縮が効果を発揮します。

画像圧縮

圧縮は、データを削除して画像ファイルを小さくする方法です。これは、Webサイトの合計サイズを小さくする最も簡単な方法の1つであり、サウンドシステムを導入すると、最終的には手作業で行うことができます。

フル解像度の画像をウェブサイト、特に小さな共有ウェブホスティングプランの画像にアップロードすると、ウェブサイトの読み込み時間がすぐに遅くなります。一部の画像を品質を低下させることなく圧縮できることに驚かれることでしょう。

ShortPixelWordPressプラグインで不可逆圧縮を使用してすべての画像を圧縮します。これにより、ページの太さが小さくなり、画像の読み込みが速くなり、見た目も美しくなります。ページまたは投稿に追加するすべての画像は、メディアライブラリの舞台裏で自動的に圧縮されます。私の推奨事項は、画像を常に100KB未満に保つことです。

また、.webp画像形式を利用しています。これは、Googleが開発した画像形式であり、PNGやJPGよりもはるかに小さいものです。現在、すべての最新ブラウザでサポートされています。私はすべてのサイトでWebP画像を使用しています。 ShortPixelプラグインはこれを自動的に行うこともできます。

WebPファイル形式はどれくらい小さいですか？たとえば、このブログ投稿の画像の1つを見てください。 PNG画像は60.6KBですが、同じ画像のWebPバージョンは16.3KBです。これはサイズが73.1％減少します。

また、WebP画像の使用をお勧めします。これを行うと、「次世代フォーマットで画像を提供する」という警告が修正されます。

ShortPixelプラグインの設定では、サイトで使用していないサムネイルサイズを除外することも重要です。これにより、クレジットが節約され、画像圧縮が高速化されます。以下に示すように、このサイトでは、 medium 、 medium_large 、 largeを除くすべてを除外します。

私がお勧めする他の画像圧縮プラグインもチェックしてください。

遅延読み込み画像

画像圧縮だけでなく、遅延読み込みを使用して画像の配信を最適化することもできます。これは、ユーザーがページを下にスクロールするまで（画像がビューポート内に入るまで）画像の読み込みを遅らせるか延期する方法です。

なぜこれがうまく機能するのですか？ 50枚の画像を含む長い形式のブログ投稿があるとします。デフォルトでは、誰かがサイトにアクセスすると、ブラウザはそれらの画像の50個すべてをロードします。最適化された画像を使用しても、特にモバイルでは、これには時間がかかる場合があります。

画像を遅延読み込みすると、ユーザーがブラウザに表示するページの上部にのみ画像が読み込まれます。画像の数は、ブラウザの種類、遅延読み込み方法、ビューポートのサイズなどによって異なります。ただし、それでも、通常、画像リクエストの85％以上が削減されるという考えです。

Googleは実際に遅延読み込みを推奨しています。実装しない場合は、「オフスクリーン画像を延期する」という警告が表示されます。

WordPress 5.5+には、デフォルトでネイティブの遅延読み込みがあります。ただし、Perfmattersの遅延読み込みソリューションを使用することをお勧めします。なんで？私たちのソリューションは、ネイティブの遅延読み込みよりも高速で優れているためです。 Perfmattersで遅延読み込みの詳細を読むことができます。

Perfmattersで遅延読み込みを有効にするには、オンに切り替えるだけで準備完了です。

画像の幅と高さ

比較的単純に聞こえるかもしれませんが、CLSを改善し、レイアウトのずれを減らす簡単な方法は、すべての画像に幅と高さの属性が設定されていることを確認することです。画像にこれらの属性がない場合は、Googleから「画像要素に明示的な幅と高さがありません」という警告が表示される可能性があります。

GeneratePressのような適切にコーディングされたテーマは、これらの属性を追加する必要があります。テーマがそうでない場合は、開発者に連絡することをお勧めします。これは、実際にはソースで対処する必要があるためです。または、Perfmattersプラグインを使用して、不足している幅と高さの属性を自動的に追加することもできます。

適切なサイズの画像

発生するもう1つの一般的な警告は、画像のサイズを適切に設定することです。ある時点で新しいWordPressテーマに移動した場合は、おそらくこれが表示されます。

この警告は、ブラウザによって提供されている画像がそのコンテナよりも大きい場合にトリガーされます。これを修正するには、2つの異なる方法があります。

画像のサムネイルを再生成します。かなり迅速かつ簡単です。
小さい画面に小さい画像を強制します。これには少しのコードが必要です。あなたのテーマ開発者はおそらくあなたにこれを提供することができます。

適切なサイズの画像の警告を修正する方法の詳細を確認してください。

重要な画像をプリロードする

主要な画像（折り目の上の画像）をプリロードすると、Core Web Vitalsの最大コンテンツペイント（LCP）時間を短縮できます。これらは通常、ロゴ、ブログ投稿の注目画像、ランディングページのヒーロー画像などの画像です。これらをプリロードすることで、滝の上部に移動し、基本的にこれらが優先されることをブラウザに通知します。すぐにロードする必要があります。

Perfmattersプラグインで画像を手動でプリロードすることも、重要な画像を自動的にプリロードすることもできます。

6.データベースを最適化し、ディスク容量を削減します

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）。

次に行うことは、WordPressデータベースが最適化されており、ディスク領域を浪費していないことを確認することです。

先に進む前に、WordPressサイトのバックアップを取ることをお勧めします。 Kinstaのようなホストを使用している場合は、ワンクリックでスナップショットを撮ることができます。それ以外の場合は、WordPressバックアッププラグインを使用できます。

InnoDBデータベーステーブル

これまでデータベースの最適化を行ったことがない場合、最初に確認する必要があるのは、MyISAMテーブルとInnoDBテーブルが混在していないことです。

長い間、ストレージエンジンにはMyISAMとInnoDBの2種類がありました。 MyISAMは非推奨になり、MySQL 5.5のリリース以降、InnoDBがデフォルトのストレージエンジンになっています。今日でも、古いMyISAMテーブルを使用しているサイトがあります。 InnoDBはそれ自体がはるかに高速であることが証明されており、それをデータベーステーブルに使用する必要があります。

MyISAMをチェックしてInnoDBに変換する方法については、このチュートリアルに従ってください。 WordPressを高速化する簡単な方法となると、これは見過ごされがちな最適化です。

WordPressは車のように扱う必要があります。つまり、オイルの点検やチューニングなどを行います。クリックしてツイート

ページと投稿の改訂

箱から出して、WordPressは、変更を加えたときに投稿とページのリビジョンを保存します。これは、古いバージョンに戻す必要がある場合に便利です。悪いニュースは、保存されるリビジョンの数に制限がないことです。大規模なサイトでは、これによりデータベースがすぐに機能しなくなる可能性があります。実際にいくつのリビジョンが必要ですか？

最初に実行したいのは、古いリビジョンをクリーンアップしてから、今後制限を設けることです。

Perfmattersプラグインは、投稿、ページ、カスタム投稿タイプのリビジョンをクリーンアップおよび削除する簡単な方法を提供します。無料のソリューションをお探しの場合は、WP-Optimizeプラグインも機能します。

以下に示すように、私の場合、630のリビジョンがデータベースに保存されていました。これらはおそらく使用されないので、これらをクリーンアップして新しいスレートから始めることをお勧めします。

古い投稿リビジョンをクリーンアップした後、リビジョンの数を制限する時が来ました。これにより、今後データベースがいっぱいになり始めないようになります。これを行うにはいくつかの方法があります。 Perfmattersプラグインの使用をお勧めします。以下に示すように、シングルクリックでそれらを制限または無効にすることができます。

または、 wp-config.phpファイルに次のコードを追加して手動で行うこともできます。この例では、3つのリビジョンに制限しています。

 define（'AUTOSAVE_INTERVAL'、300）; //秒
define（'WP_POST_REVISIONS'、3）;

'ABSPATH'上にコードを追加することが重要です; そうしないと、機能しません。

リビジョンを完全に無効にすることもできます。

古い画像または未使用の画像を削除する

時間の経過とともに、サーバーのディスク領域を占有している未使用のイメージが存在する可能性があります。これにより、サイトのバックアップを作成する場合でも、さまざまな場所でパフォーマンスの問題が発生する可能性があります。

MediaCleanerプラグインの使用をお勧めします。これは、WordPressサイトで使用されていないエントリ（およびファイル）からメディアライブラリをクリーンアップするのに役立ちます。 これを実行する前に、必ずバックアップを取ってください。

もう1つの注意点は、以前に1つの画像最適化プラグインから別のプラグインに移行したことがあるかどうかです。異なるファイル拡張子を使用するものもあります。たとえば、ImagifyからShortPixelに移行した場合、サイトのアップロードフォルダに.jpg.webpおよび.png.webp拡張子の付いた画像が残っている可能性があります。 This can easily account for hundreds if not thousands of additional images.

You can use a script or connect to your site via SFTP and do a quick search for these extensions and delete them. Make sure to check with your current image optimization solution to confirm which extensions they are using.

Clean up auto-drafts, spam comments, transients, etc.

It's also important to clean up other old data you might have lying around. This includes auto-drafts, spam comments, comments in trash, posts and pages in trash, expired transients, etc. All of these things contribute to a larger WordPress database size.

The database optimization features in our Perfmatters plugin provide is an easy and fast solution for this. Just a few clicks and you're good to go.

Check wp_options table (autoloaded data)

Autoloaded data is a field that accumulates in your wp_options table. Over time, this can quickly bring a WordPress site to a crawl. This data is loaded by plugins on every page of your site. It's healthy to keep this field's total size below 5 MB, or 1 MB if possible. To check the size of autoloaded data on your site, open phpMyAdmin from your hosting provider's control panel and use the following query:

 SELECT SUM(LENGTH(option_value)) as autoload_size FROM wp_options WHERE autoload='yes';

To dive even deeper into this topic, check out this article on how to clean up autoloaded data.

Delete data from old plugins

How many plugins have you tried over the years and removed? Probably a lot. Unfortunately, many plugins don't remove everything when you uninstall them, which leaves you with an ever-growing database.

If it's a well-developed plugin, it should have a clean uninstall option. You can check its documentation. If it has one, you can temporarily install the plugin again and run the uninstaller the right way.

If they don't have a clean uninstall option, you can manually delete the tables from your database. Be careful with this and make sure to take a backup first.

7. Implement web fonts the right way

Impact: Front-end speed.

According to The HTTP Archive, as of February 2021, fonts make up on average 6% of a total website's page weight on mobile devices. While that might seem small, it still impacts how your site loads. There are areas regarding performance that you can't fix on your site, so you should take the wins where you can.

First, I don't recommend using third-party font services such as Adobe Fonts (previously Typekit). In my testing, I saw an additional 300ms delay. Adobe Fonts adds two external HTTP requests, and it also base64 encodes all the font formats. You no longer need to serve all the font formats; you really only need WOFF 2, if you're going for extra compression. WOFF 2 is supported by over 95% of all browsers (source).

Second, many websites use more fonts than they need. Make sure to check how many fonts you are loading. You can easily see this in the GTmetrix waterfall.

Below are a couple of options I recommend for better-performing fonts.

Option 1: System font stack (what I do)

I'll start with my favorite and fastest option you have for web fonts. It's moving to what they call a system font stack.

Big-name brands such as GitHub, Bootstrap, Medium, Ghost, and even your WordPress admin dashboard all use what they call a system font stack. This means they use the fonts on your computer. A few years ago, this wouldn't have looked very good. But with today's newer operating systems, they all have nicer looking fonts pre-installed.

When using a system font stack, there is no need to load any fonts on the page! That is pretty huge! It also eliminates any FOUT (flash of unstyled text) or FOIT (flash of invisible text) ugliness. Our site uses system fonts, and I bet you didn't even notice. それは正しい; this site doesn't load a single font .

You still might want to weigh the pros and cons. Do you want something that looks fancy, or do you want blazing fast? If you're using a theme like GeneratePress, it has a one-click option to use system stack fonts. You can also check out my more in-depth tutorial on how to move to a system font stack.

オプション2：Googleフォント（またはカスタムフォント）をセルフホストする

Google Fontsは無料で非常に人気があり、世界中の4,200万を超えるWebサイトで使用されています（出典）。過去にパフォーマンス上の利点が1つありました。それは、フォントがユーザーのブラウザでGoogleのCDNからすでにキャッシュされている可能性があることです。しかし、当時は過ぎ去りました。

Chrome 86（2020年10月）の時点で、HTTPキャッシュパーティショニングに移行しました。これは、ユーザーのブラウザにキャッシュされているフォントに関係なく、すべてのWebサイトでGoogleFontsが再ダウンロードされることを意味します。 Safariはこれを何年にもわたって行っており、Firefoxはバージョン85（2021年1月）でこれを実装しました。

解決策は、サーバーまたはCDNでGoogleFontsをセルフホストすることです。これにより、GoogleへのDNSルックアップも不要になり、サーバーのキャッシュHTTPヘッダーが自動的に適用されます。

これを行うには、Google Fontsをダウンロードしてサーバーにアップロードし、適切なHTMLとCSSを追加します。ただし、はるかに簡単な方法は、次のプラグインのいずれかを使用してプロセスを自動化することです。

Perfmatters
フォントプラグイン

設定する必要がある2つの重要なものがあります。

font-displayプロパティにはswapを使用します。これは最新のすべてのブラウザでサポートされており、フォントがレンダリングをブロックしないようにします。また、Googleからの「ウェブフォントの読み込み中にテキストが表示されたままになるようにする」という警告も解決されます。

フォントをプリロードして、ページのロード中にすぐに、またはすぐに必要になることを指定します。 Perfmattersプラグインを使用してフォントをプリロードすることもできます。

プレミアムカスタムフォントを使用している場合は、上記と同じ手法を適用することもできます。

GeneratePressユーザー

まだGoogleFontsを外部でホストしたいGeneratePressテーマユーザーの場合、次の手順を実行して、CoreWebVitalsのすべての警告を修正できます。注： GeneratePressは、フォントと表示のスワップをGoogleFontsに自動的に追加します。

サイトのソースコードからGoogleスタイルシートのURLを取得し、Perfmattersプラグインのプリロードセクションに追加します。必ず「スタイル」を選択してください。 URLの例：

 https://fonts.googleapis.com/css?family=Roboto:regular,500,700&display=swap

2.次のURLをPerfmattersの事前接続に追加し、[CrossOrigin]チェックボックスをオンにします。

 https://fonts.gstatic.com

上記は、「レンダリングをブロックするリソースを削除する」という警告と「Webフォントのロード中にテキストが表示されたままになるようにする」という警告の両方を修正します。

8.フォントアイコンを微調整します

影響：フロントエンドの速度。

Font Awesomeは素晴らしいものであり、何百万ものサイトがWeb上でFont Awesomeを使用して、毎日表示されるアイコンを表示しています。ただし、デフォルトでは、サイトのアイコンのライブラリ全体が読み込まれます。

Font Awesomeにアプローチするためのパフォーマンス面での最善の方法は、サイトで使用しているアイコンのみをパッケージ化することです。これは、フォントアイコンをローカルでホストする方法に関する優れたチュートリアルです（必要なものだけ）。

または、GeneratePress with GenerateBlocksなどのテーマを使用している場合は、任意のアイコンのSVGコードを貼り付けることができます。これは素晴らしいです！つまり、アイコンをパッケージ化する必要はありません。必要なものだけを簡単に追加できます。

また、Webフォントアイコンをプリロードする必要があります。それ以外の場合は、「キーリクエストをプリロードする」必要があるというGoogleからの次の警告が表示されます。

WordPressサイトのヘッダーにpreloadタグを追加することで、Webフォントをプリロードできます。次に例を示します。

 <link rel='preload' href='font-icon.ttf' as='font' type='font/ttf' crossorigin>

Perfmattersプラグインでもこれを簡単に行うことができます。

9.JavaScriptを最適化する

影響：フロントエンドの速度。

HTTPアーカイブによると、2021年の時点で、JavaScriptはモバイルデバイス上のWebサイトの総ページ重量の平均22％を占めています。画像とビデオに次いで、JavaScriptはページの重みの3番目に大きいソースです。

以下では、WordPressサイトでJavaScriptを最適化するためのいくつかの異なる方法について詳しく説明します。

プラグインを監査する

JavaScriptの大部分はどこから来ていますか？ 2つの場所：テーマとプラグイン。したがって、最初の推奨事項は、プラグインの監査を行い、プラグインなしで生きることができるプラグインを取り除くことです。

これが私がWordPressを使うのが好きな理由の1つです。物事を成し遂げるには非常に多くの異なる方法があります。 ShopifyやWixなどの別のプラットフォームを使用する場合は、いずれかの方法でそれを実行するのに行き詰まります。それを修正する方法はまったくありません。

何年にもわたって、ここに私が私のサイトで取り除いたいくつかのプラグインがあります：

トップにスクロールボタン：トップにスクロールボタンは、GeneratePressテーマにすでに含まれています。しかし、多くのユーザーがクリックすらしないと思うので、スクロールを完全に上に移動しました。
ブルーム：このプラグインにはリクエストが多すぎるため、MTSWPサブスクライブプロプラグインに切り替えました。
TablePress：優れたプラグインですが、WordPressのブロックエディターにレスポンシブテーブルが追加され、GenerateBlocksも追加されました。
TweetDis：WordPressのソーシャル共有プラグインであるNovashareに切り替えました。これには、より最適化されたコードベースを備えたツイートショートコードとツイートブロックが含まれています。
クレヨンシンタックスハイライト：プラグインなしでネイティブのWordPressコード構文に切り替えました。
マンゴーボタン：GeneratePressテーマでネイティブボタンに切り替えました。
目次プラス：現在、これらをハードコーディングしています。 WordPressブロックエディターにアンカーを追加する簡単な方法が追加されました。

ご覧のとおり、私が必要としなかったプラグインや、より良い代替プラグインがいくつかありました。これらを取り除くことで、サイトでのリクエストと合計ページサイズを大幅に削減しました。すぐにサイトでプラグインの監査と評価を行うことをお勧めします。

ローカルGoogleAnalytics

皮肉なことに、GoogleAnalyticsにはパフォーマンスに関する独自の問題があります。まず、即時のサードパーティDNS要求があります。次に、より重要な問題は、キャッシュの有効期限です。 Googleはキャッシュの有効期限を非常に短く設定しているため、警告が表示される可能性があります。

これらの問題を解決する簡単な方法は、サーバーまたはCDNでローカルにGoogleAnalyticsをホストすることです。これにはいくつかの利点があります。

単一のHTTP/3接続を利用します。
Google Analyticsスクリプトは、サーバーやCDNからキャッシュヘッダーを取得します。
即時のサードパーティリクエストが1つ少なくなります。

アナリティクスをローカルでホストすることは、Googleによって公式にサポートされていませんが、多くの人が何年もの間これを行っています。 Perfmattersプラグインを使用すると、GoogleAnalyticsをローカルで簡単にホストできます。

Perfmattersを使用してローカルでGoogleAnalyticsをホストする

JavaScriptを延期する

JavaScriptの動作の性質上、Googleから「レンダリングをブロックするリソースを削除してください」という警告が表示される可能性があります。これは、JavaScriptファイルがロード時にWordPressサイトのページの最初のペイントを遅くする（ブロックする）ことを意味します。

ページのペイントを高速化する簡単な方法は、重要ではないすべてのJavaScriptを延期することです。これは、ページの残りの部分が読み込まれた後にスクリプトが読み込まれることを意味します。あなたは基本的にそれらを滝の底に押し込んでいます。これは、各JavaScriptファイルにdefer属性を追加することによって行われます。

PerfmattersプラグインでJavaScriptを簡単に延期できます。

ほとんどのサイト、特に大規模なサイトでは、jQueryコア（ jquery.js ）を延期できないことに注意することが重要です。それはすべて、JavaScriptの読み込み順序によって異なります。何かをすぐにロードする必要がある場合は、カスケードエラーが発生します。

JavaScriptを縮小する

縮小化は、コード内のすべての空白を削除するプロセスです。多くの開発者は、事前にスクリプトを縮小します。スクリプトの最後に.min.jsが付いている場合は、これをすばやく見つけることができます。（例： file.min.js ）。したがって、JavaScriptの90％はおそらくすでに縮小されているため、これは大きな優先事項ではありません。

そうは言っても、JavaScriptを縮小することはできます。このために、私は無料のAutoptimizeプラグインをお勧めします。または、Cloudflareを使用している場合は、[速度]→[最適化]タブでJavaScriptの縮小を簡単に有効にできます。

JavaScriptを遅らせる

JavaScriptを延期すると、スクリプトがページの読み込みの一番下にプッシュされますが、代わりに、ユーザーの操作に基づいてJavaScriptを遅らせることもできます。これは、何かがすぐに必要ない場合に、CoreWebVitalsのページのペイントを高速化するための優れた方法です。グーグルアドセンス、グーグルアナリティクス、コンバージョンピクセル（FB、グーグル広告）などの特に重いサードパーティのスクリプト。

また、WooCommerceの一般的なパフォーマンスの問題であるカートフラグメントなどにも最適です。

Perfmattersプラグインを使用したJavaScriptの遅延についての詳細をご覧ください。

未使用のJavaScriptを削除する

次に、「未使用のJavaScriptを削除する」というGoogleからの警告があります。これは、（WordPressテーマまたはプラグインから）ロードされたJavaScriptファイルのすべてのコードがテストしているページで使用されているわけではないことを意味します。

この問題に取り組むにはいくつかの方法があります。しかし、これがどれほど重要かは表現できません。軽量のWordPressテーマとGenerateBlocksのような代替手段のページビルダーを捨てることに関する上記のすべてのアドバイスに従う場合、未使用のJavaScriptは大きな問題にはなりません。

Googleはまず、上記で説明したことをお勧めします。それは、未使用のJavaScriptをロードするWordPressプラグインの数を減らすか切り替えることです。プラグインの数は、それらがどれだけうまくコーディングされているかほど重要ではないことを忘れないでください。

Chrome DevToolsのGoogleのコードカバレッジ機能を使用して、無関係なJavaScriptの追加を担当するテーマまたはプラグインを特定できます。リスト内で、コードカバレッジが赤字になっているスクリプトを探してください。テーマまたはプラグインは、実際にページで使用されている場合にのみスクリプトをキューに入れる必要があります。

そこで、PerfmattersScriptManagerが登場します。ボタンをクリックするだけで、スクリプト、クエリ、インラインCSS / JSを投稿/ページごとに、またはサイト全体で無効にすることができます。プラグイン全体を無効にすることもできます。これは非常に強力であり、サイト（特にホームページ）の速度を大幅に向上させることができます。

スクリプトマネージャーは正規表現もサポートしています。これにより、動的に生成されたアーカイブページ、検索結果などのスクリプトを無効にできます。基本的に、考えられるスクリプトの組み合わせはすべて無効または有効にできます。

サイトを調べて最適化することで、JavaScriptの読み込み量を大幅に減らすことができます。これは未使用のJavaScript警告を完全に修正するわけではありませんが、大いに役立ちます。

PerfmattersプラグインのJavaScript遅延機能を使用して、未使用のJavaScript警告を解決することもできます。

10.CSSを最適化する

影響：フロントエンドの速度。

HTTPアーカイブによると、2021年の時点で、CSSはモバイルデバイス上のWebサイトの総ページ重量の平均4％を占めています。画像、ビデオ、JavaScriptに次いで、CSSはページの重みの4番目に大きいソースです。

以下では、WordPressサイトでCSSを最適化するためのいくつかの異なる方法について詳しく説明します。

カスタムCSSを減らす

最初にすべきことは、WordPressサイトのカスタムCSSを減らすことです。

WordPressカスタマイザーにCSSを追加して、急いでいるときに次の問題に戻るのは自然なことです。ただし、これは、時間の経過とともに、おそらく不要な追加のCSSが蓄積されたことを意味します。または、テーマやプラグインを変更したため、CSSはもう適用できません。今が戻ってそれをきれいにする時です。

また、CSS用のサードパーティプラグインを使用することはお勧めしません。 Simple Custom CSSのようなプラグインは素晴らしいものですが、WordPress Customizerは何年にもわたって非常に優れており、基本的な構文の色付けとエラー修正を行っています。

必要な場合にのみカスタムCSSをロードする

サイトにカスタムCSSを追加する必要がある場合もありますが、必ずしもどこにでもロードする必要はありません。 WordPressカスタマイザーにドロップすると、これは悪いことです！それはあなたのサイト全体にそれをロードするからです。

ここで、GeneratePressとフックが役に立ちます。 GeneratePressを使用してフックを作成し、カスタムCSSを追加して、ロードする場所を選択できます。

たとえば、連絡先ページには、NinjaForms連絡先プラグイン用のカスタムCSSがあります。連絡先ページにのみこのコードをロードするGeneratePressフックがあります。これは、カスタムCSSをロードするための最適な方法です。

CSSを縮小する

JavaScriptのように、多くの開発者は事前にスタイルシートを縮小します。ファイルの最後に.min.cssが付いている場合は、これをすばやく見つけることができます。（例： file.min.css ）。したがって、CSSの90％はおそらくすでに縮小されているため、これは大きな優先事項ではありません。

そうは言っても、CSSを縮小することはできます。このために、私は無料のAutoptimizeプラグインをお勧めします。または、Cloudflareを使用している場合は、[速度]→[最適化]タブでCSSの縮小を簡単に有効にできます。

未使用のCSSを削除する

JavaScriptと同様に、「未使用のCSSを削除する」というGoogleからの警告が表示される場合があります。これは、（WordPressテーマまたはプラグインから）ロードされたCSSファイルのすべてのコードがテストしているページで使用されているわけではないことを意味します。

この問題に取り組むにはいくつかの方法があります。しかし、これがどれほど重要かは表現できません。軽量のWordPressテーマとGenerateBlocksのような代替のページビルダーを捨てることに関する上記のすべてのアドバイスに従う場合、未使用のCSSは大きな問題にはなりません。

Googleはまず、未使用のCSSをロードするWordPressプラグインの数を減らすか切り替えることをお勧めします。プラグインの数は、それらがどれだけうまくコーディングされているかほど重要ではないことを忘れないでください。

Chrome DevToolsのGoogleのコードカバレッジ機能を使用して、無関係なCSSの追加を担当するテーマまたはプラグインを特定できます。リスト内で、コードカバレッジが赤字になっているスクリプトを探してください。テーマまたはプラグインは、ページで実際に使用されている場合にのみスタイルシートをキューに入れる必要があります。

ここでも、PerfmattersScriptManagerが役立ちます。ボタンをクリックするだけで、スクリプト、クエリ、インラインCSS / JSを投稿/ページごとに、またはサイト全体で無効にすることができます。プラグイン全体を無効にすることもできます。

サイトを調べて最適化することで、CSSの読み込み量を大幅に減らすことができます。これは未使用のCSS警告を完全に修正しないかもしれませんが、それは大いに役立ちます。その後、Perfmattersプラグインを使用して、未使用のCSSを自動的に削除できます。これにより、残りの警告がクリアされます。また、CSSに関する「レンダリングブロックリソースの削除」の警告も修正されます。

未使用のCSSを削除すると、FCPとLCPを下げるのにも役立ちます。実際、私のサイトの多くでは、URLが依然として「改善が必要」であり、モバイルおよびコアWebバイタルの全体的なスコアが「良好」またはグリーンであるという違いがありました。

11.HTMLを最適化する

影響：フロントエンドの速度。

HTTPアーカイブによると、2021年の時点で、HTMLはモバイルデバイス上のWebサイトの総ページ重量の平均1.5％を占めています。これは大量ではありませんが、それでも重要です。

以下では、WordPressサイトでHTMLを最適化するためのいくつかの異なる方法について詳しく説明します。

CloudflareエッジからHTMLを提供する

私は上記でこれに触れました。 CloudflareAPOの使用をお勧めします。従来のCDNでは、HTMLはオリジンサーバーから提供され、アセットはCDNから提供されます。 Cloudflare APOを使用すると、アセットとHTMLがCDNから提供されます。 WordPressサイトを静的なHTMLサイトに変換するようなものだと考えてください。これにより、速度がめちゃくちゃ速くなり、TTFBが低くなります。

HTMLを縮小する

JavaScriptやCSSと同様に、HTMLを縮小することができます。このために、私は無料のAutoptimizeプラグインをお勧めします。または、Cloudflareを使用している場合は、[速度]→[最適化]タブでHTMLの縮小を簡単に有効にできます。

12.その他最適化、リソース、およびヒント

私は何千ものWordPressサイトを何年にもわたって最適化してきたので、その他の最適化、ヒント、およびリソースを含む別のセクションを含めると役立つと思いました。これらの多くは、私がクライアントと毎日仕事をしているのを目にするものです。

GoogleAMPは使用しないでください。まず、Google AMPを使用すると、問題のトラブルシューティングが難しくなります。これは、ある意味では、メインサイトからのサイロであるためです。第二に、Google AMPは、エコシステムにあなたを閉じ込めようとするため、移行するのも困難です。その余分な時間を費やして、モバイルユーザーとデスクトップユーザーがレスポンシブサイトを高速化することに集中してください。それは長期的には報われるでしょう。 2021年以降、 GoogleはAMP（ソース）を使用しているユーザーを優遇しなくなりました。
グーグルマップに非常に注意し、これをあなたのサイトのフッターにドロップするだけです。転送サイズが大きいため、パフォーマンスが低下します。 1つのマップが最大26のHTTPリクエストを生成するのを見てきました（これはタイプミスではありません）。 Perfmattersプラグインを使用して、読み込まれるべきではない場所でGoogleマップを無効にすることをお勧めします。または、さらにクリエイティブになり、CTAとGoogleマップへの外部リンクを使用して適切にデザインされた画像に置き換えます。
スライダーを捨てて、代わりに静的ヘッダーを使用してください。スライダーは、特にモバイルでCore Web Vitalsのひどいレイアウトシフト（CLS）を引き起こします。また、コンバージョンに悪影響を及ぼします。
CSSまたはJSを組み合わせないでください。これは、HTTP / 2（現在はHTTP / 3 / QUIC）以降の非推奨の手法です。個々のファイルを並行してロードする方が高速です。また、パフォーマンスの問題のトラブルシューティングがはるかに簡単になります。
ささいなことが重要です。たとえば、「上にスクロール」ボタンをオフにすることにしました。これは、JavaScriptファイルの読み込みが1つ少なくなることを意味します。私はユーザーとして気づきました。私はこれらをクリックすることはありません。
Yellow Labs ToolとWaterfallerを使用して、サイトのコードの監査を行います。これらは、Core Web VitalsやGTmetrixとは異なり、サイトで最適化するための優れた代替ビューになる可能性があります。
CDNからGravatarを読み込み、遅延読み込みします。
GoogleのreCAPTCHAはパフォーマンスキラーです。モバイルのスコアがそれ自体で30ポイント以上低下するのを見てきました。合計サイズ480KBで12個のスクリプトをロードします。これは巨大です。重要なのは、サイト全体で使用しないことです。せいぜい、これが連絡先ページにのみ読み込まれることを確認してください。ただし、ほとんどの連絡先フォームプラグインには、スパム対策とハニーポット対策がすでに組み込まれています。そうでない場合は、WPArmourのような無料のプラグインを使用できます。したがって、reCAPTCHAはまったく使用しないことをお勧めします。
Cloudflareを使用している場合は、RocketLoaderをオフにします。この機能はモバイルサイトの速度を上げるのに役立つはずですが、私が見たのは、モバイルサイトの速度を落とし、問題を引き起こすことだけです。これをオフにすると、サイト（ rocket-loader.min.js ）のリクエストも削除されます。
Cloudflareを使用している場合は、メールアドレスの難読化をオフにします。まず、メールアドレスを目立たない場所に置いてはいけません。スパムを要求しているだけです。お問い合わせフォームは理由があります。次に、この機能をオフにすると、サイト（ email-decode.min.js ）のリクエストも削除されます。

ニュースレター

以下は、ウェブパフォーマンスと開発業界への信じられないほどの洞察を提供するので、購読することをお勧めするいくつかのニュースレターです。

wdrl.info：Web開発関連のリソースの手作りの慎重に選択されたリスト。キュレーションされ、通常は毎週公開されます。 @helloanselmによって実行されます。
weekly.statuscode.com：ブラウザーからメタルに至るまで、Web操作、インフラストラクチャ、パフォーマンス、およびツールに関する週刊ニュースレター。 @petercによって実行されます。
kinsta.com：WordPressのヒントと戦略を掲載した週刊ニュースレターで、ビジネスへのトラフィックと収益を増やしましょう。 Kinstaは高性能のホスティング会社であるため、記事の多くはパフォーマンスに焦点を当てています。
keycdn.com：Webperf、webdev、WordPress、コンテンツ配信、週に1回。
smashingmagazine.com：Smashing Magazineは、プロのWebデザイナーおよび開発者向けのオンラインマガジンです。役立つヒントと貴重なリソースが毎週火曜日に送信されます。

Perfmattersプラグインを利用する

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）。

Perfmattersプラグインは、CoreWebVitalsの警告の多くを解決するのに役立ちます。また、競合他社より優位に立つためにサイトで使用するすべての調整も含まれています。

これらの機能には、上記で詳しく説明したものがあります。

データベースを最適化します（リビジョン、スパム、ゴミ箱、一時的なものなど）。
画像、iframe、YouTube動画などを遅延読み込みします。
リソースをプリロードし、リンクをプリフェッチして瞬時のロード時間を実現します。
JavaScriptを延期して、レンダリングをブロックするリソースを修正します。
未使用のJSSを修正するために、ユーザー操作でJavaScriptを遅延させます。
未使用のCSSを削除します。
スクリプトマネージャーを使用して、投稿/ページごと、またはサイト全体で、スクリプト、クエリ、およびインラインCSS/JSを無効にします。
絵文字、自己ピングバック、XML-RPC、埋め込みなどを無効にします。
GoogleAnalyticsをローカルでホストします。
CDNリライト（お気に入りのCDNプロバイダーを接続します）。
WordPressのログインURLを変更します（ボットのトラフィックを減らし、サイトを保護します）。
WordPressのリビジョンを無効にするか制限します。
頻度を変更するか、HeartbeatAPIを無効にします。これは、admin-ajax.phpの速度低下を修正するのに役立ちます。
自動保存間隔を変更します。

リダイレクトを避ける

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）。

サイトに追加するすべてのリダイレクトは、ほんの少しでもパフォーマンスに影響します。多くの人気のあるWordPressプラグインの大きな問題は、wp_redirect関数（特にNginxで実行されているプラグイン）を使用することです。

つまり、すべての着信リダイレクトは、リクエストを処理して転送するためにサーバー上でPHPコードを実行する必要があります。これは悪くないように聞こえるかもしれませんが、2,000のリダイレクト（これは非常に一般的です）があり、サイトに月に500,000の訪問者がいると想像してください。多くのユーザーがリダイレクトをヒットします。

WordPressリダイレクトを処理するためのより良い方法は、サーバーレベルです。このようにして、レイヤーをバイパスでき、サーバーでコードを実行する必要がありません。

KinstaのようなWordPressホスティングプロバイダーでは、MyKinstaダッシュボードですべてのリダイレクトを管理できます。すべてがサーバーレベルで行われ、WordPressデータベースの肥大化が少なくなります。

WP-CRONを無効にする

影響：フロントエンドとバックエンドの速度（WordPress管理ダッシュボード）。

WP-CRONは、WordPressのタスクスケジューラです。問題は、ページが読み込まれるたびに実行する必要のあるスケジュールされたタスクのリストをチェックすることです。トラフィックの多いサイトでは、これはすぐにパフォーマンスの問題になる可能性があります。ありがたいことに、WP-CRONを無効にして、代わりにサーバーレベル（システム）のcronを使用できます。

注：すべてのWordPressサイトにこれをお勧めするわけではありません。ただし、cronアクティビティが高く、サイトの速度が低下している可能性がある場合は、試してみることをお勧めします。

WP-CRONを無効にするには、 wp-config.phpファイルのすぐ上に次のように追加します。「これですべてです。編集を停止してください。幸せなブログ。」

 define('DISABLE_WP_CRON', true);

無効にした後は、サーバーまたはサードパーティのサービスからwp-cron.phpを呼び出して、WordPressサイトでスケジュールされたタスクが適切に実行されるようにする必要があります。利点は、常にではなく、スケジュールに従って実行できることです。

Kinstaなどのプロバイダーでホスティングしていて、WP-CRONを無効にしている場合、サーバー側のcronは15分ごとにwp-cron.phpを自動的にトリガーします。追加の設定は必要ありません。

詳細については、TomMcfarlinがWordPresscronジョブを適切に設定する方法に関する優れた記事を掲載しています。

13.スピードテストの結果

さて、楽しい部分です。これが私のサイトのいくつかの速度テストの結果です。これらには、ブログ、eコマース、中小企業などが含まれます。これらはすべて、GeneratePressとGenerateBlocksを使用してブロックで完全に構築されました。

Google CoreWebVitalの結果とGTmetrixの結果の両方を含めています。これらは両方とも、最適化を行っているときに改善を測定するために定期的に使用するツールです。 Google CoreWebVitalsがモバイルデバイスからテストをエミュレートしていることを忘れないでください。 GTmetrixテストはデスクトップ上にあります。

woorkup.com

これはブログです。

Google Core Web Vitals

GTmetrix

perfmatters.io

これはeコマースサイトです。

Google Core Web Vitals

GTmetrix

nogluten.com

これは、人気のあるMediavine広告管理ネットワークを使用する重いGoogleAdSenseプロパティです。それは広告からの収入のすべてを作ります。ご覧のとおり、広告を掲載している場合でも、スコアを上げることは可能です。上記のすべての最適化に従うことは、このシナリオではさらに重要になります。

Google Core Web Vitals

GTmetrix

完璧な100スコアを追いかけて時間を無駄にしないでください

数年前、私はPageSpeedのスコアは重要ではないと最初に言いました。そしてそれはその時真実でした。しかし、時代は変わりました。 Google Core Web Vitalsのリリースと、それがランキングファクターになったことで、ある程度の問題によるスコアが得られました。合計読み込み時間の考え方から抜け出し、ページの読み込み方法に焦点を移す必要があります。

幸いなことに、スコアは通常、以前よりも合計読み込み時間との相関が大幅に向上しています。より高いスコアを取得すると、ロード時間が短縮されることを願っています。また、GoogleがCore Web Vitalsに使用しているのは、最近のモバイルについて常に話していることを忘れないでください。

そうは言っても、100点満点を追いかけるのに時間をかけすぎないようにお願いします。私はしません; 私は一般的にしきい値を目指しています。あなたのサイトを過度に最適化するようなものがあります。あなたが環境にやさしいなら、あなたのビジネスを構築するためにあなたの時間を費やしてください。あなたが恐ろしいコンテンツを持っている場合、ランキング要素は何が良いですか？満点を追いかけるのは時間の無駄です。

スコアを超えて考えると、知覚されるパフォーマンスも念頭に置く必要があります。知覚されるパフォーマンスとは、サイトにアクセスする人がサイトをどれだけ速く感じるかを示します。サイトの知覚パフォーマンスが悪い場合、これはサイトでのバウンス率と時間に直接影響を与える可能性があります。そして、これらはGoogleが使用する要素でもあります。

14.サイトを変換するか、パフォーマンス監査を取得します

それでも速度に満足できない場合は、次のことをお勧めします。

サイトをGeneratePress+GenerateBlocksに変換します

まず、肥大化したテーマやページビルダーを使用している場合は、GeneratePress（GenerateBlocksと一緒に）のような軽量のテーマに移行することを常にお勧めします。彼らのコードベースは超軽量で、パフォーマンスを念頭に置いてゼロから開発されました。場合によっては、サイトのベースレイヤーを修正する必要があります。そうすれば、他のすべてが適切に機能します。

自分でこれを行う時間がない場合は、WPBoostersで友達に連絡することをお勧めします。既存のサイトとデザインをGeneratePress+GenerateBlocksに変換できます。

Webパフォーマンス監査を取得する

さらにヘルプが必要な場合は、WordPressサイトの完全なWebパフォーマンス監査を受けることをお勧めします。いつか提供するかもしれませんが、今は時間がありません。今のところ、Webパフォーマンス監査には、CodeableのエキスパートであるMikeAndreasenを強くお勧めします。以下は、マイクの最適化前後のクライアントのサイトの例です。

私はマイクと定期的にチャットしています。彼は、最適化、どのサービスやツールが最も効果的かなど、ほぼすべてに同意する数少ないWebパフォーマンスの人々の1人です。そして、私を信じてください。それはまれです。

彼はクライアントのために1,300以上のプロジェクトを完了しました。グラフ、速度テスト、実際のクライアントのデータをバックアップできるので、彼の仕事を個人的に保証することができます。

概要

WordPressのスピードアップに関しては、フルタイムの仕事のように感じることができます。しかし、そうする必要はありません。ホスティングからテーマやプラグイン、最適化のベストプラクティスに従うまで、最初から適切なソリューションを選択すれば、必要な速度を実現できます。ただし、これらの手順の1つをスキップしようとすると、結果に満足できない可能性があります。

私はほとんどすべてを正しく行う非常に多くのクライアントを見ます。しかし、テーマやページビルダーのコーディングが不十分で、パフォーマンスが低下しています。または、彼らは質の高いテーマを選択しましたが、安価なホスティングプロバイダーを利用しています。上記のすべてのアドバイスに従う必要があります。

Webパフォーマンスはオーケストラのようなものです。すべての部分は、最終的な傑作、この場合はそれらの切望されたスコアを達成する上で重要な役割を果たします。クリックしてツイート

はい、そこにたどり着くまでに少し手間がかかる場合があります。幸いなことに、上記のすべては、今後すべてのWordPressサイトに簡単に適用できます。最終的には、これらのCoreWebVitalsスコアを取得することはそれほど重要ではないという点に到達します。

また、クライアントと一緒に仕事をしている人にとっては難しいかもしれないことも理解しています。彼らが気にするのは、より速いスコアだけです。彼らは、何を成し遂げ、購入し、最適化する必要があるのかを理解していません。私を信じて; 私はあなたの痛みを感じます、そして私はそこにいました。

イライラするクライアントを扱っている場合は、このブログ投稿を転送することをお勧めします。あなたは彼らの反応に驚くかもしれません。また、そこにたどり着くには少しのお金を投資する必要があることを彼らに説明しなければならないかもしれません。魔法のスイッチだけではないことを彼らが理解したら、あなたはひっくり返すことができます。あなたは進歩を始めることができます。

私は継続的に更新しているので、この投稿をブックマークしてください。これから私が行うことはすべて、Perfmattersプラグインの開発を含め、Google CoreWebVitalsに完全に焦点を合わせています。

うまくいけば、WordPressを高速化する方法に関するヒントや推奨事項のいくつかが、あなたにとって役立つか、目を見張るものになっています。以下のフィードバックをお待ちしています。