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

FC2ブログのあれこれ

2019/02/14

2022/10/03

vanillaice (Akira)

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

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

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

速い仕組み

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

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

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

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

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

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

インライン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の提供をお願いしたい(笑)
あと速度にこだわりを見せるならこのリクエスト聞いてくださいよぅー (∵`)

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

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

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

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

--- 追記 2019.2.14

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

広告が免除される。

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