ヤフー全社横断「Webパフォーマンス改善」の取り組み (Core Web Vitalsスコアの向上)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x | web.dev
Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x Stay organized with collections Save and categorize content based on your preferences. Yahoo! JAPAN is one of the largest media companies in Japan, providing services such as search, news, e-commerce, and e-mail. Over 50 million users log in to Yahoo! JAPAN services every month. Over the years, there
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
ドメイン駆動設計で保守性をあげたリニューアル事例 〜 ショッピングクーポンの設計紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ Yahoo!ショッピングクーポンチームの小倉です。 前回のフロントエンド技術刷新の話とは打って変わり、今回は2019年に行ったバックエンド技術刷新の話です。 刷新前のシステムはノンフレームワークPHPのモノリスでしたが、現在は主にJava/Spring Bootでマイクロサービス化しています。今回は、その中でもっとも仕様が複雑だったマイクロサービスにおいて、ドメイン駆動設計(Domain Driven Design:DDD)を実践した話をご紹介します。 ショッピングクーポンの自由度を知る みなさんは、ショッピングの商品が割引になるクーポンをご存じでしょうか？ 実は、クーポンには、ヤフーが予算をだして発行する「モールク
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
フィッシング詐欺、脆弱性にどう立ち向かうのか ～サイバーセキュリティ最前線イベントレポ～
こんにちは、大阪でYahoo!スコアを担当している黒澤です。 大阪で10月17日に行われたMix Leap Studyのセキュリティイベント「サイバーセキュリティ最前線」のイベントを紹介します。 今回のテーマは「サイバーセキュリティ」。 ヤフーのセキュリティに対する取り組みや、CTF（情報セキュリティー分野で技術を競う手法の一つ）のウェブ分野の強化法についての話がありました。 ヤフーからは中村と大角が登壇し、ゲストスピーカーとしてパナソニック株式会社より前田 朋久さんに登壇いただきました。 「脆弱性対応を特別なモノにしない為に」 中村 暢宏（ヤフー株式会社） 一人目はヤフーのインシデント対応チーム（YJ-CSIRT）に所属している中村が登壇しました。 CI/CDパイプラインでの脆弱性検査の組み込みや脆弱性スキャナーの運用などヤフーで取り組んでいる脆弱性対応を中心にお話ししました。 脆弱性対
機械学習をサービスに導入するノウハウ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめての○○特集2本目の記事です。 ヤフーのサイエンス部門に所属する山本康生です。主に広告やYahoo!ショッピングに対して機械学習の施策によるサービス改善を担当しています。今日は「機械学習をサービスに導入するノウハウ」というテーマで、機械学習をサービスに組み込みたいという動機から、それを実現するまでの背景をヤフー社内の事例を交えてご紹介します。 ヤフーでの深層学習を含む機械学習の適用範囲は多岐にわたり、中核事業である広告への適用[1][2]に始まり、Yahoo!ニュース[3]、Yahoo!ショッピング、ヤフオク![4]、GYAO!、その他多くのサービスに組み込まれています。 機械学習を適用したい「タスク」を決めましょう 皆さん
エラーページ - ヤフー株式会社
指定されたURLは存在しません。 URLが正しく入力されていないか、このページが削除された可能性があります。
iOS 7勉強会 全セッションの資料と動画を公開します！ #ios7yahoo
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、iOS 7に関する勉強会をヤフーで開催しました。 http://connpass.com/event/3497/ 世界の注目するiOS 7がテーマということもあり、250席があっという間に満席。 Ustream配信でも多くの方に見ていただき、大盛況の勉強会となりました。 参加者の方からのリクエストをいただきましたので、全セッションの発表スライド、ソースコードをまとめて公開致します！ ▼発表を見逃した方はUstアーカイブをぜひご覧下さい！ Ustream前半：//www.ustream.tv/recorded/39618130 Ustream後半：//www.ustream.tv/recorded/39619493 Toget
offchizというアプリを2週間で作ってみました。
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフー西日本開発部開発チームの近藤です。 LatLongLabでは先日、お出かけや旅行に気軽に持っていける地図帖を作成するサービス「offchiz」（おふちず）を公開しました。 昨年公開したyubichiz（ゆびちず）に続き、今回の新サービス「offchiz」もウェブアプリとなっており、具体的なサービスの企画からおよそ2週間で初回リリースまでこぎ着けました。 このエントリーではoffchizを公開するにあたっての 素早い開発サイクルを回すためのチーム体制 今回採用したHTML5と、その周辺技術 といった点を紹介させていただきます。 素早い開発サイクルを回すためのチーム体制 サービスの企画 最初に、LatLongLabメンバーが集ま
forest » Getty Imagesに登録する方法
Getty Imagesのコントリビュータになる方法を書いておきます。たぶんあまり周知されていないと思うので。 まずはじめに、Flickrをすでにやっている人向け。 1）お気に入りトップ10のイメージを10枚選んでセットを作成 2）セットのURLをコピー（セットの右上share This のGrab the linkに出ているURL） 3）http://www.gettyimagessites.com/flickr_submission/jp にアクセスし、必要事項を入力。URLをペーストして送信 まだFlickrをやっていない人向け。 1）www.yahoo.com（米国のYahooです）に行き、Sign inをクリック、USのYahoo IDを持っていない人はSign UPをクリック 2）開いたページで必要事項を入力してUS Yahooアカウントを作成。メアドとパスワードをメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第11代Webフロントエンド黒帯が語る──私たちはこうして鍛えられ、エキスパートになった - linotice
ヤフー社内でやってるMySQLチューニングセミナー大公開
Meta Keywords Tag and Bing or Yahoo and SEO - SEO Tips
ラボ - Yahoo!デベロッパーネットワーク
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
SEO研究所サクラサクラボ
