表示速度が遅いという評判のJINを高速化するには？

JINについて調べていると必ず出てくるのが、AMP非対応（ページ表示スピード高速化）という不安になる情報。

これは、スマフォなどでサイトを表示するための仕組みなのですが、厳格な表記ルールがあります。

これらを１から対応させていくのはよほど大変なのか、JINでは公式サイトのフォーラムには無回答（2020/09/26現在）、Twitterでのやり取りをされた方の記録からも、対応を考えていないとのことです。

サイト制作にあたり、ページ表示スピードを向上させるためにどのような工夫をするべきか、改めて一緒に考えてみましょう。

ページが表示される＝データが転送される

結論。

表示されるためのデータ量が少なければ表示は速くなります。

めっちゃ当たり前なんですけどね😓

極端な話、文字だけのページはほぼ一瞬で表示されます。

しかし、今の時代、そんなサイトは誰も目を向けてくれません。

キャッチ画像・写真・イラストなどで読み手の興味を惹かなければ、あっという間にサイトを離脱されて、二度と戻ってきてくれないのです。

では、サイトに表示されている構成要素は何でしょうか？

サイトに表示させているもの

ざっくりとですが、つぎのようなデータがやり取りされてページが表示されます。

• 文字データ
• 画像・音声などのデータ
• 動的処理データ
• 構造データ
• 広告表示用データ

これらを極限まで削れば、サイトの表示スピードは格段にあがります。

さらにいえば、

• レンタルサーバーの能力
• クライアントの回線スピード

これらも関係してきます。

格安レンタルサーバーにすると不安定になる理由がこれなのです。

JINで設定できるところから見てみましょう。

JINの設定でできる高速化

ざっと思い当たる設定は以下のとおりです。

どれも難しい設定ではありません。

これらの設定を見直してみましょう。

アニメーションの停止

【外観】→【カスタマイズ】→【サイトの基本設定】

アニメーション機能で、【無効】を選択する

標準フォントの利用

【外観】→【カスタマイズ】→【サイトの基本設定】

フォント選択で、【デフォルト】を選択する

FontAwesome5を利用しない

【外観】→【カスタマイズ】→【サイトの基本設定】

FontAwesomeを読み込まないにチェックを入れる

画像データを少しでも小さく・軽くする

１．ヘッダー上部の画像を表示させない

【外観】→【カスタマイズ】→【サイトの基本設定】

ヘッダー画像に画像を選択している場合は、画像を削除する。

２．個々の画像データサイズを小さくする

高速化プラグインを利用する

WordPressのサイトを高速表示させるためのプラグインがあるので、それをインストールする。

これを最後に持ってきた理由は、

※どれだけ良いプラグインがあっても、元サイトのデータがあまりにも大きすぎると役に立たないから

です。最初からプラグインに頼っても良いことはありません。

また、プラグインは追加すればするほどWordPressが不安定になります。できれば、最終手段として利用してほしいです。

シングルカラムにする

シングルカラムにすると、ページ表示スピードがあがります。

ブログ＝２カラムというのは、訪問者の回遊率を高めるために有効なのですが、次の点で問題があります。

自分は問題解決したとき、そのサイトの別の記事を読むのか？

おそらくは、解決したら殆どの場合はそこを離れるのではないでしょうか。ならば、サイドバーはいっそなくても良いのかと。

シングルカラムにするだけで、ページ表示スピードがあがります。みられない一覧表示よりも、少しでもサイトを早く表示させるならオススメの一手です。

画像を多用するなら

手順を説明したりするときには画像を多用します。もし画像の量が多い場合は、次の方法を検討してみてください。

• ページを分割する
• 動画を作る

単純ですがとても効果があります。

ページを分割する

ページを分割すると、途中から２ページ目、３ページ目とページを分けて表示することができます。

エディタで、【ページ区切り】を挿入するだけです。

Gutenbergでも同様に【ページ区切り】を挿入すると、そこから次のページへ自動的に分割されます。

動画をつくり画像を減らす

動画は手間ですが、Youtubeへ一旦アップロードし、公開用URLをブログ内に貼り付けます。

今は、スマフォで動画を撮影してYoutubeへアップロードするなんてとても簡単にできてしまいます。

パソコンの画面を録画したい場合は、画面録画アプリを利用して録画しましょう。Macであれば、QuickTimePlayerですぐに録画できます。

画像そのもののサイズを変更する

最後に画像そのもののサイズ（縦横長さ・解像度）を変更する方法です。

プラグインで対応する

WordPressでは有名なプラグイン、EWWW Image Optimizerがあります。

このプラグインは自動的に画像サイズをリサイズしてくれるスグレモノ。

このプラグインのおかげでユーザーはアップロードする画像をそれほど意識せずに利用することができます。

とっても便利なプラグインで、いちいち画像サイズ変更するのが面倒くさい、という方にはオススメです。

このプラグインは、JIN公式マニュアルでも推奨されています。追加しておきましょう。

アップロードする画像を最適化する

WebPという画像フォーマットを使えば、jpg や png などより、圧倒的に圧縮した画像サイズにすることができます。

WebP へ変換するには、PhotoscapeX というアプリが簡単です。

なお、ページのアイキャッチは webp にすると、ブログ村などで画像が表示されなくなります。なので、アイキャッチは jpg や png などが良いでしょう

画像名は英数字で短く

小さなことなのですが、利用する画像名、リネームせずにそのまま使っていませんか？

かくいう私も時々そのままにしてしまうことがあります。

最近はWebで素材を利用できるサービスが沢山あります。

すると、だいたいこんな名前がついてたりします。

8C2724-8E5BB5-000000-7D8C26-57610F.png

これ、見てもなにかわからないですよね・・・

しかもこんなに長い文字列は必要ありません。

こういうファイル名は面倒くさくても変更する癖をつけておきましょう。

画像加工のページでもリネームについて触れてます。

ぜひご覧になってください。

JINが好きなら運用で頑張る

以上、ページスピードに関する考察と対応方法でした。

ページの表示スピードが早いことをウリにしているテーマであろうと、上記のように表示に時間がかかる設定をしていれば自然とスピードも遅くなっていきます。

対応としてはまだ他にもあるかもしれませんが、もし良い方法があればまたご紹介したいと思います。