Elementorが重い?原因と解決方法

Elementorが重い?原因と高速化する方法【無料】

『Elementorは重い』
『最初はElementorは遅くなかったのに』

こんな風に思ったことありますか?

Elementorは何もしなければ遅くない

これElementor(エレメンター)で作ったサイトです。
特に何も加えてません。
https://gtmatrix.comというサイトを使ってスピードを測りました。
1.7秒でカナダのサーバーからロードしてます。

何もしてないのに1.7秒です。

サイトも小さいサイトではなく、この記事と同じ方法で作りました。
Astra + Elementorでウェブサイトを10分で作る方法【無料で初心者でもできます】

なのでもしあなたのElementorのサイトが遅いなら、Elementor以外に原因があります。
この記事ではサイトが重い典型的な原因とその解決方法を説明します。
あなたのサイトを高速化しましょう

※この記事では日本語フォントについて触れていませんが、サイト速度を上げるために日本語フォントを読み込ませないようにする設定方法を説明した動画もありますのでぜひご覧ください。

最後に裏技を二つ紹介してますので、最後までみてくださいね。

それでは始めます!

画像がしっかり最適化されてないから

Elementorが重い理由は画像にあり

まず第一の原因は画像にあります。
重い画像を使えば、サイトは重くなるのです。
では重くなる原因は何でしょう?

写真はJPG、色の少ない画像のみPNG

あなたのサイトの写真がもしPNGなら、いますぐJPGにしましょう。
https://nocodeweb.jp/png-jpg/
ここにドラッグ&ドロップするだけでPNGをJPGに変換できます。

PNGは透明画像や、小さく色の少ない画像に使います。
GIFはアニメーションのみ
と考えてください。

画像の寸法が大きすぎる

寸法大きい画像は重いです。
なのでロゴなどの小さい画像を何千pxでアップロードする必要はないのです。
遅いページにある画像の寸法を調べて見ましょう。

画像が圧縮されてない

画像は実は要らない情報が沢山入っていて、無駄に重くなってることがあります。
画像を圧縮するとはそれらの情報を削ってファイルのサイズを小さくすることです。
その方法は色々ありますが、オススメはこのプラグインです。

Compress JPEG & PNG imagesで寸法縮小と画像圧縮

このCompress JPEG & PNG imagesというプラグインを使うと、WordPressに画像をアップロードした時に、自動縮小そして圧縮してくれます。
EWWWの圧縮率は高くないので、オススメできません。

画像を縮小+圧縮してサイトを軽くしましょう!

画面外の画像もロードされてるから【Lazy Loadで解決】

画像のLazy Load

画面の外にある画像はすぐには見えなくても構いませんよね。
ですがそれらのファイルもロードされてしまうんです。
これのせいでかなりサイトの読み込みに時間がかかってしまいます。

WP RocketでLazy Load

個人的に一番好きなプラグインはWP Rocketです。
このプラグイン一つで、Lazy Loadだけじゃなく他の高速化もしてくれます。
しかもYouTubeもLazy Loadしてくれる優れものです。
このサイトもWP Rocketで高速化しています。
ですがこれは無料プラグインではないので、全員にすすめるものではありません。

a3 Lazy Load

a3 Lazy Load

このプラグインは普通にWordPressのサーチで出てきます。
無料なのにかなり使えるプラグインです。

この動画で詳しく説明しています。
この動画もLazy Loadされています!

遅くなるプラグインを使ってはいませんか?

プラグインによってはサイトを遅くします。

サイトが遅くなるプラグインリスト

  • AddThis
  • All-In-One Event Calendar
  • Backup Buddy
  • Better WordPress Google XML Sitemaps
  • Broken Link checker
  • Contact Form 7(そうなんです、これも遅くなります)
  • Contextual Related Posts
  • Google Analytics
  • Google XML Sitemaps
  • Jetpack
  • Yet Another Related Post Plugin(これは自分も使ってる汗。すぐに対策しないと)

他にもまだまだあります。
よくみるプラグインですよね。
これらを使ってる方は、実験として停止してスピードを測ってみてください
個人的な経験ですが、AddThisとJetpackはかなりサイトを遅くしますね。気をつけましょう。

決して使ってはいけないというわけではないです。
ですが全てのページで常に必要なプラグインってそこまでないですよね。
ではどうやってページ別やプラグインを部分的に使うのか説明します。

無駄なファイルのロードは遅くなる原因

Elementorが重い原因は無駄なファイルのロード

次にElementorが遅くなる原因は、他のプラグインやテーマがロードする大量のファイルです。
ブラウザは一度にロード出来る量のファイルが決まってますし、ファイルによってはそれがロードされるまで次のものがロードされないということもあります。

ページで使ってないものまでロードされる

例えば何もインストールしてないWordPress自体も色々なファイルをサイト全体でロードします。
それをそのページが使ってなくてもです。
例えば、WordPressの記事にYouTubeのリンクを貼ると自動で動画がロードされますよね。
あれはWordPressがそのためのJavaScriptのファイルをロードしてるから可能なんです。
でもElementor使ってたらその必要ないですよね。

「理屈はわかったけど、WordPressがロードしてるものを除外する方法なんてあるの?」

Asset cleanup: page speed boosterでいらないファイルを除外

Asset CleanUp: Page Speed Booster

このAsset cleanupというプラグインを使うと、必要なものだけページにロードすることが出来ます。
詳しくはこちらの記事で説明していますので、参考にしてください。

Asset CleanUp: Page Speed Boosterの基本的な使い方【WP高速化必須のプラグイン】

『取り敢えずプラグインいれておくか』は絶対やめる

取り敢えずいれただけで、要らないファイルがロードされる可能性があります。
プラグインは必要なものだけいれ、他はインストールすらしないことをオススメします。

キャッシュしないとサイトは遅くなってしまう

Elementorが重い原因はキャッシュが設定されてないから

WordPressのページが作成される時、実はWordPressは色々な作業をして、膨大なCPUの力を使います。
しかも毎回です。
そこで登場するのがキャッシュです。
簡単に言えばキャッシュとは『一度作ったページは保存しておいて次に誰かがサイトにきたらそれを表示しよう』
そしてキャッシュは、WordPress側でのキャッシュサーバー側でのキャッシュがあります。
もちろんブラウザのキャッシュもありますが、それはブラウザの設定でどうにでもなるので、今回は割愛します。

WordPressのプラグインでキャッシュ

こちらは一般的に知られてるキャッシュです。
簡単に言うと、JavaScriptやCSSのファイルを集めて、少数のファイルにし保存、そしてなるべくWordPress側での作業を減らすことによりサイトを速くします。
このような何かしらのキャッシュのプラグインを使ってる人が多いと思います。

無料でオススメはWP Fastest Cache

無料でオススメはWP Fastest Cache

WP Fastest Cache自分が個人的に使ってるキャッシュのプラグインの一つです。
『WP Fastest Cache』とサーチすれば出てきます。

WP Fastest Cacheの設定

インストールしたらこのように設定して保存します。

これだけでローカルでテストしていたElementorのサイトのロードスピードが、『1.9秒から0.4秒』になりました。

サーバーでキャッシュ

WordPressもサーバーにあるんじゃないの?と思うと思いますが、その通りです。
ですが、WordPressはサーバーの上にあると考えてください。
WordPressは結局はサーバーの速さに左右されますので、サーバー側が常時WordPressが必要なファイルをロード出来る準備をしていれば、サイトのロードスピードも向上するわけです。

これはホスティング会社によって変わってきます。
自分がElementorのホスティングにオススメする、エックスサーバーConohaWIngも勿論サーバー側のキャッシュを持っています。

エックスサーバーのXアクセラレータ

エックスサーバー には独自のキャッシュシステムがあり、Xアクセラレータと呼ばれています。
もしエックスサーバー をお使いの方は、このページに従って設定してみましょう。

https://www.xserver.ne.jp/manual/man_server_xaccelerator.php

ConohaWingのコンテンツキャッシュ

ConohaWingにもサーバー側のキャッシュがあり、コンテンツキャッシュと呼ばれています。
このページから設定出来ます。

https://support.conoha.jp/w/contentscache/

このようにWordPresseのキャッシュと、サーバー側のキャッシュを使い、Elementorのサイトを高速化させましょう。

日本のテーマを使うとElementorは遅くなる

そうなんです、日本のテーマはElementorと相性がよく無い
なので日本のテーマを使ってるとElementorが重くなることが結構あります。

オススメはAstra

このツイートでも紹介してますが、オススメはこのブログも使ってるAstraです。
WordPressnのテーマ検索で『Astra』と検索すると出てきます。

Astraも入れて7つのテーマをオススメしています。
詳しくはこの記事からどうぞ。
>>Elementorと使うべきテーマはこの8つから選ぶべし!【じゃないとサイトが遅くなります】

サーバーによって速さが大分変わる

これはとてもシンプルで、遅いサーバーでElementorを使えば遅くなるわけです。
どんなに最適化しても、速いサーバーには敵いません。

Elementorは通常のWordPressよりリソースヘビー

やはり色々と見たまま出来てしまうElementorですから、通常のWordPressより必要なCPUパワーやメモリの量は大きくなります。
なので安さだけでサーバーを選んでしまうと、後悔するかもしれません。

Elementor使うならエックスサーバー とConohaWing

やはり自分のオススメはこの二つです。
どちらも無料期間があるので、是非試してみてください。
エックスサーバー
ConohaWIng

オススメできないロリポップ

逆にオススメ出来ないのが、ロリポップです。
自分が運営してるElementorのサロン内でも、問題が起きると結構な確率でロリポップのサーバーを使ってることが多いです。
使えないことはないと思いますが、今からElementorを使ってサイト構築をするならロリポップはオススメしません

Elementorが重い原因の解決方法まとめ

  • 画像のフォーマットと寸法をしっかり設定
  • 画像を圧縮する
  • 画像をLazy Loadする
  • 遅いプラグインは使わない
  • ページに余計なものをロードしない
  • 日本のWordPressテーマを使わない(オススメはAstra)
  • WordPressでキャッシュ
  • サーバーでキャッシュ
  • 速いサーバーを選ぶ

これらがしっかり設定されてるか、もう一度あなたのElementorのサイトを見て見ましょう。

Elementor高速化の二つの裏技

先日色々と実験していて、Elementorを高速化するための裏技を見つけました。

背景画像のLazy Load

Elementorは通常の画像は遅延読み込み(Lazy Load)できますが、背景画像はできないんですね。
ですが、やり方を見つけました。この動画でどうやってそれを可能にするのか説明しています。

Elementorの必要なアイコンだけロードする

Elementorが遅くなる原因の一つがアイコンです。アイコンを一箇所でも使うと全てのアイコンをロードしますのでこれで少し遅くなります。これを解消する方法をこの動画で説明しています。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。


もし何か質問があれば、Elementor使いが結構集まってる自分のサロンをのぞいて見てください。
この記事で説明しています。

また、Elementorの他のトラブルシューティング等を記載した記事もありますのでよかったらこちらもご覧くださいね!

それでは!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通