ページの高速化についてです。
検索すると指南が山ほど出ては来るのですが、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ちょいだと思います。
ですからスマホで撮った写真の場合には サイズも容量も削減 した方が良いですね。
おすすめアプリ
Androidアプリの方はちょっと良く知らない。ごめんなさい ^^;
パソコンはアプリを落とさずともオンラインサービスを利用すれば簡単です。
おすすめサイト
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG 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ブログでできるスピード対策はあんまり無いよね、という記事でした(笑)
There are no comments yet.