WordPress(ワードプレス )ですが、「Wordpressが重い!」「Wordpressが遅い!」といった問題に多くの方が打ち当たります。

WordPressとは、世界で最も使われている「ホームページ作成ソフト」です。

基本的な操作はそこまで複雑ではないことから、ブログや会社のコーポレートサイトなどにWordpress(ワードプレス )を使う方は大半ではないかと思います。

ということで、このブログではどうしてこういったWordpressが重くなる問題が起きるか原因をご紹介させて頂き、その対処法をご紹介させて頂きたいと思います!

特に今回は初心者あるある「Wordpressの落とし穴」をしっかりお伝えさせて頂きます!

[toc]

WordPressが重い要因!

結論から申しますと、Wordpressが重い要因は様々で全てをピックアップすることはできません。

ということで、Webメンテナンスのサービスを提供させて頂いております弊社プロリズムでこれまで対応してきた経験を元に、Wordpress(ワードプレス )が重くなる原因で多いものをご紹介させて頂きます。

アップロードしている画像サイズが大き過ぎる

アップロードしている画像サイズが大き過ぎる

よくあるあるです(笑)。

画像はアップロードするとサーバーの容量を使います。

つまり、大きい画像をアップロードすればする程、そのページが重くなるため、結果ページを開くのに数秒かかってしまいます。

対処法①画像サイズを小さくする

画像サイズを確認する方法はたくさんありますが、一番手っ取り早い方法はWordpress(ワードプレス )のダッシュボードにある「メディア」から画像サイズを確認する方法です。

画像サイズを確認するのは簡単ですが、難点は「どのくらいのサイズに画像を小さくするか」です。

「画像サイズってどのサイズがベストなの?」と思われる方は多いと思いますし、自身ずっとこの難題と向き合ってきています。

なぜ難しいかというと、近年Retinaディスプレイのように通常の2倍の画素数で表示させるディスプレイがあったり、4Kがあったり…

そもそもモバイルの画面サイズも様々なサイズのモデルが出ているため、結論から申しますと「このサイズがみんなにとってベストです!」といったサイズがありません。

また、例えばモバイルでのページ読み込み速度を上げるAMPでは、Googleが画像サイズを「〜以上を推奨」と公言しております。

また、Google Discoverでも同じく画像サイズを「〜以上を推奨」としております。


このように画像サイズはケースbyケースなわけですが、例えばブログなどでたくさんの画像を添付する場合はわたしは基本的に1200*800pixelで統一してます。

また、大きい画像(ホームページトップ画像)でも2000pixel程度を上限にしております。

対処法②画像形式を見直す

画像容量を下げるためには、実は「画像サイズを小さくする」だけではなく、「画像形式」を見直すと下げることができます。

画像形式とは、端的に言えば画像の種類を指しまして、jpg、png、gifといった拡張子があります。

拡張子の違いはこちらのYouTubeでご紹介させて頂いておりますため、ご参考下さい。

動画でもご紹介させて頂いておりますが、画像拡張子はこのように使い分け可能です。

  • jpg: 写真向き
  • png: 背景を透過させたい画像、イラスト向き
  • gif: アニメーション向き

この3つの代表的な拡張子はご存知の方も多いのではないかと思いますが、Webを作る場合にご注目頂きたい拡張子は、SVGとWebPです。

SVGとは端的にお伝えすると、「画像データを大きくしても画質の粗さが出ないデータ」でベクターデータと呼ばれます。

全ての画像をSVGに置き換えられるわけでもなく、また置き換えられる画像でもデータ容量が大きくなってしまう場合もあるので、一概にSVGはいいというわけではございません。

が、一般的にロゴなどはSVGで表現できる場合が多いため、ホームページ制作ではよく使われています。

ただし!

WordPress(ワードプレス )では、実はデフォルトの状態ではSVGが使えません。

そこで、Wordpress(ワードプレス )でSVGを使いたい場合は、こちらのプラグインをインストールして下さい。

Safe SVG


次にWebPですが、この拡張子を端的にお伝えすると「画像容量を大幅に下げることができる拡張子」であります。

これはGoogleが開発した拡張子で、ページの読み込み速度をアップさせる目的で作られた、いわばWebに特化された拡張子です。

WebPはjpgやpngの画像容量を約30%前後、もしくはそれ以上も軽減してくれる頼もしい拡張子です。

ただし、SVG同様にWebpもWordpress(ワードプレス)のデフォルトでは非対応で、かつ現時点(2020年8月)ではSafariのブラウザーで対応がされていないため、全てにWebpを対応させようと思うと、コードをいくつか追加する必要があるため、Wordpress(ワードプレス )の初心者には難しくなります。

一方で、年内にアップデートされる予定のバージョン14ではSafariのブラウザでもWebPが対応される予定なので、Wordpress(ワードプレス )でのWebpの対応方法に関しては、Safariのバージョンアップがされてからご紹介したいと思います。

さて、ここまでSVGとWebpに関してざっくりご紹介させて頂きましたが、詳細は先ほどご紹介させて頂きましたYouTube動画をご参考頂けますと幸いでございます。

古いバージョンのPHPを使っている

WordPress(ワードプレス)はPHPと呼ばれるプログラム言語を使って作られています。

ただし、(PHPに限ったことではありませんが)PHPは日々進化して、バージョンアップしているのをご存じでしょうか?

実はこのPHPが古いバージョンになっている場合は、Wordpress(ワードプレス)を重くする大きな原因になります。

また、Wordpress(ワードプレス)を重くするだけではなく、セキュリティーの問題やびっくりする程たくさんのシステム障害を生みます(笑)。

WordPress(ワードプレス)でホームページを自作する場合は、既に作られたテーマを買って作る方が大半かと思います。

そこで、人気のテーマを購入するのであれば、基本的にテーマの販売元がテーマのPHPをバージョンアップしているので、テーマを購入時点では最新または最新に近いPHPバージョンで作られています。

しかし、1年後、2年後と時間が経過すると、その年月の中でPHPのバージョンもアップしていくので、手動でPHPを更新して上げる必要が出てきます。


弊社のお客様の中には

「PHPバージョンってアップデートしなくちゃいけないんですね」

「PHPバージョンを昔アップデートしたらエラーがたくさん出てしまったため、近年はあえてアップデートしませんでした」

という方が多く、PHPのアップデートの重要性を軽視してしまっている方が多くいらっしゃいますが、PHPをアップデートせず放置していると「サイトが重くなる」だけではなく、「セキュリティーに問題が出る」「これまで使っていたプラグインが使えなくなる」といった問題も出てきます。

PHPのバージョンを放置してそのWebサイトを使い続けることは、(ちょっと変な例ですが)オイル交換や車検を受けずに車を運転し続けるようなものです。

メンテナンスをしなくては、車が壊れたり、事故を起こす危険性をグッと高めます。

対処法:PHPをアップデートする

この問題への対処法は、ズバリPHPのアップデートに限ります

ただし!

ここで大変重要なことは、特にしばらくPHPのアップデートがされていないサイトがいきなり最新のPHPにアップデートしてしまうと、Fatal errorsといった、サイトに障害を及ぼすエラーを吐いてしまう可能性が大変高いということです。

例えば、昔のPHPでは当たり前のように書かれていたコーディングでも、新しいPHPバージョンではその書き方はもはや使用できなくなったとします。

そういう時は、Fatal errorsといったエラーを吐いて「今すぐエラーを対処して下さい」と要求されるわけです。

こういったエラーは、最悪サイト自体がもはや表示されなくなるといった危険性も数多くあるので、PHPのエラーが改善されない限りそのサイトが機能しなくなるというわけです。

ということで、PHPのアップデート前に必ずしなくてはならないことは、サイトのテスト環境を作って、実際にそのサイトがPHPのアップデートをすると、どんなエラーを吐くか確認し、そしてエラーを事前に改善することです。

サイトのテスト環境とは?

Webサイトのテスト環境とは、サイトが正常に動作するかどうかを確認する環境です。

本番のサイトと同じサーバーにテスト環境を作り、今回のPHPバージョンアップのように何かバージョンアップをさせる時、エラーや不具合が出ないか事前に確認することができます。

このテスト環境ですが、最低限のサーバー知識がないと作れません

また見様見真似で何とか作れた場合も、wp-config.phpで本番サイトと同じデータベースに設定していると、何かテスト環境で変更をした場合にも本番サイトにも変更が反映されてしまったり、テスト環境をインデックスしないように設定しておくのを忘れると、二重コンテンツとしてGooleに認定されてしまい、ペナルティーを受けてしまったりします

そして、テスト環境が正常に作れた次は、ようやくPHPのアップデートをテストできるわけですが、エラーを吐く場合はもちろんのことながら対処が必要です。

PHPエラーの内容にもよりますが、PHPのコーディング知識がない人にとってコードの変更は困難です

いわゆる「プロの領域」というものです。

ネットで調べて問題への対処法が見つかったとしても、本当にその対処法が問題の根本的な対処法になっているか否かはプログラミング知識がないと分かりません

「時々強い頭痛がするけど、頭痛薬を飲んでおけばいいか〜」と対処していたら、しばらく経って「頭痛の原因はガンが原因だった」といった問題が生まれるようなイメージです。

このように、PHPのアップデートは素人が対処するのはリスクが高い行為といえます。

特にWebサイトでの集客が多いサイトやEコマースサイトであれば、PHPアップデートを素人目線で対処するのはおすすめできません。

「自分達でやれる事は頑張ってやろう!」というお客様を応援するのが我々「プロリズム」のモットーですが、PHPアップデートに関しては、その重要性をしっかり認識しているからこそ、我々のようなプロにご依頼頂くことをおすすめ致します。

CSSが整頓されていない

自身の苦い経験でもありますが、CSSをやみくもに追加していくと、どんどんWordpressが重くなります

特にホームページ制作の初心者でも学びやすい言語であるCSSは、自分でも簡単にコーディングの書き換えや追加ができちゃう言語です。

コードは、簡単に言えば指示(命令)です

「明日ワンピースを着てきてね」という指示は単純ですが、「明日赤のワンピースに黒のかばんを持って白い靴を履いてきてね」と指示が増えれば準備が大変になります。

もう少しいうならば、「今日と明日は赤のワンピースを着てきてね」という指示を、「今日は赤のワンピースを着てきてね」「明日は赤のワンピースを着てきてね」と同じ内容であるにも関わらずリピートすると、単純な指示も複雑になります。

上記はあくまで例ですが、CSSの書き方も同じような問題が生じるわけです。

つまり、WordPress初心者がとにかくCSSを何も深く考えず書いていくと、「気がついた時には数千を超えるコードを書かれていた!」なんて事はよくある話です。

そして、そこまでコードが長い事は、繰り返しの通りそれだけ指示が多いという事なので、Webサイトはどんどん重くなります

対処法①ホームページを自分で作る時は、事前にきちんとデザインする!

弊社プロリズムのようにWeb制作のサービスを提供する場合は、「事前にホームページのデザインを作る」ことはクライアントがいる以上当たり前のことですが、自身のホームページを作る人に多いのが、「ホームページを作りながらデザインをする」ことです。

ホームページを作りながらデザインする場合のデメリットは様々ですが、今回のCSSにフォーカスしてお伝えすると、「CSSのclassを綺麗に指定することができない」点が大きなデメリットです。

CSSのclassをざっくりお伝えすると、これは「クラス名」「名札」「ラベル」のようなものです。

幼稚園で「りんご組」「みかん組」「バナナ組」とクラスの名前を付けると、「りんご組さん明日10時に公園に行きます!」といったように、りんご組さんだけに指示を出すことができます。

CSSのclassはこの「りんご組」さんの名前にあたり、class名は自由に定めることができます。

さてこの例で考えると、事前にどれぐらいの幼稚園児が入園して、どの子がどのクラスになるか定まっていなかったらどうでしょうか?

そもそもどれぐらいのクラスが必要になるかも分からないので、もしかすると必要以上にクラスを作ってしまって、全く同じ指示をいくつかのクラスを連絡しないといけなくなったり、「やっぱりクラスを統合しよう」といった時はそれはそれで手間が発生します。

最悪、クラス分けがはちゃめちゃになると、「徹くんは明日の午前中はりんご組さんに言って、午後はバナナ組さんに入ってね」といったように、本来は一クラスで管轄できることが、いくつかのクラスに分ける羽目になり、よってたくさんの指示を余計に伝える必要が出ます。

コーディングに馴染みのない方に向けて、上のような例でclassの説明をさせて頂きましたが、問題の意味はとても似ています。

なので、もし自身でホームページを作られる方は、コーディング前にデザインをしっかり定めて、そしてどのデザイン部分が同じか、もしくは違っているかなどを確認し、そしてclassを名付けることがサイトの軽量化に繋がります。

対処法②CSSを可能な限り追加しないことを念頭に置く!

コードはシンプルに!

CSSはなるべく追加しないように気をつけよう!」と常日頃から念頭に置くか否かで、その後のサイト運営に大きく変化を及ぼします。

CSSはいわゆる「デザインの装飾」に当たる部分なので、PHPとは異なり、追加していこうと思うと、エンドレスに追加できちゃう危険性があります

なので、デザインにこだわりを持つ事は大事ですが、デザインをシンプルにまとめることは、Wordpressを重くしないためにも大切な心がけです

たくさんのアップデートを一気にすること

サーバーの負荷が大きくサイトが表示されなくなった

一気にたくさんのアップデートをする事は、サーバーに負荷を集中して与えてしまい、よってWordpressが重くなります…

WordPressが重くなるのは一時的かも知れませんが、こういった負荷が大きい場合は、サーバーがダウンしてしまい、サイトが見れなくなる場合もあります

他にもWordpressが重くなる要因がたくさんある!

Webサイトのエラーや警告

以上、Wordpressが重くなるメジャーな要因をいくつかご紹介させて頂きました!

が!

まだまだWordpressが重くなる要因はあります…!!!

他のメジャーな要因は、こちらのブログでご紹介させて頂いておりますため、是非合わせてご確認頂ければと思います!

Card image

WordPress初心者の当時に知りたかった【知らないと後に必ず後悔する事】お伝えします。

WordPress(ワードプレス)は世界でも一番人気なCMS(ホームページを作るソフト)です。 弊社のホームページ作成でも、一番人気なのがこのWordpressですが、WordPressは何でもできち … 続きを読む

またプロリズムでは、「無料Web診断」をさせて頂き、なぜ皆さまのWordpressが重いのか分析させて頂きます!

こういった問題にお悩みの方は、是非「無料Web診断」をご検討下さい♪

モナ