様々な制約により、ReactやVue、SvelteのようなナウいJS系フレームワーク（or ライブラリ）の導入が難しい場面があります。しかし、そういった状況であっても、サーバーサイドだけではなく、フロントエンドでのパフォーマンス改善を求められることもまたあります。奇縁により、私はそういった仕事が多く、知見が溜まってきたので皆さんにシェアしたいと思います。
ルール1：自前のCSSは書かない、読み込ませない
BEMやFLOCSSのようなルールでなるべくCSSファイルを簡素化させたとしても、「CSSを書かない」より軽くなることはありません。
じゃあスタイリングはどうしたらいい？
- 高速CDNで配布されているCSSフレームワークを使いましょう。ただし、React前提だよねみたいなCSSフレームワークが多いのでそのあたりのリサーチは入念に。自分はBootstrapを使っています。イケてるとは思わないですが、汎用性も高く、また読み込みパフォーマンスも及第点なので選んでいる感じです。
- それでも足りない場合はstyleタグを用いましょう。CSS in JSの展開後のイメージで、Linkさせずにページ内でスタイリングを完結させるのです。
- また、ページ内スタイリングに際しても、CSSの基本原則（後読みなど）は当然ハックしておきましょう。BEM等のように、ネストしないで単一のクラス目での修飾にするのが基本です。
ルール2：jQueryは絶対使わない
CSSファイル同様jQueryのJSファイルもレンダリングブロックを盛大にかましてきてフロントエンドパフォーマンスを悪化させます。使わずにどうにかしてください。
じゃあアニメーション系とかどうしたらいい？
- BootstrapのようにスタイリングとJSが一体化しているライブラリを使うのも手です。
- それ以上にCSSでどうにかするのが一番良いです。簡単なアコーディオンやモーダルウィンドウ、バーガーメニュー、スライドインアニメーションなどは頑張ればCSSだけで作れます。「アコーディオン CSSのみ」などでググると作例が出てくるのでそこからパクりましょう。
- 自前でアニメーションJS書いても良いですが、その場合もファイル化せずにページ内に記述しましょう。
- 上記では効かないような派手にアニメーションさせたいときは…CDNで軽量のものを配布しているライブラリをなるべく用いましょう。
ルール3：画像は枠内サイズの軽量化gifをまず読み込ませて、Lazyload系jsライブラリで置き換える
React環境であれば良い感じの画像パフォーマンス改善ライブラリが山程ありますが、私達が相対している環境では使用できるものは限定されています。そんなときに私のおすすめはvanilla-lazyload。この手のライブラリは、ブラウザでLazyloadが標準装備になって枯れた技術になったと思いきや今でも開発が行われており、かつ軽量なのでおすすめです。
下記では、ダミーのgifを可能な限り軽量化しておき、かつ寸法を読み込み後のサイズにしておくことでCumulative Layout Shift (CLS)も防いでいます。
<!-- JSライブラリの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script>
<!-- 画像本体 -->
<img data-src="/assets/some_image.webp" src="/assets/dummy/100_100.gif" loading="lazy" alt="some_alt" class="lazy">
<!-- JSの駆動部分 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
use_native: true
});
});
</script>
<!-- 読込中に表示するアニメーション -->
<style>
.lazy:not(.loaded) {
animation: fadeInOut 2s infinite;
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
}
}
</style>
画面サイズの明示的表示については現在ベストプラクティスを探っている途中ですので、また見つかったら加筆しておきます。