Bloggerブログで使ってないのに出力されるWebフォントのソースコードを消す方法

Bloggerブログの公式テーマは最初から設定されているWebフォントがたとえ他のフォントを新たに表示するべく変更してもソースコードに出力されてしまう分かった。

サイトの容量を増やして表示速度／ページのダウンロード時間を必要以上に遅らせると懸念されるから消しておかなくては勿体ない。

些細な日常はContempoを使っているけれども調べると最初から設定されてないWebフォントまで出力されていたんだ。

デザインのパターンが、四種類、あって他の分まで入っているせいではないか。元々はRobotoなのにDamianやPlayfair Displayと使われているはずのない見たことも聞いたこともないWebフォントがソースコードに記載されていると驚いた。

Contempoの基本的なテンプレートが四種類のデザインで使い分けられるように提供されていてテンプレート自体がそれぞれのデザインに合ってないから他の分の無駄が避けられないみたいだ。

不要なWebフォントを消してみるとブラウザの動きが明らかに変わった。Webフォントは外部サイトのファイルを大きめに読み込むけれどもかりに使ってなくてもソースコードに記載されていれば表示速度を相当に下げる。新しくブログを開くとブラウザは一気に進んで終わりに後回しのJavaScriptでちょっと引っかかるみたいな感じで、以前よりも速いし、閲覧する気持ちは軽い。

ブラウザはWebフォントを真っ先に読み込まないと何も表示できないわけなので、サイトのソースコードに記載されているかぎりは始まりから引っかかって止まるか、遅れるのは致し方はない。

Bloggerブログで不要なWebフォントがソースコードに出力される理由はウェブの編集のテーマのカスタマイズでのクリアにある

WebフォントのソースコードはブログのHTMLの<!-- Constants -->の部分にVariableタグで指定されている。

VariableタグはBlogger専用で、CSSの属性値の変数を作り出している。ウェブの編集のカスタマイズからフォントの種類やサイズや色などの好きに選んだものをCSSに自動的に記載するために必要なんだ。

フォントの種類にかぎってはそれ自体を事前に用意するために<!-- Constants -->に幾つか載っている。

RobotoフォントのNormal 15pxの場合

<Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true" value="15px Roboto, sans-serif"/>

Webフォントはブラウザに大きく影響するし、使うかぎりはCSSの最初に置いて一番に読み込ませると良いけれどもBloggerブログの公式テーマもそのようになっているので、長大なソースコードの中でも上の方で比較的に見付け易い。

ブログの高速化に全て消せば大丈夫だと思う。しかし駄目だったんだ。Bloggerのウェブの編集のHTML編集の保存、またはバックアップ／復元のテンプレートのXMLファイルのアップロードがエラーで受け付けない。

使ってないWebフォントのソースコードを消してなぜエラーが出るのかが悩まされてしまった。

BloggerブログのVariableタグはCSSの冒頭に並んでいてWebフォントの次に<!-- Variable definitions -->で適用されるデザインがGroupタグでブログ名や記事などに幾つも細かく分けられている。そこに消したWebフォントが設定されていればエラーになるわけだけれども使ってないからデザインに設定されてないのにエラーが出るのは他に理由があって探すとカスタマイズのクリアでWebフォントが設定されていると気付いた。

ページとテキストのフォント設定の場合

<Group description="Page Text">
 <Variable name="body.text.font" description="Font"
   type="font"
   default="$(robotoNormal15)" value="normal normal 15px Roboto, sans-serif"/>
（中略）
</Group>

Groupタグの「default」はブログのデザインに関係しない。ブログのデザインは「value」で決まっている。後者がカスタマイズで入力したCSSの属性値で、前者はテンプレートの初期値として使われる。

カスタマイズの上級者向けの諸々の項目には変更した後から元に戻せるように「詳細な変更をクリア」というリンクが付いているけれども押すとそれぞれが「default」の入力値に書き換えられるんだ。

消したいWebフォントが設定されているとクリアで使うのに使えないソースコードだとエラーになってしまうので、カスタマイズのクリアを止めるしかない。

試しに「default」の「$」（ダラー）という変数を意味する記号を削除してBloggerのコンピューターがカスタマイズのクリアについて計算しなくなるように仕向けてみると該当のWebフォントのソースコードを消しても大丈夫だった。

テンプレートのフォントを全く操作してない場合には「value」の中身に変数の「$」の要素が記載されているので、実際に使用するフォントサイズとフォント名に書き換えておかないとエラーになる。

Groupタグのフォント設定で「default」を止めるとカスタマイズでクリアが機能しなくなるのは要注意にせよ、不要なWebフォントのソースコードを消してブログを高速化するためには欠かせない。

Contempoテーマで試していてしかし直ぐには上手く行かなくてなぜエラーなのかを探すとGroupタグでのフォント設定に部分的に違うものが含まれていたためだった。

<Group description="Tabs text" selector="div.widget.PageList">
 <Variable name="tabs.font" description="Font"
   type="font"
   family="$(robotoNormal15.family)"
   size="$(robotoNormal15.size)"
   default="700 normal $(size) $(family)"  value="700 normal 700 normal $(size) $(family)"/>
（中略）
</Group>

タブのテキストでヘッダーの下のページリンクのフォントにデザインとしてWebフォントが設定されていた。

消すわけには行かないので、Bloggerのコンピューターがタブのテキストの「family」と「size」の属性値に不要なWebフォントのソースコードから計算しなくて良いように手動で実際に必要なデザインのフォント名とフォントサイズを記載しておかなくてはならない。

不要なWebフォントのソースコードを消す方法の応用について

1. WebフォントのVariableタグの削除
2. GroupタグのWebフォントのdefaultの$の削除
• Groupタグのフォント設定の入力値の記載

BloggerのWebフォントのソースコードは必要なものだけを残して他を削除してもブログをそれだけ高速化できる。

例えばContempoでRobotoがメインのタイプにはDamianとPlayfair Displayは使わないから消しても構わなかった。ブログにメインのWebフォントのソースコードを残すならばGroupタグには支障がないから簡単なんだ。不要なWebフォントのVariableタグを削除するだけで済んでしまうし、エラーは出ない。

Bloggerの公式テーマのメインのWebフォントは普通よりも細かく表示するためにソースコードが個別に追加されていると思う。

Robotoならば斜体や太さの違う何種類ものRobotoが入っている。基本的にパソコン向けで、スマホではフォント自体を細かく指定しても反映しないのが殆どだ。一つだけに纏めるのもブログの高速化には繋がるはずだ。

その場合にはGroupタグのフォント設定の「default」の入力値のフォント名も該当のWebフォントの「description」に合わせて書き換えておくべきだ。

テンプレートによっては「type」や「size」もGroupタグのフォント設定で書き換えの対象になるかも知れない。

不要なWebフォントを消したらブログが高速化できるし、Bloggerに搭載されてないWebフォントを外部サイトのGoogle fontsなどからCSSに追加しても表示速度への影響は抑えられるから使い易くなる。

関連ページ

• Imaginary theme｜Bloggerの日本語テーマ／テンプレートの提供