React Server Components 総まとめ
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネントをサーバーサイドでレンダーしてしまうことで、アプリケーションのパフォーマンスを上げることを目的とします。 図は、デモの画面のうち、サーバーでレンダーされる部分を青で、クライアントでレンダーされる部分を赤で示したものです。 ページ全体をサーバーでレンダーするのではなく、一部のコンポーネントはクライアントにレンダーさせていることがわかります。 また、React Server ComponentsはCo
Performance Monitoring and Google Web Vitals - Sentry
Jeremy Bourque demos Sentry's performance monitoring capabilities and how Google's Core Web Vitals have been incorporated into the platform. 0:00 Welcome and Agenda 01:51 Introduction to Performance Monitoring 03:17 Tracing error & slow performance from frontend to backend (start of demo) 10:38 Tracking Google's Web Vitals in Sentry 18:23 Viewing Performance Trends 20:39 Creating and saving Metr
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ
WPO Stats
Hungry for more? If you're looking for more resources around selling performance, we recommend the following resources: Time is Money by Tammy EvertsTammy's book has study after study after study about why performance matters. She covers not just the business side of things, but also the psychology of performance: how does bad performance make users feel.
Polyfill.io を使って JavaScript の Polyfill を適用する - Qiita
この記事は「弁護士ドットコム Advent Calendar 2020」の3日目の記事です。よろしくお願いいたします。 TL;DR Polyfill.io という非常に便利なサービスを使って、Internet Explorer などのブラウザでも最近の JavaScript を動くようにします。その為に必要なのは、以下のような <script> を一行追加するだけです。 <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2C..." crossorigin="anonymous"></script> 素晴らしいことに、Polyfill.io がブラウザを判別して必要な Polyfill のみを返してくれます。ファイルサイズ（バンドルサイズ）の削減などにも効果があります。 はじめに Ja
2020 Archives
Table of Contents Introduction What are Beacons? Beaconing Stages Sending Data at Startup Gathering Data through the Page Load Incrementally Gathering Telemetry throughout a Page’s Lifetime Gathering Data up to the End of the Page “Whenever” How Many Beacons? A Single Beacon Multiple Beacons Mechanisms Image XMLHttpRequest sendBeacon() Fetch API Fallback Strategies Payload Limits URL […] More and
ArmにあるというJavaScript専用命令とは何か、あるいは浮動小数点数を整数に変換する方法について - Qiita
// gcc-10 -march=armv8.3-a arm-jcvt.c という風にコンパイル #include <stdio.h> #include <math.h> #include <inttypes.h> #include <arm_acle.h> // Prototype: // int32_t __jcvt(double); #if defined(__GNUC__) __attribute__((noinline)) #endif int32_t cast_double_to_i32(double x) { return (int32_t)x; } int main(void) { printf("(int32_t)(-2.8) = %" PRId32 "\n", cast_double_to_i32(-2.8)); printf("(int32_t)1.99 = %" P
「強いメモリモデル」と「弱いメモリモデル」 - yamasaのネタ帳
Apple M1についての面白い記事を見かけて、久しぶりにメモリモデル屋(?)の血が騒いだのでブログを書く。 note.com 強いメモリモデル 現代のCPUアーキテクチャでは、x86(64bit, 32bitどちらも)が「強いメモリモデル」を採用しており、それ以外のメジャーなCPUが「弱いメモリモデル」を採用している。この「強いメモリモデル」「弱いメモリモデル」について、まずおさらいしておこう。 以下のように、2つの変数a, bに対して異なるCPUコアが同時にアクセスしたとする。 int a = 0; int b = 0; CPU1: a = 1; b = 1; CPU2: int r1 = b; int r2 = a; (上記はC言語に似た疑似コードを用いているが、実際は機械語命令になっていると考えてほしい。つまり、CPU1は変数a, bの示すメモリアドレスに対するストア命令を実行して
JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
Better JS scheduling with isInputPending() | Capabilities | Chrome for Developers
Loading fast is hard. Sites that leverage JS to render their content currently have to make a trade-off between load performance and input responsiveness: either perform all the work needed for display all at once (better load performance, worse input responsiveness), or chunk the work into smaller tasks in order to remain responsive to input and paint (worse load performance, better input respons
Introduction 👋 | Forem Docs
We’re currently making rapid changes to the product so our docs may be out of date. If you need help, please email yo@forem.com. Welcome to Forem's developer documentation 🌱On this site you'll find instructions to setup a local instance of Forem, documentation on the architecture of Forem, how to contribute, and many other useful documents. This documentation site is the product of a number of v
dev.toコードリーディング会に参加した - mmag
smarthr.connpass.com 行ってきました。十数人で各々が好きなところから読み始めて、最後に見所や気づきを喋る流れでした。initializersを読んでいく人やモデル中心に見ていく人など様々。近日中に全員のメモが公開されるとのことですので、そのときはリンク追記します。会場を提供してくださったSmartHRさんありがとうございました。 追記 先週金曜の dev\.to コードリーディング会に参加した皆さんのメモはこちらに公開されてますhttps://t.co/uipqG1pYxu— ぷりんたい (@spacepro_be) 2018年8月13日 追記ここまで 以下は自分のメモ。やはりdev.toと言えば爆速なので、CSSをheadタグに埋め込んでいたり、キャッシュってどうやってんだろうなーといったところを中心に読みました。最後の所感にも書きましたが、爆速サイトをつくるためのイ
スモールスタートではじめるSSR - dely Tech Blog
こんにちは。delyでフロントエンドを担当している@all__userです。 今回はkurashiruでSSR（Server Side Rendering）を導入した事例についてご紹介したいと思います。 目次 目次 要約 経緯・背景 SSRの導入 SPAのSEO対策 SSRのコスト Rendertronの採用は見送り kurashiruのSSR構成 ルートメタフィールドを利用したデータ取得の仕組み 消極的SSRから積極的SSRへ まとめ 要約 SPAにしたい。SEOのことを考えるとSSRはしておきたい でも全然リソース足りない Railsを温存しつつスモールスタートでSSRできるようにした という内容です。 経緯・背景 kurashiruはもともとRails単体のアプリケーションでしたが、フロントエンドにVue.jsを採用し、現在では多くのページがSPAへと移行しました。 SPAではSEO
You Need to know SSR - Speaker Deck
ng-japan で発表した Server Side Rendering の資料です。
SPA + サーバーサイドレンダリング、そのダルさに関する私見
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ であり、特に SPA + SSR の文脈においては Universal Architecture による SPA + SSR は、技術的には過渡期の歪なキメラっぽさが拭いきれませんが、昨今の Web フロントエンドにしては珍しくビジネス的な説得力があります。 SSR なのでSNSや検索からの流入による初期表示が速い SPA なので回遊時のページ遷移も速い SSR なので古いブラウザでも CSS
一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog
宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のためにどのような施策を行ったのか紹介します。 なお、Webサイトの高速化手法については、ホテル詳細ページ高速化プロジェクトを実施した際にも記事を書いています。これらの記事で紹介している手法（たとえば、Imgixによる画像最適化等）については、記述を省略しています。あわせてご覧ください。 一休.comスマホサイトのパフォーマンス改善（概要編） - 一休.com Developers Blog 一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Develop
preloadで画像の表示速度を改善する - 一休.com Developers Blog
宿泊事業本部フロントエンドエンジニアの宇都宮です。先日、ホテルリストページの高速化に関する記事を書きましたが、Resource Hintsのpreloadを利用することで、さらに高速化できました。そこで、preloadによる画像読み込みの最適化方法を紹介します。 以前の記事はこちら： 一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog また、今回改善対象としたページには下記URLからアクセスできます（スマホでアクセスするか、PCからの場合はUAを偽装する必要があります）。 https://www.ikyu.com/sd/tokyo/140000/ 改善前 PageSpeed Insights: 改善前 Calibre: 改善前 改善後 PageSpeed Insights: 改善後 Calibre: 改善後 今回の改善のターゲットは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence
Think with Google 日本
