テンプレートのカスタマイズが大好き。jQueryやCSSも色々やってみたい。
という方に気をつけて頂きたい点をまとめようと思います。
無作為にポンポンと外部ファイルを追加しない
色々やりたい気持ちはわかりますしやっても全然構いませんけれども、head内がゴッチャゴチャのグッチャグチャになっている方がとても多いんですね (∵`)
head内の外部ファイルリンクというのは ページ表示速度に影響します ので、一度整理されてはいかがでしょうか。
CSS外部ファイルをいくつも追加しない
悪い例
<link rel="stylesheet" href="https://見出し装飾用.css"> <link rel="stylesheet" href="https://アイコンアニメーション用.css"> <link rel="stylesheet" href="https://なにかしらの装飾.css">">
こんな感じでやりたいことが一つ見つかるとそれに関するCSSファイルを個別に作成してしまい、head内にどんどん追加してしまう、と。
これ一番 良くない ですね。
リンク要素は一つにつき一度の通信リクエストが行われます。つまり情報を取得しに出かけるわけです。
欲しい情報が数行であろうとわざわざ出かけます。
リクエスト数が多ければ多いほどページは遅くなりますよ。ですからこうすべき。
<link rel="stylesheet" href="https://見出しとアイコンアニメとなにかしら用.css">
ひとつにまとめてください。そしたら単純な話し、リクエストは1回で済みます。
CSSというのはJSとは違い、それぞれのファイル内容を併せたからといってなにかしらの弊害がでるわけではありません。
CSS構文さえ守られていればまとめてもちゃんと機能します。
(ブレイクポイントの記述順序だけは気をつけてください)
もっと言えば 外部ファイル化せずにメインCSSに書いた方が良いかもしれません。
何百行にも渡る長大な内容でない限り、メインのスタイルシートつまり FC2ブログのテンプレート編集画面の下段 にある「スタイルシート」の中に追加をしてください。それが最も良い方法です。
CSSというのは『基本的には』どのみち一番最初に読み込みを行うべき対象です。
html内容よりも「先に」読み込ませるからこそページレイアウトが整った状態で提供できます。
結局は全部読み込むんです。ですから乱暴に言えば 分ける意味が無い。
ただし特定条件下で「外部ファイル化」が有効手段となる場合もあります。
FC2独自変数「エリア変数」を使う
FC2ブログでは各記事にそれぞれ専用のスタイルシートを割り当てるといったことはできません。
一つのブログにつき、全ページ共通で一つのスタイルシートが使えます。
もしそのファイル内容の使い所が 特定のページ種に限られている のであれば、FC2ブログのエリア変数を使ってください。
大抵の場合は「個別記事」ではないかと思います。
記事内で「アイコンを動かすアニメーションCSSを使っている」だとか、「画像を拡大表示させるためのCSSを使っている」だとか。
だとしたらカテゴリやタグやトップページなどの別種ページでは 読み込む必要がありません。
使うページ種が明確であるのならば、その内容は外部ファイル化し、そのページ種だけに適用させる方法も有効です。
例) 個別記事のみ利用するCSSの外部ファイル化
<!--permanent_area--> <link rel="stylesheet" href="https://見出しとアイコンアニメとなにかしら用.css"> <!--/permanent_area-->
個別記事のエリアを示す <!--permanent_area--> そして <!--/permanent_area--> に挟まれた内容は他のページ種では出てきません。つまり読み込まなくて済む。
外部ファイル化が意味を持つのはこういう使い方をする時です。
圧縮を行う
外部ファイル化されたCSSを編集することがありますか？
答えがNOであればその内容は是非 圧縮 してください。
難読化のことではありません。無駄な改行やスペースを取り除くだけのことです。
改行やスペースやコメントアウトは 人間の視認性のために用いるだけであってコンピュータにとっては無駄でしかありません。
圧縮を行うだけでもファイルサイズは小さく(軽く)なります。
CSS Minifier
Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.
CDNで提供されているCSSを利用している場合、まずほとんどが通常のCSSと圧縮版CSSの二種を準備してくれているはずです。
拡張子 .css の前に min という単語があるならば、それは圧縮版であることを意味します。選ぶべきはこちらです。
ただし可読性が著しく下がりますので、ちょくちょく編集をするという場合には向きません。
自身の使い方と相談して決めましょう。
圧縮前CSSサンプル
@-webkit-keyframes vertical {
0% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
4% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
8% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
12% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
16% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
20% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
22%, 100% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}
@keyframes vertical {
0% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
4% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
8% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
12% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
16% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
20% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
22%, 100% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}
圧縮後CSSサンプル
@-webkit-keyframes vertical{0%,16%,8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%,20%,4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes vertical{0%,16%,8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%,20%,4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
記述の順序を守る
こういうのは「綺麗でない」head内容です。
<link rel="stylesheet" href="https://見出し用装飾.css"> <script src="https://スライダー用.js"></script> <script src="https://画像拡大用.js"></script> <link rel="stylesheet" href="https://テキスト用装飾.css"> <script src="https://スクロール用.js"></script>
リンク要素とスクリプト要素とがでたらめに並んでいます。
整理整頓してこうします。
<link rel="stylesheet" href="https://見出し用装飾.css"> <link rel="stylesheet" href="https://テキスト用装飾.css"> <script src="https://スライダー用.js"></script> <script src="https://画像拡大用.js"></script> <script src="https://スクロール用.js"></script>
リンク要素が先、スクリプト要素が後 です。
CSSというのは一番最初に読み込ませるべきものですからscriptよりも先に書きます。
さらに良いのはこう
<link rel="stylesheet" href="https://見出し用・テキスト用装飾.css"> <script src="https://スライダー用・画像拡大用・スクロール用.js"></script>
変数で区切れるならばさらに良くなり、こうできるかもしれません。
<!--permanent_area--> <link rel="stylesheet" href="https://見出し用・テキスト用装飾.css"> <!--/permanent_area--> <!--category_area--> <script src="https://スライダー用・画像拡大用・スクロール用.js"></script> <!--/category_area-->
個別記事だけでCSSが読み込まれ、カテゴリページだけでJSが読み込まれます。
使いどころに合わせてこうした分別が可能かもしれませんので考えてみましょう。
こうするともっと良いですね。
head内
<!--permanent_area--> <link rel="stylesheet" href="https://見出し用・テキスト用装飾.css"> <!--/permanent_area-->
body終了タグの前
<!--category_area--> <script src="https://スライダー用・画像拡大用・スクロール用.js"></script> <!--/category_area-->
スクリプトファイルをhead内で読ませない。
JSは後回しにしてもOKな場合が多いです。その場合には第一優先で読ませる必要はありません。htmlを読ませた後でも十分です。
ただしJS内容のマージ(合成)と記述位置(head内 or body終了タグ前)は熟考が必要です。
JS内容によってはhead内での読み込みが必須となるものもあります。
またあるいはさらにこうしても良い場合があります。
body終了タグの前
<!--permanent_area-->
<script>
var link = document.createElement('link');
link.href = 'http://なにかしらの装飾.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
</script>
<!--/permanent_area-->
<!--category_area-->
<script src="https://スライダー用・画像拡大用・スクロール用.js"></script>
<!--/category_area-->
本来CSSというのはhead内で読み込ませるのが大前提ですが、ファーストビュー(above the fold)に明らかに関連が無い場合にはJSを利用して後回しにすることも可能です。
Googleもページスピード改善の一つの方法として提唱しています。
が、この方法はかなりよく考えた上で行わないと却って閲覧に支障をきたす場合があります。
自信が持てない場合には避けるべきです。
テンプレートの内容にも少し触れておきます。
ここでおすすめする「マージ」ですが、共有テンプレートの製作者という立ち位置からは特にJSファイルではやりづらいんです。
何故かというと、いろんなJS内容を一つにまとめてしまうと従来のような
「xxが不要な方はここから削除」
という「除外」が簡単にはできなくなります。
そのため敢えてJS内容は分けていると思ってください。
まとめ
- 外部ファイル化の見直し(外部ファイル or メインCSSへの追記 いずれが良いのか) --- CSS
- 外部ファイル化した場合にはエリア変数の適用 --- CSS, JS
- 内容の圧縮 --- CSS, JS
- 記述の位置 --- CSS, JS
今すぐできそうな改善というと、JSよりもCSSの方かな、と思います。
JSはちょっと何かを変えただけで思わぬ泥沼にはまることがあります(笑)
その点CSSファイルは扱いが楽です。
本当に外部化が必要なのか、というところを起点に改修してみてください。
何も考えずになんでもかんでも追加していくと、そのうちページがものすごく重たくなって 閲覧者から嫌がられるサイト と化してしまうかもしれません。
そうなる前に少しづつ対策しましょう、というお話しでした (o'ω')ﾉ
There are no comments yet.