パフォーマンスの最適化
ページパフォーマンス
- Page Insides を使ってパフォーマンスの確認を行う。
//PageSpeed Insights を使う
画像フォーマットとalt属性
<picture>
<source srcset="<%= getRelativePath('/assets/images/index/img_index_map.png.webp'); %>" type="image/webp">
<img src="<%= getRelativePath('/assets/images/index/img_index_map.png'); %>" alt="収集運搬エリア">
</picture>
コンテンツの引用とURL
- 別サイトからコンテンツを引用する場合、blockquote要素を使用する
<blockquote cite="https://test.com/article/">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<footer>作者の名前, <cite>テキストのタイトル</cite></footer>
</blockquote>
//bad
https://www.test.jp/about/company-information-principal
//good
https://www.test.jp/about/principal-info
- URLを書く際にハイフンをアンダースコアの代わりに使用する
//bad
https://www.test.jp/about/principal_info
//good
https://www.test.jp/about/principal-info
画像の最適化
<picture>
<source srcset="<%= getRelativePath('/assets/images/index/img_index_map-sp.png.webp'); %>" media="(max-width:767px)" type="image/webp">
<source srcset="<%= getRelativePath('/assets/images/index/img_index_map-sp.png'); %>" media="(max-width:767px)">
<source srcset="<%= getRelativePath('/assets/images/index/img_index_map.png.webp'); %>" type="image/webp">
<img src="<%= getRelativePath('/assets/images/index/img_index_map.png'); %>" alt="収集運搬エリア">
</picture>
<img loading="lazy" src="./images.jpg" width="1200" height="800">
ソーシャルシェアとOGP
- OGP(Open Graph Protocol)を設定する
<meta name="description" content="TOPページです">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!-- ogp -->
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta property="og:url" content="https://test.jp/">
<meta property="og:title" content="WP用テンプレート">
<meta property="og:description" content="TOPページです">
<meta property="og:image" content="https://test.jp/assets/images/ogp/ogp.jpg">
<meta property="og:site_name" content="WP用テンプレート">
//https://ogimage.tsmallfield.com/を使用する。