まずは現状を確認
ここから、エラーに合わせて対策していきます。
レンダリングを妨げるリソースの除外
このクライアントはwordpressを使用したので、
下記コードをfunction.phpに挿入
1 2 3 4 5 6 7 8 |
if (!(is_admin() )) { function add_async_to_enqueue_script( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外 if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外 return "$url' async charset='UTF-8"; // async属性を付与 } add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 ); } |
これだけで20点くらい上がった!!
さらにCSSも調整。
こちらもプラグイン使わせてもらいます。。
プラグインの設定画面から
「CSS コードを最適化」にチェック。
カスタム速度の記録と計測
javascript内に
1 |
window.performance.mark('mark_fully_loaded'); |
を追記
ウェブフォント読み込み中のテキスト表示
WEBフォントを設定するcssに
1 |
font-display: swap |
を追記
まだまだですが、最初よりだいぶ改善しました。