ConoHaのWINGパックが5000円割引

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

3 min 1,502 views

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

私のようになりますよ。

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

何日も寝不足になりながら気にしていたので、たにやんさんの気にするレベルじゃないよ!という一言でホッとして久しぶりに眠気がやってきました。 さらに記事ごとのページの速度を調べる方法を丁寧に教えてくれました。 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タブレットについても、記事を書きたいので後で起動させてみます。まだ起動すらも出来ていません。 最後までご覧いただき、ありがとうございました!]]>

びわ

びわ

ブログ歴3年のびわと申します。このブログでは、好きなガジェットやブログ運営に役立ったモノなどをメインにご紹介していきます。お気軽にコメントや、Twitterなどで仲良くしていただけると嬉しいです!

カテゴリー:
関連記事

11 件のコメント

  1. 僕も検査したのですがスマホ48でパソコン59でした・・・。しばらく圧縮作業に追われることになります(;_;)
    この記事のおかげで早めに気づけて助かりました。ありがとうです( ´ ▽ ` )

  2. tabitoshashinさん
    Twitterでtabitoshashinさん恐ろしがっていたので、まさかスピードチェックしていたとは笑♥︎
    tabitoshashinさんはステキなお写真が多いので、画像を圧縮すれば多分かなり変わると思われます(`・∀・´)♥︎

  3. 日々進化してますね。
    素晴らしい。女性ブロガーの鏡です。
    proだと合計10個ブログができます。
    更にseesaa Fc2 live Doorなどもグーアド張り付け可能です。
    100ブログ目指してね。
    今後もおきばりやす。

  4. ayaちゃーん♥︎
    私も最近知って…ガビーンです笑(;_;)最初から圧縮しとけば良かったーって笑 ゆっくり時間をかけて圧縮しようと思います!ayaさんの素敵なお写真は画質そのまま見たいけれど、重くなるのは嫌ですよね(;ω;)♥︎

  5. softwindさん
    もーそんなに褒めてくださって…嬉しいなぁ(〃ω〃)
    100ブログ!笑 思いもしなかった発想です笑
    100ブログまでは行かなくても、Wordpressでもチャレンジしてみたいと思ってます(`・∀・´)♥︎もちろんはてなブログはずっと続けます!softwindさんや、読者の皆さまに出会えたので!

  6. ( ✪ ω ✪ )はじめまして★
    お邪魔します!
    ヘッダ?のパンダちゃんが可愛いすぎて辿り着きました!カワユス!

  7. こんにちは、私も知らずにそのまま載せてました。
    分かりやすく教えて下さってありがとうございました♪
    まだブログ始めたばかりなのでこれから圧縮して載せていこうと思います(^^)

  8. バリピル宇宙さん
    ヘッダにもアイコンもパンダに最近変更しました笑
    ありがとうございます!♥︎読者登録させていただいたので、また遊びに行かせていただきます!

  9. sakura313さん
    いえいえ!こちらこそコメント嬉しいです。
    ありがとうございます♥︎
    ブログ始めたばかりならば是非圧縮オススメです!
    後からやるの大変なので^^♥︎

  10. ねこやしきさん
    60なら気にするレベルじゃないみたいです!カスタマイズしていたりとかすると皆んな同じくらいみたいで(;ω;)♥︎
    今から気をつけるようにすれば大丈夫みたいですよ^^

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です