当サイトをGatsby v3にアップデートしました

blog-hero-img今月リリースされたGatsby v3にアップグレードして、サイト開発、そしてサイト表示スピードが大きくアップしました

pen-icon2021.03.25rewrite-icon2021.11.19

Profile Pic

この記事の筆者:三好アキ(ウェブエンジニア)


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



Gatsby v3のリリース

(*2021年11月追記: 本サイトはGatsby v4に移行しました。)


今月(2021年3月)のはじめにGatsby v3がリリースされたのに合わせ、本サイトもv3に移行しました。

v3

ウェブ上で最速のサイト」と豪語するGatsbyらしく、今回のバージョンアップも高速化に焦点が当てられており、本サイトもv3アップグレード後はスピード(Performance)が上がり、90以上のスコアを維持できるようになりました。

score

Gatsby v3の特徴

v2のリリースが2018年9月だったので、おおよそ3年ぶりのメジャーリリースとなった今回のv3。

v3はエンジニア、コンテンツ担当者、そしてユーザーというウェブサイトに関係する全ステークホルダーに高速化のメリットをもたらすことを目指しています。

具体的には以下の点が改善されています。


• 開発時のbuildsスピードを80%高速化

• Incremental Buildsによってbuildプロセスを高速化

• 画像最適化を進化させてサイト表示を高速化

参考: https://www.gatsbyjs.com/blog/gatsby-v3


v3と同時にGatsby Hostingの提供開始も発表されました。

これまでGatsby Cloudでしか利用できなかったIncremental Buildsがデフォルトで利用可能になったこと、そして画像最適化を行うGatsby Imageのアップグレードが今回のリリースの目玉かと思います。

Gatsby Imageはこれまでgatsby-imageプラグインから、<Img/>コンポーネントを読み込んで使っていましたが、v3では名前がgatsby-plugin-imageに変わり、<StaticImage/><GatsbyImage/>の2つのコンポーネントが使えるようになりました。

<StaticImage>はレンダー時に毎回同じ画像を表示するコンポーネント、そして<Gatsby Image>はレンダーごとに違う画像を表示するコンポーネントでの仕様が想定されており、これは例えばページごとに表示する画像が違うHeroコンポーネントや、読み込むデータによって画像が変わるテンプレート的なコンポーネントのことです。

gatsby-image-pluginに合わせてGraphQLのクエリも、フラグメントを使ったこれまでの ...GatsbyImageSharpFluildからgatsbyImageDataに変わっています。

gatsbyImageDataには次のように各種の設定を渡せるようになっているので、使いやすくなりました。


export const pageQuery = graphql`
 BlogQuery {
   blogPost {
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
            width: 300
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

AVIFという、WebPよりも軽く、そして高画質な保存形式にも対応しているのは驚きです。

AVIFフォーマットについては、次の記事で詳しく紹介しています。

なお、gatsby-image-pluginで設定可能な全項目は以下のリンクで紹介されています。

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image

当サイトのv2からv3への移行

当サイトはこれまでGatsby 2.20.8で開発を行ってきました。

今回v3のリリースに合わせて、Gatsby CLIとともにすべてのパッケージのバージョンも一気に上げたのですが、移行作業は案外早く終わり数時間でデプロイまで完了しました。

何かトラブルやエラーが出るだろうと思っていたので、これは意外でした。

早く済んだ理由の一つは、当サイトの画像の9割近くがサイト軽量化の目的でsvgを使っており、それらをimportでコンポーネントに読み込んでいたので、Gatsby ImageやGraphQLの変更の影響を受けなかったためです。

また有志の開発によるプラグイン(community plugin)への依存が低く、v3リリースと同時にアップグレードされた各オフィシャルプラグインの導入だけで作業が済み、バージョンのコンフリクトが発生しなかったことも要因です。

JMAstackガイド本フリー配布ページで使っているプラグイン、gatsby-plugin-mailchimpがv3で動くかが唯一心配でしたが、今のところ問題は発生していません。

gatsby-imageからgatsby-plugin-imageの移行にはgatsby-codemodsというパッケージが用意されていますが、私は使いませんでした。

くわしくは以下の公式移行ガイドを参考にしてください。

https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide

v3移行の恩恵

v3移行で本サイトのbuilds時間は大幅に短くなりました。

またサイトのスピードもより高速化し、Lighthouseのパフォーマンスで安定的に95以上のスコアが出るようになりました。

score

Gatsbyに興味のある人は次の記事も参考にしてください。

monoteinはGatsbyを使ったJamstackサイト制作を専門としています。

ストレスフリーでサクサク動き、高いCV率を実現するJamstackサイトに興味のある方は、コチラより遠慮なくお問い合わせください。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談