Webページの表示を速くする（PageSpeed Insights）
前書き
Webページの表示を速くすれば、サイトを訪れた人が離脱する確率が下がる。
また、検索エンジンで上位に掲載される確率が上がる。
目次
- PageSpeed Insights について
- キャッシュの設定
- ファイルの圧縮
- その他
PageSpeed Insights について
PageSpeed Insights は、ページを分析して、改善する方法を提案してくれる。
（PageSpeed Insights以外にもページを分析してくれるウェブサービスはあり、採点基準は様々。）
PageSpeed Insightsの仕様は、時々変わる。
改善する方法を完璧に行うことは難しいので、出来る範囲で行う。
キャッシュの設定
.htaccessに、キャッシュの設定（拡張子と時間）を記す。
キャッシュファイルが作成されたら、指定した期間は、キャッシュファイルが読み込まれる。
その為、指定した拡張子のファイルを更新する際は、パラメータを付ける。
<Files ~ ".(gif|jpe?g|png|webp|ico|css|js|svg)$">
Header set Cache-Control "max-age=31536000, public"
</Files>
<!-- 初め -->
<link href="style.css">
<!-- 更新をしたら、パラメータを付ける。 -->
<link href="style.css?200914">
ファイルの圧縮
画像ファイルは必ず圧縮する。
サイトの運用に差支えがなければ、css、js、htmlファイルも圧縮する。
WebPについて
画像フォーマットの一つで、JPGやPNGよりもファイルサイズを小さく出来る。
主要なブラウザで使用出来る。
WebPに対応していないブラウザもあるので、その対策もする。
iOS版SafariがWebP画像をサポート、でもMacOS版はまだ
<picture>
<source type="image/webp" srcset="img.webp">
<img src="img.png" alt="">
</picture>
ファイルを読み込む方法を変える
後から読み込ませても差支えがないファイルは、読み込む方法を変える。
画像を後で読み込む
ページの冒頭部分に関係のない画像に、loading属性を記す。
また、縦横比が終始一定の画像に、width、height属性を記す。（単位は不要）
width、height属性を記すと、画像を読み込んでいなくても、画像のスペースが確保される。
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
<!-- loading属性を記す -->
<img loading="lazy" src="img.png" alt="" >
<!-- loading、width、height属性を記す -->
<img loading="lazy" width="100" height="100" src="img.png" alt="" >
cssを後で読み込む
ページの冒頭部分に関係のないcssは、javascriptで読み込みを遅らせる。
CSSを非同期ロードする最も簡単な方法 - Qiita
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
javascript
</body>の直前で読み込む。または、defer属性を記す。
【HTML】css・jsは何故ここで読み込むのか？｜イブリスノート｜note
<!-- bodyの閉じタグの直前で読み込む -->
<script type="text/javascript" src="function.js"></script>
<script>
//javascript
</script>
</body>
<!-- defer属性を記す -->
<script defer type="text/javascript" src="function.js"></script>
<script>
window.addEventListener('load', function(){
//javascript
});
</script>
その他
不要なファイルは読み込まない。
出来るだけ、画像を使わずにテキストでコーディングをする。
SPサイズ用の画像とPCサイズ用の画像は、picutureタグで切り替える。
<picture>
<source media="(max-width:767px)" srcset="img_sp.png">
<img src="img_pc.png" alt="">
</picture>
関連記事
