Webサイトの軽量化

FLAPPERのデバイス別セッション数を見てみると、

パソコン 約65%
モバイル 約33%
タブレット 約2%
(過去90日間)

となっています。

AviUtlでの動画編集といった内容的にパソコンから閲覧する機会が多いコンテンツという自分の予測と一致しています。

しかし、時代はモバイル優位になっています。

Google検索も2020年の9月までに、検索結果の表示をモバイルファーストに移行するようです。

Googleが9月までに検索のモバイルファースト化完了へ | TechCrunch Japan

世の中はモバイル、でもコンテンツはパソコン向け・・・どうしたものか。

使用しているWordPressのテーマ(yStandard)はレスポンシブで、記事の表示がPC用、SP用と異なることはないので心配はないとして、一番のネックが画像の表示速度ですね。

対策としてまずやったのがtinypng.comというブラウザ上で画像の容量を減らしてくれるサービスで、使用している画像のサイズを小さくしました。

全部の画像を軽量化するのはしんどかったですね。ですが、トータルで見てもおよそ50％の容量削減になりました。これは大きいですね。

次に、一部のgifを画像に差し替えました。とりわけ、サイトのファーストビューに関する部分、ページの冒頭にgifを表示させていたものを画像に変更しました。

動画編集の紹介という内容から画像では説明しきれないような部分でgifを利用していましたが、gifの容量が大体1MBから2MBなのに対し、画像は大きくても100KB程度。

これでモバイルで見たときでもファーストビューの表示が速くなっているはず。

他には、Lazy Loaderといった画像の遅延読み込みプラグインを利用したり、gifよりもmp4の方が軽いと気づいてからは、動画を利用するようにしています。

・tinypngで画像容量削減
・gifをより軽い画像や動画に変更
・Lazy Loaderといった画像遅延読み込みのプラグインの導入

主に以上のことを実行しました。

モバイル対策といっても、サイトの表示速度が速くなるのはPC閲覧でも同じようにいいことなので、やっておくに越したことはないと思います。

ただ、モバイル寄りの対策をするあまりにコンテンツ自体を薄めてしまわないように気を付けてもいます。

文字ばっかりの説明じゃ読む気もなくなりますよね。

ニュースサイトのように記事を読んで完結するコンテンツならいいのですが、FLAPPERはむしろ記事を読んだ後、実際に手を動かして試してもらって初めて役に立ったと言えるんじゃないかなと思います。

対策はコンテンツを毀損しない範囲でやるのがベストですね。