「アイコンフォントの死」とSVGへの移行とBase64でのファビコン表示
※このページにはプロモーションが含まれています。
ブログの自作テーマを作り終えてPageSpeed Insightsの結果を見ながら修正を行ったのですが、その時には方法がわからずに放置していた箇所がありました。
それはアイコンフォントのCLS(Cumulative Layout Shift)の問題です。CLSとは要素の読み込みタイミングがずれることで再描写のような減少が起きて、人の目から見てレイアウトが動くように見えてしまうことです。問題というほどのものではなくて、数値では1箇所のアイコンフォントにつき0.001〜0.003の数値なのでそのままにしていました。
PageSpeed Insightsでの点数を良いものにするためには、いかに高速に安定してファーストビューを表示させるかにかかっています。CSSやJavaScriptの読み込み方法に気をつける必要もありますが、ファーストビュー読み込みを早くして、読者が操作できるまでの時間を短くする必要があります。
何度か試しても消すことができなかったアイコンフォントのCLSを解消しようと思います。
アイコンフォントのCLS対策
結論から申し上げますとアイコンフォントにCLS対策は見つかりませんでした。その上、アイコンフォントをSVGに置き換えてもCLSの指摘が消えない箇所がありました。ただしCLSの数値は改善されており、0.000です。CLSの警告は残り数値は0.000ということは、四捨五入でもされているのかと思われます。
ここからは実際に行った試行錯誤の話になります。
画像のCLS対策は横幅と高さを数値で指定すれば良いので、アイコンフォントも同じだろうと考えて、まずはじめに、アイコンフォントが含まれる親要素に高さと横幅を指定したところ、CLSの変化はありませんでした。
英語のサイトも含めて調べたところ「アイコンフォントの死」という言葉と共に、アイコンフォントを使うのを諦めてSVGに移行すべきという英語のサイトを見つけました。
もしかするとアイコンフォントのCLS対策はあるのかもしれません。しかし、方法が見つからない上に代替方法があるので、試そうと考えました。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りSVGを使う方法
今まで、IcoMoonの便利なアイコンフォントに頼りきりでSVGは使わずにいたので、SVGは画像なのでimgタグで読み込むものと思っていました。しかし、SVGはベクターデータでXMLに準基しているので、直接HTMLとCSSに書き込めることを知りました。
SVGの軽量化
Inkscapeを使って作成したSVGをWebページに使う方法を考えます。
上の「炭」の字はInkscapeとフリーフォントを使って作成したものですが、保存した状態だと下記の様に不要な部分が多くあります。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="200"
height="200"
viewBox="0 0 52.916666 52.916666"
version="1.1"
id="svg1"
inkscape:export-filename="sumi.webp"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
d="m 12.192187,11.739703 c 0,0.072 0.012,0.168 0.06,0.228 "
id="text1"
style="white-space:pre;fill:#aa0000"
transform="matrix(4.0224942,0,0,4.0094347,-41.704922,-32.00922)"
aria-label="炭" />
</g>
</svg>そこで、「SVG 圧縮」「SVG 軽量化」などで見つけられるサイトで自作したSVG画像を軽量化すると、
<svg
width="200"
height="200"
fill="#aa0000"
viewBox="0 0 52.917 52.917"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.192 11.74c0 .072.012.168.06.228.168.192 2.94.252 3.612.252.864 "
transform="matrix(4.0225 0 0 4.00943 -41.705 -32.01)"/>
</svg>描写に不必要な記述が削除され、ファイルの容量が削減されます。（SVGを軽量化すると改行も削除されますが、上の例は比較できるように改行しています。）
アイコンフォントの代替
HTMLでSVGを表示させる場合はSVGタグをそのままで使えますが、疑似要素に使いたいときにCSSファイルに記述する場合は少し気をつける点がありました。
下の例はH2タグの前に表示する場合ですが
h2:before {
display: block;
content: url('data:image/svg+xml;utf-8,<svg fill="%23aa0000" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg"><path d="M12.192 11.74c0 .072.012.168.06.228.168.192 2.94.252 3.612.252.864 " transform="matrix(4.0225 0 0 4.00943 -41.705 -32.01)"/></svg>');
width: 25px;
height: 25px;
}
注意する箇所は下の4つの点です。
- 定形文を使う
- displayの設定
- シングルとダブルのコーテション
- 「#」を「%23」に変更
content:url以下の記述はSVGをデータとして表示するための定型文です。次にdisplayの設定も必要になるようです。
content:url(’の「’」とSVGデータの「fill=”%23aa0000”」「”」と同じにならないように、シングルとダブルのコーテーションを使い分けます。
最後に、SVGのタグの中に色指定をする場合は、「#」を「%23」に置き換えます。
ファビコンをSVGで表示させるためのBase64
SVGがデータとして扱えるならもう一つ放置していたページの描写遅延の要因を取り除くことができるのではないかと考えました。
Gtmetrixというサイトでページの読み込みを調べると、ファビコンだけが同時にダウンロードされていません。ファビコンを表示するためのLinkタグでは非同期の読み込みができないのかもしれませんが、解決する方法が見つかりません。
大部分のデバイスではSVGがファビコンとして使えるようになっているので、SVGをデータとして使えばHTTPリクエストが無くなり、ページの読み込み速度が速くなるのではと考えました。
<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;base64,・・・・・>上のコードはSVGをbase64に変換してファビコンを表示させるものです。
base64に変換するためには「base64 エンコード」で検索すればSVGファイルやPNGファイルをエンコードできるサイトが見つけられと思います。
実際にブラウザで確認したところファビコンは表示されているようです。header.phpは更にごちゃごちゃになりましたが、HTTPリクエストは1つ減らすことができました。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。