クライアントのWEBサイトをとにかく高速化

まずは現状を確認

ここから、エラーに合わせて対策していきます。

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

このクライアントはwordpressを使用したので、
下記コードをfunction.phpに挿入

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内に

window.performance.mark('mark_fully_loaded');

を追記

ウェブフォント読み込み中のテキスト表示

WEBフォントを設定するcssに

font-display: swap

を追記

まだまだですが、最初よりだいぶ改善しました。

役に立った 1

役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月設置)

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。