ネットビジネス

WordPressテーマ「X 」の軽量化・ページスピード改善まとめ【2020年】

  1. トップページ >
  2. ネットビジネス >

WordPressテーマ「X 」の軽量化・ページスピード改善まとめ【2020年】

私が現在使っているWordPressテーマはXです。クソかっこいい&魅せ方にこだわれるので愛用しています。

日本のWordPressテーマの方が使いやすいんですが、どうしても他の人とデザインが被ります。デザインが被るデメリットは「舐められる」という点です。「この人もこのWordPressテーマか…」とそこでパッと見で見透かされます。

とは言いながらも、大事なのはサイトデザインよりコンテンツ(中身)です。どれだけカッコいいデザインでもつまらない記事ばかりでは魅力はありません。

目指す理想形は、見た目にこだわりながらも中身も洗練されたサイトです。これは人間も同じですね。

そんな理由から、俺はWordPressテーマとしてXを選びました。

X Themeはサイト速度が重すぎる

デザイン、機能、使いやすさ、コスパ、すべてが抜群のXですが、ただ1つ気に入らない点があります。

それはサイト速度が重くなっちまうということ。下見て下さい。

スマホのXテーマのページ速度

当サイトでXを使った時のモバイルでのページ速度です。スコアは17点です。つまりスマホでこのサイトを見たら、クソ重いってこと。

パソコンのXテーマのページ速度

パソコンではXのページ速度はこんなところ。スコアは61点。期末テストで言えば赤点ギリギリですね。

流石に重すぎるので、速度を改善します。せめて「ちょっと重いサイト」くらいにスピードを改善しなければいけません。

デザインと速度について

あらかじめ、言っておきます。サイト速度はSEO対策でも大事です。サイト訪問者がストレスなくページを読むためにも大事です。

ですが、俺はサイト速度がすべてではないと考えています。デザインも同程度に大事だと考えています。特に「魅せ方」を武器にするコンテンツクリエイターはデザインもページ速度と同じくらい大事です。

したがって、俺はサイト速度はガンガン高めていきたいですが、必要なデザインを取っ払ってまで高速化する気はありません。

では、WordPressテーマXを使ったサイトを高速化していきます。

以下、バックアップは取ってやってください。当方は1ナノも責任を持ちません。

①アイコンを無効化

当サイトではFont Awesomeを使ってアイコンを表示しています。ですが、サイト速度を上げるためにアイコンは消します。

X>Theme Options>Miscellaneous> Font Awesomeから設定をオフにします。

Font Awesomeを無効化してサイト速度を向上

この設定をする場合は、サイトでアイコンを使用していないことを確認してください。設定を無効にした場合、アイコンは表示されなくなるんで。

アイコンを無効化するとサイト速度は下のようになりやした。

アイコン無効化した後のPagespeed insights【モバイル】

モバイルのスコアは17点→34点に。

アイコン無効化した後のPagespeed insights【パソコン】

パソコンのスコアは61点→74点になりました。アイコン無効化するだけでも速度は上がります。

②キャッシュ最適化

次に行ったのがキャッシングです。溜まったキャッシュを自動で最適化してくれるようにします。キャッシュを削除したりね。

サイト速度向上で最も重要な1つです。ただ、当サイトはConoha Wingというレンタルサーバーを使っています。このサーバーではキャッシュ最適化の設定もできるので、全部丸投げします。

キャッシュ最適化についてはググってください。ようするにブラウザが処理するリクエストが少なくなる。そうなるとサーバーの負担が減らされる。訪問者はサイト速度が良い感じに向上するってことです。

Xではキャッシュ処理の最適化にW3 Total Cache推奨しているようですね。

③Gzip圧縮

gzip 圧縮は、ファイルのサイズを小さくする方法の1つです。データ転送量を削減して結果的に、サイト速度を高めることに繋がります。

方法ですが、ルート直下、wordpressのディレクトリにある.htaccessを開いて、下のコードを入れます。

# Force compression for mangled headers.
<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
        RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
</IfModule>

# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
# as `AddOutputFilterByType` is still in the core directives).
<IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/ld+json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/x-web-app-manifest+json \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
</IfModule>

バックアップは取ってやってくださいね。あとは上書きアップして下さい。終わり!

④重いプラグインを削除

たぶんこれが一番効果的です。Xはすっげえお得なテーマです。本来はお金を出して買うような有料プラグインも無料で付いてきます。ばんどるー。

ただ、このプラグインが厄介で、いろいろプラグインをブチ込んでしまうと、結果的にサイト速度が遅くなっちゃう。

サイト速度改善前のプラグインは下のような感じです。

俺のWordPressサイトのプラグイン

画像では見づらいと思う。なので下に書いておきます。

  • Autoptimize
  • contact form 7
  • Email Form
  • Google Analytics
  • Imagify
  • Let's Review
  • Loco Translate
  • Really Simple SSL
  • Table of Contents Plus
  • The Grid
  • WP Multibyte Patch
  • Yoast SEO

流石に多すぎ。で、一度全部のプラグインを無効化してみました。するとスコアは84点まで上がりました。…おおふ。つまり問題はプラグイン。

ってことで、この中で重い&重要度が低いプラグインを無効化していきました。結果、現在は。

X高速化に邪魔になるプラグインを消した
  • Autoptimize
  • EWWW Image Optimizer
  • Google Analytics
  • Let's Review
  • Really Simple SSL
  • Table of Contents Plus
  • The Grid
  • WP Multibyte Patch
  • Yoast SEO

少し減りました。消したのは

  • contact form 7
  • Email Form
  • Imagify
  • Loco Translate

です。特にサイト速度に響いたのはcontact form 7です。このお問い合わせフォームプラグインを消すだけでサイト速度が改善されました。

俺のサイトを見る限り、

  • contact form 7
  • The Grid

を消すだけでスコアは80点近くまで上がるようです。ただThe Gridはこのサイトに欠かせないプラグインなので残します。

そしてImagifyの代わりにEWWW Image Optimizerを入れました。もともとImagifyの有料プランを使ってましたが、ちょうどプランを解約するタイミングだったので、EWWW Image Optimizerにしました。

⑤画像を軽量化

最後に画像を軽量化することにしました。EWWW Image Optimizerで一括で軽量化をしてみたら…

EWWW Image Optimizerで画像を軽量化、ページ速度が上がったお

気持ち的にだいぶ軽くなりました。気持ち的に。少しだけ画像サイズがマシになりましたね。

【まとめ】Xのサイト速度を改善した結果…

最終的にスコアの改善は以下の通りです。

モバイル版のページスピードはこんなに向上したよ

モバイルはスコア17点→61点に改善しました。赤点ギリギリですが、まあ許せますね。

パソコンのページスピードはこんなに向上したよ

Xをインストールして直後のサイト速度を考えると明らかに向上したことが確認できますね。

スピードを最重視するサイト運営者からすれば「まだ遅いじゃん」と思うはず。俺がアナタならぶっちゃけそう思う。ですが、まあ、妥協できるポイントかなと思うんですよね。

これ以上サイト速度を向上しようとすれば、おそらく90点を超えられると思います。しかし、そうなれば時間と労力がえげつないほど食われます。またデザインも失われます。

なので、このくらいが妥協できるかなと。またサイト速度を向上させたら追記します。あまりに問題が多そうなら他のWordPressテーマに切り替える予定ですが、しばらくはXを使い続けます。うい。

  • この記事を書いた人
  • 最新記事

南 大綱(みなみ たいこう)

名前は南(みなみ)です。偽名です。人間関係、法律、社会常識すべてから解放されたネットビジネス陰キャを自称しています。業界内のネットビジネスノウハウを隅から隅まで知り尽くしています。好物は泥水をすすりながら食べるじゃがりこです。世界中から情報収集しているので、日本のネットビジネス起業家トップ層も知らない戦術、テクニックに通じています。イカレた人が好きです。仲良くしましょう。

-ネットビジネス