JavaScript
Firebase
PWA
next.js
Lighthouse

無料で爆速なWebアプリケーションを作ろう!

動機

日本語にはこんな格言があります。

  • 「ただより高いものはない」
  • 「時は金なり」

じゃあ、無料サービスで爆速Webアプリケーションを作れば最高じゃない??
→作りました。

Qiita-Trend-PWA

https://qiita-trend-pwa.now.sh/

  • Qiitaいいね数ランキング表示サイト
  • ランキング上位タグの可視化
screen_shot1.png screen_shot2.png

構成

  • サーバ
    • 『now』(Node.jsサーバ)
  • データストア
    • 『Firebase』
  • フレームワーク
    • 『Next.js』+『next-offline』

『now』(Node.jsサーバ)

  • 役割
    • SEO対策+パフォーマンス対策のためのSSR
  • メリット
    • OSSプラン - FREE → 無料
    • サブドメイン取得可能
    • HTTP2対応済 → 爆速
    • HTTPS対応済

『Firebase』

  • 役割
    • Qiitaいいね数スクレイピング結果の取得
      (CloudFirestore + CloudFunctions + CloudHosting)
  • メリット
    • Sparkプラン → 無料
    • CDN利用によるレスポンス取得高速化 → 爆速

『Next.js』+『next-offline』

  • 役割
    • PWA対策
    • SPA対応
  • メリット
    • OSS → 無料
    • ServiceWorkerが15行程度で利用可能 → 爆速

本当に爆速なのか?

(ここまで読んでくれた皆さんの心の声が聞こえます。。。)

「本当に爆速なのか??🤔」

→爆速です。

lighthouse

lighthouse_score.png

中々良いスコア👍
(Accessibilityは、Qiitaの見た目に合わせに行った結果、諦めました。。。)

WebPageTest

https://www.webpagetest.org/

WebPageTest_score.png

中々良いスコア👍
「Load Time」、「Speed Index」、「First Interactive(beta)」あたりを確認いただけると1秒を大きく下回っています。。
ServiceWorkerを利用して、各リソースのレスポンスをクライアントサイドにキャッシュしているので、2回目の表示が早くなっていますね。
(あえてサイトの比較は行いませんので、他のサイトについては皆さんで試してみてください。)

まとめ

  • 「ただより高いものはない」
  • 「時は金なり」

じゃあ、無料サービスのみで爆速Webアプリケーションを作れば最高じゃない??

→『now』 + 『Firebase』 + 『Next.js』 + 『next-offline』 = 無料で爆速!😀