【The Thor】サイトスピードを改善するためにできること

サイトスピードを改善するに至った背景

身内にファンが多いブログです

かつて、私の当時の上司にもこんなことを言われた。

「にしかた.net、アクセスできなくなってるぞ」

そして先日、母親からこんなLINEがきた。

「にしかた.netが消えた」

泣いている絵文字とともに。

にしかた
身内にファンが多いブログだぜ
前に上司に指摘されたときはレンタルサーバーの更新を忘れており、今回母親に指摘されたのも同じくレンタルサーバーの期限切れでした。
元々別のサイトのレンタルサーバーをmixhostからConoha WINGに変更しており、管理するのが面倒だったので、にしかた.netもConoha WINGにしようと考えていました。
で、mixhostに解約申請をして、解約日が近くなったらConoha WINGと契約して。。。と考えていたのですが、すっかり解約日を忘れてしまってました。
しかもmixhostにログインしてもサイトのデータには全くアクセスできず。。。バックアップも取っていなかったので、顔が青ざめました。。。
mixhostにダメ元で、データ復旧してくれないかと頼んだら、1週間限定でサーバーを戻してくれました!!!
神対応レンタルサーバー事業者の手を切るなんて、なんて酷いことをしてしまったのかと後悔しました。
ということで、なんとかにしかた.netは復活できました。

時代はクラウドサーバーじゃないの!?

これはにしかた.netではなく、Conoha WINGで運用しているサイトでもなく、また別のサイトを立ち上げるためにGCP(Google Cloud Platform)を使うことを検討したことがありました。

WordPressはやっぱり何かと便利なので、WordpressをCompute Engineにデプロイ、MySQLをCloudSQLにデプロイ、までしました。

でも、めちゃくちゃサイトが重くなりました・・・w

まぁ、使っているマシンのスペックが低かったからなんだけれども・・・スペック上げると費用かかるし。。。
そんなにアクセス数が多くないサイトであればレンタルサーバーで十分だと思い、結局そのサイトもXserverで運用しています。
ちなみにCloudSQLにMySQLデプロイするのに5,000円くらいかかりました。すでにGCPはCloud Functionを結構使っているので、無料クレジットも使い果たしています。
にしかた
勉強料だと言い聞かせているぜ
さらにちなむと、なぜそのサイトはConoha WINGではなくXserverかというと、Conoha WINGはMySQLに外部からアクセスできないからです。
XserverはSSHが用意されているので、MySQLに外部からアクセスが可能です。
とにかく、そんなに規模が大きくない、けどデータベースに外部からアクセスしたい場合はXserverがオススメ

サイトスピードを改善する理由

世界最大規模のECサイト、Amazonは2007年にこんな発表をしました。「0.1秒遅れると売上が1%減少する」と。

にしかた.netは収益化が目的ではないので、売上は下がりません。しかし、このブログのファンの方の笑顔が減るのではないかと思いました。

にしかた
やかましいぜ
というのは冗談で、運営している他サイトはSEOも意識しているので、バチバチにサイトスピード対策しています。
しかし、にしかた.netは好き勝手書いているので、今までサイトスピードを意識していませんでした。
ということで、サーバー移管記念ということで、知ってるノウハウを活かしてどれくらいサイトスピードが改善できるかを検証してみるというものです。

サイトスピードを改善するアプローチ

今回はChrome(だけ?)の機能である「LightHouse」の「パフォーマンス」という指標を改善してみたいと思います。

以下、やることリストです。

  1. サーバー移管
  2. 画像圧縮
  3. サイトデザインを少し変更
  4. 遅延読み込みの実装
  5. CSSの削除

一つ一つ「パフォーマンス」がどれくらい上がったかを見ていきます。

また、にしかた.netはWordpressを使っており、テーマはかの有名な「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)は有名なテーマなので、同じテーマを使っている人には参考になるんじゃないかなと。

またLightHouseは、通信環境などによって測定値が変わるので、3回計測してその平均を算出します。

まず何も処置をしていないパフォーマンスがこちら。

何もしていない状態

スコアは63.3でした。うーん酷い状態・・・

また提案された改善ポイントはこんな感じでした。

改善ポイント

画像サイズ、遅延読み込み、CSSの削除などなどですね。

サーバーをConoha WINGに移管

先述の通り、サーバーをConoha WINGに移管しました。

移管直後のスコアがこちら。

Conoha WING 移管直後

はい、60.6でした。

にしかた
下がってんじゃねえか。
え、Conoha WINGって国内最速じゃないの?え?どういうこと?
え?
どういうこと?
Conoha WING
え?
どういうこと??

画像を圧縮する

気を取り直して、画像を圧縮していきます。

WordPressだと画像圧縮系のプラグインがいくつか用意されており、有名なものだと「Smush」「TinyPNG」とかです。

とりあえずSmushを使って一括圧縮をかけてみます。

その後のスコアがこちら。

Smush後のスコア

62.3でした。安定感は増したけど、劇的な改善はされませんでした。

調べてみると、Smushはあまり圧縮率が高くないらしいそうです。

他にも色々プラグインを見てみましたが、高い圧縮率が期待できるものがなかったので、仕方なく手動で圧縮していきます。

FTP経由で画像をダウンロードし、20個ごとにiLoveIMGで圧縮をかけていきます。。。

。。。

。。。

。。。

3時間かけて全画像の圧縮が完了しました。なのに全然改善されない。

要因を調べてみると、トップページのカルーセルスライダーの読み込みに時間がかかっていた。

問題のカルーセルスライダー

なぜか普通に検証モードで確認すると適切な画像サイズが読み込まれているのに、Lighthouseの結果だとフルサイズの画像が読み込まれている。

PHPを確認すると、どうやら普通サイズを呼び出した後に小さいサイズの画像を探しているっぽい?

とりあえずカルーセルスライダーが悪さしているなら、そのカルーセルスライダーを削除してしまおうと。

サイトデザインの変更

で、サイトデザインの変更をしてみました。

カルーセルスライダーではなく、ウィジェットを使って人気記事の表示にしました。

ついでにプロフィールも変更しました。時間があれば全体的なデザインも見直したいけど、いったん今回の目的はサイトスピードなのでLighthouseで計測。

サイトデザインの変更

64.3になりました。やっぱり記事のサムネイルがフルサイズで読み込まれていることになっている。。。

遅延読み込みの導入

もう奥の手ということで、遅延読み込み(Lazy load)を導入。

SmushにもLazyloadの機能はありますが、Autoptimizeというプラグインにも同じ機能があるのでそちらを利用します。

実装後がこちら。

Lazyloadの実装後

79.6になりました!!さすがLazy load。ありがとうLazy load。

でも未だに画像に関する警告は出続けています。。これは今度時間があるときにでも。。

使っていないCSSの削除

THE THORでは使っていないウェブフォントも読み込んでしまっているので、それを読み込ませないようにします。

代表的なのがNoto Sansです。

「THE THOR」→「inc」→「parts」→「wp_head.php」と進みます。

58行目あたりに以下のコードがあるはずです。

//Googleフォント用CSS
if ( get_option('fit_seoCss_noto')) {
    echo '<link class="css-async" rel href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900">'."\n";
}else{
    echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900">'."\n";
}

これをまるごとコメントアウトすればOKです。

分かりやすく以下のような感じにしました。

/////
/*Googleフォントを読み込まない
//Googleフォント用CSS
if ( get_option('fit_seoCss_noto')) {
    echo '<link class="css-async" rel href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900">'."\n";
}else{
    echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900">'."\n";
}
*/////

ついでに「dashicons.min.css」も消しちゃいます。こいつはWordpressの管理画面でしか使わないCSSなので、ログイン時以外は読み込まないようにします。

今度は子テーマの方の「THE THOR CHILD」→「functions.php」に進み、ログイン時以外読み込まないようなコードを追記します。

以下、例です。

add_action( 'wp_enqueue_scripts', 'dequeue_dashicons' );
function dequeue_dashicons(){
    if (!is_user_logged_in()){
        wp_deregister_style('dashicons');
    }
}

さあこれでサイトスピードを見てみましょう。

結果がこちら。

CSSの削除

スコアが89.0になりました!!!!

まだ画像のファイルサイズに課題はありつつも、部分的に緑マークにできてよかったです。

にしかた
やったぜ
ユーザー補助のところは今後修正するか要検討だな・・・

まとめ

Lazy load最強ってこと?

あとは、きちんと一つ一つの記事を丁寧に準備したほうが、あとあと3時間画像圧縮に時間をかけずに済みます。

これからも、にしかた.netをよろしくお願いいたします。