金融局ぶりブロガーのTAKUです。
Affinger5は有料テーマとしては高速かつ高機能なことが知られているのですが、いろいろカスタマイズしていくと低速化してしまうのです。
僕もいろいろとデザインをいじってたら呪われたようにブログが低速化しました。
有名なチェックツールであるPage Speed Insightを使って計測したら、デスクトップのスコアが70台、モバイルのスコアが20台にまで落ちていた…
流石にまずいのでAffinger5を採用するブログ高速化を目指していろいろと試作を施しました。
最終的にはデスクトップ、モバイル共に90台にまでスコアを伸ばすことに成功！
今回はその戦いの記録をお伝えしよう。
目次
ブログの機能をいろいろ削ぎ落とす
まずはブログにいろいろ実装しすぎてそれが負荷となっていたので思い切っていろいろ削ぎ落とすことに。
- ヘッダーのスライドショーを廃止
- サイドバーのTwitterプラグインを廃止
- その他サイドバーのウィジェットを削除
これはめちゃくちゃ効果があった。
デザインが味気なくなってしまうという欠点はあるものの、スコアが大幅に改善！
使用するプラグインを厳選
プラグインはなるべく使わない方が良い。
Affinger5はいろいろ機能が組み込まれているのでなるべくそれを使うようにすべき。
最終的に高速化のプラグイン以外で残ったものは
- Table of Contents Plus
- WP User Avator
たったこの2つだけ！
厳密に言えばこの2つも排除できるんだけど、設定が簡単なので残してます。
サムネイル画像サイズを変更
まず、サムネにフルサイズの画像を使っていたので
Affinger5 管理＞デザイン＞サムネイル画像設定からメディア設定にするに変更。
フルサイズの画像使うと重くなるからこの設定は有効。
画像をWebP化
WebPってなんやねんと思ったが、次世代の画像フォーマットらしい。
これをやると画像のサイズが圧縮されて読み込みが早くなる。
やり方は簡単でプラグインのEWWW Image Optimizerをインストールして設定するだけ。
設定はWebPタブから画像の通り。
そしてプラグイン設定画面の上部から一括最適化でWebP化できます。
JS、CSS、HTMLの最適化
Page Speed Insightがレンダリングをブロックしているソースを除外してくださいと示している場合、この設定を行う必要がある。
やり方はプラグインで解決できるのでものすごく簡単。
Autoptimizeをインストールして設定するだけ！
自分の設定ではCSSのインライン化と遅延以外にチェックを入れています。
Conoha Wingのサーバーを使っている場合
僕はConoha Wingのサーバーを使っているのですが、コンテンツキャッシュをONにしていたのでAutoptimizeを有効化するとデザインが崩れていました。
Conoha Wingのサイト管理＞応用設定からコンテンツキャッシュをON（HTML/CSS/JS以外静的コンテンツのみ）に設定し直すとこの症状は改善します。
Autoptimizeの利用を一瞬諦めかけましたが、なんとか原因を特定することができました。
Conoha Wingを使っている場合は注意してください！
Gzipの設定
Gzipはデータを圧縮するプログラム！らしいです。
サーバーから送るデータを軽量化して応答時間を短くする的なやつだそうです。
通常は.htaccessファイルにコードを書き込むらしいのですが、なるべく手動でいじるのは避けたいのでプラグインを導入。
WP Fastest Cacheを有効化し、設定画面からGzipにチェックマークを入れれば終了。
ものすごい簡単。
使わないCSSとJSの読み込みを停止
冒頭で書いた通り、ヘッダーのスライドショーを使わなくなったのでそのCSSとJSを読み込まないように設定します。
方法は外観＞テーマエディター＞Affinger5 Child（子テーマ）＞Function.phpに次のコードを書き込むだけ。
CSSの読み込みを停止
// スライダーのCSSを読み込まない設定function deregister_styles_slick() {wp_deregister_style( 'slick' );wp_register_style( 'slick', '' );
wp_deregister_style( 'slick-theme' );wp_register_style( 'slick-theme', '' );}add_action( 'wp_print_styles', 'deregister_styles_slick' );
JSの読み込みを停止
// スライダーのJavaScriptを読み込まない設定function deregister_script_slick() {wp_deregister_script( 'slick' );wp_register_script( 'slick', '' );}add_action( 'wp_print_scripts', 'deregister_script_slick' );
これに併せてGoogle Fontの読み込みも停止させておきます。
Google Fontの読み込みを停止
// Google Fontsを読み込まない設定function deregister_styles_google_fonts() {
wp_deregister_style( 'fonts-googleapis-roundedmplus1c' );wp_register_style( 'fonts-googleapis-roundedmplus1c', '' );
wp_deregister_style( 'fonts-googleapis-notosansjp' );wp_register_style( 'fonts-googleapis-notosansjp', '' );
wp_deregister_style( 'fonts-googleapis-lato700' );wp_register_style( 'fonts-googleapis-lato700', '' );
wp_deregister_style( 'fonts-googleapis-montserrat' );wp_register_style( 'fonts-googleapis-montserrat', '' );}add_action( 'wp_print_styles', 'deregister_styles_google_fonts' );
Affinger5の表示速度優先設定
Affinger5には表示速度優先設定なる機能が実装されている。
Affinger5管理＞SEO＞表示速度優先設定から有効化するだけ！
一部機能が利用できなくなるので自分のブログデザインと相談する必要があるが、高速化には効果があることは間違い無い。
高速化を達成して
これら全てを実行できればPage Speed Insightのスコアも高くなっているはずだ。
そして何よりAffinger5の表示速度も向上し、モバイルサイトのユーザービリティも増しているだろう。
サイトの表示速度はSEOに関係してくるという話なので常に健全なスピードを保っていることをおすすめする。
ということで高速化への戦いは終わった。
後はコンテンツを蓄えていくだけだ！