TwitterとInstagramとYouTubeの埋め込みを少しでも速く表示させる方法 結城永人 - 2022年1月29日 (土) TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法としてHTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがあるので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次Twitterの埋め込みコードを先読みするTwitterの埋め込みコードの外部ファイルTwitter用の二種類の先読みのソースコードInstagramの埋め込みコードを先読みするInstagramの埋め込みコードの外部ファイルInstagram用の二種類の先読みのソースコードYouTubeの埋め込みコードを先読みするYouTubeの埋め込みコードの外部サイトYouTube用の二種類の先読みのソースコード Twitterの埋め込みコードを先読みする 投稿｜結城永人 ツイートの右上の「…」のメニューから「ツイートを埋め込む」を選ぶと埋め込みコードを取得することができる。 Twitterの埋め込みコードの外部ファイル 現在、Twitterの埋め込みコードの最後のscriptタグがコンテンツを表示するために必要なJavaScriptプログラムを記載した外部ファイルの読み込み用になっている。 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> scriptタグのsrc属性のURLがTwitterの埋め込みコードを少しでも速く表示するための先読みの対象になる。 Twitterの外部ファイルには「async」が付いているから他のコンテンツと並行的に処理される。なので読み込みも実行も普通よりも速い。もっと効率を上げるにはそれだけを抜き取ってサイトのソースコードの上の方に置く。head内などに記載すれば読み込みが早々に開始されて望ましい。 Twitter用の二種類の先読みのソースコード HTMLかJavaScriptでTwitterの外部ファイルへのrel-preloadのマークアップを行う。 linkタグのマークアップ <link href="//platform.twitter.com/widgets.js" rel="preload" as="script"> ※URLの「https:」は付けても付けなくても構わない。※XMLだと最後は「/>」と閉じタグが必須となる。 サイトのhead内にTwitterの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。 JavaScriptのプログラム <script> const plot = document.createElement("link"); plot.rel = "preload"; plot.as = "script"; plot.href = "//platform.twitter.com/widgets.js"; document.head.appendChild(plot); </script> ※URLの「https:」は付けても付けなくても構わない。 HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、Twitterの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの閉じタグの中に置くべきだ。 Twitterの埋め込みコードは全て共通の外部ファイルを使用するので、かりに埋め込みコードを増やしてもう一方のblockquote（引用）タグがコンテンツ毎に必要になるとしても外部ファイルのscriptタグの方は埋め込みを行うページに一つだけあれば十分なんだ。 先読みのソースコードもそれに合わせて埋め込みコードを使用するページに、一つ以上、記載する必要はない。 Instagramの埋め込みコードを先読みする 投稿｜結城永人 投稿の右上の「…」のメニューから「埋め込み」を選ぶと埋め込みコードを取得することができる。 Instagramの埋め込みコードの外部ファイル 現在、Instagramの埋め込みコードの最後のscriptタグがコンテンツを表示するために必要なJavaScriptプログラムを記載した外部ファイルの読み込み用になっている。 <script async src="//www.instagram.com/embed.js"></script> scriptタグのsrc属性のURLがInstagramの埋め込みコードを少しでも速く表示するための先読みの対象になる。 Instagramの外部ファイルには「async」が付いているから他のコンテンツと並行的に処理される。なので読み込みも実行も普通よりも速い。もっと効率を上げるにはそれだけを抜き取ってサイトのソースコードの上の方に置く。head内などに記載すれば読み込みが早々に開始されて望ましい。 Instagram用の二種類の先読みのソースコード HTMLかJavaScriptでInstagramの外部ファイルへのrel-preloadのマークアップを行う。 linkタグのマークアップ <link href="//www.instagram.com/embed.js" rel="preload" as="script"> ※URLの「https:」は付けても付けなくても構わない。※XMLだと最後は「/>」と閉じタグが必須となる。 サイトのhead内にInstagramの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。 JavaScriptのプログラム <script> const ploi = document.createElement("link"); ploi.rel = "preload"; ploi.as = "script"; ploi.href = "//www.instagram.com/embed.js"; document.head.appendChild(ploi); </script> ※URLの「https:」は付けても付けなくても構わない。 HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、Instagramの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの閉じタグの中に置くべきだ。 Instagramの埋め込みコードは全て共通の外部ファイルを使用するので、かりに埋め込みコードを増やしてもう一方のblockquote（引用）タグがコンテンツ毎に必要になるとしても外部ファイルのscriptタグの方は埋め込みを行うページに一つだけあれば十分なんだ。 先読みのソースコードもそれに合わせて埋め込みコードを使用するページに、一つ以上、記載する必要はない。 YouTubeの埋め込みコードを先読みする 結城永人 - お元気ですか｜結城永人チャンネル パソコン版の動画の概要欄の「共有」のメニューから「埋め込む」を選ぶと埋め込みコードを取得することができる。 YouTubeの埋め込みコードの外部サイト 現在、YouTubeの埋め込みコードのiframeタグのsrc属性のURLがコンテンツを表示する配信元のサイトになっている。 <iframe width="560" height="315" src="https://www.youtube.com/embed/WW-ilyTaXqE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> iframeタグのsrc属性のURLがYouTubeの埋め込みコードを少しでも速く表示するための先読みの対象になる。 およそiframeタグによる埋め込みコードは外部サイトの一意のアドレス（埋め込まれるコンテンツ毎に異なるもの）を指定しているから全ての埋め込みコードでsrc属性のURLが同じになることはない。 YouTube用の二種類の先読みのソースコード HTMLかJavaScriptでTwitterの外部ファイルへのrel-preloadのマークアップを行う。 linkタグのマークアップ <link href="埋め込みコードのsrc属性のURL" rel="preload" as="document"> ※帯文字の部分を実際のURLの文字列と置き換える。※URLの「https:」は付けても付けなくても構わない。※XMLだと最後は「/>」と閉じタグが必須となる。 サイトのhead内にTwitterの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。 JavaScriptのプログラム <script> const ploy = document.createElement("link"); ploy.rel = "preload"; ploy.as = "document"; ploy.href = "埋め込みコードのsrc属性のURL"; document.head.appendChild(ploy); </script> ※帯文字の部分を実際のURLの文字列と置き換える。※URLの「https:」は付けても付けなくても構わない。 HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、YouTubeの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの中に置くべきだ。 YouTubeの埋め込みコードはコンテンツ毎に全て完全に異なるので、先読みのソースコードもそれに合わせて個別に記載しなくてはならない。 TwitterとInstagramはYouTubeの埋め込みコードを少し速く表示させる方法としてHTMLのリソースヒントからrel-preloadの方法を紹介した。 先読みのマークアップにはオプションがあってURLとファイル以外にもtype属性／MINE typeやcrossorigin属性／CORSやmedia属性／media queryを指定することもできるので、諸々の埋め込みコードを使用するサイトで、適宜、追加すると良いと思う。 もう一つ埋め込みのコンテンツが速く表示されるのと反対にサイトの他の部分が後回しで遅くならないともかぎらないは注意を要するかも知れないところなんだ。 HTMLのリソースヒントにはpreloadよりも軽いものとしてファイルを読み込まず、ブラウザの事前接続を確保するだけのdns-prefetchやpreconnectもあるので、サイトの他の部分の表示とバランスを取りながら埋め込みコードに使うこともできる。 コメント 新しい投稿 前の投稿
吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす 歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます！ を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 伊良部秀輝が大好きだった記憶 Hideki Irabu records hi...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
松本典子の今世紀最大の失敗という笑い話 日本のアイドル黄金時代と呼ばれる1980年代の真っ只中に十六歳で歌手としてデビューして、その後、十九歳から異色にも 志村けん と共にお笑いでも活躍した 松本典子 という芸能人がいた。二十四歳で野球選手の 苫篠賢治 と結婚して芸能界から殆ど姿を消して、大分、経っているので、今は知ら...
ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳 十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン （1835）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属...
結城永人
結城永人
コメント