/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。
手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。
さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。
/** Geminiが自動生成した概要 **/
Chrome 85からCSSの`content-visibility: auto;`が導入され、画面外コンテンツの遅延読み込みが可能に。表示速度向上とSEO対策が目的です。筆者は自身のサイトで、`.content-lazy-always`で常時遅延、`.content-lazy`でPCとスマホで表示/遅延を切り替える形で実装。記事一覧の下部や詳細ページのフッターなどに適用しました。しかし、元々読み込みが速かったため、具体的な速度改善効果は確認できなかったとのことです。
/** Geminiが自動生成した概要 **/
SEO対策として、画像の遅延読み込み（Lazy Load）はページ表示速度の改善に有効です。ファーストビュー以外の画像は、ページ全体が表示されてから読み込まれます。重い画像や動画を遅延させることで、表示速度が向上します。
実装は、imgタグに`loading="lazy"`属性を追加するだけです。Chrome 75以降で対応しており、他ブラウザではjQueryプラグインが必要ですが、当サイトではjQueryによる速度低下を避けて使用していません。
PC表示では効果が見られませんでしたが、スマホ表示ではファーストビュー外に画像が配置されるため、Lazy Loadの効果が大きいです。
関連記事として、SOY CMSとSOY Shop向けにLazy Loadプラグインが紹介されています。
/** Geminiが自動生成した概要 **/
筆者はかつてSOY CMSの開発元で働いていたが、開発元が農業事業に転換する際に退職し、以来個人でSOY CMS/Shopの開発を続けている。開発継続の理由は、SOY Shopを利用するユーザーのビジネスを支える責任感と、カスタマイズ依頼による収入で生活が成り立っているため。一方で、開発元の権利所有により公式の場での活動が制限され、SOY CMSの衰退を危惧している。生活のため、新規ユーザー獲得よりも既存ユーザーの売上向上に注力し、新機能紹介プラグインなどを開発。自身のサイト運営を通してSOY CMSの魅力を伝えることで、間接的な普及も目指している。開発元にはGitHubでの公開とユーザー主体の運営への移行を希望し、ユーザーからの寄付や支援に感謝しつつ、非公式ながらも開発を継続する意思を表明している。