Divi Speed Optimization：究極のガイド

公開: 2021-08-25

Diviは単なるページビルダーではありません。 Diviは、Webサイトのすべての部分を視覚的に設計できる完全なWeb設計システムにより、設計プロセスをまったく新しいレベルに引き上げます。しかし、それはDiviが遅くなければならないという意味ではありません。それからは程遠い。

Diviに組み込まれている速度とパフォーマンスの最適化機能により、サイトをGooglePageSpeedスコアのリストの一番上に簡単に配置できます。ダイナミックモジュールフレームワーク、ダイナミックCSS、ダイナミックJavaScriptライブラリなどの機能を備えたDiviは、堅牢なページビルダーであり、軽量のテーマでもあります。しかし、Diviと同じくらい速く、最適化を必要とする他の根本的な要因があります。また、対処しないと、Diviサイトの速度が不必要に低下します。

この投稿では、Diviを高速化するためにすでに行われていることと、それをさらに高速化するために何ができるかを探ります。ここで取り上げる重要なトピックは次のとおりです。

WordPressのパフォーマンスとDiviのパフォーマンス
Diviの組み込みの速度とパフォーマンスの最適化機能
動的モジュールフレームワーク
動的JavaScriptライブラリ
jQueryとjQueryMigrateを延期する
動的CSS
重要なCSS
臨界しきい値の高さ
動的インラインスタイルシートをロードする
GoogleFontsの読み込みを改善する
WordPressの絵文字を無効にする
グーテンベルクブロックCSSを延期する
動的アイコン
レスポンシブ画像のネイティブSrcsetサポート
DiviWebサイトの速度とパフォーマンスを最適化するためにできる14のこと
＃1ホスティングをアップグレードする
＃2TTFB最適化
＃3サイトのデータベースを最適化する
＃4DNSを最適化する
＃5コンテンツ配信ネットワーク（CDN）を使用する
＃6キャッシュを追加
＃7縮小と集約を追加する
＃8Gzip圧縮を有効にする
＃9画像の最適化
＃10ビデオの最適化
＃11スピードのためにDiviページを作成する
＃12プラグインを慎重かつ慎重に使用する
＃13速度テストを実施する
＃14Divi高速ページの青写真を検討する
Diviおよびその他のサードパーティパフォーマンスプラグインの使用
その他のヒント

WordPressのパフォーマンスとDiviのパフォーマンス

多くの場合、DiviはWebサイトのパフォーマンスの主な決定要因ではありません。それはパズルの一部にすぎません。また、一般的にWordPressサイトの根本的な最適化のニーズを考慮する必要があります。 Divi（Diviテーマおよび/またはDivi Builder）は、ホスティングインフラストラクチャの上にあるサーバーソフトウェアのスタックの上にあるWordPress（CMS）の上にあります。これらすべてを正しく調整する必要があります。手始めに、これらには、優れたホスティング、キャッシング、CDNなどが含まれます。これらの基礎となる最適化が適切に行われていないと、Diviをどれだけ適切に最適化しても、Diviサイトの速度は低下します。したがって、Divi Webサイトが非常に遅い場合は、これらの他のパズルのピースも考慮する必要があります。

WordPress Webサイトの基本的な最適化のニーズがあるため、Diviのパフォーマンスの最適化に取り組む必要があります。これは、DiviテーマやDivi Builderのパフォーマンスを強化し、WordPress上に構築された領域とWordPress内で機能する領域で最適に動作することを確認することによって行われます。これらすべての要素が最適化されると、最適な速度とパフォーマンスでDiviWebサイトを正常に構築できます。

以下の記事の残りの部分では、最初にDiviの組み込みのパフォーマンス最適化について説明します（すでに行われていること）。次に、いくつかの根本的な最適化のニーズ（実行できる追加のこと）に対処することにより、Diviサイトをさらに最適化する方法について説明します。

Diviの組み込みの速度とパフォーマンスの最適化機能

まず、Diviがすでに備えている組み込みの速度とパフォーマンスの最適化のいくつかを見てみましょう。これらの最適化機能により、Diviはあらゆる角度から高速化され、おそらく市場で最速のページビルダーになります。しかし、それだけではありません。 Diviは、肥大化を排除する動的フレームワークで構築されており、Webサイトに肥大化を追加することなく、より多くのモジュールと機能でDiviを成長させるための基盤を提供します。これにより、両方の長所が得られます。軽量テーマの敏捷性を備えた拡張ページビルダーのパワーです。

パフォーマンス最適化機能は、Divi>テーマオプションに移動することで管理できます。 [全般]タブで、[パフォーマンス]サブタブを選択します。

divi速度の最適化

それでは、超高速のDiviWebサイトを簡単に構築できるようにする機能を詳しく見ていきましょう。

動的モジュールフレームワーク

動的モジュールフレームワーク機能は、PHP関数をオンデマンドで選択して実行することにより、強力な方法でサイトの速度を向上させます。 Diviは、各ページで使用されるモジュールと機能のみをオンザフライでレンダリングするために必要なロジックを処理します。それ以外はすべて方程式から除外されます。つまり、「膨張」と見なされる可能性のあるものはすべて、バックエンドから消去されます。

モジュールオンデマンド

たとえば、ページに3つのモジュールがある場合、Diviは、使用されているモジュールに関係なく、すべてのモジュールのすべての機能を処理するのではなく、それらの3つのモジュールに必要な機能のみを処理します。これらの3つの関数は、処理時間を無駄にすることなく、そのモジュールのショートコード/ HTMLをページにレンダリングします。

divi速度の最適化

オンデマンド機能

Diviがオンデマンドでモジュールを動的に処理およびロードするのと同様に、Diviはページで使用されるすべての機能に対して同じことを行います。 Divi要素で使用できるすべての可能な機能（スクロール効果、アニメーション、スティッキーオプション、境界線オプションなど）の関数を処理する代わりに、Diviは要素で実際に使用されている機能関数のみを処理します。この機能は、モジュールだけでなく、セクション、行、列などのDivi要素にも適用されます。

diviの膨満感防止機能により、サイトの速度が向上します

動的Javascriptライブラリ

サイトの速度を上げるために、DiviのJavaScriptをより簡潔でモジュール化されるように最適化しました。これにより、DiviはJavaScriptをオンデマンドで動的にロードできます。 Diviは、ページ上のモジュールまたは機能で必要な場合にのみ、JavaScript関数（スティッキーオプションなど）および外部JavaScriptライブラリ（マグニフィックポップアップなど）をロードして処理します。

動的JavaScriptライブラリと組み合わせたより小さなベースJavascriptファイルサイズは、ページの読み込みごとに処理するコードが少ないという理由だけで、サイトの速度を確実に向上させます。未使用のスクリプトは削除されます。また、この肥大化防止ロジックはページごとに発生するため、1つのページにスティッキー行がある場合、スティッキーJavaScriptがページにロードされていることを心配する必要はありません。これがDiviの動的JavaScriptの美しさです。

例：ライトボックスを使用した画像モジュールの動的JavaScriptライブラリ

ライトボックスが有効になっている画像モジュールを含むページがあるとします。 Diviは、ライトボックスポップアップ機能を適用するために、そのページのMagnific PopupJSライブラリを動的にポイントして実行します。画像でライトボックスが無効になっている場合、JSライブラリはページで読み込まれたり実行されたりしません。

diviの膨満感防止機能により、サイトの速度が向上します

jQueryとjQueryMigrateを延期する

可能な場合、jQueryとjQuery Migrateは本体に移動され、レンダリングブロック要求が削除され、読み込み時間が短縮されます。以下の図に示すように、jQueryスクリプトが（ヘッダーに）早期にロードされると、スクリプトが実行されるまでHTMLの解析が一時停止します。これにより、ページのレンダリングが遅くなります

divi速度の最適化

一方、サードパーティのプラグインがjQueryを依存関係として登録する場合は、競合を避けるために先頭に戻されます。問題が発生する場合は、このオプションを無効にすることができます。

動的CSS

動的CSSは、（動的モジュールフレームワークで使用される）同じ膨満感防止ロジックをDiviのスタイルシートに適用します。ご想像のとおり、Diviのメインスタイルシートは、すべての機能を考慮するとかなり大きくなります。ただし、すべてのページに大きなスタイルシートをロードすると、不必要に肥大化し、ページのロード時間が遅くなります。

動的CSSを使用すると、DiviのCSSは数百の小さなコンポーネントに分割されます。各ページで、これらのCSSコンポーネントが組み合わされて、使用しているモジュール、モジュール機能、およびテーマレイアウトオプションに基づいて特定のページのスタイルを設定するために必要な部分のみを含む一意のスタイルシートが形成されます。

diviの膨満感防止機能により、サイトの速度が向上します

これにより、CSSの肥大化の問題が修正されます。これは、CSSが存在しないためです。他のCSSがロードされていないため、肥大化はありません。動的CSSがない場合、Diviのスタイルシートは約900kbになり、コンテンツに関係なくすべてのページにロードされます。これで、ページに80kbのCSSのみが必要な場合、Dynamic CSSは、ページをロードする必要のない800 + kbを排除します。つまり、ページの読み込みがさらに速くなります。

重要なCSS

DiviのCriticalCSSシステムは、スクロールしなければ見えない位置にあるコンテンツのスタイルを設定するために必要なCSSを特定し、それ以外はすべて延期することで、サイトの速度を向上させます。ページが最初に読み込まれるときに必要なのは重要なスタイルのみであり、レンダリングブロックアセットはページの速度に非常に重要な役割を果たすため、重要なスタイルと重要でないスタイルを自動的に分離するDiviの機能は、他のWordPressテーマやビルダーよりも大きな利点があります。。 DiviがCSSの処理を完了した後、Webサイトのヘッダーにはほとんど何も残っていません。つまり、コンテンツがすぐに表示されます。そのため、GoogleはDiviWebサイトに箱から出してすぐにそのような高得点を与えます。

たとえば、折り畳み上のコンテンツがタイトル、段落、ボタン、画像で構成されている場合、訪問者がページを読み込むとすぐに、これらの要素に関連するCSSのみが読み込まれます。もちろん、CSSの残りの部分もロードされますが、最初の対話ではロードされません。それが非クリティカルCSSと呼ばれるものです。

diviクリティカルCSS

この機能の仕組みと使用方法の詳細については、Diviの重要なCSS機能がサイトの速度を向上させる方法と最速のDiviページを作成する方法に関する記事をご覧ください。

臨界しきい値の高さ

クリティカルCSSに関連するのは、クリティカルしきい値の高さオプションです。

クリティカルCSSが有効になっている場合、Diviは「フォールドを超えるしきい値」を決定し、フォールドより下の要素のすべてのスタイルを延期します。ただし、このしきい値は単なる推定値であり、デバイスによって異なる場合があります。しきい値の高さを増やすと、延期されるスタイルが少なくなり、ロード時間がわずかに遅くなりますが、累積レイアウトシフト（CLS）が発生する可能性は低くなります。 CLSの問題が発生している場合は、しきい値の高さを増やすことができます。

動的インラインスタイルシートをロードする

Load Dynamic In-Line Stylesheetオプションは、すべてのレンダリングブロックCSS要求を削除する最後のCSS最適化です。

動的CSSにより、ベースのDiviスタイルシートは実際のページにインラインでロードできるほど小さくなりました。このCSSをインラインでロードすると、レンダリングブロックリクエストが削除され、GooglePageSpeedスコアが向上します。重要なCSS、動的CSS、および動的インラインスタイルシートのロードオプションが有効になっている場合、すべてのレンダリングブロックCSS要求が削除されます。

GoogleFontsの読み込みを改善する

[Google Fontsの読み込みを改善]オプションを使用すると、Google Fontsのキャッシュが有効になり、ヘッダーにインラインで読み込まれます。これにより、レンダリングブロッキング要求が減り、読み込み時間が短縮されます。

また、[レガシーブラウザのGoogleFontsサポートを制限する]オプションを追加しました。

これは基本的に、ペイロードを減らすためにレガシーフォントファイルを削除します。このオプションを有効にすると、Google Fontsのサイズが小さくなり、読み込み時間が改善されますが、一部の非常に古いブラウザでのGoogleFontsのサポートが制限されます。これをオフにすると、パフォーマンスをわずかに犠牲にして、古いブラウザのサポートを増やすことができます。

WordPressの絵文字を無効にする

WordPressにはネイティブの絵文字システムが付属していますが、最近のブラウザではネイティブの絵文字がサポートされているため、これは実際にはもう必要ありません。実際、ネイティブの絵文字はWordPressバージョンよりもはるかに見栄えがします。 Diviには、ネイティブのWordPress絵文字を無効にするオプションがあり、不要なリソースが削除されます。また、レンダリングするリソースが少ないと、ページの読み込みが速くなります。

グーテンベルクブロックCSSを延期する

ページでDiviBuilderを使用する場合、デフォルトのWordPressブロックエディター（Gutenberg）を使用しないことも選択しています。また、ブロックを使用してページのスタイルを設定することはないため、GutenbergCSSレンダリングを使用する必要はありません。Diviページの読み込みをブロックします。 Defer Gutenberg Block CSSオプションを有効にすると、Diviは（デフォルトで）代わりにDiviBuilderを使用しているページにGutenbergブロックCSSを遅延ロードします。念のため（フッターに）ロードされますが、レンダリングがブロックされなくなります。

動的アイコン

Diviには、使用しているモジュールと機能に基づいてオンデマンドでロードされるアイコンフォントサブセットが付属しています。これにより、Diviのベースアイコンのフォントサイズが90kbから6kbに減少します。完全なアイコンセットは、必要な場合にのみロードされます。子テーマまたはカスタムDiviモジュールを使用している場合、このオプションはデフォルトで無効になっています。子テーマまたはサードパートのDiviモジュールが完全なDiviアイコンセットを使用している場合、このオプションは無効のままにしておく必要があります。

ページのニーズに基づいて使用される3つのアイコンフォントサブセットがあります。

ベース–このサブセットには、Diviテーマとそのモジュールでデフォルトで使用されるすべてのアイコンが含まれています。
ソーシャル–このサブセットには、すべてのベースアイコンと、ソーシャルメディアフォローモジュールが使用されたときに読み込まれるすべてのソーシャルアイコンが含まれます。
すべて–これは、Diviモジュールのアイコンピッカーを使用してカスタムアイコンを選択するときに使用されるアイコンセット全体です。

これは、ページにソーシャルメディアフォローモジュールが存在するために動的にロードされるソーシャルアイコンフォントサブセットの例です。

すべてのページでアイコンフォント全体にアクセスする必要がある場合（たとえば、子テーマでアイコンフォントを使用している場合）、このオプションを無効にして、すべてのページでアイコンフォントライブラリ全体を読み込むことができます。

レスポンシブ画像のネイティブSrcsetサポート

divi速度の最適化

Diviには、すべてのDivi画像に対するネイティブSRCSETサポートが含まれています。つまり、Diviは画像を自動的にレスポンシブにし、各デバイスに完全なサイズの画像を提供します。小さい画像は小さいデバイスに提供されるため、読み込み速度が大幅に向上し、追加の作業は必要ありません。

DiviWebサイトの速度とパフォーマンスを最適化するためにできる14のこと

速度の最適化は、検索エンジン最適化（SEO）だけでなく、Webサイトのユーザーエクスペリエンスにおいても重要な役割を果たし続けています。したがって、訪問者とGoogleに対してDiviサイトのパフォーマンスを向上させるには、サイトの速度をさらに最適化するDivi以外の領域に対処する必要があります。

DiviWebサイトの速度とパフォーマンスを最適化するためにできる14のことを次に示します…

＃1ホスティングをアップグレードする

あなたがあなたのウェブサイトの速度（そしてパフォーマンス）について全く真剣であるならば、それは良いホスティングプロバイダーを選ぶことから始まります。実際、あなたはあなたのウェブサイトをスピードのために最適化するためにすべてを正しくすることができます、そしてあなたのホストのためにまだ遅いサイトを持っています。そして、本当に優れたホスティングプロバイダーはあなたのためにそれらの速度の最適化の多くを行うので、あなたはそれについて心配する必要はありません。したがって、Diviサイトの速度が遅い場合、最初のステップはホスティングのアップグレードを検討することです。

Divi最適化ホスティングを使用する

高速なDiviWebサイトが必要な場合は、WordPressだけでなくDiviにも最適化されたホスティングプロバイダーを選択するのが理にかなっています。したがって、Diviと完璧に連携し、Diviの自動インストールが付属する、優れたWordPressホスティングをお探しの場合は、DiviHostingが優れた新しいソリューションです。私たちはお気に入りのWordPressホスト（Pressable、Flywheel、SiteGround）のいくつかと提携して、Diviのすべての要件を満たす最新のホスティングインフラストラクチャに支えられ、主要なWordPressプロフェッショナルによってサポートされている、高速なDiviWebサイトを作成する簡単な方法をDiviの顧客に提供しました。

なぜDiviホスティングを選ぶのですか？

最終的に、すべてのDiviユーザーはホスティングについて選択する必要があります。間違った選択をすると、多くの悲しみにつながる可能性があります。その選択を簡単にしたいのです。 DiviHostingをユニークにするいくつかの点を次に示します。

Webサイトを作成すると、Diviが自動的にインストールされます。
新しいWebサイトは自動的にElegantThemesアカウントに接続され、ライセンスキーで設定されるため、更新とサポートを受けることができます。
ホスティング環境は、Diviが推奨するPHP設定をすべて満たすように構成されます。調整は必要ありません。
ウェブサイトは、高速で最新のホスティングインフラストラクチャを利用します。つまり、読み込み時間が短縮され、自動キャッシュやCDNなどの最新のツールが利用できます。
あなたはWordPressの内外を知っている会社によってホストされます。
あなたは私たちのパートナーの1人によってホストされます。つまり、彼らは彼らのシステムで素晴らしいDivi体験を保証することに専念しています。

そこにはたくさんのホスティングオプションがあり、それらはすべて同じように作成されているわけではありません。私たちは、お客様が非常に苛立たしい可能性のあるホスティング関連の互換性の問題に毎日対処するのを支援します。誰もがDiviを使用するためにホスティングを必要とし、あなたのホスティング体験は苦労する必要はありません。詳細については、DiviホスティングがDiviに最適なホスティングソリューションである方法をご覧ください。

あなたのDiviサイトに適したホスティングソリューションを見つける

あなたはn個の高速ディビのウェブサイトを持っているホスティングディビを使用するEEDますか？絶対違う。そこには他にも素晴らしいホスティングソリューションがあり、Diviは常に素晴らしいホスティング環境でうまく機能します。ただし、ホスティングは速度とパフォーマンスの最適化において非常に重要な役割を果たしているため、Diviサイトに適したホスティングソリューションを見つけるために必要な時間をかける必要があります。

そこには素晴らしいホスティング会社とそれほど素晴らしいホスティング会社がたくさんあります。そして、それぞれが通常、複数のホスティングソリューションとサービスを提供します。したがって、適切なものを見つけることは圧倒される可能性があります。以下は、Diviサイトに適したホスティングソリューションを見つける際に考慮すべき最も一般的なタイプのホスティングに関するいくつかの役立つ情報です。

従来の（共有）ホスティング（非推奨）

これは、最も手頃な価格であるため、WordPressユーザーにとって圧倒的に最も人気のあるタイプのホスティングです。しかし残念ながら、これは速度最適化の最悪のオプションです。従来の共有ホスティングでは、サーバーで利用可能なすべてのリソースを他のユーザーと共有します。あなたが共有しているので、この種のホスティングのコストは低いです。ただし、欠点は、他のサイトが共有サーバーで取得するトラフィックの量を制御できないことです。そのため、読み込み時間が非常に遅い期間や、サイトが完全にダウンしている場合でも、簡単に餌食になる可能性があります。したがって、共有ホスティングが処理できるトラフィックの量を把握しておくことをお勧めします。

専用ホスティング

専用ホスティングを使用すると、あなただけの専用サーバーがあります。他の人とリソースを共有する必要はありません。これは、ウェブサイトの読み込み時間がより予測可能で一貫していることを意味します。これは通常、高額な保険料で大企業向けのトップクラスのオプションとして提供されます。

VPSホスティング

仮想プライベートサーバー（VPS）ホスティングは、基本的に共有ホスティングと専用ホスティングの中間です。サーバースペースは「プライベート」です。つまり、他のすべてのユーザーから完全に分離されています（サイトファイルのゲートコミュニティのようなものです）。したがって、サイトファイルはサーバー上の他のユーザーに公開されません。共有ホスティングとは異なり、VPSには専用の数のシステムリソース（または電源）があり、サイトが常に高速ロード時間を一貫して提供するために必要なものを確実に取得できるようになっています。したがって、他のWebサイトのトラフィックの急増がサイトの速度に影響を与えることを心配する必要はありません。

ただし、マネージドVPSがない限り、この種のホスティングは主に、自分で処理するのに十分な技術に精通しているDIYタイプ向けです。詳細については、VPSホスティングと共有ホスティングのパフォーマンスの比較をご覧ください。

クラウドホスティング

クラウドホスティングを使用すると、単一の物理サーバーではなく、（クラウド内の）サーバーのネットワークにアクセスできます。これにより、必要に応じて、このサーバーネットワークから必要なすべてのリソースを引き出すことができます。基本的に、ネットワーク全体の電力とリソースに支えられたサーバースペースの仮想パーティションがあります。したがって、共有ホスティングの場合のようにトラフィックの急増を心配する必要はありません。クラウドホスティングは非常に柔軟で、ニーズに合わせてスケーラブルです。

クラウドホスティングとVPSホスティングの主な違いの1つは、VPSホスティングには専用の（または限られた）数のリソースがあり、そこからプルするリソースが枯渇する場合としない場合があることです。一方、クラウドホスティングは、クラウド内の他のサーバーからいつでもプルできるため、リソースを使い果たすことなく利用できるようにすることができます。理論的には、クラウドホスティングはより一貫性のある信頼性の高い高速を提供します。したがって、速度を真剣に考えているのであれば、クラウドホスティングは素晴らしいオプションです（おそらく最高です）。

マネージドWordPressホスティング

マネージドWordPressホスティングは通常、WordPressの専門家によって管理される共有ホスティングを指します。通常、従来の共有ホスティングよりも少しコストがかかりますが、より高速なDiviサイトが必要な場合は、マネージドWordPressホスティングの価値があります。 VPSほど「プライベート」ではなく、専用ホスティング環境ほど強力ではありません。ただし、WordPressの専門家に作業を依頼することで、共有環境の速度を最大化するのに役立ちます。彼らはサービスを調整し、WordPressサイト用にサーバーを厳密に構成しているため、これをうまく行っています。そして、それらの多くには、ワンクリックステージング環境、サイトキャッシュ、ワンクリックCDN展開、自動バックアップ、SSLなどの多くのクールで便利な組み込み機能が付属しています。これらは、基本的な速度の最適化、セキュリティ、および管理のために多数のプラグインに依存（または管理）したくない私たちに最適です。

実際、Divi Hostingは、Divi用に最適化されたマネージドWordPressホスティングです。これにより、Diviサイトのホスティング環境の最適化からすべての頭痛の種が取り除かれます。

＃2最初のバイトまでの時間を最適化（TTFB）

divi速度の最適化

TTFBとは何ですか？

最初のバイトまでの時間（TTFB）は、ユーザーがホスト/サーバーからWebサイトデータの最初のバイトを受信するのにかかる時間です。したがって、ユーザーがHTTPリクエストを行う（Webページをロードする）と、TTFBは基本的に、ブラウザーがデータを受信するまでの待機期間になります。 TTFBが長いほど、ページの読み込みに時間がかかるため、これは重要です。

ファーストフードを食べるようなものだと考えてください。レストランはあなたの食べ物を早く届けるように最適化されているかもしれません。実際、彼らはすでにあなたを待っているハンバーガーを持っているかもしれません。しかし、あなたはまだ注文するために並んで待つ必要があります。その待機期間は、最初に噛む時間と考えることができます（私がそこで何をしたかを参照してください）。

TTFBは約200msである必要があります（Googleによると）。ただし、ホスティングが不十分で最適化されていないサイトの場合、TTFBは簡単に2秒以上になる可能性があります。

TTFBが遅くなる原因は何ですか？

DiviサイトでのTTFBの遅延は、通常、次の原因で発生します。

受信する必要のある動的コンテンツの量。これは、キャッシング、データベースの最適化、およびCDNによって削減できます。
サーバーがその時点で経験しているトラフィックの量。従来の（または共有）ホスティングプロバイダーでは、同じサーバー上の他のユーザーとリソースを共有しているため、そのTTFBを停止することは困難です。トラフィックの急増により、サーバーの処理速度が低下します。
Webサーバーの構成。優れたWordPressホスティングプロバイダーは、堅固なバックエンドインフラストラクチャを提供し、Webサーバー構成を最適化することでサイトのTTFBを支援できます（ほとんど制御できません）。

DiviサイトのTTFBを高速化する方法

TTFBは、Googleがサイトのランキングを決定するために使用するWeb Vitals（FCP、LCP、およびCLSとともに）の1つです。したがって、それを最適化することが重要です。良いニュースは、TTFBを最適化できることです。 TTFBを減らすために使用できるいくつかの重要なヒントを次に示します。

ホスティングをアップグレードします。 TTFBを強化する最も効果的な方法は、単にホスティングをアップグレードすることです。 WordPressまたはDiviHostingのマネージドホスティングにもう少しお金を払うと、すぐにTTFBに最大の影響があります。
CDNを使用します。これにより、訪問者は最も近いサーバーからサイトのデータをロードできるため、待ち時間を短縮し、TTFBを削減できます。
不要なプラグインやテーマを削除します。プラグインとテーマ（特に古いもの）は、サイトのサーバーと読み込み時間（TTFBを含む）を低下させる可能性があります。したがって、本質的な品質のプラグイン（またはテーマ）のみを使用し、他のプラグインを削除することをお勧めします。
キャッシングを実装します。 Diviには、DiviJSとCSSを配信するためのキャッシュが組み込まれています。ただし、CDNの使用に加えて、Webサイト全体をキャッシュすると、TTFBが減少します。

Cloudflareを使用してTTFBをブースト

サイトのTTFBをすばやくブーストする1つの方法は、Cloudflareを使用することです。無料プランで利用できるキャッシングとCDNは、間違いなくTTFBを後押しします。 TTFBの72％の削減を示すためにテストされたCloudflareの自動プラットフォーム最適化を利用することもできます。

詳細については、TTFBに関する完全な記事と、それに合わせてWebサイトを最適化する方法を確認してください。

＃3サイトのデータベースを最適化する

divi速度の最適化

WordPressサイトにクリーンなデータベースが必要な理由

静的HTMLサイトとは異なり、WordPressは動的CMSであり、PHPを使用してMySQLデータベースに格納されているデータを取得し、そのデータをWebページに表示します。これにより、サイトの管理が簡単になりますが、ページをロードする前にデータベース内のデータを見つける必要があるため、ページのロードに時間がかかるという欠点があります。一般に、静的HTML Webサイトは、この理由からWordPressWebサイトよりも高速です。

Diviサイトをできるだけ速く保つ1つの方法は、クリーンなデータベースがあることを確認することです。 WordPressサイトファイルはデータベース内でテーブルごとに整理されており、サイトに新しいデータ（テーマやプラグインなど）を追加するたびに、新しいテーブルとより多くのデータを作成します。ご想像のとおり、データベースが乱雑になるほど、データを見つけるのが難しくなります。これにより、Webサイトの速度が低下します。

したがって、他のテーマや無数のプラグインを何年も試した後、DiviテーマをWebサイトに追加した場合、不要になったデータが保存されている可能性があります。プラグインをアンインストールしても、データベース内のすべてのデータが失われるわけではありません。プラグインは、プラグインを再インストールした場合に備えて、そこにいくつかのデータを残すことを好みます。かっこいいじゃない、わかってる。この残りのデータは、不要な混乱を招き、サイトの速度を低下させる可能性があります。

すべての人間がより効率的に作業するために組織を必要とするように、すべてのWordPressサイト（Diviかどうかに関係なく）は、ページをより速くロードするためにクリーンなデータベースを必要とします。したがって、あなたがしばらくの間あなたのウェブサイトを持っていたならば、それをきれいにすることは物事をかなりスピードアップすることができます。

Diviサイトのデータベースを最適化する方法

このためのプラグインを使用することをお勧めします。 WPオプティマイズは信頼できるオプションのようです。しかし、考慮すべき他のWordPressデータベースプラグインがあります。

または、自分が何をしているのかがわかっている場合は、MySQLでいつでも手動で行うことができます。

WordPressデータベースのクリーンアップに加えて、保存するデータを削減することでWordPressをさらに軽量化することもできます。たとえば、WordPressは削除されたアイテムを自動的にゴミ箱に30日間保持します。その期間を7に短縮することをお勧めします。

＃4DNSを最適化する

divi速度の最適化

DNSがサイトの速度に与える影響

ユーザーがWebページの1つへのURLにアクセスしたときに最初に発生する必要があるのは、DNSルックアップです。 URLが入力（またはクリック）されるとすぐに、訪問者のISPはDNSクエリをネームサーバーに送信して、ドメインに関連付けられているIPアドレスを見つけます（すべてのドメイン/ Webサイトには特定のIPアドレスがあります）。本質的に、DNSルックアップは、電話帳でドメイン名を検索して、そのドメインのIPアドレスを見つけるようなものです。

ただし、ユーザーがサイトのページにアクセスすると、ページをプルアップするためにアクセスする必要のある複数のドメインがページに含まれている場合があります。したがって、1回のページ読み込みで3つまたは4つのドメインルックアップを実行できます（おそらくそれ以上）。

一般的に言って、GodaddyやNamecheapのようなほとんどの無料のDNSプロバイダーは、おそらくあなたが望むよりも遅いでしょう。

DNS最適化のためのCloudflareの使用（および必要に応じてさらに）

DNSルックアップ速度を向上させる最良の無料オプションはおそらくCloudflareです。 DNSPerf.comに記録されているDNSパフォーマンスが最速です。これは、GoDaddyやNamecheapよりも大幅に高速になります。また、必要に応じて、Cloudflareを他のサービス（CDNやWAFなど）なしでDNSに使用するように最適化することもできます。

たとえば、DNSとセキュリティ（DDOS検出）にCloudflareを使用し、CDNにKeyCDN（またはMaxCDN）を使用したい場合があります。それは素晴らしい組み合わせになるようです。

Cloudflareの設定

Cloudflareは本当に簡単にセットアップできます。事前にホスティングなどを切り替えることを心配する必要はありません。あなたがする必要があるのはあなたのドメインを入力することから始まる彼らの5分のセットアップを通して歩くことです。

divi速度の最適化

現在のDNSレコードを自動的に取得します。

divi速度の最適化

セットアップを完了するために必要な主なことは、現在のDNSプロバイダー（GoDaddyなど）のデフォルトのネームサーバーをCloudflareのネームサーバーに変更することです。

divi速度の最適化

次に、ダッシュボードからDNSを簡単に管理できます。

divi速度の最適化

そして、まさにそのように、DNSルックアップ速度、セキュリティの向上、およびWebサイトのCDN（およびそれ以上）が向上します。

CDNと言えば、間違いなくそのうちの1つを使用する必要があります。

＃5コンテンツ配信ネットワーク（CDN）を使用する

StackPath CDN PoP

コンテンツ配信ネットワーク（CDN）は、サイトの速度を別のレベルに引き上げます。名前が示すように、CDNはコンテンツを配信するためのネットワークです。ネットワークは、Webサイトコンテンツのキャッシュされた静的ファイル（画像、ビデオ、スクリプトなど）を保存する世界中のサーバーで構成されています。次に、人が（Webサイトにアクセスして）そのコンテンツの要求を送信すると、その人に最も近いサーバー（またはPoP）がコンテンツを配信します。 CDNがないと、Webサイトファイルは1つのサーバーの場所（ホストがそれらのファイルを保存している場所）からアクセスできるため、サーバーから離れるほど、そのWebサイトコンテンツのブラウザーへの配信が遅くなります。

考えてみてください。ピザを家に配達したいときは、30マイル離れたピザ屋を選ぶ必要はありません。できるだけ早く配達したいので、5マイル離れた場所を選択します（私と同じくらいピザが大好きな普通の人間の場合）。 CDNも同様に機能します。ウェブサイトをできるだけ早くブラウザに表示したいので、CDNはあなたの場所に最も近いサーバーからあなたのサイトファイルを配信する準備ができています。したがって、サイトファイルがサンフランシスコのサーバーに保存されていて、ロンドンの誰かがサイトをプルアップした場合、数千マイル離れたサーバーからそのデータを受信するのに1〜2秒かかる場合があります。しかし、CDNを使用すると、ロンドンのサーバーから同じデータを半分の時間で配信できます。それは大きな違いです！

したがって、自宅で結果の完全な範囲を確認できなくても、世界中の場所へのWebサイトの配信を高速化しています。

サイトのCDNを取得する方法はたくさんあります。多くのホスティング会社には、サービスとともにCDNを展開するためのオプションが含まれます。また、CloudflareやStackPath（以前のMaxCDN）のようなネットワークプラットフォームがあり、CDN機能とその他のパフォーマンスおよびセキュリティ機能を提供します。

考慮すべきいくつかの信頼できるCDNプラットフォームは次のとおりです。

Cloudflare CDN：DNS最適化（上記）に加えて、Cloudflareは静的コンテンツをキャッシュしてユーザーに高速に配信する高速で安全なグローバルCDNを提供します。これは、ほとんどのサイトにとって素晴らしい無料プランに含まれています。
KeyCDN（CDN Enabler WordPressプラグインを使用してKeyCDNを統合することもできます。このセットアップは、Cache Enablerでもうまく機能します）
StackPath（以前のMaxCDN）
Amazon Cloudfront
スクリ

複数のCDNプロバイダーを自動的に統合するオプションを含むWPTotalCacheやCDNEnablerなどのキャッシュプラグインがいくつかあります。これは非常に便利です。

CDNをサポートするプラグインは次のとおりです。

WP最速キャッシュ
WPロケット
最適化
W3トータルキャッシュ
WPスーパーキャッシュ
CDNイネーブラー

＃6キャッシュを追加

divi速度の最適化

サイトを高速化するために実装できるキャッシュには、主に4つのタイプがあります。

ページキャッシュ–このプロセスは、ページのキャッシュされた静的HTMLバージョンを保存して、高速配信を実現します。
ブラウザのキャッシュ–これにより、ブラウザがキャッシュできるコンテンツとその期間をより細かく制御できます。一部のプラグインのみがこれを実行できるため、より詳細に制御するには手動で実行するのが最適な場合があります。これは、速度テストを実行するときに、その「ブラウザキャッシュの活用」メトリックの処理に役立ちます。
CDNキャッシング–ユーザーに最も近いCDNからキャッシュされたWebサイトページ/ファイルを提供します。
オブジェクトキャッシング–オブジェクトキャッシングは、PHPがデータベースからデータを取得してユーザーに提供するために開始する、繰り返されるクエリ結果をキャッシュします。これは、Webサイトの表示に使用されるコンパイル済みPHPコードのキャッシュバージョンを格納するバイトコードキャッシュとは異なります。

Diviは、舞台裏でDiviのJSファイルとCSSファイルを提供するときにキャッシュを実行します。ただし、これは主に、DiviBuilderの機能を向上させるためのDiviテーマファイル用です。

あなたのウェブサイト全体にキャッシュを使用する必要がまだあります。ほとんどのサイトには、結合、縮小、およびキャッシュが必要な独自のCSSファイルが付属する複数のプラグインがあります。したがって、サードパーティのソリューションを確実に利用して、すべてのページのキャッシュされた静的HTMLバージョンを提供できます。

CloudflareのCDNは、Diviサイトにキャッシュを追加するための優れた方法です。 Webサイトのコンテンツ（静的リソース）のコピーを地理的に訪問者の近くに保存して、ページの負荷と待ち時間を削減します。 CloudflareのWordPress用APOは、WordPressプラグインを使用してWordPress / DiviサイトのWebページとサードパーティフォントをキャッシュするためのさらにターゲットを絞ったソリューションのようです。

人気のあるキャッシングプラグインは次のとおりです。

WPロケット
キャッシュイネーブラー（レビューを読む）
W3トータルキャッシュ（レビューを読む）
W3スーパーキャッシュ（レビューを読む）
コメットキャッシュ（レビューを読む）
WP最速キャッシュ

ヒント：プラグインを使用してサイトでページキャッシュを有効にしている場合は、Webサイトに変更を加えるたびにキャッシュを確認して削除（またはクリア）して、あなたと訪問者に最新バージョンのキャッシュが提供されるようにする必要があります。サイト。

＃7Webサイトの縮小と集約を追加する

divi速度の最適化

縮小化により、サイトファイルが小さくなります。サイトファイル（CSS、JavaScript、HTML）を縮小すると、これらの不要な文字（スペースやページ分割など）がすべて削除され、ファイルサイズが縮小されます。これにより、ブラウザがページのコンテンツをロードするのにかかる時間が短縮されます。

集約には、サイトファイルを組み合わせて、ページ上のリクエストの総数を減らし、訪問者の読み込み時間を短縮することが含まれます。

前述のように、DiviはデフォルトでJavascriptとCSSを動的に縮小および結合します。したがって、技術的には、サードパーティのプラグインを使用してDiviのJavascriptとCSSをさらに縮小および結合することを心配する必要はありません。ただし、DiviはHTML出力を縮小しません。したがって、サードパーティのプラグインを利用して、ページのHTML全体を縮小（およびキャッシュ）することができます。

さらに、ほとんどすべてのDiviサイトは、CSSファイルとJSファイルを縮小して組み合わせると、Diviテーマ外のファイル（プラグインや子テーマに追加された他のファイルなど）に依存します。

サイト全体のHTML、JS、CSSに縮小を追加する最良の方法の1つは、Cloudflareを使用することです。 CloudflareはAutoMinifyを使用して、Webサイト上のすべてのソースコードのファイルサイズを縮小します。さらに、無料バージョンが標準で付属しています。

サイトファイルを縮小する信頼できるプラグインには、次のものがあります。

最適化
W3トータルキャッシュ（レビューを読む）
W3スーパーキャッシュ（レビューを読む）
WPロケット（有料）

これらのプラグインはDiviで動作するはずです。しかし、ウェブサイトのすべてのニュアンスを測定して、すべての人に最適であると言う方法はありません。サードパーティのプラグインがJavaScriptファイルを自動的に縮小してエラーや問題を引き起こす場合があるため、必ずWebサイトを徹底的にテストしてください。一般に、CSSファイルを縮小することは常に安全です。ただし、これらのJavaScriptファイルには注意してください。

また、競合がある場合は、Diviの組み込みオプションを無効にして、サードパーティのプラグインに処理させる必要がある場合があります。

また、これをサードパーティに依存したくない場合は、いつでも手動で行うことができます。これを行う方法の詳細については、WebサイトのCSS、HTML、およびJavaScriptを縮小する方法に関するこの完全な投稿を確認してください。

＃8GZIP圧縮を有効にする

divi速度の最適化

Gzip圧縮がDiviサイトの高速化にどのように役立つか

DiviサイトでGzip圧縮を有効にすると、速度が大幅に向上します（場合によっては最大70％）。コンピューターで圧縮（またはzip）ファイルを作成することに精通している場合は、Gzip圧縮がどのように機能するかについての基本的な理解がすでにあります。ファイル（またはフォルダー）の内容を小さくするために、zipファイル（またはフォルダー）を作成します。どうして？そのため、ファイルのアップロードとダウンロードをはるかに高速に行うことができます。 Gzip圧縮は、Webサイトに対して同じことを行います。サーバーに、可能なすべてのファイルをより小さなバージョンに圧縮して、クライアントにはるかに高速に提供できるようにするように指示します。これにより、ページの読み込み速度を大幅に向上させることができます。

これは、新規インストールでもDiviの速度を向上させることができる領域の1つです。とにかくDiviはすでにコアテーマファイルを縮小しているので、GzipまたはBrotli圧縮により、これらのファイルはこれまでの縮小よりもはるかに小さくなります。

Gzip圧縮は最も広く使用されている圧縮アルゴリズムですが、Brotli圧縮は、データ転送を高速化するためにファイルサイズをさらに小さくしようとする次世代アルゴリズムのようです。 SiteGroundのようなホスティング会社やCloudflareでも使用されています。

DiviサイトでGzip圧縮を有効にする方法

一部のホスティングプロバイダーは、gzip圧縮を自動的に有効にします。これは、サイトのパフォーマンスが非常に簡単だからです。サイトでGzip圧縮が有効になっているかどうかを自由に確認してください

すでに述べたように、Cloudflareは無料プランのすべてのドメインにBrotli圧縮を提供します。

WordPressパフォーマンスプラグインの多く（W3 TotalCacheやWPSuper Cacheなど）には、オプションとしてGzip圧縮が含まれます。ただし、この1つの最適化のためにパフォーマンスプラグインを追加する必要はないようです。

（Apacheサーバーで）Gzip圧縮を有効にする一般的な方法の1つは、mod_deflateを使用して手動で行うことです。そしてあなたがしなければならないのはFTP経由であなたのウェブサイト（ルート）にアクセスすることです（隠しファイルを表示することを忘れないでください）。次に、コードのブロックをコピーして、.htaccessファイルの下部に貼り付けます。

＃9画像の最適化

divi速度の最適化

画像の最適化は、ページの読み込み速度が遅い最大の原因の1つです。これはおそらく、無視するのがいかに簡単かによるものです。結局のところ、1つの背景画像がWebページにどの程度のダメージを与える可能性がありますか？さて、あなたは驚くかもしれません。 Web用に最適化されていないいくつかの大きな画像は、ページの読み込み速度に壊滅的な影響を与える可能性があります。そしてそれに直面しましょう、あなたのサイトはおそらくたくさんの画像を持っているでしょう。

画像の最適化の本質的な必要性を十分に強調することは実際にはありません。すべてのウェブサイトがこれを行う必要があります。画像圧縮だけでサイトを著しく高速化でき、画像サイズを小さくするとストレージスペースと帯域幅を節約できます（win-win！）。ただし、他にも考慮すべき重要な画像の最適化があります。

つまり、Web用に画像を最適化するときは、次のことを行う必要があります。

適切なファイルタイプを使用する

Web上の画像に関しては、実際には次の画像ファイルタイプに固執する必要があります。

JPG – PNGやGIFよりも小さいファイルサイズで見栄えの良い画像を取得できるため、これはサイトで使用するほとんどの画像/写真の頼りになるファイルタイプである必要があります。透明な背景が必要な場合を除いて、背景画像や写真などにPNG形式を使用することは避けてください。
PNG –透明な背景が必要な画像にはPNGを使用します。 JPGは透明度をサポートしていません。
SVG –これは、HTMLコードを使用して非常に鮮明な詳細を提供するベクター形式です。 SVGは、ロゴ、アイコン、その他のベクターアニメーションに最適です。

画像のサイズ変更とトリミング

画像を必要以上に大きくしたくはありません。たとえば、Diviのテーマオプションにロゴを追加する場合、ほとんどの場合、100pxの幅で十分です。したがって、5000pxの幅のロゴをアップロードしないでください。また、Diviにその画像のサイズを強制的に変更させないでください。結果はフロントエンドで同じように見えるかもしれませんが、その大きなサイズはあなたのページの読み込み時間を殺します。

Diviを使用して画像をページにアップロードするときは、それらの画像がDiviの列構造内でどのくらいの大きさである必要があるかを知っておくと役立ちます。この究極のガイドは、あなたを正しい方向に向けるのに役立ちます。（ただし、その投稿以降に追加された新しい列構造があるため、すぐに更新されるように努めます）。

ファイルサイズの圧縮

品質の低下に気付く前に、画像ファイルのサイズをできるだけ小さくすることをお勧めします。これは、画像圧縮によって行われます。ほとんどのフォトエディタ、プラグイン、およびtinypng.comなどのサイトは、ロスレス圧縮（画質を損なうことなく画像ファイルを縮小する）とスマートロッシー圧縮（メタデータと画質を低下させることで画像ファイルのサイズを縮小する）を使用して画像を圧縮します。ユーザーが実際に気付かない方法）。

画像最適化ツールを活用する

可能であれば、Diviサイトにアップロードする前に、インターネット用に画像を最適化することをお勧めします。これは、「Web用に保存」オプションを含むPhotoshopなどのフォトエディタを使用して実行できます。さらに、TinyPNG.comやCompressor.ioなどの無料のサードパーティサイトを使用して、サイトにアップロードする前に画像を圧縮することができます。

あなたのために画像圧縮を行ういくつかの素晴らしいプラグインがあります。一部のプラグイン（Imagifyなど）は、サイトですでに使用されている画像を圧縮し、WordPressMediaライブラリにアップロードするときに画像を自動的に圧縮します。このためのプラグインを使用すると、これらの画像を圧縮するときにサイトに負担がかかる可能性があるため、可能であれば、事前に画像の最適化を行うことをお勧めします。

使用できる優れた画像最適化ツールとプラグインは次のとおりです。

ウェブサイト：
- Compressor.io
- Tinypng.com
プラグイン：
- 想像する
- スマッシュ画像の圧縮と最適化
- WPロケット

詳細については、6つの高品質の画像最適化プラグインの比較を確認してください。

Diviの組み込みSRCSETサポート

ネイティブSRCSETをサポートするレスポンシブ画像もDiviに組み込まれています。これにより、さまざまなレスポンシブディスプレイ（タブレットや電話など）に適したサイズの拡大縮小画像が提供されるため、Diviで使用される画像の最適化がさらに向上します。

＃10ビデオの最適化

divi速度の最適化

ビデオの最適化は画像の最適化よりも少し難しいですが、間違いなくそれほど重要ではありません。ビデオファイルは大きくなる可能性があるため、ページの読み込み速度に非常に負担がかかります。また、サーバー上で（たとえば、WordPressメディアギャラリーで）多数のビデオをホストしている場合は、ディスク容量の追加の問題が発生します。そのため、ビデオをホストするためにサードパーティのサービス（YouTubeやVimeoなど）を使用することが推奨されることがよくあります。または、AmazonS3などのストレージプラットフォームでビデオメディアコンテンツをオフロードすることを検討してください。これにより、サーバーの速度を落とすことなく、Diviのビデオモジュール内からこれらのビデオにリンクできます。

動画をセルフホストする場合は、読み込みを高速化するために動画のサイズを小さくする必要があります。 Handbrake（使いやすい）のような無料のツールを使用して、ビデオファイルを簡単に減らすことができます。

Diviでビデオを使用する方法（サードパーティがホストするビデオURLをビデオモジュールに追加するなど）の詳細については、この究極のガイドを確認してください。

＃11スピードのためにDiviページを作成する

そうでない場合、Webサイトの速度は、ページのコンテンツをロードする速度によって決まります。したがって、パフォーマンスの最適化を念頭に置いて、DiviWebサイトの各ページを作成することは理にかなっています。重要なことは、作成する各ページの主な目的を特定することです。その後、速度とデザインの健全なバランスを見つけて、バックエンドに寄りかかったまま、フロントエンドで見栄えのするページを作成できます。 Diviページのコンテンツを最適化して速度を上げる方法の実際的な例については、最速のDiviページを作成する方法に関する記事をご覧ください。

ページを作成するときに覚えておくべきいくつかの重要なヒントを次に示します。

上記のコンテンツを最適化して、 Diviの組み込みのCriticalCSSで動作するようにします。
Diviプリセットを使用して、Diviの組み込みのスマートスタイル機能を利用します。これにより、要素はクラスに基づいてCSSコードスニペットを共有できるようになり、それぞれに固有のCSSブロックをロードする必要がなくなります。
可能であれば、ページの作成に使用するモジュールの種類を制限してください。 Diviの動的フレームワークにより、Diviは、使用しないモジュール（およびそれらの固有のCSS）を処理またはロードしません。たとえば、同じ結果を得るために（テキストモジュールと宣伝文モジュールの代わりに）2つのテキストモジュールを使用できる場合は、ページの宣伝文モジュールを不必要に処理してロードしないようにするのが最善です。
ページにアニメーションを使用することについて賢くしてください。 Diviの動的機能により、モーションエフェクトなどの機能に必要なJSまたはCSSを使用しない場合、Diviはそれらを処理またはロードしません。たとえば、ページ全体で通常のアニメーション設定を使用している場合、1つの要素のみにモーションエフェクトを使用することは避けたい場合があります。代わりに、アニメーションスタイルの一貫性を保ち、ページの読み込みを高速化してください。

＃12プラグインを慎重かつ慎重に使用する

divi速度の最適化

高品質のプラグインを使用する

プラグインに関しては、品質が重要な要素です。実際、1つの悪いプラグインほどサイトの速度を低下させない10の高品質のプラグインを持つことができます。一般的に、時間の試練に耐え、素晴らしいレビューがあるプラグインを選択するようにしてください。また、速度テストの前後で、プラグインがWebサイトのパフォーマンスにどのように影響するかを常にテストしてください。

未使用または古いプラグインを削除する

高品質のプラグインを使用することに加えて、未使用または古いプラグインをサイトから削除することも重要です。それらはあなたのウェブサイトのパフォーマンスに有害であり、深刻なセキュリティリスクをもたらす可能性があります。さらに、各プラグイン（高品質のプラグインでも）は、各ページの読み込みに時間を追加する追加のリソースを追加します。高速なDiviサイトが必要な場合は、使用するプラグインをできるだけ少なくする必要があります。

レンダリングブロックエラーに注意してください

Diviにはレンダリングブロックアセットがないため、レンダリングブロックスタイルとスクリプトはプラグインから取得されます。速度を低下させる大きなレンダリングブロックスクリプトがある場合は、それらのプラグインから離れることを検討してください。

＃13速度テストを実施する

divi速度の最適化

Webサイトで少なくとも1つの速度テストを行っていない場合は、おそらくこの記事を読んでいないでしょう。そして当然のことながら、訪問者のためにページがどれだけ速く読み込まれるかを知ることは重要です。速度テストを実施することは、あなたができる最も簡単なことの1つです。無料でこれを行うウェブサイトはたくさんあります。また、それらが提供するメトリックは、パフォーマンスを向上させるためにサイトをさらに最適化する方法を特定するために非常に役立ちます。

開始するのに最適な場所は次のとおりです。

GTMetrics
Googleページインサイト
Chrome開発ツール
灯台（Chrome開発ツールで利用可能）

これらのテストの結果は、ロード時間を短縮するためにDiviサイトの最適化を開始するように私たちの多くを駆り立てるものです。これらは、さまざまな領域でWebページがどのように機能するかについての役立つ内訳を提供します。次に、それらの推奨事項をチェックリストとして使用して、サイトを最適化するときに作業を進めることができます。

Divi WordPressサイトでこれらのオンライン速度テストツールを使用する最良の方法は、最適化を行う前に、まずページでテストを実行することです。次に、これをベースとして使用して、変更を加えるときに将来のテストを比較できます。最適化を行うたびに、スコアが向上するかどうかを確認できます。

たとえば、あるキャッシュプラグインを使用すると、別のプラグインよりもうまく機能することに気付くかもしれません。最高のパフォーマンスを得るために、複数のプラグインをテストすることを恐れないでください。

これは、GTMetrixによる役立つWordPress最適化ガイドです。

サイトに速度の最適化を実装すると、次の領域で改善が見られるはずです。

最初のバイトまでの時間（TTFB）
First Contentful Paint（FCP）
インタラクティブまでの時間（TTI）–ページがユーザーインタラクションの準備ができたときを測定します。
速度指数（SI）–ページが視覚的に完成する速度を測定します
合計ブロック時間（TBT）–ユーザーが最初にサイトを操作してからブラウザがそのアクションに応答するまでの時間であるGoogleのWebの重要な最初の入力遅延（FID）に似ています
最大のコンテンツフルペイント–最大のコンテンツ要素（画像など）がユーザーに表示されるまでにかかる時間を測定します。
累積レイアウトシフト–ユーザーがページをロードしたときのレイアウトの予期しないシフト（または移動）を測定します。

詳細については、Googleページの速度スコアを改善する方法に関する投稿を確認してください。

目標はスピードであり、完璧ではありません

あなたのウェブサイトをテストし、それを完璧に最適化することで行き詰まるのは簡単です。しかし、完璧なWebサイトはありません。特定の速度テストのパフォーマンスグレードを改善すると、実際にページの読み込み時間が遅くなる場合があります。それは、それらの速度テストでさえ完璧ではないからです。この記事のように、それらはあなたのウェブサイトのパフォーマンスとスピードを改善するのを助けるための単なるガイドです。

＃14Divi高速ページの青写真を検討する

我々が構築されたこのテストのウェブサイトでは、GoogleのPageSpeedのデスクトップ、GoogleのPageSpeedの携帯電話では99とGTmetrix 100％で100を獲得ディビウェブサイトを構築するのは簡単でした。このWebサイトの青写真を使用すると、開発者はDiviに組み込まれている速度最適化を実際のサイトで直接体験できます。また、Diviページのコンテンツを最適化して速度を上げる方法の良い例としても役立ちます。

このテストサイトは次のように最適化されました。

SiteGroundでホスト
キャッシング、CDN、Brotli圧縮にCloudFlareを使用
追加のプラグインは使用されませんでした。
使用されたDiviの組み込みパフォーマンス機能
最適化されたページコンテンツ
- スマートスタイル（Diviプリセット）を使用して、ページごとに生成される動的CSSを削減しました。
- フォールドの上で最適化され、クリティカルCSSが無駄のないものになっていることを確認します。
- サードパーティのサーバーからフォントをダウンロードする必要がないように、Webセーフフォント（Arial）を使用しました。
- 使用した圧縮画像
- アニメーションやモーションエフェクトを使用しませんでした
- 必要なソーシャルアイコンを含む小さなアイコンフォントサブセットをロードするためのアイコンの使用を制限しました。

結果：

CSSサイズが94％縮小されました。
すべてのレンダリングブロックアセットが完全に排除され、DiviのJavaScriptサイズが半分に削減されました。
不要なリソースリクエストはありません。
折り目の上にコンテンツがすぐに表示されます。
GoogleのPageSpeedのモバイルのGoogleのPageSpeedデスクトップ上の100％、99％を獲得
GTmetrixで100％を獲得しました。

テストサイトで何を学ぶことができますか？

最終的に、Diviは、使用方法とWebサイトの速度を選択する力を提供します。テストサイトは、箱から出してほぼ完璧なページ速度スコアを取得できることを示しています。しかし、Diviを非常に優れたものにする強力な設計ツールをすべて使用しなかったからといって、それらを使用することを恐れる必要があるわけではありません。ページでモジュールまたは機能を使用しない場合、Diviは要素またはそのCSSを不必要に処理および/またはロードしません。ただし、モジュールまたは機能を含めることにした場合、Diviは、必要な要素とCSSのみを処理および/またはロードするように注意し、それ以上は何もしません。これにより、Diviのパワーを解き放ってサイトを構築することにしたときに、Webの肥大化を心配することなく、構築するための軽量フレームワークが提供されます。

その他のヒント

Divi / WordPressWebサイトの高速化に寄与するすべての主要な要因についてほぼ説明しました。しかし、速度をさらに向上させる可能性のある考慮事項は他にもたくさんあります。

正しいDivi子テーマの設定
WordPressのログインURLを変更して、これらのボットがサーバーに過負荷をかけないようにします。これは、Diviを使用してカスタムログインページを作成する良い機会です。
外部サービスへの不要な呼び出しを回避します。一部のプラグインと埋め込みでは、サーバーでホストされているファイルを使用する必要があります。これらの追加の呼び出しにより、ページの読み込みが遅くなります。
画像や動画の遅延読み込みを組み込んで、ページの読み込み速度を向上させます。

Diviおよびその他のサードパーティパフォーマンスプラグインの使用

Diviの組み込みのパフォーマンス最適化は、パフォーマンスプラグインでは解消できない肥大化を解消するため、すべてのDiviサイトを高速化します。そうは言っても、Diviの組み込みの最適化に加えて、追加のサードパーティのパフォーマンスプラグインを使用してサイトの速度を上げることができます。 Diviのパフォーマンスの向上は、Diviにのみ適用され、サードパーティのプラグインには適用されないため、パフォーマンスプラグインは、Divi以外の他の領域で役立つ場合があります。たとえば、WebサイトをキャッシュしてCDNを使用することで引き続きメリットを得ることができます。

競合するパフォーマンスプラグインへの対処

Diviはすでに最適化されているため、サードパーティのパフォーマンスプラグインを使用すると競合が発生する可能性があります。したがって、Diviテーマを最新の状態に保ち、すべてのサードパーティプラグインを事前に徹底的にテストすることが重要です。他の一般的な最適化プラグインを使用して、Diviの組み込み最適化をテストするために最善を尽くします。しかし、ウェブサイトのすべてのニュアンスを測定して、すべての人に最適であるとか、競合が発生しないと言う方法はありません。

たとえば、サードパーティのプラグインは、エラーや問題を引き起こす可能性のある方法でJavaScriptファイルを自動的に縮小または移動する可能性があるため、必ずWebサイトを徹底的にテストしてください。

また、競合がある場合は、Diviの組み込みオプションを無効にして、サードパーティのプラグインに処理させる必要がある場合があります。発生する可能性のある問題については、サポートチームにお気軽にお問い合わせください。私たちはそれを分類するのを手伝ってうれしいです。

最終的な考え

ディビはかつてないほど高速です。組み込みのパフォーマンスアップグレードにより、標準のDiviインストールでは、フロントエンドでのページの読み込みが速くなり、バックエンドでのWordPress管理が速くなり、サイトを編集および設計するためのDiviBuilderが速くなります。これは素晴らしいスタートですが、Diviサイトをできるだけ速く実行するためにやるべきことはまだたくさんあります。この記事に含まれている速度とパフォーマンスの最適化は、間違いなくサイトの速度を向上させます。ほとんどの場合、これらの最適化は、Diviだけでなく、すべてのWordPressサイト/テーマに適用されます。そして、あなたが無料でできる簡単なことがいくつあるかは驚くべきことです！

言及されていない提案やリソースがたくさんあると確信しているので、コメントでそれらを私たちと共有してください。

あなたからの便りを楽しみにしています。

乾杯！

Sammby /shutterstock.com経由の注目の画像