ページの読み込み速度は、0.1秒遅くなると売り上げが1%減少し、1秒高速化すると売り上げが10%向上すると言われています。
つまり0.1秒の差でもユーザーはストレスを感じ、離脱につながるという恐れがあるということです。
昨今Googleは検索順位に表示速度も含めることを明言し、その重要度は以前にも増しています。
この記事では、当サービスで施している表示速度対策について、まとめました。
コードの最適化
Webサイトの表示には、HTMLやCSS、JavaScript、PHPなどのコード処理が不可欠です。
当サービスでこだわったコード処理について、ご紹介します。
DRY（Don’t Repeat Your Self）な設計
DRYとは、コードの繰り返しを避けることを表しています。
当サービスでは一貫してDRYな設計を心がけており、使いまわせるパーツを積極的に使い回すことで、コードの記述量を必要最低限にしています。
そのため、ブラウザでのコード解釈の負担が軽減され、表示パフォーマンスの向上につながっています。
jQueryの脱却
WordPressでは、デフォルトでjQueryと呼ばれるJavaScriptライブラリが導入されています。
jQueryはJavaScriptの実装を簡単にする一方で、ライブラリのサイズが膨大なため、表示パフォーマンスに影響を与えることが分かっています。
そして一般的なブログでは、jQueryライブラリの恩恵を得られるほど大きな仕様がないことがほとんどです。
そのため当サービスではjQueryライブラリの読み込みを解除し、必要な処理はネイティブのJavaScriptで記述するようにしています。
JavaScriptの最適化
JavaScriptでの実装で最も多いのは、やはりDOM操作（HTMLの操作）です。
しかし、一度ブラウザに表示されたHTMLを後から無理矢理操作することになりますので、JavaScriptの記述が多くなればなるほど、ページの表示速度は遅くなります。
そこで当サービスでは、レンダリングブロックをしないサーバーサイドでの処理や、比較的パフォーマンスの良いCSSでの実装を第一に検討しております。
そのためJavaScriptの記述を最低限に抑えることができ、表示速度向上につながっています。
モジュールバンドラーの利用
モジュールバンドラーとは、JavaScriptやCSS等の複数のファイルに書かれたコードを、一つにまとめる役割のあるツールのことです。
複数のファイルを一つにまとめることで、ブラウザとサーバーの通信（HTTPリクエスト）の数を減らすことができ、表示速度の向上に貢献しています。
最低限のプラグイン
WordPressには魅力的なプラグインが非常に多くあり、ついプラグインまみれになりがちです。
しかし、プラグインは複数導入することで互いの機能に干渉し、予期せぬ動作を引き起こすことがあります。
また、プラグインによっては特定のページでのみ必要なアセットを、サイト全体で読み込むこむものも多くあります。
これらは、エラーを起こしたり無駄な通信を増やしたりすることになりますので、表示速度の低下につながります。
そこで当サービスでは、ブログでよく実装される機能をテーマ側へ実装し、プラグインの導入を必要最低限に抑えられるよう設計しております。
各種キャッシュの最適化
キャッシュとは、本来サーバー等へアクセスしなければ取得できないページの情報を一定期間保管しておき、有効期限が来るまではそのページ情報を返す仕組みのことを言います。
通常必要な通信が発生しないことで、ページの表示速度を向上させることができます。
WordPressサイトにはサーバーキャッシュ、WordPressオブジェクトキャッシュ、ブラウザキャッシュの3つがありますが、これらをそれぞれ最適化することで、ページ表示のさらなる高速化を実現しております。
Critical CSSの適用（有料）
画面表示に必要な最低限のCSSのみ読み込むことで、ファーストビューの表示速度を改善するオプションで、最近話題のCLS対策にも有効です。
詳細は下記でご紹介しておりますので、ご興味のある方はご覧ください。