問題一覧に戻る
上級最新HTML仕様
問題45: loading属性と最適化
loading属性やリソースヒントを使って、ページのパフォーマンスを最適化しましょう！
loading属性やlink要素のrel属性を使うことで、ブラウザのリソース読み込みを最適化できます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にrelを入れてリソースヒントを設定（rel="preload"）
📝 タスク2: 2番目の____にhrefを入れてフォントのURLを設定（href="https://fonts.googleapis.com/css?family=Roboto"）
📝 タスク3: 3番目の____にasを入れてリソースタイプを指定（as="style"）
📝 タスク4: 4番目の____にloadingを入れて即座読み込みを設定（loading="eager"）
📝 タスク5: 5番目の____にloadingを入れて遅延読み込みを設定（loading="lazy"）
📝 タスク6: 6番目の____にloadingを入れてiframeの遅延読み込みを設定（loading="lazy"）
コードエディタ
リアルタイムプレビュー