NuxtからGatsbyに変えてLighthouseで100点を目指す、ついでにPWA対応もしてみた。
前回、Nuxt から Gatsby に変えて Lighthouse の点数が 92 点まで上がりました。今回はさらに 100 点を目指したいと思います。ついで PWA に対応したいと思います。
Performance の改善
Lighthouse の指摘事項は画像ファイルを改善するようになっていました。サイズの見直しと jpg ファイルを webP ファイル対応して画像ファイルサイズを削減したいと思います。Gatsby は、クライアントに合わせて適切な画像を自動で提供されてますがファイルフォーマットが jpg にしていたので webP ファイルが扱えるようにします。
やり方は簡単で、記事の読み込み処理の heroImage 画像部分にある GatsbyImageSharpFluid に_withWebP を追記すれば OK です。これで webP フォーマットの画像が提供されます。
・・・
export const pageQuery = graphql`
・・・
markdownRemark(id: { eq: $id }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
heroImage {
childImageSharp {
fluid(maxWidth: 1024,quality:100) {
...GatsbyImageSharpFluid_withWebp
・・・Accessibility の改善
こちらも Lighthouse の指摘事項について改善していきます。指摘内容はフッターのコントラストがよくないというものと lang が設定されていないという指摘でした。Lighthouse の指摘にある Learn more にその対策内容が記載されてます。それに従い修正しました。
Best Practices と SEO の改善
こちらは苦労というかよく対策がわかりませんでした。原因は Google Analystic の java script とわかっているのですが、遅延読み込みなど対策してみましたが 100 点には到達しませんでした。とりあえず Google Analystic は削除することにしました。安易だ。
以下は途中まで対策していた内容。Google Analytics V4 対応(gatsby-plugin-google-analytics は V4 未対応のため helmet に追加)と gatsby-plugin-preconnect を gatsby-config.js に設定し、seo.js の Helmet 部分に defer=を追記しました。
・・・
{seo.image && <meta name="twitter:image" content={seo.image} />}
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
<script>
{`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxx');`}
</script>,
defer={false}
</Helmet>Progressive Web App 対応
このブログを PWA する必要ないとは思いますが、Lighthouse で赤色の指摘は嫌なので、Progressive Web Apps (PWAs)を参考に対応していきます。記載されている必要な要件を満たすように対応して、gatsby-plugin-manifest を追加して manifest を記載すれば OK です。
Lighthouse は念の為、モバイルを指定して確認しました。icon は 512x512 は必ず指定してください。あと description も指定しないと PWA グリーンになりません。
・・・
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `akibo.I Blog`,
short_name: `akiboI_Blog`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `minimal-ui`,
description: `Build a server at home !! Edgerouter ER-X, Shuttle, Fedora CoreOS, Container Podman, Nuxt, Amazon Alexa Related Memorandum.`,
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
},
・・・今回最終的には以下のような plugin も入れました。
yarn add gatsby-plugin-preact preact preact-render-to-string
yarn add gatsby-plugin-preconnect
yarn add gatsby-plugin-react-helmet react-helmet
yarn add gatsby-plugin-offline
yarn add gatsby-plugin-manifestでも自宅サーバだと Redirects HTTP traffic to HTTPS Error!が消えない。nginx でリダイレクトも設定しているし原因がわからない。 ここでも妥協。All 100 点、PWA グリーンは、自宅サーバは一旦諦めて netlify のサーバで目指そうと思います。 対策した内容をnetlify のサーバにデプロイして試してみます。
あれ!、なんだ、All 100 点、PWA もグリーンになっている。ということは自宅サーバの環境がやはり問題なんですね。
まだわからないところはありますが、取り敢えず良しとしますかね。画像も webP にしたせいか、netlify のサーバのもっさり感がなくなりサクサク動いている気がします。それに IPv6 や SSL も対応しているし。自宅サーバは開発系のみにしてブログのメインは netlify サーバにしようかと考え始めています。