Google BardでCSSを最適化する
Googleの文章生成AI「Bard」の便利な使い道、面白い使い道として既存のCSSを最適化をしてみました。
CSSを最適化する
以下は「Bard」で既存のCSSを最適化をしてみた結果になります。
以下のCSSを最適化して下さい。
以下のCSSを最適化して下さい。
p {
padding: 10px 0;
margin: 10px;
}
h2 {
padding: 10px 0;
margin: 10px;
}
h3 {
padding: 10px 0;
margin: 10px;
}
#breadcrumb-area {
padding: 10px 0;
margin: 10px;
}以下のCSSは、次の方法で最適化できます。
- 同じプロパティの値を同じセレクターに適用する
- セレクターを再編成して、より効率的なコードにする
- 不要なCSSを削除する
最適化されたCSSは次のとおりです。
p, h2, h3, #breadcrumb-area {
padding: 10px 0;
margin: 10px;
}
このCSSは、元のCSSよりも効率的で、ページの読み込み時間を短縮することができます。
とりあえず簡単な最適化は問題なく実行する事ができました。
また、長めのCSSだと変化がない場合もあります。
ChatGPTでも試してみましたが、現状ではChatGPTの方が一歩先を進んでいるかも知れません。
ただ、複数回答されるうちのひとつには、Googleらしく色やサイズなどもSEO目線で調整してくれているものもあり、今後、長文に対応するなど強化された場合、優秀なツールとして力を発揮しそうです。