- PageSpeed Insights(PSI)の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。
- これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。
- 高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。
◆ タップできる目次 ◆
ヘッダーロゴのサイズ
ヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。
「ヘッダーロゴサイズ」の幅を、空白から 226px にしました。

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

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

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

モバイルヘッダーメニューのロゴサイズ
モバイルヘッダーメニューのロゴサイズは、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風スタイル第2弾!モバイルメニューを編集
こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインは モバイルメニューです。 どうすれば...

[Cocoon]モバイルサイトフォントを17pxに変更した
これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。 そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。 1行あたりの文字数は、表示するスマホによ...

[WordPress] サイト高速化のために不要なプラグイン処理を減らした(Plugin Load Filter, Site Kit by Google)
ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。(「使用していない...
QRコードを読み込むと、関連記事を確認できます。
![[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」(片方だけでは暗黙)](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2023-07/seo-site-logo-image-size-fix/)