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

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

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

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

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

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

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

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

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

無料WordPress高速化の手順フローチャート

「ちょっとこんな長い記事読んでられない、今すぐ高速化したい!」
そんな方はこの無料の『WordPress高速化の手順』のフローチャートをダウンロードしましょう!
高速化の仕組みが一目でわかるフローチャートです。

それでは始めます!

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

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

https://nocodeweb.jp/how-to-use-asset-cleanup-page-speed-booster/

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

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

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

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と使うべきテーマはこの7つから選ぶべし!【じゃないとサイトが遅くなります】

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは!

コメントする

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

Scroll to Top