あなたの興味を広げる話題を。

新潟県 中子の桜©Koichi_Hayakawa(Licensed under CC BY 4.0

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

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

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
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

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

 シェア
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="8,2" data-matched-content-columns-num="1,4"
現在の人気記事はコチラ!

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5925)
┣  胃がんブログ (264)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5585)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (482)
┣  がんブログ (273)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (745)
┗  転職・キャリアアップ (19)
恋愛・人間関係 (30)
終活ブログ (10)
グルメ (71)
┣  低糖質レシピ (10)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (216)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (5)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)