ブログ表示速度を高速化するには?写真・動画データ軽量化、PHP切替、AMP化

2018年9月12日

【 本記事のターゲット 】

  1. ブログを運営している
  2. SEO対策を強化したい
  3. Webページの表示速度を高速化したい

ブロガーの皆さん、SEO対策ちゃんと実施していますか?もちろん、色々要素があるので全て対応出来なくてもある程度は意識して取り組まれている方が殆どかと...

ご存知の通りSEO対策をしっかりしておかないと、Googleからの検索流入等に後々響いてくるので...何も実施していないという方は今からでも取り組める範囲で取り組んでみましょう。

SEO要素って色々ありますよね、もちろん正解などはない(正確にはわからない)のですが、挙げるとしたら例えば下記のような所でしょうか。

  • ブログをHTTPS化
  • ドメインパワーを上げる(長期運営・記事量産である程度可能)
  • そもそも良質なコンテンツ記事を作る
  • タイトルのキーワード選定
  • パーマリンク、h2/h3にキーワードを入れる

もっと色々ある気がしますが...その中でも今回取り上げるのが

  • ブログのWebページ表示速度

になります。

これ結構重要なSEO要素なのですが、あんまり取り組まれている方って居ないような気もしていたり...

という事で、今回はこのWebページを高速表示する為の手順・方法を簡単ではありますがご紹介します。

ブログのページ表示速度、サイト速度はSEOに関係する事を認識しよう

Google のウェブマスター向け公式ブログで正式に案内されている(PC・モバイル両方)

まずSEO要素として本当にページ表示速度は関係あるの?という所から解説します。

下記は恐らく見た事があるんじゃないかな...と思いますが、Googleの公式ウェブマスターブログの掲載内容になります。

1つ目がPCのSEO要素にページ表示速度が関係している事が明記されています。この要素に関しては2010年4月からGoogle の検索アルゴリズムに取り組まれています。

そして2つ目が2018年7月に発表されているSpeed Update、モバイルにもこのページ表示速度がアルゴリズムの中に取り入れられる事が発表されました。

とはいってもモバイル版はまだ一部のとてつもない遅いサイトのみの適応にとどまっており、そこまでSEO要素はまだ関係しないとされていますが....

そもそもGoogle の調査では下記のような事が問題として上げられています。

  • 多くのサイトで、訪問者の半数がページの読み込み中に離脱しています。
  • 世界のモバイル回線接続のうち70%が、2020年まで3G以下の速度にとどまると予想

まぁ一般的な日本人が作成しているブログは日本でしか基本見られないと思うので、モバイル回線速度に関しては若干?が付きますが...

それでも表示に時間がかかるブログって自分自身に置き換えてみれば分かるかと思いますが、中身見ずにページ閉じちゃいますよね?

どうしても見たいページならリロード等しますが、ちょっとした用事で検索して引っかかったページが表示されなかったら、別の検索結果のページを閲覧したりするかと思います。

SEO要素もそうですが、ページ表示速度が遅いとそもそも離脱者を増やしてしまい、結果アクセスはされてもページは見られていない...何て事が実際に発生しています。

自分自身のブログ表示速度を確認しよう

という事で、まずはご自身のブログ表示速度を調査してみましょう。

上記リンクはGoogleが提供している無料のページスピードを調査するツールになります。

ここにご自身のブログのURLなどを入力してみましょう。

ちなみに当ブログで以前「スポンサーリンクの表記は不要?Google AdSenseポリシーを正しく理解しよう」という記事を作成しましたが、こちらをベースに調査してみると下記のような感じ。

  • モバイル:Good 83点
  • パソコン:Medium 60点

ちなみに本記事で一番最後に紹介しているAMP化まで済ませた状態だとリンクは「スポンサーリンクの表記は不要?Google AdSenseポリシーを正しく理解しよう」に変更になりますが、これをベースに調査してみると下記のような感じ。

  • モバイル:Good 95点
  • パソコン:Medium 82点

モバイルではなんと100点に近いスコアをたたき出す事が出来ました。さすがAMP♪

ご自身のブログでは如何でしょうか?出来ればモバイル・PC共に80点のスコアはたたき出したい所ですが...なかなか難しいのが現状かと。

あとGoogle アナリティクスを利用している方多いかと思いますが、

  • 「行動」⇒「ページ速度」

をクリックする事によって、サイトの平均読み込み時間や各ページURLでの表示速度評価を一覧で見る事が出来ます。「-100%」が一番良い数字なのですが、赤いグラフで「300%」とか表示されていませんか?

そのページはあからさまに表示速度が遅いという事になります。

こちらを一通り見ると、どのページが早くてどのページが遅いのかが一目で分かりますよね。なるべく「-100%」に近づけるように修正・検証などをする事も可能かと。

という事で、少しでもこちらの点数を上げたり表示速度を高速化する方法を下記にご紹介します。

ブログを超高速化する手順・方法をご紹介

その1:写真(動画)をアップする時は必ず圧縮してから掲載

まずブログを見ているとあるある話になりますが、掲載している写真データの容量がデカすぎる...という事。

利用しているCMS(ブログの管理ツール)によっては、自動で圧縮等してくれるものもありますが、それでも元データをちゃんと加工・圧縮してからブログのメディア欄にアップするようにしましょう。

例えば今のiPhoneで撮影した写真の1枚あたりの容量いくらくらいあるか把握していますか?mog自身もiPhoneで撮影した写真データをブログで利用していますが、圧縮しない状態の写真データだと1枚2MBとか3MBとか...

これを1枚ならまだしも複数枚ブログに貼付けるとどうなるか...想像出来ますよね?

ページを開くたびにその写真メディアデータをインターネット上からダウンロードでHTML表示しようとするわけです。ページ表示速度が遅くなるに決まってますよね...

という事で、まずブログにアップロードする前に写真データは圧縮しましょう。

ここでは圧縮ツールの紹介はしませんが、mog自身はPhotoshopを使ってWeb版のテンプレートとして保存&解像度も25%に削減した状態でブログにアップしています。

これだけでiPhone で撮影した3MBの写真データを100KB程度に抑える事が出来ます。容量としては30分の1、かなり軽量ですね。

写真はもちろんの事、動画をそのままアップする場合は必ずHandbrakeなどを利用して、最低限数MBに収まるように圧縮しましょう。

その2:レンタルサーバー自体の強化も忘れずに

ブログをしばらく運営していると当然アクセス数もどんどん増えてきます。ブログ運営開始当初、レンタルサーバーなどを契約してスタートされた方も多いのでは?

mog自身もwpxクラウドのグレードA(月額500円)を契約、独自ドメインも取得してWordPressで当ブログは運営しています。(追記:現在はwpX Speedという後継サービスが提供されています)

が、運営後1年半が経過し、PV数も月30万を超えるようになって来た今、流石にサーバーの管理画面を見ていると不可が掛かりすぎている...

CPU利用率もそうですが、ページ転送量などもかなり...まだ利用出来そうとはいえ、グレードAの目安PV数を超えて来ているので、ここはグレードをBに上げて、サーバー自体の性能を強化する事にしました。

そもそも高速が売りとなっているレンタルサーバーを借りるという事も重要かと...とはいえ、大体各社同じような事言っていてどれが良いのか分からないかと思いますが...

分からなかったらwpxクラウド選択しておきましょう。安いしmog自身使っていてめちゃくちゃ快適ですよ♪

その3:PHPバージョンを最新に切り替えよう(要検証)

こちらもレンタルサーバー自体の設定になりますが、PHPバージョンって意識された事はあるでしょうか?

例えば下記、mogが利用しているwpxクラウドの管理画面になるのですが、

PHPバージョンを管理画面で切り替える事が出来ます。

で、これは他レンタルサーバー等でどうなのかはちょっと分かりませんが、wpxクラウドの場合は自分で切り替えないといつまでたっても古いバージョンのまま使い続けるといった形になっていました。

実は数ヶ月前までこの設定変更をしておらず...PHPのバージョンは5の状態で今まで使い続けていました。

PHPとは...という説明は今回省略させて頂きますが、要するにこのバージョンを新しくする事で大幅にパフォーマンスが改善される可能性があります。

が、PHPのバージョンをアップすると色々不具合が出る可能性もあります。

当ブログは一切不具合が出なかったのでそのまま最新バージョンで運営していますが...バージョンアップ前には必要なコンテンツをバックアップ&検証しながら進めるようにしましょう。

その4:Accelerated Mobile Pages (AMP)を導入しよう(要検証)

そして4番目...これが一番ハードル高いです。はっきりいって、現時点ではあんまりお勧めしません。不具合が出ても自分自身で修正&対応が出来るという方のみ取り組んでみましょう。

Googleが推奨しているブログのAMP(Accelerated Mobile Pages)化になります。モバイル向けにWebページを高速表示する仕組みといえばいいでしょうか。

mog自身、当ブログを2018年8月上旬にAMP化しましたが、それはもう酷い目にあったので...PHPバージョン切替とは比べ物にならないくらい不具合の連発です(苦笑)。

が、AMP化をすると先ほど見て頂いたページ速度調査でとんでもない点数をたたき出す事が出来ます。

モバイル:Good 95点、パソコン:Medium 82点でしたね。95点なんて点数、多分一つずつ対応していても無理なんじゃないかな...

というのは、AMP化する事で自動で余計やプラグインやJava Scriptなどを一切無効化にして、さらに最新の高速表示機能を使ってモバイル向けに爆速で表示させるという...まぁ強制的にページ表示を遅くしている機能や項目を無効化にしてしまうといった感じ。

それによって本当にページ表示速度は早くなりますし、モバイルで検索してみるとAMP化として対応している証明でもある稲妻マークが表示されていたりと...今後のSEO要素にもさらに組み込まれるんじゃないかな...とか期待をしてしまう所です。

しかし...このAMP化、プラグインなどで簡単に出来るのですが...mog自身がAMP化してみて不具合が発生した点としては

  • ブログ全体のレイアウトが崩れた(原因:テーマがAMPに対応していなかった)
  • 目次が表示されない(原因:Java Script)
  • Google Adsenseやアマゾンアフィリエイトが非表示(原因:Java Scriptな)

などなど...結構致命的な不具合が連発して起こり、全部修正するのに1週間はかかりましたね...

これ、下手したら途中で挫折する人もいるんじゃないか?と思うくらいの内容なので、自信が無い方はAMP化は見送りましょう。

AMP化が無理な場合はページ速度を遅くしている機能をOFFに出来るかどうか検討してみましょう。

例えばJava Scriptなど余計なプラグインを使っていると、確実にページ表示速度は落ちるので、AMP化が無理でもそういったプラグインを精査・削除するだけでも多少変わるかと思います。

TIPS:YouTubeでもブログノウハウを解説しています。良ければ合わせて見てみて下さい(内容が良いと思ったら、是非チャンネル登録もお願いします♪)

最後に

今回はブログサイトのページ表示速度に関して、SEOに関係するという事と速度アップするための方法をご紹介しました。

何も対策をされていない方はとにかく写真コンテンツなどを圧縮して掲載する事ですかね...Web掲載なので、イメージだけ伝えるのであればそこまで解像度は必要ないはずですし、ページ速度の方を重要視してみましょう。

またサーバの強化・PHPバージョン確認、最終的にはAMP化まで持っていければなお良し♪出来る部分から順番に実施してみましょう。