ずいぶん速くなった！ページ表示高速化テクニックまとめ

TwitterFacebookHatena
  • 公開：2014-8-18
  • 更新：2024-11-12
  • 文章量：3092
  • Life

TL;DR

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

2016/07/03：高速化についての新しい方法を追加しました。確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開。

VPS

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

１．VPS / SSD に

リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、

さくらの VPSSSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

２．TSO を off にする

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

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

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

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

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

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

Apache のモジュール、mod_expires を使いキャッシュを保持させ、転送量を軽減させて負荷対策します。ひとつはコマンドと htaccess の一例。

もう一つはさくらのレンタルサーバでの設定方法。

画像軽量化

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

６．JPEG Exif 削除

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

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

７．PNG 軽量化

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

８．GIF、SVG 画像

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

JavaScript

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

９．JavaScript を圧縮

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

１０．非同期で読み込む

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

１１．遅延読み込み

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

リクエスト数・他

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

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

１３．高速化ライブラリ

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

１４．gzip 圧縮

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

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

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

Jamstack での制作を依頼する

ずいぶん速くなった！ページ表示高速化テクニックまとめ