「高速化設定」でWordPressの有料テーマを比較する！サイト速度対策まで徹底解説

はじめに

Admin

この記事では、「サイトの速度」の視点から有料テーマを比較していきます。

YOFUKASI LABでは下の記事のように様々な視点で有料テーマを比較し、個人個人の目的に合った「テーマ選び」をサポートしています。一度購入してしまったら、なかなか変えるわけにもいきづらい有料テーマ。最も自分にふさわしいものに巡り合って頂きたいです。

記事の信頼性

●有料テーマを複数有し実際に使用した管理人が記事を作成しています

●WordPressで企業のホームページ作成サポート

●ドメインパワー40超えの企業にて500記事以上のブログ作成

●WordPress歴7年

この記事では、「サイト速度の対策がどのようにされているか」に焦点を当てて、有料テーマを比較していきます。

何故サイト速度についてか・・？

ページの読み込みが1秒遅れると、次のようなことが起こります。

• ページビューが11％減少
• 顧客満足度の16％低下
• コンバージョンが7％減少

サイトの読み込みに数秒余計にかかると、訪問者を落胆させ、売上能力にマイナスの影響を与えます。これは避けようがありません。

47％の消費者がウェブサイトのロード時間が2秒以内であることを期待しています。また、40%の消費者は3秒以上かかるページを放棄すると言われています。つまり、高速なサイトを持つことは、Googleで上位に表示されるためだけでなく、最終的な利益を高く維持するためにも不可欠なのです。

まずは、ご自身のサイトのサイト速度を測ってみると良いと思います。どの程度高速化されているのかPage Speed Insightsで測定できますので測ってみてください。

ちなみに、まだブログを１記事も書かれていない方は無料テーマでせめて10〜20記事くらい書いてから、有料テーマを探すことをお勧めします。そうでないと、自身のサイトの方向性が始めはブレやすかったり、実際記事やSEO対策をしてみて、自分にとって何が必要なのか見えないと思うからです。

では、早速始めていきましょう。

サイト高速化の基本

有料テーマに入る前に各有料テーマ以外で可能なサイトの速度対策もいくつか紹介しておきます。有料テーマの機能と合わせることでよりサイト速度を増すことが可能になると思います。

高速化のためのプラグインを活用する

これらのような画像を制御するプラグインを活用することで、速度の改善を見込めます。

「Xアクセラレーター」を利用する

サイトを表示する際にはCSSファイルをその都度呼び出してデザインを描画します。その過程をサーバー側でHTML / CSSをキャッシュすることでサイトの表示をスムーズにするというものです。

当サイトは永久ドメイン無料のXserverを使用しております。WordPressを使用する方にとってはインストール〜SSL設定まで自動でおこなってくれるので非常にお勧めのサーバです。

DNSサーバーを検討する

ページの読み込み速度を左右する大きな要因のひとつに、DNSのルックアップにかかる時間があります。DNS（ドメインネームシステム）とは、IPアドレスとそれに関連するホストネームのデータベースを持つサーバーのことです。ユーザーがブラウザにURLを入力すると、DNSサーバーがそのURLをオンライン上の場所を示すIPアドレスに変換します。

DNSルックアップとは、特定のDNSレコードを検索することです。コンピュータが電話帳の番号を調べるようなものだと思えばよいでしょう。

ISPはDNSルックアップを実行して、そのURLに関連するIPアドレスを見つけます。45.46.53.153.432のようなIPアドレスを取得し、探しているサイトがどこにあるのかを教えてくれるのです。このステップにより、ユーザーがオンラインで情報にアクセスするために、長い数字の文字列を覚える必要がなくなります。

このステップにかかる時間は、お使いのDNSプロバイダーの速度に依存します。そうでない場合は、より高速なDNSプロバイダーに切り替える必要があるかもしれません。毎月更新されるこのDNS速度比較レポートで、お使いのプロバイダーがどの程度の速度になるのか、またどのプロバイダーがより速い速度を提供しているかを確認することができます。

低速のDNSを使用している場合、ブラウザがあなたのサイトを見つけるまでの時間が長くなります。より高速なDNSプロバイダーに切り替えることで、処理を高速化することができます。

画像縮小・変換・圧縮アプリ・サイトの利用

画像の縮小など画像については外部アプリを使用する。例えばImage Resizerなど。その他、PNGをjpgに修正したり、画像のタイプを変換するサイトもあるので利用してみましょう。

※ファイルが小さければ小さいほど、ページの読み込みは速くなります。ファイルを圧縮することは、読み込み時間を短縮する最も簡単な方法の一つであり、今日では、Gzipによる圧縮を有効にすることが標準的な方法とされています。

ほとんどのウェブサーバーは、ダウンロードのためにファイルを送信する前に、サードパーティーのモジュールを呼び出すか、内蔵のルーチンを使用して、Gzip形式でファイルを圧縮することができます。Yahooによると、これによりダウンロードにかかる時間を約70%短縮することができるといいます。

PWAのプラグインを使用する

PWAはWebサイトのコンテンツをアプリとしてスマートフォンやPCにインストール可能にする技術で、なんとアプリと同様にホーム画面にアイコンができて、これをタップ（クリック）すると直接サイトにスマホのトップ画面から誘導することができるんです。

下記のSUPER PWAのようなプラグインを使用することで実装することが可能です。

HTTPリクエストを最小限に抑える

Yahooによると、Webページのロード時間の80%は、画像、スタイルシート、スクリプトなど、ページのさまざまなパーツのダウンロードに費やされています。これらの要素ごとにHTTPリクエストが発生するため、ページ上のコンポーネントが多いほど、ページのレンダリングに時間がかかることになります。

リクエストを最小限に抑えるには、まず、自分のサイトの現在のリクエスト数を把握し、ベンチマークとして使用することが重要です。Google Chromeをお使いの場合は、ブラウザのデベロッパーツールでHTTPリクエストの数を確認することができます。

分析したいページを右クリックし、「検査」をクリックして、「ネットワーク」タブをクリックします。(「ネットワーク」タブが表示されない場合は、デベロッパーツールのサイドバーの左枠を左にドラッグして拡張する必要があるかもしれません)

「名前」欄にはページ上のすべてのファイル、「サイズ」欄には各ファイルのサイズ、「時間」欄には各ファイルの読み込みにかかった時間が表示されます。また、左下には、サイトが行う総リクエスト数が表示されます。このリクエスト数を減らすとサイトが高速化されます。ファイルに目を通して、不要なものがないかどうか確認してください。

THE THORの高速化設定

●国内最高峰の表示速度を謳っています。SEO設定＞高速化設定は、全部で４つあります。

• CSS非同期読み込み（CSSファイルの読み込みをあえて遅らせ、総合的に表示速度をアップさせる）
• img非同期読み込み
• htaccess設定（キャッシュの設定）
• HTML圧縮設定（HTMLの記述内容を圧縮します）

※CSSやJavaScriptなどのスクリプトは、2つの異なる方法で読み込むことができます。「同期」と「非同期」です。同期的に読み込まれるスクリプトは、ページ上に表示される順番に一度に一つずつ読み込まれます。一方、非同期で読み込む場合は、スクリプトの一部が同時に読み込まれます。ブラウザはページを読み込むときに上から下へと移動するため、非同期でファイルを読み込むと、ページの表示速度が向上します。

その他に

• AMPに対応している
• PWA（アプリ化）を標準装備している（サイトがユーザーのスマホのホーム画面に表示されます。表示速度の圧倒的な改善とオフラインでも表示される機能を有します。）

AFFINGER6の高速化設定

●AFFINGER6の特徴として、細部まで調整できるので、画面の幅や余分な物は削除・縮小しやすい。

●表示速度優先の設定項目がある。設定した場合、下記の機能が使用できなくなります。

• スライドショー機能
• Googleフォント・マテリアルアイコン
• スクロール追尾広告
• コピー機能（SNSボタン）
• アニメーションクラス
• カウントダウン（EX）
• もっと読む（無限スクロール）（EX）
• レスポンシブ（ショートコード含む記事一覧）画像の画質を上げる（EX）

【変更される主な設定】

●遅延読込設定

WordPress本体のLazyLoadを有効にする（※height,widthが記載されたimgが対象です。「LazyLoadSEO」プラグイン使用時は自動で無効化されます。）という設定項目があります。

JINの高速化設定

●JINテーマは高速化を心がけているテーマです。サイトの速度が気になった場合は、アップデートして最新版にすると表示速度が改善する可能性があります。「外観」>「テーマ」>JINの項目「いますぐ更新」のボタンでアップデートします。

●FontAwesomeをOFFにして、JIN純正のアイコンを使用することで速度アップの期待ができます。

●基本で示したようなプラグインやアプリ、基本的対処法が中心で、AMPは非対応です。

STORK19の高速化対策

●STORK19（ver.2.1）からAMP化できるようになりました。

●Lazy Loadなどプラグインなしで高速化設定が可能です。

※ファイルの読み込みを遅延させるとは、他の要素が読み込まれた後まで、そのファイルを読み込まないようにすることです。JavaScriptのような大きなファイルを遅延させると、残りのコンテンツが遅延なく読み込まれるようになります。

TCD Muumの高速化設定

下記のような高速化設定を行います。

上記は実際の高速化設定画面と同様です。

AMPには対応していません。PWAはプラグインの使用が必要です。

SWELLの高速化設定

キャッシュ機能

設定項目

• 動的なCSSをキャッシュする
• ヘッダーをキャッシュする
• サイドバーをキャッシュする
• 下部固定メニューをキャッシュする
• スマホ開閉メニューをキャッシュする
• トップページコンテンツをキャッシュする
• 内部リンクのブログカードをキャッシュする
• 外部リンクのブログカードをキャッシュする
• ブログカードのキャッシュ期間

遅延読み込み機能

設定項目  

• 記事下コンテンツを遅延読み込みさせる  
• フッターを遅延読み込みさせる
• 画像等のLazyload
• スクリプトの遅延読み込み
• 遅延読み込み対象にするスクリプトのキーワード
• スクリプトの遅延読み込み機能をオフにするページ
• 遅延させる秒数  

ファイルの読み込み

設定項目

• SWELLのCSSをインラインで読み込む
• コンテンツに合わせて必要なCSSだけを読み込む
• フッター付近のCSSを遅延読み込みさせる

ページ遷移高速化

設定項目

• 高速化の種類の設定
• Prefetch Pjaxで遷移させないページのURL
• Prefetchさせないページのキーワード

細かな意味は公式サイトで見た方がよりわかりやすいと思いますので、SWELL公式サイト（ページ遷移高速化機能（pjax）の使い方と注意点でご確認ください。

賢威の高速化対策

賢威の場合は、調べてみましたが、細かな設定というよりも、賢威の導入でサイトの表示速度が高速化されるという報告が多いようでした。細かな非同期設定など標準でされているのかとの報告がみられました。

SANGOの高速化設定

高速化設定対策

●サムネイル画像サイズの最適化

●コンテンツ内の画像の遅延読み込み

●記事フッターの遅延読み込みなど

何も使用しなくとも早いと公式サイトでは伝えていますが、SANGOの高速化記事をいくつか読むとキャッシュ系プラグインや多々工夫をそれぞれされているようです。

まとめ：サイト速度（高速化設定）対策

有料テーマの高速化設定を比較してきましたが、あくまで個々で設定できる部分に焦点を当ててきました。多くのテーマが自身の有料テーマを導入するだけで高速化が実現できるとも記載しており、ハード面まで今回比較できなかったというところはご承知おきください。

実際、同じサイトで全てのテーマを入れ替えた時の反応など見れたら面白いと思いますが、その辺りはなかなか金銭的にも労力としても難しい部分でしょう。

ハード面は差し置いて、設定項目からだけでも「高速化対策」にこだわっていると感じたのは下の3つのテーマでした。

かなり細部まで上記3つの有料テーマはこだわって設定できるため、高速化設定をしっかり行いたい方にはおすすめのテーマと言えます。

高速化設定だけでは、有料テーマを決めることはできないと思いますので、他のブログカードでの比較・価格での比較など多々比較記事も書いておりますので、併せて読んでいただいて総合的に判断していただけたら良いかなと思います。