ページ表示速度高速化


ページ表示速度はこれからのサイト作成において、無視できない項目になってきています。

Googleでさえも、スマホ向けモバイルページについてですが、“ページ表示速度は検索順位を決める要素の1つである”と公言しています。

ページ表示速度は、検索エンジンから評価されるだけでなく、サイトを訪れた人からも評価され、再訪問してくれることも期待できます。

そんな大事な要素であるページ表示速度の計測は、Googleが提供しているツール「PageSpeed Insights」で行うのが便利です。

ここで少なくとも緑色（80点以上）は取っておきたいところです。

TIJAJI Plusでも、ページ表示速度高速化に取り組んでいます。

ちなみにこのTIJAJI Plusのトップページのスコアは以下から確認できます。

> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftijaji.jp%2Fplus%2F


TIJAJI Plusで取り組んでいるページ表示速度高速化施策は以下の通りです。

  • ・ファーストページビューCSSのインライン化
  • ・外部CSS圧縮
  • ・JavaScriptを極力使用しない
  • ・外部ファイルの非同期読み込み
  • ・.htaccessからのブラウザキャッシュ

それぞれ解説します。

ファーストページビューCSSのインライン化


これはページが表示された時のヘッダーや枠組みなどのスタイルは、外部CSSファイルにして読み込むのではなく、<head>内に直接記述するということになります。

一昔前までは、「htmlソースはできるだけ簡潔にして、スタイル部分もなるべく外部ファイルにしてすっきりさせた方が良い」という風に認識していましたが現在は違うようです。
（私の個人的な思い込みかも知れません。）

ファーストページビューCSSのインライン化は、Googleが提供するツール「PageSpeed Insights」でも推奨されています。

以上のことからTIJAJI PlusでもファーストページビューCSSのインライン化を実装しています。

設定などはありません。

デフォルトですでにファーストページビューCSSのインライン化してあります。

外部CSS圧縮


ファーストページビューのCSS以外は外部ファイルにして読み込む形を取っています。

その外部CSSファイルは、自動的に圧縮されるようになっています。

これについても設定していただく事は何もありません。

デフォルトで外部CSSは自動的に圧縮して出力するようになっています。

JavaScriptを極力使用しない


JavaScriptはサイトでの表現の幅を広げてくれる素晴らしいものです。

しかし、多用するとサイトが重くなってしまうように感じます。

これはブラウザに左右されることかも知れません。

TIJAJI Plusではページ表示速度にこだわりたい思いから、可能な限りJavaScriptを使用しないでデザインされています。

実際にJavaScriptを使用しているのは以下の2か所だけです。

  • ・ページの先頭へ戻るボタンをクリックしたときのスムーズスクロール
  • ・後述する外部ファイルの非同期読み込み

外部ファイルの非同期読み込み


外部ファイルは、ページの読み込みが終わってから読み込むようにするとページ表示速度は上がります。

先ほどCSSはインライン記述と外部ファイルに分けていると解説させていただきました。

これは、ファーストビューの分だけは見た目に関するものなので、最初にページと一緒に読み込み、それ以外のCSSに関しては、外部ファイルにして非同期読み込みをすることで表示速度を向上させようとするためです。

出力される外部CSSファイルもTIJAJI Plusのものは1つにまとめるようにして効率を上げています。

さらに、少しだけ使っているJavaScriptも外部ファイルにして非同期読み込みしています。

.htaccessからのブラウザキャッシュ


CSSファイルやJavaScriptファイルなどの外部ファイルや画像などはブラウザにキャッシュさせることで、毎回読み込む必要がなくなりページ表示速度が向上します。

PageSpeed Insightsでチェックすると、ブラウザキャッシュについては.htaccessに記述する方法が解説されていました。

TIJAJI Plusではそれに則り、カスタマイザーよりブラウザキャッシュに関する記述を.htaccessに追加する設定を設けています。

なぜデフォルトでブラウザキャッシュを有効にしないかですが、ブラウザキャッシュを使うと、外部ファイルや画像に変更があった場合でも、キャッシュの有効期限まで反映されないということが起こります。

これらを頻繁に更新するサイトや、ファイルを修正した特定のタイミングではブラウザキャッシュをオフにするニーズもあると考え、任意で設定するようにしています。

その他、PageSpeed Insightsで100点をとるコツ


テーマ側でページ表示速度高速化に取り組んでいても、プラグインはどうかわかりません。

私の経験では、プラグインはCSSやJavaScriptをしっかり圧縮してくれているものだけではありませんでした。

これからはプラグインを選ぶ基準として、CSSやJavaScriptの圧縮など「ページ表示速度高速化対策」がされているかどうかもポイントになるでしょう。

そしてページ表示速度にこだわりだすと画像の縮小に悩まされるようになるのが私の経験でした。

レスポンシブデザインは、画像サイズを画面幅に合わせたりするのでどうしても大き目の画像を使い、CSSで可変にするということをやっていたのですがこれがページ表示速度の面からはあまりよろしくないようです。

CSSを組んではチェックし、画像サイズを変更して再アップ・・・ということをよくやっていました。

その中で気付いたことは、画像を

<img src="○○○">

などタグでhtmlに記述するよりも、

.style { background: url(○○○) ; }

とした方が良いということです。

もちろんデザインに左右はされますが、間接的に読み込むことでページ表示速度が向上するようです。

関連記事