ottijp blog

Gatsby+Disqusで作っているブログのPageSpeedスコアを改善する

2020-04-12 Tags: GatsbyDisqus

このブログはGatsbyで作っていて, コメント機能を追加するために,Disqusを使っています.

Gatsbyのテンプレート(gatsby-starter-blog)でブログを作った直後はPageSpeedのスコアはかなり高かった記憶があったのですが, いつの間にかスコアが下がってしまっていました.

疑わしかったのはWebフォントとDisqusの利用で, Webフォントを無くすとそこそこスコアが上がったのですが, 特にモバイルの方がまだ低かったです.

そこで,表示ボタンを押したときだけDisqusのフォームを読み込むように修正しました.

PageSpeedのスコア(Before)

Webフォントを無くした状態で,こちらのページに対してPageSpeedを行った結果が以下です. Beforeは後から改善前のページを別途作って評価したので,URLは伏せています.

モバイル

ps before mobile

デスクトップ

ps before desktop

Disqusの動的表示

Disqusを設置すると,多くのhttpアクセスが発生するようで,Chrome DevToolsで確認してもそのとおりでした.

参考: Disqus is slowing down your website, Here’s Proof - Sitebee®

そこで,Disqusを自動では読み込まず,コメント件数だけ表示しておき,表示ボタンを押したタイミングでDisqusを読み込むようにしてみました.

まず,ブログポストページ用のテンプレートクラスにDisqus表示用のステートと,表示する関数を追加します.

src/templates/blog-post.js
constructor(props) {
  super(props)
  this.state = {
    isDisqueShowing: false,
  }
  this.showDisqus = this.showDisqus.bind(this)
}

showDisqus() {
  this.setState({ isDisqueShowing: true })
}

Disqusの使い方自体は省略します(gatsby-plugin-disqusでできます)が,render()でDisqusを表示する部分を以下のようにします.

src/templates/blog-post.js
{ !this.state.isDisqueShowing &&
  <div
    style={{
      marginTop: rhythm(1),
      marginBottom: rhythm(1),
    }}
  >
    <CommentCount config={disqusConfig} placeholder={'...'} />
      <div>
        <button onClick={ this.showDisqus } >コメントを表示・入力する</button>
      </div>
  </div>
}
{ this.state.isDisqueShowing &&
  <div>
    <Disqus config={disqusConfig} />
  </div>
}

これで,コメント件数だけ表示しておいて,ボタンを押した時のみDisqusのフォーム読み込みが行われるようになりました.

PageSpeedのスコア(After)

この対応をしたあとで,PageSpeedのスコアが改善しました.

モバイル

ps after mobile

デスクトップ

ps after desktop


ottijp
Satoshi SAKAO (@ottijp)

都内でアプリケーションエンジニアをしています

...