【THE THOR】サイトの表示速度を速くする方法

ここあです。

 

私はWordPressテーマ

「THE THOR(ザ・トール)」を使用しておりますが

「THE THOR」のサイト表示速度はかなり速いです。

 

実際、私が「STORK」を使っていた時の表示速度と

「THE THOR」に切り替えた後での表示速度の差は

「本当に同じサイトか?」と驚くほどに違います。

 

↓PC版の表示速度測定のスコア

SRORK(変更前)
サイトの表示速度
THE THOR(変更後)
サイトの表示速度

 

↓スマホ版の表示速度測定のスコア

STORK(変更前)
サイトの表示速度
THE THOR(変更後)
サイトの表示速度

 

とは言え、サイトの表示速度を改善するのに

私が何か特別なことをしたのかと言うと

実はそうではありません。

 

なぜなら、「THE THOR」には

サイトの表示速度を速くするための機能が

あらかじめ標準装備されているからです。

 

私はただその設定を済ませただけ。

 

つまり、「THE THOR」さえ使えば

誰でも簡単にサイトの表示速度を速くすることができる

ということです。

 

ということで、今回は「THE THOR」を使って

サイトの表示速度を速める方法について

簡単に解説していきますので

 

すでに「THE THOR」を手に入れて

サイトの表示速度を速くしたいあなた、もしくは

 

「THE THOR」がなぜそんなに

表示速度が速いのかを知りたいあなたは

ぜひ最後まで読んでくださいね。

 

THE THORにはサイトの表示速度が速くなる理由がたくさんある!

THE THORには

サイトの表示速度が速くなる理由がたくさんあります。

 

例えば、以下の機能。

  1. Gzip圧縮・ブラウザキャッシュ
  2. 画像遅延読み込み・CSSファイル非同期読み込み
  3. AMP・PWA

 

これら、THE THORには

他のテーマに実装されていないたくさんの機能が備わっています。

 

さらにその上、THE THORには

プラグインの代替機能がたくさんあるので、

余計なプラグインも必要なく、サイトの表示速度が速くなります。

 

例えば、一部例を挙げると以下のプラグインは全て不要。

  • Contact Form 7(お問い合わせフォーム)※カスタマイズする場合は必要
  • Table of Contents Plus(目次)
  • WordPress Popular Posts(人気記事)
  • PS Auto Sitemap(サイトマップ作成)
  • Yet Another Related Posts Plugin(関連記事)
  • All in One SEO Pack(SEO対策)
  • Q2W3 Fixed Widget(追従サイドバー)
  • TinyMCE Advanced (ビジュアルエディタ拡張)※相性も悪い
  • Lazy Load(画像読み込み遅延)

 

つまり、THE THORを使って

サイトの表示速度が速くならない理由がないのです。

 

だから当然、THE THORさえ使えば

例えどんなサイトでもある程度、表示速度は速くなります。

 

事実、サイトの表示速度が鬼のように遅かった

私のサイトもTHE THORによって、

サイトの表示速度が劇的に改善されていますからね。

 

正直、私もそこまで改善されるとは期待してませんでしたが

そういう意味でもTHE THORは、良い意味で

私の期待を裏切ってくれました。

 

ということで、ここからはTHE THORを使って

サイトの表示速度を速める方法について解説していきます。

 

【THE THOR】表示速度を速めるSEO設定

THE THORの設定は正直、この「SEO設定」だけでも十分です。

この設定をきちんとするだけで、

サイトの表示速度が劇的に速くなります。

 

THE THORの「SEO設定」を触る場合は

ダッシュボードメニューから

外観 →カスタマイズ → SEO設定へと進みます。

 

そうすると

以下のような4項目の設定画面が開きます。

SEO設定

 

上から順番に解説していきますね。

 

CSS非同期読み込み設定

CSS非同期読み込み設定をクリックすると

さらに以下の項目が表示されます。

 

CSS非同期読み込み設定

 

CSSというのは言わば、サイトデザインを司る

コードを表す部分となります。

 

例えば、見出しのデザインとか、ボタンのデザインとか。

これらは全てCSSによって作られています。

 

なので、上記「CSS非同期読み込み設定」の

メインCSSを非同期読み込みにしてしまうと

サイトデザインが崩れてしまう可能性があります。

 

だから、もしも

「CSS非同期読み込み設定」を行う場合は以下の通り

  • 最上部のチェックは外す
  • 2個目〜6個目までは全てチェック
  • 下2つは任意でチェック

こんな感じで設定しましょう。

 

もちろん、多少デザインが崩れても

サイトの表示速度が速くなるなら構わないというあなたは

最上部の項目にチェックを入れて頂いても大丈夫です。

 

CSS非同期読み込み設定

 

私は最下部にある「YTPlayerCCを非同期読み込みにする」

にもチェックを入れておりますが、

 

いろんな記事を見ていると最上部の1つと、最下部2つは

チェックを入れてない方が多いです。

 

なので、下2つの設定に関しては

あなたのサイトに不具合が出ないかを見ながら

調整してみてくださいね。

 

もしも、不安があるなら、

下2つのチェックもとりあえず外しておきましょう。

 

img非同期読み込み設定

「img非同期読み込み設定」とは

画像の読み込みに関する設定のことです。

 

私はSTORKを使っていた時、「Lazy Load」という

画像の読み込みを遅延させるワードプレスのプラグインを使用していましたが

THE THORに実装されている「img非同期読み込み設定」がこれに該当します。

 

なので、この「img非同期読み込み設定」にチェックを入れれば

画像の読み込みを遅延させることができるので

ページの表示速度は速くなります。

 

しかし、私が検証したところでは

ブラウザによって全く画像が表示されないという

エラーに見舞われましたので

 

私はこの「img非同期読み込み設定」には

チェックを入れておりません。

 

↓私の観点では非推奨です。画像が表示されない方が問題だから

img非同期読み込み設定

 

だから、もしもあなたがこの

「img非同期読み込み設定」にチェックを入れる場合は

あなたが現在見ているブラウザだけではなく

 

他のブラウザでも確認しながら

きちんと画像イメージが表示されるかを確認した上で

チェックするようにしてくださいね。

 

Firefoxは問題なくOKでしたが、

Google Chromeでは全く画像が表示されませんでした^^;

 

ということで、参考になれば幸いです。

 

htaccess設定

htaccess設定を開くと以下のように

 

htaccess設定

 

  • ブラウザキャッシュを有効にする
  • Gzip圧縮を有効にする

という上記2つの項目があります。

 

だから、THE THORにはキャッシュ系のプラグインが必要ありません。

 

なぜなら、このhtaccess設定を「オン」にすることで

ネットユーザー側のブラウザにキャッシュを保存したり

 

Gzip圧縮と言って、通常、重くなりがちなデータを

サーバー上で圧縮する方法を使うことで

サーバーからのデータ転送量を抑えることができ

 

サイトの表示速度を速めることができるからです。

 

つまり、この「htaccess設定」を使えば

通信量の負担を減らしたり、サイトの表示速度が速くなるといった

メリットがあります。

 

ただし、「htaccess設定」は上記画像にも書いてある通り

設定が完了し「公開」したら、一度「パーマリンク設定」に移動し

「変更を保存」ボタンをクリックする必要があります。

 

さらに「htaccess設定」をすることで、これまでのファイルが上書きされ

設定が変わる可能性がありますので、特にサーバーの引っ越しなどをした後で

リダイレクト設定をしている場合

 

リダイレクトの設定が消えてなくなるリスクがありますので

htaccessファイルの書き換えによるトラブルがない場合に限り

「htaccess設定」を有効にしましょう。

 

・設定が完了したら「パーマリンク設定」で「変更を保存」する。
・リダイレクト設定している場合は、設定が消えるリスクがある。

ちなみに私は両方ともチェックを入れています。

 

HTML圧縮設定

HTML圧縮とは単純にサイトを表示させるためのHTMLプログラムを

圧縮するためのコードです。

 

だから当然、読み込むプログラムが圧縮されれば

それだけ読み込み速度も短くなるので

サイトの表示速度が速くなります。

 

あまり難しいことは考えなくて大丈夫ですが

要はこちらの設定もチェックさえ入れれば

サイトの表示速度が速くなるということです(笑)

 

こちらの設定も私はチェックを入れています。

HTML圧縮設定

 

以上、サイトの表示速度に関しての「SEO設定」

特にパソコンで見る場合の表示速度の設定として

 

THE THORにデフォルトで実装されている機能

  • CSS非同期読み込み設定
  • img非同期読み込み設定
  • img非同期読み込み設定
  • htaccess設定

 

上記、4つの設定について解説させていただきました。

 

もちろん、それ以外にも「プラグインを減らす方法」や

スマホ版のサイト表示速度を速くする「AMP設定」などもあります。

 

なので、特にTHE THORを手にしているあなたは

これら様々な設定を行うことで

サイトの表示速度を劇的に速くすることが可能です。

 

なお、AMP設定についてはこちらに詳しくまとめています。

【THE THOR】AMPエラーの対処法を超丁寧に解説!

 

【THE THOR】サイトの表示速度を速くする方法まとめ

【THE THOR】サイトの表示速度を速くする方法まとめ

 

今回はTHE THORのサイト表示速度を速める方法として

SEO設定」の方法について解説してきました。

 

正直、私はただテーマを変えるだけで

サイトの表示速度が速くなるなんて考えもしませんでした。

 

しかし、実際、THE THORを実装すると

自分でも驚くほどにサイトの表示速度が改善したのです。

 

だからこそ、私はTHE THORを手にしたら

きちんと「SEO設定」だけは済ませておくべきだと思い

こうして記事をまとめました。

 

また、それと同時に、

まだTHE THORを使っていないあなたには

THE THORの最も大きな魅力として

 

なぜTHE THORを使うと、サイトの表示速度が速くなるのかを

知って欲しいと思いました。

 

なので、これから

  • どんなワードプレステーマを使おうか考えている
  • サイトの表示速度が遅くて困っている

 

そんなあなたはぜひTHE THORを手に入れていただき

サイトの表示速度を速め、そして同時に

SEO効果も高めていただけたらと思います。

 

今や、サイトの表示速度はGoogleのサイト評価にも影響します。

 

なぜなら、サイトの表示速度が遅いと

それだけユーザビリティが悪くなりますし

 

サーバーから転送するデータ量が多い場合は

データの転送量がそのままデータ使用料という形で

ネットユーザーの負担になるからです。

 

だから、

データ転送量やサイトの表示速度というのは重要で

Googleも重視しています。

 

つまり、それだけサイトの表示速度は

SEO的にも重要だということです。

 

なので、ただサイトの表示速度が速くなればいい

という考えではいけません。

 

あくまでも、あなたの読者

ネットユーザーのユーザビリティを

考えることが重要なのです。

 

THE THORは自分で使っているからこそ

分かる部分ではありますが、そう言ったユーザビリティを

しっかりと考え設計されているテーマだと

 

私は改めて実感しています。

 

だから、私は今、このTHE THORというWordPressテーマを

一番プッシュしているのです。

自分が本当に良いテーマだと思っているから。

 

もちろん、THE THORの魅力は

サイトの表示速度だけではありません。

 

だからもしも、

「THE THOR」が気になっているのであれば

私がまとめているその他の記事もぜひ読んでみてくださいね。

 

ということで、

最後までお読みいただきありがとうございました!

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?