タグ

ブックマーク / hack.nikkei.com (6)

  • ChromeとFastlyのEarly Hintsの効果計測に貢献する — HACK The Nikkei

    この記事は Nikkei Advent Calendar 2020 20日目の記事です。 日経電子版Webチームの阿部です。今回はHTTP/2の目玉機能の1つであったServer Pushの事実上の終焉と、現在ChromeチームやFastly社が実験中の103 Early Hintsについて、日経電子版Webでの取り組みを紹介させていただきます。 HTTP/2 Server Push HTTP/2 Server PushはHTTP/2で策定された、一言で言ってしまうと「必要なリソースがリクエストされる前にサーバーからクライアントに送ってしまおう」という技術です。 これによりクライアントがリクエストするリソースを先回りしてサーバーが送ることで、必要なリソースが揃うまでにかかる時間を短縮できるため、パフォーマンスの向上が期待されていました。 Server Pushの問題点 一方、サーバーからク

    ChromeとFastlyのEarly Hintsの効果計測に貢献する — HACK The Nikkei
    efcl
    efcl 2020/12/27
    103 Early Hintsでpreloadレスポンスを返す話。 CDNレイヤーでレスポンスをどう決めるかについて。Fastlyの持つDictionariesでリソースに対するpreloadレスポンスを決める
  • 日経電子版ウェブで起きた謎のCDNエラーと Header Overflow — HACK The Nikkei

    日経電子版ウェブで起きた謎のCDNエラーと Header Overflow この記事は Nikkei Advent Calendar 2020 13日目の記事です。 日経電子版ウェブチームのエンジニアの宮です。普段はサーバ・エッジサイドを主に担当しており、今回はその内のエッジ、CDNについてお話します。 (ところで先月下旬にFastly社のYamagoya Traverse 2020において Fastlyを用いたFeature Togglesの実装についてお話させていただいたのでよければこちらもご覧ください。) 背景と問題 ある日を境目に起きた問題 半年〜1年ほど前、社内の方方から 「ステージング環境にアクセスできない」という問い合わせがありました。 調査に乗り出したものの、自分の環境では特に問題を見受けられず、再現に苦しんでいた記憶があります。 手元の環境で再現しなかったことから、社内

    日経電子版ウェブで起きた謎のCDNエラーと Header Overflow — HACK The Nikkei
    efcl
    efcl 2020/12/27
    Fastlyではリクエストヘッダの数が96コより多いとRequest header count: > 96の設定で弾かれる制約がデフォルトになっている
  • CSS Containment によるパフォーマンス改善 — HACK The Nikkei

    この記事はNikkei Advent Calendar 2020 19日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment はDOMのレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 webサイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layout p

    CSS Containment によるパフォーマンス改善 — HACK The Nikkei
    efcl
    efcl 2020/12/27
    CSS Containmentの`contain: content`によるPaint Timeの改善について。
  • リアルタイムデータ処理基盤 「Atlas」 のソースコードを公開します — HACK The Nikkei

    ワクワクしています。 内製したリアルタイムデータ処理基盤Atlasのソースコードを段階的に公開します。 まず最初に、日経電子版を継続的にご利用頂き支援くださっている読者の皆様と、Atlasの開発に参加した方々、Atlasを活用して日々業務を遂行している全ての利用者に、お礼を申し上げたいと思います。有り難うございます。 課題意識から生まれた Atlas 2年半前、日経ではデータについて大きな課題をいくつも抱えていました。 膨大な記事が流通する電子版で、その運営に必要不可欠なデータをいかに迅速に編集業務の現場で活用するか? サービス開発やマーケティング施策において、全ての読者・全ての記事について正確な情報に基づく意思決定を下すためのデータはどうすれば得られるのか? 読者が必要とするであろう情報を提案できる賢いレコメンデーションやプロアクティブなコミュニケーションを実現するには、どれくらいの速度

    リアルタイムデータ処理基盤 「Atlas」 のソースコードを公開します — HACK The Nikkei
    efcl
    efcl 2018/10/31
    データ処理基盤。AtlasのコードはNode.jsで書かれている。
  • RUMとA/Bテストを使ったパフォーマンスのモニタリング — HACK The Nikkei

    ブラウザのパフォーマンス指標 Web アプリケーションにおける表示速度がサービスの品質・ビジネスに与える影響は大きい。サイトの遅さはブログサービスではユーザの離脱、広告売上の低下、EC サイトではコンバージョン率の低下などに影響を与えるといった点が知られ、Google は 2018 年 7 月からモバイル検索においてもサイトの表示速度を検索インデックスのシグナルとして加味する旨を公開している。 サイトパフォーマンスの改善は CDN やキャッシュサーバなどを用いたサーバサイドでの改善はもちろんだが、フロントエンドのレンダリングやユーザインタラクションの応答速度などの指標も重要である。また、これらは通信環境にも大きく影響する。ここでは主にクライアントサイドのパフォーマンス指標のモニタリングについて取り上げたい。 ブラウザの画面表示までの流れは以下のとおりである。 Time To First B

    RUMとA/Bテストを使ったパフォーマンスのモニタリング — HACK The Nikkei
    efcl
    efcl 2018/04/24
    FastlyのRealtime Log Streamingを使ったRUM収集。 Fetchなら`keepalive`フラグも使えそう https://qiita.com/hirano_y_aa/items/ee73bdd74f70f1d36b01
  • 日経電子版を支える広告技術 — HACK The Nikkei

    稿では、現在の日経電子版モバイル Web(以下、日経電子版)における広告掲示の技術について解説する。 広告とサイトパフォーマンスの関係 dev.to に代表されるような「高速」と言われる Web サイトは、CDN や ServiceWorker などを駆使して表示に関して適切なチューニングを行っており、日経電子版もほぼ同じ思想の元チューニングを行っているが、一点大きな違いを挙げるとするならば、広告表示の有無が挙げられる。 現在の日経電子版では 7 タイプの広告を表示しており、うち 4 タイプは外部 DSP からの配信を行っている。 その他にも様々なサイトトラッキングのサードパーティスクリプトを導入しているが、ご存知の通りこれらはメインとして打ち出したいコンテンツとはほぼ関連性はなく、パフォーマンス観点から見れば劣化させる要因でしかない。広告が無ければもっと速く表示できるのに…と思ったこと

    日経電子版を支える広告技術 — HACK The Nikkei
    efcl
    efcl 2018/04/24
    ウェブサイトのパフォーマンスを劣化させる広告(SDK)とその対策について。 無駄なRTTの削減、ファイルサイズの削減。 メインスレッドで同期処理される`document.write()`対策としてShadow DOMやiframeでの実行やIntersection Observerでの
  • 1