ブログ運営

WordPressテーマJINで作ったサイトの速度向上方法まとめ

 

こちらのブログはWordpressテーマ「JIN」で作成しておりますが、実は私はこの他にもいくつかJINで作成したブログを運営しており、その他のブログでページ速度が著しく低下したことがありました。

PageSpeed insightsで測ったところ、まさかの速度10。笑

100点満点中の10点ということなので、なかなかヤバいレベルです。笑

えぞりす
えぞりす
道理で最近DAが下がっていたわけだ…！

 

 

焦った私は早速ページ速度の改善を図りました。

そこで今回は、WordPressテーマ「JIN」で作ったサイトの速度改善を図るために私がやったことと、その結果をまとめます。

同じく速度でお悩みの方の参考になると嬉しいです。

 

状況まとめ

まずは私のブログの状況をまとめます。

利用サーバ

ろりぽっぷを利用しています。

  • スタンダードプラン（月額500円）
  • Webサーバー　Apache
  • ストレージ　HDD
  • 転送量150GB/日
  • サーバー使用量　120GBのうち、3GB

 

最近の出来事

1か月前（2020年2月）に、WordPressテーマを無料の「Flash」から有料の「JIN」に変更し、サイトを大幅リニューアル。このとき、ドメインパワー（DA)は7でした。

見にくかった記事がきれいに整理され、アニメーションも付き、ユーザーからも「見やすくなった」とコメント頂き、テーマ変更は大満足でした。セッション継続時間も30％ほど上昇しました。

 

しかしその2週間後、ドメインパワーが7から5になり、4になり…

サイト訪問数やセッション継続時間は現状維持・またはアップしているにも関わらず、ドメインパワーが下がるという現象が起きました。

それに伴って、メインの流入キーワードでの検索順位も1位から4位に。

えぞりす
えぞりす
ひぇ～～！

 

 

焦って色々調べた結果、「ページ速度の問題なのでは」という仮説に行きつきました。（気づくの遅っ…！）

 

えぞりす
えぞりす
そんなこんなで、本気でページ速度向上を考えました

 

 

そもそもPageSpeed insightsって何？

サイトの速度を無料で測れるツール

PageSpeed Insightsとは、Googleで提供しているサービスで、サイトの速度を無料で測ることが出来ます。

サーチコンソールの「サマリー」→「拡張」→「速度」のところからもPageSpeed Insightsに飛ぶことが出来ます。

 

インデックスに関係なく、ソースを書き換えたりした直後に測定してもちゃんと結果が出ます

 

WordPressテーマ「JIN」の速度は？

「やや遅い」という評価が多い

美しいデザインで多くのブロガーを魅了するWordpressテーマ「JIN」。

カスタマイズやブログカード機能、マーカーなどの記事の書きやすさをとってみても、かなり優秀です。見た目のスッキリ感とユーザーの回遊率アップなどでは、満足されている方が多いかと思います。

 

しかし、そんな「JIN」の唯一ともいえる弱点が、モバイルの表示速度の遅さ。

ネットで検索していても、JINを利用しているブロガーさんの「速度」に関するお悩みが色々出てきます。

 

やはりデザインがおしゃれで、痒いところに手が届くような機能充実があるからこそ、速度面では遅くなってしまうのでしょう。

 

【結論】速度改善のためにやったこととその結果

試したことと速度の変化

やったこと PC モバイル
最初の状態 20 10
アニメーションのOFF 改善スコア20 改善スコア　2
fontawesomeを読み込まな48 改善スコア　2 改善スコア　1
プラグイン「EWWW」 改善スコア　2 改善スコア　2
プラグイン「Lazy loader」 改善スコア　2 改善スコア　0
プラグイン「WP-」 改善スコア　2 改善スコア　0
プラグイン「Autoptimize」 改善スコア　59 改善スコア　4
PHPテーマ編集 改善スコア　4 改善スコア　16
結果（その時々で変動あり） 64 33

 

えぞりす
えぞりす
以下で各項目の詳細を記載していきますね！

 

速度アップのために最初に確認すべき設定

アクセラレータ設定

サーバーでアクセラレータの設定が出来るのであれば、速度改善のために行います。

アクセラレータとは、加速器、加速装置、促進剤などの意味を持つ英単語で、ITの分野では機器やソフトウェア、システムなどに追加して性能を向上させる機材などのことを意味する。

出典：IT用語辞典

 

ちなみにろりぽっぷのサーバでは、エコノミープラン以外のプランで、アクセラレータ設定が利用できます（無料）。

ろりぽっぷ　アクセラレータ機能紹介ページ

 

プラグイン「EWWW Image Optimizer」の導入

EWWW Image Opptimizerとは？

EWWW Image Opptimizerは、Wordpressにアップロードした画像を圧縮して最適化できるプラグインです。

めちゃくちゃ高性能なので、使わない手はないです！

 

EWWW Image Opptimizerのすごいところ
  1. 画像を圧縮するのに画像を劣化させることがない
  2. 画像をアップロードするときに、自動で圧縮してくれる
  3. 過去にそのままの大きさでアップロードした画像も、後から一括で最適化できる
  4. 画像500枚までの一括最適化は無料

 

具体的な設定項目については、こちらのサイトを参考にさせて頂きました。

＞＞ItaruBlog

 

無料版と有料版の違い

EWWW Image Opptimizerの有料版と無料版の大きな違いは、過去にWordpressでアップロードしてきた画像を一括して最適化する際の画像の枚数上限です。

無料版：一括して画像圧縮できるのは500枚まで

有料版：支払金額に応じて一括画像圧縮できる枚数が異なる
（例）3ドルで1000枚、9ドルで3000枚、39ドルで13000枚

 

EWWW Image Opptimizerの公式サイト（英語）

 

えぞりす
えぞりす
サイトが英語なのでちょっと緊張します

 

テーマの「functions.php」を編集する

パソコン

「function.php」ファイルの変更が有効な場合

サーチコンソールの速度の箇所で「レンダリングを妨げるリソースの除外」でエラーが出ていた場合は、テーマの「function.php」ファイルの変更をすることで速度改善＆エラー解消が期待できます。

 

編集の仕方

編集の手順は以下の通りです。

ここにボックスタイトルを入力
  1. 「外観」→「テーマエディター」→function.phpファイルを開く
  2. 文末に以下のソースコードを追加
if ( !(is_admin() ) ) {
    function replace_scripttag ( $tag ) {
        if ( !preg_match( '/\b(defer|async)\b/', $tag ) ) {
            return str_replace( "type='text/javascript'", 'async', $tag );
        }
        return $tag;
    }
    add_filter( 'script_loader_tag', 'replace_scripttag' );
}

 

PHPの基本

プログラムに関して全くの初心者である私はいきなり上記ソースを「functions.php」の最後に張り付けして、その結果全ページのヘッダーの上にソースコードがそのまま表れるという現象・エラーが起こってしまいました。

どうやら、PHPのキホンのキホンが出来てなかったようです。

PHPの記述のベースは以下のようになっており、「?>」以下に書いたら行けないのですね。「?>」の直前に記述したらエラーが解消しました。

<?php
（ここにソースを記述します）
?>

 

えぞりす
えぞりす
ちなみに「?>」のあとにスペースや改行を入れてもエラーになりました。初心者の方は注意です！

 

「WordpressテーマJINで作ったサイトの速度向上方法まとめ」まとめ

いかがでしたか？

WordPressテーマ「JIN」を使っていると、モバイルの速度に悩まされる方は多いと思います。

そしてモバイル速度の改善がなかなか難しい…

一筋縄では行かず、私もまだまだ道半ばですが、これからより良い方法があればシェアしていきたいと思います。

 

関連記事