ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

SEO対策

PageSpeed Insightsで速度が2倍上昇!モバイルだけ遅い人必見

更新日:

 

こんにちは、誠太です!

 

あなたのサイトのページ速度の計測をしたことがありますか?

 

僕は先日、Google から提供されている「PageSpeed Insights」というものを利用してみました。

 

するとなんてことでしょうか・・・

 

■スコア結果

PC=100点中95点

モバイル=100点中27点

 

誠太

・・・なにこのギャップ(汗)

 

モバイルユーザーが大半で締めていると言われている昨今、モバイルスピードが著しく遅いのはなんとかしなければいけません。

 

そこで今回は、SEO対策のひとつとして、モバイルページのスピードを改善させるべく、昨日行なった施策についてお話していこうと思います。

 

PageSpeed Insightsとは

 

 

PageSpeed Insights は冒頭でもお伝えしましたが、Google からサービス提供されているウェブページのスピードテストと速度改善のアドバイスをもらえるサービスです。

 

 

ああなたのブログのURLを打ち込むことによって、PCとモバイル両方のページ表示速度を点数として表示してくれます。

 

また、表示速度が上がるための方法をアドバイスもしてくれるのですが、書いてあることは専門的な言葉で書かれているので、ひとつずつ検索して解決していくしか確実な方法がない現状です。

 

しかし、その中でも見ただけで解決できそうなものがいくつかあったので、今回試してみたところ27点から55点まで上昇させることが出来ました。

 

約2倍です!

 

今回はその方法をお伝えするので、まだ試したことのない方法であればページの表示速度が上る可能性があるので、試してみてくださいね!

 

実際に行ったページ表示速度改善の方法

 

今回行った具体的な方法は

  • ブログ内の画像の最適化
  • キャッシュプラグインでキャッシュの管理と削除
  • HTML と JavaScript の最適化

 

ブログ内の画像の最適化

 

画像はブログを運営していると、読者にわかりやすく解説するためには外せないメディアです。

 

その画像は高画質であるほど読み込みに時間がかかってしまうので、画像の最適化を行いました。

 

使用したWordPress プラグイン

 

EWWW Image Optimizer

 

このプラグインを使用すると、ブログ内に使用されている画像を最適化することができます。

 

最適化を行うと画質を損なうこと無くファイルサイズを圧縮(サイズダウン)されるので、自然とページの読み込みが下がるという仕組みです。

 

■設定方法

下記の項目にチェックを入れて完了です。

チェックを入れたらWordPress ダッシュボードの「メディア」→「一括最適化」
から画像の最適化ができます。

 

BASIC:「Remove Metadata」

ExactDN:「Include All Resources」/「Premium Compression」

 

トップページの画像スクロール撤廃

 

先日までトップページのヘッダー画像下に「見栄えを良くするため」という理由でスクロール型の最新記事表示を設定していました。

 

  1. 投稿した最新記事を読み込ませる
  2. その最新記事の画像も右から一緒にスクロールさせる

 

絶対これも原因のひとつだと感じて、思い切って撤廃しました。

 

その為、現在はトップページがスッキリしてしまっていますが、ユーザビリティの向上には変えられません。

 

しかし、シンプルすぎてしまうので、僕が使用しているWordPressテーマのAffinger5 WING で面白そうな機能があったので、別のコンテンツを近々トップページ下に追加したいと考えているので、追加した際は Twitter などで紹介しますね!

 

参考までに僕が使用していた最新記事スクロールのHTMLコードはコチラです。

 

 

キャッシュプラグインでキャッシュの管理と削除

 

今回は有名どころのキャッシュプラグインを使用して、
手軽にキャッシュの管理と削除ができるようにしました。

 

使用したWordPress プラグイン

 

WP Fastest Cache

 

このプラグインを使用すると、キャッシュ(サーバーに一時保存されているウェブ閲覧データ)をカンタンに管理することができ、なおかつ削除する項目も設定できるので、ページの表示速度を上げるきっかけになります。

 

■設定方法

下記の項目にチェックを入れて完了です。

コチラのプラグインは画像で設定項目を表示させたほうがわかりやすいので画像を用います。

 

モバイル部分にチェックが入っていないのは、このブログのワードプレステーマがレスポンシブデザインに対応しているためです。

 

レスポンシブデザインに対応していないテーマを使用されている場合は、この部分にチェックを入れておきましょう!

 

 

コチラの画面でキャッシュの削除を行います。

 

毎日する必要はないかと思いますので、1ヶ月に1回や2周間に1回などのペースで削除するルーティンを決めておきましょう。

 

基本的には2つある内の下の削除ボタンで大丈夫です。

 

HTML と JavaScript の最適化

 

HTML と JavaScript の最適化は、ひとつ前で紹介した
WP Fastest Cache と併用される頻度の高いプラグインを使用しました。

 

使用したWordPress プラグイン

 

Autoptimize

 

PageSpeed Insights の診断結果で「JavaScript の実行にかかる時間の低減」というものがあったので、このプラグインを選択しました。

 

■設定方法

下記の項目にチェックを入れて完了です。

 

HTML:「HTML コードを最適化」

JavaScript オプション:「JavaScript コードの最適化」

CSS オプション:「CSS コードを最適化」/「Aggregate CSS-files?」/「インラインの CSS を連結」/「すべての CSS をインライン化」

その他のオプション:「連結されたスクリプト / CSS を静的ファイルとして保存」/「ログイン中のユーザーも最適化しますか ?」

 

以上の3つのプラグインを導入し、表示速度の向上を実行し好転しました!

 

まとめ

 

今回は 「PageSpeed Insights」 の結果に衝撃を受け、モバイルページの表示速度高速化の対策を行いました。

 

2019/1/30 ブログ更新日である本日のスコアはこのような結果になっています。

 

 

PC表示はもともと95点だったのですが、4点上昇の99点になってました。

 

誠太

動揺を隠せません(震え声)

 

モバイルページの表示高速化に関してはもう少し頑張りたいですね。

 

まだまだ何かしら手立てはあると思いますし、AMPでも高速化を図れると思うので、また効果のありそうな新しい手段を見つけたら共有したいと思います。

 

本当はこの記事をSEOという分野の記事として、もう一つ話題を突っ込もうかと思っていたのですが、1記事1テーマの法則を守って更新していきたいと思ったので、今回は控えさせていただきました。

 

ちなみに話題としては、以前にカバレッジエラーの記事を書いて「あえてエラーを放置する」という話題をお伝えしました。

 

しかし、それが本当に良いことなのか少し疑問に思うことがあり、調査を行ったところ面白い記事が書けそうなきっかけが出来たので、明日はカバレッジエラー第2弾の更新を行いたいと考えています。

 

あなたにとって思考が柔軟になるきっかけになる記事になるかもしれないです。

 

「俺(私)、ちょっと思考が固いかもしれない・・・」

 

と思ったら明日の更新も楽しみにして頂ければと思います(笑)

 

前回の記事はコチラ

参考記事
【noindexエラー】カバレッジエラーを改善・放置する必要性とは!?

続きを見る

 

誠太

それでは!今回も最後まで読んで頂き、ありがとうございました。

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-SEO対策
-, ,

Copyright© Limitless.net , 2019 All Rights Reserved.