Cocoonを使っているとPageSpeed Insightsで「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあります。
この原因の一つはボックスメニューなど特定のウィジェットを使っている場合。
対処法を以下に記します。
対処法１ CSSで指定する
一つはCSSで指定する方法です。
ここではボックスメニューウィジェットを例にとります。
サイト画面でF12を押します。
ボックスメニューのアイコンを右クリックして検証を押します。
すると、CSSセレクタがわかります。
子テーマのstyle.cssに次の記述をします。
#box_menu-【調べた番号】 .box-menu-icon img{
width:60px;
height:60px;
}
IDセレクタ（#box_menu-【調べた番号】）がないとサイト全てのボックスメニューアイコンに適用されてしまいます。
御注意ください。
対処法２ カスタムHTMLウィジェットを使って直接指定する
環境によっては前項の方法で解決できない場合もあります。
その場合は追加でカスタムHTMLウィジェットを使って直接指定します。
同様にボックスメニューを例として説明します。
「外観」→「ウィジェット」を開き「カスタムHTML」ウィジェットを設置します。
ボックスメニューウィジェットの方は後で削除しますから、その上下どちらかに設置するのがいいでしょう。
サイト画面をChromeで開き、ボックスメニュー上で右クリックして「検証」をクリックします。
当該要素の上で右クリックします。
この場合でしたら、下の記述です。
div class="box-menus no-icon"
「copy」→「copy outer HTML」をクリックします。
先程の「カスタムHTML」にコピペします。
imgタグ全てに次の記述を加えます。
width="（画像サイズ）" height="（画像サイズ）"
注意点として、Retina対応にしている場合は倍の数字を入れてください。
60×60なら120×120となります。
（もちろん画像ファイル本体の解像度も倍である必要あり）
まとめ
無事に解決できたでしょうか？
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。