一休.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: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
<Lazy> rendering in Vue to improve performance
Last year, a lot has been in happening on the web in terms of performance. Unsurprisingly, everyone agrees the web should be fast. Google introduced its Web Vitals metrics to stress that the web applications should load fast even on slower devices and slow networks. Svelte showed that web apps can be significantly smaller in their bundle size. React introduced the Fiber algorithm that allows pausi
Vue.js Performance Tips / #v_kansai 11
v-kansai Vue.js/Nuxt Meetup #11 (京都Devかふぇ共催)でVue.jsのパフォーマンスに関する発表を行いました。 https://vuekansai.connpass.com/event/144194/ # 参考にした記事 - 超速! Webページ速度改善ガイド(WEB+DB PRESS plus) - https://www.amazon.co.jp/dp/477419400X - Web Fundamentals | Google Developers - https://developers.google.com/web/fundamentals - Vue.js App Performance Optimization – A Tutorial Series - https://madewithvuejs.com/blog/vue-js-app-pe
How to Reduce Your Vue.JS Bundle Size With Webpack
I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Du
Vueで作ったSPAの表示速度改善でやったこと - Qiita
Vue.jsを全く触ったことないところから始めて、SPAのWebサービスを2ヶ月でリリースできたのだけど、同僚から「ちょっと表示が遅いですね」と言われた。それまではとにかく機能を動かすのとソースコードの見通しを悪くしないようにというのだけ気にしてて、パフォーマンスをあまり気にしていなかった。 で、少し気になって試しにGoogleのPageSpeed Insightsで計測してみたところ、なんとモバイルで26点だった。PCの方でも52点。 これはマズイと思い、いろいろ試行錯誤してモバイル72点、PCは98点まで改善したので、以下したことをまとめておく。 Google Fontsの読み込みの最適化 まずはこれ。Google Fontsはカッコイイけど、公式にあるCSSでの読み込みをするとめちゃくちゃ表示を遅くしてしまう。 AMP にも対応！Google Fonts を preload で先読み
一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Developers Blog
宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ
Almin + React/Vue.jsのパフォーマンスプロファイルをタイムライン表示できるように
AlminはClient-side DDD/CQRSをしやすい構造を作ることを目的にした – いわゆるステート管理ライブラリです。 Almin 0.14.0でperformance.markベースのプロファイルを取れるようになりました。 これにより、AlminのUseCaseやStoreといったそれぞれの処理にどれぐらいかかっているかを開発者ツールのタイムラインで見ることができます。 performance.markはUser Timing Level 2で標準化されている方法なので、後述するようにReactやVueなどのライブラリと組み合わせた状態も見ることができます。 performance.markについては次の記事でも書いています。 performance.markでパフォーマンス計測する | Web Scratch 使い方 Contextを作成する際にperformancePro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Application Security Management | Datadog