ページの表示スピードはとても重要

ページの表示スピードはとても重要

webのあれこれ
2019/02/15 8
vanillaice (Akira)
vanillaice (Akira)
SEO 高速化

先日「公式爆速テンプレートが登場」というアナウンスがありました。私もおすすめする記事を書いています。今回は 表示スピードはとっても大切 という内容を改めて。

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

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

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

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

デザインが良ければという時代は終わった

良くも悪くもスマートフォン時代ですね。現在のデバイスの王様はパソコンではなくスマートフォンです。私たちが日々当たり前に使っている「web検索」を司るGoogleもパソコンからスマートフォン重視に完全シフトしています。

モバイル ファースト インデックスを開始します

本日、Google は 1 年半の慎重な実験とテストの結果、モバイル ファースト インデックスのベストプラクティスに準拠したサイトの移行を開始したことを発表します。

MFI (モバイル ファースト インデックス) を簡単に言うと、サイトの第一評価がこれまでのパソコンでの様子からモバイル、つまりスマートフォンでの様子に切り替えられ、スマートフォンでの見た目・操作性・スピード・表示される内容(コンテンツ)が最重要 となります。

そしてGoogleは常に「検索の快適性」を追求しており、快適さというのは「狙った通りの情報をいかに的確に素早く取得できるか」が一番でこれまでもこれからも変わりはありませんが、加えて「情報が素早く表示されること」つまり スピード の強化を今盛んに進めています。

その代表的な取り組みが AMP (Accelerated Mobile Pages, アンプ) です。ただしFC2ブログは残念ながら現時点で非対応ですから今回AMPについては省きます。

Googleは高速サイトを優遇しつつ(AMP)、あきらかに遅いサイトは検索順位を下げることになる としています。いくら良いことが書いてあってもアクセスに3秒も4秒もかかるようなサイトはGoogleにとっても検索ユーザーにとっても害でしか無い、という判断でしょうね。

いくらデザインが美麗であっても、アニメーションが豊富で見た目に楽しくても、表示が遅いサイトは NO ということです。今後は重たいブログパーツ系の提供サイトも徐々に数を減らしていくような気がします。実際既にもうその動きは始まっていますね。ブログパーツによる演出の楽しさよりも表示が重たいことへの不快さの方が上回るということでしょう。それはそれで残念な気はしますが仕方がないですね。

公式爆速テンプレートを推薦する理由

私が推薦する必要などそもそもありませんが(笑)

最近だと アメーバブログの速度改善が目覚ましい ですよね。アメブロはAMPも提供されています。しかしパソコン版はひどいと言わざるを得ない。
たぶんアメブロなんかはもうパソコンユーザーをほぼほぼ無視していると思います(笑) でもこれからはどこのサイトもそうなっていくでしょう。もちろんFC2も。

私が思うFC2の現時点のウリは以下のようなもの。

  • レスポンシブデザインが使える
  • HTTP2通信であること

この二つか他サービスと比較した際の大きなアドバンテージになっていると思います。ですからもっと強調しても良い。

レスポンシブデザイン (以下「RWD」と称す)が使える、というのは RWD設定が可能である という意味です。パソコンのテンプレートとスマホのテンプレートが共通化されている という点が大事。パソコンではRWD、スマホではスマホ専用版、という設定ではなんの意味もありません。
RWSの利点はスマートフォンでも利用できる というところ。スマホで使わないならばレスポンシブデザインを採用する意味などありません。

アメブロは速度対策の点で頭一つ抜きん出た形になっていますが、RWDの提供はいまのところ無いんですね。RWDは断念した と開発者ブログの方に書いてありました。

で、FC2がどんな考えかはわかりませんが、新規開設者には爆速テンプレートをデフォルトテンプレートにすると良いですよね。現在はパソコン版テンプレートが「basic_white」スマホ版は「new_basic_white_ap」ではないかと思います。これを「爆速テンプレート」8種のうちいずれかに変更したら良いと思います。その場合には スマートフォン版表示設定「表示しない」 つまりRWD設定をデフォルトでopt in(有効)状態にしてしまえば良い(笑)

RWD設定の広報が行き届いてないですね。「パソコン版」としてRWDを選んでもそれがスマホでも使えるという事実をご存じない方が非常に多いですし、スマホ版を非表示化する設定があることもご存じない。そもそもRWDの意味とか知らない、みたいな。だから思い切ってデフォルトopt in化。無茶でしょうか。個人的にはそうは思わないが (´・ω・`)

爆速テンプレートを使用するメリット

ユーザーのメリットではなくてFC2ブログにとってもメリット。

まず爆速テンプレートをデフォルト化すればFC2ブログ未開設者が見た時に「FC2ブログってRWDがデフォルトじゃん!」と思いますよね。RWDを知っていればの話ですが。そして「FC2ブログめっちゃ速いじゃん!」とも感じますね。そして最大のメリットは「FC2ブログ広告出ないじゃん!」です(笑)

技術的な面からもFC2ブログはhtml5化がなかなか進まないですね。他サービスは自由度が低い代わりにほとんどのユーザーがhtml4からhtml5に移行が完了しています。でも様々なテンプレートを選べるFC2の環境下ではどうしても見た目だけで選んでしまいがちでいまだにhtml4のテンプレートを使い続けている方もとても多いです。「爆速」というメリットがあればもしかしたらhtml4テンプレート利用中のユーザーも切り替えてくれるんじゃないでしょうかね。なので今回のリリースはその点に於いてもかなり効果的だと思います。

あとSSLが自動で有効化されるとのこと。新規開設は当然SSL設定済で提供するのがベストですが、既存ユーザーがテンプレートを爆速に変更してくれればそちらも進みます。

爆速リリースの何が良いって、結局ユーザーの知識に頼らざるを得ない諸々の変更点ってあるじゃないですか。速度対策, SSL化 などなど。それらをほとんど意識させずにテンプレートの特徴に惹かれたユーザーがそれを設定するだけで解決されちゃう点です(笑)

「SSL…??」という方もまだいらっしゃるでしょうから、説いたりするよりもテンプレートを変更してもらって自動で適用させる。これは良いことだと思います。知識が無いのだからそのぐらい強引な方法でも良いと思うのよ? (´・ω・`)

何が言いたいかというと FC2ブログ全体の水準が上がる ってことです。ちゃんと現在のweb標準であるhtml5であり、速度面も優秀であり、Googleが推しまくっているRWDであり、7月に訪れる「Better ads standards」(広告の規制が厳しくなります)の対策にもなり。良いことづくめじゃないですか? (´・ω・`)

まとめ

現在公式テンプレートを愛用しているという方は是非爆速テンプレートへの切り替えをして頂きたいなぁ、と思います。そして私の方でも製作テンプレートについては速度対策を重視していきます。Page Speed Insightsで100点取れないテンプレートは配布しません。たぶん。

FC2ブログはカスタマイズ性の高さがウリではありますが、今回の爆速テンプレートはカスタマイズ不可。
ブログサービスは広告配信が大きな収入源ですが爆速テンプレートは広告免除。
それでもリリースしたFC2には侠気を感じますわ(笑)
カスタマイズ不可についてはそのぐらい思い切って良いと思います。カスタマイズさせたら恐らく全ての努力が無に帰してしまう(笑)

ちょっと正直FC2ブログの水準が下がっているなぁ、と感じていましたので爆速テンプレートが起爆剤になると良いなと思います。ただこれ…「今後もAMPの提供はありません」ってはっきり言われたような気もします(笑) まぁそれはそれで (o'ω')ノ

 8

There are no comments yet.
ぼっちん
確かに爆速です(笑)

Akiraさん、こんばんは~ ^^

たまたま弊ブログに公式の爆速テンプレート「rapid2_white」を設定なさったブロガーさんが立ち寄ってくださったものですから、つい今こっそり(笑)DevTool(ディベロッパーツール)で速度測定させて戴きました(笑)

rapid2_white
【Fast 3G】 DOMContentLoaded: 932ms Load: 1.57s

めちゃくちゃ爆速ですね、ビックリというか想定通りと言うか(笑)
私の現在のテンプレート(Akiraさんの Lilting)で、頑張って高速化努力してあるものでも

Lilting jQuery追加あり(笑)
【Fast 3G】 DOMContentLoaded: 2.40s Load: 2.96s

こうなんですから、爆速さんはかなりのものですよね ^^
同テンプレートを導入すると強制的にSSLになっちゃうところも、笑えますけど「SSLってなあに?」って皆さんにはかえってd(-_^)good!!かと思いますね。
ただ、まったくカスタマイズ出来ない仕様って、なんか個性がなくなってしまってどうなんでしょうって思ってしまうんですけど (^^ゞポリポリ

2019/02/15 (Fri) 22:19
vanillaice (Akira)
Akira
To ぼっちんさん

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

初回の表示については全てがインライン化されているのとこっそり新変数の700pxサムネイルが効果を出してます。
その他のカラクリはですね、つまりはpreloadとpushStateです。
爆速テンプレートはページ遷移をしていません。なのでユーザーにJSを追加させないんですね (´・ω・`)
pushstateはdomcontentloaded系のJSの再取得はしませんのでそれ故に速く、それ故にJSが追加できない、それ故に強制SSL(クロスドメイン不可)、それ故に通常のページ送りも使えないんです。通常のリスト型ページ送りは現状のFC2ではその都度JSでデータを取得しなければいけませんが、無限スクロールならばその必要がありません。
pushstateはページを遷移させているように見せるだけで実際はbody部分だけ差し替えしてるだけなんです。だから速い。そして全てはpushstateのために切り捨てたのでしょう。きっと。

これはもう運営の特権でしか再現できないかな。だって通常の共有テンプレートってhtmlとスタイルシートが開放されてますよね。一方爆速は表示さえしてくれない。これはユーザーによる改変を防ぐためです。
でも一般製作者はその「改変不可」を使わせてもらえません(笑)

完全カスタマイズ不可、プラグイン任意追加不可、完全ユーザー任意JS利用不可にすれば同じスピードにできますよ。その代りhead情報が書き換わりませんし、記事内のJSも動きません(笑)
今テキトーにサンプルテンプレを作成しましたが爆速とほぼ同じ状態を実現可能。使ってみますか? (´・ω・`)
無限スクロールなので自分では使いたくありませんし、既にあるのと同じもの作ってもなぁ、と思うので通常の配布はしません、というか配布するつもりは今のところありませんけども(笑)
というよりも例えブログ内限定でも配布はできないか。広告が読み込まれないので。これは一般製作者がやってしまえば完全にアウトですよねぇ (´・ェ・`)

カスタマイズ不可というのも絶対に無理なんですね。止める権限もないのでクレームになることが目に見えてます。なので今回の爆速についてはちょっと「ズルい」方法だとも思います(笑)
でもそこまでの特化は運営に任せればヨシ、と。

爆速と同じレベルにするには
・広告を排除すること
・JSを一切利用しないこと
が絶対条件なので、シンタックスハイライトを使うだとか、jQueryを入れるだとか、そういうテクニカルな処理を加えることができません。
通常ページをAMPと同じ速度にするのが不可能なように、この条件が揃わない限り一般テンプレートでは無理です。
努力が水の泡にならないよう先にお伝えしておきます ^^;
ただ実際は 使うJSが事前に把握できていさえすればなんとかできます
ぼっちさん、開拓者ですから努力しそうなので(笑)

あとLiltingのサムネイル表示を新変数に変えても良いと思います。これでまたスコア上げられると思いますので。mochiさんが新変数を捕まえてくれました。
<%topentry_image_url_760x420>
です。


追記だらけでごめんなさい。ぼっちんさん、サムネイルサイズの対策されてるんですね。500pxだから新変数より小さかった(笑)
ともかく一般ユーザーはぼっちんさんが書いている記事内容が正攻法ですから是非続編も書いてくださいね。爆速は運営特権で実現しているだけで一般ユーザー向け(爆速以外のテンプレートを利用したい人向け)というわけではないもので。

2019/02/15 (Fri) 23:08
SparkNorkx
シナリオ

こんにちは。

FC2が彼らの公式ブロガーに新しいテンプレートへの切り替えを強制するならば私は笑う。

冗談はさておき、私は新しいテンプレートがあまりにも単純で西洋の聴衆にとって魅力的ではないと思う。

2019/02/16 (Sat) 04:38
vanillaice (Akira)
Akira
To SparkNorkxさん

こんばんは (●'0'●)/

確かに没個性は否めないですね。そして欧米諸国のサイトと比べて日本のブログサービスがダサいのは今に始まったことではありません(笑)
日本は制服文化だからかしら ^^;

良いことづくめと書きましたが実際にはデメリットもありますよね。没個性・裏でメモリを喰っている点(メモリリーク)など。
いずれにしても初心者向けでしょうか。いろいろやりたい、いろいろ出来るという方が満足できると思えないので、そういう方は使わないというか使えないというか (´・ω・`)

私はバランス派なのでスピードさえ優れていればOK、とはならないですね。デザイン面・機能面は捨てたくありません(笑)

2019/02/16 (Sat) 17:44
ぼっちん
To Akiraさん

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

運営さんのpushstateを取り入れた爆速テンプレートの手法って、WordPressでは3年?くらい前から使われ始めた、ajaxとpushstateを組み合わせた方法(pjax)そのままのような気がしますけどね(笑)
それだったら、ちょっと頭を捻ったら、JSやjQueryなども使えるままでbodyを強権的にキャッシュを利用してバサッと入れ替えちゃうことだって出来るように思うんです(笑)
但し、閲覧デバイス側のCPUやメモリーが一気にバンって感じで負荷が掛かりますけど(爆)
(~ヘ~;)ウ~ン 私的にはそんなのは邪道(笑)って気もしないではないですけど(笑)
これ、サーバーを自由に使いまくれる運営さん優越的特権テクニック(笑)ですから、ユーザーサイドには絶対解放してくれないですよね(爆)

有料会員には、、、やっぱ無理ですよね~ (^_^; アハハ…


ぼっちんさん、サムネイルサイズの対策されてるんですね。500pxだから新変数より小さかった(笑)
Akiraさんの要約表示タイプのテンプレートの場合には、けっこうこの500pxってサイズは都合が良くて、PCサイズでもタブレットサイズでもスマホサイズ画面でも、けっこう綺麗に重宝に表示されて具合が良いことに実験的に判明したサイズなんですよね(笑)
但し、記事編集画面下の[アイキャッチ画像]設定欄で設定したサムネイルにはとても有効ってことでして (^^ゞポリポリ

ともかく一般ユーザーはぼっちんさんが書いている記事内容が正攻法ですから是非続編も書いてくださいね。
ハーイ(^O^")/ 「スマートフォン表示速度改善」カテゴリ第四弾(最終記事)書くつもりではいるんですけど、いま予定外の忙しさに追われてしまっておりまして、それが収まったら書こうと思っております (^^ゞポリポリ
まあ、ヘッポコ正攻法ですけど (^_^; アハハ…

2019/02/17 (Sun) 09:14
vanillaice (Akira)
Akira
To ぼっちんさん

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

そうです。以前私の方で「ちょっと現実的じゃない」と触れたことのあるpjaxです。
https://vanillaice000.blog.fc2.com/blog-entry-613.html

運営の取っている手法はマウスオーバーでの先読みなのでメモリは結構喰っているんじゃないかと思います。そして遷移先の予測ができませんのでページ種単位のJS内容切り替えが非常に困難なのと、jQueryなどが維持できるとしても広告はやはり無理でしょうね。ランダム配信ですし1社限定というわけではないのでイベントの発火はできないと思います。

有料会員でも恐らくかなりのグレーゾーンで、有料会員個人が行うのは良いとしても私が配布するのはアカバン確定だと思われます(笑)
有料会員限定としたところ制御できるはずないですもんね (´・ω・`)

2019/02/17 (Sun) 11:44
-
管理人のみ閲覧できます

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

2019/02/20 (Wed) 11:35
vanillaice (Akira)
Akira
To 爆速の件 内緒さん

やる気あったんだ?みたいな(笑)
内緒さん、こんにちは ('0')/

はい。あのテンプレートは取り下げてしまいました。PCでは良いんですが、スマホだとマウスオーバー自体中途半端にしかできませんし、害にしかならないもので (∵`)
スマホではサムネイル表示だけ、と割り切ればそれで良い話なんですけどね(笑)

表示負荷についてはなるべく重たくならないように考えて製作しているつもりですのでしばらくお試しくださいね。
自分がハッピー、というのは大切です。いろいろ考えすぎても更新が億劫になってしまいますよね。
いつもありがとうございます :)

2019/02/20 (Wed) 17:46

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

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

webのあれこれ