Jbmedia表示速度の最適化のためにやったこと【Jetboyサーバ】

ここではJbmediaの1ページを少しでも早く表示させる「高速化」に際して取り組んだことをまとめておきます。WordPress5.3.2、Albatrossテーマ、プラグイン約26個使用、連動型広告ありの状況でどこまで出来るか試しました。特段技術的な操作はせず、WordPressから簡単にできる部分だけで調整しました。ご了承ください。

 

目次

速度調整前の「Jbmedia」の速度

GTMetrixはDスコア

GTMetrixで「D」スコアですが、言い訳をすれば画像が重いのと、広告が重いだけでした。2017年の記事でメンテナンスや調整不足があり、横幅1920pxのアイキャッチ画像を貼り付けているようなものもありました。連動型広告は1ページ内に3つ程度出るようにしているつもりですが、自動広告の関係と、表示される広告によって若干遅くなります。

 

PSIは残念な感じに

案の定PagespeedInsightsでも速度は残念な感じになりました。とはいえ、ギリギリ中速を出せているのでスピードインデックスではマイナスは…、避けられているはずです。FCPが3秒を超えるとSearch Consoleでエラー警告が出てしまうので、初回ペイントとロードするデータ量はできるだけ減らしておきたいところです。

 

驚いたのはパソコン版の速度スコアでした。PCページではスコアが95出ていて、基本的な速度調整はできているような印象です。レスポンシブにする段階で遅くなっているようなので、なんとか調整して少しでも早くしたいです。

 

ただし、広告はどうしようもない部分なので、多少の妥協も必要かもしれません。

 

Web担当者Forumにもお叱りを受ける

表示完了にかかった全体の時間は10秒でした。実はJetboyのデモサイトよりは早いのですが、もっと早くしたいところです。夕方8時に測定したため、という言い訳をしたいですが、せめて5秒から8秒くらいにはおさめたいところです。

 

EWWW Image Optimizerの最適化設定

WebP変換をONに|Htaccess編集

これは最初からWebPで画像をアップロードすればいいというのも頷けますが、長年運営していたサイトで、後から出てきた規定に合わせるのは大変で、無理があります。また、セキュリティ設定、WAFの関係でWebPをアップロードできない環境もあるため、少し負荷をかけることにはなりますが「EWWW」を使うことにしました。

 

WebPへの変換をONにして、指定されたコードをHTACCESSに書き込めば設定は完了します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

 

コードは、HTACCESSの一番上に書き込まないと反応していないこともあります。ワンクリックで挿入もされるようですが、記載箇所の調整が必要な可能性もあるのでHTACCESSの調整もしたほうが良いかもしれません。

 

WordPressのメニューから「メディア」にオンマウスして表示される「一括最適化」も画面の指示に従って行いましょう。

 

イージーモードから「遅延読み込み」をONに

画像の遅延読み込みは「BJ Lazy Load」や「A3 Lazy Load」でも設定できますが、EWWWにも備わっている機能でも問題はありません。画像が多い場合には微調整できる「A3 Lazy Load」が便利ですが、今回はEWWWの「イージーモード」から「遅延読み込み」にチェックを入れて設定しました。

 

Autoptimizeの最適化設定

Js・CSS・HTML全てチェック

サイト構成上、相性の良いプラグイン「Autooptimize」でJs、CSS、HTMLを圧縮させました。この操作でページの表示が崩れることがあるのでCSSの圧縮は特に気をつけましょう。もし、崩れてもチェックを外せばたいていは元に戻るので、やってみて色々工夫すると良いでしょう。

 

WordPressで設定したい場合は、最初にWordPressをインストールしたら、1記事、写真やGoogleMap、YouTube動画の埋め込みなどを施した状態で公開し、ページが崩れないかどうか試すのがおすすめです。テーマも最初から色々吟味したいところですが、後からテーマやデザインはきっと変えたくなりますので、シンプルなコンテンツにする心がけをしておくと後がラクです。

 

「追加」よりフォントを非同期に

Autooptimizeの設定「追加」からフォントの読み込みを非同期にします。これで少しだけ余計なCSSを読み込まなくなるはずなので、調整しつつ、デザインや文字の雰囲気が変わりすぎないか、スマートフォンのキャッシュを消して確かめながら作業しましょう。

 

iPhoneならばSafariのシークレットモードで、パソコンならばGoogleChromeのシークレットウィンドウで適当なページを開いてチェックするとよいでしょう。WordPress側でもキャッシュを消しながら更新、リロードを挟めばたいていは変わった設定が反映されるはずです。

 

P3 (Plugin Performance Profiler)でチェック

P3だけ重い印象

WordPressの反応が遅い時に試すのがこのP3ですが、ひとまず余計なプラグインが邪魔をしていないかチェックしました。

 

ここまでシンプルに表示されるのも珍しいですが、重いのはP3自身だけでした。

 

重さの要因は広告関連っぽい

WordPressの本体、テーマ、P3プラグインだけが重い状態です。ほとんど問題はなさそうです。

 

プラグインの調整は特にしなくても良さそうだということで、メンテナンス、簡単な高速化作業は終了です。

 

メンテ後の「Jbmedia」の速度

GTMetrixはあんまり変わらず

メンテナンスをしたあとのJbmediaのGTmetrix測定結果は少し向上しただけで結局Aスコアは取れませんでした。広告を外したり、そもそもテーマを変えたりしないと無理でしょう。

 

PSIが少し改善された

モバイルページはわずかに改善、FCPが2.1秒でグリーン。余計な写真を入れないようにしていればこの速度は維持できそうです。あとはSNSシェアの読み込みなどを減らしてしまえば少しは軽くなるかもしれません。

 

パソコンページでは申し分ない速度が出ています。ただし、体感速度ではスマートフォンのほうが反応が早く、パソコンのほうが遅い印象です。Jetboyサーバが重いのではなく、ブラウザ側でページを構成するのに時間がかかっている気がします。サイドバーのウィジェットなどを減らすか、アイキャッチ画像下の広告をなしにすると少し早くなりそうです。

 

Web担当者Forumは少し改善

 

秒数にして約3秒ほど短縮できましたが、劇的な改善ではありません。キャッシュの関係で、2回目の測定ではブラウザキャッシュだけで表示されていましたが、結局6秒ほどかかっている状態でした。

 

これは広告が重いと考えるのが良いかもしれません。測定ページには画像はアイキャッチ画像しかなく、アイキャッチ画像の横幅も600px、記事は文字ばかりの状態なので、そこまで遅くなる理由がありません。この辺りは広告枚数を減らす検討が必要ですが、1ページに3枚程度しか広告を置いていないので、広告の読み込み位置を買えるくらいが無難でしょう。

 

感想:広告が重い

結論として、重いのは広告でしょう。Jetboyのサーバが速度を遅くしているというような心配はありませんでした。自分のサイトのWordPressテーマとプラグインの工夫をすればよいだけなので、Jetboyサーバは個人的に高評価です。

 

あとは、Jetboyのサーバ管理画面から出来る限りの速度設定をして、ほんの少しでも早くできれば十分でしょう。結局はテーマ、広告で重くなるので、このサイト「Jbmedia」以外のサイトを開く時はJetboyでテーマを吟味してから、できるだけシンプルなサイトにしようと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です