DIY BLOG In Nagasaki

女の子でも簡単に出来るDIYを紹介していきます!

スマホのブログ表示速度が遅すぎたので対策をした

スポンサーリンク

皆さまこんにちは!今ちょっと、PageSpeed Insightsの結果で頭がいっぱいのみっぷうです。スマホから記事を投稿し、圧縮せずにそのままポンッと載せている方は、ブログの表示速度を気にするならば、注意が必要です。

私のようになりますよ。

 

 

PageSpeed Insightsとは

PageSpeed Insightsをご存知でしょうか?

Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します。URL を 2 回(モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ)取得します。

PageSpeed のスコアの範囲は 0~100 ポイントです。スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します。なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります。

引用元:

PageSpeed Insights について  |  PageSpeed Insights  |  Google Developers

簡単にいうと、ブログの表示速度を調べてくれるサイトです。

私はスマホ版が58/100でした。私のBlogはDIYを紹介するBlogなのでどうしても写真が多くなりがちです。しかも、最初の頃の記事の写真は、全く圧縮していませんでした。そのため、スマホからBlogを見るとブログを読み込むのに時間がかかってしまっていました。

 

 

f:id:imuh:20170927101735j:plain

このPageSpeed Insightsを見て、ブログ初心者の私は、口がポカーンでした。ちょっと難易度が高すぎる。全然頭に入ってこない。しかし、赤く書かれているPoor 58/100という数値は非常にまずいと感じ、どうしようと頭から離れず、ひたすら調べて一日過ごしました。ちなみに、パソコンはNeeds Work 76/100という、微妙な数値でした。

まず、

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

この4つは難易度が高いので、まず一番最初に自分にできることは、画像を最適化することだと思いました。なので、今手作業で1枚1枚の写真を圧縮して、再び貼り付けるという作業を、必死こいてやっております。

その間に、上記の4つについて、勉強して対策していければいいなと思っております。

せっかく見よう!と思ってくれた方が、このブログ表示遅いから、バイバイ!となってしまったら、悲しいですもんね。

 

PageSpeed Insightsはこんな人にオススメ

写真をたくさん載せているBlog

YouTubeなどの動画をたくさん載せているBlog

たくさんカスタマイズしているBlog 

 

スマホから記事を書くのが多い方は注意

スマホで写真を撮ると、その撮った一枚の写真の容量結構大きいことをBlogをするようになって知りました。

xn--p-07tyf5b.com

(このサイト様を参考にしました。)

解像度などでも変わるようなのですが、約3MBってどんだけー☝

私は、スマホから記事を書くことが多いです。思いついた時などに、サッと下書きに書いておけるので。DIYを写真で撮るときもスマホです。そのため、そのままスマホの写真を記事に載せていました。

表示速度の関係から、圧縮したほうがいい。とどこかのサイトさんでお見かけしたので、スマホのアプリで圧縮してから、はてなブログのアプリの下書きの記事などに貼り付けています。

  

カスタマイズしていたりテーマによっても遅くなる

TwitterでこのPageSpeed Insightsの結果をツイートすると、たにやんさん(@taniyantoiu)、いぐべさん(@yamagata_igube)、ひつじ田メイ子さん(@hitizidameiko39)、半漁人さん(@dabohaze2017)がコメント下さり、本当に嬉しかったです。ありがとうございます。

 

たにやんさんに助けてもらった

f:id:imuh:20170928153526j:plain
f:id:imuh:20170928153351j:plain

何日も寝不足になりながら気にしていたので、たにやんさんの気にするレベルじゃないよ!という一言でホッとして久しぶりに眠気がやってきました。

さらに記事ごとのページの速度を調べる方法を丁寧に教えてくれました。



このたにやんさんが教えてくれた通りに開くと

  1. 記事ごとのページビュー数
  2. 平均読み込み時間
  3. PageSpeedの提案
  4. PageSpeedスコア

を見ることが出来ました。

記事ごとの表示速度が分かれば、表示するまでに時間がかかる記事から画像を圧縮していけます

たにやんさんが教えてくれなかったら、気づくのに半年以上かかっていたかもしれません。

 

画像圧縮に役立つサイト

TinyJPG – Compress JPEG images intelligently

というパンダのJPG形式に出来るサイトで圧縮し、再度ブログに貼り付けましょう。

この前オススメしていたのはPNG形式のサイトでしたので、間違いやすいのですが、同じパンダのサイトでもPNG形式のサイトと、JPG形式のサイトに分かれているようです。

 

 

たにやんさんとは

なんと知識ゼロから一か月でテーマを投稿するレベルまでになられたすごいお方です。私もパソコンやCSSも少しずつインプットしているつもりではありますが、彼のインプット能力に驚きます。
でも、ここまでインプット出来るということは、きっと人一倍努力されたんだろうと思います。更に、人一倍優しいです。困っている人には自分から助けようとする男前なお方です。私も何度もたにやんさんに助けられております。

世界中の女の子の理想のタイプだど思います。

www.nani-suru.com

 本当にありがとうございました。

 

 

せっかくFireタブレット届いたのに全くいじれておりません!

早く全部圧縮せんかい!

 

終わりに

カスタマイズをしていると、どうしてもスマホからの表示速度が遅くなってしまうようで、私くらいの数値(58/100)は気にするほどでもないことが、分かりました。はてなブックマークでコメントくださった方の数値も、スマホの表示速度は大体同じくらいの表示速度でした。そうなると、やはり出来ることは画像の圧縮です。

写真をよく載せる方は圧縮してみてくださいね。

 

あとFireタブレットについても、記事を書きたいので後で起動させてみます。まだ起動すらも出来ていません。

最後までご覧いただき、ありがとうございました!