タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
仕事で Netlify にデプロイしたSPAの読み込みが遅いので原因を調査してほしい、という依頼を受けてウェブパフォーマンス調査を行った。顧客から許可をもらって、この記事ではNetlifyに対してどういう調査をしたのかを書く。 結論だけをまず書くと、NetlifyのCDNのファイル配信パフォーマンスは日本国内からだと非常に悪い。パフォーマンスを改善させるためには、Netlifyに直接アクセスさせるのではなく、前段に他のCDNやキャッシュサーバを挟んだりするほうがいいだろう。 調査の前提 日本国内からのみの調査 サイトには静的なファイルをデプロイしているのみ 該当するNetlifyにデプロイしたSPAをブラウザで試しに開いてみると、確かに初回の読み込みのパフォーマンスがめちゃくちゃ悪い。 Chrome Devtoolsを開いてネットワークタブでどういうふうにリソースの読み込みを行っているのか
ある時Twitterのタイムラインを見ていたら、「JavaScriptをWasm化して動かす意味がわからない」というような意見を見かけました。JavaScriptはブラウザに搭載されているV8のようなJavaScriptエンジンによって高速に動作するので、わざわざWasm化してもパフォーマンスは劣化するのになぜなのか?という話なんですが、これは「Wasm化=パフォーマンスのため」という考えだと意義がわからないのでこの記事ではそれについて解説します。 JavaScriptをWasm化して動かすツールやライブラリとしては、Shopifyが開発しているJavyやquickjs-emscriptenなどがあります。JavaScriptをWasm化して動かすためには、ある特定のJavaScriptエンジンをWasm向けにビルドして動かす必要がありますが、そのような用途ではQuickJSというJava
GraphQLのAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
Node.js+TypeScriptでバックエンドを書いてると、DIパターンを使いたい場面が結構ある。 いわゆるDIと言うとコンストラクタインジェクションなどクラスありきの方法が思い浮かぶけれども、実際には関数でもDIパターンを書くことができる。単純に関数のパラメータに依存を受け取ればよい。 // 依存を表現する型 interface Deps { appService: AppServiceInterface; } // DIパターンを記述する関数 function DoSomething({appService}: Deps, params: any) { ... } 依存を注入する場合には、引数を部分適用するbind()メソッドを使う。 // 依存を注入 const doSomething = DoSomething.bind(null, { appService: new MyAp
PageSpeed Insightsは、Googleが提供するパフォーマンス測定ツールです。ウェブページのURLを入力すると、そのページのパフォーマンスをその場で測定して、100点満点中何点のスコアを計算してくれます。内部ではLighthouseというツールを動かして、パフォーマンスを測定してスコアを計算しています。 URLを入力するだけで簡単に利用できるため、ウェブページのパフォーマンスの測定にこれを使っているという開発者の方も多いと思います。とはいえ、このPageSpeed Insightsは常に信頼できるスコアを出してくれるわけではありません。この記事ではその辺りの事情について解説します。 モバイル向けスコアが低く出やすい PageSpeed Insightsでの測定結果では、デスクトップ向けとモバイル向けの2種類のスコアを計算してくれます。モバイル向けのスコアの場合、ネットワーク速
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![DeNA ネットワーク運用監視ツールの紹介 [DeNA インフラ SRE] | BLOG - DeNA Engineering](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b9acf5c47daa7b9d974947691fc12da8b40f44f/height=288;version=1;width=512/https%3A%2F%2Fengineering.dena.com%2Fblog%2F2024%2F10%2Fdena-network-monitoring%2Fcover.png)
![[石川温の「スマホ業界 Watch」] 「NTT法見直し」はどうなったのか、KDDI・ソフトバンク・楽天トップが感じた手応え](https://cdn-ak-scissors.b.st-hatena.com/image/square/6538d3c393a2174c0bb6cfdd75bd0a226ff9a513/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1635%2F897%2Fmain.png)
Netlifyが日本からだと遅い - id:anatooのブログ
WasmでJavaScriptを動かす意義 - id:anatooのブログ
GraphQLのAPIを開発する時、スキーマ駆動開発をやめた話 - id:anatooのブログ
TypeScriptの関数でDIパターン - id:anatooのブログ
PageSpeed Insightsのスコアに振り回されない - id:anatooのブログ
dd-career.com
footballhajimel.hatenablog.com
yuyakekoyakeakatombo.hatenablog.com
eiko87harp.hatenablog.com
news.nifty.com
macfan.book.mynavi.jp