ウェブサイトのパフォーマンス（表示速度）を改善するための覚書です。ページの読み込み時間が短くなることで閲覧者に与えるストレスを軽減することができます。
ウェブページのパフォーマンス測定オンラインツール
- PageSpeed Insights
- GTmetrix
- HTTP Compression Test …サーバーが圧縮データを送信しているかチェック
CSS・javascriptの軽量化オンラインツール
.htaccessによるキャッシュの制御・gzip圧縮
キャッシュの制御の記述一例
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
</IfModule>mod_deflate モジュールによるデータ圧縮の記述一例（画像やPDFはすでに圧縮されているため除外）
<ifModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|pdf)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>レンタルサーバによってはこの記述がなくても圧縮したデータを送信する設定になっている場合があるので先に上述のチェックサイトでチェックしておくと吉。
大きいファイルの読み込みにrel="preload"を使う
使いどころをよく考える必要がありそう。以下を参考に。
- リンク種別: preload - HTML: HyperText Markup Language | MDN
- rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog
- rel=”preload” によってリソースを先読みさせる – ラボラジアン
- webサイト高速化にプリロード（preload）する意味はある？ :: よっし～ずウェブサービス【Yws】
画像の読み込みにdecoding="async"を使う
参考：decoding="async" VS loading="lazy" — ブログ | 株式会社Spelldata
オフトピック
freo Tips以下に過去に掲載していたfreoについての覚書を微妙に加筆修正もして復旧させていっています。いくつかリンクしてくださっているサイトさんがあるのも確認しましたがURLが変わってしまっているのは申し訳ありません…。
