サイトの高速化

2019年4月21日 WEB

サイトのチューニングを頑張ったら、サイトの評価サイトで高評価をもらったよ。

GoogleInsightではPCとSPともに100点。あまり出ない点数なので嬉しい。

このサイトでは4G回線での接続スピードを2秒以下に収めた結果となってる。
サイト表示に3秒過ぎなければ離脱率に影響はないので問題なし。

海外のテストサイトでもこの評価なら安心。

Kusanagiでワードプレスを構築

WPの高速化はKusanagiが良いという噂を聞いたので、Kusanagiを簡単にセットアップできるConohaのVPSを契約して作ってみたよ。

月900円からの契約でKUSANAGIの簡単セットアップが利用可能。

コンパネのサーバーメニューにて1分ほど経つと利用可能になる。

KUSANAGI管理リンクからセットアップが行えるよ。この後の作業は割愛。サーバーのコマンドラインの作業も必要になるけど、DBのセットアップくらいしかやってない…
あとはPHPも最新でとっても速い。さくらサーバーでは何もかも自分でインストールだけど、これはサイト高速化モジュールがオールインワンみたいで本当に簡単だった。

ワードプレスの調整

サーバー側の調整が終わったら今度はワードプレスの設定へ移るよ。
KUSANAGIのセットアップが終わったらワードプレスも自動的にインストールされているので、すぐに調整に取り掛かれる。

コンパネにてドメインを設定しドメインへアクセスすると、ワードプレスのセットアップが始まる。
サーバーのコンソールからDBのセットアップを済ませば、あとはDBを設定するだけでワードプレスが使えるようになるよ。

また、WPの管理画面はKUSANAGI使用になっており、WP管理画面での実行スピードも秒数で表示されてる。

テーマをカスタマイズして高速化

ワードプレスの標準テーマでは不必要なコードが多すぎるので、どこかにシンプルなテーマが無いかと探したらピッタリなテーマが見つかりました。

これを調整しSEOにも最適なコードで調整してみたよ。

titleタグはコードの上位に置き、他のdescriptionはその次に配置。
keywordタグは効果がないので削除。
あとはOGの設定をしてSNSシェア対策。
CSSはできるだけクラスで指定するのが高速化のコツ。「*」では必ず指定せず、さらにリセットCSSも利用せず、独自のCSSを書くほうがシンプルに記述できるよ。

サイトのトップページで意識した箇所は、hタグと画像。
H1タグをサイトに一つ。各見出しにはH2で設定。
画像はimgタグで設置し、CSSではobject-fit:cover;を設定しているのでレイアウトに沿ってトリミングしてくれるよ。IEは…無視してます。

$ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
$spflg = false;
if(strpos($ua,'iphone') !== false || strpos($ua,'ipad') !== false || strpos($ua,'ipod') !== false || strpos($ua,'android') !== false){
$spflg= true;
}

//imgのsrcに
echo wp_get_attachment_image_src(get_post_thumbnail_id (), (($spflg)?'thumbnail':'medium'))[0];

また、上記のようなコードはスマホとデスクトップを分けて画像を出力させている。こういった端末の画面幅での画像切り分けも、高速化に必要。
検索エンジンはモバイルファーストなので、スマホの軽量化は意識したほうがよさそう。

SEO、高速化のためのプラグイン

テーマファイルが整えば次はプラグインを調整。
画像の軽量化が最も高速化に影響するので、これは最低でも有効にしたい。

「Compress JPEG & PNG images」これは画像軽量化のプラグイン。TinyPNGというウェブ上でも軽量化を行える機能と同等の軽量化を行うよ。
ただしこれは有料の契約をしないと、月ごとに圧縮回数が決まってしまうので、更新頻度の多いサイトは契約しておくのがいいかも。

Google XML Sitemaps」これは記事を投稿する度にサイトマップを更新するプラグイン。検索エンジンに反映しやすくなるよ。
他プラグインはお好みで。

Conohaコンパネからも高速化設定

サーバーやワードプレスの設定はこのくらい最低限しておけば速いけど、Conohaのコンパネでも高速化に役立ちそうな設定も追加でやってみた。

KUSANAGI管理からサイトの設定の欄にて、「SSL化」「fcache」「bcache」をONに変更。
SSL化になればHTTP2という通信プロトコルに代わってなんか速いみたい。

SearchConsoleの最適化

素早く検索エンジンにインデックスさせるためにGoogleSearchConsoleから調整するよ。

登録の仕方は割愛するけど、Googleアナリティクスでサイトを登録してからGoogleSearchConsoleを登録するとスマート。
最初は「URL検査」を最初に行い、サイトマップも念のために送信しておこう。
後日に検索パフォーマンスやカバレッジを見て、問題点を確認し修正していくのも良いよ。

KUSANAGI導入の体感メリット

以前はさくらのVPSでサイトを作ってたけど、KUSANAGIをインストールする敷居がかなり高そうだったので、ConohaのVPSで行いました。
体感して違いが分かったのは、画像の軽量化がかなり早くなって記事の更新負担が減ったという点と、サイトの高速表示が可能になったこと。
もちろんさくらのVPSでもチューニングはいくらでもできるけど、真っ黒いコマンドラインをまた弄る気力がないので、簡単にセットアップができるConohaのVPSで運用を変えてみたよ。
ただ、さくらは実家の近くにサーバーがあったので思い入れがあったから、関わりがなくなってしまったのはちょっと寂しい。