swiper-style-cssを非同期ロード【改善メモ】

Google Search Console の「ウェブに関する主な指標」（モバイル）でCLS に関する問題: 0.1 超 「改善が必要」という状況が突然が発生しました。11/13から現在も継続しています。

グループの CLS 改善が反映されない

「画像要素で width と height が明示的に指定されていない」と指摘されている一部のリンク画像についてはすべて対処して改善したのですが Search Console にはいまだに反映されません。

いつもながら、サーチコンソールのデータのはかなり遅れて反映されるので気にしないようにしているのですが「0.15 改善が必要」の表示は一向に変化なしです。

レンダリングを妨げるリソースの除外

PageSpeed Insights と DevTools で検証しましたが、気になったのが FCP LCP で「レンダリングを妨げるリソースの除外」に swiper-bundle.min.css が出現していることでした。上に書いた症状と同じ時期に出現していることから、これが影響しているのではないかと疑った次第です。

「ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。」

「重要なアセットをインラインで読み込むまたは重要度が低いリソースの読み込みを遅らせるために役立つ、さまざまな WordPress プラグインがあります。ただし、これらのプラグインの最適化処理によって、テーマやプラグインの機能が阻害されることがあります。その場合は、コードを変更する必要があります。」

子テーマの functin.php に次のコードを入れて swiper-bundle.min.css だけ非同期で読み込むようにしてみました。

//対象のCSSを非同期で読み込む場合に利用
function load_css_async_top($html, $handle, $href, $media) {
  if(is_single()) {
    //HTML改行前後の空白文字を削除 swiper-bundle.min.css
    $default_html = trim($html);
    //対象のHTMLだけ変更する
    switch ($handle) {
    case 'swiper-style':
	$html = <<<EOT
	<link rel="preload" id="{$handle}-css" href="$href" as="style">
	<link rel="stylesheet" id="{$handle}-css" href="$href" media="print" onload="this.media='all'">\n
	EOT;
        break;
    default:
        break;
    }
  }
  return $html;
}
add_filter( 'style_loader_tag', 'load_css_async_top', 10, 4 );

動作確認した結果、HTMLで次のように読み込まれるようになりました。

<link rel="preload" id="swiper-style-css" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css?ver=6.1.1" as="style">
<link rel="stylesheet" id="swiper-style-css" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css?ver=6.1.1" media="print" onload="this.media='all'">

PageSpeed Insights では「レンダリングを妨げるリソースの除外」は出なくなりました。

自サイトに出現した問題の改善メモ

2020年4月にブログサイトを立ち上げてから、今までに数々の問題が発生し、その都度場当たり的に対策を講じてきました。

今思えば、いつどのような対応を行ったか全然記録に残してこなかったのが悔やまれてなりません。

そこで今回から、対策を行った内容は必ずメモとして残しておくようにしようと思います。

あくまでも、メモですから自分用ですが、もしかしたら参考になる方がいるかもしれないのでブログに公開するようにします。

サイトの環境情報

ConoHa Wing で無料提供されている WEXALⓇ Page Speed Technology 設定中

メモのおわりに

以上、「swiper-style-cssを非同期ロード」対応した記録でした。
CSS を非同期ロードする場合には今後も使えるものです。CSS の handle はHTMLソースを見ればすぐにわかりますね。

過去記事のサンプルファイルをダウンロードできます

この記事で使用したサンプルの登録はありません。
過去の記事で使用したサンプルファイルをダウンロードできるようにページを設置していますので、こちら（このリンク先）からご利用ください