calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

speed_up_website

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

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

VPS

画像軽量化

JavaScript

リクエスト数・他

VPS

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

1.VPS / SSD に

vps-ssd_speeding

2.TSOをoffにする

tso-off_speeding

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

3.PHPアクセラレータの導入

php-accelerator_speeding

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

4.Apacheの不要モジュール削除

delete-modules-apache_speeding

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

5.キャッシュを利用し、転送量を軽減

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

画像軽量化

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

6.JPEG Exif削除

jpeg-exif_speeding

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

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

7.PNG軽量化

png-lighter_speeding

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

8.GIF、SVG画像

gif-svg_speeding

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

JavaScript

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

9.JavaScriptを圧縮

compress-j_speeding

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

10.非同期で読み込む

asynchronous_speeding

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

11.遅延読み込み

lazy-loading_speeding

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

リクエスト数・他

12.HTTPリクエストを最小限に

minimize-request_speeding

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

13.高速化ライブラリ

faster-library_speeding

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

14.gzip圧縮

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

15.プラグインの使用数を減らす

reduce-plug-in_speeding

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする