次回から「ノマログ」と検索ください

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

5 min
JIN高速化

当サイトは「THE SONIC」にテーマの変更をしました。この記事はJINを使っていたころに作成しています。

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

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

https://www.imia.org/wp-content/uploads/2020/03/d57cb12f-kazuto.jpg

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

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

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

実際にやった施策
  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をおすすめします。

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

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

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

インストールしたプラグイン
  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 Multibyte Patch
  15. WP-Optimize

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

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

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

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

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

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

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

まとめ

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

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

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

おすすめの取引所

GemForex

狭いスプレッド・最大1000倍レバレッジ・金融ライセンスも取得している人気FX取引所。2019年頃から口座開設数が爆発的に伸びています。口座開設ボーナス&入金ボーナスが充実。

XM Trading

人気、ユーザー数が世界トップクラスの海外FX取引所。金融ライセンスも取得済みで、運営実績も当サイトが紹介する取引所の中で最も長いです。口座開設で3,000円のボーナス。

FXGT

FXGT

人気の仮想通貨FX「CryptoGT」の運営会社が新たにはじめたFX特化の取引所。入金ボーナスが充実しており、はじめての方にもおすすめです。仮想通貨入金にも対応しています。

【FX】GEMFOREX自宅待機応援キャンペーン

時間
新規口座開設で30,000円がボーナス!
入金不要で即トレードができます。

カズト

カズト

メディア運営者

クレジット・リース会社に2年勤めた後、メディアの運営で個人事業主として独立しました。主に仮想通貨の情報サイトと当サイトを運営しています。仮想通貨歴とサイト運営歴は4年目です。

当サイトの記事で気になる点やご質問があればTwitterのDMよりご連絡ください。

FOLLOW

カテゴリー:
にほんブログ村 為替ブログ FX 副業投資家へ
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です