【スポンサーリンク】

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

この記事はまだ途中です。なにかのヒントになれば うれしいです。

とりあえずのメモホームページ運用追記予定の話
  • PageSpeed Insights(PSI)の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。
  • これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。
  • 高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。
【スポンサーリンク】

ヘッダーロゴのサイズ

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

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

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

https://chiilabo.com/wp-content/uploads/2020/12/3d07311f4a1e778ec4b67105176c17a6-2.png

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

https://chiilabo.com/wp-content/uploads/2023/07/site-logo-mobile-h80.webp

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

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

/** サイトロゴの縦横比を指定する 2023-07-02*/
.logo-menu-button img.site-logo-image {
    width: 124px;
    height: 44px;
}
@media screen and (max-width: 1024px) {
	.tagline {
		display: none;
	}
}
QRコードを読み込むと、関連記事を確認できます。
[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」(片方だけでは暗黙)
【スポンサーリンク】
タイトルとURLをコピーしました