AIがWordPressテーマを作成したが、そのせいでパフォーマンスが低下した
私はSEOスペシャリストです。新しいツールのテストをするのが好きです。
最近、AIにカスタムWordPressテーマを一から作成するよう依頼しました。レイアウトを説明し、コンテンツを提供しました。
最初、結果は素晴らしく見えました。サイトはLighthouseでモバイルとデスクトップの両方において100/100のスコアを記録しました。コードもクリーンに見えました。
その後、少し編集を加えたところ、モバイルのスコアが100から89に低下しました。デスクトップは100のままでした。
問題は、たった一つの画像属性にありました。このミスは、なぜAIのコードをレビューしなければならないのかを示しています。
高速なデスクトップ接続ではボトルネックが隠れてしまいます。モバイルデバイスではそれらが露呈します。スコアの低下は、あるアセットが不要な帯域幅を消費していたことを意味していました。
モバイルのレポートは、Largest Contentful Paint (LCP) パスにある画像を指摘していました。それは古いゲームのスクリーンショットでした。
デスクトップでは、この画像は問題ありません。しかし、モバイルでは大きなデータテーブルが画面を占領します。このテーブルによって、画像はページの下の方へと押しやられます。ページが読み込まれたとき、その画像は見えていません。
AIは次のようなコードを書きました：
コード自体は有効です。しかし、ロジックが間違っています。AIは、コード内の最初の画像がヒーロー画像であると想定したのです。AIには視覚的な認識が欠けています。モバイルブラウザに対し、隠れている画像を即座にダウンロードするように強制してしまったのです。
私はコードを次のように変更しました：
最初はスコアが変わりませんでした。正気を失ったかと思いました。20分間バグを探し回りました。その後、サーバーのキャッシュがまだ古いコードを配信していることに気づきました。
キャッシュをクリアすると、モバイルのスコアは100に戻りました。
AIが失敗したわけではありません。コードの順序に基づいて論理的な推測をしただけです。しかし、AIはレイアウトを見ることができません。テーブルがビューポートをどのように変化させるかを理解していないのです。
コンポーネントの構築にAIを使用する場合は、以下の手順に従ってください：
fetchpriorityとloading="lazy"を監査してください。実際のレイアウトと照らし合わせて確認しましょう。コードの順序を鵜呑みにしないでください。- テーブルやスライダーの下に隠れている画像がないか確認してください。
- テストを切り分けましょう。テストを行う前には必ずキャッシュをクリアしてください。古いコードを監査してはいけません。
AIのコードは使用できるほど十分にクリーンです。しかし、そのコードがページの実際の状態と一致しているかどうかを確認するには、依然として人間が必要です。
Optional learning community: https://t.me/GyaanSetuAi