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もあるので、サイトの他の部分の表示とバランスを取りながら埋め込みコードに使うこともできる。 コメント 新しい投稿 前の投稿
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2%、「Twitter」の利用率が81.5%と前...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...
There is / are a lot / number / variety ofの単数と複数の使い分け どうも単数か複数か分かり難い英語の表現があって熟語の「a lot of」(沢山の)や「a number of」(多くの、幾つかの)や「a variety of 」(様々な)なんだけれどもそれぞれがそこにあるというときに単数扱いの「There is」か複数扱いの「There are...
コメント