ElementorWebサイトを高速化するための7つの実証済みのヒント
公開: 2019-11-05ご存知のとおり、Elementorは驚異的なページビルダープラグインであり、完全なWebサイトを簡単に調和させることができます。 ただし、一部のWebサイトには、読み込みが遅くなる問題がある場合があります。 最も重要なことは、多くのユーザーが実際に「ElementorWebサイトを高速化する方法」を知らないことです。
したがって、この問題が発生する理由とその解決方法を知ることは非常に重要です。 そのため、この記事では、ElementorWebサイトを高速化するための最も効果的で実績のあるヒントを紹介します。
そして、この記事の最後の部分では、避けるべき一般的な間違いについて説明します。
それ以上の苦労なしに、飛び込みましょう
Elementorはウェブサイトを遅くします：それは本当ですか
私たちは皆、Elementorについて1つのことをかなり認識しています。それは、非常に使いやすく、実装が速く、あらゆるタイプのデザインを作成するのに役立ちます。 ただし、Elementorを使用するWebサイトでは、読み込みが遅くなる構成になっている場合があります。
私のサイトのほとんどは、Googleの統計によると、2秒以上かかって読み込まれます。もちろん、この時間は、コンテンツやその他のいくつかの要因によって若干異なる場合があります–WP情報ブログ
Elementorだけでは、サイトの読み込みの問題については責任を負いません。 これには複数の理由があります。 たとえば、ホスティングの問題、サーバーエラー、大きなメディアファイル、外部スクリプト、追加のプラグイン、テーマのファイルなどがあります。
Kinstaの記事によると、さまざまな理由でWebサイトの速度が低下します。 そして彼らは、ウェブサイトがさまざまな側面で遅くなる理由を完全に説明しました。
したがって、事実を考慮して、次のパートでは、ElementorWebサイトを高速化する方法と従うべきことを示します。
ElementorWebサイトを高速化するための7つの実証済みのヒント
Elementor Page Builderを設計に実装する際の有効性と、考えられる結果についてはすでに知っています。 ですから、それについては疑いの余地はありません。 しかし、懸念される事実は、ElementorWebサイトの速度を低下させる問題です。
Elementorは多くのオプションと編集機能を提供します。 Elementorを使用してWebページを設計するのは非常に簡単で高速ですが、Webサイトを高速化したい場合は、次の基準を確認してください。
無料ホスティングサーバーを使用していない
オンラインプラットフォームでビジネスを運営している場合は、プレミアムホスティングを使用するのが賢明です。 したがって、あなたはあなたのウェブサイトをスピードアップするために最高のホスティングプランを使用する必要があります。 ご存知のとおり、ホスティングは重要です。 無料のホスティングサービスを使用しているため、ウェブサイトは読み込みが遅い、サーバーが利用できないなどの大きな影響を与える可能性があります。
「ElementorWebサイトの最良のホスティングプラン」に関する次の記事を確認してください。 この記事では、どのホスティングプランを取得する必要があるか、および他のホスティングサービスプロバイダーを示しました。
メディアのサイズ変更（画像、ビデオ、またはGIFファイル）
サイズを変更せずにメディアファイルを使用することは、非常に悪い習慣です。 これは、Webサイトの速度を低下させるだけでなく、Webサイトのパフォーマンスの低下、バウンス率の増加、サイトの可視性、Webトラフィックの増加などのWebサイトにも影響を及ぼします。
これを取り除くには、TinyPngを使用してメディアファイルのサイズを変更します。 これは素晴らしいツールです。 画像を完璧に最適化しますが、元の解像度を維持するためです。
外部スクリプトの使用を認識している
HTMLコード、JavaScript、その他のコードなど、外部スクリプトを追加する必要がある場合があります。 しかし、あなたは知っていますか？ これらのコードを使用すると、Webサイトの速度が低下する可能性があります。 はい、あなたはそれを正しく聞いています。
Googleマップ、Facebookの共有数、アバター画像などの外部スクリプトは、Webサイトの速度を低下させます。 しかし、これらはどのWebサイトにとっても非常に重要です。 では、どうしますか？
さて、WordPressサイトのfunction.phpファイルに次のコードを追加することで、Google Fonts、Font Awesome、およびEIconsを非アクティブ化できます。
Google Fonts
Elemenetorを本当に高速化し、他のスクリプトも使用したい場合は、次のコードを使用してGoogleFontsを非アクティブ化します。
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );FontAwesome
Font Awesomeを非アクティブ化するには、次のコードを使用します。
add_action( 'elementor/frontend/after_register_styles',function() { foreach( [ 'solid', 'regular', 'brands' ] as $style ) { wp_deregister_style( 'elementor-icons-fa-' . $style ); } }, 20 );考慮事項：デフォルトでは、Font Awesomeアイコンは、それらを使用するページにのみ読み込まれます。このため、FAは、FontAwesomeアイコンのあるページには読み込まれません。 したがって、それはあなたのウェブサイトにより速いパフォーマンスとより速いページスピードをもたらし、そしてそれはあなたのSEOとあなたのユーザー体験を容易にします。
EIcons
Font Awesomeアイコンを使用しないと本当に考えている場合は、FontAwesomeをデキューします。 そのため、Font Awesomeを無効にすると、どのWebページにもアイコンが表示されなくなります。
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet' , 20 ); function remove_default_stylesheet() { wp_deregister_style( 'emenetor-icons' ); {複数のプラグインの使用に注意してください
これはテクノロジーの現代です。 そして、WordPressエコシステムはウェブの34％を支配しています。 この巨大なプラットフォームを管理するために、WordPress業界では非常に多くのプラグインを利用できます。 しかし、それらのすべてがあなたにとって有用というわけではありません。
Webサイトで使用するプラグインが多すぎると、Webページの読み込みが遅くなることがあります。 したがって、プラグインを使用する前によく考えてください。 一方、完了したら、特定のプラグインを非アクティブ化します。
適切なテーマの選択
ウェブサイトに適切なテーマを使用することも重要な事実です。 Webサイトに適したテーマを使用する必要があります。
良いテーマはサイトを遅くするべきではありませんが、残念ながら多くのテーマが遅くなります– Elementor
あなたにできることは」
- 問題を引き起こしているテーマを非アクティブ化する
- テーマ20を使用できます。 （WordPressのデフォルトテーマに関する記事を読んでください）
- elementorのデフォルトテンプレートを使用するか、HappyElementorAddonsを選択してデザインを作成できます。
ボーナスのヒント
上記のヒントをWebサイトに実装した後、これらをWebサイトに適用する必要があります。 Webサイトのパフォーマンスを高速化するには、WPRocketとAutoptimizeを使用できます。
WPロケット
このプラグインは、次の方法であなたを容易にします：
- すべてのインラインおよび外部JSを1つのファイルに作成します
- プライマリスクリプトの前に、すべてのローカライズされたスクリプトをまとめて保持します
- （Tawk.to、WP Rockets lazyload、Google Analytics、Double Click Google Analytics）などのサードパーティを自動的に最適化する
- 怠惰なアップロードなどを後押しする
最適化
Autoptimizeは、非常に簡単な方法でWebサイトを最適化し続けます。 それは次の方法であなたを容易にすることができます：
- キャッシュスクリプトとスタイルを縮小できます
- デフォルトでページヘッドにCSSを挿入します
- 重要なCSSをインライン化
- 遅延読み込み画像を最適化するのは簡単
- また、GoogleFontsなどを最適化します。
避けるべき一般的な間違い
Elementorを適切に利用していますか？ 答えが「はい」の場合、危険にさらされている可能性があります。 しかし、そうでない場合は、この部分はあなたのためです。 このパートでは、すべてのElementorユーザーが犯す一般的な間違いと、それらの問題を克服する方法について説明します。
ただし、Elemetor Webサイトを高速化するために何に従うべきかについては、前のセクションですでに説明しました。
さて、始めましょう：
正しいテーマを使用していない
テーマはウェブサイトに完璧な構造を与えます。 しかし、適切なものを選択しないと、すべての努力が成功をもたらすことはありません。 人々はあなたのウェブサイトに来ないので、それは悪い印象を生み出すでしょう。
完璧なカスタマイズテーマはあなたの声を話し、また人々はあなたのビジネスで素晴らしい経験をするでしょう。 したがって、Webサイトに適したテーマを使用するか、テーマを最初からカスタマイズすることをお勧めします。 そしてグーグルはランクアップするだけでなくあなたのウェブサイトをスピードアップします。
キャッシュをクリアせずにカスタマイズ
もう1つのよくある間違いは、WebサイトのキャッシュをクリアせずにWebサイトをカスタマイズすることです。 ウェブサイトは常に調整と更新を経験しています。 したがって、編集または設計する前に、定期的にキャッシュをクリアすることが非常に重要です。
通常のMACユーザーの場合は、Windowsの場合はCommand+RおよびControl+Shift+Rを使用してキャッシュファイルをクリアできます。 このドキュメントを読んで、この問題を取り除くことができます。
画像を最適化していない
最適化された画像は、SEOに役立つだけでなく、高速読み込みページにも適しています。 多くのElementorユーザーは、実装する前に画像のサイズを変更しません。 その結果、ウェブサイトの重みが増し、読み込みが遅くなります。
前のセクションですでに述べたように、TinyPNGを使用して各写真のサイズを変更することを計画する必要があります。
デフォルトの色を使用しない
マイナーな問題ですが。 ただし、Webサイトに正しい色またはデフォルトの色を使用しないと、問題が発生する場合があります。 Elementorのデフォルトのカラーギャラリーから色を選択するための多くのオプションを取得できます。
これらの色は、ユーザーが使いやすいように正確に設計されています。 それはあなたの時間を大幅に節約し、またあなたのウェブサイト全体であなたの一貫性を保つのに役立ちます。
最終評決
すべての問題を短時間でカバーすることは完全には不可能です。 しかし、私たちはすべてのElementorユーザーが直面する重大な問題に焦点を当てようとしました。 自分で構築している場合、または開発者を雇うことを計画している場合は、Elementorを使用してWebサイトをカスタマイズするプロセスに十分注意してください。
お役に立てば幸いです。 手順を注意深く実行できれば、ElementorWebサイトを確実に高速化できます。
ただし、リストにあるべき一般的な間違いについて言及していないと思われる場合は、以下のコメントでお気軽に共有してください。