【GatsbyJS製ブログ】パフォーマンス改善

2022年5月29日2023年12月5日

Gatsbyでブログを立ち上げて運営し始めてから、色々とカスタムも加えていきました。

GoogleMapやYoutubeを埋め込んだり、アドセンスやアフィリエイトを埋め込んだり…おかげさまで、なんとなくブログっぽくはなってきました。

そんなある日「そういえば、Gatsbyってそもそも早いっていうのがウリだったけど、LightHouseでパフォーマンス計測でもしてみるかぁ」とLihgtHouseでパフォーマンス計測をしてみたら…

クマ

なんじゃこりゃあ！Gatsby、早いんじゃなかったんかい！！

さすがに２０点代はヤバすぎます。ということで早急にパフォーマンス改善を図りました。

とにかくテストで洗い出されたマズイところと、ネットで調べたことをやってみました。

ちなみに、最終的に６０〜７０点台になりましたが、これはモバイル計測の結果です。

デスクトップ計測だと９９点でした。

この記事はこんな人にオススメ

Gatsby製ブログで、思った以上にLightHouseのパフォーマンススコアが低いから改善したい！
YoutubeやGoogleMapの埋め込みなど、サードパーティのリソースってどうにもならないの？なんかいい方法ない？

やったこと０．gatsby-plugin-webpack-bundle-analyser-v2でWebpackのバンドルサイズを可視化

とりあえず、このプラグインを使うとWebpackのバンドルサイズが可視化されます。どこの容量が大きいかが一眼でわかるので面白いです。

パフォーマンスを改善していく前にインストールしておくと、どこを減らせばいいかわかりやすくていいかもしれません。

クマ

ただ、私は正直あんまり使いませんでした。

いつも通り、yarnでインストール→gatsby-config.jsに記述。で、gatsby developかgatsby buildをしたときにブラウザに表示されます。

$ yarn add gatsby-plugin-webpack-bundle-analyser-v2

plugins:[
…
  {
    resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
    options: {
      devMode: true,
    },
  },
…
]

gatsby-config.jsに記述するだけでは、デフォルトで無効になっていますので、optionsにdevMode: true,を加えましょう。

その他のオプションはコチラを参考にしてください。（英語のサイトです）

やったこと１．lodash周り

「これが結構効いた！」っていう記事があったのでやってみました。lodashライブラリから必要なkebabCaseだけインポート。こういうライブラリはデカいものもあるので、必要なものだけインポートしましょう。

クマ

ちなみにケバブケースというのは、oita-cityのように、小文字の単語を-で繋ぐ書き方です。ケバブのように-で串刺しになってますね。lodashのkebabCaseを使うと、文字列「OitaCity」を「oita-city」のように大文字の部分を-で繋いだケバブケースに変換してくれます。

Gatsbyではパスの指定をケバブケースでやっているので、kebabCaseはパス周りでよく使います。

gatsby-plugin-lodashをインストール

これもいつも通りです。

$ yarn add gatsby-plugin-lodash

plugins:[
…
  {
    resolve: "gatsby-plugin-lodash",
  },
…
]

これで不要なlodashライブラリを削除してくれるようです。

  {
    resolve: `gatsby-plugin-lodash`,
    options: {
      disabledFeatures: [`shorthands`, `cloning`],
    },
  },

オプションでこのように指定してあげると、特定の機能を削除してくれるようです。が、lodashの中に使っているkebabCaseがどこにあるのかよくわからなかったので、このオプションは使っていません。

lodashまるごとインポートしている部分をkebabCaseだけインポート

lodashをまるごとインポートしている部分を必要なkebabCaseだけインポートします。

- import _ from 'lodash'
+ import { kebabCase } from 'lodash/string'

で、使うときはこんな感じ。

- _.kebabCase(OitaCity)
+ kebabCase(OitaCity)

私の環境ではあまり効果はありませんでしたが、人によってはここが効くかもしれません。

やったこと２．フォント

fontsourceでフォントを自前にしました。こちらで詳しく解説しています。

あわせて読みたい

【GatsbyJS製ブログ】フォントをGoogleフォントに変更する Gatsbyのデフォルトの日本語フォントはお世辞にも見やすいもの、とは言えません。なんかこう「海外産」って感じです。今回はフォントの変更をしていきたいと思います。 …

ここも参照してみてください。（英語のサイトです）

結構効果がありました。Googleフォント、Youtube、GoogleMapなど、外部から引っ張ってくるものは工夫した方がいいですね。

やったこと３．Youtubeの埋め込み

こちらで解説しています。ページ読み込み時はサムネイルだけ表示し、サムネイルをクリックしたらYoutubeを読み込むことでパフォーマンスを上げています。

あわせて読みたい

【GatsbyJS製ブログ】Youtubeの埋め込み（レスポンシブ対応も）ブログを書いていて「ここにあのYoutubeを埋め込みたい！」もしくは「自分の作ったYoutubeを紹介したい！」ということがあると思います。ちなみに実際Youtubeの埋め込み…

結構効果がありました。

やったこと４．画像の最適化

画像サイズを指定することで、容量を抑えました。

画像を扱う際gatsby-plugin-imageのStaticImageタグとGatsbyImageタグを使うのですが、場所によって適切にwidthを指定しました。大体600〜1000くらいですね。

<StaticImage
  src="../images/image.JPG"
  alt="画像"
  width={800} //←こんな感じ
/>

ちょっと効果がありました。

やったこと４’．画像の最適化

こちらの記事で紹介したようにアフィリを貼ったらまたロードする画像容量が増えてきたので改善。

最適化、というよりimgタグにloading=’lazy’を指定して遅延読み込みしてあげただけ。

まぁまぁ効果がありました。

ここまでで割とパフォーマンス改善ができました。

２０点台→６０点台。

最低ラインって感じ。

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！

LINE STORE

クマのプログラミング日記

やったこと５．GoogleMapの読み込みを遅らせた

useInViewを使って、マップが画面内に入ったときに読み込むようにしました。詳しくはこちら。

あわせて読みたい

【GatsbyJS製ブログ】Google マップをAPIなしでブログに埋め込む皆さんはGoogle マップをブログに使っていますか？ブログの種類にもよりますが、マップを使う場面も出てくると思います。この記事ではGoogle マップをAPIなしでブログ…

この時点で大体６０点台→７０点台

で、このとき「モバイル」の方で計測していたことに気づきました。いや、明らかにテスト計測のときに出てくる画像がモバイル用のだから気づけよ、って話ですが。

気を取り直して、「デスクトップ」で計測してみたら９９点でした。

クマ

なぁんだ、とりあえず一安心…。

ということで、「モバイル」で７０点台「デスクトップ」で１００点近いなら問題ないか、ということで、この辺でパフォーマンス改善を終了しました。

クマ

でもまぁ、色々と気づくこともあったのでよしとしよう！

まとめ

サイトの速度はかなり重要です。

待たされている間に「めんどくさいな」と思われて離脱されると困るので、こまめにチェックしましょう。

特にGatsbyの場合はプラグインを導入したときに、余計なJavaScriptが動いたりしてパフォーマンスが落ちる、という場合もあったりします。

Gatsbyは、正直「いいサイトを作る」というよりも「モダンな技術で作る」方にちょっと寄ったフレームワークなので、実際の運用に関してはテストをしながら十分に注意してブログを作っていきましょう。

Gatsbyを学習している方への私からのオススメ！

私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。

画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます！

また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。

こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります！

あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を１動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます！

Udemy 自分のライフスタイルに合わせて学ぼう。対象コースが¥1,800から

あわせて読みたい

【GatsbyJS製ブログ】SCSS & CSS Modulesで快適CSS開発環境を作るようやく開発環境が整ってきましたが、まだまだ快適開発環境への欲は尽きません。ということで、Gatsby製ブログをカスタマイズする記事第３弾は、以前より興味津々だっ…

あわせて読みたい

【GatsbyJS製ブログ】MDXを使えるようにする！あと書き方とか！ GatsbyでWebサイトを作るようなときは無理にマークダウン形式（.md）を使う必要はないかな、と思うのですが、ブログであればマークダウン形式で記事をガシガシ書いてい…

あわせて読みたい

【GatsbyJS製ブログ】Gatsbyの勉強法このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。もちろん自分でもGatsby製ブログの運営をしています！ですが、Gatsbyは日本語の情報が少な…

あわせて読みたい

【Gatsby製ブログ】framer-motionの基本的な使い方今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。 Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営してい…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【GatsbyJS製ブログ】パフォーマンス改善

やったこと０．gatsby-plugin-webpack-bundle-analyser-v2でWebpackのバンドルサイズを可視化

やったこと１．lodash周り

gatsby-plugin-lodashをインストール

lodashまるごとインポートしている部分をkebabCaseだけインポート

やったこと２．フォント

やったこと３．Youtubeの埋め込み

やったこと４．画像の最適化

やったこと４’．画像の最適化

やったこと５．GoogleMapの読み込みを遅らせた

まとめ

tomokichi.90