【24/7】高配当株とかマイレージとか車とか【独り言】

高配当&優待株で不労所得を得ながら、各航空会社のステータスを狙い、大切な愛車と過ごす日々を綴っています

貴方のブログ画像は重すぎない?30秒でそのページのデータ量を確認する方法を紹介します!

しょこら@(@syokora11_kabu)です。

前々から「自分のブログの読み込みが遅い」ことを密かに気にしていた私。

その中で、大きな比重を占めているものが画像
私に限らず、画像を多く使っている方にとっては、自分のブログがいったいどのくらいの容量を読み込ませているか、またそれが他のサイトと比べて多いのか少ないのか、気になるところではないでしょうか。

Google様によると、そのページの画像(images)のサイズが650KB以下だとp50(全体の上位50%:ちょうど真ん中)で、180KB以下だとp25(上位25%)となるらしいです。少なくとも平均値の50%よりは上にいたいところ・・・つまり650KBよりも極力少なく抑えるというのが目指すべきデータ量ということになります。できれば180KB以下が理想かなぁ。

 

 

しかし、このGoogle様のエンジニアは結構プリティやな

 

果たして自分のブログ記事の画像サイズがどれくらいになっているのか?チェックするやり方は僅か3ステップ!とても簡単ですのでここで紹介します。

使うサイト

WebPageTestというサイトを使います。
ブックマークしておきましょう☆

WebPageTest - Website Performance and Optimization Test

 

確認のやり方

①チェックしたいブログのURLをコピペしてSTART TESTをクリック。しばらくテスト結果を待ちます。

f:id:syokora11:20190317021215j:plain


②結果が出たら、「Content Breakdown」のタブをクリックします。

f:id:syokora11:20190317021350j:plain


③グラフと共に、それぞれの項目の値が出ます。imageの項目が画像データで、Bytesのところがそのページで読み込んでいる容量を示しています。この例の場合は、535KBということになります。

私は当面、記事をアップする度にこのサイトで確認する癖をつけようと思います。

画像の圧縮も、Google様ご指定アプリで

もし画像を圧縮したい場合、これまたGoogle様が提供している『Squoosh』というウェブアプリが、使いやすくてかなりおススメです。

 

なんといってもGoogle様のお墨付きだからね!

 

私が愛用しているフリー画像サイトとして「ぱくたそ」や「写真AC」があります。こういった画像サイトからサムネ用の最小サイズでダウンロードした場合でも、画像によっては200~300KBを超えるものがあり、そのまま使うのはよろしくありません。よほど細かい文字などを読ませるのでなければ、予めこういったアプリで圧縮させて、1枚100KB以下に収めるのが望ましいです。

この『Squoosh』を使えば、簡単に二桁KBにダウンサイズできます。

f:id:syokora11:20190317031425j:plain


ところで、上記レポートはこのブログの某記事のものですが、これによると、このブログの致命的な重さがJava Scriptにあることが明らかになりました。どのページも1MB超え。これは冒頭の指標でいうと下位10%という体たらく。

もともとはてなブログは重いことで知られていますが、私のサイトはそれに輪を掛けてコピペコピペでいろいろな装飾を施しているので、サーバー間の通信などでかなりの負担を掛けているようなのです。しかし技術的に追いついていない私は、何処から手を付けていいのかよく分かっておりません(´;ω;`)ブワッ

引き続き、勉強の毎日です。