Amazonでお得な買い物

【JIN】高速化するための7つの方法|初心者は知らないと損

JINを高速化するための7つの方法

以前、WordPressテーマをCocoonからJINに変更した記事を書きました。

試しにサイトのパフォーマンスを計測したところ、モバイル/パソコンともにCocoonよりも低い評価になっていることがわかりました。

目次
スポンサーリンク

サイトスピード評価
(高速化対応前:JINテーマ移行直後)

サイトスピードの評価はPageSpeed Insightを利用しました。サイトのURLを貼り付けて分析をクリックするだけなので超簡単です。

私のサイトの評価はというとJINに移行後に、

モバイルで「36」、パソコンで「86」

とかなり低評価になってしまっていました。

Cocoonのときは80以上は確実にあったので、私としてはせっかく有料テーマのJINにしたのにかなりショックでした。

モバイルのサイトスピード_高速化対策前
パソコンのサイトスピード_高速化対策前

JINに移行したことでかなりリッチなデザインにできることはわかったのですが、反面サイトスピードも落ちていたということですね。

これだと、Google先生からのサイトの評価が落ちてしまい検索ランキングも下がる可能性があります。

それもそうですよ、サイトのスピードが遅いということはユーザーからすると物凄くストレスになるわけですから、そういった遅いサイトというのはGoogle先生からすると上位にしたくないのです。

まだ作りたてのサイトとはいえ、早めに対処しておいたほうが良いと考えましたので、自分なりにできそうな対策を実施してみました。

JINの高速化|JIN公式サイトおすすめの方法
(初級者編)

まずは、JINの公式サイトに掲載されている推奨方法を試してみます。

JIN公式の高速化の方法
  1. JINを最新版にアップデート
  2. 標準フォントを利用
  3. アニメーションを無効化
  4. FontAwesomeをOFFにする
  5. 高速プラグインを採用 (Autoptimize)
  6. 画像データの最適化
  7. Xアクセラレータを活用 (Xサーバーのみ)

JINを最新版にアップデート

誰でもできるのがJINを最新バージョンにするということです。 JINは有料テーマなので定期的にアップデート情報が更新されるというのも魅力の点ですね。

私の場合は現時点(2020/06)で最新のVer2.060だったので特にアップデートは不要となりますが、古いバージョンを利用されている方はまずはアップデートを試してみましょう。

ちなみに、JINテーマをアップデートするときはJINのバージョン更新履歴からバージョン情報を確認することができます。ダウンロードのパスワードはJINテーマ購入時のパスワードになります。

標準フォントを利用

標準フォントについての説明はJINのホームページでも記載されている通り最も無難なフォントになります。

WEBサイトで広く使われているフォントなのでオリジナリティには欠けますが、外部ファイルを介さずに読み込めるため表示速度はダントツで速いのが特徴。

JIN公式ページ

1.ダッシュボードのサイトをカスタマイズをクリックします。

サイトをカスタマイズ

2.サイト基本設定をクリックします。

サイト基本設定

3.フォント選択でデフォルト(端末の標準フォント)にチェックを入れて、公開をクリックします。

デフォルトフォント

アニメーションの無効化

アニメーションはサイトを動的に見せることができる機能で、イメージはWindowsのアニメーションと同じです。 この機能をOFFにすることで静的なサイトになりサイトを高速化することができるわけですね。

先ほどと同様にサイト基本設定を開き、アニメーション機能で無効にチェックを入れて、公開をクリックします。

アニメーション機能を無効

PageSpeed Insightsの結果

モバイルに関しては「48」とそれなりに改善しました。パソコンは逆に「75」と低くなりましたが、これはPageSpeed Insightsが解析するタイミングによるものでしょう。

モバイル
モバイルのサイトスピード1_高速化対策後
パソコン
パソコンのサイトスピード1_高速化対策後

FontAwesomeをOFFにする

FontAwesomeはアイコンを文字として扱うことができるツールのことです。 ソースコードを書くような感覚でアイコンの色や大きさを変更することができるので、複数のアイコンを用意する必要がないのが利点です。

それでは、FontAwesomeをOFFにしてみましょう。 先ほどと同様にダッシュボードの「サイトをカスタマイズ」に移動し、「その他設定」をクリックします。

その他設定

「fontawesomeを読み込まない」にチェックを入れて、「公開」をクリックします。

fontawesomeを読み込まない

PageSpeed Insightsの結果

モバイルで「67」という結果になりなかなか評価が高くなってきましたね。パソコンでは「87」で劇的に良くなっているということではないです。

モバイル
モバイルのサイトスピード2_高速化対策後
パソコン
パソコンのサイトスピード2_高速化対策後

高速化プラグインを採用 (Autoptimize)

私のような初心者はプラグインのお力を借りるのが手っ取り早いです。 というわけで、Autoptimizeという高速化プラグインをインストールしましょう。

高速化プラグイン(Autoptimize)のインストール

Autoptimizeはサイト設計されているソースコードを最適化してくれるプラグインになります。

さっそく、「プラグイン」→「新規追加」より「Autoptimize」を検索しましょう。

プラグインの新規追加

「Autoptimize」が表示されたら、「今すぐインストール」をクリックします。

Autoptimizeをインストール

インストールが終わったら「有効化」をクリックします。

Autoptimizeの有効化

Autoptimizeの有効化が完了したら、高速化の設定をしていきます。

高速化プラグイン(Autoptimize)の設定

プラグインインストール済みプラグインよりAutoptimizeの設定をクリックして設定していきましょう。

Autoptimize設定

JavaScriptコードの最適化にチェックを入れます。 JSファイルを連結するにチェックが入っていますが、そのままで問題無いです。

JavaScriptコードを最適化

CSSコードを最適化にチェックを入れます。 CSSファイルを連結するにチェックが入っていますが、そのままで問題無いです。

CSSコードを最適化

HTMLコードを最適化にチェックを入れます。

HTMLコードを最適化

最後にスクロールで下に行き変更を保存してキャッシュを削除をクリックしたら、Autoptimizeのセットアップが完了です。

変更を保存してキャッシュを削除

PageSpeed Insightsの結果

モバイルは「80」かなりパフォーマンスが改善しました。パソコンでは「95」と申し分ない評価となりました。

モバイル
モバイルのサイトスピード3_高速化対策後
パソコン
パソコンのサイトスピード3_高速化対策後

画像データの最適化(軽量化)

最後に画像データを最適化していきます。

私は記事内の画像を何も考えずにアップロードしていました。

例えば、画像データのサイズを圧縮しなかったり、ファイル名を「85946A82-D016-4362-879A-862208DA0A5D.png」と検索エンジンから認識しにくい名前を付けてしまっていました。

それから、画像データのalt属性(代替テキスト)も設定していなかったので、検索エンジンからすると不明な画像という判定をされてしまい、結果的にクローラビリティが低いサイトになってしまっていました。

ここからは地道な作業です。

公開済みの記事に貼り付けている画像を一つ一つ最適化・ファイル名変更してalt属性を付与していきます。

画像データのサイズ変更・圧縮

画像データのサイズ変更や圧縮などはI♡IMGというオンラインの画像編集ツールを利用しています。

私の画像データは4k並み(4096×2160px)のものが至るところにありましたので、まずはサイズを少なくとも720p(1280×720)くらいに下げてから圧縮する作業を行いました。

良い機会だったので、記事内の画像はもちろん、アイキャッチ画像などアップロードしていた画像データはすべてサイズ変更と圧縮をしておきました。

画像ファイルの名称変更

次に、ファイル名称についてですが、私は「日本語.png」のように日本語でファイル名を付けていました。

結論から言うと、この場合は「japanese.png」のように英語でファイル名を設定したほうがいいです。

理由はGoogleのクローラーがサイトを評価する際に日本語だと誤った意味に捉えられてしまう可能性があるためです。

最近では日本語でも問題無いという報告もあるようですが、英語にしておいたほうが無難でしょう。

英語で表現する際の注意点は、

推奨の英語表示
  • 全角文字
  • 半角・全角スペース
  • ハイフンとアンダースコア以外の記号
  • 機種(環境)依存文字

の文字を利用しないようにしましょう。日本語と同様にクローラーに勘違いされてしまう可能性があります。

画像データに代替テキスト(alt属性)を付与

画像データには「代替テキスト(alt属性)」というものが設定できます。

簡単に言うと、alt属性は画像が表示できない環境で表示されるテキストになります。alt属性を設定していれば、クローラーがサイトを巡回したときに、何の画像データなのかわかりやすくなり、いわゆるクローラビリティが向上すると言われています。

WordPressではalt属性を「代替テキスト」と表現していますので、メディアライブラリや記事に画像をアップロードした際に、設定することができます。

代替テキストの設定場所 (メディアライブラリ)

altテキスト(メディアライブラリ内)

代替テキストの設定場所 (記事内)

altテキスト(記事内)

代替テキスト(alt属性)はメディアライブラリで画像データをアップロードした後に設定しておくことをオススメします。

理由は、記事に画像を貼り付けたときに設定してもメディアライブラリ上は反映されないためです。

Xアクセラレーターを活用 (Xサーバーのみ)

エックスサーバーを利用している方は、Xアクセラレーターを活用することでサイトの高速化が図れるようです。

私の場合はエックスサーバーは利用しておらず、heteml(ヘテムル)サーバーを使っているので同様のことはできませんが、エックスサーバーをお使いであれば試して見る価値はあります。

サイトスピード評価
(高速化対応後)

さて、それでは高速化対応後のサイトスピードを計測していきます。

結果からお伝えすると劇的に改善しましたので、具体的なスコアを見ていきましょう。

PageSpeed Insightsの結果

JINの設定やプラグインの力を借りたり地道に画像の最適化をすることで、最終的にはモバイルとパソコンともに

「90」以上

に達することができました。

モバイル
モバイルのサイトスピード最終_高速化対策後
パソコン
パソコンのサイトスピード最終_高速化対策後

画像最適化についてはプラグインでも対応できたかもしれませんが、サーバの負荷を考慮してできるだけ少ないデータボリュームでアップロードしたほうが良いと感じます。

また、プラグインが多いとサイトスピードに影響するのでできるだけプラグインは使わないことをおすすめします。

スポンサーリンク

まとめ

サイトスピードをモバイル「36」という壊滅的な数値から

「90」ととても高速なサイト

へと戻すことができました。というよりCocoon時代よりも早くなっているとさえ感じます。

サイトスピードはSEO的にも大事になってくるところなので、地味な作業ではありますがやっておいて損はありませんよ!

スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

インドア派で体育会系のソフトウェアエンジニアです。普段はパソコンをしながらコーヒーを飲むのが至福の時間。日々の生活を快適にするための情報を随時アップしていきます。

コメント

コメントする

目次