速度改善でとりあえずやったこと

あまりに読み込みが遅いのでまずはすぐにやれるところだけでもやってみようかと。

画像の遅延読み込み

プラグイン「Lazy Load by WP Rocket」で、画像を遅延読み込みさせてレンダリングブロックを軽減してみました。
設定のチェックは全部入れてます。

キャッシュの利用

プラグイン「WP Super Cache」で、静的 HTML ファイルを生成するようにしました。
うまくキャッシュがきいてると表示がだいぶ早くなります。
設定はこのあたりのチェックを変更したくらいです。

CSSの非同期読み込み

rel=”preload”を使って、レンダリングに不要なCSSを非同期読み込みにしました。githubにあるcssrelpreload.jsを利用してます。
cssrelpreload.jsのソースをコピーしてminify化してから、非同期読み込みにしたいCSSのlinkタグをいじってます。

<link rel="preload" href="hoge.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="hoge.css">
</noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* ここにコピーしたやついれる */
</script>

これやるとwebフォントとかの影響で若干がたつくんですが、読み込み終わるまで表示されないのとどっちがいいのか悩みどころ。

プラグインのCSSの遅延読み込み

レンダリングに不要なCSSの中で、プラグインによって挿入されているやつはfunctions.phpから遅延読み込みの設定しました。
Chrome DevToolsで、読み込んでるプラグインのCSSを探すと、idが指定されているのを確認できます。例えば遅延読み込みさせたいCSSのidが「hogehoge1-css」と「hogehoge2-css」であれば、

function my_dequeue_plugin_files(){
  wp_dequeue_style('hogehoge1');
  wp_dequeue_style('hogehoge2');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);

function my_enqueue_plugin_files(){
  wp_enqueue_style('hogehoge1');
  wp_enqueue_style('hogehoge2');
}
add_action('wp_footer', 'my_enqueue_plugin_files');

のようにfunctions.phpに追記します。
これで、headタグ内ではなく、bodyタグ最下部でpreload使って読み込む設定に変わります。
表示速度的には微々たるものな気もします。

結果

多少改善されましたが、まだかなり遅いですね。。
PC表示では、

90に届かないまでもまあまあな感じになりました。
が、SP表示では、

赤い。
もうちょいなんとかしないと見辛さが半端ないので、手軽に改善できる方法またちょっと調べてみます。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。