さくらのレンタルサーバーで使えるようになった、モリサワのWebフォントを先日設定してみたのですが。どうも表示が遅くなってしまいまして。見たところ、最初の読み込みスタートからページのレンダリングが始まるまでが割と長い。真っ白な状態が続くのでこれは良くないなと。
Chromeのデベロッパーコンソールともにらめっこしてみたんですが、一番遅いのがドメインの読み込みになっていてちょっと手が出しにくい。結局Webフォントを使うようになってから遅くなっていたので、手っ取り早くフォントを変更してみることにしました。
で、前職で勝手知ったる“Noto Sans”でも使うかー、と調べたところ、日本語対応版もいつの間にかGoogle Fontsのサーバーから直接使えるようになってました。以前の日本語対応版はサブセット化して軽量化したりと、手間を掛けて読み込み速度を改善しなければいけなかったのが、お手軽になったものです。
簡単な手順だけ書くと、HTMLのhead内に以下の記述を追加。
<link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />
style.cssのbodyのfont-familyの先頭に“Noto Sans Japanese”を追加。
body { font-family: “Noto Sans Japanese”; }
これだけでひとまずサクッと完了です。
体感の表示速度は改善されたようなので、今回の作業は一旦終了とします。お疲れ様でしたー。
