この個人ブログはWordPressでやってるんですけど、「ブログの表示速度を改善する方法」をいくつか試したところ、意外と簡単に早くなったんでここにメモがわりとして書いておこうと思いました。
このブログはそもそも「アクセス数をめちゃくちゃ集めるぞ！」とか特にそういう意識はなくて、初心者の自分用メモや雑記を中心に書いてるので、ブログの表示スピードとかは特に気にしておりません。
ブログの背景自体も画像をぶち込んでいたりするので、重いのは予測できていますし特に対策もしていない状態のまま運営してました。
注意
ここで書いているのは自分がやってみてスコアが上がったというだけで、ブログ表示スピードを早くする方法に詳しいわけではないです。
他に影響する部分がある可能性もあるかもしれないので、もしこれを見て参考にするのであれば、自己責任でお願いしますね。
あくまで初心者の自分が見様見真似でやったことでしかないので。。
あ、あとWordPressでのやり方のお話です！
ブログの表示スピードを初心者でも改善できた方法(WordPress)
ブログの表示スピードスコア(最大100点)
下のサイトで計測しています。
一般的に良いとされているスコアは90点以上と言われてます。
計測したこのブログのスピードのスコアは下記の通りでした。
■モバイル（28点）
■パソコン（85点）
見ての通りPCこそまだ平均的な数値ですが、モバイルの表示に関してはクソがつくほど悪い。
「PageSpeed Insights」では、スコアが悪い原因なども指摘してくれるので、その辺りを改善することでだいぶスコアは良くなるようです。
ただその原因がなにかわかっても、自分はいまいち未熟なのでよくわかりません。
とりあえずですが、自分がわかったものの範囲で改善策を見つけてやってみました。
レンダリングを妨げるリソースの除外
「レンダリングを妨げるリソースの除外 」をするとどうやら改善されるというお話。
ただ、自分はよくわからないので、初心者でもやりやすいコピペで解決できそうなものを探して下記にたどり着きました。
WordPressの「functions.php」を編集する方法です。
if ( !(is_admin() ) ) {
/*CSSの先読み非同期処理*/
function my_style_loader_tag_function($tag){
$match = preg_match("/base\.css|除外したいファイル名を正規表現で記述/", $tag);
if (!$match) {
$tag = preg_replace( '/stylesheet/' , 'preload', $tag );
$tag = preg_replace( '/ \/\>/' , ' as="style" onload="this.onload=null;this.rel=\'stylesheet\'" />', $tag );
}
return $tag;
}
add_filter('style_loader_tag', 'my_style_loader_tag_function');
/************************************************************************************/
/*header内JS非同期読み込みasync/defer*/
function replace_scripttag ( $tag ) {
if ( !preg_match( '/\b(defer|async)\b/', $tag ) ) {
return str_replace( "type='text/javascript'", 'defer', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'replace_scripttag' );
}※フォントの違いなどでうまく反映されない事があるのでご注意。
上のコードをテーマの中にある「functions.php」の一番最後に記述しました。
4行目にある「除外したいファイル名を正規表現で記述」の部分もいまいち分かっていないのでそのまま記述してます。
とりあえずここで行ったのは「CSSの先読み処理を非同期した」ということと、「header内JS非同期読み込み」っていうのをしたことによって、読み込みを遅延させた形なようですね。
なんとなくは理解した気がします。
とりあえずここまでで下のような数値になりました。
■モバイル表示
思ったより結構上がっている。
プラグイン「a3 Lazy Load」 を使う
あんまりプラグインを詰め込む派じゃないんだが、物は試しにと「a3 Lazy Load」というプラグインをインストールして使ってみた。
調べてみると特に難しいことをする必要はなく、プラグインを有効化した後「Setting」に行き、上のように「Image Load Threshold」の数値を400にするだけというもの。
すると
61点まで上がった。笑
これがどういう役割でっていうのは詳しいところまではわからないけれども、画像を遅延読込するような役割っぽいのかな？
なんかもっと上の段階でやってたような気が。
ブログの表示スピードのスコアが大幅アップ
パソコン表示のスコアはほとんど数値が変わらなかったんですけど、モバイル表示のスコアは28→61と33点もアップしました。
まぁそれでもまだまだ平均的な数値なんで良いというわけじゃないんですけどね。
それでも初心者でもなんとか改善に至ることができました。
しかし特に悩むことなく簡単なことしかしていないけど結構変わるんですね。
この表示スピードの改善をやってたらなんかもっともっとしたくなってきちゃったんで、一旦この辺りで終了しておきます。
今一度行っておきますが、もしこれを参考にされる場合はあらかじめバックアップなどしておいてやりましょう。
これによるデザインのぶっ壊れなどその他一切責任は終えませんのでよろしくおねがいします。