attention admin about comments trackbacks you may also like

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

2019年02月14日
FC2ブログのあれこれ
31

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

【ブログ】 爆速テンプレートが追加されました!

平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。この度、FC2ブログ(blog.fc2.com)において、爆速表示機能を搭載した新たなテンプレートを追加いたしました。...

設定したり使用したりといったことはしていませんが、かなり速いと思います。昨今のweb事情ではGoogleが「ページの表示遅くすなよ〜遅いサイトは順位下げるぜよ〜」と追い込みをかけております。確かにWi-Fi、光回線など通信環境が良好な場合に2秒以上かかってるともう「遅い」と感じてしまいます。

特に強く勧めるわけではないですしそんな義理もないんですが、現時点で公式テンプレートを利用しているという方へは試してみても良いんじゃないかな、と思います。

速い仕組み

まぁ「爆速」というのは大げさだとしても、結局のところページが遅くなる原因というのは

  • 画像の容量が大きい
  • スタイルシート(CSS)の内容量が多い
  • Javascriptが複雑, 多用, 実行順序の精査されていない

など。これがページが遅く(重たく)なる三大要因です。

公式爆速テンプレートの工夫

  1. スタイルシートはファイル化せずにhtmlのhead要素内に直書き(インラインCSS)
  2. 画像をimgではなくbackground-imageで表示
  3. JSが最小限
  4. 機能が最小限

要するに三大要因を工夫した、ということですね。

インラインCSS

head要素内に style要素 として圧縮したCSSを直に書いています。これによりCSSファイルの通信リクエストが無くなります。もう全部なにからなにまでheadに書いてありますね(笑)
ですからそのままだと カスタマイズが非常に困難 だと思います。

カスタマイズする際はブラウザ上ではとてもできないと思いますので、htmlエディター(テキストエディター)を準備し、圧縮されたCSSを一旦戻し(視覚的にわかりやすくし)、カスタマイズが終了してから再度コンパイルしてhtmlに戻す、という手順をおすすめします。技術的に云々ではなくて視覚的に困難、というだけです。

注意点は、外部ファイル化を避けることで初回の表示は速くなりますが、ファイル化したものは ブラウザのキャッシュが効きます ので二度目以降は寧ろファイル化されている方が速くなることが多いです。ただCSSも最小限のようですから気にするほどではないと思われる。

せっかくインラインで書いてあるのに個人カスタマイズでどんどんCSSファイルを追加、なんてことをしてしまうと台無しになりますので気をつけましょう。これは特にこの公式テンプレートだけでなく私のテンプレートでも同じです。

画像

SEO的にはちょっとどうかな、というところですが、トップページですからそんなに問題視する必要もないと思います。知っておきべき点は

  • background-imageとして表示される画像はalt属性が付けられないので画像インデックス(画像検索)の対象外
  • background-imageは印刷時に出てこない

繰り返しますとトップページですからそんな気にする必要は無いと思います。ページを印刷をする機会がある、という方は注意した方が良いかな。

FC2ブログの仕組み上backgroundでの掲載をするには style属性 を利用するしかないんですね。で、この場合は「画像」になりますけれども、style属性で指定したCSSは表示に遅延が生じません。htmlを上から読み込んでstyle属性内に background-image があるとそこですぐに画像の取得が行われます。なので本来はあまり良くはない。良くはないけれども最近のFC2ブログのサーバー環境は良好なので問題ないでしょう。たぶんね。つか、システム上仕方がないですし。

ただサンプル画像は横幅700px程度で揃えてますが、SEOを総合的に考えた際の最適幅は横1200pxです。画像サイズが変わると結果も変わりますのでその点も少しだけ注意が必要です。爆速といっても元画像を参照しますのでサムネイル対象画像が横2000、3000pxもある、容量の削減をしていない、というケースでは爆速でなくなる可能性があります。ここは個人環境に依存。

--- 追記 2019.2.15

原画抽出ではなく サムネイル画像である とFC2ブロガーの mochiさん が教えてくださいました。情報提供いつもありがとうございます ('0')/

富士宮で貯蓄と資産運用

富士山の麓から、定期預金や投資などの資産運用を紹介していきます。

個人環境とは関係なく W760 H420 で表示されます。誤情報を訂正しお詫び申し上げます。

JS

こちらもホントに最小限に押さえてありますね。ページ上部へ戻るボタン(スムーススクロール)も排除されています。個人的にページ内移動ボタンは必須ですが、この爆速テンプレートは 無限スクロール ですからまぁ… そもそも相性は良くないかもしれない。

当然 jQuery未導入 です。これは良い傾向のように思います。jQueryはとても流行りましたけれど、速度を重要視されるようになった現在では排除候補としてに真っ先に名が挙がるのがjQueryです。

リンクのマウスオーバーで遷移先ページを先行取得するJSが含まれています。これによりページ遷移がめっちゃ速くなります。私のテンプレートでも導入はしたいところですが、それにより「カスタマイズ不可」「JS系プラグインの利用不可」にせざるを得ないので自粛しています。

機能

「機能」というか、ちょっと適切な表現が見当たらないのですが、例えば「管理人コメントにアイコンを表示させる」「コメントフォームに絵文字や文字装飾ができるJSツールがある」などいろんな機能があります。こういったものも使っていないようですね。とにかく超シンプルというか何もかもが必要最小限です。

一つだけケチをつける

バリデートエラーがある じゃんかー (∵`)
サムネイル対象画像が無いときに background-image: url(); これはダメですね。この件はサラっと流そう。そうしよう(笑)

全体的に気をつけること

カスタマイズせずそのまま素直に利用するが吉。

というのは結局製作者がどれだけ苦労して対策したとしても、みなさんがあれこれと追加をしていくと台無しになってしまうケースが非常に多いからです。

例えば webフォント。例えば ブログパーツ、例えば 装飾用CSS、また例えば JS依存のプラグイン など。ここで言う「プラグイン」とはweb一般のそれではなく「FC2ブログプラグイン」のことです。主にサイドメニューに表示される1とか2とか3のアレ。
あまり言いたくはないが言わざるを得ないのは JSを利用しているプラグインは使わない方が良い という点です。スピード対策をするならば、ですよ。
プラグインのJSというのはhtmlの途中で即実行のものがほとんどです。html(DOM)の構築途中のJSは即座にスピードに影響が出ますので避けるべきです。

あとはなんでもかんでもhead要素内に追加してしまう方も多いですし、ファイルを小分けにしていくつも追加してしまうなど。専門知識が無ければそれは仕方がないんですね。「JSの最適な記述位置」とか言われてもわからない方が大半でそれが当たり前。なのでカスタマイズせずに使うのが最適解。
文字の大きさや色を変える、とかそんなのは全然良いですよ。その程度はどんどんやってください。

運営によるこうした取り組みはとても良いことだと思います。欲を言えば AMPの提供 をお願いしたい(笑)
あと速度にこだわりを見せるならこのリクエスト聞いてくださいよぅー (∵`)

サムネイルサイズの見直しと変数の見直しをお願いします

サムネイルサイズの72pxはスマートフォンでの閲覧に耐えられません(高dpiのぼやけ) 150px四方サムネイルの追加をお願いしたいです。
横150、420、640があるととても助かります。 また、横72pxと横300pxサムネイルをimgに変換するのではなくURLだけ取得できるようにして頂きたいです。 原画URLが取得できるようにはなっていますが、サムネイルURLも取得できると助かります。

これ「解像度が、見た目が」と前半は書いてますけど、後半の「URL取得」は 速度対策をさせてくれ という意味ですよ?

ということで、もしスピード対策が気になる方がおられましたらFC2ブログの爆速テンプレートをお手本にしても良いかもしれませんね。今後もこういうアプローチをどんどん行って頂きたいものです。スタッフさんお疲れ様です。

あー。後最後に。
こういう対策は要約タイプテンプレートじゃなきゃできないよ という点をお伝えしておこうと思います。全文タイプテンプレートは ユーザーが記事内で利用したhtml内容が確実に影響する からです。追記を上手に使ってる人は関係ないですけどね。

そして アフィリエイトには絶対的に向かない という点も重要ですね。無限スクロールである時点で向いてないですし、JSを受け付けてもらえないので無理。

--- 追記 2019.2.14

すみません。カスタマイズ非推奨どころかそもそもカスタマイズできない仕様のようです。そしてこれを書かいないといけませんね。

広告が免除される。

えと。そんなことして大丈夫なのか心配ですがそういうことだそうです(笑)
あとSNSのAPIも利用不可。つまりあらゆる外部のJSは使用しない。
ブログ個人設定のSNSボタンを追加すると速度が一気に落ちますし、広告を表示させてもガクっと落ちます(特にArataだよ…) すっげー思い切った仕様なんですね。びっくり(笑)

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(31)

There are no comments yet.

mochi  

2019/02/15 (Fri) 06:46

新しいサムネイル画像サイズが追加されているみたいです。

おはようございます。Akiraさん。
爆速テンプレートのトップページでは760x420のサムネイル画像が使われていました。

https://blogthumbnail.fc2.com/760x420/サーバー番号/a/b/c/abcde/ファイル名.拡張子」
abcdeは登録サブドメイン

それに対応したFC2変数があるんだろうと思い、色々試していたところ以下のサムネイル画像用変数が有効であることがわかりました。
<%topentry_image_url_760x420>
760x420サムネイル画像のURLが取得できます。

アスペクト比が少し微妙ですけど・・・・

Akira  

2019/02/15 (Fri) 14:13
vanillaice (Akira)

To mochiさん

マジですかー!(笑)

まず、記事内容を修正しました。ありがとうございます。
これまた非公開変数のままでしょうかね。非公開変数はいくつかあるんですが、その都度あたりをつけて探すはめになるんですよね (´・ェ・`)
しかも今回のは画像のサイズがそのまま変数になっている。これ一番嫌なパターンだ(笑)
他のサムネイルもあるかもしれないけれど、またしても悪魔の証明。
「無い」のか「有るけど見つけられない」のかがわからない。
「無い」ものを無いと証明するのって不可能なので諦めどころがわからないんですよ!(笑)

mochiさん試してくださったんですね。すごく助かります。
確かに微妙な比率だなぁ。webの鉄板だと縦394, 433, 467, 525のどれかですよね。普通は ( ̄∀ ̄;)
他にもあるかなぁ。またあのめんどくさい作業しなきゃいけないのかしら。しかも突飛な縦横比だし。教えろよ、ちゃんとマニュアルに書けよって感じ(笑)

--- 追記
あと自分のテンプレートが公開されていることに今気づきました。公式の宣伝して自分のテンプレの記事書いてないとかアホか(笑)

ちょっと神頼みしても良いでしょうか (´・ω・`)
関連記事リストのサムネイル画像が「ある時」と「ない時」を振り分けるフラグ系変数をずっと探しているんです。あると思うんですけど見つけられない。いやこれはあるはず。でないとNo imageのユニコーンが出せないから。でも見つからない。
とmochiさんにお伝えしておきます… いえ、はっきり言うと見つけたら教えてください(笑)

それからFirefoxがwebp対応になったんですね。やっぱwebpの方かー。FC2ブログもアップロードできるように早めに対応して欲しいですね。
ヤダ。私ったらmochiさんと話したいことがいろいろありすぎる(笑)

mochi  

2019/02/16 (Sat) 00:17

関連記事リストのサムネイル画像有無フラグは…

こんばんは。Akiraさん。
今回のサムネイル画像変数発見は本当に偶々なんですってば。
「topentry_image_url_rapid」とか「topentry_image_url_bakusoku」とかやっているうちに、まさか画像サイズそのまんまってことはないよなぁと思いながらも試してみたら・・・ウソだろ!?って感じで。ニャハハ(*^▽^*)

他の未知のサムネイル画像変数については今回の〇×〇のような画像サイズに倣ったものがないか、プログラムでHTML生成して総当たりで試してみるのも面白いかも?と思い始めてます。ネタ的に。(;・∀・)

関連記事リストのサムネイル画像有無フラグについて、ちょっと考えつくキーワードでやってみたんですが、やはり簡単には見つかりませんね。
ブログ環境設定の関連記事リスト表示場所「記事下」と「テンプレート変数のみ」では、<!--relate_list_area-->以下がごっそり書き換えられていることからブログシステムPHPあたりで一気に処理しているんじゃないかと推測しています。

まぁ。なんかの拍子に見つかっちゃったりすることが無いとは言えませんので、その時は真っ先に報告させていただきます。(^∇^)アハハハハ!

ただAkiraさん作の一般的なテンプレートだとおそらくLazysizesで関連記事サムネイル画像を遅延ローディングさせていると思うので、サムネイル画像有無を判定してDOMを書き換えるようなJavaScriptを作成して、unveilhooksでJS遅延読み込みするという手法の方が手っ取り早いんじゃないかと…身も蓋もない事言ってみたり。(;・∀・)

FC2ブログのWebPアップロード対応への期待はしているんですが、自動でサムネイル画像を生成したりもして欲しいんで、もっと普及が進んで認知度が高まらないと難しいかなぁと思ってます。

Akira  

2019/02/16 (Sat) 17:39
vanillaice (Akira)

To mochiさん

mochiさん、こんばんは (●'0'●)/

私も思いつくものはほとんど試したんですがヒットしないんですよね (∵`)
ちょっと特殊な方法でやってるのかもしれません。
関連記事にlazyloadingは適用していないんです。ブログ個人設定にあるものだと確実に重複しますし、「テンプレート変数のみに変えてください」とアナウンスしても絶対行き渡らないですし。DOMを書き換えること自体にちょっと抵抗があるというのもあります。自分のは好き勝手にやれば良いんですが人様のとなると二の足(笑)

変数の件もし見つかりましたら教えてくださいね。いつもありがとうございます :)

-  

2019/03/07 (Thu) 14:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2019/03/07 (Thu) 14:41
vanillaice (Akira)

To 爆速の件 内緒さん

こんにちは。

結論から言うと無理です(笑) すみません ^^;
爆速の特徴
・Service workerの使用 --- キャッシュの事前生成
・prefetch + pjax --- リソース先読み + body差し替え
・強制SSL --- prefetch利用にあたりスキーム(というよりもドメイン)を揃える必要あり
・強制広告排除 --- キャッシュを利用するため
・サムネイル新変数 --- ドメインを揃える目的で新たに作成したと思われる

この中で一般ブログでも利用可能というと最後のサムネイル新変数だけだと思います。
通常のサムネイルは各ユーザー毎に imgs-xxx.fc2.com という形で xxx の数字はまちまちですが、prefetchは原則としてクロスドメイン不可(origin)なので全ユーザー共通のドメインで blogthumbnail.fc2.com を作成したのだと思います。
これは今私のこのブログでテスト中というか、非公式変数だと思いますのでもしかしたら爆速テンプレートでしか利用させないつもりで運営が作成したとしたら、リジェクト対象になる可能性もありますよね。ちょっとこの点はまだ不明です。

あとはキャッシュとpjaxなんですが、性質上「広告」の掲載が非常に難しいですよね。もし私がこれをやってしまうと無料会員さんでも広告が表示されない(エラーで取得できない)ことになり、これは大問題というか凍結対象になると思います。私個人も一発アカウント削除でしょうし、配布してしまえば芋づるにアカバンではないかと。
爆速は運営自体が「広告無し」という例外的処置でリリースしていますので問題なくとも、一般製作者にそんな権限はありません。

仮に広告がなんとかなったとしても(ならないけど)、originの問題は残りますし、pjaxはheadも再読込をしませんので(爆速の場合はタイトルタグのみ書き換え)、例えば第三者がブログカードを使おうと思っても正しい情報が引き出せなくなってしまいます。
(SEO的には問題ありません, クローラーはraw htmlを見に行くので正しいhead情報を取得します)

ともかく私が個人ユーザーの設定(SSL, 有料・無料アカウントの別)を変更するなんてことはできませんし、広告について運営は絶対に許可しませんので無理ですね。一応上に書いた
爆速の特徴 = 何をすれば良いのかのヒント
なのでご自身で自己責任で行うなら私は何も言いません(笑) そして当然ですが責任も取りません。
よろしくお願いします。

M  

2019/03/14 (Thu) 06:48

Akira 様

いつもお世話になっております。

一般論として教えて頂きたいのですが、こちらの爆速テンプレートの記事を拝見してから、
「Instant Click」に大変興味を持ってしまいまして(;'∀')

こちらのサイト
https://www.storange.jp/2017/02/instantclick.html
を参考に、alias-Janeのテンプレートで挑戦してみたんです。

アナリティクスのコードの書き方もあったので、それもやってみました。

結果、ものすごくスピードが速くなったように体感したのですが、
ページを移動するたびにCSSが切れてしまったり、グローバルナビゲーションの動作が固まってしまったり...
いろいろと不具合が出てしまいました。

FC2のアクセス解析についてはちゃんと解析されるのか検証はしておりませんが、
やっぱり、「Instant Click」を簡単に導入するのは難しいものなのでしょうか?

お忙しい中、つまらない質問をしてすみません。

ちなみに、現在も不具合の状態のままにしていて、どうしようかなあ、と(;^ω^)

M  

2019/03/14 (Thu) 13:53

Akira 様

いつもお世話になっております。度々コメントしてすみません。

先程の続きですが、テンプレートに下記のコードを記述したのですが、
ページを移動すると、移動先のページが黒文字のNEWマークのみ表示された白画面のみになってしまう
(再読み込みすると直りますが)ので外す事にしました。
素人ではなかなか爆速を真似るのは難しいものですね(;^ω^)

<script data-no-instant="true" src="https://file.blog.fc2.com/yularihappysmile/instantclick.min.js" ></script>
<script data-no-instant="true">
//<![CDATA[
/* Google Analytics Code */
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0],a.async=1,a.src=g;
m.parentNode.insertBefore(a,m);
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-○○○○○', 'auto');

InstantClick.on('change', function () {
ga('send', 'pageview', location.pathname + location.search);
});

InstantClick.init();
//]]>
</script>

Akira  

2019/03/14 (Thu) 15:15
vanillaice (Akira)

To Mさん

こんにちは (o'ω')ノ

> 外す事にしました〜

というのはinstantClickの導入を辞めた、という解釈で合ってますでしょうか。
現時点で説明が必要かどうかわかりませんし、説明と言ってもこの記事内容とコメント欄の内容が全てなんですが、一応もう少し補足します。

-----
> 簡単に導入するのは難しいものなのでしょうか?〜

静的サイトなら容易です。動的サイトでは難しいです。FC2ブログは後者で、Mさんの場合はアフィリエイトをされていますのでバリバリの動的です。

instantClick(以下 ic とします)が速い仕組みは
・preload (プリロード)
・pjax (゚ピージャックス)
大きくこの2つの応用です。爆速ではこれに足すことのService Workerというのも使ってますがこちらの説明は今回は割愛します。

Mさんのページで障害が出たのはpreloadではなくpjaxの性質の方です。pjaxというのは、ページを遷移させずにbody内の一部を「差し替える」ことで遷移したように見せる技術です。
マウスがリンク(a要素)の上を通過するとpreloadが始まります(これはicの仕組みです)
preloadというのは将来的に必要となるリソースを先読みする技術で、ブラウザ実装です。
で、リンクを実際にクリックすると、preloadで先読みされたデータのbody部位の差し替え(pjax)が起こります。

preloadとpjax、どちらがより「速さ」に関係しているかというとpjaxの方です。何故かの説明をこれからします。

pjaxは原則として domcontentloaded(ドムコンテントローデッド)系のJSを再実行しません。これは「DOM(htmlのこと)がローディングされたら実行」というタイプのJSで、どれが該当するかというとまぁテンプレート内にあるJSほとんどがそれです。
要するにJSを実行してくれません。

analyticsのコードをMさんご自身がここに記載されていますよね。
これはic用の特別な書き方(data-no-instance)で(カスタムデータ)でicに紐付いています。
pjaxはページ遷移を行わないのですから、当然analyticsも取得できないですよね。そのために「クリック」が行われたら強制的に再実行を行うわけです。これ(data-no-instance及びonChangeによる実行)をやらないとクリックしてもカウントされません。

結局は他のJSにも当てはまります。
例えばトップページの「リスト系ページ送り」こちらもJSで行いますが、ページをローディングする都度実行させないとページの取得ができません。そのため
onChange というic用JSでカプセル化して強制再実行を行う必要があります。

一旦投稿しますね。

Akira  

2019/03/14 (Thu) 15:30
vanillaice (Akira)

To Mさん②

結局のところテンプレート内にあるJSはほぼ全て(広告も含め)、クリック後の実行が必要です。
pjaxが何故速いかというと、DOMを読む(これもpreloadで先読みされています)以外のことを一切行わないからなんですね。でもJSを実行させる必要があれば当然スピードは落ちます。
リンククリック後にJSを動作させることはせっかくのpjaxの性質を削ってしまうことになります。
爆速テンプレートでは広告が表示されませんよね。これはpjaxでの広告JS実行が困難なのと、仮に実行できるとしてもスピードに影響が出るためです。

icを入れたいならばテンプレート内のJSを全て削除する、ぐらいの思い切りは必要でしょうね。
icに限らずpjaxというのはJSのライフサイクルも考えなければいけません。
例えばFC2ブログでは全ページで全く同じJS内容、というわけにいきません。例えば個別記事ではクッキー用のJS(コメント欄で名前やURLの再記載を不要にするため)が要りますが、トップページにコメント欄はありませんのでこのJSは不要ですよね。
ページ種毎に異なるJSが含まれると調整がかなり大変です。なにせページを実際に遷移させているわけではないのでFC2独自変数によるエリア分けも機能しません。
またページ送りも同じです。個別記事とトップページではJSの仕組みが違いますのでページ種ごとに内容を切り替えなければいけません。切り替えが上手くいかなかった場合にはJSエラーとなり、icの場合は恐らくどこかの時点でページの取得不可(ホワイトアウト)が起こることになります。

あとはbodyしか差し替えませんのでhead内容がそのままです(タイトル要素だけは切り替わります)
なのでブログカードが使えませんね。どのページを表示させても「初回に開いたページ」のhead内容のままです。

広告も事前にJS内容を把握してic用実行コードで記さなければ成果報酬が発生しなくなったり取得エラーなどが起こります。

いずれにしろicを導入するのであれば「JSは一切使わない」ぐらいの心構えが必要かと思います。
ページ速度を優先するあまり必要なものが表示できないとなれば本末転倒です。そのあたりは個人のバランス感覚なのでなんとも言えません。
爆速が「広告なし」「プラグインを制限している」のはつまりは「JSの排除」です。

Mさんのブログのデザインやレイアウトを保った上でicを導入するのが不可能か、と問われればNOではありますが、JS内容の大規模な変更及び切り捨てが必要です。広告を実行させるのであれば爆速ほどの体感速度は得られません。今の感じだと「割と速い」ぐらいで終わってしまうと思います。労力・犠牲と得られるものが見合わないように思います。

pjaxを使わないprelaodだけのinstantPageというのがあるはずなので、そちらを導入してみても良いかもしれません。
ただしこちらはpjaxが無いので「めちゃくちゃ速い」とはなりません。多少は速いかな、程度です。その代りJSは全て実行可能なので試されても良いかもしれません。
私が今申請に出しているものもprefetchを利用しています(preloadとprefetchはまた少し違います)
preloadはブラウザ実装である、という点も注意が必要です。Firefoxは現在はサポートしていません(技術調整を行っているもよう)

M  

2019/03/14 (Thu) 18:48

To Akiraさん

Akira 様

お忙しい中とても詳しいご説明をいただき、ありがとうございます!!

爆速テンプレートが公開されてから、何か真似できるものはないのかな?!と、
私みたいなカスタマイズ好きな素人がたくさんいるはずなので、
専門の方からのこのようなご説明は大変貴重なのでは?と思います。

私のように頻繁にカスタマイズを施す人間にとっては常に不具合や修正が必要となりそうで、
デメリットのほうが大きそうですね(;^ω^)
とりあえず、現状は保留にすることにします...。

「instant Page」の件、教えて頂き、ありがとうございます!!

出来ることは何でもやってみたくなる性格なものですから...

さっそく、調べて探し当てたので実装してみました
ペコリ(o_ _)o))

ついでに、FastClick.jsなんていうのを見つけたので、それも実装。

あと、爆速テンプレートで「DNSプリフェッチ」も導入してたので、真似してみました。
でも、これは<meta http-equiv="x-dns-prefetch-control" content="on">がW3Cエラーで警告がでちゃうんですよね(;'∀')

preloadは、以前 https://firstlayout.net/load-css-asynchronously-with-loadcss/ を参考に導入していた時期がありました。
またやってみようかしら…

Akira様の次々に公開されるテンプレが素晴らしく、また乗り換えてしまいそうです(;^ω^)

いろいろとありがとうございます!!

Akira  

2019/03/14 (Thu) 22:23
vanillaice (Akira)

To Mさん

FastClickは用途が違います。

instantPage --- ページ遷移前にリソースを読み込んでおく(遅延中に行う)
FastClick --- スマホのタップイベント遅延をなくす

この「遅延」がパソコンではマウスオーバーから実際にクリックが行われるまでのラグ、スマホではタップイベント発生から実際に動作するまでのラグです。それが約300〜350ミリ秒あるよ、ってことです。
ipはその遅延を活かして、その間にpreloadします。
fcは遅延そのものを取り除きます。
ですから両者は目的が合致しません。

-----
x-dns-prefetch-control というのはChromeの独自属性で正規属性ではないのでバリデートエラーになりますが、悪影響があるわけではありません。他にもJSのontouchstartなどがスマホのみの属性で今のところ正規ではないのでエラーです。
ipのmodule属性もエラーになっているはずです。
JSの場合「バリデートエラー」と「実行エラー」は全く別物で、後者は修正必須です。前者はW3Cの整備やテスター(バリデータ)の対応度の問題もあります。

CSSのレンダリングブロックを避けるにはpreload(先読み)かlazy(遅延)の両極端(真逆)の選択になると思いますが、いずれにしてもipを入れるのであればloadCSSは必要ないですよ。

M  

2019/03/14 (Thu) 23:35

To Akiraさん

Akira様

さらなるご説明ありがとうございます(o_ _)o))

instantPageとFastClickの違い、大変勉強になりました。

x-dns-prefetch-controlはそのまま記述しておこうと思います。

loadCSSは試してみてあまり良い実感がなかったのでやめておきます。

ipは、まだ諦めてはないのですが、ic用JSの書き方が良く分からないので
実装するにはもう少し時間がかかりそうです(;^ω^)

Service Workerについても、実は昨日から調べまくっている最中でして(;^ω^)

近々、Akira様にとても良くご説明いただいたことをブログに書かせてもらおうかと思ってます。

いつもありがとうございます!!

Akira  

2019/03/14 (Thu) 23:44
vanillaice (Akira)

To Mさん

ipは諦めなくとも最終に記すだけで若干の高速化は図れますので入れても構わないと思いますよ。
icはもうJSを全て諦めるレベルでないと恐らく難しいと思います。Mさんのページ内で速度を落としている要因は「アフィリエイト広告」です。私のこのテンプレートだと平均400ミリ秒で表示できていますが、広告が無いからです(笑)

x-dns-prefetch-controlはChromeのデフォルト設定でdns-prefetchがOFFだったので強制的にONにするための記述です。
現在だとONがデフォルトではないかなぁ、と思います。たぶん。

お疲れ様です :)

M  

2019/03/14 (Thu) 23:49

To Akiraさん(お返事不要)

Akira様

しばらくipのことはお勉強だけにしておきます(;^ω^)
Service Workerに力を入れようと思います!!

x-dns-prefetch-controlの件、ありがとうございます!!

Akira  

2019/03/15 (Fri) 15:53
vanillaice (Akira)

To Mさん

こんにちは。お返事不要とのことですが、ユーザーはservice workerのベースになるjsファイル(cash urlなどを記すファイル)をドメイン直下にアップロードする権限が無いので作成できないですよ (´・ω・`)
ここに使用するJSファイルなどを登録しないといけないので、爆速のservice worker登録を流用することはできても結局JSファイルのキャッシュは制限されますね(ファイルをアップロードできない以上追加もできません)
なのでservice workerの説明などは全て割愛しています。
キャッシュや高速化はドメインのルート(origin)を揃えないとどうにもなりませんので、それ故に爆速は「強制SSL」になっています。
httpsのブログアドレス/sw.js
という形でないとデータを引き出せないからです(swは別のファイル名称かもしれません)
ユーザーのJSファイルアップロードは
https://blog-imgs-サーバー番号.fc2.com/〜
に制限されています。

M  

2019/03/15 (Fri) 20:25

To Akiraさん

Akira様

お返事ありがとうございます!!

ちょうど、service workerでずっと四苦八苦しておりました(-_-;)

いろんなサイトで調べまくり、JSファイルなどを登録したのですが、どうもうまくいってないようで...

ファイルのアップロードについては、有料プランなので、レンタルサーバー?を使っていて、
FFFTPを使ってアップロードしてみました。

しかし、良く分からないまま、見よう見まねにこんな感じでjsファイルを作ったのですが、
キャッシュの書き方がまったくわかりません(;^ω^)
これじゃあ駄目ですよね。調べても全然わからなかったので...

'use strict';

const CACHE_NAME = 'cache-v1';
const urlsToCache = [
'./',
'./styles/css',
'./images/jpg',
'./script/js'
];

self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');

// 指定されたリソースをキャッシュに追加する
return cache.addAll(urlsToCache);
})
);
});

self.addEventListener('activate', (event) => {
var cacheWhitelist = [CACHE_NAME];

event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
// ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
if (response) {
return response;
}

// 重要:リクエストを clone する。リクエストは Stream なので
// 一度しか処理できない。ここではキャッシュ用、fetch 用と2回
// 必要なので、リクエストは clone しないといけない
let fetchRequest = event.request.clone();

return fetch(fetchRequest)
.then((response) => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}

// 重要:レスポンスを clone する。レスポンスは Stream で
// ブラウザ用とキャッシュ用の2回必要。なので clone して
// 2つの Stream があるようにする
let responseToCache = response.clone();

caches.open(CACHE_NAME)
.then((cache) => {
cache.put(event.request, responseToCache);
});

return response;
});
})
);
});

あ。ここにこんなの書いたら何か不具合がでてしまいますか?!すみませんm(_ _"m)

Akira  

2019/03/15 (Fri) 20:40
vanillaice (Akira)

To Mさん

./styles/css
./images/jpg
./script/js

この
./
の書き方はその前の「ドメイン」が同一という意味です。

navigator.serviceWorker.register(JSファイルパス)

このファイルパスにクロスドメインを渡すことはできません。Mさんの場合は

https://yularihappysmile.com/xxx.js

でなければできないよ、という意味です。ですがこのファイルのアップロード先は通常だと
https://blog-imgs-サーバー番号.fc2.com/xxx.js
FTPを利用したとしても
https://file.blog.fc2.com/ID名/xxx.js
ですからドメインが違います。ですから「ユーザーにはできないアップロードですよ」とお伝えしました。
簡単に言うとユーザーが独自にservice workerに登録することはできない、ということです。
あるいは
importScripts()
を使えばクロスドメインも可能なんですが、画像サーバー番号がコロコロ変わるFC2では無理筋というか。

爆速のこの部分のパスは
https://ID名.blog.fc2.com/xxx.js
なんですが、これはバックエンド(サーバーサイド)の処理で行っているのでユーザーからは不可侵です。残念ですが。
「そもそもユーザーにはできない作業」なのでservice workerの説明を省きました、と前のコメントでお伝えしました。

-----
で、このservice workerは登録すること自体が高速化なわけではありません。登録して「何をするか」です。
登録でキャッシュを作成し、そのキャッシュをどのように取り込んでどのように処理するか、というプランが必要なので登録だけしても意味がありません。
爆速の場合はそのプランが「instantClick併用による高速化」である、ということです。

結局運営はどうとでもなるんです。爆速のために画像用の新しい統一ドメインを作ってしまうぐらいですから。
素直に爆速をご利用になるのが一番ではないかと思います。

M  

2019/03/15 (Fri) 21:23

To Akiraさん

Akira様

お返事ありがとうございます!!

な、なるほど…(;´・ω・)

この辺の説明はいくら調べても書かれてなかったのでとても助かりました!!
危うく、この先も迷走を続けてしまう所でした(汗)ありがとうございます(o*。_。)oペコッ

数日間の努力が無駄になってしまいましたが、service workerはあきらめることにします。

素敵なAkira様のテンプレでカスタマイズをすることが私の主眼となってますので、
爆速を使うことはありません。

これからは、無駄を省く作業に専念していこうと思います(^▽^)/

PageSpeed Insightsで自分のブログを検証すると、
過大な DOM サイズの回避のところに「4,057 個のノード」なんて出てしまってますので...

とても参考になりました。ありがとうございます!!

Akira  

2019/03/15 (Fri) 21:43
vanillaice (Akira)

To Mさん(終了のご報告)

ノード数は仕方がないっちゃ仕方ないんですけどね (´・ω・`)
とりあえずMさんはタグが900超えてますよね。これはulの子要素になるんですが、子要素の数は60個までにしろ、とGoogleは言ってるんですね。900だと10倍以上 ^^;

みなさん普段あまり意識しませんが、リンクは最近だとpreloadやprefetchのきっかけに利用されることも多くなり、今後は過剰なリンク数の制限も課題になってくるかもしれません。
というかね、FC2ブログに限らず日本のブロガーさんはサイドメニュー量が多すぎると思います。私今回自分のところの整理しました(笑)

お疲れ様です :)

M  

2019/03/15 (Fri) 21:58

To Akiraさん(お返事不要)

ありがとうございます!!

究極の洗練されたブログを目指します(^o^)丿

mochi  

2019/07/28 (Sun) 22:12

Web奇術ですが…

こんばんは。Akiraさん。

本当はコチラ↓の記事に対してコメントしたかったのですが、
【重要】テンプレートの変更点2つについてお知らせ
https://vanillaice000.blog.fc2.com/blog-entry-931.html

コメント不可記事だったので、以前Akiraさんから「関連記事リストのサムネイル画像有無判別変数」の捜索依頼があった本記事にコメントさせていただきました。
なお、記事の趣旨から外れてしまうことと、純粋にWeb技術を学ぼうとされている真面目な方たちに悪影響を与えてしまう可能性を懸念して鍵コメとさせていただきました。(笑)

コメントの「管理人」「管理人以外」双方を見分ける変数についてですが、管理人コメントブロック変数<!--comment_author-->を利用してコメントアウトを制御することで、疑似的に管理人コメント以外のブロック変数のような効果をもたらすことができます。

<!--comment_author--> <!-- <!--/comment_author-->
HTMLコード
<!--comment_author--> --> <!--/comment_author-->

管理者コメントの時、【<!-- HTMLコード -->】となり、HTMLコードがコメントアウトされる。
管理者コメント以外の時、HTMLコードはコメントアウトされない。

「関連記事リストのサムネイル画像有無判別変数」についてですが、結局見つからず、とりあえず遊びで上記のようなコメントアウト制御によって疑似判別を行っています。ただ上記手法以上に強引すぎて汎用テンプレートには応用できそうになかったので報告するのを見送っていましたが、今回ついでなので。
●FC2ブログの関連記事リスト表示場所「テンプレート変数のみ」でサムネイル代替画像(No Image画像)を表示させてみました。
 https://mochi1999.blog.fc2.com/blog-entry-1780.html
●FC2ブログのテンプレート変数の値有無に応じて、HTML表示を切り替える方法を考えてみました。
 https://mochi1999.blog.fc2.com/blog-entry-1791.html

Akira  

2019/07/28 (Sun) 22:26
vanillaice (Akira)

To mochiさん

こんばんは ('0')/

えと、鍵ついてません(笑)
有益な情報だと思いますので、できればどうぞそのままで。
本件ではその方法は通用しないんです。というのは、属性値に明らかな不正のhtmlが含まれるとブラウザの制御が働いてhtml要素としての整合性も失われてしまうんですね。実際にコメント化して試してもらうと意味が分かると思います。

要は属性値に使わなければ良いというだけなんですが、FC2変数は基本的に「プレーンテキストで吐き出す」ものと「html要素で吐き出すもの」とがあり、本来<%comment_name>は「プレーンテキスト」でなければいけないはずなんですが、管理画面での装飾をつけることでこの大前提が失われます。

返信をコメント名ではなくタイトルに変更するという発想の転換もあるんですが、そうなるとこれまで名前で返信してきたのにどうするの?とか、コメントタイトルが空欄の場合はどうするの?やたら長いタイトルのときはどうするの?といった問題が出てきますよね。
なのでもうホント苦肉の策です。今回のは (´・ω・`)
「管理人以外」の変数さえあれば全て解決するのに(笑)

他には属性値ではなく素直に子要素として出力させて(この場合には変数を利用したコメント化が使えます)onclickでchildrenやsiblingを取得して… というのも考えましたが、速度考えたらこっち( ぶっこみ書き換え)の方が速かった (∵`)
いずれにしても「管理人」と対になるのは「管理人とその他」で管理人も含まれちゃってるんで、管理人名については一度は吐き出されることになる。結局はなにやるにしても二度処理しなきゃいけないということになります。

これがダメだって言ってんの(運営さん宛)
だから変数実装するときのbooleanは真偽両方作ってくれって言ってんの(さらに運営さん宛)

----
あとFC2のブランドアイコンが絡んだ画像(サムネイルやファビコン)は製作者が意図的に非表示化したり変更してはいけないみたいです。個人カスタマイズなら大丈夫だと思います。ちょっとよくわからない理屈ですが、どうもそんな感じみたい (´・ω・`)

mochi  

2019/07/29 (Mon) 22:04

やってしまいました… (^^ゞポリポリ

こんにちは。Akiraさん。
鍵コメとか慣れないことをするものじゃありませんね。(笑)
お言葉に甘えてそのままにさせていただきます。というかパスワードも設定してないんで編集しようもないんですけどね。

そそ。要素内の属性はコメントアウトしようとするとエラーになるんです。
だもんで。今回の場合だったら以下のようにa要素ごと切り替えることで同様の効果があります。

<!--comment_author-->
<a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">
<!--/comment_author-->

<!--comment_author--> <!-- <!--/comment_author-->
<a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">
<!--comment_author--> --> <!--/comment_author-->

↓ちょっとやってみました。
https://mochi1999.blog.fc2.com/blog-entry-1791.html#comment1554

ただ、これらコメント化手法はコードがムダに長くなったり、解読性を損なうことになります。
今回のAkiraさんの改良テンプレートでは、管理者名装飾をしない人はJS部分を削除するだけで済むので、汎用性を考えればその方が理にかなっていると僕も思います。

PHPが弄れない以上、条件分岐的な処理はFC2変数が頼りなので、これに限らず変数の真偽実装は是非ともお願いしたいところですよね。今回のプレーンテキストの前提が崩れちゃったこともそうですが、FC2変数周りは手抜きせずちゃんと整備して欲しいです。

FC2のブランドアイコンが絡んだ画像に対する制約は「共有テンプレとして申請するにあたって」ということなんじゃないかと想像しています。なんか社内的な規約があるんでしょうね。

Akira  

2019/07/29 (Mon) 22:33
vanillaice (Akira)

To mochiさん

こんばんは。

mochiさん。そっちのが良いんじゃねーか(笑)
いや、mochiさんアイデア採用して良いですかね?
作業していて「不要な人は削除して」はやっぱ無理があるなぁ、と思ってて、ちょうどmochiさんと同じことを考えていたところです(ちょっとだけ違うけど)

検索バー対策もそうなんですが(検索バーを表示している人用にfixedのtop位置を変更するJSを入れてます。審査通らないから笑)、絶対みんな消さないんですよ。だってDLだけしてここを訪れてくれない方も居るわけだもの当たり前よね ^^;

ともかくmochiさんそれいただき。この方がやっぱ良いよね?なんか背中押してもらった感じ(笑)

--- 追記
mochiさんココ見て ↓
https://vanillaice000.blog.fc2.com/blog-entry-931.html

クレジットまではいきませんが紹介させてもらいました。いつもありがとうございます :)

mochi  

2019/07/30 (Tue) 22:14

ちょっ持ち上げすぎですってば。(^^ゞ

こんばんは。Akiraさん。

気に入っていただけたようでなによりです。(*^^*)

今回のコメントアウトを利用したブロック変数の論理反転的な使い方は僕のオリジナルではなく、2年ぐらい前にとある理由から「記事追記が存在する時に部分的にコメントアウトする方法」を探していた時に紹介されていた手法だったりします。

たぶんその時見たのはこの記事↓だと思います。
FC2ブログで「追記がある場合に表示させない部分」を作る
http://128bit.blog41.fc2.com/blog-entry-335.html

これ2013年に書かれた記事なんですよね。FC2ブロガーの層の厚さと奥の深さを感じます。

んで。その応用例をAkiraさんに紹介したというだけなんです。
なので。あそこまで称賛された紹介を受けると、気恥ずかしいというか心苦しいというか…(笑)
また僕の奇術がお役に立てそうな場面があれば協力させていただきます。(^^)/

Akira  

2019/07/30 (Tue) 22:33
vanillaice (Akira)

To mochiさん

mochiさん、こんばんは ('0')/

--- 一旦書いたんですが広告に関する裏技的内容が含まれるので自主規制というか、削除しました ---

コメントアウトを属性内で一生懸命やってましたよね。私。それで「できねー できねーよ (;ωq`)」みたいな。
要素ごとアウトすれば良いじゃんね。バカかよ俺、って思いました(笑)

また相談に乗って頂くことも多々あると思います。今後ともよろしくご指導をお願いしますー。
mochiさんサイコー(笑)

* 消した内容を既読かもしれませんので一言。
広告周りのコメントアウトって対策入ったよね?
と(笑)

mochi  

2019/07/31 (Wed) 00:53

To Akiraさん

こんばんは。Akiraさん。

「コメントアウトを属性内で…」は僕も同じことやってハマったことあるんでよく分かります。(爆)

残念ながら自主規制の内容は拝見できなかったのですが、文面から何を書かれていたかは予想ができます。(笑)
広告周りは「コメントアウト除け」目的ではないと思いますが、FC2によって自動挿入されるコード中にコメントアウトが使われているため、表示がおかしくなったりW3Cバリデータエラーが出ることになると思われます。

それとは別に広告をごにょごにょする方法は…、まぁFC2広告は応答速度を除けば良心的な方だと思ってますし、無料で十二分に楽しませてもらっている身としては、BANされるようなことだけは避けたいです。(笑)

こちらこそ今後ともよろしくお願いします。(^^)/

ぼっちん  

2019/07/31 (Wed) 09:11

チラ読みしてましたが(笑)

Akiraさん、mochiさん
おはようございます。

昨夜短時間で消えた「mochiさんもぼっちんさんも」部分は、笑いつつ読ませて戴いておりましたが、そのまま口はつぐんでおきますね~(笑)

Akira  

2019/07/31 (Wed) 14:01
vanillaice (Akira)

To mochiさん

mochiさん、こんにちは ('0')/

mochiさん有料アカウントではなかったですね。ごめんなさい ^^;
こちらこそよろしくお願いします :)

Akira  

2019/07/31 (Wed) 14:02
vanillaice (Akira)

To ぼっちんさん

ぼっちんさん、こんにちは ('0')/

ご覧になったんですね(笑)
たぶんmochiさんは違った ( ̄∀ ̄;)
でもぼっちんさんはやったことあるはず。私もやってた ←
有料アカウントなので広告を〜というのではなく出力スクリプトをゴニョゴニョするためのアレのことです(笑)

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)