新しいDiviパフォーマンスアップデートは、ページの読み込み時間を改善するための多数のオプションを提供します。 今日は、Diviページをゼロからすばやく作成するための役立つ提案とショートカットをいくつか紹介します。 実際、これらのガイドラインは実際にはルールではなく提案です。 それは常にあなたのページの主要な目標に依存するでしょう。 複雑なプロジェクトでは、パフォーマンスをいくらか犠牲にする必要がある場合があり、その逆もあります。 デザインと速度のバランスを維持することがすべてですが、これらのガイドラインに従うことで、 Diviサイトを大幅に高速化できます。
ヒント1-折り目の上に配置されたコンテンツの最適化
Diviの新しい機能セットにはCriticalCSSと呼ばれるパフォーマンス機能があります。 アバブザフォールドCSSを使用すると、ページの残りのCSSの読み込みを遅らせながら、ページを問題なく読み込むために必要なCSSを検出できます。 これ自体が、ユーザーの関与なしにページの読み込み時間を短縮するのに役立ちます。 ただし、さらに1マイル進むことを好む人のために、折り目の上に表示されるコンテンツに焦点を当てることもできます。
4モジュールのヒーローセクション
最初は、訪問者にできるだけ多くの情報を提供したくなるかもしれませんが、それはまさにヒーローで避けたいことです。 あなたの素材が強いほど、あなたのスタイルと視覚的な魅力はより関連性があります。 Diviページの読み込みを高速化するには、折り畳みより上で使用するモジュールの数を最小限に抑えます。 完璧なシナリオでは、次を使用します。
- 題名
- 段落
- ボタン
聴衆に主題をより明確にするために、いくつかの画像を追加する必要があるかもしれません。 その場合、背景としての画像は避けてください。 バックグラウンドの代わりに、コンテナ内のモジュールとして使用してください。 小さい画像を使用すると役立つため、コンテナの幅を最大に保ちます。 間違いなく、これはあなたのウェブサイトの速度を上げるでしょう、それで4モジュールのヒーローセクションの概念は-
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始める- 題名
- 段落
- ボタン
- 最適化された画像
フルスクリーンヒーローセクションを使用する
フルスクリーンのヒーローデザインが目立つのには理由があります。 デザインの通気性を向上させるだけでなく、重要なCSS操作にも役立ちます。 フルスクリーンのヒーローと一緒にいる限り、サイズに関係なく、モニターの折り目の上には何も表示されません。 Diviフルスクリーンヒーローの最小の高さは「100vh」で、セクション設定にあります。 min-heightを使用すると、すべてのブラウザーでセクションが最大幅で表示されるようになります。 セクション内に置いたものはすべて、今後のヒーローの見方の一部になります。 もう1つのオプションは、Diviの組み込みのフルスクリーンヘッダーを利用することです。
フルスクリーンのヒーローが必要ない場合は、折り目の上のコンテンツを部分に分割できます。 Diviは、折り目の上のコンテンツを自動的に検出します。 つまり、折り目以下にまたがる大きなセクションを設計すると、そのすべてのCSS（および要素のCSS）が読み込まれます。 多くのセクションを作成すると、フォールドの上に分類されるコンポーネントが多すぎるのを防ぐのに役立ちます。
ヒーローセクションでのアニメーションの回避
アニメーションを含め、読み込み時間を遅くする折り畳みより上のものは避ける必要があります。 それはあなたがそれを避けるべきだという意味ではありません。 ページと一緒に、および/またはヒーロー内でアニメーションを簡単に使用できます。 バランスをとることが重要です。
タブレットとモバイル向けの折り畳みコンテンツの上
最後になりましたが、Critical CSSを使用すると、スマートフォンのデザインを変更できます。 折り畳み上の素材は、さまざまな画面サイズに合わせて調整する必要があります。 Webとモバイルの両方のデザインを最適化することがすべてです。 たとえば、モバイルでヒーロー画像全体を非表示にして、ページ速度を向上させることができます。
ヒント2-スマートスタイルを使用する
使い方
伝えられるところによると、Diviは最近のパフォーマンスアップデートで重複スタイルを減らしました。 スマートスタイルを有効にするには、Diviプリセットでネットサーフィンする必要があります。 これにより、新しいブロックに割り当てることなく、同じ方法でさまざまな要素とレイアウトを共有できます。
セクションと行に1つまたは2つのプリセットを使用する
セクションと行は、プリセットについて説明するときに通常見落とされる2要素のカテゴリです。 セクションと行は、モジュールと同じようにパラメータを持つことができます。 これは、生成されるCSSを制限するだけでなく、ページデザインの整合性を維持するのにも役立ちます。 各セクションの上部と下部に100pxのパディングを定期的に使用して、垂直方向のリズムを確立するとします。 Diviプリセットはそれを助けることができます。 これらのパディング設定を利用する新しいセクションプリセットを作成し、追加する新しいセクションごとに適用するか、デフォルトのセクションプリセットとして設定します。
カスタムの幅と高さで行プリセットを作成することもできます。 これらのプリセットを試して、より高速なページの開発にどのように役立つかを確認してください。
モジュールのプリセット
モジュールはスマートスタイルも使用できます。 ここでは、各モジュールがどのように似ているかを確認できます。 宣伝文モジュールのプリセットを作成して、CSSセクションをセクションに対して一定に保つことができます。
ヒント3-速度を考慮した設計
動的モジュール
ページのモジュールを選択するときは、動的に取得されることに注意してください。 モジュールを使用しなくても、ページのパフォーマンスには影響しません。 追加する各モジュールは、「値」について評価する必要があります。 理想的には、モジュールを犠牲にする必要がないように、Diviコンテンツを最適化します。
デザインのLCPを見つけて最適化する
最大のコンテンツフルペイントを見つけて洗練することも、ページのスピードアップに役立つ可能性があります。 簡単に言うと、LCPによってページの読み込みスコアが決まります。デザインのLCPを最適化することで、ページの読み込み時間を大幅に短縮できます。
アニメーションスタイル
カスタマイズ可能なモジュールと機能があります。 ページで使用されていない機能は取得されないため、ページが高速になります。 このため、視覚的なスタイルを選択し、それを維持することが重要です。 たとえば、モーションエフェクトを使用して、ページ上のすべてのアニメーションをその周りに配置することができます。 または、通常のアニメーション設定を使用できます。 これにより、Webサイトの軽量化だけでなく、予測可能性も可能になります。これは通常、ユーザーエクスペリエンスにとって良いことです。
フォントの選択
フォントは、Webデザインの貴重なコンポーネントです。 使用するフォントが多いほど、読み込み時間が長くなるため、3つ以上のフォントを使用しないようにしてください。
ヒント4-手動最適化
モバイル向けの画像スケーリング
Diviでレスポンシブコンテンツを使用すると、モバイルページの速度も向上します。 これは間違いなく、小さな画面で最も優れた機能の1つです。 もっと手間がかかりますが、それだけの価値はあります。 画像編集ツールを使用して画像サイズを縮小し、デスクトップの大きな写真ではなく、モバイルの小さな写真を使用します。 これにより、画像ファイルのサイズが劇的に減少し、モバイルページの速度が向上します。
画像圧縮
ファイルサイズが小さくなるため、画像形式のJPEGはできるだけ多く保持してください。 PNGは、デザインを向上させるために写真の不透明度を上げる必要がある場合にのみ役立ちますが、それでも解決策を見つけることができます。 GIFのような大きなファイルタイプは避けてください。 特にバックグラウンドで投影する場合は、通常、ビデオは許可されません。 また、WordPressメディアライブラリにアップロードする前に、ファイルを最小化してください。
最後の言葉
Diviの新しいパフォーマンス機能は重要な大きなステップですが、それを念頭に置いてWebサイトを構築しない限り、それは重要ではありません。 Diviが詳細を処理するため、美しく機能的なWebサイトの設計に集中できます。 Divi Webサイトをより効率的にする方法についてアイデアがあれば、コメントでお知らせください。 また、この投稿を友達や家族と共有して、彼らもその恩恵を受けることができるようにしてください。
