Help us understand the problem. What is going on with this article?

ロードを高速化するprefetch

More than 1 year has passed since last update.

本記事は、こちらの記事を参考にまとめています。

Prefetchとは

ユーザーが次に訪問するページを開発者がわかっている場合、次のページの準備しておいたら早くない?みたいな。前もって準備できるものはしておく、そうすれば処理早いよね、要は先読みするってこと。

ここでは、先読みする3つの方法があります。
- DNS Prefetching
- Link Prefetching
- Page Prefetching / Prerendering

DNS Prefetching

DNSとは、ホスト名をIPアドレスに変換するプロトコル。いわゆる名前解決と呼ばれる仕組み。例えば、ページの中にFacebook/Twitterウィジェット、google analyticsなど、外部URLからリソースを取得する要素がある場合、ブラウザはdocumentの上部から解釈し、外部URLを見つけた時点で外部URLへリクエストを送ります。この時に、前もって名前解決を済ませておけば、どこにリクエストするのかがわかっているから処理するのが早いよね、ってこと。

対応していないブラウザはdns-prefetchの記述は無視されるため、記述していても害はない。

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

対応ブラウザ

Link Prefetching

ユーザーが次に訪問する可能性が高いページを開発者がわかっている場合、リソースを前もって取得しておくことができる。ただし、JSやCSSなどキャッシュ可能なリソースに限られる。

現在ページのリソースをダウンロードしている最中に、指定した次のページで使用するリソースもダウンロードされるため、現在ページのリソースの表示速度に影響するかは要調査。

<link rel="prefetch" href="//example.com/future-image.jpg">

対応ブラウザ

Page Prefetching / Prerendering

指定したページのCSSを読み込み、JSを実行、ページ全体の不可視バージョンを作成する。効果の程は要調査。

<link rel="prerender" href="//example.com/future-page.html">

対応ブラウザ

参考サイト

https://www.sitepoint.com/lightning-fast-websites-prefetching/
https://www.suzukikenichi.com/blog/dns-prefetching/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした