成功しているウェブサイトは、ユーザーが探している情報をすぐ、簡単に見つけることができます。またそれだけでなく、サイトのコンテンツも重要な部分の一つです。コンテンツの内容が魅力的であれば、たとえ少し読み込みに時間がかかっても、見たいと思うユーザーはいるかもしれません。しかし、何でもすぐに手に入るこの時代に、「待つ」ことはユーザーの離脱をもたらす結果につながってしまいます。
ウェブサイトの速度最適化オプション
ここではウェブサイトの速度を最適化する際に有効なオプションの一部をご紹介します:
ページキャッシュ
多くのCMSを使用したウェブサイトは、HTMLをブラウザへ送信する前に、PHPの処理を行い、データベースからデータを取得する必要があります。ページキャッシュは最後に開いたHTMLを保存し、再びそのページに訪れた際に直接キャッシュから読み込みを行うことで、読み込み速度を上げることができます。シンプルなHTMLファイルを読み込むだけであれば、サーバー上では圧倒的に速く、軽量です。
また、ページはディスクやRAMに保存することも可能です。
もしサーバー上のRAMに置かれているHTMLページを読み込んでいるのであれば、レスポンススピードは更に高速になるでしょう。
ApacheやPHP、Nginxでは上記を行うための様々な方法があり、その他Varnish(ヴァニッシュ)などのプログラムを使用し、多くのリクエストをPHPで処理することなく、RAM内のページをキャッシュすることが可能です。Facebookや大規模なサービスでは、Varnishでサーバーファームを使用するケースが多くあります。
縮小化
ウェブページには、HTML、CSS、JavaScript、画像や動画などが含まれており、ページの読み込み時間を改善する一番確実な方法はウェブページのサイズを小さくすることです。
通常、HTMLやCSS、JavaScriptのファイルはプログラマーがスペースや段落を使用し読みやすい形で記述されており、これらのファイルを全て縮小化し、コメントを含めファイル内の不要な文字やスペースを全て取り除くことで、ファイルをできるだけ小さくします。
縮小化に関連するものとして、ファイルの統合があります。例えば、全てのCSSファイルを一つにまとめることができれば、サーバーは数十、数百というファイルを読み込む代わりに、一つのファイルを読み込むだけで良くなります。JavaScriptでも同様のことが可能ですが、ただしファイルの統合により機能が正しく行われないなど、リスクもありますので本番公開の前に必ずテストを行う必要があります。
ブラウザキャッシュ
すべてのページにキャッシュの詳細を含めることができるので、ユーザーの使用するブラウザはページをローカルにキャッシュする時間を把握します。
たとえそれがまだ新しいファイルだとしても、ブラウザはウェブサイトではなく、以前に閲覧したページをメモリまたはディスクから読み込むだけでよくなります。
また、ブラウザはそのキャッシュがまだ最新のものであるかどうかをすぐに確認することができます。特にユーザーが繰り返し訪れるような、多くのユーザーを持つウェブサイトであれば、この設定は劇的にサーバー負荷とパフォーマンスに大きく影響するでしょう。
これは、グローバルスクリプトやCSSで特に効果的です。 一度読み込みを行った後は、サイト内の残りページをダウンロードする必要はありません。
画像サイズ
一般的に、ウェブページ内の多くは高画質の画像などで大半のサイズを占めています。特に、ページ数や階層が多いサイトでは、ユーザーの閲覧時間は長くなるため、ページのサイズバランスを考慮しできるだけ画像を圧縮することが重要です。正しい画像サイズを選択することは、適切なページのファイル圧縮を行うことに等しく大切であり、WordPressには多くの適した無料もしくは有料のプラグインがあります。
CDN
少し大きなトピックにはなりますが、あなたのサイトに訪れるユーザーが世界中から来ているのであれば、このトピックは重要になるかもしれません。CDN(コンテンツデリバリーネットワーク)はウェブサイト内の画像やその他コンテンツを世界中のサーバーにコピーし、各国のユーザーがアクセスした際に一番近いサーバーから配信する仕組みです。一般的にサーバーとの距離が近いほど、データのダウンロード時間は短くなります。Cloudflareは無料で使用でき、簡単に使用できる一つのサービスです。もし有料をご希望であれば、その他多くのサービスがあります。
データベースキャッシュ
ほぼ全てのCMSにはデータベースが必要とします。通常、データベースのクエリはとても高速ですが、もし複雑なクエリがある場合、データベースのクエリをキャッシュすることで貴重な数ミリ秒を節約することができます。これはウェブページをRAMにキャッシュするのと同じコンセプトです。定期的に使用され、全く同じであるクエリはキャッシュすることでより早く配信することができます。
もしWordPressで構築したウェブサイトを運営しているのであれば、サイトスピードをすぐに向上させるプラグインがあります。パラダイムでは、実際にクライアント様への実績経験を通して得たおすすめのプラグインをご紹介します。
WordPressのキャッシュプラグイン
ご紹介する2つのプラグインは、キャッシュ以上の機能があり、実際に良い結果を生み出しており、また様々なレベルのVarnishとCDNの組み込みに役立ちます。
W3 Total Cache
W3 Total Cacheは数年前にローンチした、詳細まで多くの設定ができるオープンソースのプラグインです。パラダイムはほとんどのプロジェクトで使用しております。
この半年間でさえ、多少の設定変更以外はほとんど変更することなく良い結果を実現しており、設定でページキャッシュや自動の縮小設定、ブラウザキャッシュをオンにするだけでほとんどの場合は準備が整います。また、キャッシュの優先速度からCSSとJavaScriptファイルの結合や縮小化に関する細かい部分まで多くの設定をすることができます。
WordPress Rocket
これは有料のプラグインですが、設定方法が何よりも簡単であるという特徴を除けば、W3 Total Cacheで設定したものと同様の結果を得ることができます。少しの設定で正常に機能するので、専門の知識がなく難しい設定に悩まされたくない方にとってはかなり使いやすいでしょう。また、Woocommerceにも対応しています。
ご不明な点やウェブサイトの分析など、お困りの際はお気軽にパラダイムまでお問い合わせください。