Font Awesomeと関連広告から決別！パフォーマンスが格段にUP！Material Iconsの採用

2021年7月のリニューアル。

写真を楽しむブログは表示スピードが落ちており改善が必要になりました。

Lighthouse Report Viewerによると以前よりパフォーマンスが落ちています。

可能な限り良いパフォーマンスにする為リニューアルしました。

ブログのパフォーマンスが落ちている原因究明と改善点を記載しておきます。

ブログのパフォーマンス

ブログのパフォーマンスで一番重要なのは表示スピード。

余計な事をしない限り、表示には問題ありません。

表示スピードに関しては余計な事をしなくても遅くなる事があります。

画像やマップ・映像の挿入と文章量やアイコン等々

様々な要因がありますが、当ブログは全て盛り込んだ内容になっている為問題点が多い。

良い状況の時もありましtが、なぜか全体的にパフォーマンスが落ちています。

Lighthouse Report Viewerで平均的な記事をテストします。

テストした記事は下記のページになります。

改善前の状況

現在の当ブログのパフォーマンスは大半が非常にマズイ状況です。

その中でも飛び抜けて悪かった記事をピックアップしてみます。

※画像は日本語に自動翻訳したものです。

今迄パフォーマンスの数値は60点以上であれば手を加えませんでした。

まず55点以下になった事が無かった為、テストして驚きです。

パフォーマンスが異常に低くなっています。

1回目の改善

Font AwesomeからGoogle Material Iconsへ移行。

これはテーマがGoogle Material Iconsを採用した為。

Font Awesomeを多用していた為、一括で変換しました。

Google Material Iconsへの移行の難点は表示できるブラウザが一部である事。

難点もありますが、スマホからのアクセスが多い為GoogleかSafariを中心にしています。

PCから非対応のブラウザで見る場合は諦めます。

次に画像の圧縮を今までより更に圧縮しました。

アイキャッチ画像はPCはトップ表示、スマホはファーストビューで見えない所に設置。

この改善でかなり良くなります。

問題点はアイコンよりも画像の圧縮率が最大の原因。

画像を見せるブログですが、ギャラリー的な感度が良い画像を諦めました。

原因を探っていく内に、広告が最大の原因である事が判明。

ただ広告表示はブログ運営に欠かせない為、諦めておりましたが…

あまり必要とされない関連広告のみを削除する事にしました。

第2回目の改善

1回の改善でも良かったのですが、テスト記事よりも膨大な要素の記事もあります。

もう少し探ってみる事にします。

やはりポイントとなるのは広告の表示です。

一番下まで見ないだろうと思われる関連広告を削除します。

概ね良好の為、暫くこの状態で様子を見る事にします。

その他の改善点

Google Mapの埋め込みは、現在LazyLoadが採用されているようです。

古いGoogleMapの埋め込みを現在のコードに変更する事で遅延表示になる為、多少スコアUPします。

ブログのパフォーマンス後記

以前から手を加えていないはずの記事のスコアダウンは意味不明です。

当ブログはプラグインも7個程度ですが、最低5個まで減らせます。

あと2個が減らせない訳は、旧Wordpressのウィジェットを使用したい等の問題。

PHPも最新バージョンですが、以前よりパフォーマンスが悪い評価はよく分からない。

コードの圧縮やその他の方法もありますが、表示が崩れる事があり採用していません。

キャッシュに関しても表示が崩れた状態のものがキャッシュされる事があります。

その為、ほどほどにしています。

いずれにしても大きく変化したのは関連広告の削除でした。

※自動広告は以前より外しています。

トップページのスコアが良いのはほぼ当たり前。

記事のパフォーマンスが良くてこそのブログですので、記事ごとの改善が必要です。

よりユーザビリティを考え、改善も進めたいと思います。

PCでご覧の場合は、AMP表示にして頂くとPCとスマホの違いが分かります。

できればスマホサイズでご覧ください。