最速のDiviページを作成する方法：Diviコンテンツを最適化して速度を上げる

Diviの新しいパフォーマンスアップデートにより、ページ速度スコアを向上させる可能性がたくさんあります。 今日は、Diviページを最初から作成するときに覚えておくべき実用的なヒントとコツをいくつか紹介します。 これらは推奨事項であり、決まったルールではありません。 それは常にあなたのページの主な目的に帰着します。 場合によっては、設計のために速度を犠牲にしたり、その逆を行ったりすることがあります。 両者のバランスをとることが重要だと考えていますが、以下のヒントを使用すると、Diviページの速度を確実に向上させることができます。

それに飛び込みましょう！

私たちのYoutubeチャンネルを購読する

1.フォールドコンテンツの上で最適化

Diviに追加された新しいパフォーマンス機能の1つは、クリティカルCSSと呼ばれます。 つまり、DiviのCritical CSSは、すぐにロードする必要のあるCSS（over-the-fold CSSと呼ばれる）を自動的に検出し、ページの残りのCSSのロードを遅らせます。 これ自体は、労力をかけることなく、ページ速度を自動的に向上させるのにすでに役立ちます。 しかし、さらに一歩進んだ場合は、上記のコンテンツも最適化することを決定できます。

4モジュールヒーローコンセプト

一見したところ、訪問者とできるだけ多くの情報を共有したくなるかもしれませんが、それはまさにヒーローでは避けるべきことです。 スタイリングと視覚の両方において、コンテンツがより直接的であるほど、優れています。 そのため、折り畳みの上で使用するモジュールの数を制限すると、Diviページの速度を上げるのに役立ちます。 できれば、次のものを使用します。

• 題名
• 段落
• ボタン

ただし、多くの場合、何らかの画像も含める必要があります。 その場合は、画像を背景として使用することを避け、代わりにモジュールとして使用するようにしてください。 最大幅の特定のコンテナ内のモジュールとして使用すると、画像のサイズを小さくすることができ、サイトの速度を上げることができます。 これにより、4モジュールのヒーローコンセプトが実現します。

• 題名
• 段落
• ボタン
• 最適化された画像

フルスクリーンヒーローを使用するか、コンテンツを複数のセクションに分割して、正確な自動検出を行います

フルスクリーンのヒーローデザインが人気があるのには理由があります。 デザインの通気性を高めるだけでなく、重要なCSSにも役立ちます。 フルスクリーンのヒーローを選ぶ場合は、使用している画面サイズに関係なく、それが折り目の上に表示される唯一のものであると判断します。 Diviでフルスクリーンのヒーローを作成するには、セクション設定内で「100vh」の最小の高さを割り当てることを忘れないでください。 最小の高さを割り当てることによって; セクションがブラウザの高さ全体をカバーしていることを確認しています。 セクション内に何でも配置して、その時点からヒーローデザインの一部にすることができます。 または、Diviの組み込みのフルスクリーンヘッダーを使用することもできます。

または、フルスクリーンのヒーロールートをたどりたくない場合は、折り目の上にあるものを複数のセクションに分割することを決定できます。 Diviは、セクションレベルで折り目の上に表示されるものを自動的に検出します。 これは、一部が折り目の上に、一部が折り目の下に表示される大きなセクションを作成している場合、セクション全体のCSSとそのセクションの要素のCSSが読み込まれることを意味します。 セクションを複数のセクションに分割すると、折り目の上にあるように扱われる要素が多すぎるのを防ぐのに役立ちます。

遅延を防ぐためにヒーローのアニメーションを避ける

読み込み時間の遅延につながる可能性のある折り目の上のものはすべて避けるのが良いでしょう。 これにはアニメーションが含まれます。 ただし、これは完全に回避する必要があるという意味ではありません。 ページの下でアニメーションを簡単に使用したり、ヒーロー内で使用するアニメーションを制限したりできます。 良いバランスを見つけることが重要です。

タブレットとモバイルで折りたたみコンテンツの上を変更する

重要なCSSに関して言及することが重要な最後のことは、小さい画面サイズでのデザインの変更です。 折り畳み上のコンテンツがさまざまな画面サイズに最適化されていることを確認することが重要です。 デスクトップとモバイルの両方で優れたページ速度スコアに到達できるように、デザインを微調整する必要があります。 たとえば、モバイルでヒーロー画像全体を非表示にして、小さい画面サイズでページの速度を上げることができます。

2.スマートスタイルの使用

スマートスタイルのしくみ

新しいパフォーマンスアップデートにより、Diviは重複するスタイルを減らすことで最適化されました。 スマートスタイルを有効にするには、Diviプリセットの世界に飛び込む必要があります。 プリセットを使用すると、基本的に、同じ方法でスタイル設定された各要素にスタイルの一意のブロックを実際に割り当てることなく、さまざまな要素とスタイルを共有できます。

セクションと行に1つまたは2つのプリセットを使用する

セクションと行は2つの要素タイプであり、プリセットについて話すときに忘れられがちです。 モジュールと同様に、セクションと行にプリセットを割り当てることができます。 これは、生成されるCSSを制限するのに役立つだけでなく、ページレベルでデザインの一貫性を保つのにも役立ちます。 たとえば、各セクションに100pxの上下のパディングを一貫して使用して、垂直方向のリズムを作成したい場合、その過程でDiviプリセットの恩恵を受けない理由はありません。 これらのパディング値を使用するセクションの新しいプリセットを作成し、追加する新しいセクションごとに割り当てるか、デフォルトのセクションプリセットにします。

選択した幅と最大幅で行プリセットを設定し、それを標準にすることもできます。 これらのプリセットを試してみて、デザインプロセスが簡単になるだけでなく、ページ速度スコアの向上にも役立つことを発見してください。

モジュールのプリセットを使用する

もちろん、モジュールにもスマートスタイルを使用することをお勧めします。 以下の例では、各モジュールの全体的なルックアンドフィールが類似していることがわかります。 宣伝文モジュールのプリセットを作成すると、ページのCSSファイルを小さく保つのに役立ちます。

プリセットをオーバーライドするかどうか？

ただし、小さな変更ごとに新しいプリセットを作成するべきではありません。 たとえば、上記の例では、最後の2つの宣伝文モジュールのテキストの色が異なることがわかります。 古いプリセットを複製して、このための新しいプリセットを作成するか、プリセットを上書きすることを決定できます。 この場合、新しいプリセットを作成して複数行のCSSコードを追加するのではなく、テキストの色を上書きする方が理にかなっています（CSSコードが1行余分に表示されます）。

3.デザインの選択と速度のマッチング

使用するモジュールの選択を制限する（動的モジュール）

作成するページに使用するモジュールを選択するときは、これらが動的に読み込まれることを覚えておくとよいでしょう。 つまり、特定のモジュールを使用しない場合、ページ速度には影響しません。 追加する各モジュールを検討し、それが「価値がある」かどうかを確認する必要があります。 ただし、理想的なシナリオでは、残りのDiviコンテンツが十分に最適化されていることを確認して、モジュールを犠牲にする必要がないようにします。

デザインのLCPを見つけて最適化する

ページ速度を向上させるのに役立つもう1つのことは、最大のコンテンツフルペイントを見つけて最適化することです。 つまり、LCPは、ページ速度スコアを決定するのに役立つページ上の最大の要素です。 これについて詳しくは、こちらをご覧ください。 デザインのLCPが最適化されていることを確認することで、ページの読み込み時間を大幅に短縮できます。

アニメーションスタイルの選択（動的機能）

動的モジュールがあるのと同じように、動的機能もあります。 つまり、ページで特定の機能をまったく使用しないと、その機能が読み込まれず、ページ速度が速くなります。 この特定の理由から、アニメーションスタイルを選択し、それを維持することが重要です。 たとえば、モーションエフェクトを使用して、すべてのアニメーションをその機能を中心にページに集中させることができます。 または、通常のアニメーション設定に移動して、そのルートをたどることができます。 これにより、軽量のページを作成できるだけでなく、予測可能性も向上します。これは、ユーザーエクスペリエンスの面では通常は良いことです。

フォントペアリング：1つまたは2つのフォントファミリに固執する

また、デザインするページには最大2つのフォントファミリを使用することをお勧めします。 そうすることで、ページに入る前にロードする必要のあるフォントの数を制限します。

4.手動最適化

レスポンシブコンテンツ：モバイルで画像サイズを縮小する

モバイルページの速度スコアを上げるのに役立つもう1つのことは、Diviでのレスポンシブコンテンツの使用です。 これはおそらく、小さい画面サイズでスコアを最も良く改善するのに役立つ機能の1つです。 これにはもっと多くの努力が必要ですが、それは間違いなく価値があります。 画像編集ソフトウェアを使用して画像のサイズ/サイズを縮小し、デスクトップに表示する画像とは対照的に、モバイルでそれらの小さい画像を使用します。 これにより、画像ファイルのサイズが大幅に縮小され、モバイルでのページ速度が向上します。

ファイルの種類と圧縮

JPEGはファイルサイズが小さくなる傾向があるため、できるだけJPEGを使用するようにしてください。 PNGは通常、デザインを向上させるために画像に透明度が必要な場合にのみ意味がありますが、それでも、デザインを機能させるための代替手段を見つけることができます。 GIFなどの重いファイルタイプも避けてください。 ビデオに関しては、特にバックグラウンドで再生したい場合は、通常は使用できません。 そしてもちろん、WordPressメディアライブラリにアップロードする前であっても、使用するファイルを必ず圧縮してください。

舞台裏

上記のすべてのヒントは、ページの速度を向上させるのに役立ちますが、Divi以外でWebサイトの最適化のベストプラクティスに注意を払う必要があることに注意することが重要です。 この究極のガイドにアクセスすると、より技術的な洞察を見つけることができます。

Diviを使用した高速ページの作成—これまでになく簡単

Diviのパフォーマンス機能と、Webサイトの構築方法との間には、大きな重複があるという結論に簡単にたどり着くことができます。 Diviが部分的な側面を処理するため、すべてを美しく高速なWebサイトにまとめるために必要なフロントエンドのベストプラクティスに集中できます。 うまくいったベストプラクティスがある場合は、下のコメントセクションで自由に共有して、会話を続けてください。