最初はちょっぱやでってオーダーだったけど
ガリガリつくってなんとか期日までに公開・・・と最終クライアント様にサイト見せたら目の付け所がシャープでしょ、って単純に成果物評価のプライオリティが想定と全然違っていたので、作った後からいろいろ軽量化を試みる流れとなった。最近はreactとかばっかいじってたから己でそこをチューニングすることなかったし、ヒェってなったので、そんなDaysのメモ。Gzip
サイト置くのが一般のレンサバじゃなかったので、対応可否が不明でやってなかった。やった。そもそもそのあたりの情報も検証もなかったのでサーバを調べるところから・・・。心配だったけど、構築途中でNginxからApacheに仕様変わったのもあり調べた情報ですんなり行けた。よかった・・・。NginxよりApacheのほうが文献多い＆先方エンジニアさん再起動とかで動かないで良いので速度だけでNginxで！って言うとweb本業じゃないエンジニアさんは多分対応大変だよ！（こっちも一緒にやってて申し訳ない感じで辛いよ！）参考URL
「gzip圧縮」でWebサイトを高速化しよう！【mod_deflate編】https://alaki.co.jp/blog/?p=2310G
zipチェッカー (ページがgzipに対応してるか確認)
https://lab.syncer.jp/Tool/Gzip-Checker/
HTTP Compression Test / WhatsMyIP
https://www.whatsmyip.org/http-compression-test/
mod_deflate – Apache HTTP サーバ バージョン 2.4
https://httpd.apache.org/docs/2.4/ja/mod/mod_deflate.html
gzip圧縮でCSSやJSなどの転送量を減らす方法
https://syncer.jp/how-to-make-gzip
Apache: mod_deflate, mod_expire でページの表示速度を改善する【設定編】 | deadwood
https://www.d-wood.com/blog/2016/05/19_8036.html
Apacheへのmod_deflateの設定 – KAWANO’s PukiWiki Plus!
http://hs-www.hyogo-dai.ac.jp/~kawano/?Install%20Log%2FCentOS5%2Fmod_deflate
最終あげたコード
# === use GZIP ================================
<IfModule mod_deflate.c>
# mod_deflateを有効にする記述
SetOutputFilter DEFLATE
# 古いMozillaなどの古いブラウザでは無効にする。例外としてIEは有効にする
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# 画像は2重圧縮になるので圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# 圧縮するファイル形式を列挙
AddOutputFilterByType DEFLATE text/plain #テキストファイル
AddOutputFilterByType DEFLATE text/html #HTMLファイル
AddOutputFilterByType DEFLATE text/xml #XMLファイル(1)
AddOutputFilterByType DEFLATE text/css #CSSファイル
AddOutputFilterByType DEFLATE application/xhtml+xml #XHTMLファイル
AddOutputFilterByType DEFLATE application/xml #XMLファイル(2)
AddOutputFilterByType DEFLATE application/rss+xml #XMLファイル(3:rss形式)
AddOutputFilterByType DEFLATE application/atom_xml #XMLファイル(4:atom形式)
AddOutputFilterByType DEFLATE application/x-javascript #JavaScriptファイル
AddOutputFilterByType DEFLATE application/x-httpd-php #PHPファイル
AddOutputFilterByType deflate application/x-font-ttf
AddOutputFilterByType deflate application/x-font-woff
AddOutputFilterByType deflate application/x-font-opentype
# 圧縮未対応ブラウザへ圧縮ファイルを送信しないようにする
Header append Vary User-Agent env=!dont-vary
</IfModule>```
webP
工数出したときの前提として対応項目に入っていなかったので、工数を出してご相談。今回はあまりにも背景画像多く、うぇっぴー対応はしなかったけど、メモ。「過大なネットワーク ペイロードの回避」とは？改善方法も解説【PageSpeed Insights】 – キニナル
https://terukosan.com/pagespeedinsights/about_pagespeedinsights/kadainet/
【実践】Googleの画像フォーマット「WebP」でページスピード改善
https://seopack.jp/seoblog/webp_page_speed/
JS defer
改めておさらい。acyncかなdeferかなって。順番守ってほしかったのでdefer。基本defer。(乱暴)図も載っててわかりよい。ありがたい。
script タグに async / defer を付けた場合のタイミング – Qiita
コメントを残す