表示速度を上げるHTMLタグ

WEB制作
表示速度を上げるHTMLタグ

HTMLのタグで事前読み込みや非同期実行の設定を行うことで、表示速度の改善を行うことができます。

目次

DNS Prefetching

CDNなどで他のドメインのリソースを読み込むことが確定している場合、<link rel="dns-prefetch">を設定していると予めにDNSの読み込みを行う事ができます。

<link rel="dns-prefetch" href="//cdn.example.com">

rel="preload"によるコンテンツの先読み

<link rel="preload">は、予めファイルを非同期で読み込み、必要になったタイミングで実行することができます。

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="script.js" as="script">
  ...
</head>

asyncによるJSファイルの非同期化

<script> タグに async 属性を追加することで、非同期に JS ファイルをダウンロード・実行します。

※JSが非同期に実行される様になるので、依存関係のあるファイルなどは、正常に動作しない可能性があります。

<script src="script.js" async>

deferによるJSファイルの遅延実行

<script> タグに defer 属性を追加することで、HTML パース完了後、DOMContentLoaded イベントの直前にJSファイルを実行するようになります。

<script src="script.js" defer></script>

decoding="async"

<img> タグに decoding="async" 属性を追加することで、非同期に画像をデコードするようにできます。

<img src="image.jpg" alt="image" decoding="async">