CMSを組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。

もくじ

VPS

• １．VPS / SSD に
• ２．TSOをoffにする
• ３．PHPアクセラレータの導入
• ４．Apacheの不要モジュール削除
• ５．キャッシュを利用し、転送量を軽減

画像軽量化

• ６．JPEG Exif削除
• ７．PNG軽量化
• ８．GIF、SVG画像

JavaScript

• ９．JavaScriptを圧縮
• １０．非同期で読み込む
• １１．遅延読み込み

リクエスト数・他

• １２．HTTPリクエストを最小限に
• １３．高速化ライブラリ
• １４．gzip圧縮
• １５．プラグインの使用数を減らす

VPS

結構苦手な分野でしたが、高速化のためにVPSで試して比較的効果があったことを、次回また組み込む時のためにメモ。

１．VPS / SSD に

リクエスト数や画像の容量にもよりますが、WordPressを組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、さくらのVPS SSD（2G）にWPを置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

• さくらVPS | Sakura VPS 設定マニュアル
• さくらVPSの初期設定 | 離島に住みたいFEブログ
• さくらVPSで１０分でwordpressの設定をする – 甘噛み最前線

２．TSOをoffにする

さくらVPS（CentOS）にてファイルのダウンロード速度が極端に遅い場合は、ターミナルでrootに切り替えtcp segmentation offload を off に設定します。

• さくらのVPSで回線速度が遅くアクセスに時間がかかります。｜よくある質問｜さくらインターネット公式サポートサイト

３．PHPアクセラレータの導入

PHPの処理を高速化します。データをキャッシュディレクトリに保存することで次回アクセス時にキャッシュを利用し高速表示します。

• ServersMan@VPS (CentOS) eAccelerator で PHP の高速化
• APCでPHPの処理を高速化 | Webクリエイターネット

４．Apacheの不要モジュール削除

メモリ消費を抑えるためにApacheの不要モジュールもコメントアウトします。

• さくらのVPSで動いているApacheの不要モジュールを削除する | Webエンジニアライフ

５．キャッシュを利用し、転送量を軽減

Apacheのモジュール、mod_expiresを使いキャッシュを保持させ、転送量を軽減させて負荷対策します。ひとつはコマンドとhtaccessの一例。もう一つはさくらのレンタルサーバでの設定方法。

• 【負荷対策】Apacheのモジュールmod_expiresでキャッシュを利用する – エーエイチレフ linuxサーバー技術情報

画像軽量化

サイトのコンテンツに大きめの写真を使うことが多くなってきました。画像の転送時間は馬鹿にならないので、画像の余分なデータを削除します

６．JPEG Exif削除

画質を下げてファイルを軽減するのは一番楽な方法ですけど、ユーザーに良い印象を残すことができません。Exif（日時・場所・機種・画素数などの情報）を削除するソフトを使い軽量化します。

JPEG画像を劣化させずに軽量化するウェブサービスであればJPEGminiがおすすめ。

• [フリーソフト] JPEG画像のExif情報をドラッグで一括削除できるソフト「ExifEraser」
• [フリーソフト] 「JPEG Cleaner」と「JpegAnalyzer Plus」

７．PNG軽量化

PNGにもExif等のデータが含まれています。PNGは透過色を指定できますが、フルカラーにするとJPEGよりファイルサイズが大きくなるといったデメリットもあります。こちらは画質をある程度損なわずにファイルを削減するソフトとサービス。

• [フリーソフト] 見た目の画質や不透明度はそのまま、PNG画像のファイルサイズを70％削減する「PNGoo」 – 窓の杜
• TinyPNG

８．GIF、SVG画像

JPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」 は対応している画像が多いです。

• 無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」 – GIGAZINE

JavaScript

テーマ作成するときなんかに、リクエスト数など極力減らしておきたいこと。

９．JavaScriptを圧縮

JavaScriptに含まれるタブやスペース・改行などを削除し圧縮するウェブサービス。

• JavaScriptソースコードを圧縮してサイズを小さくする。またはソースを整形するJavaScriptプログラムメモ｜プログラムメモ
• CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
• [試] サイト表示速度を高速化する方法 | ファイル圧縮（Minify）による表示速度改善 | 試行錯誤ライフハック

１０．非同期で読み込む

非同期にすることによりJavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。こちらはユーザーの体感速度やページを早く表示されるための施策まとめ。

• ユーザーの体感速度を高めるためのJavaScriptチューニング（前編） | HTML5Experts.jp
• [M] WordPressでscript要素をまるっとサクッと非同期化する方法 | mbdb (モバデビ)

１１．遅延読み込み

サイズの大きい画像やファイルの読み込みのタイミングを遅らせることで、ページ表示を早く感じさせる遅延ロード(Lazy Load)とプラグイン。

• Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ – Web学び
• 画像の読み込みを遅延ロードさせるjQueryプラグインLazy Load

リクエスト数・他

１２．HTTPリクエストを最小限に

リクエスト数が増えてくると応答に時間がかかり、結果表示がもたついてしまいます。こちらはHTTPリクエストの削減について。

• HTTPリクエストを減らすために【序章】HTTPリクエストは甘え — MOL
• JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS | コリス

１３．高速化ライブラリ

スマホでは使えないけど、こういう方法もあるんだなぁということでメモ。リンクをマウスオーバーで先読みする方法。リンク先ページをロードしてpjax化する高速化ライブラリ。

• 2行追加するだけでWebサイトを高速化するInstantClick.io – atskimura-memo

１４．gzip圧縮

gzip圧縮を使いデータの転送量を減らす方法。

• ウェブサイトをgzip圧縮で高速化する: 小粋空間
• gzip圧縮でWebコンテンツを高速化 | Webクリエイターネット

１５．プラグインの使用数を減らす

WordPressテーマを自作したことある人なら、極力プラグインを使わずに高速化させるコーディングを試みたことがあると思います。こちらはよく使われそうなプラグインの代替案をまとめてあります。

• 【WordPressまとめ】13プラグインを減らして高速化！その方法を解説するよ – ゆめぴょんの知恵

スポンサード リンク