BLOG

最小限の作業でブログテーマ「JIN」高速化したい!!ステップごとに速度計測しています【PageSpeedInsights】

先日出先からこのブログ「エンジニア的方法論」を見る機会がありまして、

そうしたら月末で速度制限がかかっていたのもありますが、

待ってられなかった。

自分のブログなのに内容読まずに離脱してしまいました。笑

こりゃ誰も読んでくれないわ。と思いましてブログの高速化を思い立ったわけです。

色々な高速化についてのブログを読み漁りましたが、どれも最初と、いろいろ高速化した後の最後しか速度を表示してくれてないんです。

どれが一番効いたの???と思いまして、私のブログは高速化していく途中段階も記録しておこうと思いました。

速度計測は「Page Speed Insights」を使用しています。

ブログテーマ「JIN」高速化前

導入前がこちら。モバイルが壊滅的なスコアです。

正直油断していました。

有料テーマだし細かいこと考えなくてもそれなりの数値になるだろうと。

でも現実はそんなに甘くはなかった。

JIN公式でも紹介されている「Autoptimize」

まずは手始めに手軽なプラグイン導入から行います。

「Autoptimize」はソースコードを圧縮してくれるプラグインです。

正直何がどうなるのかはさっぱりわかりませんが、簡単な設定だけで高速化できるのはありがたいです。

「Autoptimize」導入後がこちら

え!?ナニコレ!?パソコン表示が劇的な改善!

プラグインひとつでこんなに変わるんや。

せっかくかっこいいけど、「アニメーションOFF」

これは出来ればしたくないんですが、背に腹は代えられないということで早速

「外観」→「カスタマイズ」→「サイト基本設定」→「アニメーション機能を無効」

で設定変更してみました。

JINではページの切り替わりごとにアニメーションで表示されるんですが泣く泣く外します。

あれ?なんでモバイル下がってんの?謎。

ちょっとほかにもいろいろやってみて、場合によってはアニメーションは復活させてもよさそうですね。

JIN公式でも紹介されている「Xアクセラレータ」

2019.12.2現在はバージョン2が公開されています。

Xアクセラレータの設定を、ONにするだけ。XServer推奨設定です。

サーバー側でファイルをキャッシュ(保管しておき読み込み時間を短縮)されます。

こちらがその結果です

あれ?なんでパソコン下がってんの!?謎。

これも最終的に元の設定に戻すかも。

画像を圧縮してアップロード(まずはアイキャッチ画像だけ)

これは大本命なんです。

元はてなブログで運営していたので特にファイルサイズを考えないでアップロードしていたんですよ。

全記事やろうとすると膨大なのでまずはアイキャッチ画像のみ圧縮していきます

画像圧縮には「画像圧縮」を使います。

まただ!モバイル下がっとる!もうイヤ!

パソコンはコツコツと良くなってきているけど、モバイルが一向に改善しない。

やっぱり記事の中身まで圧縮しなきゃだめなのか・・・・・・・。

記事中身は時間かかるから追々することにします。まずはほかの方法を試します。

JINの初期フォントもかっこいいけど「フォントをデフォルト(sans-serif)」に変更

JINはとくに何もいじらなければ角ゴシック(Noto Sans)になっています。

これはこれで読みやすいしかっこいいんですけど。

これも背に腹は代えられない。

デフォルト(sans-serif)に変更します

こちらが測定結果

お!!!!パソコンの結果がかなりよくなってきた!!

モバイルの結果も目覚ましい改善です。

フォントって地味なように見えて意外と侮れないのね。

まとめ

さらっと調べた方法は試してみました。

モバイルがイマイチなのでちょっと突っ込んだところをいじらないといけないのかと思いますの。

とりあえず今回はここまでっ!

もしかしたら無料版はてなブログからの移行時に変なことになってるのかな。

まとめますと・・・・・

最小限の作業でJINを高速化

・「Autoptimize」の導入

・フォントをデフォルト(sans-serif)に変更

といった感じでしょうか。