突然ですが。
このブログ、遅いんですよ。
表示が。
1ページのボリュームが多かったり画像も大きいの貼り付けたりしてるのでまぁしょうがないのですが、Googleはサイトの表示速度を検索結果へ反映させると言っているし、特にモバイルでの閲覧に対してこの影響を大きくすると言っています。
実は
この時の検証で、モバイルからのアクセスがメチャクチャ減ってるのに気づいていたんですよ。
今までPCが４割、モバイル５割、残りがタブレットとかで見てる人たち。そうそう、一度だけNintendo 3DS Browserのユーザーがいましたよ。
お子様はこんなサイト見てちゃダメですよ？
で、現在はというとPCが7割、モバイルが3割、残りが1割以下のタブレットなど。
明らかにモバイルからの閲覧割合が大きく減少しています。
全体的なPVも激減しているんですけどね。
ということで、今回はサイトの表示速度を速くしてモバイルユーザーにもフレンドリーなサイトへと調整してみたいと思います。
もくじ
まずは現状把握から
PageSpeed InsightsというGoogleが提供しているツールを使用します。
これはページの表示速度を測定してくれるGoogle謹製のツール。
まずはトップページを計測してみます。
このブログのトップページは最新記事を10件並べるというオーソドックスなブログ。
測定してみると・・・
悪くないっスね。
PC環境での閲覧は大きな問題がないとわかりました。
次にモバイル環境。
ひでぇ・・・・。
あらゆるポイントで赤字やオレンジの注意表示が出ています。
読み出しが終わるまで9.8秒ですって。
親切にも改善案を提案してくれているので内容をチェックしてみます。
はてブのスクリプトが重いのは実装前から知ってました。
けどこれもうしょうがないじゃん。
あとは外部CSSなどの読み出しなど。どれもこれ以上削るのは難しい。
ボリュームの多い記事だとどうなるか
このブログで最もボリュームの多い記事と言えば
この記事ですね。
自分でもよくこんなに書いたなって思います。これはAMDへの信仰の現れなのでコンテンツを削るわけにはいきません。
このページの速度を測定してみます。
PC閲覧でこの遅さ。
ハッキリ言ってスコアは80以上くらいでないと訪問者にストレスを与えかねません。
問題はモバイルでの閲覧。
測定前から嫌な予感がバリバリします。
想定以上にあかんやつや！
６って。
ちなみに動画やコンテンツ貼りまくってスクリプトも盛りだくさんでクソ重そうな某ニコニコ動画のモバイルトップページでさえ
22
ですよ。
このページは某ニコ動以下ってことです。
これは由々しき事態。
何が足を引っ張っているのか見てみます。
ですよね。
ようするに画像を貼り過ぎなんですよ。
しかもPC用のフルサイズ画像。
これはなんとかせねば。
EWWW Image Optimizerで画像を最適化！
WordPressのプラグイン
EWWW Image Optimizer
を使ってみます。
新規プラグイン追加で
EWWW Image Optimizer
を検索します。
こういうアイコン。
インストールして有効にして適当に設定します。
設定はググれば他のブロガーが親切丁寧に説明してくれているのでここでは省きます。
初期設定を終えたら、「メディア」のメニューに新しく「一括最適化」というのが増えているのでクリック。
3051ファイルもあるんか・・・。
待ちます。
さぞや時間がかかるのかと思いきや3分くらいで終わりました。
結果は如何に？！
先ほどと同じく、PageSpeed InsightsにRyzenについて書いた記事を読み込ませてみます。
・・・・測定中・・・・・。
結果が出ました。
まずはモバイルから。
１しか改善されてないんですけど！
パソコンの方も見てみます。
むしろ１悪くなってるんですけど！！
ちょっと納得がいかないのでトップページもチェックしてみました。
結果
96 → 93（3ダウン！）
34 → 36（2アップ）
どういうことだよ！
原因は画質低下を恐れ日和ってしまってjpegの品質を60%に設定したのと、そもそもアップしている画像のサイズがブログのメインフレームの横幅より大きいせいです。
写真を重視しているフォトジェニックな写真ブログでもない限り、画像のサイズはメインフレームを最大として、小さくていい画像は小さいサイズでアップしたほうが良いということですね。
プラグインLazy Loadで遅延読み込み
EWWW Image Optimizerがあまりにも効果がなかったどころか悪化してるシチュエーションもあったので本当にがっかりです。
こうなったらさらに足掻いてやりますよ。
「Lazy Load」というプラグインを使って画像の遅延読み込みに対応させてみます。
画像の遅延読み込みとは、スクロールするまでは現在非表示の下のほうにある画像は読み込まずに待ち状態にすることです。
個人的には嫌いなんですけどね。
ああ、また読み込み始めた、って目に見えるし、一気に下までスクロールしたときに画像が一向に表示されなかったりとストレスを感じることがあるので。
でもま、試してみましょう。
プラグインの新規追加で
Lazy Load
を検索。
いくつかありますが、今回はこれを入れます。
なぜなら、
説明が日本語
というだけでチョイスしました。あと更新が1か月前と最近だったのもありますが。
インストールして有効にするだけで設定は何も必要ありません。
先ほどと同様、Ryzenの記事を計測してみます。
さて結果は如何に。
変化なし！！
念のためパソコンでの表示もチェック。
64 → 69（5アップ）
こんなの誤差の範囲ですよね・・・。
まとめ
EWWW Image Optimizer
トップページ
PC 導入前：96 → 導入後：93（3ダウン）
モバイル 導入前：34 → 導入後：36（2アップ）
Ryzenのページ
PC 導入前：63 → 導入後：64（1アップ）
モバイル 導入前：6 → 導入後：7（1アップ）
さらにLazy Loadを追加
トップページ
PC 導入前：93 → 導入後：94（1アップ）
モバイル 導入前：36 → 導入後：29（7ダウン！）
Ryzenのページ
PC 導入前：64 → 導入後：69（5アップ）
モバイル 導入前：7 → 導入後：7（変化なし）
未対策だった最初から結局のところどうなったのか
トップページ
PC 導入前：96 → 導入後：94（2ダウン）
モバイル 導入前：34 → 導入後：36（2アップ）
Ryzenのページ
PC 導入前：65 → 導入後：69（4アップ）
モバイル 導入前：6 → 導入後：7（1アップ）
ということで予想以上にショボイ結果に終わってしまいました。
特にモバイルで大して効果がなかったのはやった意味マジでなかったなと思わざるを得ません。
結局のところ、新たに追加したプラグインの読み込みが当然加算されるわけで、EWWW Image Optimizerは全画像を処理してトータルで23％圧縮に成功しましたと言っているものの、そんなものほぼ誤差に過ぎないということが分かりました。
やはりブログを速くするには
・プラグインはできるだけ少なく
特にログを取ったり訪問者をチェックする系（Ban系）やソースの置換処理を行うやつは重くなります。
・画像は最初から適切なサイズで
最大でもブログの横幅に合わせたサイズで使用しましょう。
このブログでは、クリックで画像が大きくなるようにしているため最大1200pxの画像で読み込ませています。これがかなりのネック。
はてブやめようかなぁ・・・（これ辞めるだけでトップのモバイル表示を1680ms速くできる）。