ARTICLES

Lighthouse を使ってサイトをチェックしてみる (Next.js + MDX + TypeScript + Bulma + PWA)

2019-04-21

このサイトは、Next.js + MDX + TypeScript + PWA + Bulma という構成で作られています。ガチガチにチューンナップされたサイトというわけではないですが、一応気を使って無駄なものがないように作っています。

Lighthouse でチェックをしているというサイトをちらほら見かけるので、自分でもチェックしてみました。Lighthouse というのは、Google が公開している Chrome の拡張機能です。

パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA 対応という項目から点数を出してくれ、なおかつ改善ポイントを教えてくれるというありがたいツールです。

このサイトをチェックしてみたところ以下のような結果となりました。

lighthouse の結果 (Performance: 90, Accessibility: 94, Best Practices: 93, SEO: 90, Progressive Web App: OK)

Performance: 90, Accessibility: 94, Best Practices: 93, SEO: 90, Progressive Web App: OK という得点です。パフォーマンス部分については不安が残ります。(実行タイミングによっては80台になったりする) 今後これらを改善していけるようにチューンナップを進めていければと思っています。

このサイトは React で作られているサイトですが、きちんと SSR (サーバーサイドレンダリング) が行われており、初回アクセス時の React レンダリングが不要であるという点がポイントに反映されているのかなと思います (ただし、CSS アニメーションをさせる関係から一部のレンダリングは走ります)

また、HTML の head 周りも React により設定されているのですが、この設定がされた上で SSR しているため、クローラーにも優しい構成であるという状態でもあります。これらの仕組みは Next.js のおかげであるため、Next.js は偉大だなあと思う次第です。

PWA 対応したよって方は、ぜひ一度試してみましょう。次の課題が見つかるかもしれませんよ。


ARTICLES


    AUTHOR

    原 一浩 の顔写真

    (はら) 一浩(かずひろ)

    カンソクインダストリーズ代表 / グレーティブ合同会社代表

    1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
    雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール&キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー

    著作一覧はこちら