Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
953
Help us understand the problem. What is going on with this article?
@zonbitamago

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

More than 1 year has passed since last update.

動機

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

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

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

Qiita-Trend-PWA

  • 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

WebPageTest_score.png

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

まとめ

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

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

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

追記

953
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
zonbitamago
仕事ではサーバーサイドを細々とやってます。 趣味ではクライアントサイドをやってます。 すべてがWebになる。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
953
Help us understand the problem. What is going on with this article?