PageSpeed Insightsのフォント読み込み部分についての備忘録
本当はJavascript関係を改善しないとあまり意味はないのだが…
使用テーマがCocoonなのでそれように書いていますのでご了承ください
診断 - パフォーマンスに関する詳細
診断については個々人のサイト状況で変わるけどこのような感じ
今回はこの中のウェブフォント読み込み中のテキストの表示について
対策としては@font-faceで指定するという感じです
@font-face指定
親テーマは既に指定がされていますが、相対パスで書かれています
この状態だと診断部分に出てきて修正が必要ですよーと表示されていました
子テーマでウェブフォントの指定などで使っている場合も通常の書き方(ヘッダ内に記載等)の場合表示されていました
そこで親テーマはパスを絶対パスに子テーマで指定してるフォントは別ファイルにしました
親テーマのフォントファイル
特に追加などをしていない場合 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でチェックした状態でデベロッパーツールを開き
メインサイトは変更前の状態にならなくなったので、サブサイトのですがこうなるよってだけなので気にせずに
確認したい部分をクリックして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">
と追記しておきます、同じように別ファイルにする場合パスは自分の環境に合わせてくださいね
キャッシュ等を削除して再度チェックして画像のように自サイトのURLウェブフォントが
読み込み中の~部分に出てこなくなれば完了です
まとめ
この部分よりもJavascript部分をなんとかしないと表示速度の改善は難しいんだけど
手を付けやすい所からでもやっていかないとねー
@font-face指定しててもfont-display:swapを付けてても改善に出てくるし
どうすれば良いんだろう?と検索を掛けてヒットした記事を参考にさせていただきました
同じように自サイトURLのウェブフォントの読み込み改善をしたい人の参考になれば^^
[share]