炭火Blog
HOME
ブログの運営

PageSpeed Insightsのスコアを下げずにウェブフォントを使う

※このページにはプロモーションが含まれています。

Table of Contents

久しぶりにGoogleフォントを覗いてみると、日本語フォントが増えていました。

その中に気に入ったフォントがあり、それを使ってブログのテーマを作りたいと考えました。

しかし日本語フォントは英語フォントに比べて桁違いに文字数が多いので、ブログの読み込みに時間がかかります。

実際にページを見るときには、それほど気にならないのですが、PageSpeed Insightで速度を測るとスコアが落ちます。

日本語フォントはサイズが大きい

英語フォントのRobotレギュラーは168 kB、日本語フォントのNoto Sans Japaneseレギュラーは4.5MB。

Robotレギュラー168 kB
Noto Sans Japaneseレギュラー4500kB

まさに桁違い。レギュラーだけの比較なのでボルドフォントを含めるとこの倍になります。

Amazon セールとイベント

冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭り

サブセット化とwoff2

そこでたくさんある漢字の中から、あまり使わないであろう漢字などを省いてフォントの容量を小さくする作業を行います。

この作業をサブセット化と呼びます。

サブセット化とwoff2フォントを作るためのツールは無料で使えるので、感謝して使用します。

サブセット化用ツールはサブセットフォントメーカー、woff2用ツールはWOFFコンバータになります。

フォントにはライセンスについてのテキストが付属しています。ライセンスの内容はフォントによって変わります。サブセット化は改変に当たるのでライセンスに違反しないかを確認してください。

ウェブフォントから削除した漢字をブログで使用しても、読む側の環境のフォントで表示されるので文章が読めなくなることはありません。

日本語フォントには漢字・ひらがな・カタカナ・英語・数字・記号が含まれています。

その中で頻繁に使わないであろうフォントを削除します。サブセットフォントメーカーで残したいフォントの一覧表を作成します。

削除する漢字の選び方

Noto Sans Japaneseには9000以上の漢字があります。これを2136字の常用漢字に絞ります。そこから地名にしか使わないような「阜」「畿」、炭火や生物を扱うブログでは使いそうにない「錮」「謄」、読めないので使えない「繭」のような漢字を削除します。

常用漢字から削除する漢字は約300文字になります。

漢字以外の削除するフォント

記号はフォントが違っていても違和感が無いので「」などの少数だけを残しています。全角英数は使わないので削除、キリル文字も同じく全削除します。

作成した一覧表を下に掲載します。

亜哀挨愛悪握圧扱宛嵐安案暗以衣位囲医依委威為胃尉異移偉椅意違維慰遺緯域育一逸引印因員院淫陰飲隠右宇羽雨唄鬱浦運雲永泳英映栄営詠影鋭衛易疫益液駅越円延沿炎宴援園煙猿遠鉛塩演縁汚王央応往押欧殴桜奥横岡屋億憶乙俺卸音恩温穏下化火加可仮何花佳価果河科架夏家荷華菓貨過嫁暇靴歌箇稼課我画芽賀雅介回灰会快戒改怪悔海界皆械絵開階塊解潰壊懐貝外害涯街蓋該概垣柿各角拡革格核殻郭覚較隔閣確獲穫学岳楽額顎掛潟括活割葛滑轄株鎌干刊甘汗缶完肝官冠巻看陥乾勘患貫寒喚堪換敢款間勧寛幹感漢慣管関歓監緩還館環簡観韓艦鑑丸含岸岩眼頑顔願企危机気岐希忌奇祈季紀軌既記起飢鬼帰基寄規亀喜幾揮期貴棄旗器輝機騎技宜偽義疑儀戯犠議菊吉喫詰却客脚逆虐九久及弓丘旧休吸求究泣急級宮救球給窮牛去巨居拒拠挙虚許距魚御漁凶共叫狂京享供協況峡挟狭恐胸脅強教郷境橋鏡競響驚仰業凝曲局極玉均近金菌勤琴筋禁緊銀区句苦駆具愚空偶遇隅串屈掘熊繰君訓軍郡群兄刑形系径茎係型契計恵啓掲渓経敬景軽傾携継慶稽憩警鶏芸迎隙劇撃激欠穴血決結潔月犬件見券肩建研県倹兼剣拳軒健険圏堅検嫌献遣権憲賢謙鍵顕験懸元幻玄言限原現減源厳己戸古呼固孤股虎故枯個庫湖雇誇鼓顧五互午呉後悟語誤護口工公孔功巧広甲交光向好江考行孝抗攻更効幸拘肯厚恒皇紅荒郊香候校耕航貢降高康控梗黄喉慌港硬絞項溝鉱構綱酵稿興衡鋼講購号合剛豪克告谷刻国黒酷獄骨駒込頃今困恨根婚混痕魂懇左佐沙査砂唆差鎖座才再災妻砕宰栽彩採済祭斎細菜最裁債催塞歳載際在材剤財罪崎作削昨索策酢錯咲冊札刷拶殺察撮擦雑皿三山参惨産散算酸賛残斬士子支止氏仕史司四市矢旨死糸至伺志私使刺始姉枝祉肢姿思指施師紙脂視紫詞歯試詩資飼誌示字寺次耳自似児事侍治持時慈辞磁餌鹿式識軸七叱失室疾執湿質実芝写社車舎者射捨斜煮遮謝邪蛇尺借釈爵若弱寂手主守朱取狩首殊珠酒腫種趣寿受呪授需樹収州舟秀周宗拾秋臭修袖終習週就衆集酬蹴襲十汁充住柔重従渋銃獣縦叔祝宿縮塾熟出述術俊春瞬旬巡盾純循順準潤処初所書暑署緒諸女如助序叙徐除小少召匠床尚招承昇松沼昭将消症祥称笑唱商渉章紹訟勝掌晶焼焦粧証象傷奨照詳彰障憧衝賞償鐘上丈冗条状乗城浄剰常情場畳蒸縄壌嬢譲色拭食植殖飾触織職辱尻心申伸臣芯身辛侵信津神唇娠振浸真針深進森診寝慎新審震親人刃仁尽迅陣尋腎須図水吹垂炊粋衰推酔遂睡穂随髄枢崇数据杉寸瀬是井世正生成西声制姓征性青斉政星牲省凄清盛晴勢聖誠精製誓静請整税夕石赤昔析席隻惜戚責跡積績籍切折拙接設雪摂節説舌絶千川仙占先宣専泉浅洗染栓旋船戦腺践銭潜線遷選繊鮮全前善然禅膳狙阻祖租素措粗組疎訴礎双壮早争走奏相荘草送倉捜挿巣掃曹窓創喪葬装僧想層総遭操燥騒造像増憎蔵贈臓即束足促則息捉速側測俗族属賊続卒率存村孫尊損他多汰打妥駄太対体耐待怠胎退帯泰堆袋逮替貸隊滞態大代台第題滝宅択沢卓拓託濯諾達脱奪棚誰丹旦担単炭胆探淡短嘆端綻誕鍛団男段断弾暖談壇地池知値恥致遅痴稚置竹畜蓄築秩茶着中仲虫沖宙忠抽注昼柱駐著貯丁庁兆町長挑帳張彫眺釣頂鳥朝貼超腸跳徴潮澄調聴懲直勅沈珍陳賃鎮追通痛塚漬坪爪鶴低呈廷弟定底抵邸亭貞帝訂庭停偵堤提程締諦泥的摘滴適敵哲鉄徹撤天典店点展添転田伝殿電吐妬徒途都渡塗賭土奴努度怒刀冬灯当投豆東到逃倒凍唐島桃討透党盗陶塔搭棟湯登答等筒統稲踏糖頭藤闘騰同洞胴動堂童道働銅導瞳特得督徳毒独読突届豚鈍丼那奈内梨謎鍋南軟難二匂肉日入乳尿任妊忍認寧熱年念粘燃悩納能脳農濃把波派破覇馬婆拝杯背肺俳配排敗廃輩売倍梅培媒買賠白伯拍泊迫剝博薄麦漠縛爆箱畑肌八鉢発髪伐抜罰反半犯伴判坂阪板版班般販飯搬範繁藩晩番盤比皮否批彼肥非卑飛疲秘被悲扉費碑避尾眉美備微鼻膝匹必泌筆姫百氷表票評漂標苗秒病描猫品浜貧頻敏瓶不夫父付布扶府怖附負赴浮婦符富普腐敷膚譜武部舞封風伏服副幅復福腹複覆払沸仏物粉紛雰噴奮分文聞平兵併並柄閉幣餅米壁璧癖別蔑片辺返変偏遍編弁便勉歩保捕補舗母募墓暮簿方包芳邦奉宝抱放法泡胞峰砲崩訪報豊飽褒縫亡乏忙坊妨忘防房肪冒望傍帽棒貿貌暴膨謀頰北木牧僕墨没堀本翻凡盆麻摩磨魔毎妹枚昧埋幕膜枕又末万満慢漫未味魅密脈妙民眠矛務無夢霧娘名命明迷盟銘鳴滅免面綿茂模毛妄猛網目黙門紋問夜野弥役約訳薬躍闇由油愉諭輸癒唯友有勇幽悠郵湧裕遊雄誘憂融優与予余誉預幼用羊妖洋要容揚揺葉陽溶腰様瘍踊養擁曜抑浴欲翌翼裸羅来雷頼絡落乱卵覧欄利里理裏履離陸立律略柳流留竜粒隆硫旅慮了両良料涼陵量僚領寮療瞭糧力緑林倫輪隣臨涙類令礼冷励戻例鈴零霊隷齢麗暦歴列劣烈裂恋連練呂炉路露老労郎朗浪廊漏籠六録論和話脇惑枠湾腕ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヲンヴヵヶ、。,.・:;?!「」+-=<>()abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 !#$%&()@;:,.<>?

Boldフォントを使わないという選択肢

ここまでの作業で4.5MBあったフォントが300kB程度まで小さくなります。最初ははBoldフォントも同じように作って使っていたのですが、フォントだけで600kBは少し大きく思います。

PageSpeed Insightではページの容量が1.6MBを超えると警告が出ます。画像が少ないと超えませんが画像が多いとギリギリの線です。

boldフォントを使わずにフォントの容量を下げる選択をしました。

余談ですがBoldフォントがなくてもフォントウェイトをBoldに指定すると、ブラウザの方でフォントを太くしてくれるようです。

PreloadによるCLS対策

容量を減らしたフォントを自分のブログのために借りているサーバーにアップロードし、普通に読み込ませ、PageSpeed Insightsで測定するとCLS(Cumulative Layout Shift)の値が悪化しています。

ページを読み込み始めた時にはシステムのフォントで表示し、スタイルシートが読み込まれるタイミングでウェブフォントに切り替わるために、再描写が行われレイアウトが動くためのようです。

調べてみるとPreloadすることで再描写が防がれてCLSの数値が良くなることが分かりました。

Noto-Sans-JP-Regular.woff2読み込ませる場合は<head></head>内に

<link rel="preload" href="フォントのパス/Noto-Sans-JP-Regular.woff2" as="font" type="font/woff2" crossorigin>

スタイルシートに

@font-face {
  font-display: optional;
  font-family: 'Noto-Sans-JP';
  font-style: normal;
  font-weight: 400;
  src: local(Noto-Sans-JP), url( フォントのパス/Noto-Sans-JP-Regular.woff2) format("woff2");
}

こうするとCLSの数値は0に戻りました。

使いたいフォントの不要文字を削除し、woff2に変換しPreloadを使って読み込ませることでPageSpeed Insightのスコアを下げること無くウェブフォントを使えるようになりました。

ただこの方法でも複数のフォントウェイトの使用ができません。もしかすると軽いフォントというのがあってそれなら2つのウェイトが使えるかも知れませんが、調べるのは大変です。

よりよい方法があるかも知れないので探してみたいと思います。

最後までお読みくださり、誠にありがとうございます。

WordPressオリジナルテーマ制作入門
amazon.co.jp
【Amazon.co.jp限定】1冊ですべて身につくWordPress入門講座(DL特典:【100ページ超の大特典!】フルサイト編集に“対応していない”テーマのカスタマイズ方法)
amazon.co.jp

週間アクセスランキング

このブログを書いている人

管理者 ほんだ

数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。