---
title: "preconnectとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "外部リソースへの接続遅延を事前に解消するpreconnectの仕組みを解説。AI生成HTMLを共有する際にGoogleフォントや画像CDNへの接続を高速化する具体的な方法と注意点を紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-preconnect-html-share"
markdown: "https://giga-site.com/articles/what-is-preconnect-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# preconnectとは？HTML共有・AI生成サイトでの意味をやさしく解説

Googleフォントや外部APIを使ったHTMLをURLで共有すると、最初の接続確立に時間がかかって表示が遅れることがあります。preconnectはこの接続準備を事前に済ませる指示で、AI生成サイトでも手軽に設定できます。意味と使いどころを把握して、共有したページの速度体験を向上させましょう。

> Source HTML: https://giga-site.com/articles/what-is-preconnect-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

preconnectとは、ページが外部サーバーに接続するときのDNS解決・TCPハンドシェイク・TLSネゴシエーションという3段階の準備を、実際にリソースを取得する前に済ませておく指示です。`<link rel="preconnect" href="https://fonts.googleapis.com">`をheadに書くだけで、Googleフォントの取得が始まる前に接続が完了した状態になります。

AIが生成するHTMLでは外部サービスへのリンクが多く含まれますが、preconnectが省略されていることがほとんどです。特にGoogleフォント・Unsplashの画像・分析ツールなどを使っている場合、対応するドメインへのpreconnectを追加するだけで初期表示が体感で改善されます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

商品提案書をHTMLで作り、ギガサイト便などで取引先のスマートフォンへ共有するケースを考えます。ページ内にGoogleフォントとAmazon S3の画像が混在していると、異なる2ドメインへの接続確立がそれぞれ発生します。`<link rel="preconnect">`を2行追加するだけで両方の接続準備が並行して進み、表示完了まで0.5〜1秒短縮できることがあります。

パスワード付きURLで社内関係者に共有する際も、外部フォントへのpreconnectが効きます。イントラネット経由でも外部CDNへのアクセスは発生するため、接続準備の短縮は社内共有でも有効です。ただし社内プロキシが外部接続をブロックしている環境では効果がなく、その場合はフォントをHTMLに埋め込む方法が確実です。

## よくある誤解

preconnectを設定すれば「ファイルも先取りされる」と思われがちですが、接続準備をするだけでファイル自体は取得しません。接続の準備とリソースの取得は別段階です。リソース自体を先取りしたい場合は、preconnectではなくpreloadを使う必要があります。

「全部のドメインにpreconnectを書けばいい」は誤りです。ブラウザが維持できる接続数には上限があり、使われない接続を大量に確立するとメモリと帯域を無駄に消費します。preconnectはページ表示の最初の2秒以内に確実に使うドメインに絞り、多くても4〜5個が目安です。

## 安全に使うための注意点

preconnectに指定したドメインは、ページを開いた瞬間にそのサーバーへ接続します。社外秘のページで分析ツールや広告ネットワークのドメインへのpreconnectが含まれていると、閲覧者情報がそのサービスに送信されます。共有前にpreconnectのhref値を全件確認し、不要な外部送信が発生しないか点検してください。

crossorigin属性はフォントに使うときにのみ必要です。Googleフォントのように`https://fonts.gstatic.com`からfontファイルをCORSで取得する場合は`crossorigin`を付けてください。画像や通常のスクリプト取得のpreconnectには付けなくてよく、むしろ付けるとブラウザが別接続を2本開くことがあります。

## よくある質問

### preconnectとDNS-prefetchは何が違うのですか？どちらを使えばいいですか？

DNS-prefetchはDNS解決のみを事前に行い、TCP・TLS確立は行いません。preconnectはすべての接続準備を行う上位互換です。確実に使う主要ドメインにはpreconnect、補助的なドメインにはDNS-prefetchを使い分けるのが一般的な方針です。

### Googleフォントのpreconnectを追加したのに速度が変わらない気がします。確認方法はありますか？

ChromeのDevToolsでNetworkタブを開き、フォントリクエストの「Timing」を確認します。「Stalled」や「DNS Lookup」の時間が短縮されていればpreconnectが機能しています。変化がなければhrefのURLが実際のフォント配信ドメインと一致しているか確認してください。

### AI生成HTMLに含まれていたpreconnectを削除しても問題ありませんか？

問題はありませんが、削除するとそのドメインへの接続確立が遅れてフォントや画像の表示が少し遅くなることがあります。削除前にNetworkタブで該当ドメインへのリクエストがあるか確認し、使われていないなら削除して構いません。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "preconnectとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "外部リソースへの接続遅延を事前に解消するpreconnectの仕組みを解説。AI生成HTMLを共有する際にGoogleフォントや画像CDNへの接続を高速化する具体的な方法と注意点を紹介します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-preconnect-html-share",
  "url": "https://giga-site.com/articles/what-is-preconnect-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "preconnectとDNS-prefetchは何が違うのですか？どちらを使えばいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "DNS-prefetchはDNS解決のみを事前に行い、TCP・TLS確立は行いません。preconnectはすべての接続準備を行う上位互換です。確実に使う主要ドメインにはpreconnect、補助的なドメインにはDNS-prefetchを使い分けるのが一般的な方針です。"
      }
    },
    {
      "@type": "Question",
      "name": "Googleフォントのpreconnectを追加したのに速度が変わらない気がします。確認方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ChromeのDevToolsでNetworkタブを開き、フォントリクエストの「Timing」を確認します。「Stalled」や「DNS Lookup」の時間が短縮されていればpreconnectが機能しています。変化がなければhrefのURLが実際のフォント配信ドメインと一致しているか確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成HTMLに含まれていたpreconnectを削除しても問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "問題はありませんが、削除するとそのドメインへの接続確立が遅れてフォントや画像の表示が少し遅くなることがあります。削除前にNetworkタブで該当ドメインへのリクエストがあるか確認し、使われていないなら削除して構いません。"
      }
    }
  ]
}
```