フロントエンドを100倍速くした（ ＾ω＾） - Qiita

おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小

[dirtjapan]

あー、開発初期に｢とりあえず使いそうなのガサッと持ってきちゃえ｣ってやるのよね、わかるわかる。あとで見直すべきなんだけど今動いてるし工数もないし(面倒だしやる気でないし)放置になる。

[kkobayashi]

10倍だったけどやってる事は真っ当でよかった

[mayumayu_nimolove]

すごいなぁ、阿部寛のサイトってこう言うの全部やった結果なんだろうなぁ。

[Keisuke69]

この世に速くて悪いことは、とあるあの件を除いて何もない！

[jay-es]

パフォーマンスに無関心なメンバーがいるとどんどん遅くなっていくのはあるある。lodash-es を丸ごとインポートするのは ESLint で禁止してる

[mongrelP]

「これについては潔く利用しない決断をしました。利用者は必ずしも高速な回線ではないのです。」CJKフォントはファイルサイズでかいもんなぁ…＼というかCJK省くだけで割と一般サイト高速化結構しそう…

[ajisaiotoko]

はてブにスパム送りつける暇があったらキングダムカムでもやってろ。最高に面白いぞ。（通報しました。

[tackman]

“日本語Webフォント きれいなフォントで表示したいのは大変良くわかりますが、パフォーマンスを犠牲にしてはいけません…これについては潔く利用しない決断をしました。利用者は必ずしも高速な回線ではないのです”

[takun71]

ブラウザでキャッシュしてくれるから二回目以降はそんなに変わらないってことない？

[rochefort]

FontAwesome個別にimportできるの知らんかった

[knok]

いい話ではあったが、「いますぐ左上に表示されているLGTMの数だけスクワットするのです」膝を痛めるレベルにLGTMがついてるので危ない…

[ichiken7]

“初期描画(FirstContentfulPaint)まで30秒ぐらい掛かる” さ、さ、さ、30秒！？

[spark7]

元が酷すぎる

[shingo-sasaki-0529]

本当に基本的なテクニックだけではあるんだけど、大半の問題はこれだけで解決できるので良い記事だと思う。これ以上の高速化を考えようとすると、フロントエンドで完結せずに、CDNや画像最適化が出てきちゃうからね。

[napsucks]

このまえ電力会社をエバーグリーンからエルピオに乗り換えたんだが、マイページの応答速度がめちゃくちゃ速くてびっくりした。レスポンス大事。

[tito1201]

よかった。

[diveintounlimit]

泥臭く正しい作業

[Wafer]

ライブラリざっくり削ったところで新しいアーキテクチャ導入云々言ってるんだけど、こんな状態にした連中が新しい技術とか使いこなせるわけないやろと思ってしまった。著者の力量は大したもの

[moto_motosaka]

肥大化してきたし、自分もそろそろ見直しかけようかな……

[shields-pikes]

参考になる。ライブラリは選んで読み込みたいよね。

[Nodaguti]

なのくろさんだ。改善前 FCP 30秒は改善のしがいある

[takaya1992]

応援してます

[programmablekinoko]

これは手の入れがいのあるレガシー・・・

[berlysia]

Recoilもう使ってってるのははやい