Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@ShinyaOkazawa

ロードを高速化するprefetch

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

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/

39
Help us understand the problem. What is going on with this article?
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
39
Help us understand the problem. What is going on with this article?