PageSpeed Insights で、ウェブフォント読み込み中のテキストの表示が求められます。

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

この対処として、fontawesomeや、bootstrap 等 の font-face に font-display: swap; を手で追加していたのですが、PostCSS の plugin で自動できないのかと思って、実現可能な plugin について調べていました。

調べた結果、dkrnl/postcss-font-display: PostCSS plugin to automatically add font-display css rule という plugin を見つけたので、インストール、設定を行いました。

実施した結果を記載します。

インストール、設定

  • インストール 

    npm i -D postcss-font-display

  • 設定
    gulpfile.js に以下のようにタスクを追加しました。

// Run uncss
gulp.task('add-swap-font-awesome', function () {
    return gulp.src('vendor/font-awesome/css/font-awesome.optimized.css')
        // postcss-font-display の設定、display: 'swap' で font-display の設定を変更、replace :false で設定の上書きをしない。
        .pipe(postcss([ require('postcss-font-display')({ display: 'swap', replace: false }) ]))
        // 同一名称でファイルを上書きする
        .pipe(rename('font-awesome.optimized.css'))
        .pipe(gulp.dest('vendor/font-awesome/css'));
});

  • package.json のscripts の編集
    "add-swap-font-awesome": "gulp add-swap-font-awesome" を追加します。 

      "scripts": {
    "add-swap-font-awesome": "gulp add-swap-font-awesome"
  },

  • タスクの実行 

    npm run add-swap-font-awesome

> clean-blog@3.3.7 add-swap-font-awesome ~/startbootstrap-clean-blog-3.3.7
> gulp add-swap-font-awesome

[20:46:42] Using gulpfile ~/startbootstrap-clean-blog-3.3.7/gulpfile.js
[20:46:42] Starting 'add-swap-font-awesome'...
[20:46:42] Finished 'add-swap-font-awesome' after 58 ms

ファイルの比較

  • タスク実行前 の CSS 

     @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  • タスク実行後の CSS 

     @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

font-display: swap; が追加されました。

参考

以下、参考にした記事になります。

以上です。

コメント

カテゴリー

最近の投稿