ANDCO

パフォーマンスの最適化

ページパフォーマンス
  • Page Insides を使ってパフォーマンスの確認を行う。
//PageSpeed Insights を使う
画像フォーマットとalt属性
  • WebPフォーマットの画像を使用する
<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>
  • 短くかつ意味的に適切なURLを作成する。
//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/を使用する。