FC2ブログでページの高速化のためにできること

FC2ブログでページの高速化のためにできること

カスタマイズ
2017/11/18 8
vanillaice (Akira)
vanillaice (Akira)
Instruction Education SEO Tips 高速化 中級者向け

ページの高速化についてです。
検索すると指南が山ほど出ては来るのですが、FC2ブログで「出来る」ことと「出来ない」こと を知っておかないと対処のしようがありませんよね。

一般的に推奨されている高速化の方法について、FC2ブログで行う という点で仕分けをしてみようと思います。
結論から言うと、FC2ブログで出来るのは画像の容量コントロールとhtml, CSSソースの圧縮ぐらい です。

FC2ブログでは「出来ない」ページ高速化対策

まずは「出来ない」あるいは「非常に困難」と思われる対策です。

Gzip圧縮

Gzip圧縮というのは、対象ファイルの保存形式を .gz という拡張子の圧縮ファイルに変換することを言います。
圧縮されたファイルというのはみなさん一度は目にしたことがあるかと思います。 圧縮ファイルのアイコン 上が元のCSSファイル、下がgzip圧縮後のファイルです。
元が60KBなのに対し、圧縮後は10KB。約1/6まで容量が削減されています。
JSファイルなどをgzip圧縮すると、平均で約50〜80%軽量化することができます

FC2ブログのレスポンスヘッダーを調べますと、このgzipを扱える仕様になっていますが 使えるのは運営だけ
ユーザー側はいくら使える仕様であろうと .gz拡張子のアップロード先がありません
もったいないなー ( ̄∀ ̄;)有料会員にだけでも開放してくれんだろうか ( ̄∀ ̄;)

ページの軽量化で最も効果が得られるのはこのgzip圧縮だと思います。

CSSの読み込みを後回しにする

この方法自体もかなり効力があります。
これだけでも効果は高いですし、gzipと組み合わせればページスピードは遥かに上がります。

がしかしBUT。
これはかなり難しい作業です。

ファーストビュー という単語を目にしたことがあるかと思います。
英語的には Above the fold と言いますが、パソコンでもスマートフォンでも一度に目にする内容というのはイコール画面サイズと同じですよね。
つまり スクロールせずに見える範囲 のことを指します。

CSSというのは レンダリングブロック 要因なんですね。
レンダリングブロックというのは平たく言うと、その内容を全て解釈するまでは次の作業に進めない ということです。
CSSと並び、JSもレンダリングブロック要因 です。
なので単純に後回しにすることでhtml描画などを妨げない、という理屈です。

ところがページの描画というのはデザインとも密接な関係があるわけなんですよ。
例えばサムネイルを形成する(バラバラなサイズの画像を全て統一する)だとか、メインカラムが左でサイドを右にするだとか。
これは全てCSSで以て行われますので、後回しにしてしまってはファーストビューを得る時点ではまだページが整わないことを意味します。

それを避けるためにファーストビューに係る一部の重要なCSSだけをインライン化(head情報内にstyleタグで記述)をし、残りは後回しにする、という方法をGoogleも勧めていますが、どこまでをファーストビュー関連とみなすかの選定が非常に難しい んですね。
テンプレートを自作する作者でもかなり難しいです。まして自主制作しない一般ユーザーさんにとっては相当困難な見極め作業となります。
テンプレート製作者が予めやってくれれば良い… という声もあるかもしれませんが、みなさんのカスタマイズがかなり困難というか、ほぼ不可能レベルまで難易度が上がってしまいます。
カスタマイズ不可、としてしまえばみなさん困りますよね (´・ω・`)

CSSを後に回すというのはイコール デザインやUXを犠牲にする ことにも繋がりますので、デザインは二の次でテキストさえ読めれば良い。という方以外はおすすめできません。

pjaxの導入

pjaxというのは pushState + ajax です。
pushStateというのは html history API と呼ばれ、簡単に言うと 履歴を上手く利用する ページ表示の仕方です。
ajaxというのは 非同期通信 のこと。
非同期通信をざっくり説明しますと、
通常の通信というのはサーバーにリクエストが届き、レスポンスが返ってくるまで他の処理が行なえませんが、ajaxを用いることでレスポンスが返っていなくても他の処理を進めることができます。
この2つを組み合わせることで ページ遷移がめっちゃ速くなります。
しかしFC2ブログで使うには… うぅーん、やはりかなり厳しいのではないか (´・ω・`)

やろうと思えばできないこともない。しかし テンプレートにデフォルト導入というのは無理
というのはですね、FC2ブログの「プラグイン」ありますよね。
これはみなさんが任意で選びます。公式プラグインもあれば共有プラグインもあります。
誰がどのプラグインを利用しているか、というのを製作者側で把握することは不可能なんです。
pjaxの場合、ページ遷移後は原則としてJSの再読込を行わない という特徴があります。
それ故にプラグインに一つでもJSが含まれているとレイアウトが崩れてしまいます。

再読込を強制することもできますが、そのためには どんなJS内容であるのか がわからなければ指定ができない。
という理由でデフォルト採用は不可。

このあたりが自由度と引き換えの犠牲って感じですよね。
仮にプラグインが全ユーザー共通であればpjaxについては割と簡単に導入できるのだけれど。

ここまでの三章が「最も効果があると思われるがFC2では使えない・厳しい」という方法です。

FC2ブログで「出来る」ページ高速化対策

最も有効な方法は使えない、というのが大前提で、じゃあ後何が残されているか・何が出来るかについてです。

テンプレートは要約タイプを選ぶ

なんとなく勘違いしている方が多いように感じるのですが、それこそが勘違いでしょうか(笑)
全文表示タイプ というのは昔ながらのトップページ表示方法で、ユーザーが記事に記した内容がそのままトップにも反映されるタイプを指します。
一方 要約表示タイプ というのは後発ですね。
FC2ブログで導入されたのも数年前のようです。

全文表示 要約表示

ページスピード計測サイトの GTmetris での評価は以下の通り。

全文表示 要約表示

純粋にページスピードだけを見ると、全文のB評価に対し要約はA評価。
要約タイプの方が表示は速い んです。
ちなみに赤で囲った右側に全文は「B」要約は「C」となっている項目がありますが、これは
〝Gzip圧縮出来る要素がありますよ〟ということで要約の方が評価が下がってます。
そして要約サンプルの方はフワっと表示させていますので、なんとなく全文より遅い感覚があるかもですが、実際には結果の通り。

サンプルに利用したテンプレートですが、いくつか特定条件があります。

全文タイプのサンプル

  • SNSシェアアイコン(ブログ個人設定)は非表示。--- 表示させるとスピードがかなり低下します。
  • 動画コンテンツは含まない --- 本文内に含むとスピード低下
  • html, CSS共にソース圧縮を行っている(gzipではありません) --- 通常では若干スピード低下

要約タイプのサンプル

  • SNSシェアアイコン --- 表示させていてもいなくても影響なし(トップには出てこないため)
  • 動画コンテンツ --- 影響なし(トップには出てこないため)
  • html, CSS共にソース圧縮を行っている(gzipではありません) --- 通常では若干スピード低下

特に SNSアイコン なのですが、私が毎回テンプレートに直接内容を記しているものについてはほぼ影響はありません。
スピードに悪影響を及ぼすのは ブログ個人設定から表示させるアイコン類 です。
これらはJSを用いて SNS各社のAPIに基いて表示を行います ので、かなり負荷が高いんですね。
要約の場合には個別記事にSNSアイコンがあってもトップには出ませんので影響はありません。
が、全文の場合はトップにもアイコンは出ますので、アイコン数 × 記事表示件数 の負荷が加算されます。
サンプルではB評価ですが、SNSアイコンを表示させることで 一気にD評価程度まで下がります。

要約タイプは表示内容がコントロールされていますので、誰がどう利用してもほとんど変化はないのですが(FC2プラグインの内容は度外視)、全文タイプの場合には 各ユーザーがどのように記事を書いているか によって結果が大きく変わります。
本文と追記を分けていない人は分けている人と比べて遅くなりますし、動画のある無しも影響します。
SNSアイコンを表示させている・テーブル(表)をたくさん利用している・記事内でJSを利用している など、そうでない方と比べるとページスピードが大きく低下します。

全文タイプを利用している方は、最低でも「本文」と「追記」を分ける対策は必要です。
動画や画像などは「追記」に記す、というだけでもトップページでの負荷は下げられます。

画像の容量削減を確実に行う

スマートフォンから投稿される方も最近は増えていると思います。
スマートフォンの写真というのは ものすごくサイズ自体も容量も大きい んです。
スマホ写真の場合は 3000px なんてサイズで保存されますが、じゃあそれをブログに掲載した時に3000pxそのまま表示できるかと言えばそれは無理です。
横3000pxもあるテンプレートなんてまず無い(笑) せいぜい大きくても1000pxちょいだと思います。
ですからスマホで撮った写真の場合には サイズも容量も削減 した方が良いですね。

おすすめアプリ

バッチリサイズ2 - 複数の写真/画像をまとめてリサイズ
バッチリサイズ2 - 複数の写真/画像をまとめてリサイズ
開発元:Koichi Otera
無料
posted with アプリーチ

Androidアプリの方はちょっと良く知らない。ごめんなさい ^^;

パソコンはアプリを落とさずともオンラインサービスを利用すれば簡単です。

おすすめサイト

TinyPNG – Compress PNG images while preserving transparency

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

画像の容量削減 = サイズを小さくする
と考えてしまいがちなんですが、この2つは分けて考えた方が良いです。
特に スライダー などをトップページに掲載している方は、横1000px程度は残しておいた方が良いと思います。
でないと拡大されて画像がぼやけてしまいます。
高解像度ディスプレイではぼやけが大きくなりますので、1000pxをボーダーラインにしておくと良いのではないかと。

画像の容量はページのローディングに負荷をかける大きな要因 ですから、常に容量の削減を怠らないようにしましょう。
画像掲載数の多い方でこれまで容量に無頓着だった方は、容量削減を行うだけでもページスピードが速くなることが体感できるかと思います。

確実に出来そうなことと言えばこの二章の内容ぐらいでしょうか。
html, CSS, JSの知識が無くとも出来る、という意味で。

やろうと思えばやれそうなこと

やろうと思えばなんでもできる (o'ω')ノ かもしれない。

htmlソースとCSSソースを圧縮する

ここでの圧縮はgzipではありません。
改行やスペースやコメントアウトなどを徹底的に排除する という意味です。

ソースコードというのは人間が理解しやすいように インデント, スペース, 改行 などが用いられます。
でもそれは人間のためにしているのであって、コンピュータにとってはただの無駄 なんですね。

一般的なCSSの書き方というのは以下の通りです。

h1 {
  margin: 0;
  color: black;
  line-height: 1.5;
  padding: 10px 0;
  font-size: 1.3em;
  font-weight: normal;
}

これをこうしましょう、って話です ↓

h1{margin:0;color:black;line-height:1.5;padding:10px 0;font-size:1.3em;font-weight:normal;}

これだけでもカスタマイズというのはかなり困難になります。
ですから圧縮をする場合には 必ず元ソースの保管 をしてください。
ソース全体が圧縮された状態でカスタマイズ、というのはほぼほぼ無理ゲーですので、圧縮前の内容は必ず取っておく、と。

html圧縮サイト

Compress HTML Source Code

Online Compress HTML tool can process an html document and compress the HTML source code by removing unwanted white spaces, tabs, comments. By applying Compress HTML tool to your HTML code will improve page load time and faster email delivery.

英文のページですけれども、こちらのサイトは JS内容の圧縮は避けてくれます
htmlソース内にはJS内容も含まれています。
JSというのはテキトーに圧縮してしまうと動かなくなってしまいますので、絶対に避けてください。
ちなみに私のリリース済みテンプレートはJS内容のほとんどが圧縮済み状態になってます。
一部「ユーザーさんがカスタマイズを行うと予想される」部分は圧縮を避けています。
でないとカスタマイズ難易度が激高になってしまうので。

CSS圧縮サイト

CSS Minifier

Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

html, CSSいずれも、テンプレート設定画面の元の内容(HTML編集, スタイルシート編集)と圧縮後の内容をそれぞれ差し替えるだけです。
くれぐれも自己責任で。
ただgzip圧縮と違い、ページスピードの劇的な変化というのは望めません。

スクリプト(JS)ファイルにasync属性を追加

こちらは上級者向けかなぁ、と思います。
JSがレンダリングブロック要因である、というのは先に述べましたが、async属性を追加することで 非同期通信(バックグラウンドでの読み込み) を行うようになります。
JSは記述順に処理をし、処理中はhtml解釈・描画などを一旦全て中止します。
asyncを設定することで呼び出し順ではなく読み込みが完了した時点での実行になりますので、ページ全体のレンダリングを遮断しなくなります。

ただ、JS内容がheadではなくbody終了タグ直前に記してある場合にはあまり意味が無いというか。
使いどころとしては以下のような感じでしょうか。

  • JSファイルが <head>〜</head> 内にまとめられている。
  • ファーストビューに 明らかに 関連が無い。
  • 記事内で用いるスクリプト など。

んー。ちょっとまぁ、使い道がかなり限定されるかな、と思います。
そして見極めも必要ですよね。
JSというのは実行順がとても大事ですので、適切な処理を行わないとページ自体に害を及ぼすこともあります。

記事内でのスクリプトというのは例えば第三サービスのブログカードなんかがそうですね。
こちらについては積極的にasyncを利用したい場面です。

さらに注意点としては html5テンプレートでしか使えない という点。
旧html4やxhtmlでは利用できません。

カスタマイズ時に気をつけたい点

みなさんがテンプレートをカスタマイズする際に「これはアカンやつやなぁ…。」と思う点を挙げてみようと思います。

CSSをやたらに外部ファイル化しない

例えば「見出しを目次化する」CSS、例えば「見出しの装飾をする」CSS、「画像に枠を付ける」CSSなど。
つまりテンプレートにデフォルトで含まれていないCSS内容を追加する時にですね、それぞれを外部ファイル化してこういうことをしてしまう方が多いんです ↓

<head>
  ...
  ...
  <link rel="stylesheet" href="//mokuji.css" media="all">
  <link rel="stylesheet" href="//midasi.css" media="all">
  <link rel="stylesheet" href="//gazou.css" media="all">
  ...
  ...
</head>

何故こうするかというとたぶん「テンプレートを変更した時に移植が楽だから」だと思うのですが。
CSSというのは何度も言うようにレンダリングブロックを行います。
それがさらに 通信リクエスト まで行わせるとなると、わざわざ自分でページスピードを遅らせているようなものです。
CSS内容は大元のCSSに追加し、外部ファイル化は避けましょう。

不要なものは display: none ではなく、htmlソース内から削除する

これも多いんですよねぇ (´・ω・`)
某Q&Aサイトなんかでもよく見かけるんですが、
Q「トップページから記事の要約を消したいです。」
A「display: none でできますよ。」
こういう回答がまかり通っていますけれども、ページスピードやSEOなんかを絡めて考えるならば これはアカンやつ。

CSSの display: none; という指定ですが、これは 実際には有るものを無いように見せかける だけです。
実際は存在しているのですから 読み込みや解釈はしっかり行われます
本当に不要なものであるならばCSSでの表示操作を行わず htmlから対象要素の削除を行なってください。
でないと目に見えてもいないもののために無駄に表示が遅くなります。

長文コメントや無意味な改行はなるべく避ける

カスタマイズするとやりたくなりますよね。
コメントアウト は「どんなカスタマイズを行なったのか、どこで行なったのかの目印」として。
ソース内改行 は「近接の内容と見た目を独立させることで探しやすくする」ために。
ここまで記事をお読み頂いた方は「なるべく避けた方が良い」とお分かり頂けるのではないでしょうか。
ただしこのあたりはメンテナンス性との天秤ですので、意義があると思えば無理に排除する必要はありません。


すぐにできる対策というとテンプレート選びと画像の容量削減ぐらいかなぁ、と。
あと全然関係ないんですが、SSL証明書の件でGoogle ChromeがFC2ブログに対して警告を出してますよね。
運営さんはちゃんと考えているんだろうか ( ̄∀ ̄;)
機会があればこの件はまた記事にしますけれど。

というわけで、FC2ブログでできるスピード対策はあんまり無いよね、という記事でした(笑)

 8

There are no comments yet.
hige
あれま

 あれま 結局ないのかい! と、大阪人の突っ込みを入れてみる。
 すんません。実は又々勉強させていただきました。色々知らないテクニック。
 全文表示タイプのSynchronisityを使わせてもらってますが、最近は追記を使用する事にしてます。
 で、軽減されるのですよね。と思ってますが、ダメ?
 私のブログは画像中心なので、Akira氏ご推薦の画像を見た目で判らない範囲で圧縮しています。画像の大きさを小さくするんではなくて。

>SSL証明書の件でGoogle ChromeがFC2ブログに対して警告

めっちゃ 気になるんですが

2017/11/18 (Sat) 22:59
Akira
To higeさん

higeさん、こんばんは (o'ω')ノ

追記を分けるだけでも随分軽減されますよ。
要するにトップページでは数件が一度に表示されるわけですので、画像掲載数なども増えますよね。
追記にしまえばトップには出てこないので、追記分がトップから減算されるわけです。

証明書の件はシマンテック証明書問題です。
シマンテックがGoogleからの再三の改正要求に応えなかったので、2018年の10月下旬以降はシマンテックの証明書を無効化するようです。
FC2ブログはジオトラストなので、証明書はシマンテックから発行されます。
なんで最初からサイバートラストにしておかないのか謎すぎる ( ̄∀ ̄;)
ただビミョーっちゃビミョーですよね。
Googleはかなり前からシマンテックを問題視していたようですが、強硬手段に出ると報じたのが今年の9月なんですよ。
ちょうどFC2ブログがSSLを導入した時期(笑)
不運なのかなんなのかー ^^;

2017/11/18 (Sat) 23:03
hige
シマンテックの件

 追記の件。私の理解であってた様で。ひとまず安心。
 で、画像中心の重い記事では、追記の方に殆どの記事を書き、トップページ?には記事の目玉になる様な画像を一枚とサブタイトルル的な文章だけを載せることにしています。

 シマンテックの件、以前ネットのニュースで読んだ記憶があります。
 シマンテックって有名なノートンの会社ですよね。
 その時は、シマンテックのようなITの著名企業との間で何があったのと?と言う程度で受け止めてました。
 それに私のセキュリティソフトはトレンドマイクロなので関係ないで と。
 まさかFC2が絡んでるとは。
 あとSSLの証明とかの話があるのですね。
 この辺りの事情って余程鋭いアンテナを張ってないと受信できないですよね。
 なのでなおさら、Akira氏が重要な情報源です。

 それにしてもなんか不安な話。

2017/11/19 (Sun) 17:47
Akira
To higeさん

シマンテックは逃げましたよ (´・ω・`)
デジサート(DigiCert)に証明書部門を売却しました。
10億ドルですって。
逃げつつ純利益を増やしたシマンテック(笑)
かつてはGoogleと蜜月状態だったはずなのにねぇ (´・ω・`)

私もあまりこの件に関しては追いかけていないというか。
だってどうしようもないですし(笑)
FC2は今独自ドメインのSSL対応に追われていると思うんだけど、一体どうするものやら。

2017/11/19 (Sun) 18:41
hige
どういうこと?(おすぎの口調で)

>デジサート(DigiCert)に証明書部門を売却しました。

であればデジサートが対応してくれれば問題が無いと理解して宜しいんでしょうか。
天下のシマンテックが逃げたのね。
なんか根深い確執があったような匂いが。

どちらにしろ、こちらは待つしかない身。
FC2頑張れ!

2017/11/19 (Sun) 19:50
ぬこぬこ
グーグルのPageSpeed Tools

こんにちわ。

速度はいつかはチェックしとかないといけないと思っていたので
グーグルのPageSpeed Toolsとかいうので測定してみたんですが
PC版が41点poor モバイルが66点Needs Work だったんですが、この数値はfc2のユーザーで普通なんですかね?

主さんのページでテストしてみるとPC72 モバイル62だったので
私のモバイルは普通ということになるんですかね。

2017/11/19 (Sun) 22:04
Akira
To higeさん

そうですね。Googleの制裁が2018年10月23日を予定しているそうなので、FC2ブログについては2018年の1月24日で一旦期限を迎えます。
その時に移行しないといけませんよね。
10月移行は発行日に関係なくシマンテックの証明書は全て警告対象になるそうです。
まぁ今でも既にやんわりした警告が出ているわけだけど (´・ω・`)

2017/11/19 (Sun) 23:40
Akira
To ぬこぬこさん

ぬこぬこさんのページの状態を見ないとなんとも言えません。
私のページは共有に出しているデフォルトよりもCSSとJSが各1.5倍ぐらい内容が膨らんでいますので、デフォルトよりもスピードは遅いはずです。
ただ有料アカウントですのでCDNを利用しています。
CDNが使えない環境(無料アカウント + テキスト広告非表示) だと遅くなりますね。
なので個人設定や環境、プラグインの内容も影響しますよ。

いずれにしろGoogleが提案するものも
・gzip圧縮
・CSSリンクの後回し
がメインですので、あとはもうテンプレートの構造ですかね。
シングルレイアウトの方が若干速くなるでしょうし、Google fontsやfont awesomeを使わなければまた少し速くできるでしょうし。
デザイン・UXをスピードと秤にかけるしかないですよね (´・ω・`)

2017/11/19 (Sun) 23:47

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

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

カスタマイズ