【爆速テンプレートに学ぶ】InstantClickが駄目ならinstant.pageだ!

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

FC2ブログの【爆速テンプレートに学ぶ】InstantClickが駄目ならInstantPageだ!!


こんにちは。Mです。FC2ブログが公式にリリースした爆速テンプレートについて、何度か記事を書かせてもらってます。前回の記事では、ページ読み込み速度の爆速を実現するためにFC2の運営サイドが採用したJSライブラリ「InstantClick」について触れました。


▼関連記事

FC2ブログ公式「爆速テンプレート」が編集できない理由を徹底解析

こんにちは。「ゆうらり Happy Smile」を運営するFC2ブロガーのMです(^^)FC2ブログが公式テンプレートとしてリリースした、阿部寛のホームページ並みに凄い!と話題の「爆速テンプレート」。今回は、爆速テンプレートが採用したInstantClickについて書こうと思います。さまざまなサイトで書かれた評判を拝見してみると、爆速の主要因は、どうやらこの InstantClickの導入が一役買っているのだそうです。▼爆速公式テンプレートのペ...


しかし、InstantClicは、われわれが普段から使用するFC2ブログのテンプレートに実装することが非常に難しいことが分かりました。


今回は、【爆速テンプレートに学ぶ】第4弾。主題は、FC2ブログにInstantClicが導入できないのなら、代わりのものを使って「ページの先読み&高速表示」を実現してみよう!というもの。


そして、InstantClicの代用策として考えられるのは、「InstantPage」です。第4弾は、その使い方をご紹介しようと思います。


ちなみに、あの、阿部寛のホームページに勝るとも劣らない爆速ぶりをボクなりに解析していますと、FC2ブログの運営さん達が広告を排除してまでいかに追求を重ねてきたのか。その、工夫の爪あとというものを窺い知ることが出来ました。


>>阿部寛のホームページ


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


また、FC2ブログの公式爆速テンプレートは、われわれのブログには採用できない機能をいくつか取り入れており、FC2の運営側だからこそ作ることの出来る「特別仕様」となっています。


よって、「爆速」の特徴を全部そっくり真似ることは出来ません。しかし、スマホでウェブを見ることが多くなった今は、爆速から学んだり、得られた情報も少なくありませんでした。


ブロガーである我々にとって、ウェブサイトの最適化は欠かすことの出来ない重要な課題です。興味がおありのFC2ブロガーさんは、是非ともカスタマイズのご参考になさって下さい。


まえがきが非常に長くなりました(汗)それでは、「InstantPageのレシピ」を3分クッキング並みの早さでご説明していきましょう。


スポンサードリンク

レシピ①「InstantPage」とは?


InstantPageとは、ブログに貼られたリンク先を、マウスオーバー(hover)やスマホでタップする際のtouchstart時点からページを先読み(preload)しておき、クリック・タップに合わせて高速表示させることが出来るJSライブラリです。


このJavaScriptは、わずか1kBの超軽量スクリプトなので、導入してもJSの負担はさほど気にならず、外部スクリプトを1つ加えるだけのお手軽さ。簡単なので、カスタマイズにおすすめ。



レシピ②「実装手順」


まず、InstantPageのサイトにアクセス。


InstantPageのサイト


>>instant.page


「Copy snippet」のボタンをクリック。


そして、下記のJSコードを</body>の直前にコピペするだけ。


<script src="//instant.page/1.2.1" type="module" integrity="sha384-/IkE5iZAM/RxPto8B0nvKlMzIyCWtYocF01PbGGp1qElJuxv9J4whdWBRtzZltWn"></script>


レシピ③実装したことで味わえる美味しさや「InstantClic」との違いなど


たった一行のJSをコピペするだけで、クリックした時のスピード感が体験できますよ。


InstantClicとの違い


InstantClicの主な仕組みは、pjax。ページの一部を入れ替えてページ移動したように見せる技術。難点は、ただ導入するだけでは他に実装してるJSが実行されない。


InstantPageの主な仕組みは、prefetch。pjaxを使わない分、InstantClicよりは体感スピードが劣ります。他のJSについては実行可能。


注意点/type属性のmoduleは消しちゃダメ


InstantPageを実装すると、W3Cのエラーチェックで「type属性のmoduleを外してね」と警告表示がされます。最初、それを見たボクはtype属性を削除してしまったのですが、これを見た当FC2ブログのテンプレート作者Akiraさんからmoduleの属性を削除するとInstantPageが機能しなくなりますよ~とご指摘をいただきました。とても親切な方ですね!!ありがとうございます(^^)


以上、この記事はMがお伝えしました(^^)/~~~


内容紹介
本書の読者限定のプレゼントとして2本のミニセミナーを用意しています。
期間限定ですので、お早めにお受け取りください。

はじめに
 ブログの魅力は好きなことで稼げること
 ビジネスは必ず変化する
 アフィリエイトブロガーという人たちについて
 しかし、変えてはいけない軸もある
 競争から共生へ




関連記事

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

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

Comment 0

There are no comments yet.

コメントする