WEBサイトの高速化
の編集
https://yassu.jp/pukiwiki/index.php?WEB%A5%B5%A5%A4%A5%C8%A4%CE%B9%E2%C2%AE%B2%BD
[
トップ
] [
編集
|
差分
|
履歴
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[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
タイムスタンプを変更しない
[[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
テキスト整形のルールを表示する