WEBサイト(ホームページ)持ってるけど表示が遅い！！という方いませんか？いますよね。
特にCMSを使っていると、通常のレンタルサーバでは表示が遅くなりがちです。
サイトの表示が遅いと、せっかく検索で見つけてくれたのにサイトが表示される前にイライラして帰ってしまい、アフィリエイトやECサイト、企業のコーポレートサイトでも売上が落ちるのが確実です。
手間暇や高いお金をかけて作ったサイトも無駄になってしまいます。
というわけで、WEBサイトを高速に表示するための方法と技術を担当別にまとめてみました。
デザイナー・コーダーができること
まずはWEBデザイナーやHTMLコーダーさんができる対策です。
画像の最適化
WEBサイトに使う画像を撮ったまま、作ったまま上げていませんか？そのままの画像は容量が大きくなりがちでダウンロードに時間がかかってしまいます。
そこで、画像ファイルを圧縮しましょう。最近の画像を扱うソフトにはほとんど圧縮の機能がついています。圧縮してもWEBサイトの表示には何の問題もなく品質も保持されます。
画像を多く使うサイトは特に欠かさず行うべき対策です。
HTML・CSS・JSの最適化
HTMLやCSS、Javascriptの構造も最適化しましょう。テンプレートをつかうとありがちなのですが、サイトで使っていないCSSの要素が残っていたり、存在していないCSSやJavascriptファイルを読み込んでいたりと、無駄が多いです。
CSSファイルで@importを使うのもいただけません。CSSを適応させたいならしっかりHTMLのhead部分に記述しましょう。
あと、そもそもCSSやJavascriptのファイル読み込み数を減らすことも大事です。まとめられるものは一つにまとめてしまいましょう。
最適化だー！と言って見難いソースにならないよう注意してくださいね。見難いソースはミスの元です。
ソーシャルボタンのスクリプトの読み込みを減らす
Javascriptの最適化同様、TwitterやFacebookなどソーシャルボタンの読み込みもスクリプトが使われています。
ページ内にボタンを複数設置したい場合、公式のスクリプトをそのまま貼ると同じスクリプトを何回も読み込んでしまいます。モノにもよりますが実はあれ、一回読みこむだけで済むケースが多いのです。
公式のものを使わず画像を使うのもいい手かもしれません。
サーバエンジニアができること
サーバ側での対策はかなり有効です。VPSや自社サーバを運用している場合のみの対策となります。
WEBサーバ(Apache)のチューニング
WEBサーバを公開しているほとんどの人はApacheを使っているかと思います。一般的なレンタルサーバもApacheが基本です。そのApacheもデフォルトの設定のままでは無駄が多く真価を発揮出来ません。
使っているサーバのスペックに合わせてチューニングしてあげることで、無駄を省き高速化することができます。特にプロセス周りをいじってあげるといいかもしれません。
最近Googleが公開したmod_padespeedの利用も考慮に入れるべきです。通常よりメモリ消費が多くなるようですが、その分サイト表示の高速化が見込めます。mod_pagespeedは前述のHTMLやCSSなどの対策を自動で行なってくれたり、ファイルをキャッシュしてくれたりと非常に高性能なモジュールです。
PHPのアクセラレータの導入
PHPの中間キャッシュを取ってくれるアクセラレータがあります。代表的はAPCとeAcceleratorです。
PHPを使っているサイトでは、アクセスの都度スクリプトを動かすことになり静的なサイトに比べ表示が遅くなってしま居ます。
APCやeAcceleratorはそのスクリプトを最適化したものをキャッシュし、同じ動作のアクセスがあった時にそのキャッシュを返すという動きをしてくれます。
導入は比較的容易で、これもチューニングしてあげる事でかなりの効果が見込めます。
WEBサーバをNginxに変更する
WEBサイトを表示するということに特化したWEBサーバのNginxを導入することで、驚くほどの高速化が見込めます。うちもこのNginxを使っています。Nginx + PHP-FPM + APC という環境で運用中。
ただ、動的なスクリプトを使いたい場合、NginxだけではPHPやCGIの処理をすることができないのでPHP-FPMなどと組み合わせることが必要になります。
一般的なCMSやソフトウェアはApacheで動かすことを前提に作られているので、使いたいソフトによって設定を変更して行かなければなりません。
プロキシキャッシュやFastcgiキャッシュが利用できるのも特長です。変更する可能性の低いファイルをサーバにキャッシュしてしまうことで読み込み時間を短縮できるすぐれものです。
難易度は高めですが、その分の効果は十分に見込めます。WordPress界隈では利用している人もかなり増えてきているのではないでしょうか。
Nginxにもmod_pagespeedと同じ効果が見込めるngx_pagespeedがあります。これもmod_pagespeed同様、HTMLやCSS、Javascriptの最適化、画像の最適化などを自動で行なってくれるものです。
データベースのチューニング
WEBサイトを作るのにデータベースを組み合わせる場合があるかと思います。CMSやECサイトのソフトなんかはデータベースとの連動が普通でしょう。
そのデータベースもデフォルトの設定ではなく、サーバのスペックに合わせてチューニングすべきです。MySQLの場合、クエリキャッシュを使うことで、SELECTクエリの結果をキャッシュし次からは同じクエリを実行すること無く結果を返すことができるため、処理時間を短縮出来ます。
その他にもいろいろ設定できる項目があるので、調べてみるといいかもしれません。
・query_cache
・key_buffer_size
・sort_buffer_size
・join_buffer_size
・table_open_cache
・thread_cache_size
・innodb_buffer_pool_size
・innodb_log_file_size
・innodb_log_buffer_size
・max_allowed_packet
キーワードはこの辺かな。
SPDYの導入
HTTP2の策定でもニュースになりましたが、Googleが公開しているSPDYという新しいプロトコルがあります。これをApacheやNginxに導入することで、更なる高速化が望めます。
ただ、SPDYを利用するにはSSL(HTTPS)の導入が必要になります。SSLサーバ証明書を取得する必要がありますので注意。通常のWEBサイトなら安価なRapidSSLを使うのがいいでしょう。
SPDYはApacheならmod_spdy、Nginxならspdyパッチが公開されているので、それを使えば導入できます。
おすすめサイト表示検証&解析ツール
現在のサイトがどれくらい高速化対策ができているかを解析できるサイトを紹介します。
PageSpeed Insights
PageSpeed Insights
Googleの公開しているサイト表示解析ツール。
前述のmod_pagespeedやngx_pagespeedはこれに基いて作られています。
使い方は簡単、調べたいサイトのURLを入力してポチッとな。
自動で解析して、改善点を教えてくれます。
GTmetrix
サイトは英語ですが使い方は簡単。これもURLを入力してGO！です。
前述のGooglePageSpeedのスコアとYSlowのスコアを調べることができます。YSlowというのはPageSpeedのYahoo番だと思っていただけばいいかと思います。
YSlowだけ調べたい場合はFirefoxやChromeのアドオンを使えばOKです。
その他
それ以外にもアクセス解析の定番GoogleAnalyticsでもサイトの表示速度を確認することができます。
他にもいろいろとサービスがあるので調べてみてください。
まとめ
WEBサイトの高速化は、ダイレクトにSEOや売上に関わってきます。サイトにお金をかけてもサーバにお金をかけない人が多く、非常にもったいない結果を生んでいることが多々あります。
とりあえずのWEBサイトでは無意味なので、WEBサイトを作成する時はサーバまで気を配ってあげることが大切です。WEB制作会社でも、ないがしろにしてるところが結構あるのでお気をつけを。
WEBサイトが重くて困っているという方、ご相談にのりますのでお問い合わせくださいね。
それでは($・・)/~~~
