Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
Rubyコミッター・笹田耕一に世代別インクリメンタルGCを発想したプロセスを聞いてみた - エンジニアHub｜Webエンジニアのキャリアを考える！
Rubyコミッター・笹田耕一に世代別インクリメンタルGCを発想したプロセスを聞いてみた Rubyのフルタイムコミッターである笹田耕一さんに、Rubyの処理性能を向上させるいくつかのブレイクスルーをどのように解決し、どのような困難があったのかを聞きました。 直感的な文法や生産性の高さから、世界中の人々に愛されるオブジェクト指向スクリプト言語Ruby。その黎明期から現在に至るまで、大きな変化を遂げてきた要素があります。“処理速度”です。数々の最適化が行われた結果、Rubyの処理性能はかつてとは比べものにならないほど向上しました。 その改善を支えたのは、世界中のRubyコミッターたち。中でも、性能向上において多くの成果を残してきたのが、クックパッド株式会社でフルタイムRubyコミッターとして働く笹田耕一（ささだ・こういち／ @koichisasada ）さんです。本稿では、彼がいかなる設計方針に
スケールアウトの落とし穴から学ぶ、SREチームでのダッシュボードのアップデート術 - MonotaRO Tech Blog
どんなことが起こったのか？ モノタロウのサイトの監視について レイテンシ監視 トラフィック監視 エラー監視 リソース監視 ログ トラブルシュートの進め方 発生検知 発生箇所の特定 根本原因の調査 強化 課題 おわりに SREチームの市原(@ichi_taro3) です。 モノタロウでは、www.monotaro.com という大規模なECサイトを自社で開発、運用しています。 Webアプリケーションの運用ではトラブルはつきものです。今回は、とあるトラブルシュート事例を軸に、どのように運用を改善しているのかについて紹介します。 どんなことが起こったのか？ あるとき、モノタロウのWebサービス全体でレイテンシ悪化やバックエンドAPIへのタイムアウトの増加が頻発したことがありました。 当然これらは歓迎される状況ではなく、すぐに開発者やSRE、インフラチームの担当者が集まり調査を開始しました。現象は
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
はじめてのPostgreSQLモニタリング入門 / PostgreSQL 11 Monitoring
1,800万人が利用する『家族アルバム みてね』におけるK8s基盤のアップグレード戦略と継続的改善 / FamilyAlbum's upgrade strategy and continuous improvement for K8s infrastructure
React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
2020年6月17日に行われたイベント「UIT meetup vol.9『The new normal for frontend』」に、LINE株式会社のフロントエンドエンジニアであるChanghee Kim氏が登壇しました。「コロナ禍、私たちにできたこと」という講演タイトルで、新型コロナ対策のための全国調査を行った際のフロントエンド開発について紹介しました。講演資料はこちら コロナ禍での仕事の変化 Changhee Kim氏：それでは「コロナ禍、私たちにできたこと」というタイトルで発表させていただきます。まず自己紹介ですが、Kim Changhee（キム・チャンフィ）と申します。LINEでは2018年からフロントエンドエンジニアとして働いています。 LINEではたくさんの外国籍社員が働いています。私もその1人で、韓国出身のエンジニアです。ふだんはLINE公式アカウントの管理画面アプリを開
はじめに MySQL(InnoDB)でSQLのパフォーマンスチューニングをするときに役に立つ知識をエッセンスとしてまとめました。結合(JOIN)やB-treeインデックスの探索の仕組み、実行計画の基本的な見方を紹介します。 想定する読者は、SQLのパフォーマンスを改善する必要があるが実行計画をみてもいまいちピンと来ない方です。インデックスの作成の経験や、複合インデックスやカーディナリティの知識があることを前提にしています。目標は、実行計画の内容がよく分からない読者が、実行計画をみただけでクエリが実行される様子をイメージでき、自信を持ってクエリの改善にあたることができるようにすることです。 ストレージエンジンはInnoDBを前提としています。また、インデックスはB-treeインデックスを想定しています。全文検索の転置インデックスや空間検索のR-treeインデックスについては触れません。 イン
スタディサプリ最大のRailsアプリケーションにYJIT+pitchforkを導入してメモリ使用量を劇的に削減するまで - スタディサプリ Product Team Blog
こんにちは。SREのkyontanです。Rubyが大好きなのでRubyの話をします。ちなみにリクルートはRubyKaigi 2024へGold Sponsorとして協賛しています! *1。ぜひ沖縄でお会いしましょう。 これはあるアプリケーションのメモリ消費量を示すグラフなのですが、まさかgemを入れ替えるだけでこんなに嬉しい変化が見られるとは思っていませんでした。今日はそんなgemの話をします。 話は遡って2023年4月のある日、インターネットを眺めていたところ、ShopifyがpitchforkというOSSを公開したという情報が目に留まりました。 調べてみると、どうやら著名なRackサーバー実装の1つであるunicornの派生版であり、メモリ使用量の削減に特化しているらしいのです。 github.com これはスタディサプリ小中高のあのリソースドカ食いマイクロサービス第一位である api
MySQLでIn句に大量の要素を渡すとまずい理由
概要 MySQLでIN句を使用する時はIN句に渡す要素数に注意する必要があるとよく先輩エンジニアの方から聞いていたのですが、実際に大量の要素を渡すと何がまずいのかはっきり分かっていなかったので調べてみました。 この記事で伝えたいこと MySQLでIn句に大量の要素を渡すとまずい理由 まずい状況を回避するために気をつけるべきポイント 先に結論 MySQLでIN句に大量の要素を渡すとインデックスを貼っていたカラムだとしてもフルスキャンが発生しスロークエリになる可能性があります。 フルスキャンが発生してしまう条件はテーブルに設定してあるインデックスの内容とrange_optimizer_max_mem_size の設定値に依存しており、MySQL8でデフォルトの設定値 & シンプルなテーブルであってもおおよそ数万件の要素数をIN句に渡すとフルスキャンが発生する可能性があると考えられます。 検証環
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、映像サービスプロダクト本部の浜田（@narirow）です。 GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。 GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー
Record, replay, and measure user flows | DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
大量データの JSON serialize 処理を高速化し、レスポンスが倍速になった話 - freee Developers Hub
こんにちは、freee会計でワークフロー機能の開発をしている @mitubaEX です。 先日 freee会計のパフォーマンスチューニングに取り組みました。本記事では、調査の流れ、改善の事例を紹介します。 問題発覚までの流れ freee では自社の経理業務に freee会計を利用しており、その中でも経費精算の機能はほぼすべての従業員が利用しています。そのため日々多くのフィードバックをもらえます。そのフィードバックの1つで、「経費精算の一覧を開くのが遅い」という報告をもらいました。幸い表示件数を指定できるので調整すれば遅くはならないのですが、一覧性が下がってしまうため有用な解決策ではありません。 そこでワークフローを開発しているチームで、このパフォーマンスイシューの調査を始めました。 調査する まず事前調査として Datadog*1 で一覧画面を表示するリクエストの処理を確認しました。 一覧
Git 2.38がリリースされました。 このバージョンから大規模Gitリポジトリの操作を高速化するscalarが同梱されるようになりました。 今回はこのscalarによって、どれぐらいGitの操作が高速化されるのかを簡単に検証します。 結論から言うとgit statusが約43秒かかっていたのが約1秒で操作できるようになります。 Install Git 2.38Git 2.38からscalarが同梱されましたので、各自の環境にあわせてInstallなりVersionUpなりをしてください。 $ git --version git version 2.38.0 Before大規模Gitリポジトリとしてchromiumを利用しました。 普通にgit cloneしてきて、git statusを実施すると約37秒かかります。 ❯ time git status On branch main You
パーシャルクローンとシャロークローンを活用しよう
Git のリポジトリが大きくなると、新しい開発者がクローンして作業を始めるのが難しくなります。Git は 分散 バージョン管理システムとして設計されています。つまり、リポジトリとのやりとりを管理する中央サーバーに接続しなくても、自分のマシンで作業ができるということです。これが完全に実現できるのは、すべての到達可能なデータがローカルリポジトリにある場合だけです。 もっと良い方法があったらどうでしょうか？Git の全履歴にあるすべてのファイルのすべてのバージョンをダウンロードしなくても、リポジトリで作業を始めることができたらどうでしょうか？Git の パーシャルクローンやシャロークローンという機能は、こういったケースで役立ちます。その一方でこれらの機能にはトレードオフもあります。これらの選択肢は Git の分散という性質によってもたらされる可能性を少なくとも一つは壊してしまうため、こうしたトレ
著者情報 : kota-yata.com プレゼン動画 : https://www.youtube.com/watch?v=BcaPCnWZuvY
SELECT table_a.id, table_a.name FROM table_a INNER JOIN table_b ON table_a.id = table_b.id; メリットとしては、 どちらかのテーブルのid列のインデックスを使用可能 サブクエリがないことで中間テーブルが作成されない しかし、インデックスがない場合はEXISTSの方が良い場合があります ソートの回避 SQLでは暗黙的にソートが発生する演算が存在するので、 パフォーマンスにも影響するため、ソートが必要ない場合は考慮する必要があります ソートが発生する演算 GROUP BY句 ORDER BY 句 集約関数（SUM, COUNT, AVG） DISTINCT 集合演算子（UNION, INTERSECT, EXCEPT） ウィンドウ関数（RANK, ROW_NUMBER 等） メモリ上でのソートだけではなく
修正(2021/06/17) ツイッターでご指摘をいただき、一部修正を加えました🙇 はじめに 2021/06/16 未明に Next.js の新メジャーバージョン v11 がリリースされました。 ほぼ同じタイミングで Next.js Conf (Next.js のカンファレンス)が開催されており、Zenn ユーザの中にはリアルタイムで見ていた人も多いのではないでしょうか。 Core Web Vitals をはじめとした 、パフォーマンス改善に関する話題や新機能が多く、Google のチームが Next.js で最適化のトライを行いながら、Nuxt や Angular に反映していくというのが印象的でした。最先端の取り組みが、普段メインで使用している Next.js で行われているということで、非常に嬉しい限りです。 Next.jd 11 全体のまとめは今後誰かが書いてくれると思いますので
RDS Auroraを使っているところで、OSの空きメモリが少なくなったアラートが出たので、それについて細かく考察したら、それなりの量になったのでまとめた感じです。 別にAuroraじゃなくRDS MySQLでも、MySQL Serverでも同じ話なのですが、クラウドならではの側面もあるなということでタイトルはRDSにしております。 RDSのメトリクス監視 RDSはブラックボックスとはいえ、必要なメトリクスはだいたい揃っているので、CloudWatch を見たり……APIで取得してどっかに送りつけたりして利用します。 なので、まずは接続数とメモリについて復習です。 SHOW STATUS 的には Threads_connected です。 CloudWatch Metrics 的には、DBInstanceIdentifier → DatabaseConnections です。 見た感じ、ど
#SRG（Service Reliability Group）は、主に弊社メディアサービスのインフラ周りを横断的にサポートしており、既存サービスの改善や新規立ち上げ、OSS貢献などを行っているグループです。
Laravelへの異常な愛情 または私は如何にして心配するのを止めてEloquentを愛するようになったか
動画: https://youtu.be/QHjRGPw34EI?si=MWb-1v1i1S5MG0eE プロポーザル: https://fortee.jp/phperkaigi-2023/proposal/6211083d-fc51-49a3-8b27-485d8e231b1f
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
こちらの記事は翻訳記事となります。 原著者の許諾を得て翻訳・公開しております。 英語記事: How to Write Fast Code in Ruby on Rails原文公開日: 2019/10/08著者: Gannon McGibbonURL: https://engineering.shopify.com/blogs/engineering/write-fast-code-ruby-rails はじめにShopifyでは、ほとんどのプロジェクトの開発フレームワークにRuby on Railsを使用しています。 RailsとRubyはともにパフォーマンスに対するスティグマ（偏見）が存在します。 多くの個人や企業が、Rails以外での解決方法を探しています。 しかし一方で、私たちShopifyではRuby on Railsを採用して、毎分何百万ものリクエスト（requests per
![[翻訳]ShopifyにおけるRuby on Railsで速いコードを書く方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/30f8dce642738cd4af3a29747660c560f0d98458/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fda%3Atrue%2Fresize%3Afit%3A1200%2F0%2Ao26-6XGJfoafCjrd)
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
Google Chrome、メモリの大食い、やめるってよ2023.02.20 19:00133,983 三浦一紀 これは期待大。 多機能で使いやすいWebブラウザ｢Google Chrome｣が、最新バージョン｢Chrome 110｣で、｢メモリセーバー｣と｢省エネモード｣を搭載。 順次アップデートが行なわれています。 メモリとバッテリーを節約｢メモリセーバー｣は、アクティブではないタブのメモリを解放して、アクティブなタブや他のアプリのために使用する機能。 ｢省エネモード｣は、バックグラウンドアクティビティと視覚効果を制限して、バッテリーを節約する機能です。 僕のChromeにもやってきた！ということで、自分のGoogle Chromeを見てみたら、最新のChrome 110のアップデートが来ていたので、早速アップデートしました。 Image: 三浦一紀設定画面で｢パフォーマンス｣という項
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
https://phperkaigi.jp/2021
Powering the world’s best product teams. From next-gen startups to established enterprises. Unlike any tool you’ve used beforeDesigned to the last pixel and engineered with unforgiving precision, Linear combines UI elegance with world-class performance.
しっかり調査してないですが、こういったCIサービスがほぼ存在しない時期にほぼほぼ最初に登場して、一時期明らかにデファクトスタンダードだったと思うので、昔からOSS活動している人ほど、とても多く利用してお世話になっていたと思うので、そういう人であればあるほど、この状況は、怒りではなく、悲しいというか残念というか、辛いと思うんですよね・・・。 今までありがとう・・・。 長年Travis CI使ってきたので、GitHub Actionsによって潰される(のかどうなるのかわからないけど)、の可愛そう、という気持ちが若干あるけど、とはいえ、こういうのよくある話な気はするな…— Kenji Yoshida (@xuwei_k) 2020年10月7日 買収されて方針変わったのかなと感じるところもありますし、OSSプロジェクトが無料で使っていても会社としては辛いのではという気もするので今までの感謝の気持ち
しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.
Railsパフォーマンス・チューニング入門
黒曜 @kokuyouwind Misoca → 弥生株式会社 (We're Hiring!) 一応Railsエンジニア 最近はAWSとかDocker周りを 弄っていることが多い
※この投稿は米国時間 2020 年 6 月 17 日に、Google Cloud blog に投稿されたものの抄訳です。 クラウド アーキテクトによく寄せられる質問の一つに、「2 つのエンドポイント間でリクエストとレスポンスをどの程度まで迅速に交換できるのですか？」というのがあります。ネットワークのラウンドトリップ レイテンシを測定するツールには ping、iperf、netperf などがありますが、すべてが同じように実装、構成されるわけではないため、ツールによって結果が異なる場合があります。ほとんどの場合、この質問に対する代表的な回答が得られるツールは、netperf であると考えられます。これからその詳細について説明していきます。 Google は、レイテンシ ベンチマークに関する実践的な経験を重ねてきました。このブログでは、Google とサザン メソジスト大学の AT&T Cen
こんにちは、@igsr5 です。普段はある高専の情報科に通いながら、Wantedly, Inc. で長期インターンをしています。興味領域はフロント・バックエンド、インフラで、最近は業務でもっぱらGoを書いています。今回はGoのパフォーマンスチューニングの話です。 対象読者 aws-sdk-go(aws-sdk-go-v2)[1] で s3 ダウンロード処理のパフォーマンス改善を行いたい人 Go[2] の io パッケージの話に興味がある人 バックエンドのパフォーマンス改善に興味がある人 TL;DR 内部で s3 ダウンロードが行われるバックエンドAPI などを考えたとき、 // 1. Downloader の作成 downloader := s3manager.NewDownloader(sess, func(d *s3manager.Downloader) { // + ここを追加 d.
今回の記事は、パフォーマンスチューニングの観点と仕組みを理解することに主眼を置いています。具体的な対処方法についてはシステムによって異なるため、マニュアルの確認や、各種チューニングサービスのご利用をご検討ください。なお、この記事で対象にしているPostgreSQLのバージョンは9.5以降です。 本記事の構成 本記事「パフォーマンスチューニング9つの技」は以下4つの記事から構成されています。他の記事も併せてご覧ください。 パフォーマンスチューニング9つの技 ～はじめに～ パフォーマンスチューニング9つの技 ～「書き」について～（本記事） パフォーマンスチューニング9つの技 ～「探し」について～ パフォーマンスチューニング9つの技 ～「基盤」について～ 1. パフォーマンスチューニングの「書き」とは 一般的にデータベースは、大量データを扱い、大量の問い合わせや更新を高速に処理し、さらに障害発生
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
Dynamic languages are useful tools. Scripting allows users to rapidly and succinctly tie together complex systems and express ideas without worrying about details like memory management or build systems. In recent years programming languages like Rust and Go have made it much easier to produce sophisticated native machine code; these projects are incredibly important developments in computer infra
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js製アプリケーションのコンパイルを約100倍高速化した話
React Server Componentsの仕組み：詳細ガイド | POSTD
LINEユーザー8300万人を対象とするアンケートを1週間で開発するには？ コロナ禍におけるLINEの施策とフロントエンド開発
MySQL(InnoDB)のSQLパフォーマンスチューニングのエッセンス
GYAO!トップページの表示パフォーマンス改善 〜 GraphQLアーキテクチャへの移行
JestでTypeScriptを高速化する | miyauci.me
git statusが43秒かかっていたのを1秒に高速化する大規模Gitリポジトリの操作を高速化するためのscalarを紹介 | Act as Professional
末尾呼び出し最適化とJavaScript
【SQL】ちょっとしたパフォーマンスチューニングまとめ - Qiita
【Next.js 11】next/script には JavaScript の基本がつまっていた
RDSで接続数とメモリ消費量の調整事例 | 外道父の匠
MySQL8.0のバックアップはどれがいいのか - CyberAgent SRG #ca_srg
[翻訳]ShopifyにおけるRuby on Railsで速いコードを書く方法
will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
Google Chrome、メモリの大食い、やめるってよ
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
PHP Web Application Performance Tuning
Linear – A better way to build products
今までありがとうTravis CI、さよならTravis CI - xuwei-k's blog
React17におけるuseEffectの破壊的変更を理解する
クラウドでのネットワーク レイテンシの測定 | Google Cloud 公式ブログ
GoのS3 ダウンロード処理で知っておくと良いこと - バックエンドパフォーマンス改善
パフォーマンスチューニング9つの技 ～「書き」について～｜PostgreSQLインサイド
サイトの表示高速化につながる18のこと | knowledge / baigie
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
decoding="async" について詳しく調べてみる
Deno 1.0