Webサイト高速化/最適化のためにやったこと

概要

最近作っていたWebサイト( https://atelier24b.com/ )で、Chorme の Audits 使ってパフォーマンス計測しながらやってみたのでその結果

サイトの作り的には

みたいなわりとミニマムな5テンプレートくらい(ページ数20くらい)のレスポンシブのWebサイトです。

設定

Audits の設定はデフォルトです f:id:jotaki:20191220091736p:plain

結果

ページ名 Performance Accessibility Best Practices SEO URL
トップ 89 100 100 100 URL
一覧 96 93 100 96 URL
詳細 93 93 100 90 URL
ページ 97 93 100 90 URL

トップ

f:id:jotaki:20191220091723p:plain f:id:jotaki:20191220091712p:plain f:id:jotaki:20191220091702p:plain f:id:jotaki:20191220091707p:plain f:id:jotaki:20191220091718p:plain

一覧

f:id:jotaki:20191220091658p:plain

詳細

f:id:jotaki:20191220091742p:plain

ページ

f:id:jotaki:20191220091729p:plain

やったこと

WordPressプラグイン

最適化まわりでいれたプラグイン

Autoptimize

ファイル(html/css/js)のminifyをいい感じにしてくれるプラグイン
テンプレート側の記述は一切気を使わなくてよく、生成されるhtmlに対してoptimizeをかけるので手軽に導入可能です。
設定も豊富でcssインライン化などベストプラクティに沿ったオプションも用意されています。
ただデバッグはしづらいので管理画面ログイン中のユーザーは最適化しないほうがいいかもです。

Compress JPEG & PNG images

画像圧縮のプラグイン
実際にはこれで圧縮してもPerformanceの項目では圧縮してねと怒られるのですが..

All In One SEO Pack

SEO最適化ですが、だいたいこれ入れて適切に設定できてればSEOは上がる気がします。
カスタム投稿のアーカイブなどうまく出力してくれないテンプレートやページもあるので、1ページずつ出力内容確認しながらフック使って調整していく必要がある場合も

gzipの有効化

Performance の項目で gzip にするといいよってことだったので .htaccess に下記を追加でファイルをgzipで配信
※ さくらサーバー + WordPressの場合
参考: さくらインターネットのレンタルサーバーで通信の圧縮(mod_deflate)を利用する方法 | スキコミ

詳しくみる

# gzip有効
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

  Header append Vary Accept-Encoding env=!dont-vary

  # 画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

  # 圧縮設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

その他

もやりましたが普段からやってはいるのでやっぱりコンテンツ(構成)がミニマムっていうのが大きい気がします。
jQueryとIsotopeやPhotoSwipeみたいなJSライブラリも使っていますし、なんか考えると特別なことはしていないという印象です。

SEOがスコア90くらいなのは、meta関係の設定などではなく色のコントラストをもっとつけましょうみたいな見た目的な話なのでそこは少し許容(妥協やトレードオフ)しています。

感想

Page Speed Insightsは割と結果判定がゆるい?気がしますが、GTmetrix だとPageSpeed ScoreはF判定だったりします。
Auditsの点数だけがすべてではないですね。

あとはいろいろな設定とか環境とか加味したり、もっとキャッシュ設定や実際の表示速度/ネットワーク周りも突き詰めてやらないといけないのかなと感じました。