DIVIとDIVI Builderを使用して美しいWordPressのWebサイトを構築

WordPressでDiviを最適化するための究極のガイド(2021年版)

Blair2004 WordPressチュートリアル Oct 12, 2021

Diviは間違いなく今日最も人気のあるWordPressテーマの1つです。 強力なページビルダーが付属しており、これを使用して、あらゆるタイプのWebサイト(文字通り)のほぼあらゆるタイプのデザインを作成できます。 この大きな利点には欠点があります。 Diviには多くの機能があるため、これらの機能には重みがあります。 そして、それを認めたくない人にとって、特に訪問者に最高の体験を提供したい場合は、Diviの最適化を検討することが重要です。

それはディビが頻繁に公演を受けている事実ですが、それにもかかわらず、これらは常に十分な、より簡単な「Hello World」のブログよりも有するものについての真実ということではありません。

このチュートリアルでは、diviの読み込みを高速化するために何ができるかを探ります(まだ、利用可能な機能を考慮した高速なWordPressテーマです)。 ここで取り上げる重要なトピックは次のとおりです。

なぜあなたは速いウェブサイトを持たなければならないのですか?

それはもはや誰にとっても秘密ではありません。 速いウェブサイトは遅いウェブサイトよりよく変換します。 あなたのウェブサイトの速度とあなたのバウンス率の間には大きな相関関係があります。 より正確にここにそれが今日必須である理由があります:

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める
  • バウンス率を下げる-訪問者を維持する必要がありますか? あなたのウェブサイトを速く燃え上がらせてください。
  • コンバージョンの増加–訪問者にストアまたはフォームを表示してもらいたい場合は、Webサイトが消える前に高速にロードする必要があります。
  • SEO-グーグルはあなたをより高くランク付けするかもしれません(それが常にそうであるとは限らないのでかもしれません)。
  • 信頼性-遅いウェブサイトはあなたの訪問者に悪い第一印象を作ります。

ウェブサイトの読み込み速度はどれくらいですか?

さまざまな調査に基づいて、Webサイトは3秒以内に読み込まれるはずです。 一般的に、適切な目標は、Webページを3秒以内にロードすることです。 最近は2秒以内だと思っている方が多いようですが。 しかし、明らかに、すべてのWebサイトとWebページは異なります。

Diviの読み込みを速くするためのヒントとコツ

次に、Divi Webサイトですぐに適用できるすべてのヒントとコツを調べて、パフォーマンスの大幅な変更を確認します。 これらのテクニックのいくつかは他のWordPressテーマにも適用されるので、あなたはすでにこれらに精通しているかもしれません。

始めましょう。

データベースを最適化する方法

WordPressは、MySQLデータベースと対話してデータ(投稿、ページ、メタデータなど)を保存および取得する動的CMSです。 この方法で作業すると、Webサイトの管理が容易になりますが、ページをロードする前にデータベース内のデータを見つける必要があるため、ページのロードに時間がかかるという欠点があります。 静的HTMLWebサイトの場合、動的コンテンツは動的に変更されないため、動的コンテンツを検索する必要はありません。 そのため、静的HTMLWebサイトはWordPressWebサイトよりも高速になります。

Diviサイト(またはWordPress Webサイト)をできるだけ速く維持する1つの方法は、データベースを最適化することです。 WordPressサイトファイルはデータベース内でテーブルごとに整理されており、サイトに新しいデータ(テーマやプラグインなど)を追加するたびに、新しいテーブルと新しいデータが作成されます。 ご想像のとおり、データベースが肥大化すればするほど、データを見つけるのが難しくなります。 これにより、Webサイトの速度が低下します。

さて、あなたが何年もブログを書いているなら、あなたはたくさんのテーマとプラグインを試したかもしれません。 これにより、最終的にデータベースは不要なデータを保持するようになりました。 プラグインをアンインストールしても、このプラグインによって作成されたすべてのデータも消去されるわけではありません。 一部のプラグインは、プラグインを再インストールした場合、または開発者が適切なアンインストール手段を追加するのを忘れた場合に備えて、一部のデータを保持します。 明らかに、それはあなたのデータベースにとって良くも公平でもありません。 この残りのデータは、不要な混乱を招き、サイトの速度を低下させる可能性があります。

すべての人間がより効率的に作業するために組織を必要とするように、すべてのWordPressサイト(Diviかどうかに関係なく)は、ページをより速くロードするためにクリーンなデータベースを必要とします。 だから、もしあなたが今あなたのウェブサイトを持っているなら、あなたは間違いなくあなたのデータベースを最適化することを考えるべきです。

それを助けることができる多くのプラグインがありますが、あなたは間違いなくWPオプティマイズを試してみることができます。これは信頼できるオプションのようです。 しかし、考慮すべき他のトリックもあります。

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

DNSを最適化する方法

Webサイトにアクセスしようとしているときに最初に発生することの1つは、DNSルックアップです。 URLが入力(またはクリック)されるとすぐに、訪問者のISPはDNSクエリをネームサーバーに送信して、ドメインに関連付けられているIPアドレスを見つけます(すべてのドメイン/ Webサイトには特定のIPアドレスがあります)。 より明確に言えば、DNSルックアップは、電話帳でドメイン名をルックアップしてそのドメインのIPアドレスを見つけるようなものです。

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

一般的に言って、GodaddyやNamecheapのようなほとんどの無料のDNSプロバイダーは、一般的に他のプロバイダーよりも遅くなります。

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

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

Cloudflareをセットアップする

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

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

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

これからは、ダッシュボードからDNSを簡単に管理できるようになります。

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

良いホスティングを選択する方法

事前に、ウェブサイトの最適化の過程で最初に考慮すべきことの1つは、WordPressウェブサイトに適したホスティングを選択することです。 数ヶ月前、Eleganthemeは、WordPressとうまく連携する人気のホスティングプロバイダーとのパートナーシップオファーリリースしていました。 これらのプロバイダーは、Diviにより良いサービスを提供することで認められており、ElegantThemesダッシュボードとの統合はシームレスです。 あなたはあなたがあなたのウェブサイトのためにどれを選ぶかこれらのプロバイダーからただ選ぶ必要があります。

WordPressやDiviでもうまく機能する他の多くのソリューションがあるため、これらのプロバイダーを使用する必要はありません。 次に、利用可能なホスティングのタイプを検討して、それを分解してみましょう。

ホスティングの種類

共有ホスティング

これは、WordPress / Diviユーザーにとって群を抜いて最も人気のあるタイプのホスティングです。 しかし残念ながら、それは速いウェブサイトを持つための最悪のオプションです。 共有ホスティングを使用すると、サーバーで利用可能なすべてのリソースを他のユーザーと共有できます。 あなたが共有しているので、この種のホスティングのコストは通常非常に低いです。 ただし、欠点は、他のサイトが取得するトラフィックの量と、それらのWebサイトがサーバーのパフォーマンスに影響を与え、Webサイトのパフォーマンスにどのように影響するかを制御できないことです。 そのため、読み込み時間が非常に遅い期間や、サイトが完全にダウンしている場合でも、簡単に餌食になる可能性があります。 したがって、共有ホスティングが処理できるトラフィックの量を把握しておくことをお勧めします

VPSホスティング

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

ただし、マネージドVPSがない限り、この種のホスティングは主に、自分で処理するのに十分な技術に精通しているDIYタイプ向けです。

クラウドホスティング

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

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

専用ホスティング

専用ホスティングを使用すると、あなただけの専用サーバーがあります。 リソースを他の人と共有する必要はありません。 これは、ウェブサイトの読み込み時間がより予測可能で一貫していることを意味します。 これは通常、高額な保険料で大企業向けの最上位オプションとして提供されます(明らかに)。 継承するコストに余裕がある場合は、それを使用することを検討してください。

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

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

考慮すべき他のホスティングプロバイダー

そこに多くのWordPressホスティング会社があります。 また、速度の最適化を真剣に考えている場合は、可能であれば、従来の共有ホスティング(管理されていない)を避けたいと思うでしょう。 しかし、あなたが単純なサイトを持っていて、管理のために追加のお金を払う気がないなら、Sitegroundは共有ホスティングに最適なものの1つであるように思われます。

今のところ、より高速なDiviWebサイトを検討するためのホストのクイックリストを次に示します。

  • Kinsta–マネージドWPホスティングを専門としています
  • SiteGround–は共有ホスティングを提供します。
  • Cloudways –SSDベースのマネージドクラウドホスティングを専門としています
  • Flywheel–マネージドWPホスティングを専門としています

それはそこに利用可能なすべての可能なプロバイダーではありませんが、間違いなくこれらで、あなたは速いWordPressウェブサイトを持っているでしょう。

最初のバイトまでの時間を最適化する方法

最初のバイトまでの時間(TTFB)は、ユーザーがサーバーからWebサイトデータの最初のバイトを受信するのにかかる時間です。 つまり、ユーザーがWebサイトにアクセスしようとすると、TTFBは基本的に、ブラウザーがデータを受信するまでの待機期間になります。

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

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

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

つまり、TTFBをすばやくブーストしたい場合は、ホスティングを改善し、以下の残りの手順に従ってください。

WordPressウェブサイトをキャッシュする方法

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

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

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

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

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

縮小を実行する方法

縮小化により、サイトファイルが小さくなります。 サイトファイル(CSS、JavaScript、HTML)を縮小すると、これらの不要なもの(スペースやページ分割など)がすべて削除され、ファイルサイズが縮小されます。 これにより、ブラウザがそのアセットをダウンロードする時間が短縮されます。

集約とは、サイトファイルを組み合わせて、ページ上のリクエストの総数を減らし、訪問者の読み込み時間を短縮することを意味します。 ただし、これはユーザーに大きなファイルを提供することも意味します。たとえば、CSSの1MBファイルを提供するようにし、小さなチャンクに分割することを検討する必要があります。

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

さらに、ほとんどすべてのDiviサイトは、CSSファイルとJSファイルを縮小して組み合わせるとメリットが得られる、Diviテーマ外のファイル(プラグインや子テーマによって追加された他のファイルなど)に依存します。 これはプラグインで簡単に処理できます。

サイトファイルを縮小する適切なプラグインには、次のものがあります。

これらのプラグインの1つはDiviで動作するはずです。 しかし、ウェブサイトのすべてのニュアンスを測定して、すべての人に最適なものを言う方法はありません。 サードパーティのプラグインがエラーや問題を引き起こす可能性のある方法でJavaScriptファイルを自動的に縮小する場合があります。その場合は、Webサイト全体で詳細なテストを実行して、何も壊れていないことを確認する必要があります。 CSSを縮小しても安全かもしれないとしたら、JavaScriptの場合は必ずしもそうとは限りません。

場合によっては、縮小ソリューション間で競合が発生することがあります。 次に、1つだけにそれを処理させるようにする必要があります。 さらに、縮小化のためにより多くのプラグインをインストールすると、解決策よりも多くの問題が発生します。一度に1つの解決策を使用するだけです。

Gzip圧縮を有効にする方法

Gzip圧縮は、ページサイズを最大70%削減できるため、縮小化よりも効率的な場合があります。

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

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

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

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

どのCDNを使用できますか

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

ウェブサイトをできるだけ早くブラウザに表示したいので、CDNはあなたの場所に最も近いサーバーからあなたのサイトファイルを配信する準備ができています。 したがって、サイトファイルがサンフランシスコのサーバーに保存されていて、ロンドンの誰かがサイトをプルアップした場合、数千マイル離れたサーバーからそのデータを受信するのに1〜2秒かかる場合があります。 しかし、CDNを使用すると、ロンドンのサーバーから同じデータを半分の時間で配信できます。 それは大きな違いです!

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

サイトのCDNを取得する方法はたくさんあります。 多くのホスティング会社には、サービスとともにCDNを展開するためのオプションが含まれます。 そして、ネットワーク・プラットフォーム物質ですかがあるのCloudFlare ÂANDA MaxCDN他のパフォーマンスとセキュリティ機能と一緒にCDN機能を提供Âは。

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

キャッシュに使用されるプラグインの中には、複数のCDNプロバイダーを自動的に統合するオプションがすでに含まれているものがあります。これは非常に便利です。

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

画像を最適化する方法

画像の最適化は、ページの読み込み速度が遅い最大の原因の1つです。 この理由は、おそらく多くの人がウェブサイトの速度にとって大きな画像がどれほど有害であるかを無視しているからです。 結局のところ、1つの背景画像がWebページにどの程度のダメージを与える可能性がありますか? さて、あなたは驚くかもしれません。 Web用に最適化されていないいくつかの大きな画像は、ページの読み込み速度に壊滅的な影響を与える可能性があります。

すべてのウェブサイトがこれを行う必要があります。 画像圧縮だけでサイトを著しく高速化でき、画像サイズを小さくするとストレージスペースと帯域幅を節約できます。 しかし、他にも考慮すべき重要な画像の最適化があります。

つまり、画像を最適化するために考慮する必要があることは次のとおりです。

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

Webに画像を使用することを検討するときは、実際には次の画像ファイルタイプに固執する必要があります。

  • JPG –この形式は、カラフルな画像に使用する必要があります。 通常、これは写真撮影に最適です。 その場合、背景が透明な画像を使用する場合を除いて、PNGよりも優れた圧縮を提供します。
  • PNG-透明な背景が必要な画像にはPNGを使用します。 この形式は、可能な色数が少ない画像にも使用できます。 これは、インフォグラフィック画像やロゴに適した形式です。
  • SVG –これは、HTMLコードを使用して非常に鮮明な詳細を提供するベクター形式です。 SVGは、ロゴ、アイコン、その他のベクターアニメーションに最適です。

画像のサイズを変更して切り抜く

画像はかなり大きくする必要があります。 ウェブサイトの本文の幅が最大800ピクセルに設定されている場合は、1200ピクセルの大きな画像を用意する必要はありません。 結果はフロントエンドで同じように見えるかもしれませんが、その大きなサイズはあなたのページの読み込み時間を殺します。

Diviを使用して画像をページにアップロードする場合、Diviの列構造内でそれらの画像がどれだけ大きい必要があるかを知っておくと役立ちます。

画像を圧縮する

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

インターネット用に画像を最適化する

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

明らかに、WordPressはプラグインを通じて画像を最適化する方法を提供します。 一部のプラグイン(Imagifyなど)は、サイトですでに使用されている画像を圧縮し、WordPressMediaライブラリにアップロードするときに画像を自動的に圧縮します。

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

ウェブサイト:

プラグイン:

Diviの組み込みSRCSETサポート

ネイティブSRCSETをサポートするレスポンシブ画像もDiviに組み込まれています。 この機能を使用すると、デバイスのサイズ(電話、タブレット、デスクトップ)に応じて画像を使用できます。

動画を最適化する方法

ビデオの最適化は画像の最適化よりも少し難しいですが、間違いなくそれほど重要ではありません。 ビデオは大きくなる可能性があるため、ページ速度に大きな影響を与えます。 サーバーで多数のビデオをホストしている場合は、帯域幅の使用量の増加に加えて、別のディスク容量の問題が発生していることにすぐに気付く可能性があります。 そのため、ビデオをホストするためにサードパーティのサービス( YouTubeVimeoなど)を使用することが推奨されることがよくあります。 それとも、あなたはストレージ・プラットフォーム物質ですか上のビデオメディアコンテンツのオフロード検討することをAmazon S3を これにより、サーバーの速度を落とすことなく、Diviのビデオモジュール内からこれらのビデオにリンクできます。

使いやすいハンドブレーキのような無料のツールを使用して、ビデオファイルを簡単に減らすことができます。

DiviでSpeedTestを実行する方法

あなたはあなたのウェブサイトの速度でテストをしたかもしれません、そしてその結果はあなたをこの記事に連れて行ったかもしれません。 これは、実際には、最適化の開始時、現在のスコアが何であるかを知り、最適化の終了時に、新しいスコアとの違いを比較するための1つの重要なステップです。 速度テストを実施することは、あなたができる最も簡単なことの1つです。 無料でこれを行うウェブサイトはたくさんあります。 また、それらが提供するメトリックは、パフォーマンスを向上させるためにサイトをさらに最適化する方法を特定するために非常に役立ちます。

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

結果は、さまざまな領域でWebページがどのように機能するかについての有用な内訳を提供します。 次に、それらの推奨事項をチェックリストとして使用して、サイトを最適化するときに作業を進めることができます。

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

  • フルロード時間/オンロード時間
  • 合計ページサイズ(縮小、これを利用した画像の最適化など)
  • リクエスト
  • PageSpeed / YSlowスコア
  • 拡大縮小された画像を提供する
  • 画像を最適化する
  • ブラウザのキャッシュを利用する
  • CSS / HTMLを縮小する
  • gzip圧縮を有効にする
  • HTTPリクエストを減らします
  • Expiresヘッダーを追加する

あなたは不可能な速度ではなくまともな速度を目指しています

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

Diviと他の最適化プラグインの間で起こりうる競合を回避する方法

縮小とキャッシュのためにサードパーティのプラグインをデプロイするときはいつでも、特定の競合が発生する可能性があります。 たとえば、Diviモジュールが正しく表示されない場合や、特定のJavaScriptファイルが正しくレンダリングされない場合があります。

これらのタイプの競合を回避するために、Diviの組み込みの最適化機能を無効にして、サードパーティのプラグインに処理させることができます。 無効にする3つのオプションは次のとおりです。

  • 静的CSSファイルの生成
  • Javascriptファイルの縮小と結合
  • CSSファイルの縮小と結合

テーマオプションに移動して、JavascriptファイルとCSSファイルを縮小および結合するオプションを無効にできます。

テーマオプションで静的CSSファイル生成のオプションを無効にできます

その他のヒントとコツ

私たちは、Divi / WordPressWebサイトの高速化に寄与するすべての主要な要因をほぼカバーしました。 ただし、まだ実行できる重要なことがいくつかあります。

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

最終的な考え

Diviの最近の最適化により、以前よりも高速になりました。 組み込みのパフォーマンスアップグレードにより、標準のDiviインストールでは、フロントエンドでのページの読み込みが速くなり、バックエンドでのWordPress管理が速くなり、サイトを編集および設計するためのDiviBuilderが速くなります。 これは素晴らしいスタートですが、Diviサイトをできるだけ速く実行するためにやるべきことはまだたくさんあります。

このガイドに含まれている速度とパフォーマンスの最適化により、サイトの速度が確実に向上します。 ほとんどの場合、これらの最適化は、Diviだけでなく、すべてのWordPressサイト/テーマに適用されます。 そして、あなたができる簡単なことがどれだけ無料であるかは驚くべきことです!