昨今、企業のWebサイト運用において、快適なUX(ユーザーエクスペリエンス)を提供することは欠かせない要素となってきています。特に、GoogleがUXに直結した、ページの快適な表示速度や操作性、画面の安定性などを定量的に測る「Core Web Vitals」という定義を発表し、2021年6月から検索アルゴリズムの一部に適用したことで、多くの企業がこの「Core Web Vitals」を通じたUX改善に本格的に取り組み始めています。 本稿では、電通デジタルにて「Core Web Vitals」改善ソリューションを開発・推進し、多くの企業のUX改善を支援している現場担当者が「Core Web Vitals」の概要、現場で見てきたよくある課題とその改善手法などを紹介します。今回は、「Core Web Vitals」の3つの指標について具体的に説明します。 Core Web Vitals(コアウェ

こんにちは。GMOアドマーケティングのR.Mです。 はじめに 弊社が運営するコーポレートサイト・自社サービスサイトは、ユーザビリティ・SEO評価向上のためGoogleが提供するPageSpeed Insightsで定期的にサイトの評価をチェックしています。 分析レポートの「改善できる項目」のうち「次世代フォーマットでの画像の配信」の項目について、デザイナーとして改善に取り組める部分かと思いましたので、その実施プロセスを紹介します。 「次世代フォーマットでの画像の配信」をすることで何を実現するか WebPやAVIFなどの画像形式は、一般的にPNGやJPEGより圧縮率が高く、ダウンロード時間やデータ消費量を抑えられます。この画像形式での配信により、パフォーマンスの改善を実現します。 WEBページ表示速度のユーザビリティへの影響 2017年の少し古いデータにはなりますが、Googleの調査では、

1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し

はじめに こんにちは、AmebaマンガでWebフロントエンジニアをしています、小林と岸です。 本記事ではAmebaマンガフロントエンドチームが取り組んだWebパフォーマンス改善の取り組みと成果を紹介します。 Amebaマンガのフロントエンドチーム紹介 Amebaマンガはマンガをスマホ完結で購入・閲覧できる、電子コミック配信サービスです。23時間待てば無料で読める無料連載、編集部による特集などのコンテンツで、新たなマンガとの出会いを支援しています。 Amebaマンガのフロントエンドチームは5名の体制です。うち半数がプロダクトの運用に関わる新機能の開発や改修をメインに、もう半数が今回お話しするパフォーマンスを中心としたWEBの品質改善をメインに日々開発をおこなっております。 なお、建てつけ上「パフォーマンス」と「プロダクト」の開発に二分となっておりますが、これは専任ではありません。 プロダクト

AutoWebPerf とは？ AutoWebPerf (AWP) は Web ページのパフォーマンスデータを Chrome UX Report（CrUX）・PageSpeed Insights（PSI）・WebPageTest から集め、JSON やスプレッドシート等に集約してくれる便利なツールです web.dev でアーキテクチャが紹介されています [1] Gatherers →　AWP Engine → Connectors という流れに見えますが、実際はテスト対象のページのリストも Connectors を経由して AWP Engine にインプットできるため下の図のほうが分かりやすいかもしれません パフォーマンステスト対象のページリストをスプレッドシートから取得 → リスト内のページの CrUX パフォーマンスデータを取得 → 結果をスプレッドシートに書き出す、なんてことができた

Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが

@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ

パフォーマンス改善について連載しています！ QiitaでWebパフォーマンスの改善に取り組みはじめました! そこで、どんな観点で分析をして、どう改善しているのかをシリーズとして投稿しています。 ただ、パフォーマンス改善と言っても、関連する領域が広く、とても1記事にまとめられないので、複数記事に分けて連載していくことにしました。 今回は、パフォーマンスの計測についての説明をしていきます。 よろしければ他の記事も読んでみてください! シリーズ内容（予定） 【Core Web Vitals】Webパフォーマンスを改善するなら、まずは重要な指標について理解しよう パフォーマンスの計測について 【←今回はこれ】 【番外編】開発者ツールのLighthouseを使いこなせてますか？ - Qiita LCPの改善でLighthouseだけ見てない？効果的に改善していくためのステップ FIDを改善する CL

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog WebサイトにとってSEOは重要です。SEOのスコアが低いと検索順位が下がり、閲覧数が減ってしまいます。それに伴って売り上げが減ったり、登録者数が減ったりすることもあります。 また、UXも非常に重要です。ユーザーがページを訪問したとき、表示が遅い、見づらい、ボタンが押しづらいなどの課題があると、次第にサイトが利用されなくなってしまいます。 今回紹介するCore Web Vitalsは、SEOやUXに影響するものです。Webサイトの運用者にとっては非常に重要なもので、簡単な改善方法が多くあります。今回は、ヤフーが運営する就職・転職サポートサイト「Yahoo!しごとカタログ」で実践し特に効果が高かった改善方法をご紹介します。 Core

CoreWebVitalsにINP(Interaction to Next Paint)が追加され、Webパフォーマンスに関するする技術は年々進化を遂げています。 このセッションでは、INPへの対策の他、BFCache、Private Prefetch Proxy、Priority Hintsなど、現在WebAPIとしてで検討されているパフォーマンスに関する内容をご紹介します。 また、これらを活かすことができるFEアーキテクチャとはどのような設計になるでしょうか？現在ヤフーで取り組んでいる内容も含め、今後のWebパフォーマンス改善の展望をお話できればと思います。

こんにちは!!！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaS（以下、BOXIL）の開発にフロントエンド、バックエンド問わず携わっています。 恐らく新年一発目になる弊社テックブログの記事は私の記事ということで、今年もよろしくお願いいたします。 はじめに なぜパフォーマンス改善を行ったのか Core Web Vitals(以下: CWV), Lighthouseとは？ CWVとは Lighthouseとは CWV & Lighthouseの改善結果 サービスページ(改善前) サービスページ(改善後) レビューページ(改善前) レビューページ(改善後) 改善をするにあたってチームで行ったこと コミュニケーション的なお話 タスクの洗い出し、調査方法 優先順位付け DatadogやSea

トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの

ページスピードインサイト（Page Speed Insights）は活用していますか？ 2018年Googleはモバイル検索においてページの表示速度をランキングの要素として取り入れる、通称「スピードアップデート」を実装しました。 さらに、2021年5月以降スピードアップデートをさらに進めて、単に表示速度だけでなくページ読み込み中のユーザー体験を示す指標であるコアウェブバイタルをランキング要因に取り入れることを発表しています。 参考：Googleランキング要因になるCore Web Vitalsとは？概要から改善方法まで徹底解説！ https://www.sakurasaku-marketing.co.jp/labo/blogs/core-web-vitals このようなことから、弊社クライアント様をはじめ、周囲では表示速度やコアウェブバイタルに関する関心は非常に高まっていると感じています。

Home / ルマーブログ / Best Practice / Googleデータポータルを使用したCore Web Vitals競合分析ダッシュボードの作成方法 Googleデータポータルを使用したCore Web Vitals競合分析ダッシュボードの作成方法 2021年5月のページエクスペリエンスアップデートが近づいているため、Core Web Vitalsは現在テクニカルSEO界隈で注目の単語になっています。 では、どのような準備を行っていますか？ オンライン上には山のようにLCPやCLS、FIDの問題の検出や修正提案に関するリソースがありますが、これらのCWV指標をSEO戦略全体という観点から見てどのように優先順位付けすれば良いのでしょうか。 これらのCWV指標は注力すべき最も重要な要素なのか、それとも開発やプロダクトにかけられる限られたリソースをより有効に使う方法はあるのでしょう

※この記事は、Speee Advent Calendar7日目の記事です。 昨日の記事はこちら tech.speee.jp こんにちは、Speeeのヌリカエでエンジニアをしています。21新卒の染谷です。 ヌリカエのTopページのページスコアを改善しました。この記事はどのようなことを考え、何をしてページスコアを改善していったのかという奮闘記になります。 まだまだ改善すべきページはあるのでそのうち第2段があるかも!? ヌリカエの構成技術 バックエンド: Ruby 2.6.5 + Ruby on Rails 6.0.4.1 フロントエンド: slim + jQuery + Stimulus ページスコアとは この記事で言うページスコアとは、PageSpeed InsightsやLighthouseを実行した時に表示されるスコアのことです。Webサイトの読み込み速度をサーバ応答時間やコンテンツのレ

検索結果の第1位は、PageSpeed Insightsの点数が12点（10サイト中9位）、実機での体感速度も最も遅い7秒でした。 点数が81点と最もよく、体感速度も2秒と非常に速いサイトは第7位。 この結果から、少なくとも現時点では、ページ表示速度は検索順位に大きな影響を与えるということではなさそうです。 50点未満は改善した方が良い PageSpeed Insightsの点数は、ランキングに強い影響を与えていませんでしたが、2021年5月からはGoogleのSEO評価項目の一つにCore Web Vitals（ページの表示速度を表す指標）が追加されるようになります。 点数とSEOとの関係についてGoogleは明言していませんが、PageSpeed Insightsの点数が低い場合に、マイナス評価になるといわれているので、50点未満の場合は何らかの対策をした方が良いでしょう。 また、表示

Web Vitals Stay organized with collections Save and categorize content based on your preferences. Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google

ヤフーで全社を横断して行ってきたWebパフォーマンス改善の取り組みを紹介します。以下の表の数値は、ヤフーのWebサービスと競合のWebサービスのパフォーマンス速度を比較したとき、ヤフーのWebサービスのほうが高速であるサービスの割合を示しています。プロジェクトの実施前は62％でしたが、実施後は83％まで改善することに成功しています。 ■ヤフーのサービスと、その競合に当たるサービスをベンチマークとして比較したとき、ヤフーのほうが速い割合 実施前 実施後 下図のサーチコンソール画面を見てください。Yahoo!映画におけるWebパフォーマンスが良好であることを示す「緑色」が大幅に増えています。Yahoo!知恵袋に至っては、改善が必要な「黄色」の割合をほぼ0まで減少させることができています。 このような結果を出すことができたプロジェクトで実践してきた内容を、3つに分けて紹介します。 実施した背景

アプリケーションソリューショングループの古川です。リクルートの各サイトで実際に運用されているサービスの Core Web Vitals を改善する活動をしていました。 今回はリクルート社内であったいくつかのサービスで Core Web Vitals の改善活動を行ったので、それの結果についていくつか報告します。基本的に改善活動をやってきて見えたこと、それぞれの改善ポイントを紹介できると幸いです。 リクルート内には有名なアプリケーションもこれから作られるような新規のサービスもあわせて、数百個のサービスが存在し、それの一つ一つを問い合わせをベースにパフォーマンス改善をしつつ、個々のサービスのどの場所で指摘がされたのかについて解説します。 ホットペッパービューティーコスメ ホットペッパービューティー TOWNWORK 個人がやったのはアセスメントと方針を打ち出したところで、基本的には、各部署のメ

PWA Night CONFERENCE 2021での資料です。 https://conf2021.pwanight.jp/speaker/hara/ スライド内の参考リンク集はgistで公開しています。 https://gist.github.com/herablog/35336742a91c0926a7767d0d9b9654fc