Elementorが重くてサイトが遅い!?高速化するための7つの対策

執筆者 | 更新日 2020年08月07日 | Elementorの使い方 | コメント0件

Elementorでサイトを作成していたり、ランディングページを作成すると、、、

「ページの表示スピードが遅くなる。」

と悩んでいませんか?今回は、Elementorユーザー向けにサイト・ページの表示速度を上げるための7つの対策をご紹介していきます。プログラマーではなくてもできる方法をピックアップしていますので、ご安心ください。

WordPressをインストールしElementorを導入した直後のパフォーマンス

01 Elementorを導入した状態のテスト scaled

まずは、新しくWordPressをインストールした直後に、Elementorを導入したばかりの時の僕のサイト(サブ)のパフォーマンスをご覧ください。導入したばかりといっても、Elementorの無料のテンプレートを使ってページを作成し、それをトップページに持ってきています。その方が、計測にばらつきが無いと思ったので、今回はページを作成してみました。

上の画像は、GTmetrixというサイトをトップページの表示速度をチェックした際のパフォーマンスです。

  • PageSpeed Score:83%
  • YSlow Score:87%
  • Fully Loaded Time(表示スピード):4.3秒
  • Total Page Size(ページのデータ):1.45MB
  • Requests(リクエスト数):52

という結果になっていました。ちなみに、この時の具体的な設定環境は、レンタルサーバーがエックスサーバー、インストールしていたテーマはTwentyTwentyです。それが、今回ご紹介していく対策を実践した結果、、、

05 HTTPのリクエスをを減らすコードを追加した後のテスト scaled

という結果になりました。

  • PageSpeed Score:98%
  • YSlow Score:92%
  • Fully Loaded Time:2.0秒
  • Total Page Size:390MB
  • Requests:24

どれも、大幅にパフォーマンスが改善しているのがわかると思います。

Elementorのサイトを高速化する際の注意点

今、僕の実践結果をご紹介しましたが、もちろん、全く同じ結果が得られるわけではありません。(しかし、多かれ少なかれ改善できるはずです。)サイトの設定環境などによって、異なってきます。また、今後記事を書いていくと、どんどんファイルが溜まっていくので、それが原因で遅くなることもあります。

表示スピードは、ランク付の要因の1つではあるが、劇的にランクが上がるわけではないので、完璧主義にならないようにしましょう。スピードを追い求めて、1週間とか悩むくらいならしっかりした記事を2,3記事書いた方がずっと良いです。

対策#01. 高品質なレンタルサーバーを契約する

まずは、高品質なレンタルサーバーを契約するという対策です。僕は、エックスサーバーというレンタルサーバーを契約していますが、大手のもので、評判の良いサーバーをかりましょう。例えば、ほとんど使っている人がいないようなマイナーなサーバーだと、遅かったり、安定していなかったりするので、そういった場合はサーバーを乗り換えることをお勧めします。

対策#02. Elementorと相性の良い高速なテーマを使用する

2つ目の対策は、Elementorと相性の良い高速なテーマを使用するということです。Elementorと相性の良いテーマはたくさんありますが、

  • Hello
  • Astra
  • Ocean WP

あたりがおすすめです。Helloテーマは、Elementorが公式に配布しているものなので、一番安心感があると思います。ファイルサイズが若干異なってきますが、微妙に違うくらいなので、それぞれインストールして外観をチェックし、ご自身の好みで選ぶと良いと思います。ちなみに、僕はAstraを使用しています。

チェック他にもElementorと相性の良いテーマがあります。詳細を確認したい場合は、『Elementorにおすすめな無料テーマまとめ』記事をご覧ください。

対策#03. プラグインを使って高速化する方法

ここからは、プラグインを使った高速化の方法をいくつかご紹介していきます。プラグインは、たまにお互い干渉し合って、不具合が生じてしまう可能性がありますので、その場合はプラグインを無効化するか、削除して対応してみてください。

Autoptimize

まずは、Autoptimizeというプラグインです。このプラグインは、HTMLやCSS、JavaScriptのコードを縮小してくれる機能があります。コードをいじれる方であれば手動で設定できますが、知識がない人が設定してしまうとサイトの外観が崩れてしまったりと、サイトに不具合が生じる原因になるので、その場合はこのプラグインをインストールしておきましょう。

チェック!Autoptimizeの設定や使い方は、『Autoptimizeプラグインの設定と使い方 – HTMLやCSS、JavaScriptを圧縮しサイトを高速化!』記事をご覧ください。

EWWW Image Optimizer

Ewww Image Optimizerは、画像を自動で最適化してくれるプラグインです。画像の画質を劣化させずに、容量を小さくしてくれます。このプラグインをインストールする前までにアップした画像に関しては、手動で最適化する必要がありますが、一旦インストールしてしまえば、それ以降は自動的に最適化してくれます。

チェック!EWWW Image Optimizerの設定や使い方は、『表示スピードアップに効果的!EWWW Image Optimizerの設定と使い方』記事をご覧ください。

WP Fastest Cache

WP Fastest Cacheは、キャッシュを削除してくれるプラグインです。そもそもキャッシュというのは、閲覧したことのあるサイトの情報を溜めておいて、次に閲覧する際にそのデータをもとにページを開いてくれるというものです。新しくデータを取得する必要がないので、より早く開けるという仕組みになっています。

じゃあ、キャッシュを溜めておいた方が良いんじゃないの?と思うかもしれませんが、キャッシュもデータの一種です。キャッシュが蓄積されると、データベースをの容量を圧迫してしまうという表示スピードに対するデメリットもあります。そのキャッシュを削除するために、キャッシュ系のプラグインを導入します。いろんなプラグインがありますが、おすすめなのは、WP Fastest Cacheというプラグインです。

ただし、キャッシュ系のプラグインを導入する際、1つ注意点があって、不具合が生じる可能性が他のプラグインよりも若干高いです。特に、WooCommerceなどの決済を伴うプラグインを使っている方は、導入しない方が良いです。決済をしてもらう際に、クレジットカードを入力してもらって、購入ボタンは押したけど、ずっと決済フォームがロードしている状態になるなどの不具合が生じる可能性があります。

Optimize Database after Deleting Revisions

このプラグインは、リビジョンを削除してくれるという機能があります。リビジョンは、記事を編集する際や自動保存される際に残る編集履歴のことです。このリビジョンは消さないとどんどん溜まる一方で、レンタルサーバーのデータベース容量を圧迫する原因になります。

特に、1つの記事を何度も修正したり、下書きを保存する人におすすめです。記事を一発で書いて公開してしまう人は、あまり必要ないプラグインなので、その場合はインストールしなくてOKです。

対策#04. Cloudflareを使って高速化する方法

4つ目の対策は、CloudflareというCDNを使うものです。

対策#05. 重たいプラグインを無効化する(もしくは削除する)

5つ目は、重たいプラグインを無効化、もしくは削除するという対策です。プラグインは、非常に便利ですが、何でもかんでもインストールすれば良いというものではありません。データベースを圧迫する原因になりますし、他のプラグインと干渉してサイトの外観が崩れる可能性もあります。なので、余分なプラグインがあれば、無効化しておきましょう。

Yoast SEO vs Rank Math

SEOプラグインは、多くの方が入れていると思います。僕は、Rank Mathというプラグインを使用しています。その理由は2つあって、まず1点目は、Yoast SEOのPro版(有料プラン)で可能な設定項目が無料で設定できるからです。

yoast seo vs rank math

2点目は、軽いという理由です。上の画像は、Rank Mathの公式サイトのものです。Yoast SEOの方が3倍もサイズが大きいことがわかると思います。この2つの理由があり、Yoast SEOからRank Mathに乗り換えました。このように、同じような機能のプラグインがあれば、よりファイルサイズが軽い方を使うようにしましょう。

プラグインの容量をチェックできるおすすめのプラグイン

Disk Usage Sunburst

もし、プラグインの量量を調べたい場合は、Disk Usage Sunburstというプラグインを使用してみてください。

「ツール」にある「Disk Usage」

インストールすると、「ツール」に「Disk Usage」という項目が追加されるので、クリックして移動します。

Disk Usage Sunburstの使い方

すると、上の画像のように図で、サイト全体の容量を表示してくれます。プラグインの位置はサイトによってバラバラなので、自力で探して、どれくらいの容量になっているかを確認してみてください。ちなみに、今回の場合は、オレンジの部分がプラグインの容量になっていて、もう一つ外側を確認すると、インストールしているそれぞれのプラグインの容量が表示されます。また、オレンジの部分をクリックすると、もっと細かいデータが確認できるようになります。

Disk Usage Sunburstプラグインを使うと、このように容量をチェックできますが、ずっと使い続けるのではなく、速度が遅いと感じた時にインストール・有効化して、必要がなくなったら、削除もしくは無効化してしまってOKです。

対策#06. HTTPリクエストを減らす

6つ目の対策は、HTTPリクエストを減らすというものです。前述したAutoptimizeプラグインをインストールして、基本的な設定をすれば、HTTPリクエストを減らすことができます。

WP Fastest CacheでHTTPリクエストを減らす方法

また、WP Fastest Cacheプラグインでも、

  • CSSの結合:CSSファイルを結合してHTTPリクエストを減らす
  • JSの結合:JSファイルを結合してHTTPリクエストを減らす

にチェックを入れておけば、HTTPリクエストを減らすことができます。ただし、両方のプラグインで設定する必要はありません。どちらか一方で設定しておけばOKです。

さらに、HTTPリクエストを減らしたい場合は、コードを追加します。上記のコードを入力するのですが、インストールしているテーマの「function.php」に記入します。

function.phpにコードを追加してHTTPリクエストを減らす

まず「外観」の「テーマエディター」に移動し、ファイルを「function.php」に切り替えます。そしたら、2行のコードを一番最後の行に追記して、「ファイルを更新」してみてください。

対策#07. Gzip

GZIPは、サーバーから訪問者のブラウザーに送信されるファイルを圧縮するのに使用される、一種のデータ圧縮プログラムです。コードを追加してやるやり方もありますが、WP Fastest Cacheをインストールしている方であれば、設定画面でGzipの圧縮項目が用意されています。

WP Fastest CacheでのGzipの圧縮

「設定」タブの下の方に「Gzip 圧縮」という項目があるので、ここにチェックを入れておきましょう。

まとめ

表示スピードは、ランキングシグナルの要因に追加されているのは、Googleの公式発表によってご存知の方もたくさんいると思います。したがって、定期的に表示スピードのチェックは重要ですが、スピードをアップさせようと、1週間とか1ヶ月とか躍起になって対策をするのはナンセンスです。

スピードを上げたからといって、爆発的に順位が上がるわけではありません。ランキングシグナルの要素はたくさんあり、表示スピードはその内の1つでしかありません。なので、ある程度パフォーマンスが上がったら、それで一旦対策をやめて、良質な記事を作成するようにしましょう。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?