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

表示速度を気にするならば、注意が必要です。

私のようになりますよ。

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

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

この４つは難易度が高いので、まず一番最初に自分にできることは、画像を最適化することだと思いました。なので、今手作業で１枚１枚の写真を圧縮して、再び貼り付けるという作業を、必死こいてやっております。   その間に、上記の４つについて、勉強して対策していければいいなと思っております。 せっかく見よう！と思ってくれた方が、このブログ表示遅いから、バイバイ！となってしまったら、悲しいですもんね。

PageSpeed Insightsを使うべきブログ

• 写真をたくさん載せているBlog
• YouTubeなどの動画をたくさん載せているBlog
• たくさんカスタマイズしているBlog

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

スマホで写真を撮ると、その撮った一枚の写真の容量は結構大きいことをBlogをするようになって知りました。 xn--p-07tyf5b.com （このサイト様を参考にしました。） 解像度などでも変わるようなのですが、約３ＭＢってどんだけー☝ 私は、スマホから記事を書くことが多いです。思いついた時などに、サッと下書きに書いておけるので。DIYを写真で撮るときもスマホです。そのため、そのままスマホの写真を記事に載せていました。 表示速度の関係から、圧縮したほうがいい。とどこかのサイトさんでお見かけしたので、スマホのアプリで圧縮してから、はてなブログのアプリの下書きの記事などに貼り付けています。

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

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

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

何日も寝不足になりながら気にしていたので、たにやんさんの気にするレベルじゃないよ！という一言でホッとして久しぶりに眠気がやってきました。 さらに記事ごとのページの速度を調べる方法を丁寧に教えてくれました。 https://twitter.com/taniyantoiu/status/913270717080207360   このたにやんさんが教えてくれた通りに開くと

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

を見ることが出来ました。   記事ごとの表示速度が分かれば、表示するまでに時間がかかる記事から画像を圧縮していけます。 たにやんさんが教えてくれなかったら、気づくのに半年以上かかっていたかもしれません。

画像圧縮に役立つサイト

TinyJPG – Compress JPEG images intelligently というパンダのJPG形式に出来るサイトで圧縮し、再度ブログに貼り付けましょう。 この前オススメしていたのはPNG形式のサイトでしたので、間違いやすいのですが、同じパンダのサイトでもPNG形式のサイトと、JPG形式のサイトに分かれているようです。     コメントいただいた皆さま、たにやんさん、本当にありがとうございました。

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

早く全部圧縮せんかい！

終わりに

カスタマイズをしていると、どうしてもスマホからの表示速度が遅くなってしまうようで、私くらいの数値（58/100)は気にするほどでもないことが、分かりました。はてなブックマークでコメントくださった方の数値も、スマホの表示速度は大体同じくらいの表示速度でした。そうなると、やはり出来ることは画像の圧縮です。 写真をよく載せる方は圧縮してみてくださいね。 あとFireタブレットについても、記事を書きたいので後で起動させてみます。まだ起動すらも出来ていません。 最後までご覧いただき、ありがとうございました！]]>