FC2ブログ公式「爆速テンプレート」に搭載のDNSプリフェッチとは?

2019年03月14日
0
0
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など

FC2ブログ公式「爆速テンプレート」に搭載のDNSプリフェッチとは?


こんにちは。FC2ブログをはじめて5年9ヶ月目のブロガーMです。FC2公式テンプレートとしてリリースした爆速テンプレートが、阿部寛のホームページ並みに凄い!と話題になってますね(゚o゚;;


ちなみに、この爆速テンプレートは編集やカスタマイズが一切出来ない仕様になっているので、ボクがこのテンプレにお世話になることはあり得ないわけなんですが。


しかし、FC2の運営サイドが、広告まで排除するという英断の末に作った作品なだけあり、とことん追求したページスピードのこだわりようには、側から見ているボクにとって大いに刺激を受ける内容のものでした。


▼こちらで爆速テンプレートのページスピードを体感することが出来ます。


爆速テンプレート サンプルブログ


同時に、爆速テンプレートが搭載したWeb技術を参考に、何か少しでもこの胃がんブログゆうらり Happy Smile」に取り入れることが出来ないものか?それにより、ページの読み込みスピード改善に少しでも役立てることが出来ないものか?と。


Web知識の乏しいボクですが、素人のボクなりに研究を重ねている次第です。


▼関連記事

FC2ブログ公式爆速テンプレート風?インラインCSS全部書きしてみた!

こんにちは。FC2ブロガーの管理人Mです。先日、FC2ブログから1通のメールが届きまして。内容を確認するとFC2ブログの公式テンプレートに「爆速」なるものが新登場したのだそうな(゚o゚;;言葉通りに解釈すると、爆発的に速いテンプレートが開発されたということなのでしょうか?!現在では、いかに速くブログが表示されるかが重要視される時代ですから、もしそうなのだとすると、ユーザーにとってはとても興味深いですよね~このFC2公...


現在、FC2ブログの運営側が導入した公式爆速テンプレートのスピード要因を解析し、自分のブログに導入可能かどうかを1個ずつネットで調べては試行錯誤を繰り返してます。


今回は、その第2弾。かなり四苦八苦しましたが、その結果をご報告しようと思います。同じようにブログのページ速度を改善したいなぁ、とお思いのFC2ブロガーさん達にとって、少しでもそのお役に立てれば幸いです(^^)


スポンサードリンク

DNSプリフェッチ


一時期よく使われていて、懐かしい感じがしないでもないDNSプリフェッチdns-prefetch)が爆速公式テンプレートに導入されてました。


外部スクリプトを読み込もうとする時、まずはそのスクリプトのドメインを探して見つける『名前解決DNSルックアップ)』という作業が行われます。


これが、実際に読み込む前にちょっと時間がかかる作業なんですよね(汗)いろんなドメインから読み込もうとすると結構な時間になりますから(^_^;)


DNSプリフェッチは、ページ読み込み時に、外部ファイルへアクセスするより先にDNSの名前解決をしてしまうというもの。100~200ms程度の時間が短縮できるとされてます。


さっそく、改めてこれを当ブログに導入することにしました。



DNSプリフェッチの導入方法・使い方


さて、問題なのは、その導入方法をどうするか…。


要は、自分のブログの中で必要なドメインを探す訳なんですが、テンプレートをカスタマイズしていく中で、自分で入れた外部スクリプトがいろんな所に散在してしまってます(汗)


さらに、スクリプトの中から他のドメインを呼んでる様な場合には、それを自分で探した上でリストを作るのは結構大変ですよね…。


そこで、ネットでいろいろ調べ上げた結果、便利なツールを発見。自動でリストをHTMLの形式で作ってくれるので、簡単にDNSプリフェッチの実装が済みましたよ(^^)


DNS Prefetch Generator をブラウザにお気に入り登録


便利なツールとは、DNS Prefetch Generatorのことです。これを使えば、瞬時にDNSプリフェッチの生成が行なえます。


DNS Prefetch Generator


まず、サイトを開いたら、「DNS Prefetch Generator」というボタンをドラッグしながらブックマークレットしておきます。


DNSプリフェッチを生成する自分のブログを開く


ブックマークレートが済んだら、さっそく自分のブログを開いてみましょう。


ブックマークレートした「DNS Prefetch Generator」を実行


ブログのページ読み込みが終わったところで、「DNS Prefetch Generator」のブックマークレートを実行させます。


<meta http-equiv="x-dns-prefetch-control" content="on"></meta>
<link rel="dns-prefetch" href="//analyzer53.fc2.com" />
<link rel="dns-prefetch" href="//blog-imgs-113.fc2.com" />
<link rel="dns-prefetch" href="//use.fontawesome.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//www.googletagservices.com" />
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com" />
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
<link rel="dns-prefetch" href="//www.googletagmanager.com" />
<link rel="dns-prefetch" href="//adservice.google.co.jp" />
<link rel="dns-prefetch" href="//adservice.google.com" />

すると、一瞬でDNSプリフェッチのリストがHTMLの形式で生成されます。簡単で便利ですね!!


自動生成されたDNSプリフェッチのタグをテンプレートに実装


生成されたDNSプリフェッチをテンプレートに実装します。記述場所は、なるべく速い段階で読み込んでおくべき。


head>内の、文字コード指定のすぐ下あたりに書くと良さそうです。



注意点


自動生成されたDNSプリフェッチの1番上に、下記のタグがありますが、これを記述するとW3C バリデーション チェックで「属性の値が正しくない」と検出されてしまいます。


<meta http-equiv="x-dns-prefetch-control" content="on"></meta>

この一行を削除してDNSプリフェッチを記述する人も多いようです。ボクの場合は、爆速公式テンプレートがこれを記述していることもあり、そのまま記述することにしました。



追記:この件に関して、ボクがテンプレートでお世話になっているFC2ブログテンプレート製作者のAkiraさんにご質問してみたところ、ご親切に下記のご説明を頂きました。いつもありがとうございます!!



x-dns-prefetch-control というのはChromeの独自属性で正規属性ではないのでバリデートエラーになりますが、悪影響があるわけではありません。


公式「爆速」テンプレートが登場しました - FC2ブログのあれこれ

公式「爆速」テンプレートが登場しました

あんたが宣伝してどーすんの、って感じですが。
公式テンプレート に 爆速 の名を冠するテンプレートが追加されたそうです。...



おわりに


いかがだったでしょうか。自分のサイトを好きなようにカスタマイズ出来るのも、ブロガーがブログを運営するうえで味わえる醍醐味のひとつかと思います。


いろんなことを試しながら、FC2ブログを楽しみたいものですね♩


他にもさまざまな試行錯誤を繰り返していますので、それは次回の記事に譲ります。



内容紹介
無料で使える人気ブログサービス「FC2ブログ」の入門書です。ブログの記事の作成から,写真や動画の投稿,テンプレートやプラグインを用いたブログのデザインの変更など,覚えておきたい操作を丁寧に解説します。基本機能のほかにも,Facebook・TwitterといったSNSとの連携や,「アクセス解析」などFC2の各種サービスの活用,さらにはアフィリエイトまでしっかり紹介。はじめてブログを利用する方でも,この1冊でFC2ブログをバッチリ使いこなせるようになります!




関連記事

この記事が気に入ったら
シェア!

 シェア
スポンサードリンク
M
Posted by M
ブロガー/ファッション研究家/会社経営/ヘッドスパとスイーツをこよなく愛する45歳/おうちごはん男子部 所属/料理を悪戦苦闘修行中/2011年38歳の若さでほぼ末期の胃がん宣告/奇跡的に生還!/人生なんて気持ち次第!!きっとなんくるないさ~

Comment 0

There are no comments yet.

コメントする