あたらしくつくったサイトがめちゃ速い、という記事を書いてみていまの重いサイトどうにかしなくちゃなと思ったわけです。
いろいろと打つべき施策はあるだろうけど
まずはページの容量から見ておきたい。
こちら、運営中の人気目のページに関する基礎数値。
Chromeで表示中のページをローカルに保存して拡張仕事に分類したものです。
| 種別 | 拡張子 | ファイル数 | 容量（MB） | 容量比率 | KB / ファイル |
| 画像 | jpeg | 62 | 9.2 | 64.19% | 152 |
| png | 6 | 0.1 | 0.72% | 18 | |
| gif | 3 | 0.0 | 0.03% | 1 | |
| テキスト | css | 9 | 0.3 | 1.81% | 30 |
| html | 74 | 0.3 | 2.06% | 4 | |
| html(ads) | 36 | 2.5 | 17.44% | 71 | |
| JavaScript | 22 | 1.3 | 9.07% | 61 | |
| php | 1 | 0.0 | 0.00% | 1 | |
| txt | 70 | 0.2 | 1.55% | 3 | |
| plain-txt | 11 | 0.4 | 3.13% | 42 |
とある1ページ。
294ファイル、14.4 MBでした。
「jpeg」「html(ads) アドセンスの表示枠っぽい」の2つで81%でした。対策打つならここからですね。
ページ容量の81%を占める画像とアドセンスへの現状分析と処置
アドセンス
改めて数えてみたらたしかにありました。
30個超えの広告が。
1ページ3広告までのルールが撤廃されたからって、コンテンツ多めだからって、調子に乗りすぎて貼りすぎた気がします。
各ユニットのクリック率等を調べた上で、減らすべきでしょうね。
（後日結果を追記）
画像
画像にはしっかり圧縮も掛けているので
ファイルサイズは平均 151 KB とごく平均的な大きさのはず・・・
とはいえ1ページで62個は使いすぎでしょうね。
また平均は151 KBですが、もっとも大きいサイズの画像だと375 KBほどあります。
スマホも高解像度化してきているので、変に縮めずできることなら高解像度の画像を表示してあげたいところです（いまは基本的に幅1200ピクセル）
そうはいっても。
なにもしないわけにはいきません。
（１）記事本文中に表示する画像は小さめの画像（例えば1200ピクセル幅を500ピクセル幅へ）に変更し、クリックで原寸サイズの画像が表示されるようにする
（２）現在はJpegMiniを用いて圧縮しているが、さらなる圧縮のできるツールがないかを探す（画像の劣化との天秤）
（３）画像点数を抑える（例えばいまの62をほぼ半分の30まで減らす）
（４）ページ分割して、いちどにロードする領域を減らす（あまりこの方式はユーザビリティー的に好きではないので採用したくはないが
（５）WebPへの移行
WebPとはGoogleが開発推進する次世代画像フォーマット 軽量 先日、AppleがWebP対応に向けて動くと発表があった この発表を受けてWebPへの移行を進めても良さそうな段階に入ったように思う Safariが正式に対応するまでは「JPEG」「WebP」の2種類が混在し、ブラウザによって画像を出し分けしなければならないのかと思いがちだがその心配はいらない いくつかの仕組みでは「ブラウザがSafariだったらJPEG、そうでなかったらWebPを渡す」という振る舞いをさせることが可能だからだ いま自分のサイト群で使っているプラグイン「EWWW Image Optimizer」にも同等の機能があるようなのでそいつを使えばよさそう まずはテストサイトで動きを確認して問題なければ順次展開していこうかと思う
ざっと思いつく限りこんなところ。
（後日結果を追記）
めも
実施前と後でPageInsightの数値にどう変化が起こるか見たいため、キャプチャしておくこと。
コメント