333-contents-1920-19-6-shooting-plan

※各見出しはリンクになっています。

自由に撮る、こだわって撮る、楽しんで撮る
自分スタイルは様々なアイテムから得られるかも?

知らなかった事が身につくと
新しい事を発見でき、そこに喜びも伴う。

インスピレーションでスライダーを動かすと
1枚の写真が複数の作品になって生まれ変わる。

こんなものを撮ってみたい!
こんなふうに撮ってみたい!
思ったように撮れない時ほど写真を楽しめます。
道具と気づきで新しい作品が生まれます。

CONTENTS

Photograph

カメラ・レンズ・アプリ等写真情報
333-contents-1920-19-6-shooting-plan

※各見出しはリンクになっています。

計画を立てる時から撮影の楽しみは始まっている
足を運び、思い通りに撮れた喜びを味わいたい。

メジャーな撮影地だけでなく
何気なく訪れた地にこそ新しい景色が待っている。

なぜこんな失敗をする?
撮り慣れていても失敗はつきもの…(コラム)

ストレスが溜まったらカメラ片手に出かけてみよう
見慣れた景色の中にも気づいていない被写体が
撮ってほしいと待っているかもしれません。
写真仲間とでも良い、ひとりでも良い。

CONTENTS

Landscape

撮影地の紹介
333-contents-1920-19-6-shooting-plan

※各見出しはリンクになっています。

光に閉ざされた地で夜空を見上げると
星の多さに驚くことは間違いないだろう。

普段はあまり気にしないかもしれないけど
月を眺めている時は、リラックスできている。

流れ星を見る機会は少ないけれど
見る事ができると高揚した自分に気がつく。

夜空に横たわる天の川や流れ星が見られると
宇宙に近づいた感覚になるかもしれません。
忘れてほしくないのは見慣れている月
身近にあるものほど気にかけなくなりがちですね。

CONTENTS

Astronomical Observation and Photography

天体観測と撮影

previous arrow
next arrow
東京 週間天気予報

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

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

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

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

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

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

当サイトの記事内には
広告等のプロモーションが含まれています。

写真を楽しむブログ記事内の画像は無断で抜き取らないでください

ブログのパフォーマンス

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

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

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

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

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

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

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

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

改善前の状況

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

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

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

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

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

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

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

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

1回目の改善

Font AwesomeからGoogle Material Iconsへ移行。

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

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

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

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

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

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

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

check Font AwesomeからGoogle Material Icons
check アイコンを減らす
check 画像の圧縮
check スマホのアイキャッチ画像をトップに置かない

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

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

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

改善第1回目のパフォーマンス
check パフォーマンス:76点
check アクセシビリティ:94点
check ベストプラクティス:87点
check SEO:99点

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

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

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

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

第2回目の改善

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

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

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

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

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

改善第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とスマホの違いが分かります。

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

NEWS-写真を楽しむブログ

Posted by 小西 雅哉