基本のページスピード対策メモ

2021年9月14日

レンダリングを妨げるリソースの除外

不要な(そのページに使用していないなど)JavaScriptやCSSがあれば削除。
ページによっての出しわけも検討する。
CSSは同じ分量でもファイルを分けると表示速度に影響するので注意が必要。resetCSSなどはベースのCSSに入れる、スライダーに使用するCSSなども必要なページのCSSに組み込むなど工夫して読み込みファイルを少なくする。

※プラグイン系は後々不要になった時に削除が必要なので、SCSSなどで中身のファイルは分けて管理をする

静的なアセットと効率的なキャッシュ ポリシーの配信

画像、CSS、JSは.htaccessで設定を行う。画像更新に影響がでてしまう場合は、パラメータをつけることでキャッシュを強制クリアする。

ロリポップ

#キャッシュ
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/eot "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

画像の圧縮

tinypngなど利用して画像を圧縮する。

書き出しする時のファイルサイズは、画質90の等倍画像JPG > 画質40の2倍画像JPG。見た目とファイルサイズのバランスを見ながらファイルサイズを小さくする。

WEBフォントの読み込み改善

@font-faceなど利用して改善を行う。
スライダーなどプラグインに入っているWEBフォントは、使用しない場合はプラグインのCSSから@font-faceの記述を削除する。
使用しない場合:例)CSSで矢印を作り、もともとプラグインに標準装備されているWEBフォントを使用しない

Googleマップ、Googleカレンダー

重くなる&エラーが起こりやすい。
なるべく入れたくない。