WordPress

ワードプレスで重すぎるページを少し改善

最近になって「このブログ、表示に時間かかるなぁ〜」と気づき始めました。(気づくの遅い)

まだ100記事にもいってないのにこの重さはイカンです。

ページ読み込みの速さはサイトの順位にも影響するとかしないとか…。

 

というわけで

本間
ブログのパフォーマンス改善します!

 

PageSpeed Insightでまさかのモバイル評価18(´д`;)

まずは現状のページがどんなもんなのか確認する必要があります。

Googleが提供している PageSpeed Insight というページ計測ツールがありますのでそれで確認。

 

PageSpeed Insight

 

当ブログでビュー数の多めのページ「DS218playでメディアサーバーを使えるように設定する(https://free40.net/setting-ds218play/)」で計測してみます。

DS218playでメディアサーバーを使えるように設定する

続きを見る

アクセスが多いページかつ、画像が多いページなのでピックアップしました。

ここが改善できれば他のページにも応用できそうです。

 

そして実行した結果がコレ・・・。

PageSpeed Insight の評価がえらいことに・・・

 

本間
・・・

 

まさかの18です。

いちおう100点満点ですのでアカンというのは一目瞭然ですね・・・。

(ちなみに高校生の時の模試で200点満点の英語で15点を取ったことがあります)

 

これはアカン、これはアカンでぇ!

 

とりあえず PageSpeed Insight で改善策も一緒に表示されるのでこれを見つつ試行錯誤していきます。

 

画像を軽くする

とりあえず最初に頭をよぎったのが「画像が重い」でしたのでこれを何とかしようかと思います。

該当のページにはPNG形式のスクリーンショット画像が多数あって容量が結構おおきい。

確認してみたら軽くても100KB超、1MB超の画像もありました(´д`;)

 

いろんなサイトを確認してみると100KB超えたらあかん、という指標(?)もあるようですのでまずは画像サイズを軽くしないといけません。

 

スクリーンショット画像を見るとグラデーションがかかっているのが多いのでJPEGのほうがええんじゃなかろうか、ということでJPEGに変換しました。

ポイント

JPEGは写真のような色味がはっきりしていない画像に適した形式です。ロゴとか色の区別がはっきりしたものはPNGにするとよいです。

 

変換にあたっては「PNG JPG 変換」というサイトを使いました。

Gimpとかでも変換できますが手間がかかりますのでこのサイトで変換します。

このサイトはけっこう高圧縮率で効率よく変換してくれるっぽい。

 

まずはサイトにアクセスします。

PNG JPG 変換(https://png2jpg.com/ja/)

PNG to JPG に移動する

 

あとはJPEG変換の枠に変換したい画像をドラッグアンドドロップで放り込むだけ!

「ファイルをここにドラッグ&ドロップしてください。」にファイルをドラッグ&ドロップします。

めっちゃ簡単です。

「ファイルをここにドラッグ&ドロップしてください。」にファイルをドラッグ&ドロップ!

 

ぐりぐりっと変換してくれます。

ぐりぐりっと変換。数秒で完了。

 

JPEGに変換できました!

JPEGに変換完了!

 

変換後の容量は格段に減りました。

PNG→JPEG変換で容量が激減!

1,435KB が 60KBになってたりしますね( ゚ ω ゚ ) ! !10%以下・・・。

 

これをワードプレスにアップして記事内の画像を置き換えます。

この置き換えが実はいちばん時間かかりました(´д`;)

ちなみにワードプレスの画像置き換えは Enable Media Replace というプラグインを使っています。

 

ワードプレスの遅延読み込みプラグイン Lazy Load by WP Rocket をインストール

画像数が多いので最初にぜんぶ読み込むと時間がかかってしまいます。

最初にページを表示したときに見えていない部分(ページの下のほうとか)の画像を読まないようにしてくれる LazyLoad というプラグインがワードプレスにはあります。

ページがスクロールされて画像が見える位置に来て始めて読み込まれるようにしてくれます。

 

ワードプレス管理画面のプラグインの新規登録画面へ進みます。

キーワード欄に「lazy load」と入れると出てきます。

この中で Lazy Load by WP Rocket というやつをインストールします。

ワードプレスプラグインLazy Load by WP Rocketをインストール

 

インストールしたら「有効化」ボタンを押してプラグインを有効にします。

ワードプレスプラグイン Lazy Load by WP Rocket を有効化

 

有効にしたら今度は設定です。

設定の「LazyLoad」から、上の Image にチェックを入れて一番下の「SAVE CHANGES」ボタンを押して保存します。

ワードプレスプラグイン Lazy Load by WP Rocet の設定

 

これで Lazy Load の設定完了です!

 

Webフォント辞める(´д`;)

Webフォントを設定する記事を書いたにもかかわらず重そうですのでやめます。

好きなフォントでやりたいのもありますが、サイトの表示に影響を出してまですることでもないという判断です。

 

WebフォントはAFFINGER5で設定していたのでその設定を外します。

ワードプレスの管理画面でAFIINGER管理にいきます。

「デザイン」の一番下の Googleフォントの欄をご覧ください。

AFFINGER5管理のGoogleフォント設定

 

全部からっぽにします。チェックも外します。

AFFINGER5管理のGoogleフォント設定をぜんぶ外す!

 

もしかするとこれが一番効果あるかも・・・(確証なし)

フォントって地味に容量あるし。

 

結果は・・・少し改善

さぁ、再度 PageSpeed Insight で計測します。

・・・ドキドキ。(実はそんなにドキドキしてない)

 

THE 改善。

 

おお!

だいぶマシになったんではないでしょうか。

18 → 41だと体感全然違うんとちゃいますか。

どうですか。

違いますか。

どうですか。

 

実際にスマホでこのページを見てみたら前より全然速くなった(気がします)。

 

なんにせよ

今回は比較的かんたんな対応で改善しました(少し)。

とりあえず激重(げきおも)な状態は避けることができたんではないかと思っております。

 

アクセスの多いページから PageSpeed Insight で確認して改善していくのがいいでしょう。

いつか PageSpeed Insight の評価を80とかにしたい!

 

関連記事
WING(AFFINGER5)で記事一覧の文字色を変更する

続きを見る

 

  • この記事を書いた人
本間 具郎

本間 具郎

1977年生まれ。大阪在住。フリープログラマ。1人の妻、2人の娘と同居。 2018年に独立。 仕事の時間を半分にしたいなぁ。 プロフィールへ

-WordPress

Copyright© 40歳でフリー転身 , 2020 All Rights Reserved.