お問い合わせはコチラから

【2021年】Google fontsの非同期読み込み最適化【Cocoon】

サイト運営

Cocoonの高速化オプションでGoogle fontsを非同期読み込むとサイトの表示は速くなります。

しかし、サイトの表示がちらつきます。

Cocoonの高速化オプションのGoogle fontsの非同期読み込みの方法は以下の記事で紹介しているwebfonts.jsを使う方法と同じです。

サイト読み込み時のフォントのちらつきは、一回目だけならまだ許せるのですが、フォントをキャッシュしているはずなのに、他のページを見るたびにチラつくのが納得できませんでした。

速くなるのだったらこれも仕方ないのかなと思っていましたが、AutoptimizeのGoogle fonts読み込みオプションを見ていると、javascriptの非同期読み込みは非推奨に切り替わっており、最近の流行りではなくなったようです。

この記事では、最新のGoogle fontsの読み込み方法をご紹介したいと思います。この記事を読むことでCocoonなどのテーマでもGoogle fonts使用時にちらつきを抑えて表示させることができるようになります。

結論:Google fontsの非同期読み込みスクリプト

headタグの中で、以下のスクリプトを読み込むのが一番早いそうです。

<!--
  - 1. Preemptively warm up the fonts’ origin.
  -
  - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
  -    most modern browsers.
  -
  - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
  -    only after it’s arrived. Works in all browsers with JavaScript enabled.
  -
  - 4. In the unlikely event that a visitor has intentionally disabled
  -    JavaScript, fall back to the original method. The good news is that,
  -    although this is a render-blocking request, it can still make use of the
  -    preconnect which makes it marginally faster than the default.
  -->

<!-- [1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

CocoonでGoogle fontsの読み込みの変更方法

CocoonのGoogle fontsの読み込みを削除

『Cocoonのオプション』では『Google fontsを使用する』にチェックにします。

『Cocoonの高速化オプション』で『Google fontsの非同期読み込み』はオフにします。

さらに、以下のスクリプトでCocoonのgoogle fontsの読み込みだけ解除します。

<?php
function remove_parent_styles() {
    wp_dequeue_style( 'google-fonts-notosansjp' );
}
add_action( 'wp_enqueue_scripts', 'remove_parent_styles', 99999 );

headタグ内部のgoogle fontsの読み込み指定

Cocoonはgoogle fontsのfont-weigthをすべて読み込んでしまうので、使うものだけ400と700だけに絞ります。そうすることでgoogle fontsのダウンロード量が減りますので、表示速度が改善する好影響があります。

add_action('wp_head',function(){
?>
<!-- [1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
      media="print" onload="this.media='all'" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" />
</noscript>
<?php
});

複数のGoogle fontsを指定する方法

ひとつのGoogle fontだけなら上記のままで大丈夫なのだが、2つ以上のフォントを指定する時にどうしたらよいだろうか?

複数のgoogle fontsを読み込む場合は、&familiy=フォント名でつなげればよい。

// google fontsを2つ以上指定する場合、&family=フォント名で同じようにつなげる
add_action('wp_head',function(){
?>
<!-- [1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Kosugi+Maru:wght@400;700&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Kosugi+Maru:wght@400;700&display=swap"
      media="print" onload="this.media='all'" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Kosugi+Maru:wght@400;700&display=swap" />
</noscript>
<?php
});

まとめ

Cocoonは便利なのですが、最近アップデートの頻度も下がってきていてPSIで要改善項目が結構出ています。

本来であれば、Autoptimizeを使いたいのですが、CocoonとAutoptimizeは相性は悪く、インラインJSやインラインCSSがある影響で、キャッシュファイルが記事毎に出来てしまうなど、そのままでは導入しにくいテーマとなっています。

テーマが多機能でプラグインを使わないというのは素晴らしいのですが、プラグインとテーマで機能を分担した方がユーザーの自由度も高まります。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました