PageSpeed Insights で、
フォント表示の
CSS 機能を 使用して、 ウェブフォントの 読み込み中に ユーザーが テキストを 見られるように してください。
この対処とfont-display: swap;
を
調べた
実施した
インストール、 設定
インストール
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;
が
参考
以下、
以上です。
コメント