画像の欠落
Silktide は、ページが読み込もうとしているものの、読み込みに失敗する画像を見つけます。通常は、画像ファイルが移動または削除されたか、ウェブアドレスの入力を間違えたことが原因です。 訪問者には、画像を表示するはずの場所に壊れた画像アイコンや空白が表示されます。
<!-- この画像ファイルは存在しなくなったため、訪問者には壊れた画像が表示されます -->
<img src="/images/team-photo-2019.jpg" alt="チームの写真">
重要な理由
壊れた画像は、ページで最も目立つ不具合の 1 つです。ブラウザーは、コンテンツが表示されるはずの場所に、壊れた画像アイコンや空白をそのまま表示します。 ページ全体が放置されているように見えるだけでなく、画像に情報(グラフ、製品写真、図など)が含まれていた場合、その情報は訪問者から完全に失われます。
欠落した画像が装飾用または未使用のものであっても、訪問者のブラウザーはその画像をリクエストして失敗を待つために時間を費やし、何の意味もなくページの表示を遅くします。
修正方法
- 欠落している画像への参照を見つけます。Silktide は、それぞれの画像がページ上のどこに表示されるかを強調表示します。
- 画像が移動した場合は、参照先を新しいアドレスに更新します。意図的に削除した場合は、参照を削除します( では通常、その画像を含むページまたはテンプレートを編集します)。
- 画像が存在するはずの場合は、再アップロードするか、サーバーがリクエストを拒否する理由を確認します。
- その後ページをテストし、画像が表示されることを確認します。
Silktide によるテスト方法
- 各ページを実際のブラウザーで読み込み、CSS やスクリプトによって読み込まれる画像を含め、ページがリクエストするすべてのファイルを記録します。
- 画像に対するリクエストだけを残します。
- ダウンロードに失敗したものをそれぞれ報告します。これには、404 などのサーバーからのエラーレスポンスや接続失敗が含まれます。誤検知を避けるため、一時的なタイムアウトや、ブラウザー自体が中止したリクエストは報告しません。
- 欠落している各画像がページ上のどこで使用されているかを強調表示し、テスト対象から除外した要素内の画像はスキップします。
トラブルシューティング
試してみると画像が読み込まれる
画像がログインの背後にある、自動化された訪問者に対してブロックされている、または一貫せずに配信されている可能性があります。また、混在コンテンツも確認してください。 で配信されているページからプレーンな HTTP 経由で画像をリクエストすると、ファイルが存在していてもブラウザーによってブロックされます。修正するには、https:// アドレスで参照します。実際には問題がない場合は、検出結果をしてください。
画像がどこで使用されているかわからない
すべての画像が <img> タグ内にあるとは限りません。 で設定された背景や、スクリプトによって追加された画像も同じように失敗します。
Silktide の強調表示では、特定できる場合、その画像の原因となっている要素が示されます。