/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。
手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。
さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。
/** Geminiが自動生成した概要 **/
記事では、PageSpeed Insightsのユーザー補助スコアを100点にするための取り組みが紹介されています。
具体的には、記事タイトル下のカテゴリ名のリンクで指摘されていた「背景色と前景色には十分なコントラスト比がありません」という問題を解決しています。
解決策としては、WebAIMのConstract Checkerを用いて、背景色と文字色のコントラスト比を調整しました。スライダーで色を調整し、Passになるまで繰り返した結果、問題を解消できました。
ただし、サムネイル画像の低解像度に関する指摘は未解決で、別の対応策を検討する必要があるとのことです。
/** Geminiが自動生成した概要 **/
2007年リリースのSOY CMSには、あまり知られていない機能が存在します。それは、プラグイン管理画面に表示される各プラグインのアイコンをカスタマイズできる機能です。
初期状態ではすべてのプラグインのアイコンが豆蔵アイコンになっていますが、128x128ピクセルのGIF画像を「icon.gif」というファイル名でプラグインディレクトリに配置することで、任意のアイコンに変更できます。
これはリリース当初から存在する機能でしたが、当時のプラグイン数は少なく、あまり活用されませんでした。しかし、10年以上経過しプラグイン数が増加した現在、この機能を活用することで、目的のプラグインを見つけやすくなる可能性があります。
/** Geminiが自動生成した概要 **/
この記事では、SOY CMSで外部CSSを自動的にインライン化し、ページ表示速度を向上させる方法を紹介しています。通常、外部CSSファイルは別途リクエストが必要ですが、これをHTML内に直接埋め込むことでHTTPリクエスト数を減らし、レンダリング速度を改善します。
具体的には、cms:moduleタグとPHPを組み合わせた手法を用います。通常表示時は<link>タグで外部CSSを読み込みますが、SOY CMS経由での出力時は、PHPでCSSファイルの内容を読み込み、圧縮・整形した上で<style>タグ内に埋め込みます。これにより、SOY CMSを通さない場合は外部ファイル、SOY CMSを通す場合はインラインCSSと表示方法を自動で切り替えます。
この方法の利点は、CSSの管理を外部ファイルで行いつつ、出力時にはインライン化のメリットを享受できる点です。さらに、PHPでCSSの内容を操作できるため、ページごとに必要なCSSのみを出力するなど、転送量を最適化することも可能です。結果としてCore Web Vitalsの改善にも繋がります。
/** Geminiが自動生成した概要 **/
HTMLScriptElement は `<script>` タグを制御するインターフェース。`src` 属性で外部スクリプトを読み込み、`async` 属性を設定すると解析を妨げずに非同期でスクリプトを実行、`defer` 属性はHTML解析完了後に実行、`type` 属性でスクリプト言語を指定。`text` 属性に直接コードを記述も可能。`onload` イベントで読み込み完了を検知、`onerror` でエラー処理。`crossorigin` 属性はCORSリクエストを制御。`integrity` 属性はSubresource Integrity を使用し、読み込んだスクリプトの整合性を検証。`referrerpolicy` はリファラーヘッダーを制御。`nomodule` はES Modulesをサポートしないブラウザでスクリプトを実行。
/** Geminiが自動生成した概要 **/
SOY CMSのCore Web Vitals改善用プラグイン「Cumulative Layout Shift」にpicture要素設定が追加されました。 picture要素はレスポンシブ画像を実現するHTMLタグで、画面幅に応じて最適な画像を出力します。プラグインでは、imgタグにsize属性を自動挿入するか、pictureタグで囲うかを選択できます。ただし、既にHTMLテンプレートでpictureタグを使用している場合は正常に動作しないため注意が必要です。この機能はsaitodev.co/soycms/で提供されるパッケージに含まれています。画像のwidthが小さい場合はsize属性が自動挿入されます。
/** Geminiが自動生成した概要 **/
Core Web Vitalsは、ユーザーエクスペリエンスを測定する重要なSEO指標です。特にLargest Contentful Paint（LCP）はページの読み込み速度を、First Input Delay（FID）はインタラクティブ性、Cumulative Layout Shift（CLS）は視覚的な安定性を評価します。これらを改善することで、ユーザーの離脱率を減らし、SEOランキング向上に繋がります。画像最適化はCore Web Vitals改善の有効な手段で、Guetzliは高品質を維持しながらファイルサイズを大幅に削減できるツールです。Guetzliを用いることで、LCPの改善に大きく貢献し、結果としてWebサイトのパフォーマンス向上とSEO対策に繋がります。
/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。