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

投稿日 2019年1月24日
更新日 2019年1月25日
著者 mako110
カテゴリー WEBのこと

まずは現状を確認

developers.google.com

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

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

このクライアントは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 );
}

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も調整。
こちらもプラグイン使わせてもらいます。。

Autoptimize

Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.

ja.wordpress.org

プラグインの設定画面から
「CSS コードを最適化」にチェック。

カスタム速度の記録と計測

javascript内に

window.performance.mark('mark_fully_loaded');

1	window.performance.mark('mark_fully_loaded');

を追記

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

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

font-display: swap

1	font-display: swap

を追記

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

役に立った ♡ 1

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

この記事を書いた人

mako110

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

記事一覧

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

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

カスタム速度の記録と計測

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

この記事を書いた人

mako110

wpxサーバーでAll-in-One WP Migrationのエクスポートしよ…

「not a png file」のエラーメッセージで画像がPhotoshopで開…

画像SEOをやらないのはもったいない。

Shopifyのテンプレート「liquid」で、商品販売期間を設定するために表示…

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

カスタム速度の記録と計測

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

人気記事（過去1週間）もご覧ください

この記事を書いた人

mako110