ページの表示速度を高めるために押さえるべきもの
ページの表示速度を上げたいのならば、たとえば、キャッシュを支援してくれるプラグインを使えば良さそうですよね。
ところが、便利にやってもらえるなら使いたいプラグインは1つや2つではない上に、モバイルフレンドリーのように、サイトやページの質を高めよう! と問いかけてくれる教えは、プラグインに頼り過ぎずに腕を磨きなさいよ! と言っているように感じます。
Page Speed Insights の表示速度のテスト結果だけを見るとあまり喜べるようなものではありません。
しかもその症状は、WP Super Cacheを動かしたからと言って一挙に大満足‼︎ というわけにはいかないのです（少なくとも私のサイトでは、ですが）^^;
と言うことは? やはり何か大切な基本を飛ばしているのではないのかな? と思うのです。
押さえてどころを絞り込むためにも基本を
- 基本中の基本、それは、表示速度は
- ページを構成するデータの種類と
- 読み込みの順序
で決まっているということ。
ページを構成するエレメントは大きく分けてみると4つ。
最初の2つがページの中心となる素材 －
- テキストと
- 画像（そして場合によっては動画や音源）
そして、
その２つのエレメントをどう見せるかのための －
- サイズや書式などを操作する CSS と
- ページの機能面を刺さる JavaScript
ということを押さえておくことがまず第1のポイント。
そして、それぞれのデータがどんな順序で読み込まれるかによって、表示パフォーマンスが変わってくるということ。それが第2のポイントです。
データ読み込みのタイミングというのは…
ページを表示するHTMLというのはhead, body － 頭 と からだ と覚えるとイメージしやすいかも知れませんね^^ － で構成されています。
HTMLの基本的な構造は
<html>
<head>
ページの基本情報（ロゴやタイトル、スタイルシートなど）
</head>
<body>
ページの本体部分
</body>
</html>
のような、head, body が重なった2階構造。そして、
頭 － head － の部分はページを構成するためのスタイルシートのような基礎的な材料としてのデータや各ページに共通の情報が集まっていると覚えておくといいかも知れません。
そしてここで大事なのは、ページの表示に直接関係がないJavaScriptは</body>の直前、つまり、ページを描き終わる最後の段階で読み込むようにすることで
そしてここで覚えておきたいのは、ごくごく大雑把に言っての話しですが、データの読み込みの順序JavaScriptの性質。
使っているプラグインによってはの骨格と基盤を決めるHTMLのhead要素
表示速度の向上という角度で捉えれば、表示の速度の足を引っ張っている原因がどこにあるか － ボトルネックになっているのがどこなのか － を確認する作業だと言えます。