アストラテーマのホームスライダーの読み込み速度とパフォーマンスを最適化する方法

Astraテーマのホームページを追加するスライダースライド画像のサイズが大きすぎたり、リソースが圧縮されていなかったり、スクリプトの読み込みが最適化されていなかったりすると、ホームページの読み込み速度が遅くなり、ページの遅延が発生したり、最初の画面の表示速度が遅くなったりして、全体的な訪問者の体験や検索エンジンの評価に影響を与えることがよくあります。

これらの問題を解決するために、本記事では、Astraテーマでスライドショーを使用する際の読み込みパフォーマンスと視覚効果のバランスを実現するために、画像の最適化、スクリプトの管理、プラグインの選択、キャッシュの設定など、多角的な視点から実現可能な最適化方法をご紹介します。

I. 軽量スライダープラグインの選択

すべてではないスライドショープラグインいずれもスピードを求めるサイトに適しています。以下のスライダーを優先的にお勧めします：

スマートスライダー3フル機能を備えながらも、多くのユーザーにとって合理的な構造

メタスライダーシンプルなインターフェイスで、基本的な表示ニーズに対応

グーテンスライダーグーテンベルク・エディターのためのデザイン

Elementorにはスライダーコンポーネントが付属しています。マッチングアストラ＋エレメンタ最も適合性が高い

対照的に、複雑な機能を持つプラグイン（Slider Revolutionなど）は、ビジュアルはリッチだが読み込みに時間がかかるため、軽量なサイト構築には不向きだ。

スライダー画像リソースの最適化

スライドショーの主なリソースは画像です。スピードアップの鍵は、圧縮とフォーマットのコントロールです：

画像の幅は、以下の範囲に制限することをお勧めします。 1920px
利用する ウェブピー フォーマッティングJPG/PNGを置き換える

1枚の画像のサイズは以下のように制限することを推奨します。 200KB以下
TinyPNG、Squooshなどのツールで一括圧縮。

さらに、最初の画像だけを読み込み、他の画像の読み込みを遅らせることで、最初のページの重さを減らすことができます。

III.遅延ロードの有効化

多くのパフォーマンス・プラグインは、ユーザーがスライドショー・エリアにスワイプしたときだけ、後続の画像をロードする、画像の遅延ロードを提供します。

おすすめだ：

LiteSpeed キャッシュ
WPロケット
パーフマターズ
フライングプレス

これらのプラグインは自動的にスライダー画像を認識し、読み込みを遅らせて最初の画面のレンダリング速度を向上させます。

IV.スライダースクリプトの実行遅延

スライダーコンポーネントはJavaScriptアニメーションやトグル・スクリプトに依存することが多く、メインページのスレッドをブロックする傾向があります。

推薦します：

パフォーマンス・プラグインでスライダーのJSスクリプトの実行を遅らせる
ディレイリストにスライダー関連のJSを追加（ディレイJS）

Flying Scriptsプラグインを使用している場合は、キーワードを設定することができます（たとえば、以下のように）。 スライダー)の実行を遅らせ、ブロッキングを減らす。

V. スライダー構造の複雑さの制御

スライド階層と動的アニメーションを最小限に抑える：

内に秘める スライド3～5枚
各シートは1枚の絵と短い文章で構成されている。
自動を無効にする回す重複レンダリングを減らす機能

動画、アイコン、ボタンなどを何重にも重ねるのは避ける。

構造がきれいであればあるほど、読み込みが速くなり、フロントエンドのレンダリングへのストレスが軽減される。

キャッシュとCDNアクセラレーション

キャッシュとCDN スライダーのパフォーマンス最適化に欠かせないツール。

運営上の提言

LiteSpeed CacheやWP Rocketなどのキャッシュプラグインを使用する。

画像やJSスクリプトをCloudflareやBunnyCDNのようなCDNにホスティングする。

オブジェクト・キャッシュを有効にしてデータベースへのリクエストを減らす

キャッシュは各ページのリクエストに対するPHPとデータベースの負担を軽減し、CDNはグローバルな読み込み速度を向上させる。

モバイル・スライダーの最適化

スライダーはモバイルへの適応が悪いので、推奨する：

モバイルではスライダーの代わりに静的バナーを使用する
Elementorユーザーは、"デスクトップ専用 "スライダーモジュールを設定することができます。
モバイルスライドの内容を簡素化するアニメ複数画像での切り替え

モバイルローディングをすっきりと鮮明に保つことは、アクセスパフォーマンスと可読性の向上に役立ちます。

まとめ

アストラ構造自体は軽量ですが、スライダーを追加すると、適切に処理されない場合、ページのリソースが肥大化し、速度が低下する可能性があります。スライダープラグインの合理的な選択、圧縮画像、遅延スクリプト、キャッシュの設定、レイジーローディングやCDN技術と組み合わせさえすれば、視覚効果とパフォーマンスのバランスを取ることができます。

もしあなたのサイトが重要なコンテンツを紹介するためにスライダーを使用しているなら、今が最適化する良い機会です。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み