【初心者向け】WordPressを高速化して、表示速度を上げる3つの方法

やっほう!WEBエンジニアのテツヤマモト(@okapo192)です。

今回は「WordPressの表示スピード向上方法」について共有します。

ブログ表示が遅いとなんか良くないらしいけど、どうすれば良いの?
PageSpeed Insightってやつやってみたけど、なんか難しくてよくわかりませーん

この辺りを解決していきます。

 

昨今のGoogleさんの動向として、表示スピードがSEOにいくらか影響を与えてきているのは明白です。

とはいっても、素人ブロガーの立場で、表示速度がどうとか言われてもよくわかんないですよね…。

 

今回は初心者でも劇的にWordPressブログの表示スピードを改善する方法をまとめます。

僕自身、この方法を使って「Google PageSpeed Insights」で最適化90点台、表示スピード1秒以内を達成できました!

アイキャッチ

ちょっとした工夫で表示スピードはぐんぐん上がります。

下手するとこれをやるだけで、アクセスや収入が増えるケースもあるので、ぜひ実践してみると良いですよ。

スポンサーリンク

なぜサイト表示速度を改善する必要があるか?

そもそもなぜサイト表示速度を意識しなければいけないでしょうか?

理由は大きく2つです。

 

1点目に、表示速度が遅いサイトは、ユーザーにストレスを与えてしまいます。

あなた自身、「このサイト写真が表示されねーよ!くそが!」と思ったことが一度くらいあるはずです。

その結果として2点目に、SEOに悪影響を与えてしまうのです。

「くそが!」ってサイトを上位表示させるわけにはいかないですからね。

 

▼また、表示速度が遅いと、ユーザーの直帰率・離脱率も下がると言われています。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇

参考:表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命

とにかく端的に言えば、表示速度が早いに越したことはないんです。

少しでも軽くて素早いブログを目指して、改善を進めてみましょう。

あなたのブログの表示速度はどんな感じ?

まずはGoogle PageSpeed Insightsで、あなたのブログの表示速度を調べてみましょう。

▼このブログの検証結果はこちら。モバイル・パソコンともになかなかの高得点です。

アイキャッチ

基本的には、最適化が80点以上のGoodであれば、問題なしですね。

「Midium」や「Low」と出ている方は、なんとか改善を進めていきましょう。

スポンサーリンク

ブログ最適化で気にするべき3項目

PageSpeed Insightsでは、10項目の最適化項目がチェックされて結果が返ってきます。

  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  • サーバの応答時間を短縮する
  • ブラウザのキャッシュを活用する
  • 画像を最適化する
  • 圧縮を有効にする
  • JavaScriptを縮小する
  • CSSを縮小する
  • HTMLを縮小する
  • リンク先ページのリダイレクトを使用しない
  • 表示可能コンテンツの優先順位を決定する

…とは言え、「最適化しろ!」と言われても、初心者には何をどうすればいいのかわかりません。

実際のところ、気にした方がいいのは赤く色をつけた3つくらいです。

この3つを整えれば、最適化80点には届くように思います!

1.サーバの応答時間を短縮する

この注意が出てしまった人が、考慮すべき問題は2つです。

①プラグインを停止・削除できないか検討

WordPressのプラグインの使いすぎは、サイトが重たくなるリスクとともに、プラグイン同士が干渉してエラーが発生するリスクもあります。

あまりアレコレと便利な機能を詰め込むのも考えものです。

プラグインによりますが、10個以上使っている人は要注意でしょうか…。

②サーバーの引越しを検討してみる

Googleはサーバーの応答時間を0.2秒以内で推薦しています。

もしPageSpeed Insightsで、応答時間が1秒かかっていると言われるようなら、サーバー自体に問題ありかもしれません。

 

経験上、WordPressを使うなら、エックスサーバーかMixHostがおすすめですね。

出会い系などグレーなジャンルでも自由に使えるMixHostを個人的には推します。

安さを理由にさくらサーバーやロリポップを使う人が多いんですけど、表示速度の評判が良くないのでお勧めしません。

2.画像を最適化する

ブログサイトが重たくなる原因の大半は、ずばり画像です!

画像をちょちょっといじるだけで、大方問題は改善しますよ。

①png画像は基本的に使わない

Webページに使う写真には、jpgやらpngやらの拡張子と呼ばれるものがついています。

基本的にはpngの画像は使わずに、jpgのものを使うようにしましょう。

理由は単純に、pngはファイルサイズが大きくなってしまうことが多いからです。

 

▼Macの方はAutomatorを使えば、png画像を一瞬でjpgに変換できますよ〜。

参考:超便利!Macの「Automator」で画像のファイル形式(フォーマット)を変換する方法

▼画像拡張子が気になる方はこちらで勉強できそうです。

参考:どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。

②画像はリサイズ・圧縮して使う

一眼レフカメラやスマホで撮った写真をそのままサイトにアップロードすると、容量が大きくなってゲキ重ブログのできあがりです。

ブログ用にサイズをリサイズして、できれば圧縮処理も施して使うといいですね。

 

お金に余裕がある方は、有料アプリ「jpeg mini」を使って、高品質な軽量画像をアップロードしましょう。

僕もブログで使う全ての写真をjpeg miniで圧縮&リサイズしてます。

 

お金をかけたくない&めんどくさがりの人は、WordPressプラグイン「Imsanity」を使うと良いです。

jpeg-miniに効果は劣りますが、自動で画像をリサイズ処理してくれるので便利ですね。

参考:【WordPress】Imsanityの設定方法と使い方

3.圧縮を有効にする

1,2より少し難易度が高めですが、こちらも大きな効果を見込めるので、挑戦してみるといいです。

「圧縮を有効にする」ためには、サーバー内の.htaccessというファイルをFTPソフトで編集して、以下記述を追加する必要があります。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

参考:圧縮を有効にする - PageSpeed Insights

何を言っているかわからない人は、リクエストくれれば追加で記事書きます。

サイトをミニマム化しよう

ここまでで諸々の軽量テクニックを紹介しましたが、結局、ページ自体からいらないものを減らしていくのが一番効果あります。

僕のブログはとことん無駄を省いてまして、デザインがやたらシンプルになっています。

  • ヘッダーはTwitterリンク、問い合わせリンク、検索ボタンのみ
  • サイドバーはプロフィール、カテゴリー、アーカイブのみ
  • 記事一覧ページで抜粋を省略
  • 記事下に最新記事を表示しない(STORKデフォルトは4記事表示)
  • 記事下の関連記事を4つのみ表示(STORKデフォルトは8記事表示)

表示速度が早くなるのはもちろん、ユーザー目線でも、散らかっていないスッキリしたサイトにしたいですね。

スポンサーリンク

終わりに

制作知識がないと難しい点もありますが、ある程度、サイト軽量化は気にかけるといいですよ。

気にかけすぎて記事が更新できないのも本末転倒ですが、バッティングフォームを決めて素振りした方が成長速度早いです!

 

何か質問やリクエストがあれば、Twitter(@okapo192)まで連絡くれたら嬉しいです。

対応できそうだったら、記事にてお答えしていきますね!

WordPress制作で月10万円稼ぐための最速勉強法【未経験から3ヶ月】

2018.05.30

WEBサイト制作の仕事の流れ(受注から納品まで)を解説する【フリーエンジニア向け】

2018.06.04

UdemyでWordPress制作を学べるおすすめコース4つ【全部買った】

2018.06.13

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!