WEBサイトの高速化の編集

[[Linuxめも]]

WEBページをいかに早く表示させるかは大事なことです。~
Googleもランクの評価に採用しているようなので、[[PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/]]で85点以上を目指して対策を進めます。

*CSSを縮小する [#y2f910dc]

スタイルシートの記述から余分なスペース、改行、インデントなどの文字を取り除いてファイルサイズを抑えます。

PageSpeed Insightsで分析すると下の方に~
このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。~
とリンクが表示されるので、そちらをダウンロードして差し替えると楽ちんです。

*JavaScript を縮小する [#u30ba23a]

CSSと同様の考えです。

オンラインで変換してくれるサービスがあります。~
[[Online JavaScript/CSS/HTML Compressor:http://refresh-sf.com/]]

*圧縮を有効にする [#d334b096]

WEBサーバからブラウザへデータを送信する際にgzip圧縮をかけて転送量を抑えます。
別ページを参照して下さい。

[[Apacheでコンテンツ圧縮]]

*画像を最適化する [#y9d34a85]

JPGやPNG画像は最適化することで見た目の質を落とさずに容量を抑えることができます。

**無料サイトを利用する [#y93f02a9]

無料で利用できるサービスには [[TinyPNG:https://tinypng.com/]] が有名所のようです。~
ドラッグ&ドロップで簡単に最適化することができます。

JPEGであれば [[Compressor.io:https://compressor.io/]] でしょうか。

**ツールを利用する [#e4efffc1]

PageSpeed Insightsでは以下のツールが紹介されています。

JPG

-[[jpegtran:http://jpegclub.org/]]
-[[jpegoptim:http://freecode.com/projects/jpegoptim/]]

PNG

-[[OptiPNG:http://optipng.sourceforge.net/]]
-[[PNGOUT:http://www.advsys.net/ken/util/pngout.htm]]

***jpegtranの使用方法 [#y0e6e4cc]

CentOSであればlibjpegが入っていれば使えるようです。~
CentOS7の場合は

# yum install libjpeg-turbo-utils

メタデータを削除し、ハフマンテーブルを最適化して別ファイルに書き出す場合。

$ jpegtran -copy none -optimize a.jpg > b.jpg

同じファイル名で上書きする場合。

$ jpegtran -copy none -optimize -outfile a.jpg a.jpg

まとめて処理する場合。

$ find ./ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

***jpegoptimの使用方法 [#z223c284]

# yum install jpegoptim

$ jpegoptim --strip-all a.jpg

***OptiPNGの使用方法 [#k70075b2]

CentOSであればyumでインストールできます。

# yum install optipng

タイムスタンプを変更しない