Google Fontsの外部ファイルを少しでも速く表示させる方法 結城永人 - 2022年2月21日 (月) Google Fontsで日本語のWebフォント(Japanese)が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件(2022年2月時点)から二十件のみ掲載する。 Noto Sans Japanese(適用)Noto Serif Japanese(適用)Shizuru(適用)M PLUS Rounded 1c(適用)Zen Kaku Gothic Antique(適用)Sawarabi Mincho(適用)Kosugi Maru(適用)Kaisei Decol(適用)Shippori Mincho(適用)Delta Gothic One(適用)Reggae One(適用)Kiwi Maru(適用)Murecho(適用)Yusei Magic(適用)Yuji Syuku(適用)Hachi Maru Pop(適用)Potta One(適用)Hina Mincho(適用)Otomanopee One(適用)New Tegomin(適用) ※フォント名のリンクの右横の「適用」を押すと本稿のフォントを入れ換えて表示する(読み込みに多少とも時間がかかる)。 ※全ての内容が揃ってないフォントは部分的に元のフォントが使われる。 Google Fontsを外部ファイルで読み込むとすると日本語は漢字が多いためにどうしても時間がかかってしまう。 近年、Webフォントが読み込まれてサイトで使えるまで通常のフォントが出るようになったから以前みたいに文字のない画面で始まるのを避けられるにせよ、入れ替わるときのカク付きはあり得るし、なるべく速く読み込んでその他のパフォーマンスも下げることが少ないように使いたい。 目次先読みのrel-preloadを適用するGoogle Fontsの先読みのソースコードJavaScriptなしで普通に読み込むJavaScriptなしでも先読みするNoto Sans Japaneseを使ったサンプル 先読みのrel-preloadを適用する 表示速度に関してはHTMLのリソースヒントの一つで、外部ファイルを先読みで取得するrel-preloadを使うのが最速みたいだ。 そしてWebフォントの外部ファイルで問題になるパフォーマンスの低下も相当に低く抑えられる。 例えばGoogle Fontsを普通に使ってサイトのパフォーマンスを計測するPageSpeed Insightsにかけると幾つかの警告が出て来てしまう。 最も厳しいのが「レンダリングを妨げるリソースの除外」で、Webフォントの読み込みが後ろのコンテンツの表示を止めてしまってそれだけ表示速度を含めたパフォーマンスを低下させる。 しかしrel-preloadを適用すると外部ファイルの読み込みが非同期になるからブラウザはWebフォントが使えるまでその場で待たずに後ろのコンテンツを直ちに扱うことができる。 レンダリングを妨げるリソースの除外|PageSpeed Insights|Google Developers PageSpeed Insightsの「レンダリングを妨げるリソースの除外」の警告は出なくなる。 Google Fontsの先読みのソースコード <link rel="preload" href="Webフォントの外部ファイルのURL" as="style" onload="this.removeAttribute('onload');this.removeAttribute('as');this.rel='stylesheet';"> どんなWebフォントでも帯文字の部分だけ変更して使うことができる。 linkタグのas属性の値はWebフォントの外部ファイルの先読みには「font」を使わなくてはならない。しかしGoogle Fontsで提供されるWebフォントのソースコードの外部ファイルのURLはその先の実際に使われるWebフォントのタイプの振り分け用になっている。なのでas属性の値は「style」を入力することになる。 先読みのソースコードはサイトの適切な場所ならばどこに置いても構わないけれどもなるべく上の方に置いた方がそれだけ速く展開できる。 head内の先頭に近いところがパフォーマンスを保つには最適な場所になる。 ソースコードの内容としてWebフォントの外部ファイルを読み込んだらデザインのCSSとして読み込むという一連の流れがあり、それはJavaScriptで行われているので、もしもブラウザがJavaScriptを使用しない設定担っていると止まってしまう。 JavaScriptなしで通常のフォントを使う場合は上記のソースコードだけで他に何もする必要はない。 BloggerなどのXMLのマークアップが必要なサイトはそのままではエラーになるからソースコードを修正しなくてはならない。 JavaScriptなしで普通に読み込む <noscript> Webフォントの元のソースコード </noscript> 使用したいWebフォントの元のソースコード、外部ファイルのURLを指定するlinkタグをJavaScriptなしで表示するnoscriptタグで囲って追加しておく。 これは「レンダリングを妨げるリソースの除外」の警告の対象になるので、後のコンテンツの表示を止めないためにはbody内の下の方に置くべきだけど、するとWebフォントの表示速度自体は最も遅くなるからバランスを取るならばhead内の下の方に上げても良いかも知れない。 JavaScriptなしでも先読みする 先読みのlinkタグ <link rel="preload" href="Webフォントの外部ファイルのURL" as="style"> Webフォントのlinkタグ Webフォントの元のソースコード パフォーマンスを低下させないためにはWebフォントの元のソースコードを全てのコンテンツの終わりに置かなくてはならない。つまりbodyの終了タグ(</body>)に近いところに記載する。 するとWebフォントの表示は後回しになるので、優先したければもっと上のhead内の下などもバランスを取り易い。 先読みのrel-preloadのlinkタグは全てのコンテンツ、メタ情報も含めれば全てのマークアップの始まりに置くのが最も効果的だ。headの開始タグ(<head>)に近いところに記載するべきだと思う。 先読みのソースコードはWebフォントの元のソースコードよりも前に置かないと効果的ではない。後に置いたら意味はないし、前でも遠く離すほどに先読みを終えて後の元のソースコードに辿り着いたときに速やかに開始できる。 これはJavaScriptを使ったソースコードと比べると場合によってパフォーマンスが低いかも知れない。Webフォントの読み込みが完了した時点で、即座に次のデザインの読み込みに移るかどうかは全てのサイトで同じとはかぎらないためだ。先読みと元の二つのソースコードを離して効果的に記載すればするほどに上手く行き難くなってしまいもする。ブラウザは上の作業が終わっても下の作業にまだ辿り着かず、二つの流れに開きが出て来て無駄を残す可能性がある。 Noto Sans Japaneseを使ったサンプル Noto Sans Japanese|Google Fonts|Google 実際にWebフォントの外部ファイルを先読みに変更するときはどうなるかをGoogle FontsのNoto Sans Japaneseを例として確認してみる。 元のソースコード <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> 現在、三つのlinkタグが使われる。最初の二つはHTMLのリソースヒントのrel-preconnect(多めの事前接続)で表示速度を少し改善するためにあり、最後の一つがWebフォントの幾つかのタイプを振り分ける外部ファイルになる。 Google Fontsはその先にWebフォントの外部ファイルがあるので、直接、Webフォントの外部ファイルを読み込むわけではない(だからrel-preconnectのlinkタグが二つもあるんだろう)。 先読みのソースコード <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" as="style" onload="this.removeAttribute('onload');this.removeAttribute('as');this.rel='stylesheet';"> 三つのlinkタグの最初のものは最後のもののドメイン(https://fonts.googleapis.com)の事前接続だからそれが先読みになると吸収されて必要なくなる。 だから二番目のWebフォントの事前接続のものを残して最後のWebフォントの本体というか、そうしたデザインのCSSのためのものに先読みを適用する。 置き場所はどちらもサイトのソースコードの先頭付近に置くことが望ましい。 JavaScriptなしの場合に対応すれは所定のnoscriptタグを追加したり、Webフォントのソースコードを先読みと本体に分割して記載したりできる。 Google Fontsの外部ファイルの先読みのソースコードを紹介したけれどもその他のWebフォントの外部ファイルでも提供されるソースコードの内容が違うにせよ、linkタグのrel-preloadで外部ファイルを先読みすれば表示速度とパフォーマンスを大きく落とさないように使うことができる。 参考サイトGoogle PageSpeed - Eliminate Render-Blocking Resources Above the Fold caused from Google Fonts コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
キム・テヒの反日活動を日本人としてどこまで許せるか かつて韓国ドラマの IRIS -アイリス- を観て何て綺麗で可愛くて良いんだと一目で度肝を抜かれた俳優に キム・テヒ がいた。 映画『アイリス -THE LAST-』予告編 by TAEWON ENTERTAINMENT from シネマトゥデイ 日本で放映されたのが2...
コメント