markdown server_compress_and_ssl_report.md

Posted 2021-05-06

# AMD サーバー応答短縮調整に関する詳細共有内容

サーバーの応答速度の問題発生で具体的な問題を把握、
その原因である SSL Negotiation までの調査結果書

## 下記は現在まで改善した結果のレーポトです。
- [Web Page Performance Test](https://www.webpagetest.org/result/180227_79_6617314b6ae2cd8f8dd6131f078b0cb9/)
- [GTmetrix](https://gtmetrix.com/reports/amd.tokyo/CaxsPTMA)
- [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https%3A%2F%2Famd.tokyo%2F&tab=desktop)

## 1. Server Responsive Test tool

まずは下記のテストツールで確認、何か問題か把握する

### OVERALL
- [Web Page Performance Test](https://www.webpagetest.org)
- [GTmetrix](https://gtmetrix.com)
- [richardstoolbox](https://richardstoolbox.com/)

### SSL TEST
- [ssl labs](https://www.ssllabs.com/ssltest/)

## 2. 一つづつ直していきます。

ここで Apache サーバー設定などはどうやってできるか軽く[確認](http://bashalog.c-brains.jp/10/07/05-115821.php)しました。

### `Gzip` 圧縮
安定したデータを運ぶためには Gzip 圧縮を行うことが大事です。
以下の記事などを参考してください。

-[trying to use gzip in order to all data.](http://oxynotes.com/?p=6519)

**.htaccess**
```
<IfModule mod_deflate.c>  
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
</IfModule>
```

**ssh: /usr/local/php5.3/lib/php.ini**
```
output_handler = off
zlib.output_compression = On
zlib.output_handler = ob_gzhandler # 文字化け危険あり
```

### Enable server cache

サーバー側のキャッシュを設定することは基本です。
下記の記事でApache サーバー内の設定方法を身につけます。

[Apache mod_expires](http://linuxpitstop.com/configure-apache-mod_expires-on-file-extensions/)

**ssh: /etc/httpd/conf/httpd.conf**
```
LoadModule expires_module modules/mod_expires.so
```

#### [Javascript, CSS Gzip ](https://goo.gl/iXzQJy)

たまには Gzip がうまく聞かない JS, CSS があります。その時は、

**.htaccess**
```
<IfModule mod_rewrite.c>
  # Enabling Gzip Compression of CSS, and JS Files Without mod_deflate @AMD Kanazawa
  # https://goo.gl/iXzQJy
  RewriteEngine On
  RewriteRule ^(.*\.js) gzip_handler.php?type=js&file=$1
  RewriteRule ^(.*\.css) gzip_handler.php?type=css&file=$1
</IfModule>
```

**gzip_handler.php**
```php
<?php
//check that zlib compression is enabled
if(!ini_get('zlib.output_compression')){ die(); }
 mb_internal_encoding("UTF-8");
$allowed = array('css','js'); //set array of allowed file types to prevent abuse

//check for request variable existence and that file type is allowed
if(isset($_GET['file']) && isset($_GET['type']) && in_array(substr($_GET['file'],strrpos($_GET['file'],'.')+1), $allowed)){
  $data = file_get_contents(dirname(__FILE__).'/'.$_GET['file']); // grab the file contents

  $etag = '"'.md5($data).'"'; // generate a file Etag
  header('Etag: '.$etag); // output the Etag in the header

  // output the content-type header for each file type
  switch ($_GET['type']) {
    case 'css':
      header ("Content-Type: text/css; charset: UTF-8");
    break;
    case 'js':
      header ("Content-Type: text/javascript; charset: UTF-8");
    break;
  }

  // header('Cache-Control: max-age=2592000, must-revalidate'); //output the cache-control header
  header('Cache-Control: max-age=2592000'); //output the cache-control header
  $offset = 60 * (60 * 24 * 30);
  // set the expires header to be 1 hour in the future
  $expires = 'Expires: ' . gmdate('D, d M Y H:i:s',time() + $offset) . ' GMT';
  header($expires); // output the expires header

  // check the Etag the browser already has for the file and only serve the file if it is different
  if ($etag == $_SERVER['HTTP_IF_NONE_MATCH']) {
    header('HTTP/1.1 304 Not Modified');
    header('Content-Length: 0');
  } else {
    echo $data;
  }
}
?>
```

**.htaccess**
```
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault                                      "access plus 1 month"

  # CSS
  #ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
  ExpiresByType application/atom+xml                  "access plus 1 hour"
  ExpiresByType application/rdf+xml                   "access plus 1 hour"
  ExpiresByType application/rss+xml                   "access plus 1 hour"
  ExpiresByType application/json                      "access plus 0 seconds"
  ExpiresByType application/ld+json                   "access plus 0 seconds"
  ExpiresByType application/schema+json               "access plus 0 seconds"
  ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
  ExpiresByType application/xml                       "access plus 0 seconds"
  ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
  ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
  ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML
  ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
  # ExpiresByType application/javascript "access plus 1 year"
  # ExpiresByType application/x-javascript "access plus 1 year"
  # ExpiresByType text/javascript "access plus 1 year"
  # ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  # ExpiresByType text/x-javascript "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"

  # Manifest files
  ExpiresByType application/manifest+json             "access plus 1 week"
  ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
  ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media files
  ExpiresByType audio/ogg                             "access plus 1 month"
  ExpiresByType image/bmp                             "access plus 1 month"
  ExpiresByType image/gif                             "access plus 1 month"
  ExpiresByType image/jpeg                            "access plus 1 month"
  ExpiresByType image/png                             "access plus 1 month"
  ExpiresByType image/svg+xml                         "access plus 1 month"
  ExpiresByType image/webp                            "access plus 1 month"
  ExpiresByType video/mp4                             "access plus 1 month"
  ExpiresByType video/ogg                             "access plus 1 month"
  ExpiresByType video/webm                            "access plus 1 month"
</IfModule>
```

または、

**.htaccess**
```
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 month"
  ExpiresByType image/jpeg "access 1 month"
  ExpiresByType image/gif "access 1 month"
  ExpiresByType image/png "access 1 month"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/javascript "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType image/x-icon "access 1 month"
  ExpiresDefault "access 1 month"
</IfModule>
```

### XHR Cache

XHR 要求もキャッシュした方が良いでしょう。
下記の記事を参考してください。

- [Apacheのmod_cahceで動的APIレスポンスをキャッシュ](https://qiita.com/hkusu/items/3ca057ab5f40a4d78f3b)
- [What's the difference between Cache-Control: max-age=0 and no-cache?](https://stackoverflow.com/questions/1046966/whats-the-difference-between-cache-control-max-age-0-and-no-cache)

## SSL

SSL 関連作業は現在進行中です。（ここまでくるのはよっぽどないですが。）

- [始めてみよう、SSL の高速化](https://www.jp.websecurity.symantec.com/welcome/pdf/wp_ssl_speedup.pdf)
- [Webの表示速度を遅くする「SSLハンドシェイク」とは](http://www.atmarkit.co.jp/ait/articles/1002/09/news120.html)
- [httpdの設定（ssl.conf）](http://www.nina.jp/server/slackware/httpd/ssl.conf.html)
- [Apache sslsessioncachetimeout](http://httpd.apache.org/docs/2.2/mod/mod_ssl.html#sslsessioncachetimeout)
- [SSL negotiation taking 2-9 seconds](https://www.webpagetest.org/forums/showthread.php?tid=11788)

## その他

Enable SVG in site
SVGを使用するとき

**.htaccess**
```
<IfModule mod_mime.c>
  # Enable SVG in Site @AMD Kanazawa
  AddType image/svg+xml svg svgz
  AddEncoding gzip svgz
</IfModule>
```

Redirect for SPA
SPAなどで Redirect

**.htaccess**
```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^(ignore_url|other_url)($|/) - [L]
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

- [mod_rewriteでHTTP / HTTPSの切り替え](https://qiita.com/gotohiro55/items/7daa988db23a5a8355c1)

**.htaccess**
```
<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
```