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

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

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

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

LightHouse計測結果
LightHouse計測結果
クマ

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

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

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

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

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

LightHouse最終計測結果(デスクトップ)
LightHouse最終計測結果(デスクトップ)
この記事はこんな人にオススメ
  • Gatsby製ブログで、思った以上にLightHouseのパフォーマンススコアが低いから改善したい!
  • YoutubeやGoogleMapの埋め込みなど、サードパーティのリソースってどうにもならないの?なんかいい方法ない?
目次

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

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

gatsby-plugin-webpack-bundle-analyser-v2/
gatsby-plugin-webpack-bundle-analyser-v2

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

クマ

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

いつも通り、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,を加えましょう

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

やったこと1.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)

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

やったこと2.フォント

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

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

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

やったこと3.Youtubeの埋め込み

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

結構効果がありました。

やったこと4.画像の最適化

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

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

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

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

やったこと4’.画像の最適化

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

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

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

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

20点台→60点台。

最低ラインって感じ。

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

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

やったこと5.GoogleMapの読み込みを遅らせた

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

LightHouse最終計測結果(モバイル)
LightHouse最終計測結果(モバイル)

この時点で大体60点台→70点台

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

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

クマ

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

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

クマ

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

まとめ

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

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

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

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

今の仕事に満足していますか?やりがい、給料、ワークライフバランス…現状に不満を持ったり嘆いているのはもったいないと思います。

今の時代、海外のようにキャリアアップのために活動していくのは、志の高い人には必然とも言えます。動かない人は、それなりの人生を歩むしかありません…。「面倒だ」という人はそれでもいいでしょう。しかし、少しずつでも前向きに活動する人は、最終的に「面倒だ」という人よりも遥かに充実したキャリアを歩むことができます

そこで、これからのキャリアを見据えた相談をしてみませんか?実力派エージェントが、今の仕事環境より、もっと高待遇の職場選びをサポートしてくれます!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次