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

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

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

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

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

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

※Lighthouse Report Vieweの点数は記載時と変化しますのでご了承ください。

ブログのパフォーマンス

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

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

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

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

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

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

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

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

改善前の状況

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

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

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

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

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

改善前のパフォーマンス
check パフォーマンス:25点
check アクセシビリティ:88点
check ベストプラクティス:87点
check SEO:99点

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

第2回目の改善

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

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

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

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

改善第2回目のパフォーマンス
check パフォーマンス:80点
check アクセシビリティ:94点
check ベストプラクティス:93点
check SEO:100点

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

その他の改善点

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

GoogleMapの埋め込み
LazyLoadのコードに変更

遅延表示になる為スコアUP!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- CHECK -
Facebookページもチェック!

お知らせ

Posted by pix-524