TIJAJIではページ表示速度を高速化にも積極的に取り組んでいます。

手前味噌ですが、デモサイトをGoogleが提供するPageSpeed Insightsでテストした結果、PC・モバイルともに100点を獲得しています。

スコア100にしたらワードプレス公式レポジトリのガイドライン違反な箇所が出てしまい、元に戻しました。
具体的にはJavaScriptの非同期読み込みとCSSの非同期読み込みをJavaScriptで行ったのがNGでした。




TIJAJIデモサイト

PageSpeed Insights

PageSpeed Insightsで100点を取るにはGoogleから推奨されていることをすればいいだけです。

しかし、やるとすると面倒だというのが正直なところだと思います。

実際に多くのWordPressのテーマやプラグインでは高速化に関する施策が行われていないのかなと思いました。
（個人的な感想です。規約などでしたくてもできない場合もあるかも知れません。）

デモサイトでこそPC・モバイルともに100点のスコアを獲得しましたが、100点にするには

CSSの非同期読み込みを中止したので現在100点ではありません。有料版のTIJAJI Plusでは依然として100点です。

  • ・テーマ
  • ・プラグイン
  • ・ユーザー

それぞれの分野でやらなければならないことがあるんです。

それぞれ解説してきます。

テーマでできること


まずテーマでできることですが、以下が挙げられると思います。

  • ・CSS を縮小する
  • ・HTML を縮小する
  • ・JavaScript を縮小する
  • ・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

  • ・圧縮を有効にする

TIJAJIではもちろんこれらは全て施策済みです。

JavaScriptとCSSの非同期読み込みを中止しました。有料版のTIJAJI Plusでは施策済みです。


TIJAJIはよく見るBootstrapなどベースとなるようなものは一切使用せず、100%、1から考えられたオリジナルのデザインソースになっています。

ポリシーとしてはCSSやHTMLはデザインするのに必要な分は惜しみなく記述するようにしています。

その中でも可能な限り無駄を省いて記述しました。

更にスタイルに関してはGoogleが推奨しているようにファーストビューで見える範囲は可能な限りインライン化し、それ以外は外部ファイル化して分けています。

その外部ファイルも圧縮してデータを軽量化し、更に非同期読み込みにすることで、ページの読み込みを邪魔することが無いようにしています。

またJavaScriptについてはほとんど使用していません。

使用しているのは2か所で、

  • ・ページトップへ戻るためのボタンをクリックした時にスルッと動くためにするJavaScript
  • ・CSSを非同期読み込みするためのJavaScript

だけです。

どちらも簡単な記述なのでページの表示速度への影響はないと考えています。

プラグインでできること


プラグインでやるべきことも基本的にはテーマと同じです。

Googleから推奨されていることを念頭に置いて設計するかしないかということです。

プラグインには使い勝手が良いものが多く、また、好みに合わせて使えるところがワードプレスのよいところではあります。

しかし、使うものによっては重くなってしまったということを経験している人も少なくないはずです。

テーマでも言えることですが、使用者を不特定多数とするとどうしても汎用性を持たせなければなりません。

なので、Aさんには必要でも、Bさんには必要ないというものが高確率で出てきます。

仕方がないと言ってしまえばそれまでですが、ここは私たちの課題かなと思います。

また、TIJAJIはテーマなので、プラグイン対してできることは限られています。

なのでページ表示速度の高速化を目指すなら、使うプラグインについても良く考える必要があります。

ただ、プラグインを使うと遅くなることばかりを気にしてはいけません。

ページ表示速度の高速化はサイトを訪れるユーザーの利便性を考えての施策です。

それを遅くなるからと言って必要なプラグインを使わないのでは本末転倒になってしまいます。

ユーザーでできること


ページ表示速度高速化を目指すに当たり、ユーザー側でできることもあります。

  • ・サーバーの応答時間を短縮する
  • ・ブラウザのキャッシュを活用する
  • ・画像を最適化する

などです。

サーバーの応答時間はサーバーによって左右されます。

ほとんどの方はレンタルサーバーを使用していると思いますが、レンタルサーバーには善し悪しがあります。

どことは言いませんが、評判の良いサーバーを使うことをおすすめします。

それに加え、キャッシュプラグインを使用するとサーバーの応答時間が早くなるためこちらもおすすめです。

また、Googleから推奨されていることでブラウザのキャッシュを活用するというものがあります。

.htaccessにキャッシュに関する記述をする必要があるのですが、私の技術力やセキュリティ的な問題があるので現状テーマからは設定できません。

Google検索「ブラウザのキャッシュを活用する」

やること自体は難しくなく、上記を参考にすれば簡単に実装できると思います。

本気で高速化を目指すなら挑戦してみてください。

他にももっと簡単にできる高速化施策があります。

  • ・コンテンツ（記事）を書き過ぎない
  • ・あまり高画質な画像を使用しない
  • ・表示する画像の大きさにあった画像を使う

などです。

最近文章がズラーッと長く記述してあるサイトが多く、流行っているようですが、やり過ぎると表示速度に影響が出ます。

あと画像はあった方が見栄えが良くなるので積極的に使いたいところですが、高画質な画像、すならちデータサイズの大きい画像ですね。

データサイズの大きい画像はやはりページ表示速度にも影響してしまいます。

また、1920×1200の画像を300×250サイズで使用するようなこともGoogleでは推奨されていません。

300×250サイズで表示させるなら、元々300×250サイズの画像を使った方が良いということです。

とはいえ、面倒ですよね。

なので個人的はあまりにもかけ離れたサイズの画像表示でなければいいんじゃないかなと思います。

表示速度高速化についてのまとめ


ページ表示速度はサイトを訪れる人に取ってとても大事な要素だと思います。

実際に自分でも「このサイトよく解説してくれているけど表示速度遅くて不便だな」と思うことが多々あります。

もしあなたもそう思うのであれば自分の管理するサイトに訪れる人にそんな思いをしてほしくありませんよね？

利便性を向上させるものにはページ表示速度と相性が悪いものあります。

なので最終的にやるかやらないか判断するのはサイト管理人です。

その中でも、TIJAJIではテーマ側でできることとして上記に解説した通りの施策を行っています。

私としては使用するテーマ候補の1つにでも挙がってくれれば本望です。

もちろん、これが最良ではなく「ああしたほうがいい」「これはなくていい」などあるかと思います。

もしアドバイスしていただけるなら、とてもありがたい話です。

関連記事