[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）

• PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。
• これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。
• 高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。

1. ヘッダーロゴのサイズ

ヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。
「ヘッダーロゴサイズ」の幅を、空白から 226px にしました。

ついでに、「適切なサイズの画像」でも、サイトロゴがあったので修正しています。

毎回、大きい画像（1364 × 483）を読み込んで、小さく表示していたので非効率です。

サイズ変更済み（226 x 80）の画像を用意してロゴに設定しました。

2. モバイルヘッダーメニューのロゴサイズ

モバイルヘッダーメニューのロゴサイズは、CSSで変更しました。

/** サイトロゴの縦横比を指定する 2023-07-02*/
.logo-menu-button img.site-logo-image {
    width: 124px;
    height: 44px;
}
@media screen and (max-width: 1024px) {
	.tagline {
		display: none;
	}
}

こちらもどうぞ。

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインは モバイルメニューです。 どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。 モバイルメニューボタンをいろいろ変更した 上部バーはすっきりさせました。 下部バーはLINE...

chiilabo.com

[Cocoon]モバイルサイトフォントを17pxに変更した

これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。 そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。 １行あたりの文字数は、表示するスマホによって異なりますが、自分のスマホ（Pixel 5：1080x2340）で確認すると、18文字になりました。 このフォントサイズを選んだのは、「note 」や「ほぼ日刊イトイ新聞」などの読みものメインのサイトを参考にしました。 以前に、糸井重里...

chiilabo.com

[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google）

ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。（「使用していないJavaScriptの削減」が 2.4 s ➤ 0.4 s に） プラグインの取捨選択は、サイト高速化にとってもオススメだね。 ページの読込みが遅い気がする【54】 モバイル端末でのトップページの読込みがやや遅い気がします。 （2023/0...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。