akfm.dev
aboutbloggithubcontact

Light Houseでperfomanceを100にした話

April 10th, 2019

今回のチューニング前

Perfomanceではなんとか99点が取れるようにはなったものの、なぜかあと1点はどう頑張っても取れませんでした。。。 アクセシビリティやSEOの項目は後回しにしてたので、もはや見てもなかったです。

今回のチューニングでやったこと

light houseみて赤いところともかく全部潰しました。 かるくまとめると↓こんな感じですかね。

Perfomance

  • nodeとnpmのビルド環境のバージョンあげただけ（...？）

Accessibility

  • button要素にaria-label属性追加
  • html lang属性にjaを追加（react helmet）

Best Practice

  • 特になし（Gatsby2系が最適化してくれてる）

SEO

  • descriptionを設定した

ということなんですが、Perfomanceがなぜ1点上がったのかはよくわからず。 トランスパイル時の最適化とかでNodeのバージョン依存なんてあるのかな、、、 まぁなんにしろこれで100点サイトです！

本当はアクセシビリティも100点まで行きたかったけど、前回書いたPrismらへんで引っかかってたので今回はデザインを優先して諦めました。

React Helmetでlang属性指定

せっかくなので、今回やったGatsbyでhtml lang属性の指定方法について。 Gatsbyはもととなるhtmlファイルを直接修正できません。 なので基本的にはlang属性を直接触る手段はないのですが、React Helmetにhtmlタグを渡せば指定できます！

import React from 'react'
import Helmet from 'react-helmet'
import Layout from '../components/organisms/layout'

export default ({ data }) => {
  return (
    <Layout>
      <Helmet>
        <html lang="ja" />
        <title>site title</title>
      </Helmet>
    </Layout>
  )
}

こんな感じですね。便利！

今後の目標

一旦最高得点まではいったし、これを維持しながらエンハンスしていこうかと思います。 最初に高みまで行くのは案外簡単だけど、そっから維持するのが難しいってdev.toにも書いてあったし。 あとはSEOにひっかかるようにブログもっと書かねば、、、

©︎akfm.dev 2022. Using Google Analytics