PageSpeed Insights の結果
サーバーのチューニングが進むと、PageSpeed Insights の結果は、上がってくるのだが、モバイル・携帯電話の結果は、悲惨なもんだ。
一つは、携帯電話の設定する通信環境が低いこと、さらに、その機器のパフォーマンスの設定も低いことが挙げられる。
さらに、日本語というたくさんの文字があるために、PageSpeed Insights で高得点を出すのは至難の業となる。
目的
PageSpeed Insights のパフォーマンスの向上のために、軽量化したフォントをセルフホストする。
Webサイトの環境
Webサーバー : Nginx Fast-cgi cache
ワードプレス : Elementor Pro 使用
Fonts : Noto Sans Jp 400 800 のみ
ディスクトップPC : Mac OS
方法
Elementor などは、
Google Fonts をグーグルからCDNでダウンロードしてウエブページを表示させる。
とどうなるか？
たくさんのフォントデーターがダウンロードされるので、モバイルの結果は芳しくないものとなる。
直接、必要なフォントのデータだけを、WEBサーバーから配信させれば、通信量が減らせるということになる。
結果
ページのレンダリングをブロックしているリクエスト の転送サイズが
500KiB >>>> 80KiB
に減らすことができた。
そのうちの転送サイズの半分は
…css/notosansjp.css?ver=177…(example.com) 284.5 KiB
※ この場合、NotoSansJp フォント
ということである。
フォントをセルフホストするには
今回は、Web サイトでよく使われている Noto Sans Jp を使うことにした。
さらに、ウエブページのフォントの使用を Bold 800 : Regular :400 に限定している。
フォントファミリーには、たくさんの種類のフォントが含まれるが、ページに実際に使用するフォントの数は限られている。一部の大規模サイトでない限りは、不必要なフォントのためにページの表示速度が犠牲になっているのだ。
フォントをダウンロード
GUI 環境で 自分は Mac OS です。
フォント Noto Sans Jp は、Google フォントである。
グーグルフォントのサイトに行って、
https://fonts.google.com/noto/specimen/Noto+Sans+JP
[Get Font]
[Download All]
Noto_Sans_JP.zip がダウンロードされた。
ファイルを解凍
Mac OS では、ダウンロードすると自動解凍されるので、
Noto_Sans_JP フォルダ その中に static フォルダ その中に、
NotoSansJP-○〇〇.ttf
が含まれる。
今回実際に使用するフォントは、
NotoSansJP-Bold.ttf
NotoSansJP-Regular.ttf
である。
ttf から woft2 に変換
WOFF2（Web Open Font Format 2.0）は、Webページでカスタムフォントを表示するための高圧縮なファイル形式。従来のWOFFやTTFに比べ約25〜30%ファイルサイズが小さく、ページ読み込みを高速化します。モダンブラウザのほぼ全てで対応しているそうです。
アプリをインストール Mac OS
ターミナルを起動し、下記のコマンドをコピー＆ペースト
pip3 install fonttools brotli
フォントツールがインストールされる。
Python で書かれたアプリですが、Mac OSには標準でPythonがインストールされている。
フォントを woft2 に変換
ターミナルの操作になります。
ttfフォントのある階層ディレクトリまで移動します。
Mac OS はダウンロードフォルダーにダウンロードされるので、
cd /Users/ユーザー名/Downloads/Noto_Sans_JP/static/
不必要なフォントを削除できれば、通信量が減るのですが、一般的に使うであろう漢字第一水準まで含むようにした。
常用漢字のテキストファイルを準備する。
https://github.com/rime-aca/character_set/blob/master/%E5%B8%B8%E7%94%A8%E6%BC%A2%E5%AD%97%E8%A1%A8.txt
Github にあったので、そこから「常用漢字表.txt」をダウンロードした。
ダウンロードした「常用漢字表.txt」を GUI で移動し、無駄なトラブルを避けるために名前を
常用漢字表.txt >>> chars.txt
に変更した。
NotoSansJP-Regular
pyftsubset NotoSansJP-Regular.ttf\
--output-file=NotoSansJP-Rregular.woff2 \
--flavor=woff2 \
--text-file=chars.txt \
--unicodes=U+0020-007E,U+3040-309F,U+30A0-30FF \
--no-hinting
NotoSansJP-Bold
pyftsubset NotoSansJP-Bold.ttf\
--output-file=NotoSansJP-Bold.woff2 \
--flavor=woff2 \
--text-file=chars.txt \
--unicodes=U+0020-007E,U+3040-309F,U+30A0-30FF \
--no-hinting
U+0020-007E # 半角英数
U+3040-309F # ひらがな
U+30A0-30FF # カタカナ
+ 常用漢字（text-file）
ls -l-rw-rw-r–@ 1 staff 5468188 1月 7 10:48 NotoSansJP-Bold.ttf
-rw-r–r– 1 staff 349232 4月 27 19:06 NotoSansJP-Bold.woff2
-rw-rw-r–@ 1 staff 5472784 1月 7 10:48 NotoSansJP-Regular.ttf
-rw-r–r– 1 staff 342824 4月 27 19:04 NotoSansJP-Rregular.woff2
ファイルサイズが、5.4MB >>> 350KB に削減圧縮されました。
次にこのフォントをElementor に登録して使えるようにしましょう。
Elementor でフォントのセルフホスト設定
カスタムフォントに登録
WordPress の管理画面から、[Elementor] [エディター][カスタムエレメント][Fonts]に移動します。
[Add New Font]
Enter Font Family の欄に、今回作るフォントファミリーの名前を入力する。
「Noto Sans Jp 400 800」という名前にした。
[Add Static Font] をクリックして前の項で作成したフォントを追加する。
※ Variable Font は、書体のバリエーションを一つのフォントに納めたファイル。
Static Font を追加する画面になります。
今回のフォントファイルの形式は、Woff2になるので、 [WOFF2 File The…….. Upload] をクリックして、Mac OS で作成した、フォントを選択するか、ドラッグ&ドロップする。
NotoSansJP-Rregular.woff2
太さ >> 400
スタイル >> 普通
もう一つ同様に [Add Static Font ]で
NotoSansJP-Bold.woff2
を選択する。
太さ >> 800
スタイル >> 普通
に変更する。
目的の項目には、ファイルパスが表示されている ①②
良ければ、
Noto Sans Jp 400 700 （下の絵は、400 800になっているが間違い）という名称のフォントファミリーがこのElementorで公開することができる。
③ [ 公開 ]をクリック
Elementor にフォントが追加されました。
カスタムフォントの設定
WordPress の管理画面から、[Elementor] [エディター][設定][高度な設定]に移動します。
Google Fonts >>> 無効化
[パフォーマンス]タグに移動
Google フォントをローカルで読み込む. >>> 有効化
設定はこれで OK のはず。
実際のページに使われているフォント
実際にページに使われているフォントをチェックしてみてください。
キャッシュがあると、動作が不安定になる可能性があるので、注意が必要です。
