Webページの表示を速くする（PageSpeed Insights）

2020.9.14公開（2021.2.17更新）
@HTMLコーディング
#表示速度

前書き

Webページの表示を速くすれば、サイトを訪れた人が離脱する確率が下がる。
また、検索エンジンで上位に掲載される確率が上がる。

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>

window.matchMediaを使う（JavaScript）

Intersection Observer APIを使う（JavaScript）

この記事は役に立ちましたか？

はいいいえ

送信中