Pagespeed Insightsのスコア改善実践記!モバイル表示速度の高速化!

スポンサーリンク

unnamed9861DNFS

ある日いつものようにアドセンスの収益をチェックしていたら、これまで全く見ていなかった気になる項目が。

アドセンス

ん??スコアカード??

なにやらサイトの状況というところだけ、3つ星になってるのでクリックしてみる。

アドセンス2

モバイル表示でのパフォーマンス分析ですか。

僕のアドセンス収益は90%以上モバイルからなので、黄色の注意マークが出てるということは改善せねばならぬということですね。

ちょっと見てみましょう!

スピード

僕のブログでよく読まれているページが表示されています。

どうやらこれはPagespeed InsightsというGoogleのページ読み込み時間をチェックするツールのようです。

どれどれ僕の売れっ子記事の分析はどうかなっと。

修正

51点!これが低いのか普通なのかは分かりませんが、赤で表示されてるということは、修正が必要ということですね。

修正が必要な項目は・・・

  • ブラウザのキャッシュを活用する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

すいません。なにを仰っているのか全く分かりません(;´Д`)

詳細

修正方法を表示してみると具体的な改善提案が書いてあるのですが、日本語で書いてあるのに、まるで外国語のようです。

ググるしかねぇ。僕にはググるという翻訳ツールを使うしかねぇ。

WEBという荒波の中を泳いでいくこと30分。やっと目指している記事が見つかりました!

  最近ブログの高速化をいろいろ試していました。 その中で、見た目を特に変更することなく簡単にできて効果も高い高速化手段を自分なりに見つけたのでまとめてみます。 2010年からは、Googleの検索結果でも表示スピードが評価

僕が使っているテーマ「simplicity」の製作者わいひらさんの記事です。もうわいひらさんに足を向けて寝られなくなりました。本当に感謝です。

今回は、わいひらさんの記事を参考に、Pagespeed Insightsのスコアを改善して、モバイル表示速度の高速化を目指していきます!

モバイルフレンドリーアップデートも行われたことですし、モバイルユーザビリティをしっかり向上させましょう!

スポンサーリンク

画像のデータサイズの圧縮

先日から、ブログの高速化をしています。とりあえずこれまでに以下の高速化作業をしてきました。これらの作業によりPageSpeed Insightsのスコアが、61→77とかなり改善してきました。毎回、一つ一つ成果を確かめながら高速化させたいの

EWWW Image Optimizer」はブログ開設当初から有効化していたので省略。

TinyPNG」があることは前から知っていましたが、使っていませんでした。

とはいえこれまでの記事で使った画像を全て圧縮するのは時間がかかりすぎるので、今後使う画像は全て圧縮してからWordPressにアップロードしていこうと思います。

プラウザのキャッシュ設定とリソースの圧縮

先日から、ちょこちょこブログの高速化をしています。 この前は、ブラウザキャッシュの設定をしてPageSpeed Insightsのスコアが少し改善しました。 とりあえず、今回も1つずつ改善していきたいので、今回は「リソースを圧縮

FTPファイルを編集することになるので、実行する前に必ずバックアップをとりましょう!画面が真っ白になったりしたらホントに泣けます(;´Д`)

ロリポップ

ロリポップの場合はユーザー専用ページから、WEBツールをクリック。

ウェブツール

WEBツールの中のロリポップFTPを開きます。

fto

次にファイルの中から、.htaccessファイルをクリック。

コード記入後

# END WordPressの後に、わいひらさんが用意してくれたコードをコピペして保存すればOK!

JetPack「Photon」の設定

今回は、CDN(コンテンツデリバリーネットワーク)を用いてブログを高速化する方法です。これまで、このブログには以下の四つの設定を一つ一つ施してきました。 ブラウザキャッシュの設定 リソースを圧縮して転送サイズを減らす 画像を最適化(ロスレス

ロリポップだからか「サーバーの応答時間を短縮する」という修正項目が出ていたので、「Photon」を設定してみたのですが、点数も上がらず修正項目も消えませんでした。

表示速度も設定後の方が遅く感じたので、現在は解除しています。

アクセスの多いブログでサーバーに負荷がかかっている場合や、弱いサーバに限ると思います。強いサーバーを使っていて、アクセスが一日に5000以下であれば、特別設定することもないかもしれません。

わいひらさんもこう書かれているので、PVが増えてからもう1度検討したいと思います。

HTML、JavaScript、CSSの縮小

今回は、リソースを縮小してWordpressブログを高速化する方法です。これまで、このブログには以下のような高速化を一つ一つ施してきました。 ブラウザキャッシュの設定 リソースを圧縮して転送サイズを減らす 画像を最適化(ロスレス圧縮)どれも

プラグイン「Autoptimize」を有効化して設定した結果・・・

75点しかし・・・

点数が上がってきたー!!!

「修正が必要」の項目もサーバーの応答時間だけと、間違いなく効果があがっています。

ところが・・・

モバイルでの表示が崩れてるー(´゚д゚`)

PCでは普通なんですが、モバイルで見ると画面が横に大きくはみ出してしまいます。

設定

調べていくとCSSの縮小で不具合が出ていることが分かったので、CSSだけチェックを外したところ表示が元に戻りました。

恐らくmobile.cssに記入しているコードの影響だと思うのですが、デザイン的に変更したくないコードばかりなので今回は断念。

もう1度「Pagespeed Insights」をチェックしてみると・・・

60点・・・

点数下がってるし、項目が増えてるー(;´Д`)

CSSを縮小すれば点数が上がることは分かっているので、色々と調べてみたのですが、プラグインなどで簡単に縮小できる方法は見つかりませんでした。

直接修正すればいいのでしょうが、無知な僕がやると更に悪くなりそうなので諦めることに(-_-;)

せめて70点台にしたかったなぁー。

設定前後の表示速度の比較

CSSの縮小はできませんでしたが、わいひらさんの記事にあったツールを使って、表示速度が改善されたのか比較してみます!

GTmetrix

GT 改善前

Autoptimize

ページスピードが、B(82%)→A(90%)と速度が上がってます!!

関連 GTmetrix

Website Speed Test

PD 改善前

1つ

こちらもグレードが、63→72に上昇!!

関連 Website Speed Test

「Pagespeed Insights」での点数は60点までしか上がりませんでしたが、対応する前より読み込み速度は上がっていて一安心です。

まとめ

モバイルフレンドリー

サイトがモバイルフレンドリーに対応しているかチェックできる、モバイルフレンドリーテストでも問題ありませんでした!!

プラグインを設定したり、コードを記入するだけで表示速度を上げることが出来ましたので、是非試してみてください。

僕のようにCSSの圧縮の問題がなければ、「Pagespeed Insights」のスコアも上がると思いますので。

最後に寝ログのわいひらさんには、分かりやすい記事のおかげで本当にお世話になりました。この場を借りてお礼を申し上げますm(_ _)m

それではまた!!

僕が行っているブログのカスタマイズ

初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!

プラグインでアドセンスを記事毎に非表示にして代替広告を貼る方法

WordPress記事にYouTube動画を挿入しても読み込みが遅くならない方法

スポンサーリンク
たもトピ・大
たもトピ・大

シェアしていただけると励みになります

Pagespeed Insightsのスコア改善実践記!モバイル表示速度の高速化!
この記事をお届けした
『たもトピ』の最新情報を、
いいねしてチェック!