JavaScriptの高速化

画像の次にウェブサイトの反応を遅らせるのが、JavaScriptです。一般的なサイトの1ページ当たり、420KBを占めると言われており（モバイルなら370KB）、転送時は圧縮されます。しかしそのファイルを復元、パースした上で実行するとなると、高性能マシンを除いて対応できなくなることがあります。その一方、使用頻度、機会はますます上がっているのが実情で、サイトの運営においても、JavaScriptの高速化は避けて通れない対策法なのです。

JavaScriptの最適化方法としては、「Code Splitting」「Preload」「CSS/JSの調査」等が有効とされています。過去の成功事例としてはユニクロのそれが有名です。ユニクロはパフォーマンスバジェットの管理も徹底し、Time to Interactive、直帰率を縮減し、滞在時間とPVを増幅しました。

画像とJavaScriptに次いでパフォーマンスを下げる要因とされるのが、フォントです。よく知られている現象に「Flash of Invisible Text」があるのですが、これはブラウザがウェブフォントを読み込めず、画面に表示させる処理が追い付かないことで生じます。Flash of Invisible Textはユーザーの不評を買う現象の最たるものですから、出来る限りFlash of Unstyled Textを使用するよう、心掛けます。Flash of Unstyled Textなら、ブラウザがウェブフォントの読み込みに手間取っている時間に代替フォント（OSに装備されたフォント）を表示してくれるため、ユーザーが閲覧する分には何の問題も生じません。ブラウザがフォントの読み込み処理を完了すると、表示対象がシステムフォントに戻される仕組みです。Flash of Unstyled Textは誰でも簡単に実装することができ、「font-display: swap;」と指示するだけでフォントが入れ替わります。

格安SEOのTOPページへ戻る