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

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

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

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

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

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

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

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

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

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

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

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

デザインと速度について

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

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

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

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

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

①アイコンを無効化

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

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

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

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

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

パソコンのスコアは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>

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