一休.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: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
Nuxt.jsにて表示する画像を圧縮してパフォーマンスを向上する方法 - Qiita
概要 今回はポートフォリオ作成した際にフロントのパフォーマンス改善した方法の一つを紹介します。 結論から言うと、@aceforth/nuxt-optimized-imagesというライブラリを追加し、表示する画像を圧縮することで パフォーマンス改善を行います。 環境 / バーション
node_modulesの問題点とその歴史 npm, yarnとpnpm
皆さんnpmパッケージのバージョンを上げるときにハマって依存地獄から抜けられなかったことはありませんか？ 私はあります。 複雑怪奇な依存関係を調べてみようとnode_modulesを覗いてみて、そのカオスっぷりに臭いものに蓋をしたことはありませんか？ 私はあります。 そこでnode_modules以下について調べてみたのですが、node_modulesにどんな問題点があって、npmやyarn, pnpmは何を目指していたのか時系列順に紐解いた方がわかりやすいことに気づきました。 ここでは初期のnpmが抱えていた問題から今に至るまでを順を追って説明します。 するとnode_modulesの仕組みの他に、各パッケージマネージャの方針の違いが見えてくるはずです。 初期の頃のnpm (~2015年以前) この頃はシンプルで、依存関係はそのままnode_modulesのディレクトリ構造に反映されてい
Core Web Vitals report - Search Console Help
The Core Web Vitals report shows how your pages perform, based on real world usage data (sometimes called field data). OPEN REPORT Understand the report The Core Web Vitals report shows URL performance grouped by status (Poor, Need improvement, Good), metric type (CLS, INP, and LCP), and URL group (groups of similar web pages). The report is based on four metrics as measured by actual user data: L
概要 | Lighthouse | Chrome for Developers
Lighthouse は、ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。 Lighthouse は、Chrome DevTools でコマンドラインから実行することも、Node モジュールとして実行することもできます。Lighthouse に監査用の URL を設定すると、ページに対して一連の監査が実行され、ページのパフォーマンスに関するレポートが生成されます。そこから、不合格になった監査をページの改善方法の指標として使用します。各監査には、監査が重要な理由と修正方法が記載されたリファレンス ドキュメントがあります。 Lighthouse CI を使用して、サイトでの回帰を防止することもできます。
Railsのパフォーマンス調査でrack-mini-profilerを使ってみました。
こんにちは。H.Tと申します。 今年の1月よりGMOソリューションパートナーからGMOアドマーケティングに転籍となりました。 アドマではAkaNe管理画面の開発を担当することになりRails漬けの毎日を過ごしております。 今回は画面のパフォーマンス調査をする機会がありrack-mini-profilerを使ってみたので簡単にご紹介できればと思います。 rack-mini-profilerは手軽にRuby on Railsのパフォーマンス計測ができるgemとなります。 使い方の詳細については下記の通りです。 インストール ローカルなどの開発環境で使う前提の場合は下記のインストールですぐに使えます。
Performance features reference | DevTools | Chrome for Developers
This page is a comprehensive reference of Chrome DevTools features related to analyzing performance. See Get Started With Analyzing Runtime Performance for a guided tutorial on how to analyze a page's performance using Chrome DevTools. Record performance You can record runtime or load performance. Record runtime performance Record runtime performance when you want to analyze the performance of a p
Chrome DevToolsでパフォーマンス計測 | 第1回 タイムラインを記録する
カーソルをオーバービュー上に置くと、置いた時点のスクリーンショットがポップアップで表示されます。カーソルを動かして、レンダリングの推移を確認できます。 オーバービュー上でドラッグするとその範囲がハイライトされ、オーバービューの下にあるペーンの情報がその範囲で起こった情報に更新されます。 タイムラインの使い方は、まずオーバービューで気になるところをハイライトし、その下のペーンで詳細をチェックするという流れで進むことが多いでしょう。 さて、サムネイルでも黒い背景が一瞬見えているのがわかります。カーソルを動かして、黒背景から背景画像が現れるところを探し、その箇所をハイライトしましょう。下のネットワークペーンが更新され、ハイライトされた期間に読み込みが行われていたリソースだけが表示されます。 この状態で、オーバービューの下にある、ネットワークペーンに移ります。 ネットワークペーンで読み込まれたリソ
Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい
明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ（Brightn
Chrome DevTools の Rendering タブを使ってみよう
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.15 です。 Chrome DevTools に組み込まれている、ページの描画に関する機能を提供する Rendering タブについてまとめます。 前回： Rendering タブを表示する Chrome DevTools の Rendering タブは メニュー（三点ドット）→ More tools → Rendering から表示できます。 Elements や Console といったメインのパネルが並んでいる上部のナビゲーションではなく、下部のナビゲーションで Rendering パネルが表示されます。 Rendering タブの機能 Rendering タブで使用できる各種機能を紹介します。 Paint flashing ページ上で再描画が発生したエリアを緑色でハイライトします。 DOM
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
How speeding up your mobile site can improve your bottom line
Marketing is at an inflection point. Here’s why that’s an opportunity
読み込み速度改善が売上に与える影響と競合とのスピードを比較するツールをGoogleが公開
[レベル: 中級] ページの読み込み速度に関係するデータを計測するツールを Google は新たに2つ公開しました。 1つは Speed Scorecard（スピード スコアカード）、もう1つは Impact Calculator（インパクト カリキュレータ）です。 どちらも同じページで利用できます。 Speed Scorecard Speed Scorecard は他のサイトとのスピードを比較できるツールです（1つのサイトの計測ももちろん可能）。 日本を含む12か国でのスピードと、3G/4G を選択して計測できます。 Amazon と楽天市場、メルカリのスピードを比べてみました。 右上にあるオプションで国と 3G/4G を選択できます。 スピードはリアルタイムの計測ではありません。 Chrome User Experience Report のデータに基づいています。 実際の Chrom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Nuxt】nuxt-optimized-imagesで画像圧縮を自動化する
How to Run Local Performance Tests with Google Lighthouse (2024 Update)
vue3-lazyload
Learn | Next.js