最近になって「このブログ、表示に時間かかるなぁ〜」と気づき始めました。（気づくの遅い）
まだ100記事にもいってないのにこの重さはイカンです。
ページ読み込みの速さはサイトの順位にも影響するとかしないとか…。
というわけで
PageSpeed Insightでまさかのモバイル評価18(´д`;)
まずは現状のページがどんなもんなのか確認する必要があります。
Googleが提供している PageSpeed Insight というページ計測ツールがありますのでそれで確認。
当ブログでビュー数の多めのページ「DS218playでメディアサーバーを使えるように設定する（https://free40.net/setting-ds218play/）」で計測してみます。
-
DS218playでメディアサーバーを使えるように設定する
続きを見る
アクセスが多いページかつ、画像が多いページなのでピックアップしました。
ここが改善できれば他のページにも応用できそうです。
そして実行した結果がコレ・・・。
まさかの18です。
いちおう100点満点ですのでアカンというのは一目瞭然ですね・・・。
（ちなみに高校生の時の模試で200点満点の英語で15点を取ったことがあります）
これはアカン、これはアカンでぇ！
とりあえず PageSpeed Insight で改善策も一緒に表示されるのでこれを見つつ試行錯誤していきます。
画像を軽くする
とりあえず最初に頭をよぎったのが「画像が重い」でしたのでこれを何とかしようかと思います。
該当のページにはPNG形式のスクリーンショット画像が多数あって容量が結構おおきい。
確認してみたら軽くても100KB超、1MB超の画像もありました(´д`;)
いろんなサイトを確認してみると100KB超えたらあかん、という指標（？）もあるようですのでまずは画像サイズを軽くしないといけません。
スクリーンショット画像を見るとグラデーションがかかっているのが多いのでJPEGのほうがええんじゃなかろうか、ということでJPEGに変換しました。
ポイント
JPEGは写真のような色味がはっきりしていない画像に適した形式です。ロゴとか色の区別がはっきりしたものはPNGにするとよいです。
変換にあたっては「PNG JPG 変換」というサイトを使いました。
Gimpとかでも変換できますが手間がかかりますのでこのサイトで変換します。
このサイトはけっこう高圧縮率で効率よく変換してくれるっぽい。
まずはサイトにアクセスします。
PNG JPG 変換（https://png2jpg.com/ja/）
あとはJPEG変換の枠に変換したい画像をドラッグアンドドロップで放り込むだけ！
「ファイルをここにドラッグ＆ドロップしてください。」にファイルをドラッグ＆ドロップします。
めっちゃ簡単です。
ぐりぐりっと変換してくれます。
JPEGに変換できました！
変換後の容量は格段に減りました。
1,435KB が 60KBになってたりしますね( ﾟ ω ﾟ ) ! !10％以下・・・。
これをワードプレスにアップして記事内の画像を置き換えます。
この置き換えが実はいちばん時間かかりました(´д`;)
ちなみにワードプレスの画像置き換えは Enable Media Replace というプラグインを使っています。
ワードプレスの遅延読み込みプラグイン Lazy Load by WP Rocket をインストール
画像数が多いので最初にぜんぶ読み込むと時間がかかってしまいます。
最初にページを表示したときに見えていない部分（ページの下のほうとか）の画像を読まないようにしてくれる LazyLoad というプラグインがワードプレスにはあります。
ページがスクロールされて画像が見える位置に来て始めて読み込まれるようにしてくれます。
ワードプレス管理画面のプラグインの新規登録画面へ進みます。
キーワード欄に「lazy load」と入れると出てきます。
この中で Lazy Load by WP Rocket というやつをインストールします。
インストールしたら「有効化」ボタンを押してプラグインを有効にします。
有効にしたら今度は設定です。
設定の「LazyLoad」から、上の Image にチェックを入れて一番下の「SAVE CHANGES」ボタンを押して保存します。
これで Lazy Load の設定完了です！
Webフォント辞める(´д`;)
Webフォントを設定する記事を書いたにもかかわらず重そうですのでやめます。
好きなフォントでやりたいのもありますが、サイトの表示に影響を出してまですることでもないという判断です。
WebフォントはAFFINGER5で設定していたのでその設定を外します。
ワードプレスの管理画面でAFIINGER管理にいきます。
「デザイン」の一番下の Googleフォントの欄をご覧ください。
全部からっぽにします。チェックも外します。
もしかするとこれが一番効果あるかも・・・（確証なし）
フォントって地味に容量あるし。
結果は・・・少し改善
さぁ、再度 PageSpeed Insight で計測します。
・・・ドキドキ。（実はそんなにドキドキしてない）
おお！
だいぶマシになったんではないでしょうか。
18 → 41だと体感全然違うんとちゃいますか。
どうですか。
違いますか。
どうですか。
実際にスマホでこのページを見てみたら前より全然速くなった（気がします）。
なんにせよ
今回は比較的かんたんな対応で改善しました（少し）。
とりあえず激重（げきおも）な状態は避けることができたんではないかと思っております。
アクセスの多いページから PageSpeed Insight で確認して改善していくのがいいでしょう。
いつか PageSpeed Insight の評価を80とかにしたい！
-
WING(AFFINGER5)で記事一覧の文字色を変更する
続きを見る
