SEO対策

【JIN高速化】JINはもう遅くない。スコア90をめざした作業

JIN高速化

ワードプレステーマ「JIN」の高速化のためにしたコトをまとめました。

Googleは2018年7月、スピードアップデート(Speed Update)を導入し、Googleのモバイル検索の評価基準にサイトの表示速度を盛り込みました。WEBページの表示速度は年々重要性を増しています。

カズト
カズト
スマホでの表示に不具合がないよう調整した結果、モバイル80~点、PC95~点をキープすることができました。

他に入れているプラグインとの相性もあるので、不具合がある場合は適宜停止して調整しましょう。

JINの高速化のためにしたこと

カズト
カズト
まず前提に、nomalogはGoogleCloudPlatform上にbitnamiのコンテナを使ってサイト構築しています。

サイト構築にあたっては以下の記事を参考にしました。

Cloudflareでスピード向上を設定しているので、少しゲタを履いた環境になっているかもしれませんが、この記事で紹介する高速化施策は他のサーバー環境でも同様に使えるものですのでご安心ください。

カズト
カズト
エックスサーバーやロリポップを使っている場合、各種サーバーの高速化設定がありますので、それらを設定することをおすすめします。
実際にやった施策
  1. 最新Verにアップデート
  2. 画像を圧縮してからアップロード
  3. FontAwesomeをオフにする
  4. WEBフォントを使用しない
  5. Autoptimizeプラグインの導入
  6. WP-Optimizeの導入
  7. BJ Lazy Loadの導入
  8. 無駄なプラグインを削除する
GTMスピードテスト
GTMスピードテスト

画像の圧縮以外は面倒なことはしていません。
それでは具体的な作業を解説していきます。

最新Verにアップデート

重要度
カズト
カズト
「ワードプレステーマが最新バージョンにアップデートされていない」方はけっこういます。今一度最新版にアップデートされているか確認してみましょう。

JINの最新バージョンへのアップデートは[ダッシュボード] > [更新]からできます。

[テーマの更新]のボタンをクリックすると、JINが最新バージョンにアップデートされます。ここでプラグインやワードプレスもアップデートできるので、最新のものにしておくことをおすすめします。

公式マニュアルのアップデート情報ページにも詳しく書いてあります。

画像を圧縮してからアップロード

重要度

nomalogを立ち上げてから徹底するようにしたのは、画像の圧縮です。

これまで運営していたサイトでは「EWWW Image Optimizer」や「Compress JPEG & PNG images」などの画像圧縮プラグインを使っていました。

プラグインに頼るのは簡単ですが、絶対に自分で圧縮してからアップロードしたほうがいいです。

オンラインイメージ最適化ツール

圧縮できるツールはたくさんあります。私はOptimizilla(オンラインイメージ最適化ツール)を使っています。

画像にもよりますが、60~80%画像を軽くしてくれます。圧縮後に極端に劣化することもなく、ブログに貼り付けるには十分の画質です。

ファイルをドラッグするだけで使える

FontAwesomeをオフにする

重要度

FontAwesomeはアイコンを表示できるWEBフォントで、私のもう1つの運営サイト「仮想通貨でノマドワーカー」でもヘビーに使っています。

誰がみてもぱっと見でアイコンの意味が分かるFontAwesomeは便利なのですが、外部からの読み込みを要するので表示速度に悪影響があるのが欠点。

ところがJINには、先日のアップデートで「JINオリジナルアイコン」が搭載されました。

FontAwesomeを設定でオフにして、独自アイコンフォントだけを使うことでサイトの表示速度がスピードアップします。

[外観] > [カスタマイズ] > [その他の設定] > [fontawesomeを読み込まない]にチェックを入れて[公開]

WEBフォントを使用しない

重要度
フォント一覧
選べるフォント一覧
  1. デフォルト
    (端末の標準フォント)
  2. 角ゴシックフォント
    (Noto Sans)
  3. 角丸ゴシックフォント
    (Rounded M+ 1c)
  4. Open Sans
  5. 明朝体

JINにはデフォルトのフォントのほかに、Noto Sans/Rounded + 1cというWEBフォントを選ぶことができます。

(Open Sansと明朝体はJIN専用プラグイン「CARAT」で追加できるフォントです。)

Noto sans

これらのWEBフォントはサイトを可愛く彩るのに便利ですが、nomalogではサイト高速化のためにWEBフォントを使わないことにしました。

カズト
カズト
WEBフォントは表示させるためにフォントを読み込みにいくので、表示速度に影響します。

Autoptimizeプラグインの導入

重要度

高速化の定番プラグイン「Autoptimize」を導入しました。Autoptimizeは、「JavaScript・HTML・CSS」を圧縮してくれるプラグインです。

WEBページの要素であるこれらのデータは、増えれば増えるほど表示速度が遅くなってしまいます。Autoptimizeで圧縮するだけで、かなりの改善になります。

カズト
カズト
Autoptimizeで表示が崩れる場合もあるようですが、nomalogでは今のところ問題ないので導入しています。

Autoptimizeの設定

Autoptimizeのインストール

[プラグイン] > [新規追加]でAutoptimizeを検索します。上記のアイコンのプラグインを見つけたらインストールしましょう。

WordPressメニュー

Autoptimizeを有効化したら、設定画面を開きます。

設定画面はワードプレスの左メニューの[設定]項目内にあります。

JavaScriptの設定
CSSの設定
HTMLの設定
その他オプションの設定
カズト
カズト
nomalogの設定はこんな感じです。インラインの凍結などもオンにすると表示速度がさらに速くなりますが、スマホからの表示が崩れる場合があったので現在はオフにしています。

WP-Optimizeの導入

重要度

ワードプレスのデータベースを自動クリーンアップしてくれるプラグイン「WP-Optimize」を導入しました。

ワードプレスは何もしないとデータベース内に無駄なデータがどんどん蓄積されていきます。そのデータを定期的に最適化してくれるのがWP-Optimizeです。

[プラグイン] > [新規追加]でWP-Optimizeを検索します。上記のアイコンのプラグインを見つけたらインストールしましょう。

データベースを最適化(クリーンアップ)すると、後になってデータを復活させることができません。

プラグインの使用には細心の注意を払い、できればUpdraftPlusなどのバックアップ用プラグインでデータのバックアップをとってから実行しましょう。

最適化画面
最適化画面
自動で最適化するスケジュールを設定できる
自動で最適化するスケジュールを設定できる
カズト
カズト
最適化画面ではクリーンアップする箇所の設定ができます。警告マークがついているもの以外は全部チェックをつけて良いでしょう。

クリーンアップを自動でしてくれるスケジュールを設定できるので、nomalogでは毎週のクリーンアップを指定しています。

BJ Lazy Loadの導入

重要度

BJ Lazy Loadは、画像読み込みを現在表示されている範囲のみにして、その後の画像はスクロール後に遅延読み込みをするプラグインです。

最初に読み込む画像ファイルが少なくなるので、表示速度を上げられる効果があります。

BJ Lazy Load
BJ Lazy Load

[プラグイン] > [新規追加]でBJ Lazy Loadを検索します。上記のアイコンのプラグインを見つけたらインストールしましょう。

BJ Lazy Loadの設定画面
BJ Lazy Loadの設定画面

[設定] > [BJ Lazy Load]でプラグインの設定ができます。

基本的には上記の通りの設定で良いと思います。[Use low-res preview image]のみNoにチェックして、それ以外はすべてYesにチェック。

[Threshold]はどこまでスクロールしたら画像を読み込みはじめるかを設定する項目です。あまり数字を小さくすると体感で読み込みが遅く感じイライラするので、300~400をおすすめします。

無駄なプラグインを削除する

重要度

ワードプレスには魅力的なプラグインがたくさんありますが、あまりに入れすぎるとサイトの表示速度に悪影響を及ぼします。

なるべく必要のないプラグインは停止しておくようにし、スリム化を図りましょう。

nomalogに導入したプラグイン
  1. Advanced Gutenberg
  2. Autoptimize
  3. BJ Lazy Load
  4. Contact Form 7
  5. EWWW Image Optimizer
  6. Google XML Sitemaps
  7. JIN専用デザインプラグイン「CARAT」
  8. Pz-LinkCard
  9. Search Regex
  10. SiteGuard WP Plugin
  11. Table of Contents Plus
  12. UpdraftPlus – Backup/Restore
  13. WebSub/PubSubHubbub
  14. WP Mail SMTP
  15. WP Multibyte Patch
  16. WP-Optimize
  17. WP-Stateless

nomalogの導入プラグインはこんな感じ。なるべく減らそうとしているのですが、17個もあります。

リンク切れをチェックするプラグインなどは、その性質上かなりワードプレスに負担をかけるので、使わないときは切っておいた方がいいそうです。

効果はあるけどしなかったこと

しなかった施策
  1. アニメーションの停止
  2. キャッシュ系のプラグイン

アニメーションは個人的に好きだったので、停止せずにそのままにしています。

キャッシュ系のプラグイン(WP Super Cache)は、nomalogの環境が「Googleクラウド+Cloudflare」のため、そもそも不要というのもありますが、

スマホで閲覧時の不具合が発生したためプラグインを削除しました。

まとめ

以上がnomalogのサイト構築時に施した高速化の施策です。

まだやりようはありますが、これだけでもGoogle PageSpeed Insightsでのモバイル速度80点〜、PC速度90点〜を安定して出すことができます。

(面倒な画像の事前圧縮を除けば)すべての施策をするのに1時間もかかりませんし、JINを使っているサイト運営者さんはよろしければ参考にしてみてください。

この記事のURLをコピーする