具体的な施策

• ・WEBに公開される全ての画像にはALTが指定してある状態
• ・シークレットモードでの起動時にレイアウトシフト（CLS）が1.0以下であること
• ・シークレットモードでのライトハウスチェック時にすべてのページのスコアが５０以上であること
• ・Javascriptのキャッシュはちゃんと効いていること
• ・CSSのキャッシュはちゃんと効いていること
• ・クロームのデバッグモードでサイトをチェックした際にエラーが発生していない事
• ・サイト全体を通して使われているフォントが統一されている事
• ・Googleアナリティクスが適切に仕込まれていてユーザーのPV等の情報がちゃんと見える事
• ・utmに関するデータが保持されていて、会員登録したユーザーがどこから来たユーザーなのかの判別が可能な事
• ・全てのページにTitleとdescriptionが正しく設定されている事
• ・title は約３６文字
• ・description は約１４０文字を基準とする
• ・H1タグが設定されている事
• ・Google Searh Consoleにサイトマップが登録されている事
• ・UIにパンくずリストを設置する
• ・GoogleBOT対策がしてあること
• ・無効なリンクの先は全てリダイレクトをかけて４０４が発生しない事
• ・クロールされたくないページに対してnoindex設定がされている事
• ・URLに日本語や全角表記を使わない事
• ・index.htmlにはcanonialタグを記述する事
• ・HTTPS対応している事
• ・レスポンシブレイアウト設計でページを構成している事（見る画面によってレイアウトを最適化する事）

画像について

• 画像解像度がRetina対応されていてぼやけている画像が無い状態
• ■Webpも一緒に記述する
• ■lazyload.jsとloading=”lazy”で遅延読み込みをする
• ■imgタグ内にwidthとheightを明記する

記述例

<picture><source srcset=”画像名.webp” type=”image/webp” />
<img src=”画像名.jpg” alt=”画像の名前” width=”750″ height=”584″ class=”lazyload” loading=”lazy” />
</picture>

head内について

• ■第三者コードの影響を抑える

記述例

<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/maps”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/analytics/analytics/”>
<link rel=”preconnect dns-prefetch” href=”https://www.tiktok.com/en/”>
<link rel=”preconnect dns-prefetch” href=”https://marketingplatform.google.com/about/tag-manager/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/speed/libraries/”>
<link rel=”preconnect dns-prefetch” href=”https://fonts.google.com/”>
<link rel=”preconnect dns-prefetch” href=”https://www.doubleclickbygoogle.com/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/apis-explorer/#p/”>
<link rel=”preconnect dns-prefetch” href=”https://www.yahoo.com/”>

スクリプトの記述の方法と場所

スクリプトの記述にdeferを追加し＜/body＞近くに配置する

記述例

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”></script>
<script defer src=”/js/lazyload.js”></script>
※defer属性を追加することでscriptは非同期でダウンロードされますが、HTMLパースは継続します。
その他、css、jsはなるべく一つにまとめて圧縮した方が良いです。

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

Google的に「ブラウザ上で一度読み込んだ内容・情報を一時的に保存して、次回閲覧する際に素早く読み込めるようにしてね」ということなので.htaccessに以下を記述してキャッシュを有効にしましょう。

記述例

＜ifmodule mod_deflate.c=””＞
ExpiresActive on
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType application/x-javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”
ExpiresByType audio/ogg “access plus 1 year”
ExpiresByType image/bmp “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType image/webp “access plus 1 year”
ExpiresByType video/mp4 “access plus 1 year”
ExpiresByType video/ogg “access plus 1 year”
ExpiresByType video/webm “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
＜/ifmodule＞

スクロール パフォーマンスを高める受動的なリスナーが使用されていません

スクロールがブロックされる可能性のある要因がファイルにあります。
passiveを使うことによって改善できますよという内容なので以下を記述しましょう。

記述例

jQuery.event.special.touchstart = {
setup: function (e, t, s) {
t.includes(“noPreventDefault”) ? this.addEventListener(“touchstart”, s, {
passive: !1
}) : this.addEventListener(“touchstart”, s, {
passive: !0
})
}
}, jQuery.event.special.touchmove = {
setup: function (e, t, s) {
t.includes(“noPreventDefault”) ? this.addEventListener(“touchmove”, s, {
passive: !1
}) : this.addEventListener(“touchmove”, s, {
passive: !0
})
}
}, jQuery.event.special.wheel = {
setup: function (e, t, s) {
this.addEventListener(“wheel”, s, {
passive: !0
})
}
}, jQuery.event.special.mousewheel = {
setup: function (e, t, s) {
this.addEventListener(“mousewheel”, s, {
passive: !0
})
}
};