本記事は広告を含みません。このサイト自体で行った表示速度の見直しをもとに、基本の手順をまとめました。
画像の多いサイトでは、表示速度の差は画像の軽さと読み込み設定で決まります。やったことは大きく分けて、画像を軽くすること、テーマの高速化設定を使うこと、動画の扱いを決めること、更新を止めないことの4つです。
画像を軽くする
形式はWebPにします。同じ画質でも、JPEGやPNGよりファイルサイズが小さくなりやすい形式です。あわせて、表示する大きさに合わせてリサイズし、大きな原画をそのまま載せないようにします。
このサイトの作例記事での実例です。アイキャッチは1920×1280で約310KB、本文の作例画像は1枚あたり約460KBから580KBに収めています。いずれもWebPです。
- アップロード前に、形式と大きさを確認する
- アイキャッチと本文画像で、役割とサイズを分ける
- 軽くしすぎて画質を落とさない。作例の見栄えが落ちたら本末転倒です
テーマの高速化設定を使う
使っているテーマCocoonには高速化の設定画面があります。このサイトでは、次の5つを有効にしています。
- ブラウザキャッシュ
- CSSの縮小化
- JavaScriptの縮小化
- Lazy Load（画像の遅延読み込み）
- Googleフォントの非同期読み込み
注意点は、縮小化が表示崩れの原因になることがあることです。有効にした後は、トップページと記事ページの表示を必ず確認します。このサイトでも、有効化のあとに表示確認を行いました。
動画を載せるときの注意
動画は画像よりずっと重くなります。長さは短く、解像度は用途に合わせるのが基本です。このサイトの作例では、縦型の短い動画（672×1344、約10秒）を、1記事に1点までと決めています。
動画の作例と作り方は、AI美女の作例｜深紅のガウンのポートレートとショート動画を作る手順という記事にまとめています。 https://r18.xrnews.site/r18-ai/ai%e7%be%8e%e5%a5%b3/6737/
更新を止めない
プラグインとテーマの更新は、表示速度だけでなく安全性にも関わります。更新があるか定期的に確認し、適用した後は表示をチェックする、という流れを続けます。
まとめ
- 画像はWebPにして、表示サイズに合わせてリサイズする
- テーマの高速化設定を有効にしたら、表示崩れがないか確認する
- 動画は短く、点数を絞る
- プラグインとテーマの更新を止めない
AI画像を商用利用する場合の確認点は、AI画像生成を商用利用する前に確認すべき3点という記事にまとめています。 https://r18.xrnews.site/r18-ai/6684/
コメント