2019年12月20日（金）

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

概要

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

サイトの作り的には

WordPress
カスタム投稿で一覧/詳細ページ
固定ページあり
webpack使って html/css/js コンパイル

みたいなわりとミニマムな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>

その他

BEMにして各クラスセレクタにCSS当てる
アウトライナーを使って構造確認 ( HTML5 Outliner )

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

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

感想

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

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