WordPressのテーマビルダープラグイン「Elementor」のファンブログ

「Elementorは重い」と言わせない!3つのプラグイン

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
elementor_slow

みんながElementorについて気になっている重いという言葉

elementor_slow

Googleのサジェストからもわかる様に、みなさんElementorの重さを懸念されてますね。Elementorは重いってキーワードはインパクト大きいですよね・・・それでElementorの導入を迷っている方も多いのではないでしょうか?

そこで、Elementorを導入しても重いとは言わせない!と題し、軽くしてみたいと思います。

(注意)WordPressの環境、他のプラグインとの干渉などにより、希望する結果にならない、または不具合などが発生する可能性もありますのでご了承ください。

3つのプラグインはこれだ!

Autoptimize


JSやCSSなどのコードを最適化してくれるプラグインです。

a3 Lazy Load


画像表示を遅延させ、見る人にストレスを与えないようにするプラグインです。
(読み込み中で画像のところにクルクル回るやつ)

EWWW Image Optimizer


画像の最適化を行ってくれるプラグインです。

※Elementor Fanで実際導入しています。

上記を導入するにあたり、自分に下記のチェック項目を設けて、そのチェックをクリアしない限りは導入しない!というルールの元、上記3プラグインを導入しております。

自分に厳しく導入決定3つのチェック

チェック1:入れるからには早くなれ!

GoogleのPageSpeed Insights


プラグインを導入し、少しでも早くなったものをクリアとしました。

チェック2:Elementorファーストであれ!

Elementorが使えなくては意味がありません。新規テンプレートの追加、編集、公開、実際の反映など、プラグインを入れるごとに挙動をチェックし、問題ないものをクリアとしました。

チェック3:簡単じゃないとだめなんだ。

プログラムに詳しくないからElementorを使う人も少なくはないと思います。なのに〜ファイルを書き換えて・・・などの工程を必要とするプラグインは除外しました。WordPressの管理画面で設定が完了できるものをクリアとしました。

気になる結果は?

speedtest
84ポイント!平均ど真ん中ってところでしょうか。モバイルはもう少し改善が必要ですが、それでも平均ポイントにはなっています。

これでもElementorは重いと言えますか?

Autoptimizeの設定

インストール〜有効化

詳しくは描きませんが、一応・・・WordPressのダッシュボード>プラグイン>新規追加>検索に「Autoptimize」と入力>結果のAutoptimizeの「インストール」をクリック>有効化にボタンが変わったらクリックで、完了です。(って、説明雑wごめんなさい)

設定

(注意)これはあくまで、ElementorFanの場合の設定です。同じ設定にしても期待する効果が得られない、不具合の発生といったことも考えられます。

①「設定」から「Autoptimize」を選択

Autoptimize_screen

②HTMLオプション>HTMLコードを最適化にチェック

③JavaScriptオプション>JavaScript コードの最適化はノーチェック

④CSSオプション>CSS コードを最適化にチェック

⑤高度な設定を表示
Autoptimize_screen2
Autoptimize_screen3
⑥Aggregate CSS-files?にチェック

⑦インラインの CSS を連結にチェック

⑧すべての CSS をインライン化にチェック

⑨変更を保存

a3 Lazy Loadの設定

インストール〜有効化

コピペですみません、一応・・・WordPressのダッシュボード>プラグイン>新規追加>検索に「a3 Lazy Load」と入力>結果のa3 Lazy Loadの「インストール」をクリック>有効化にボタンが変わったらクリックで、完了です。(って、説明雑wほんとすみません・・・)

設定

①「設定」から「a3 Lazy Load」を選択
a3LazyLoad1

②一番したの項目「Image Load Threshold」を開き
③ Thresholdに「400」と入れます。
a3LazyLoad2

④「Save changes」をクリック

EWWW Image Optimizerの設定

インストール〜有効化

本当にコピペですみません!一応・・・WordPressのダッシュボード>プラグイン>新規追加>検索に「EWWW Image Optimizer」と入力>結果のEWWW Image Optimizerの「インストール」をクリック>有効化にボタンが変わったらクリックで、完了です。(もう謝りません・・・無言。)

設定

①設定>EWWW Image Optimizerを開く
EWWW1

②いじるところは2ヶ所。1つめは「Basicタブ」の「Remove Metadata」にチェックを入れる。
EWWW2

③もう1つは「Converタブ」の「コンバージョンリンクを非表示」にチェックを入れます。
EWWW3

④「変更を保存」をクリック

⑤WordPressのダッシュボードに戻り、「メディア」の中の「一括最適化」を選択します。
EWWW6

⑥最適化されていない画像をスキャン
EWWW4

⑦最適化を開始
EWWW5
※枚数にもよりますが、結構時間がかかります。

⑧「完了」と出れば終わりです。

最後にPageSpeed Insightsでテストしてみよう。

いかがですか?少しは改善されましたでしょうか?実はこの3つのプラグインの他にも、対策すべき点はあります。ただ、コードを追加したりと少々難しくなるので、今回は目指せ「平均点」ということでご紹介してみました。

まとめ

「Elementorは重い」、「だから使えない」とか言ってる方もおりますが、全てがElementorのせいではありません。今回ご紹介した方法の他にも、たくさんの改善できるポイントはあり、90点以上も夢ではないと思います。もし、この記事をご覧頂いている方の中で、Elementorを導入したいが、「重い」という点で足踏みしている方がいましたら、是非、安心して導入してみてはいかがでしょうか?

 

【おしらせコーナー】

banner_VoiceBox
この度、読者のみなさまとElementorについて、もっとコミュニケーションを取りたいと思い、「ボイスボックス」を作りました(ただのメールフォームですが・・・)

ElementorProってどんなことできるの?

Elementorでこんなことしたいけど、できる?

こんな企画やって欲しい!〜について記事にして欲しい!

など、Elementorについてみなさまからのお便りをお待ちしております。

<連載中>


多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

ポップアップ!

vb_header
<注意事項>
・お問い合わせ頂きました内容により、
 ご回答・ご返信出来ない場合がございます。
・ご質問やお悩みに関する内容について、
 記事にて「匿名」にて取り上げさせて頂くことも御座います。
・上記の内容についてご了承・ご同意の上、本フォームよりお送り下さい。

こんな感じで横スライドイン!
なんてことも出来ます。