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

M

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

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本のミニセミナーを用意しています。
期間限定ですので、お早めにお受け取りください。

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




スポンサードリンク

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

 シェア
FC2ブログ爆速テンプレートブロガーお役立ちページ読み込み速度JSライブラリjavascriptinstant.pageブログ運営カスタマイズ
関連記事

Comments 0

There are no comments yet.

コメントする

未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5788)
胃がんブログ (244)
よりぬき 胃がんブログ (16)
胃がん闘病記・日記 (5479)
胃がん手術後の食事記録 (6)
胃切除後の料理など (33)
がん治療のクラウドファンディング (10)
胃がん History (82)
ステージ3B 多発性高度リンパ節転移胃癌 (57)
胃がん再発「転移性肝がん」で余命宣告 (24)
がん のこと(ガン情報全般) (415)
がんブログ (231)
がんニュース (184)
胃がん 障害年金ブログ (71)
障害年金 - 準備編 (23)
障害年金 - 審査から年金受給まで (12)
障害年金 - 審査請求・不服申立 (26)
障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (126)
Amazonセール (2)
📱kindleセール (123)
今日のエッセイ (53)
ニュース・芸能・話題 (600)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (43)
胃切除後の食事・レシピ (668)
ご飯・おかゆ・和食 (174)
おかず (138)
味噌汁・スープ (73)
カレー関係 (66)
パン・洋食 (63)
麺類 (113)
その他、簡単レシピなど (38)
ブログ (199)
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
趣味や将棋のこと (22)
ファッション (1)
司法書士 (26)
仕事・実務や登記のこと (1)
事件ファイル (25)
COLLECTION (28)
家電 (13)
ホーム&キッチン (4)
ビューティー&ケア (4)
QOLの改善&ヘルスケア (2)
お酒 (5)