ワードプレスの速度改善をしたかった- GTmetrixとLightHouseで改善する -
ワードプレスで運営しているサイトのSEOが気になったので、久しぶりに色々みてみる。
データ収集
GTmetrixで調査
まずは、GTmetrixを使って現状がどんな感じなのかをみてみる。 https://gtmetrix.com/
うん、よろしくないな。
gradeが90以下のものは以下だから、とりあえずメモしておく。
PageSpeed
- Defer parsing of JavaScript
- Leverage browser caching
- Inline small CSS
YSlow
- Add Expires headers
- Make fewer HTTP requests
- Reduce DNS lookups
- Use cookie-free domains
LightHouseで調査
次はLightHouseを使って調べる。
うん、Performance最悪やな。とりあえず、ここをどうにかしていきたい。改善案が表示されるので、これを参考にしていく。
GTmetrixの指標を改善していく
Defer parsing of JavaScript
417.6KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
詳細を見ると、javascriptの読み込み遅らせれば、いいんじゃね？とか書いてある。そういうプラグインもありそうだけど、プラグイン入れたくないからfunctions.phpに遅延読み込みのためのコードを記述する。
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
追記：投稿の編集画面が見られなくなったので、上記の対応やめました。
Leverage browser caching
あー、そういえばキャッシュ系のプラグイン一回全部消しちゃったんだっけなあ・・・確かパーマリンク変更したくなかったから何もしていなかった気が・・・
プラグインで対応できそうだからプラグイン見てみる。
Wp Fastest Cacheを使おうと思ったんだけど、パーマリンク変更しないといけないから断念。とか思ったら他のプラグインもパーマリンクの変更しないといけんのね・・・
ということなので、.htaccessをいじってキャッシュ対応しようと思う。エックスサーバー を自分は使っているからサーバー情報を見てみると、これはApacheを使っているよう。
この記事を参考に設定した。
Inline small CSS
以下の記事を参考に新たにプラグインを入れて設定。
設定後のGTmetrix
上がった。
が、以下のLeverage browser cachingをどうすればいいのかよくわからん。
cdn関係とAutoptimizeプラグインのファイル。これ外部のやん、どうしようもないのか。。
YSlowまでみるのはしんどくなったので、とりあえずやらない。
LightHouseの指標を改善していく
Performanceが悪いから中身見ていくと、使っていないcss消してねーとかレンダリングブロックしてるもの除いてねーとか書いてあるけど、これ外部のやつやん。
これはなあ、どうしようもないのかなあ・・・
