サイトの表示速度をlinkタグの「rel="preconnect"」で上げる/WebPagetestで事前接続を調べる 結城永人 - 2018年8月6日 (月) HTMLのリソースヒント(日本語訳)に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。 目次リソースヒントのpreconnectの仕組みlinkタグの「rel="preconnect"」の記述法サイトの表示速度を上げ易くする条件WebPagetestで事前接続を調べる方法WebPagetestの通常の入力画面の日本語訳事前接続に含まれる三つのデータ リソースヒントのpreconnectの仕組み Luminescence of cars running on a dark road by Mateusz Dach / Pexels リンク関係型 preconnect は、[ 要求されるリソースを fetch するために利用することになる生成元 ]を指示するために利用される。 [ DNS 検索, TCP ハンドシェイク, TLS 折衝(任意選択) ]も含む,接続を早期に起動しておけば、 UA は,接続を確立する際の高い遅延コストを覆い隠せるようになる。 Resource Hints(日本語訳)|ウェブ関連仕様 日本語訳|W3C preconnectを使うとブラウザが外部ファイルを読み込む際に事前接続を完全に行うように指定できる。 DNSルックアップ(名前解決)TCPハンドシェイク(応答確認)TLSネゴシエーション(通信交渉) ※TLSネゴシエーションはオプション(任意選択)だからいつも必要とはかぎらない。 サイトのhead内にpreconnectのlinkタグを記載して事前接続の三つのプロセスを全て完了しておくとブラウザは指定された外部ファイルが必要なところから直ぐに読み込んで画面に表示するためのレンダリングも速やかに可能になるから表示速度が上がるわけなんだ。 linkタグの「rel="preconnect"」の記述法 <link href="外部ファイルのルートかサブドメイン" rel="preconnect"> 事前接続を行うので、サイトの内部ファイルを指定しても最初に閲覧した時点で済んでいるから意味はない。 linkタグの「rel="preconnect"」を使うのは専ら外部ファイルを参照する必要がある場合にかぎられる。 href属性の指定先のURLは外部ファイルのルートドメインかサブドメインを対象にして記述する。外部ファイルのコンテンツを読み込むわけではないので、サイトから参照するURLが実際にディレクトリー以下を含んでいるとしても省略して構わない。 外部ファイルの状況によってlinkタグの「rel="preconnect"」はそのままでは動作しないから注意しなくてはならない。 セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP 要求を制限しています。例えば、 XMLHttpRequest や Fetch API は同一オリジンポリシー(same-origin policy)に従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンからのみ HTTP リソースの要求を行うことができ、それ以外のオリジンからの場合は正しい CORS ヘッダーを含んでいることが必要です。 オリジン間リソース共有(CORS)|MDN Web Docs|Mozilla スクリプトから二次的に要求される外部ファイルかどうか。例えばGoogle FontsのEarly access(Webフォント)を使うような場合に一つのドメイン:fonts.googleapis.comは大丈夫だけれどももう一つのドメイン:fonts.gstatic.comがオリジン間リソース共有で止められてしまう。そのままでは無理だけれどもlinkタグの「rel="preconnect"」にcrossorigin属性を追加すれば動作するようになる。 <link href="外部ファイルのルートかサブドメイン" rel="preconnect" crossorigin> crossoriginの値なしの記述はanonymous(匿名)の値を持つ。正確な記述では「crossorigin="anonymous"」と同じ状態になっている。crossoriginの値は他にもuse-credentials(証明書を使用)があるので、外部ファイルの設定によって使い分ける。 指定先の外部ファイルのドメインの入力は「//」から始めても構わない。 すなわち「href="//example.com"」のように記述できる。ドメインのhttpヘッダーがhttpでもhttpsでも通用するから便利だし、ソースコードが短くなるだけサイトの容量が減るから表示速度も上がる。 必要なのにcrossorigin属性が省略された場合は「rel="preconnect"」を正しく指定しても事前接続の最初のDNSルックアップだけが行われる。 サイトの表示速度を上げ易くする条件 外部ファイルが必要になるよりも先に動かなくては事前接続の利点がないので、linkタグの「rel="preconnect"」はなるべくソースコードの冒頭に置く。そして対象となる外部ファイルを引き離して後ろの方へ置く、または二つの間にCSSなどの他のソースコードが多めに挿入されるようにしておくと良いと思う。 最低限、ブラウザでlinkタグの「rel="preconnect"」の事前接続が終わってから必要な外部ファイルが読み込まれる形にソースコードを記載する順番だけは守らないとサイトの表示速度を上げるには意味がなくなってしまう。 linkタグの「rel="preconnect"」は幾つも使うとファーストビュー(最初の画面)を遅らせる可能性がある。当該の事前接続に時間を取られ過ぎると全体的にサイトの表示速度は速くなるとしても代わりにブラウザが画面を出し難くなって訪問者の体感速度が下がるかも知れない。いい換えるとロード時間の短縮に対してファーストビューの遅延が発生しないようにlinkタグの「rel="preconnect"」の数は適切に調節するべきなんだ。幾つも使わず、増やし過ぎないのが大事だと考える。 注意:ブラウザは十秒以内に使われない接続を全て閉じるから直ぐに使われる大事なドメインへのみpreconnectせよ。不必要なpreconnectは他の重要なリソースを遅らせ得るので、preconnectされるドメインの数を制限してpreconnectが齎す影響を調べよ。 原文 Caution: Only preconnect to critical domains you will use soon because the browser closes any connection that isn't used within 10 seconds. Unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and test the impact preconnecting makes. Establish network connections early to improve perceived page speed|web.dev(訳出)|Google Developers サイトの外部ファイルに何でも「rel="preconnect"」をやると逆に遅くなる場合もあるから少なくとも「十秒以内に使われない接続」は避けなくてはならない。 <link href="外部ファイルのルートかサブドメイン" rel="dns-prefetch"> 事前接続でDNSルックアップだけの「rel="dns-prefetch"」は高速化の効果はもっと少ないけれども使い易い。HTMLの記載は「rel="preconnect"」と同じだけれどもcrossorigin属性の必要がなく、ソースコードの冒頭にするべき配置は全く同じだ。サイトで直ぐに使われない外部ファイルの事前接続に使うのに適している。 WebPagetestで事前接続を調べる方法 Waterfall View|WebPagetest|Catchpoint Systems サイトにlinkタグの「rel="preconnect"」を指定する外部ファイルはサイトか外部ファイルのソースコードから分かって選べるけど、しかしWebPagetestで調べるとサイトの読み込み時間をコード毎に明瞭に把握できるから良いと思う。crossorigin属性がないと駄目だったり、総じてコード自体が正しく記載されているかどうか、実際の動作状況を通じて確認するのにも役立つ。 WebPagetestは無料のサービスでアカウントの登録も求められないから気軽に使えるし、現時点、Googleがサイトの表示速度を計測するツールのTest My Siteに搭載していたり、ウェブの高速化の取り組み(Analyze and optimize your website with PageSpeed tools)から支援しているらしくて信頼性も高そうだ。 機能が非常に豊富だけれども基本的に調査したいサイトのURLを入力して実行すればテスト結果からサイトの表示速度や関連するソースコードの諸々の読み込み時間のデータが手に入る。 WebPagetestの通常の入力画面の日本語訳 Test a website's performance|WebPagetest|Catchpoint Systems Enter a Website URLウェブサイトのURLを入力Test Locationテスト地域 日本ならば「Tokyo, Japan」(日本の東京)BrowserブラウザConnection 接続 スマホならば「3G」や「4G」などNumber of Tests to Runテストの回数/一度に九回までRepeat View繰り返し閲覧 First View and Repeat View(一回目と繰り返し)First View Only(一回目だけ)Capture Video動画を取り込むKeep Test Private自分だけがテストを知る/結果を一般公開しないLabelラベル(Test History:テスト履歴で複数の結果を纏める) 通常の画面で所定の項目を入力して右側の「START TEST」のボタンを押すとテストが開始されて画面が切り替わる。Waitingと TestingとDone(待機とテストとやった)の三段階で長くても数分で完了する。するとWalterfall(ウォーターフォール:数値の推移を示した棒グラフ)の画像がScreen Shot(スクリーンショット)と共に出て来る。押すとそれぞれに全体を確認できる。 Walterfallの画像から入ってWalterfall View(ウォーターフォールビュー)でも分かるけれども下のConnection View(コネクションビュー)にサイトの接続状況のデータが集められている。 Waterfall Viewで黄色の帯文字が付くのはリダイレクトのURLで、赤色の帯文字が付くのはエラーのURLで、何れもサイトの表示速度を下げる要因だからなるべく修正しておきたい(外部ファイルの問題ならば使わうのを止める以外に直接は改善できないかも知れない)。 事前接続に含まれる三つのデータ Connection View|WebPagetest|Catchpoint Systems dnsDNSルックアップ(緑)connectTCPハンドシェイク(橙)sslhttps接続/SSL暗号化通信のためのTLSネゴシエーション:SSL / TLSハンドシェイク(紫) 何もしないとおよそソースコードの順番通りに必要な外部ファイルの事前接続が行われる。 しかしlinkタグの「rel="preconnect"」を指定するとブラウザの先読みが可能になってWebPagetestで確認すると対象の外部ファイルがソースコードの後ろならば明らかにdnsとconnectとsslが先に離れて表示されもする。 ブログで使った感想として主要な部分の表示に影響する外部ファイルだけにlinkタグの「rel="preconnect"」を指定するのが好ましい。 反対にいうとアクセス解析のGoogleアナリティクスやサイト広告のGoogleアドセンスなどの補足的な部分の外部ファイルを除外してlinkタグの「rel="preconnect"」の指定先を選択すればファーストビューの体感速度を比較的に落とさずに済むわけなんだ。 サイトの表示速度は上がるとしてもほんの僅かだけど、ただしソースコードに記載される外部ファイルの数が多くてドメイン毎の事前接続の回数が増えるほどにブラウザの読み込みは遅れるので、linkタグの「rel="preconnect"」の利点は却って大きくなるし、使うのも決して吝かではない。 参考サイトlink要素によるResource Hintsを使用してリソースの先読みを行うページを1秒以内に表示するための最新技術、そしてSEOの未来(テクニカルSEOの復権 最終回)Eliminating Roundtrips with PreconnectあなたのWebページ表示を爆速にするための、HTTPリクエスト状況分析ガイド(前編)あなたのWebページ表示を爆速にするための、HTTPリクエスト状況分析ガイド(後編) コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
キム・テヒの反日活動を日本人としてどこまで許せるか かつて韓国ドラマの IRIS -アイリス- を観て何て綺麗で可愛くて良いんだと一目で度肝を抜かれた俳優に キム・テヒ がいた。 映画『アイリス -THE LAST-』予告編 by TAEWON ENTERTAINMENT from シネマトゥデイ 日本で放映されたのが2...
コメント