今まで数々WEBサイトを作成してきました。
そんな中で発生したのがタイトルのページをスクロールすると一瞬真っ白になる問題です。試行錯誤の上、解決できたので試したことと原因と思われることをまとめます。
目次
真っ白現象の発生
原因解明のためには、まずは現象の再現が必要です。
今回の画面が真っ白で何も表示されない現象は、スマホで勢いよく画面をスワイプしたときとスクロールの方向を逆にしたときに発生しました。
ローディングが完全に終わっている場合でも発生しました。なので、まずはJavaScriptのリサイズやスクロールの処理が原因と考えていました。
原因と解決策
まずは今回の原因だったことと解決策を紹介してから、試したことをまとめます。
原因はタイトルの通りGoogle Fontsだと思われます。当サイトではNoto Sans JPを使用していました。
サーバーにフォントをアップロードして、自分のサーバーからフォントのインポートすることで解決しました。
フォントの初回ロードで発生してるのではないので、非同期読み込みなどの施策は意味がありませんでした。
試したこと
それではGoogle Fontsが原因だと気づくまでに試したことをまとめます。このような問題が発生したときの考え方の参考になると嬉しいです。
ローディングが終わっているのにも関わらず発生する現象だったため、レンダリング関係が原因ではないかと絞って以下のことを試しました。
JavaScriptが原因なのではないか
前述した通り、勢いよくスクロールしたときとスクロールを折り返したときに発生していたので、最初はJavaScriptが原因と考えていました。
スマホではスクロールを折り返すときにアドレスバーが伸縮するので、リサイズのイベントリスナーが原因ではないかとも考えていました。
一旦、スクロールやリサイズの処理を全て止めて試してみました。
画像の容量が大きいのではないか
画像はレンダリングにリソースを割く原因になるとよく聞くので原因なのではないかと考えました。
画像を一時的に削除して検証しました。
CSSが原因なのでないか
CSSの書き方が悪いことが原因で、思わぬパフォーマンスの低下を招いているのではないかと考えました。
ファイルを分割し、使用していないCSSプロパティを削除する、calcなどの処理を代替プロパティに変更するといった、スタイルの最適化を試みました。
また、CSSのアニメーションが原因である可能性があるので、アニメーションなども全て停止させました。
フォントが原因なんじゃないかと思った理由
レンダリングを障害してる可能性があるものは文章しかなくなリました。
試しにbodyのfont-familyの指定をinheritにしてみたところ、白くなる現象が発生しなくなりました。ここで初めてフォントが原因であることが判明しました。
スマホでサイトを閲覧したときに発生したので、スマホとPCでパフォーマンスの違いがあることが原因だと考えていました。PC開発時はBraveやChromeを利用しているので、試しにSafariでサイトを表示してみたところ、PCでも真っ白現象が発生していました。
つまり、Google Fontsを利用しておりSafariでサイトを閲覧しているときに発生していることが確認できました。
解決方法の模索
さて発生する条件がわかったので、解決方法を考えます。
Google FontsでNoto Sans JPを利用しているWEBサイトは多いと考え、他サイトで同様の現象が発生していないかを調べました。
結果、同じWEBフォントを利用しているのにも関わらず、発生しているサイトと発生していないサイトがありました。
この現象はスクリプト系を停止し、ページを文字のみにしても発生しているので、真の意味の原因は解明できていないと言えるかもしれません。
Google Fontsはフォントをダウンロードできるので、自分のサーバーからフォントを読み込むように変更し、問題が解決しました。
まとめ
この記事ではWEBフォントを利用していると、Safariで発生するレンダリングの問題をまとめました。
サイトごとに発生している場合とそうでない場合があるので、条件は確立できていないのですが同じ問題で悩んでいる同業の皆様に届くことを願っています。
