@dyoshikawaです。 先日、以下のリリースでZennのサイト内検索の高速化を行いました。 結論を先に述べるとCDNキャッシュやPostgreSQLの全文検索インデックスを活用して対応しました。この記事では本パフォーマンス改善の取り組みについて紹介します。 Zennの構成 ZennはGoogle Cloud上に構築されており、フロントエンドNext.jsとバックエンドRailsをそれぞれCloud Run上にホスティングしています。上の図では省かれていますが、CDNにはCloudflareを利用しています。 データベースはCloud SQL for PostgreSQLを利用しています。 検索速度とDB負荷に課題 2025年2月頃、某AIクローラーによる検索ページへの集中アクセスによりDBインスタンスのCPU使用率が100%近くに張り付いてしまうという事象が発生しました。 生成AIサ
マルチクラウド展開にまつわる既成概念を覆すより データ転送では、特に長距離の場合にレイテンシ（遅延）が問題になることがありますが、現在はすべてのクラウド・プロバイダーがそれぞれの物理インフラストラクチャを互いの近くに配置（専門用語では「コロケーション」）しているため、これはさほど問題となりません。この近接性（場合によっては同一コロケーション施設内の別の部屋）は、クラウド間のレイテンシがミリ秒単位であることを意味します。それに加え、クラウド・データセンター・リージョンは世界中で増加しており、クラウド・リージョン間の距離は縮まっています。 という事で、レイテンシ(遅延)について、まとめてみてみます。 ■ Agenda レイテンシ(遅延)とスループット(帯域幅) レイテンシと TCP の動作 帯域幅遅延積(Bandwidth-Delay Product) TCP Window Size の調整と
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
はじめに はじめまして、ホットペッパービューティーコスメ（以下HPBC）にてフロントエンドエンジニアとして学生アルバイトをしている柏です。 Webサービスで普遍的にもとめられる指標にパフォーマンスがあります。素早く表示されるWebサービスはユーザー体験が良く、コンバージョンや直帰率などにも関係があると言われています。HPBCでは、チーム一丸となってパフォーマンスの改善に継続的に取り組んでいます。 6週間のアルバイト期間で、HPBCのBFF(Backend for Frontend)の性能改善に取り組ませていただき、結果としてレスポンスタイムを200ミリ秒程度短縮することができました。本記事では、その取り組みをテーマに計測を通してパフォーマンスのボトルネックを発見する方法、そして開発の速度を落とさずそれらを解消することについて、ご紹介します。 目次 HPBCの構成と課題 Cloud Trac
先日、統計ダッシュボード機能(β)をリリースしました。記事をひとつでも公開している場合、Zennにログインすればどなたでも統計情報を表示できます。執筆頻度の確認や閲覧回数の参考にお役立てください。 本稿ではどのように実現したかについて課題とともに記録します。 TL;DR 投稿ページの表示イベントは Google Analytics から BigQuery へ連携しており、イベントデータ（BigQuery）と記事データ（Cloud SQL）をどうJOINさせるかが課題 外部接続でBigQueryからCloud SQLつなぐことにした 統計データ読み出し時、BigQueryを直接使うとクエリ毎に課金されてしまうため、BigQuery BI Engine を使うことにした スケジュールクエリを使い、BI Engineの容量に収まるように集計データを最小限にまとめる チャートは Chart.js
フィードバックを送信 Cloud Run 用に Python アプリケーションを最適化する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このガイドでは、Python プログラミング言語で作成された Cloud Run サービスの最適化と、最適化の一部に関連したトレードオフの理解に役立つ背景情報について説明します。このページの情報は、Python にも適用される全般的な最適化のヒントを補完するものです。 これらの従来の Python ウェブベース アプリケーションのベスト プラクティスと最適化の多くは、以下を中心に展開されています。 同時リクエストの処理（スレッドベースと非ブロッキング I/O の両方）。 バックグラウンド タスクへのトレースや指標の送信など、重要性が低い機能に接続プールとバッチ処理を適用してレスポンス レイテンシを短縮する。 コンテナ
Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance. Overview The Performance insights panel lets you do the following: Record and measure page load performance. View Web Vitals performance metrics. View network activity. Simulate slower CPU and network speeds. Import and export recordings. Why a new panel? The new Performance insights pa
If your code implements I/O-bound scenarios to support network data requests, database access, or file system read/writes, asynchronous programming is the best approach. You can also write asynchronous code for CPU-bound scenarios like expensive calculations. C# has a language-level asynchronous programming model that allows you to easily write asynchronous code without having to juggle callbacks
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
import puppeteer from 'puppeteer'; async function ssr(url) { const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); await page.goto(url, {waitUntil: 'networkidle0'}); const html = await page.content(); // serialized HTML of page DOM. await browser.close(); return html; } Why use Headless Chrome? You may be interested in Headless Chrome if: You've built a we
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
