しょこら@(@syokora11_kabu)です。
前々から「自分のブログの読み込みが遅い」ことを密かに気にしていた私。
その中で、大きな比重を占めているものが画像。
私に限らず、画像を多く使っている方にとっては、自分のブログがいったいどのくらいの容量を読み込ませているか、またそれが他のサイトと比べて多いのか少ないのか、気になるところではないでしょうか。
Google様によると、そのページの画像(images)のサイズが650KB以下だとp50(全体の上位50%:ちょうど真ん中)で、180KB以下だとp25(上位25%)となるらしいです。少なくとも平均値の50%よりは上にいたいところ・・・つまり650KBよりも極力少なく抑えるというのが目指すべきデータ量ということになります。できれば180KB以下が理想かなぁ。
Page Weight Percentiles: overall & by resource type
— Katie Hempenius (@katiehempenius) March 5, 2019
If one of these categories is super high for a site, it's often an indicator that there's "low hanging fruit" performance wins to be had by optimizing that resource type.
(Data source: @HTTPArchive, Desktop Oct'18 data) pic.twitter.com/JSEsEUejE8
しかし、このGoogle様のエンジニアは結構プリティやな
果たして自分のブログ記事の画像サイズがどれくらいになっているのか?チェックするやり方は僅か3ステップ!とても簡単ですのでここで紹介します。
使うサイト
WebPageTestというサイトを使います。
ブックマークしておきましょう☆
WebPageTest - Website Performance and Optimization Test
確認のやり方
①チェックしたいブログのURLをコピペしてSTART TESTをクリック。しばらくテスト結果を待ちます。
②結果が出たら、「Content Breakdown」のタブをクリックします。
③グラフと共に、それぞれの項目の値が出ます。imageの項目が画像データで、Bytesのところがそのページで読み込んでいる容量を示しています。この例の場合は、535KBということになります。
私は当面、記事をアップする度にこのサイトで確認する癖をつけようと思います。
画像の圧縮も、Google様ご指定アプリで
もし画像を圧縮したい場合、これまたGoogle様が提供している『Squoosh』というウェブアプリが、使いやすくてかなりおススメです。
なんといってもGoogle様のお墨付きだからね!
私が愛用しているフリー画像サイトとして「ぱくたそ」や「写真AC」があります。こういった画像サイトからサムネ用の最小サイズでダウンロードした場合でも、画像によっては200~300KBを超えるものがあり、そのまま使うのはよろしくありません。よほど細かい文字などを読ませるのでなければ、予めこういったアプリで圧縮させて、1枚100KB以下に収めるのが望ましいです。
この『Squoosh』を使えば、簡単に二桁KBにダウンサイズできます。
ところで、上記レポートはこのブログの某記事のものですが、これによると、このブログの致命的な重さがJava Scriptにあることが明らかになりました。どのページも1MB超え。これは冒頭の指標でいうと下位10%という体たらく。
もともとはてなブログは重いことで知られていますが、私のサイトはそれに輪を掛けてコピペコピペでいろいろな装飾を施しているので、サーバー間の通信などでかなりの負担を掛けているようなのです。しかし技術的に追いついていない私は、何処から手を付けていいのかよく分かっておりません(´;ω;`)ブワッ
引き続き、勉強の毎日です。