/** Geminiが自動生成した概要 **/
php-webdriverで`content-visibility:auto;`を使用したサイトのリンクをクリックする際、遅延読み込みにより要素が見つからない問題が発生する。`getLocationOnScreenOnceScrolledIntoView()`だけでは不十分で、一度スクロール後にページトップに戻り、再度徐々にスクロールすることで要素を確実に表示させクリックを成功させる方法を紹介。これはページ表示速度の高速化と遅延読み込みによる影響への対策。また、SeleniumによるアクセスをGoogle Analyticsから除外する方法についても言及し、誤った計測を防ぐための設定についても触れている。さらに、関連するelement click interceptedエラーへの対処法の記事へのリンクも提供。
/** Geminiが自動生成した概要 **/
SOY CMSでWebサイトの高速化のため、外部CSSを自動インライン化・圧縮する方法を解説。`cms:module`でのCSS直接記述による修正の課題を解決すべく、`link`タグを介し、PHPモジュールが外部CSSを読み込み・圧縮した上で`<style>`タグとしてインライン出力する手法を提案しています。
これによりSOY CMS経由では圧縮・インライン化されたCSSが出力され、ブラウザとサーバー間の転送量削減とSEO（Core Web Vitals）に貢献。外部ファイルでの管理によりCSS修正が容易になり、ページごとのCSS制御も可能となる点が大きなメリットです。
/** Geminiが自動生成した概要 **/
CSSの読み込み方を変えることでSEO対策とページ表示速度の高速化を実現する方法を紹介。従来headタグ内に記述していた外部CSSをbody閉じタグ後へ移動することでレンダリングブロックを回避し、表示速度を向上させる。さらに、HTTP/2環境下ではファイル数削減が有効となるため、CSSをHTML内に直接記述する方法も提示。ただし、保守性向上のためにCMSのモジュール機能を活用し、HTML末尾にCSSを挿入する手法を推奨。この際、モジュールファイルの読み込みによる速度低下を防ぐため、最終HTMLのキャッシュ機構を併用することが重要となる。
/** Geminiが自動生成した概要 **/
SOY2HTMLのHTMLModelは、条件付き出力制御を可能にする。HTMLの一部をHTMLModelで囲み、visible属性に条件式を指定することで、条件を満たした場合のみその部分がレンダリングされる。例として、ブログ記事の「続きを読む」リンクは、追記がある場合のみ表示したい場合に利用できる。HTMLModelは、単に出力の有無だけでなく、外部CSSパスの動的な制御など複雑な処理も可能だが、基本的な使い方はシンプルで、visible属性による表示制御が便利である。HTMLModel自体は何もせず、親クラスであるSOY2HTMLの挙動を理解する必要がある。
/** Geminiが自動生成した概要 **/
SOY CMSのキャッシュモードを利用することで表示速度を大幅に向上させることができます。キャッシュモードには、「出力キャッシュ」「ブロックキャッシュ」「データキャッシュ」の3種類があります。出力キャッシュはページ全体をキャッシュし、ブロックキャッシュはページの一部のブロックをキャッシュ、データキャッシュはデータベースへのアクセス結果をキャッシュします。それぞれのキャッシュモードは管理画面から簡単に設定でき、サイトのアクセス状況や更新頻度に合わせて最適な設定を選択することで、サーバー負荷を軽減し、表示速度を向上させることができます。特に、頻繁に更新されない静的なページやアクセス数の多いページでは、出力キャッシュが効果的です。キャッシュのクリアも管理画面から簡単に行えます。
/** Geminiが自動生成した概要 **/
SOY CMSでサイト表示を高速化するために、表示直前にサーバ側で画像リサイズを行う方法を紹介しています。Google PageSpeed Insightsで低評価を受けた画像サイズの問題を解消するため、サムネイルプラグインではなく、SOY CMSの隠し機能を活用。
具体的には、カスタムフィールドに画像パスを入力し、imgタグのsrc属性に`im.php?src=[画像パス]&width=[幅]`を指定することで、動的にリサイズされた画像を表示。従来のHTMLのwidth属性による縮小表示よりもパフォーマンスが向上し、PageSpeed Insightsのスコアも改善。
記事では、設定変更前後の具体的なコード例やスクリーンショットを交えながら解説。リサイズ処理はJPEG、PNG、GIFに対応し、作業フローを簡略化しつつサイト高速化を実現。次回、CSSや画像のキャッシュ設定について解説予定。