.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabはてなブログが無駄に重くならないツイート埋め込み方法はてなブログ2016.10.13こんにちは、NAEです。あいかわらず、飽きもせずにはてなブログの高速化、パフォーマンス・チューニングの機会を探っています。今回見つけたのは、Twitterのツイートを貼り付けるときにこういう方法を使えば高速化するよ!というTipsです。平たく言うと、ツイート貼りつけの際はTwitter公式のタグを一部編集して使う方がいいというお話です。目次はてなブログではツイート埋め込みに必要なライブラリが多重ロードされていたツイート用JSをhttpsに一本化していく。その理由ブログ記事のHTMLソースから見えた悪の根源ツイート埋め込みの具体的な手順(過去記事修正の場合)見たままモードの場合Markdown/はてな記法モードの場合ツイート埋め込みの具体的な手順(新しくツイートを埋め込む場合)この方法にもリスクはありますまとめ:まだまだ高速化の余地があるはてなブログはてなブログではツイート埋め込みに必要なライブラリが多重ロードされていたなんとなくGTMetrixでブログのパフォーマンス測定をしてみたところ、こんな発見をしました。三行にサマリすると全く同じファイルが違うURLから読み込まれていているこれらを一本化することで無駄なファイルをダウンロードしなくて済むこれにより約100KBのデータ量削減が見込めるだそうです。問題のファイルというのがこちら。ブログにツイートを埋め込む際に必要な、Twitterの提供するJavascriptライブラリです。http://platform.twitter.com/widgets.jshttps://platform.twitter.com/widgets.js違いはプロトコルがhttpかhttpsかだけで中身は同じ。関わらず、URLが別なので無駄に2回ロードしてしまっています。これはもったいないですね。ツイート用JSをhttpsに一本化していく。一本化するにしても、httpとhttpsどちらへ寄せるべきか。答えはhttpsです。httpsは、httpという通信プロトコルのセキュリティを高めたものです。Googleがhttps化済のサイトを上位表示するという話が飛び出したことでWebサイトのhttps化対応がほぼ必須ということで、一度は目にしたことがあるはず。ちなみに2016-10-13現在、はてなブログはhttps化されていません。いえ内部通信は順次https化されているように見えるので、全体https化の日もそう遠くはないと思います。はてなの提供するjQueryライブラリのパスがhttps化あれたようです。2016つまり、httpsで通信できるところはさせておいて損はないということ。ブログ記事のHTMLソースから見えた悪の根源では、実際にブログ記事のどこでhttpとhttpsのものが読み込まれているのか。GTMetrixで上記指摘が出たブログ記事のHTMLソースコードを眺めてみた結果、http:埋め込まれたツイートのすぐ下https:フッターよりさらに下で読み込まれていることがわかりました。charset="utf-8"></script>そして後者はこんな感じでHTMLの最後のほうに埋め込まれていました。src="https://platform.twitter.com/widgets.js"></script>後者はユーザにはカスタマイズ不可能な部分です。はてなブログが標準で提供しているものでしょう。いじることはできません。前者の記事内のツイート埋め込み部分について、<script>〜</script>の部分を削除する、もしくはsrcをhttpsへ書き換えてあげればOKです。後述するリスクを考慮すると、srcをhttpsへ書き換えるほうが安全かと思います。ツイート埋め込みの具体的な手順(過去記事修正の場合)では、具体的な修正手順に移ります。過去記事の修正方法です。見たままモードの場合と、Markdown/はてな記法モードで方法が違います。https追記でOKです。HTMLを//platform.twitter.com/widgets.js等で検索し、scriptタグごと削除src="//platform..."をsrc="https://platform..."に書き換え(httpsを追記)していってください。Markdown/はてな記法モードの場合Markdown/はてな記法モードの場合、HTMLを直接編集できないので貼り直しが必要です。下記のようになっているツイート埋め込み部分を探し、次のセクションで説明する方法で入手したコピペ用のコードで置きかえます。丸メガネの意外な効能。https://t.co/RIJkstoXOA]ツイート埋め込みの具体的な手順(新しくツイートを埋め込む場合)記事へ新しくツイートを埋め込むとき、次の手順を踏めば同じファイル(widget.js)の無駄な多重読み込みを防ぐことができます。Twitterで該当ツイートを探して開く「このツイートをサイトに埋め込む」を選択する1行目の<blockquote>〜</blockquote>をコピー、もしくはsrc="//platform..."をsrc="https://platform..."に書き換え(httpsを追記)記事内の貼りたいところにペーストする2はこんな感じで「・・・」をクリックすると出てきます。3はこんな感じで元コードが出てくるので、上一行を全コピー、もしくは二行目のsrc部分をhttps://ではじまるように修正すればOKです。この方法にもリスクはありますこの方法、ツイート埋め込み部分のscriptタグを削除する方法をとった場合のみ、若干のリスクがあります。該当タグを削除した場合、ツイート埋め込みに必要なライブラリ(widget.js)の読み込みをはてなブログ側に依存することになります。そのため、はてなブログが当ライブラリの読み込みを排除した場合、ツイートが引用として表示されることになります。ツイート内容は引用として埋め込まれるためコンテンツとして抜けができるわけではないものの、見た目が若干変わるので、気になる人は気になるかもしれません。まとめ:まだまだ高速化の余地があるはてなブログ以上、ツイートを埋め込むときは少し手間をかければ100KBくらいページを軽くできるよとういお話でした。手間といってもそんなに大きく増えるわけではないので、ツイートを埋めこむときはやっておいて損はない方法かと思います。100KBを多いと取るか少ないと取るかは人によりけりですが、ぼくは可能な限りブログの高速化させたいため、過去記事のツイートをすべて貼り直しました。(完全に個人的なこだわりです・・・)参考になれば幸いです。plus)技術評論社Amazon楽天Yahoo!ショッピングはてなブログスポンサーリンクシェアTwitterFacebookはてブPocketLINEコピーフォローNAEブログ実験室naelab関連記事はてなブログ魔改造によるはてなブログの高速化。jQuery/JavaScriptをフッターに移動する方法はてなブログブログタイトルにおすすめ!雰囲気たっぷりの英語Webフォント16選はてなブログ目指せ最高の使い心地。はてなブログをシンプル化&高速化するためにやったことはてなブログはてなブログでjQueryの読み込み時間をゼロにする方法(はてなブログの高速化)はてなブログMarkdown(マークダウン)記法はブログ執筆スピードアップに最適はてなブログはてなブログの記事編集画面が重い原因はヨメレバ・カエレバだった件スポンサーリンクはてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ魔改造によるはてなブログの高速化。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。