/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。
/** Geminiが自動生成した概要 **/
SOY CMS用のAVIF変換プラグインがリリースされました。このプラグインは、PHPのimageavif関数を利用し、ページ内のJPG/PNG画像をAVIF形式に変換、HTMLを書き換えます。AVIFは次世代の画像フォーマットで、高画質・低容量を実現します。プラグインはimageavif関数が使用可能なPHPバージョンで動作します。ダウンロードは公式サイトからどうぞ。なお、SOY Shopでは類似機能が「画像フォーマット変換プラグイン」に搭載済みです。
/** Geminiが自動生成した概要 **/
SOY CMS用WebP変換プラグインが登場！ページ内のJPG/PNG画像をWebPに変換し、HTMLを書き換えます。WebPは次世代画像フォーマットで、ファイルサイズを小さくしながら画質を維持します。PHPのimagewebp関数が使用可能な環境が必要です。ダウンロードは公式サイトからどうぞ。なお、SOY Shopには同様の機能を持つ「画像フォーマット変換プラグイン」が存在します。
/** Geminiが自動生成した概要 **/
記事では、PageSpeed Insightsのユーザー補助スコアを100点にするための取り組みが紹介されています。具体的には、記事タイトル下のカテゴリ名のリンクで指摘されていた「背景色と前景色には十分なコントラスト比がありません」という問題を解決しています。解決策としては、WebAIMのConstract Checkerを用いて、背景色と文字色のコントラスト比を調整しました。スライダーで色を調整し、Passになるまで繰り返した結果、問題を解消できました。ただし、サムネイル画像の低解像度に関する指摘は未解決で、別の対応策を検討する必要があるとのことです。
/** Geminiが自動生成した概要 **/
SOY CMS用のユーザー補助プラグインが開発されました。このプラグインは、画像のalt属性が空の場合に自動でファイル名を挿入することで、WebアクセシビリティとSEOを向上させます。PageSpeed Insightsで新たに導入されたユーザー補助項目に対応し、既存記事の修正や新規記事作成時の負担を軽減します。プラグインはサイト管理者の負担を軽減し、ウェブサイトのアクセシビリティ向上に貢献します。ダウンロードは[https://saitodev.co/soycms/](https://saitodev.co/soycms/)から可能です。
/** Geminiが自動生成した概要 **/
SOY CMSのブロック（ラベル、プラグイン）に、カスタムフィールドの拡張ポイント実行有無を設定する機能が追加されました。従来、カスタムフィールドが増えるとブロックのパフォーマンスが低下する問題がありました。今回の更新により、不要なカスタムフィールドの値取得を抑制し、表示速度の改善が可能となります。例えば、新着記事一覧でタイトルとリンクのみ表示する場合、カスタムフィールドの取得をオフにすることで効率化できます。今回の更新は、長期間運用しているサイトでカスタムフィールドが肥大化している場合に特に有効です。ダウンロードはsaitodev.co/soycms/から可能です。
/** Geminiが自動生成した概要 **/
本記事では、SOY CMSのフロントコントローラにおける例外処理の効率化について解説しています。従来のtry-catchによる大域的な例外処理は、パフォーマンスに影響を与える可能性がありました。そこで、例外処理を廃止し、エラー判定を明示的に行うことで、処理の軽量化を目指しました。具体的には、エラー発生時に変数にExceptionオブジェクトを格納し、処理の最後にエラーの有無を判定して対応する処理を行うように変更しました。この変更による目立った速度向上は確認されませんでしたが、ブロックを多用した複雑なサイトでは効果を発揮すると期待されます。
/** Geminiが自動生成した概要 **/
SOY CMSのカスタムフィールドアドバンスドとサムネイルプラグインの表示速度改善に関する記事の要約です。記事では、多数の記事を表示する際に発生する表示速度の低下について、その原因と解決策が解説されています。主な原因は、記事ごとにカスタムフィールドの値を取得する際に、データベースへのアクセスが繰り返されるためでした。解決策として、記事に紐づくカスタムフィールドの値を全記事分一度に取得し、必要な値のみに絞り込むことで、データベースアクセスを削減しました。この改善により、特に記事数が50件や100件といった大量に表示する場合に、表示速度の向上が期待できます。
/** Geminiが自動生成した概要 **/
HTMLScriptElement は `<script>` タグを制御するインターフェース。`src` 属性で外部スクリプトを読み込み、`async` 属性を設定すると解析を妨げずに非同期でスクリプトを実行、`defer` 属性はHTML解析完了後に実行、`type` 属性でスクリプト言語を指定。`text` 属性に直接コードを記述も可能。`onload` イベントで読み込み完了を検知、`onerror` でエラー処理。`crossorigin` 属性はCORSリクエストを制御。`integrity` 属性はSubresource Integrity を使用し、読み込んだスクリプトの整合性を検証。`referrerpolicy` はリファラーヘッダーを制御。`nomodule` はES Modulesをサポートしないブラウザでスクリプトを実行。
/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。
/** Geminiが自動生成した概要 **/
PHPのOPCacheは、バイトコードをキャッシュしてパフォーマンスを向上させる機能。設定項目`opcache.revalidate_freq`はスクリプトの更新チェック頻度を制御する。デフォルトは2秒だが、CMSサイト等でPHPスクリプトの更新が少ない場合は、この値を大きくすることで更新チェックのオーバーヘッドを減らせる。設定変更は`php.ini`で`opcache.validate_timestamps`を有効化し、`opcache.revalidate_freq`を例えば86400（1日）に変更、サーバー再起動で行う。今回の検証ではパフォーマンスの顕著な差は見られなかった。
/** Geminiが自動生成した概要 **/
Chrome 85から導入されたCSSプロパティ`content-visibility: auto;`を利用してコンテンツの遅延読み込みを試みた。このプロパティは、コンテンツが画面に表示されるまでレンダリングを遅延させることでパフォーマンス向上に繋がる。具体的には、`<head>`タグ内にスタイルを記述し、遅延させたい要素に`.content-lazy`クラスを付与した。ファーストビューとなるPC表示時は`content-visibility: visible;`、スマホ表示時はメディアクエリで`content-visibility: auto;`を適用することで、表示状況に応じて遅延読み込みを制御している。さらに、常に遅延読み込みさせたい要素には`.content-lazy-always`クラスを付与し、`content-visibility: auto;`を適用した。サイトの読み込み速度が元々速かったため、今回の変更による効果測定は明確ではなかった。
/** Geminiが自動生成した概要 **/
SEO対策として、画像の遅延読み込み（Lazy Load）はページ表示速度の改善に有効です。ファーストビュー以外の画像は、ページ全体が表示されてから読み込まれます。重い画像や動画を遅延させることで、表示速度が向上します。実装は、imgタグに`loading="lazy"`属性を追加するだけです。Chrome 75以降で対応しており、他ブラウザではjQueryプラグインが必要ですが、当サイトではjQueryによる速度低下を避けて使用していません。PC表示では効果が見られませんでしたが、スマホ表示ではファーストビュー外に画像が配置されるため、Lazy Loadの効果が大きいです。関連記事として、SOY CMSとSOY Shop向けにLazy Loadプラグインが紹介されています。
/** Geminiが自動生成した概要 **/
HTMLの圧縮は、Webページの表示速度向上とデータ転送量削減に効果的なSEO対策です。HTMLソースコードには、可読性向上のために改行やタブが含まれていますが、これらは表示には不要なため、転送前に削除することでデータ量を減らせます。SOY CMSでは、HTML圧縮プラグインを利用することで、テンプレート編集時の可読性を維持しつつ、転送時には自動的にHTMLを圧縮できます。このプラグインは、HTMLキャッシュプラグインや静的化プラグインと併用することで、圧縮処理の負荷を軽減し、更なる高速化を実現します。HTML圧縮プラグインを含むパッケージはsaitodev.co/soycms/からダウンロード可能です。
/** Geminiが自動生成した概要 **/
SEO対策としてサイト滞在時間を増やす施策を行っている。記事の文量を増やすのではなく、一度のアクセスで複数記事を読んでもらうことを目指している。Google Analyticsでアクセス急上昇中の記事（例：「リン鉱石から考える未来のこと」）を分析し、記事末尾に関連する他記事へのリンクを追加することで、読者が他の記事にもアクセスする導線を増やし、サイト全体の平均滞在時間増加を狙う。アクセス増加の可視化は容易ではないが、読者の回遊促進による滞在時間増加を期待している。
/** Geminiが自動生成した概要 **/
サイバー攻撃の増加は深刻な問題であり、特にCMSを狙った攻撃は増加傾向にある。記事ではSOY CMSへの攻撃事例を通して、その脅威を具体的に示している。攻撃者は管理画面へのログインを試みたり、脆弱性を突いて不正アクセスを試みる。対策としては、管理画面のURLを変更したり、.htaccessでアクセス制限をかけることが有効である。また、WAFの導入やセキュリティプラグインの活用も推奨されている。常に最新の情報に注意し、適切なセキュリティ対策を実施することで、被害を最小限に抑えることが重要である。
/** Geminiが自動生成した概要 **/
PageSpeed Insightsのスコア向上のため、公式SNSボタンを自作のものに置き換えた。公式ボタンはJavaScriptを使用し、ページ速度に悪影響を与えていた。記事詳細ページのTwitterボタンを例に、自作方法を紹介。HTMLでは`<a>`タグでツイートリンクを作成し、記事タイトルとURLを動的に設定。CSSでボタンのスタイルを定義。SOY CMSでは`cms:id="title_plain"`と`cms:id="entry_url"`を用いて記事タイトルとURLを取得し、JavaScriptを使わずにツイートボタンを実装。これにより、ページ読み込み速度が向上し、PageSpeed Insightsのスコアも改善された。
/** Geminiが自動生成した概要 **/
CSSの読み込み方を変えることでSEO対策とページ表示速度の高速化を実現する方法を紹介。従来headタグ内に記述していた外部CSSをbody閉じタグ後へ移動することでレンダリングブロックを回避し、表示速度を向上させる。さらに、HTTP/2環境下ではファイル数削減が有効となるため、CSSをHTML内に直接記述する方法も提示。ただし、保守性向上のためにCMSのモジュール機能を活用し、HTML末尾にCSSを挿入する手法を推奨。この際、モジュールファイルの読み込みによる速度低下を防ぐため、最終HTMLのキャッシュ機構を併用することが重要となる。
/** Geminiが自動生成した概要 **/
IPv6はSEO対策に有効な通信速度改善策。IPv4アドレス枯渇問題を解決する後発の規格で、理論上アドレス割り当ては無限大。16ビット単位の16進数表記で、IPv4より最適化されている。saitodev.coのようなWebサイトアクセスでは、DNSサーバでドメイン名からIPv4/IPv6アドレスを取得し、サイトサーバへアクセスする。IPv6設定はサーバ会社ごとに異なるが、DNS設定ではIPv4をAレコード、IPv6をAAAAレコードに登録する。設定確認は`ping -4/-6 ドメイン名`コマンドで可能。
/** Geminiが自動生成した概要 **/
Google Mapsの遅延出力により、PageSpeed Insightsのスコアが80点台から100点に改善。iframeを隠して「地図を表示」ボタンを表示し、クリック後3秒後にGoogle Mapsをロードするコードを追加した。これにより、ページの読み込みが遅くなるGoogle Mapsの出力を遅らせ、ページのパフォーマンスを向上させた。
/** Geminiが自動生成した概要 **/
SQLiteを採用するSOY CMSでサイト表示を高速化するため、最終生成HTMLのキャッシュ化機能を導入した。データベースやファイル読み込みを省略することでPageSpeed Insightsのスコアが大幅に向上。この機能はHTMLキャッシュプラグインをインストール後、index.php内のexecute_site()をexecute_site_static_cache()に変更することで有効になる。ただし、カート内容の表示など動的なコンテンツはキャッシュ化できないため、リッチなサイト構成との両立は難しい。高速化とSEO対策には見栄えよりも内容重視の割り切りが必要となる。SOY Shopでも同様のキャッシュプラグインが開発されている。
/** Geminiが自動生成した概要 **/
SOY Shopのデータベースパフォーマンス改善にはインデックスの見直しが効果的です。 商品点数やアクセス数の増加に伴い、データベースへの負荷が増大し表示速度が低下することがあります。 特に商品検索や絞り込み機能は複雑なクエリを実行するため、適切なインデックスが設定されていないとパフォーマンスに大きな影響を与えます。インデックスはデータベース内の特定の列に付与されることで、データ検索の高速化を実現します。 SOY Shopでは、商品コードや商品名、公開状態など、頻繁に検索される項目にインデックスを設定することが推奨されています。 しかし、不要なインデックスは更新処理のオーバーヘッドとなるため、適切なインデックスを選択することが重要です。記事では、phpMyAdminを用いたインデックスの確認方法、SOY Shop管理画面からのインデックス設定方法、そしてインデックス設定の注意点が解説されています。 インデックスを適切に設定することで、データベースの負荷を軽減し、表示速度の向上、ひいてはユーザーエクスペリエンスの向上に繋がるとしています。
/** Geminiが自動生成した概要 **/
PageSpeed Insightsでスコア100を目指すため、サーバー側の処理速度向上に取り組んだ。SEO対策として、PHP製CMSを使う場合、PHPバージョンを最新に保つことが重要。PHP7系はOPCacheにより高速化されており、バージョンアップだけでスコア向上も期待できる。VPSサーバでのバージョンアップ方法は過去記事を参照。PHP8ではJitコンパイラ導入で更なる高速化が見込まれる。かつてGo言語への移植も検討したが、PHPでスコア100達成できたため中止した。
/** Geminiが自動生成した概要 **/
SEO対策として、データ転送量削減のためブラウザキャッシュを活用する方法を解説。HTML以外のファイルは一度取得すれば再取得不要なため、ApacheのExpiresモジュールでブラウザにキャッシュさせる。Ubuntu環境でApache2.4を前提に、a2enmod expiresコマンドでモジュールを有効化し、.htaccessにファイルタイプごとにキャッシュ期間を設定する記述を追加すれば完了。HTMLは即時、CSS/JavaScriptは10日間、画像は15日間キャッシュされるようになる。
/** Geminiが自動生成した概要 **/
この記事では、ウェブサイトのSEO対策として画像ファイルサイズの削減に焦点を当てています。GoogleのJPEGエンコーダGuetzliを導入することで、画像品質を維持しながらファイルサイズを大幅に削減できることを実例で示しています。具体的には、115.8kbの画像がGuetzliによって9.4kbまで圧縮され、80%以上の削減に成功しています。また、PageSpeed InsightsによるWebP等の次世代フォーマットの推奨についても触れつつ、Safari非対応やPageSpeed Module導入によるパフォーマンス低下を理由に現状では採用を見送っていることを説明しています。
/** Geminiが自動生成した概要 **/
HTTP/2は、HTTP/1.1以前のバージョンに比べて、複数のファイルを並列でダウンロードできるため、ウェブサイトの表示速度を大幅に向上させます。これにより、リクエスト回数とインターネット全体の回線使用量が削減されます。しかし、一度に送受信されるデータ量が増えるため、画像サイズの最適化が重要になります。ApacheサーバーでHTTP/2を有効にする方法は、別記事で紹介されています。より詳細な情報は、オライリーの"Real World HTTP"で学ぶことができます。現在、LiteSpeedのようなサーバーでは、さらに高速なHTTP/3(QUIC)が利用可能ですが、当サイトはApacheのHTTP/3対応を待っています。
/** Geminiが自動生成した概要 **/
個人事業主がSEO対策として行ったデータ転送量削減策を紹介。コンテンツの充実を最優先としつつ、今回はデータ圧縮に着目。GoogleのPageSpeed Insightsを参考に、Brotliアルゴリズムを用いてデータ転送量の削減を試みた。Brotliは対応サーバーが限られるため、Deflateやgzipも選択肢として提示。HTMLや画像のデータ量削減は今後の課題とし、データ転送に関する更なる改善策を予告している。