ホームページ制作のプロとして、「見苦しいホームページ」として
FOUCがあります。
FOUCって何か知らない人のために一言で説明すると、
「CSSの読み込みが遅くて、ホームページがCSSが読み込まれた後でガクッとなるアレ」
です。
これを手軽に修復できる方法があったので、そのやり方を共有します。
ただし、事前に言っておくと、今回紹介する方法は、SEOには不向きなので、あくまでFOUCの見た目に対応するための緊急策定度でご理解ください。
ガクッとならないホームページを読み込む方法
FOUCは、CSSの読み込みが遅い時に起こる現象ですが、同じような症状に画像の読み込みが遅くて、ページの縦サイズが、画像読み込み後にガクッと変わる場合もあります。
どれも、読み込みタイミングの（遅延による）違いが原因で起きることから、ページの表示を全てのコンテンツの読み込み後に行うようにすると、FOUC現象が起きないハズです。
（例外はあります）
ということで、HTMLのHEADタグ内に以下のコードを書き込むだけで、全てのコンテンツが読み込み完了するまで、ページを表示しないようにできます。
<style>
html body{
opacity:0.0;
pointer-events: none;
}
html[data-load="loaded"] body{
opacity:1.0;
transition:opacity 0.3s;
}
</style>
<script>
window.addEventListener("load", (()=>{
console.log("loaded")
document.querySelector("html").setAttribute("data-load" , "loaded")
}))
</script>
解説
全てのコンテンツが読み込まれたことを、window.onloadイベントで検知して、それまでは、bodyタグを、opacity:0; でセットすることで、読み込み判定を行なっているだけです。
簡単なお作法ですが、これをセットする/しないで、ページの読み込みの印象がガラッと変わるページもあります。
ただ、注意点として、そもそもページの読み込みに何秒（基準は3秒以上）もかかっているようなページでは、表示するまでが遅いと、ユーザーはサーバーが壊れたんじゃ無いかとか、
ホームページに異常があるんじゃないかと思って、離脱に繋がってしまうので、ページの読み込みは、3秒（できれば1秒）以内になるようにしましょう。
無駄に遅いフレームワークを使うことはあまりオススメできません。
いっそのこと、HTMLだけで表示したら、びっくりするぐらい早いホームページになります。
何かしらのシステムを使う必要がある場合は、FOUCに影響しない読み込みタイミングを調査して対応する必要があるので、この辺はプロの技術者にお任せするのがいいでしょう。
fixedによる不具合
上記コードを少し解消して、bodyタグの読み込みではなく、bodyタグの1階層下のエレメントを対象にしてみました。
これによって、読み込み時にLoadingなどのコンテンツ表示ができるようになります。
（Loadingはcssでセットすることでかなり簡易に軽量にできます）
でも、内部要素に position:fixed; として、スクロール固定要素をセットした場合、opacity:0;の挙動がおかしくなる事象があったので、
CSSもまだまだ万能では無いという事も頭に置いておきましょう。
SEOには不向きなワケ
冒頭にも書きましたが、今回のFOUC対応は、SEOではあまり役に立ちません。
そもそも、SEOは、FOUCによるレンダリング状態も影響しますが、多くの場合は、HTMLの読み込みソース自体で判断されるポイントの方がまだまだウェイトが高いため（厳密にはブラックボックスです）、
こうした小手先のワザは、改善対応したということにはならないようです。
ただ、今後はこうしたレンダリング重視でのSEO対策が有効になるかもしれないので、この辺は引き続き調査していく必要がありそうですね。
あとがき
いろいろな会社のホームページを作っている時に、「ページを読み込んだ時に、ガクッとする」とクライアントなどから言われた時に、
今回の魔法のおまじないコードを書くだけで、対応できるので、いざという時の緊急策として使ってみてください。
簡単なコードなので、独自にカスタマイズして、読み込みを退屈させない工夫をしてみるのも良いでしょう。
また、そもそもホームページの読み込みが遅いと言う場合は、その対応策などもいくつかあるので、興味がある人には、お問合せで連絡してくれれば、個別に伝授したいと思います。
0 件のコメント:
コメントを投稿