こんにちは、ユキです＾＾
誰でも簡単にWebサイトが作れるのが、
WordPressのページビルダー系プラグイン「Elementor」。
そのElementorを使って、
実際にWebサイトを制作して公開・運営してるケースも多いと思うわ。
でもElementorで作ったWebサイトにアクセスしてみると、表示されるまでに
少し時間がかかっていわゆる「重い」と感じる状態になってることないかしら？
GoogleなどでElementorについて検索しようすると、関連ワードとして「重い」が出てくる
ぐらいだから、実際にElementorで作ったサイトが重いと感じてる人が多いってことよね。
じゃあElementorで作ったWebサイトが重くなる原因は何なのか、
重くならないようにするにはどうするのかなどを詳しく見ていきましょう。
Elementorで作ったWebサイトが重くなる原因は？
Elementorで作ったWebサイトが重くなる原因としては
・Webサイトに使っている画像
・Elementor以外のプラグイン、テーマ
・Webサイトを公開しているレンタルサーバー
なんかが考えられるわね。
単純にWebサイトに使ってる画像の容量が大きすぎると、いくらインターネット回線の
通信速度が速くても、表示されるまでに多少時間がかかっちゃうわ。
また1ページにたくさんの画像を使うことで、1つ1つの容量は小さくても、
なかなか全部が表示されないってことがあったりするのよ。
「Elementor以外のプラグイン、テーマ」については、WordPressのプラグインや
テーマって公式で開発されたものもあれば公式以外が作ってるものもあるの。
そのためプラグイン同士やプラグインとテーマによって相性の良し悪しみたいなものが
あって、Elementorと相性の良くないプラグインやテーマを使うとElementorで作った
Webサイトが重くなっちゃったりするのね。
それからWordPressはあくまでWebサイトを作るためのツールであって、
作ったWebサイトを公開・運営するには別途サーバーを自分で立てるなり
レンタルしないといけないわ。
大半の人はサーバーをレンタルするんだけど、レンタルしたサーバー自体が重いと、
結果的にそのサーバーに公開してるWebサイトも重くなっちゃうのよ。
Webサイトに使っている画像のサイズが大きすぎる
Elementorで作ったWebサイトが重くなる原因として多いのが、
「Webサイトに使っている画像のサイズが大きすぎる」ってことね。
画像のサイズが大きくなれば容量も大きいし、
容量が大きいと表示するのに時間がかかる、
表示するのに時間がかかると結果的にWebサイト全体が重いとなっちゃうわけ。
大きい画像の方がインパクトがあるし、
サイトを利用する側からすると見やすかったりもするわ。
でも重くなることを考えると、
Webサイトに使う画像は適度な大きさに留めておいた方が良いのね。
Webフォントの利用もほどほどに
画像やWebサイト全体のイメージに合わせるためなどにWebフォントを使ってる場合、
これもWebサイトを重くする原因となるのよ。
WordPressもElementorも海外で開発されたものだから、
現状では日本語への対応が不十分だったりするわ。
そのためデフォルトだと日本語フォントは1つしか使えないから、画像や
Webサイト全体のイメージとテキストを合わせるにはWebフォントを使うしかないのね。
Webサイト全体で1～2種類程度のWebフォントを使うぐらいなら
大きな問題は無いけど、3種類4種類と使うWebフォントの数が増えると
Webサイト自体が重くなっちゃうの。
Elementorと相性が良くないプラグイン
WordPressにはElementor以外にもたくさんのプラグインがあって、
WordPressでWebサイトを作る際には役に立つものばかりだわ。
ただ開発者がそれぞれ違ってたりするから、
便利だけど、Elementorとの相性があまり良くないプラグインもあるのよねぇ。
Elementorと相性の良くないプラグインを使うことで、Elementorで作ったWebサイトが
重くなるだけじゃなくて、Webサイトのレイアウトが崩れちゃうこともあるの。
だからWordPressでWebサイトを作る際には、
プラグイン同士の相性の良し悪しはしっかりチェックしておいた方が良いのね。
ちなみにElementorとあまり相性が良くないと言われてるプラグインには
・AddThis
・Broken Link Checker
・Contact Form 7
・Google Analytics
・Jetpack
・Ultimate Member
などがあるわ。
「AddThis」はSNSの共有ボタンを簡単に設置するためのものだし、
「Broken Link Checker」はWebサイトに貼ってあるリンクが切れてないか
チェックしてくれるわ。
「Contact Form 7」は問い合わせページが簡単に作れるし、
「Google Analytics」はサイト全体の訪問者数やアクセス元などWebサイトの
アクセス関連指標が確認できるのね。
「Jetpack」はセキュリティやパフォーマンス向上、マーケティング、デザインなど
色んなツールがパックになったプラグインよ。
「Ultimate Member」は会員ページを作るのに必要な機能が一通り実装できるから、
どれもWebサイト制作や運用で役に立つプラグインばかりなのよねぇ。
でもこれらをインストールしてるとElementorで作ったWebサイトが重くなっちゃうから、
インストールしないか使わない時は「無効化」しておいた方が良いわ。
Elementorと相性が良くないテーマ
「テーマ」でデザインを作り、「プラグイン」で色んな機能を付けるというのが
基本的なWordPressでのWebサイトの作り方になるわ。
ただ先のプラグイン同士と同じように、
プラグインとテーマの間にも相性の良し悪しがあるのよねぇ。
Elementorとあまり相性の良くないテーマでデザインしたWebサイトにElementorで
色んな機能を付けることで、Webサイトを公開した時に重くなっちゃうのよ。
それどころかElementorでの編集作業も重くなることがあるから、
ElementorでWebサイトを作る場合は相性の良くないテーマは使わない方が良いの。
現状ネットなどでElementorとの相性があまり良くないテーマと言われるのが
・twenty fifteen、sixteen、seventeen、eighteen
・TCD
・Divi
などよ。
twentyシリーズについては、eighteenまではElementorと相性があまり良くないんだけど、
twenty twentyは比較的Elementorと相性が良いとされてたりするわ。
「TCD」は日本で開発されたテーマで、TCDに限らず日本で開発されたテーマは
大体Elementorと相性があまり良くないのよね。
「Divi」はWordPressの超メジャーなテーマだけど、
Elementorとの相性があまり良くないと言われてるの。
レンタルサーバーでWebサイトの重さが大きく変わる
Elementorで作ったWebサイトを公開・運用するためのレンタルサーバーが、
Webサイトを重くする原因となってることもあるのよ。
先にも書いたように、WordPressやElementorでできるのはWebサイトを作ることだけで、
それを公開・運用するには別途サーバーを用意しないといけないわ。
レンタルサーバーの品質は知名度と比例してたりするから、
基本的にはメジャーなレンタルサーバーを利用すればWebサイトを重くなる
といったことはほとんど無いはずよ。
ただ料金は安いけど知名度があまり高くないレンタルサーバーを利用すると、
Webサイトが重くなる原因となっちゃうことがあるのね。
WordPressのページビルダー系プラグインの中でもElementorは特に高機能だから、
Elementorで作ったWebサイトはどうしても容量が大きくなるわ。
そのためElementorで作ったWebサイトを公開・運用するレンタルサーバーには、
より大きなCPUパワーやメモリ容量が求められるの。
知名度があまり高くないレンタルサーバーだと、Elementorで作ったWebサイトを公開・
運用するにはCPUパワーやメモリ容量が足りないことがあるのよね。
だからElementorで作ったWebサイトの公開・運用実績がある、
メジャーなレンタルサーバーを利用した方が良いわよ。
Elementorで作ったWebサイトが重くならないようにするには
Elementorで作ったWebサイトが重くならないようにするには、重くなる原因である
・画像
・プラグイン、テーマ
・レンタルサーバー
の使い方や組み合わせを考えれば良いのよ。
画像はサイズを小さくしたり圧縮すれば良いし、
Webサイトにアクセスした時にテキストを優先的に表示させて
画像を後で表示させるように設定を変更するのもアリだわ。
Elementorと相性があまり良くないプラグインについては、
そもそもインストールしないか使わない時は無効化しておけば良いのね。
Elementorと相性があまり良くないテーマは使わないようにして、
反対にElementorと相性が良いテーマを使うのよ。
レンタルサーバーは料金の安さに目が行きがちだけど、
料金よりもサービス内容で選ぶと失敗が少ないわ。
Webサイトで使う画像の容量を小さくする
画像が原因でElementorで作ったWebサイトが重くならないようにするには、
Webサイトで使う画像の容量を小さくするのよ。
自分で作った画像や撮った写真なんかをElementorにアップロードしてる場合は、
ペイントなどの画像編集ソフトを使ってサイズを小さくすると良いわ。
画像のサイズを小さくするだけで容量も小さくなるから、
Webサイト全体の容量が減って重い状態の解消が多少は期待できるわ。
1ページに何枚も画像を使ってる場合なんかは、1枚当たりの容量を小さくするだけでも
全体ではかなり容量が節約できて、Webサイトが結構軽くなるはずよ。
またWebサイトで使う画像の数を減らしても、Webサイト全体の容量が減って
軽くなるから、画像サイズを小さくしてさらに数を減らすのもかなり有効ね。
画像を自動的に圧縮するプラグインを使う
Webサイトで使う画像の容量を小さくするなら、画像を自動的に圧縮してくれる
WordPressのプラグインを使うと良いわよ。
画像を自動的に圧縮してくれるプラグインには
・EWWW Image Optimizer
・Compress JPEG&PNG images
なんかがあるわね。
詳しい使い方についてはここでは割愛するけど、これらのプラグインを入れておけば、
WordPressにアップロードした時点で自動的に画像が圧縮されるの。
これらのプラグインをインストールしておくと、
Webサイトに使いたい画像をアップロードして、
ElementorでのWebサイト制作に使うだけで画像の容量が小さくなるのね。
実は画像ファイルには、画像を構成するデータ以外の不要なデータが含まれてるのよ。
これらのプラグインでは、画像ファイルの不要な部分のデータを圧縮することで、
画像の容量を小さくしてるってわけ。
Webサイト全体の容量は小さい方が良いんだから、
Elementorで画像を使ったWebサイトを作るんだったら、
画像を自動的に圧縮してくれるプラグインは使うべきだわ。
Webサイトで使う画像のファイル形式をJPGにしておく
Elementorで作るWebサイトに画像を使うんだったら、その画像のファイル形式を
JPGにしておくことでWebサイトが重くなるのを少しは防ぐことができるわよ。
画像のファイル形式はいくつかあるんだけど、
Elementorで使う画像のファイル形式は主に「JPG」か「PNG」なの。
同じ画像でもファイル形式がJPGかPNGかで、容量の大きさが全然違うのよね。
例えば500×500ピクセルの画像をJPG形式で保存すると、
容量は数十KB程度となるわ。
同じ500×500ピクセルの画像をPNG形式で保存すると、
容量は数百KB程度とJPG形式の約10倍にもなるの。
ただでさえ画像はテキストに比べて容量が大きいわけだから、
できるだけ容量が小さい形式のものを使うことがWebサイト制作では重要なのよ。
PNG形式の画像をJPG形式に無料で変換できるサイトもあるから、
PNG形式の画像をWebサイトで使いたい場合は利用してみてね。
ただし一旦JPG形式で画像ファイルを圧縮しちゃうと元に戻せなくなるから、
JPG形式に変換する場合はあらかじめコピーを取っておきましょう。
Webサイトが表示される際にテキスト優先にする
Webサイトを軽くするのには、画像の容量を小さくすることに加えて、
Webサイトが表示される時にテキスト優先になるようにすることも重要なのよ。
通常はテキストや画像など全ての読み込みが完了したら、
Webサイト全体が表示されるようになってるの。
そのため画像のサイズが大きかったり、数の多いサイトは読み込みに時間がかかって
なかなか表示されないから「重い」と感じちゃうわけ。
そこで先にテキストを読み込んで、それが完了したらWebサイト全体を表示させて、
Webサイトが表示されてから画像を読み込む形にすることで、
Webサイトが重くなるのを解消するのね。
現状公開・運用されてるWebサイトのほとんどが、
テキストの読み込みを優先して画像を後で読み込む形になってるわ。
実際にショッピングサイトなんかにアクセスすると、商品説明や価格が先に表示されて、
後から商品画像が表示されたりするじゃない。
本来はかなり複雑なプログラミングコードを書く必要があるんだけど、
WordPressなら「Lazy Load」というプラグインをインストールするだけでOK。
Lazy LoadをインストールしてElementorでWebサイトを作るだけで、テキストを
優先して読み込んで、Webサイトが表示されてから画像を読み込む形になるのよ。
キャッシュが導入できるプラグインを利用する
WordPressのキャッシュが導入できるプラグインを利用することで、
Elementorで作ったWebサイトの表示が速くなるのよ。
Elementorで作ったWebサイトにアクセスすると、WordPress側でCPUパワーを使って
色んな作業をしてWebサイトを画面に表示させてるわ。
WordPressのキャッシュを導入すると、
Webサイトにアクセスした際のWordPress側で行う色んな作業を省くことができるの。
キャッシュは簡単に言うと、
一度色んな作業を行って表示させたページを保存したものなのよ。
再度Webサイトにアクセスがあった場合に、
その保存したページを使うことで表示時間が短くなるってわけ。
本来はWebサイトにキャッシュを導入するのは非常に面倒なんだけど、
WordPressでは「WP Fastest Cache」というプラグインをインストールしてするだけでOK。
詳しい使い方は割愛するけど、WordPressのキャッシュを導入することで、Elementorで
作ったWebサイトの表示時間が5倍近く短くなったってこともあるのよねぇ。
Elementorと相性が良いテーマを使う
Elementorと相性があまり良くないテーマがあれば、
反対にElementorとの相性が良いテーマも当然あるわ。
相性の良いテーマを使うことで、
Elementorで作ったWebサイトを公開した時に重くなるのを防げる可能性が高いのね。
Elementorとの相性が良いテーマとしては
・Astra
・Hello
・OceanWP
・GeneratePress
といったところが挙げられるわよ。
「Hello」はElementorのためにWordPressが公式に作ったテーマだから、
特にElementorとは相性が良いわ。
実際にElementorと相性が良いテーマを使ってみると分かるんだけど、
どれもシンプルでそれほど高機能じゃないのよね。
でも高機能じゃないのが大きなポイントで、
先に紹介したElementorとの相性があまり良くないテーマは高機能なの。
Elementor自体が高機能なプラグインだから、
高機能なテーマだと使える機能が重なったりするのよ。
それで結果的に重くなったり、
ちゃんと作動しなかったりして「相性が良くない」ってなっちゃうのね。
だからElementorでWebサイトを作るんだったら、本当にWebサイトのデザインを
作るだけのシンプルなテーマを使った方が良いってわけ。
Webサイトに合ったレンタルサーバー選び
レンタルサーバーもElementorで作ったWebサイトが重くなる原因の1つだから、
制作するWebサイトに合ったレンタルサーバーを選ぶことが重要なのよ。
メジャーどころのレンタルサーバーとしては
・エックスサーバー
・さくらのレンタルサーバー
・ヘルテム
・お名前.comレンタルサーバー
・ロリポップ
といったところかしら。
これらのレンタルサーバーを利用すれば大きな問題は無いんだけど、それぞれに
違った特徴があって、公開・運用するのに適したWebサイトの種類があるの。
例えば趣味やブログの個人サイトだったら、安い料金で最低限の機能が使える
・さくらのレンタルサーバー
・ロリポップ
のスタンダードプランを使うのが良いわ。
でも個人サイトでも広告収入を得たいんだったら、安定性と速度が期待できる
・エックスサーバーのX10プラン
・ロリポップのハイスピードプラン
なんかが向いてるのよ。
中小企業や個人事業主のサイトだったら、
安定性に加えてセキュリティ面でも期待できる「ヘルテム」がおすすめね。
このようにWebサイトの種類に合ったレンタルサーバーを選ぶことで、Elementorで
作ったWebサイトを公開・運用する際に重くなることを防げる可能性が高いのよね。
Elementorで作ったWebサイトが重いのはダメな理由
Elementorで作ったWebサイトが重いのがダメな理由としては
・ユーザビリティが下がる
・SEOに良くない影響がある
といったことが挙げられるわ。
「ユーザビリティ」はいわゆる使い勝手のことで、
Webサイトが重いと使い勝手が悪くなるからダメなのね。
実際に自分がWebサイトを利用することを考えると分かりやすいわよ。
例えば、何かを調べたいことについて書かれてそうなWebサイトを見つけて、
アクセスしたとするじゃない。
すぐに表示されればWebサイトを閲覧するけど、ちょっとでも表示に時間がかかったら
Webサイトが表示されるのを待たずにタグやウィンドウを閉じちゃったりするでしょ。
Googleの調査によると、モバイルページの表示時間が1秒から5秒に伸びると、
直帰率すなわちWebサイトの表示を待たずにタグやウィンドウを閉じる率が
2倍近くに増えるという結果が出てるのよ。
だからElementorで作ったWebサイトが重くて表示に時間がかかると、
いくら内容が充実してても、表示される前に閉じられて見てもらえないってわけ。
重いWebサイトは検索順位が下がる可能性が高い
Webサイトが重いとダメな理由のもう1つは「SEOに良くない影響がある」ってことね。
SEOは「検索エンジン最適化」のことで、Webサイトが重いと関連ワードが
検索された時に検索結果として表示される順位が下がっちゃう可能性があるのよ。
これも自分がWebサイトを閲覧する時のことを考えると分かりやすいんだけど、何か
調べる時って検索結果の上位に表示されたWebサイトを利用することが多いでしょ。
わざわざ検索結果の2ページに表示されてるWebサイトを利用することなんて、
ほとんど無いわよね。
実際にGoogleの検索アルゴリズムでは、
表示速度すなわちWebサイトの重さも重要な要素の1つだと言われてるわ。
Webサイトが重いと、関連ワードが検索されても上位に表示されず、
結果的に多くの人に見てもらうことが難しくなるってわけなの。
いずれにしても重いWebサイトを見たいと思う人は居ないから、
ElementorでWebサイトを作る際には重くならないようにすることも重要よ。
まとめ
Elementorで作ったWebサイトが重くなる原因やその対処法などを詳しく紹介したわ。
もしElementorで作ったWebサイトが重くて閲覧数が伸びない場合は、
Webサイトが重くなることをしてないか先の原因をチェックしてみると良いわ。
これからElementorでWebサイトを作るんだったら、先の対処法をチェックして、
Webサイトが重くならないようにしましょう。
