旧ブログからのインポートです！
これまでは読み込み待ちをページ全体が見えないようにしてフェードインすることで解決してましたが、 今回の改修で主に問題となっている画像読み込みのみフェードイン式にして、 それ以外は読み込みを最適化してみました。
具体的にやったこと
具体的にはフォントの読込でこれまでカスタムフォントを使用していましたが、そのカスタムフォント自体を今は使う必要がないことに今回気づき、WebフォントとLuloのみに絞ることにしました。 そこでLuloの読込をどうするかというところですが、LuloをWebフォントに最適なwoff2形式に変換した上でpreloadを使うことにしました。 その甲斐あってメニューのフォントが安定するようになり、見栄えする感じになりました✨
上の二つだけでちらつきが見られなくなったので、フェードインでごまかす必要がなくなりました！
それと以前までは音楽ファイルがページに入った瞬間に読み込まれることになっていたので、トラフィック増加の原因にもなっていました。 これでは良くないと感じて音楽はsrcではなくdata-srcに入れることで、あらかじめロードではなく再生ボタンを押したタイミングに読み込まれるようにしました。
これで一気に軽くなったと思います！！
画像がどうしてもフェードインせざるを得なくなったのは、object-fit: cover の問題があるからです。 読み込み待ちの時はキャッシュが表示されますが、その間はobject-fitが利かないみたいなのでちらつきがどうしても発生してしまうのです。 キャッシュがないローカルな環境ではちらつきがなく、サーバーを介してだとちらつきが起こる現象があったのです。 こればかりは色々仕様変えないと解決できない感じなのです。 具体的にはobject-fitを使わず表現できるかとか…
これはとりあえず後回しにします🐏
・追記
object-fit: cover を使う項目だけフェードする形にしてみました！
・追記2
background-size: cover なら読み込み中の画像がいびつにならないことがわかったので、 トップページとギャラリーは全部background-imageを使うことにしました！
