Web の仕様を眺めるシリーズ Soft Navigations Performance Entry | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed/In Development etc なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は form-sizing field-sizing CSS property でした。 SPA 的な画面遷移を性能計測したい 今回は Soft Navigations Performance Entry を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 SPA 的な画面遷移とはつまり History.pushState や History.replaceState を用いた JavaScript 駆動なナビゲーションを指します。このような遷移を指してここ
Custom metrics | Articles | web.dev
Custom metrics Stay organized with collections Save and categorize content based on your preferences. There's a lot of value in having user-centric metrics that you can measure, universally, on any given website. These metrics let you: Understand how real users experience the web as a whole. Compare your site to a competitor's. Track useful and actionable data in your analytics tools without needi
Prerenderingを使った表示速度の改善 〜速く、一貫性のあるWebを目指して〜 | CyberAgent Developers Blog
すでに知られているように、Webページの表示速度は重要です。利用者はいつでもどこでも素早くページが表示されて欲しいと思うでしょう。Core Web Vitalsの指標でも表されているように、表示速度は一時的に速いだけでなく、安定していることが求められます。 本記事では、安定した表示速度を実現する手段の一つとして考えられるPrerenderingをオリジン・トライアルで試してみた結果をご紹介します。 Prerenderingとは Prerendering実装前に注意すること Quicklinkを使ったPrerenderingの実装 Prerenderingのヒット率を計算する Prerenderingの結果 Prerenderingとは Prerenderingは次に表示されると思われるページを事前にレンダリングします。レンダリングが完了している場合には、利用者がそのページに遷移するリンクを
Core Web Vitals（GoogleのUX指標）の全貌と改善方法【後編】
昨今、企業のWebサイト運用において、快適なUX(ユーザーエクスペリエンス)を提供することは欠かせない要素となってきています。特に、GoogleがUXに直結した、ページの快適な表示速度や操作性、画面の安定性などを定量的に測る「Core Web Vitals(コアウェブバイタル)」という定義を発表し、2021年6月から検索アルゴリズムの一部に適用したことで、多くの企業がこの「Core Web Vitals」を通じたUX改善に本格的に取り組みだしています。 本連載の【前編】では、Core Web Vitalsの3つの指標「LCP(Largest Contentful Paint)」「FID（First Input Delay）」「CLS（Cumulative Layout Shift）」を具体的に説明し、それらを計測する主なツールを紹介しました。【中編】では、ブラウザにwebページが表示される
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
SVG icons vs. PNG icons in modern web sites
I'm wondering why so few modern web sites still use only PNGs for icons (but this assumption is just based my observation). So far I know, main reasons for using PNGs over SVGs are IE8 and that SVG uses more CPU power (but I don't believe this is any issue for simple 1K icons). I can see (and we currently use) many advantages in using SVGs, either when it's used as sprites, as images, or as inline
一気に疑問が解ける！Webページを高速化するテクニックを分かりやすく解説した良書 -Webページ高速化超入門
Webページ高速化、と聞くと専門的な知識が必要で難しそうと思う人も少なくないと思います。Webページを軽量化して表示速度を改善させるテクニックを一つずつ分かりやすく解説した入門書を紹介します。 「超入門」とあり、確かに一つ一つの解説は非常に分かりやすいです。しかし、本書を読み終えた後は、専門的な知識を身につけることができます。 本書はタイトルにある通りコーダーとウェブ担当者向けです。というのは、各章ごとに2部構成となっており、入門編では知識として把握しておきたい人用で、実践編では高速化の取り組み方法が解説されています。 巻末には高速化の目安となるGoogleのPageSpeed Insightsで改善すべき項目に対応した方法がリスト化されていて、非常に役立つ一冊です。
Overview of CrUX | Chrome UX Report | Chrome for Developers
The Chrome User Experience Report (also known as the Chrome UX Report, or CrUX for short) is a dataset that reflects how real-world Chrome users experience popular destinations on the web. CrUX is the official dataset of the Web Vitals program. All user-centric Core Web Vitals metrics are represented. CrUX data is collected from real browsers around the world, based on certain browser options whic
How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita
今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム
モバイルウェブの高速化は成果に直結する、スタバはRewards登録が65%⬆ #ChromeDevSummit
[レベル: 中〜上級] この記事では、昨日に続いて Chrome Dev Summit 2018 のセッションをレポートします。 セッションタイトルは “Get Down to Business: Why the Web Matters” 、モバイルウェブ、特にモバイルウェブの高速化が重要な理由をケーススタディとともに解説するセッションです。 モバイルウェブとスピード 回線速度が速い 4G がまだ普及していない国、地域がある。 ※暖色になるほど、4G が普及していない パフォーマンス改善で成果を上げたサイトが世界中に存在する。 wayfair: CV 10 % ⬆ ClickBus: 売上 15 % ⬆ Stylelight: クリックアウト CV 6.5 % ⬆ JD.ID: CV 43 % ⬆ LinkedIn: 求人応募 4 倍 ⬆ Spotify 事例 2107 年の時点では Sp
Nikkei achieves a new level of quality and performance with their multi-page PWA | web.dev
Nikkei achieves a new level of quality and performance with their multi-page PWA Stay organized with collections Save and categorize content based on your preferences. With a publishing history of more than 140 years, Nikkei is one of the most authoritative media businesses in Japan. Along with their print newspaper, they have over 450 million monthly visits to their digital properties. To provide
Webアプリケーションのベンチマークをとるときに気をつけている10のこと - たごもりすメモ
10もないかも、と思いながら項目を書き出してみたら10以上余裕であってキリがないので10で収めた。いやあ、あるなあ。 仕事柄よくベンチマークを実行したりしてて色々と思うところが溜まっていたところ、以下のような記事を見掛けたのでなんか書こうと思った。ところでこの記事はベンチマークを実行するための準備作業がループを回して2時間かかるところの待ち時間に書かれている。 sfujiwara.hatenablog.com ISUCONといえば多少縁があるコンテストで、文中でISUCON5のことについても言及されているので、それも含めて。 自分が業務でいじっているのは "Webアプリケーション" というとちょっと違うんじゃないのというものばかりだが、いやー、最近なんでもHTTPで外部APIを作るからベンチマークのコツとしては大体変わんなかったりするよね。 なおこの記事でベンチマークはどのようなものかとか
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
Webページの高速化/最適化まとめ - Qiita
おはこんばんちは、渋谷でお掃除してる人です。 はじめに 自社サービス、ランディングページ、企業ホームページのようなWebサイト（Webページ）において何が一番大切かと聞かれれば、その答えは表示速度です。 ええ、仰りたいことは大いにわかります。もちろんコンテンツも大事です。 ですが、どれだけコンテンツが良くて魅力的な商品だったとしても、表示されなければ意味がありません。 人間という生き物は、Webページが表示されるまでたったの2秒しか待てません。 ウルトラマンでさえ3分間も待てるこのご時世に、たったの2秒です。 その2秒によって、汗水流して作りあげたみなさんのコンテンツが人目につくこともなく、消えていくのです。 というわけで Webページを高速化する上で大切なことをちょっとだけ紹介します。 この記事を読み終わる頃には、ちょっとだけ高速化に詳しくなって、ちょっとだけPageSpeed Insi
Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
PRPL パターンを使用して即時読み込みを適用する | Articles | web.dev
PRPL パターンを使用して即時読み込みを適用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 PRPL とは、ウェブページを読み込み、 より高速にインタラクティブになります。 遅れて検出されたリソースをプリロードする。 初期ルートをできるだけ早くレンダリングします。 残りのアセットを事前にキャッシュに保存します。 他のルートと重要性の低いアセットを遅延読み込みします。 このガイドでは、これらの手法がどのように連携して機能するかを 個別に使用する必要はありません。 Lighthouse を使用してページを監査する Lighthouse を実行し、PRPL に沿って改善の機会を特定する 手法： Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。 [Lighthouse] タブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EC売上トップ200企業の「表示スピード」を大調査！ 1位は「腕時計のななぷれ」！ | 勝手にスピードテスト Powered by SpeedCurve
TechEmpower Framework Benchmarks
Yusuke Utsunomiya on Twitter: "ご参加頂いた皆様、ありがとうございました。最後駆け足でしたが、Webのパフォーマンスに興味をもっていただけたでしょうか？何点がパフォーマンス改善のポイントをお伝えしましたが、こちらで振り返りたいと思います。 #DevFest18 #PerfMatters"