フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
小さく始めるパフォーマンス改善
はじめに こんにちは！株式会社 COMPASS でエンジニアをしているやじはむです。私はシステム開発部というエンジニアリングの組織に所属をしており、現在はフロントエンドエンジニアとして先生向けのアプリケーション開発を行っています。 今回は、最近の業務の中で小さく始めていたパフォーマンス改善方法について紹介したいと思います。 この記事はこんな方におすすめ Webパフォーマンスの具体的な改善方法を知りたい人 Core Web Vitalsの改善方法を知りたい人 ちょっと良いコードを少ないエネルギーで書きたい人 筆者は最近Web Speed Hackathon 2024に参加したのですが、そこで学んだ知見も踏まえて記事を書きました。 パフォーマンスについて興味がある人もない人もこの記事を見れば、根拠を持って「ちょっと良いコード」を書けるようになるかも知れません。書いてある内容はどれも小さく始めら
私も年を取ったと感じるのは、今年Reactが10年目を迎えたからです。 混乱していた開発コミュニティにReactが初めて紹介されてから10年、以来いくつもの進化を遂げてきました。Reactチームは、急進的な改革ということに関しては躊躇しませんでした。問題に対して、より良い解決策が見つかれば、それを実行してきました。 数か月前、Reactチームは最新のパラダイム・シフトであるReact Server Componentsを発表しました。史上初めて、Reactコンポーネントがサーバーでのみ実行できるようになったのです。 このことに関連してオンライン上では、きわめて大きな混乱が起きています。それが何なのか、どのように機能するのか、利点は何か、そしてSSR（Server Side Rendering）などとどのように連携するのか、多くの人が多くの疑問を抱いています。 私はReact Server
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
モダンWEBサイトにおける画像最適化について
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
New to the world of web performance? Welcome! Here's everything you need to know to master website monitoring, analytics, and diagnostics. Learn how to deliver a fast, joyous experience to all your users. Business Success Making your pages faster isn't just for the web performance geeks in your organization. Site speed affects every business metric you care about – from bounce rate to conversions
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
PerformanceResourceTiming API で HTTP Cache のヒット率を知る - Repro Tech Blog
はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（edwardkenfox）です。 WebサイトやWebアプリケーションの表示速度を考える上では、キャッシュの活用はとても大事なテーマです。一口にキャッシュといっても、Webの文脈だけで見ても様々なレイヤーや用途のキャッシュが存在します。今回は昔ながらのキャッシュ、いわゆる HTTP Cache に的を絞り、HTTP Cache のヒット率について考えてみたいと思います。 さまざまなキャッシュレイヤー 前述のように、Webにおけるキャッシュには用途やレイヤーの異なる様々な種類のものが存在します。Webサイト／Webアプリケーションを開発する上で気にかけるべきものは、おおよそ次のようなものが該当するでしょう。 HTTP Cache （ブラウザキャッシュ） Cach
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
by Alistair Shepherd published on Dec 14, 2023 Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully the internet still exists, although a bit slower, so they’re able to search online for how to scare tortoises away. T
web-vitals.js、Google アナリティクス、BigQuery を使用してパフォーマンスを測定する | Google Codelabs
web-vitals.js、Google アナリティクス、BigQuery を使用してパフォーマンスを測定する 1. 始める前に 演習内容 この Codelab で行う内容は次のとおりです。 Google アナリティクス 4 プロパティを BigQuery にリンクします。 web-vitals ライブラリをウェブページに追加します。 web-vitals データを準備して Google アナリティクスに送信します。 BigQuery でウェブに関する主な指標のデータをクエリします。 Google データポータルでダッシュボードを作成し、ウェブに関する主な指標のデータを可視化します。 必要なもの GA4 プロパティを持つ Google アナリティクス アカウント。 Google Cloud アカウント。 Chromium ベースのウェブブラウザ（Google Chrome、Microsof
こんにちは。ニコニコQセクションのHajime-san(GitHub)です。 本稿では、HTMLのloading属性の仕様とブラウザの実装を解いていきます。これにより、ブラウザからのコンテンツ配信の最適化を支える判断材料の1つとなれば幸いです。 執筆の動機 筆者が開発に携わっているサービスであるニコニコオーディションが間接的に利用している社内ファミリーサービスについて、ふと自分のスマートフォンで見てみたところページの初期表示に時間がかかるように感じました。 オーディションシステムはiframe要素によって社内ファミリーサービスなどに専用のUIを埋め込むことが可能になっており、iframe要素のloading属性を用いた「遅延読み込み」（以下、遅延読み込みはloading属性によるもの）が効果的なのではないかと考えました。 まずは、実際にloading="lazy"を適用して読み込みが後回し
ChromeやEdgeに押され気味のウェブブラウザ「Firefox」を開発するMozillaが、1年足らずでFirefoxのベンチマークスコアが50％向上したことを明らかにしました。 Quick as a Fox: Firefox keeps getting faster https://blog.mozilla.org/en/products/quick-as-a-fox-firefox-keeps-getting-faster/ Down and to the Right: Firefox Got Faster for Real Users in 2023 - Mozilla Hacks - the Web developer blog https://hacks.mozilla.org/2023/10/down-and-to-the-right-firefox-got-faster-
React 18では、アプリケーションのレンダリング方法が根本的に変わる「concurrent（同時）」な機能が導入されました。これらの最新機能がアプリケーションのパフォーマンスにどのような影響を与えるかを探ってみましょう。 まずは、長いタスクと対応するパフォーマンスの測定について基本を理解しましょう。 メインスレッドと長いタスク ブラウザでJavaScriptを実行する際に、JavaScriptエンジンは「メインスレッド」と呼ばれるシングルスレッドの環境でコードを実行します。JavaScriptコードの実行だけでなく、メインスレッドはクリックやキーストロークなどのユーザーの操作、ネットワークイベントの処理、タイマーの実行、アニメーションの更新、ブラウザの再レイアウトや再描画の管理など、他のタスクも処理します。 メインスレッドはタスクを一つずつ処理します メインスレッドはタスクを一つずつ処
PageSpeed Insightsは、Googleが提供するパフォーマンス測定ツールです。ウェブページのURLを入力すると、そのページのパフォーマンスをその場で測定して、100点満点中何点のスコアを計算してくれます。内部ではLighthouseというツールを動かして、パフォーマンスを測定してスコアを計算しています。 URLを入力するだけで簡単に利用できるため、ウェブページのパフォーマンスの測定にこれを使っているという開発者の方も多いと思います。とはいえ、このPageSpeed Insightsは常に信頼できるスコアを出してくれるわけではありません。この記事ではその辺りの事情について解説します。 モバイル向けスコアが低く出やすい PageSpeed Insightsでの測定結果では、デスクトップ向けとモバイル向けの2種類のスコアを計算してくれます。モバイル向けのスコアの場合、ネットワーク速
Cloudflare Fonts: enhancing website font privacy and speed
Cloudflare Fonts: enhancing website font privacy and speed09/25/2023 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
#フロントエンド #設計 TL;DR 「管理画面」と一言で呼ぶのが悪い 本当は同じでないものを同じ技術で作ろうとするのが悪い ------ だいたい世の中で「管理画面」と言った場合2つの要素がある 主に toC のサービスを想定 ここではユーザー向けではなく、社内の運営メンバー向けのページ 典型的には /admin のような URL にまとめられがちなやつ 1. 開発者向けの画面（コンソール、ダッシュボード…） phpMyAdmin や #Prisma Studio みたいなもの あるいは ↑ をもう少し社内のメンバー向けに使いやすくしたもの #Rails Admin とかはこの用途で出てきがち 画像が見れるように、とかね 漠然と「管理者」が特権的な操作をする（ユーザーデータを見るとか）のに使う 2. カスタマーサポートやマーケター向けの画面（問い合わせ対応、チケット管理、審査…） ユーザ
fetchPriority APIは、リソースの相対的な優先度をブラウザに示すために使用します。fetchpriority属性を<img>、<link>、<script>、<iframe>の各要素に追加するか、Fetch API上でpriority属性を使用することで優先度を設定できます。 ブラウザのロードプロセスは複雑です。ブラウザは、主にリクエストの種類や、ドキュメントのマークアップ内におけるリクエストの位置によってその優先度を判断します。例えば、ドキュメントの<head>内で要求されたCSSファイルの優先度はHighestとなり、defer属性が設定された<script>要素の優先度はLowとなります。ブラウザは、同じ優先度が割り当てられたリソースを、検出した順にダウンロードします。 fetchpriority fetchpriority属性を使用することで、要求されたリソースの優先
JSer.info #655 - Lighthouse v11.0.0がリリースされました。 Release v11.0.0 · GoogleChrome/lighthouse Node.js 16のサポート終了、デフォルトでは使われてなかったresource-summary/service-worker/first-contentful-paint-3gのAuditを削除などの変更が含まれます。 また、INPのAuditがStableへと移行されています。 Astro 2.10がリリースされました。 Astro 2.10: Persistent State in View Transitions | Astro Astro 2.9で実験的にサポートされたView Transitionsに加える形で、指定した要素を永続的にするtransition:persistディレクティブが追加されてい
Tailwind vs. Semantic CSS Tero Piirainen @tipiirai This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS: GIST Semantic version is several times smaller, renders faster, and requires no extra CSS tooling Front page HTML The main difference: Tailwind uses "utility" classes and the semantic version uses
Towards HTTPS by default
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
Core Web Vitals influence how your application's pages rank on Google. Here, we'll dive into what they are, how they’re measured, and how your users and search ranking are impacted by them. Malte Ubl is the CTO of Vercel and former Director of Google Search responsible for shipping the “Page Experience” ranking rollout—which heavily utilizes Core Web Vitals. That said, everything written here is p
Note: This blog post is a companion to a presentation I gave at DevFest NYC on November 11, 2023. The web is getting faster. In fact, according to HTTP Archive, more websites than ever before are passing the Core Web Vitals assessment, which looks at three metrics that represent different aspects of page performance: loading speed, interaction responsiveness, and layout stability. Earlier this wee
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
2023年もあと少しです。スパッと区切りをつけるよりも2024年にバトンを渡すような過ごし方をしたいなと思い、この記事を書き始めました。 2023年はAutoReserveにとって飛躍の年でした。海外レストランの予約開始をはじめとする多くの機能をリリースし、プレスリリースも多く出し、ユーザー数の大台を突破しました。 また飲食店向けに提供しているAutoReserve for Restaurantも今年大きな成長を遂げました。今年だけで30以上もの飲食店さまにご協力いただき導入事例を掲載させていただきました。 しかしその代償もありました。多くの機能をリリースし大きな成長を遂げた筋肉痛として「ページスピードの遅さ」が露見しました。さまざまな機能をスピーディにリリースしながらページスピードを高い水準で維持するのは至難の業です。 夏頃にオーガニック流入を増やすためにSEO周りの改善を始めたところ、
Reproは5月22日、ウェブサイト表示高速化ツール「Repro Booster」の正式版をリリースした。独自のタグ（JavaScriptファイル）を挿入した当日から、ウェブサイト全体の表示速度を高速化できるという。 Googleは2021年に発表した検索エンジンのアップデートで、検索ランキングの決定要素に「ウェブサイトの表示速度」が関わる指標を追加した。また、ECサイトでは表示速度がコンバージョンレートに関連することが知られている。このため、サイト運営者にとってはサイトの表示速度が重要な関心事となっている。 一方、ウェブサイトの高速化手法としては「ソースコード最適化」「サイトリニューアル」「CDN」があるが、いずれも工数や多くの費用がかかったり、実装には技術的な知識が必要だった。 一方のRepro Boosterは、サイトに独自のタグを埋め込むだけで、サイトの表示速度を高速化できる。技術
The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache – CSS Wizardry
I began writing this article in early July 2023 but began to feel a little underwhelmed by it and so left it unfinished. However, after recent and renewed discussions around the relevance and usefulness of build steps, I decided to dust it off and get it finished. Let’s go! When serving and storing files on the web, there are a number of different things we need to take into consideration in order
ソフト ナビゲーションの測定実験 | Web Platform | Chrome for Developers
Core Web Vitals イニシアチブでは、リリース以来、ウェブサイトの作成や読み込みの背後にある技術的詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目標としてきました。Core Web Vitals の 3 つの指標は、ユーザー中心の指標として作成されました。これらは既存の技術的指標（DOMContentLoaded や load など）を進化させたもので、ページのパフォーマンスに対するユーザーの感じ方とは無関係であることが多い時間を測定したものです。そのため、サイトのパフォーマンスが良好であれば、サイトの構築に使用されたテクノロジーがスコア判定に影響することはありません。 現実は理想的よりも常に少し複雑で、人気のあるシングルページ アプリケーション アーキテクチャがウェブに関する主な指標の指標で完全にサポートされていることは一度もありません。このよう
Why React Server Components Are Breaking Builds to Win Tomorrow
Over the past decade, React and its ecosystem has undergone continuous evolution. Each version has introduced new concepts, optimizations, and sometimes paradigm shifts, pushing the boundaries of what we thought was possible in web development. React Server Components (RSC) is the latest and perhaps the most significant change since React hooks. However, this change has met with mixed reactions wi
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 タイトルに対する結論 Chrome DevToolsの項目にある 「Lighthouse」 を活用しましょう。 Lighthouseとは ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。 デジタル庁のサイトを使って確認してみる テキストだとイメージしづらいため、早速サイトを見ながら確認してみましょう。 確認手順 1. 対象サイトを開いた状態で「Chrome DevTools」を開く 画面上に「Chrome DevTools」が表示されます
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
decoding="async" について詳しく調べてみる
React Server Componentsを理解する | POSTD
React Server Componentsを理解したい
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 | POSTD
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
Web Performance Guide | SpeedCurve
Fighting cookie theft using device bound sessions
Getting started with Web Performance 🚀 - HTMHell
仕様と実装から読み解くHTMLのloading属性 - dwango on GitHub
Firefoxのベンチマークスコアは1年弱で50％向上し実際に1年で15％高速化している
React 18によるアプリケーションのパフォーマンス向上について - Vercel
PageSpeed Insightsのスコアに振り回されない - id:anatooのブログ
「管理画面はシンプルなフロントエンドが良い」は本当か？ - fsubal
fetchPriorityと、LCPの最適化 | POSTD
2023-08-10のJS: Lighthouse v11.0.0、Astro 2.10(View Transitions)、SharpのWebAssemblyビルド
Tailwind vs Semantic CSS
A faster web in 2024 - rviscomi.dev
モダンWEBサイトにおける画像最適化について - Qiita
Web高速化1「メンバーを巻き込み、分析基盤を整える」 - Hello Tech
タグ挿入でサイト表示を高速化、どう実現？--「Repro Booster」正式版が公開
Webサイトのパフォーマンスを簡単に確認する方法 - Qiita