ウェブフォント読み込み中のテキストの表示の改善

wordpress
出典:https://pixabay.com/
この記事は約5分で読めます。
Sponsor Link
Sponsor Link

PageSpeed Insightsのフォント読み込み部分についての備忘録
本当はJavascript関係を改善しないとあまり意味はないのだが…
使用テーマがCocoonなのでそれように書いていますのでご了承ください

診断 – パフォーマンスに関する詳細

PageSpeed Insights
診断については個々人のサイト状況で変わるけどこのような感じ
今回はこの中のウェブフォント読み込み中のテキストの表示について
対策としては@font-faceで指定するという感じです

@font-face指定

親テーマは既に指定がされていますが、相対パスで書かれています
この状態だと診断部分に出てきて修正が必要ですよーと表示されていました
子テーマでウェブフォントの指定などで使っている場合も通常の書き方(ヘッダ内に記載等)の場合表示されていました
そこで親テーマはパスを絶対パスに子テーマで指定してるフォントは別ファイルにしました

Sponsor Link

親テーマのフォントファイル

特に追加などをしていない場合 cocoon-master/webfonts/FontAwesome/css内に
font-awesome.min.cssがあると思います

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');~font-weight:normal;font-style:normal;font-display:swap}

このような感じで相対パスになっているので、これを絶対パスに変更するだけです
パスはPageSpeed Insightsでチェックした状態でデベロッパーツールを開き
PageSpeed Insights
メインサイトは変更前の状態にならなくなったので、サブサイトのですがこうなるよってだけなので気にせずに

デベロッパーツール
確認したい部分をクリックしてtitleもしくはdata-url部分をコピーして上記ファイル部分を書き換え
これで親テーマFontawesome部分は完了

子テーマのファイル

今までは普通にヘッダ部分に記入していたフォント指定部分を別途fonts.cssを作りそこへ書き込んでいます
フォントファイル自体も自鯖へアップロードしてあります

@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:300;src:local('Noto Sans Japanese Light'),local(NotoSansJapanese-Light),url(https://haineons.com/~/fonts/noto-sans-jp-v23-latin-300.woff2) format("woff2");font-display:swap}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;src:local('Noto Sans Japanese Regular'),local(NotoSansJapanese-Regular),url(https://haineons.com/~/fonts/noto-sans-jp-v23-latin-regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:500;src:local('Noto Sans Japanese Medium'),local(NotoSansJapanese-Medium),url(https://haineons.com/~/fonts/noto-sans-jp-v23-latin-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:'M PLUS Rounded 1c';font-style:normal;font-weight:400;src:local('M PLUS Rounded 1c'),local(MPLUSRounded1c-Regular),url(https://haineons.com/~/fonts/m-plus-rounded-1c-v9-latin-regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:'M PLUS Rounded 1c';font-style:normal;font-weight:500;src:local('M PLUS Rounded 1c Medium'),local(MPLUSRounded1c-Medium),url(https://haineons.com/~/fonts/m-plus-rounded-1c-v9-latin-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:'Raleway';font-style:normal;font-weight:400;src:local(Raleway),local(Raleway-Regular),url(https://haineons.com/~/fonts/raleway-v13-latin-regular.woff2) format("woff2");font-display:swap}

minify化させてfonts.min.cssとした中身はこんな感じです

このファイルを読み込むためにheader-insert.php

<link rel="stylesheet" href="https://haineons.com/~/cocoon-child-master/fonts.min.css">

と追記しておきます、同じように別ファイルにする場合パスは自分の環境に合わせてくださいね

PageSpeed Insights
キャッシュ等を削除して再度チェックして画像のように自サイトのURLウェブフォントが
読み込み中の~部分に出てこなくなれば完了です

まとめ

この部分よりもJavascript部分をなんとかしないと表示速度の改善は難しいんだけど
手を付けやすい所からでもやっていかないとねー
@font-face指定しててもfont-display:swapを付けてても改善に出てくるし
どうすれば良いんだろう?と検索を掛けてヒットした記事を参考にさせていただきました
同じように自サイトURLのウェブフォントの読み込み改善をしたい人の参考になれば^^

[share]

Comments

タイトルとURLをコピーしました