画像を最適化する

jpg画像を投稿することが多いサイト(投稿する人は画像サイズとか気にしない人)なので、最大の要因になっているとあたりをつけて真っ先に対応した

対策は↓のqiitaを参考にjpegoptimインストールしで画像を最適化した

qiita.com

wordpressなのでuploadsフォルダ以下に年月単位でフォルダ分けされているので、↓を実行して一気に変換

find ./uploads -type f -name "*.jpg" | xargs jpegoptim --strip-all --max=40

ただ、ファイル数が多かったり一つ1mbしてたりと、実行した後1分ほど処理が返ってこず、その間サイトが閲覧できなかった

実行する際は注意したほうがよいかも…

これらを施した段階で点数は0→65になった

圧縮を有効にする

gzip圧縮を活用してなかったので有効にした

webサーバーはapacheを利用しているので↓の拾ってきた設定をhttpd.confに書き込んだ

すみません、どこで拾ってきたか忘れてしまった…

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

  # htmlやcssなどは圧縮
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

これで65→68

ブラウザのキャッシュを活用する

キャッシュの設定をしていなかったので↓の設定を.htaccessに書き込んだ

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType application/javascript        "access plus 1 weeks"
  ExpiresByType application/x-javascript      "access plus 1 weeks"
  ExpiresByType text/javascript               "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
</IfModule>

警告の指摘は消えたが点数は68からかわらなかった

がっつり対策する必要がないので、とりあえずここまでで一旦完了

この後は時間があるときにでも..

なんかやる

Google PageSpeed Insightsが0点だったので対策

画像を最適化する

圧縮を有効にする

ブラウザのキャッシュを活用する