CoreWebVitals

こんにちは、プロダクト開発本部でエンジニアをしている秋山です。 kickflow ではほぼ毎日何らかのリリースを行っており、機能アップデートもハイペースです。今年はこの記事の執筆時点で 58 件のアップデートを行っています。 プロダクトは日毎に改善が進んでいるなか、「初回アクセス時に画面がなかなか表示されずに困っている」という報告が挙がりました。以前はそこまで遅くなかったのに、ここ最近表示の遅さが顕著になったという意見もありました。

✅ ユーザビリティとアクセシビリティの基本 🔹 ユーザビリティとは何か？使いやすさがUXを左右する ユーザビリティとは、サイトやサービスの「使いやすさ」や「操作のしやすさ」を指す概念です。Webサイトにおいては、目的の情報にたどり着きやすいか／必要な操作がスムーズか／混乱せずに使えるかなどが評価ポイントになります。 たとえば、「ボタンがどこにあるかわからない」「検索窓が見つけづらい」「戻る操作で迷子になる」といった状況は、ユーザビリティが低い状態です。UXの中核をなすのがこの“使いやすさ”であり、SEOに直結する滞在時間や直帰率、CVR（コンバージョン率）にも影響します。 🔹 アクセシビリティ…

前編では、「ページスピードとは何か」「SEOや収益に与える影響」「遅いことで生じるリスク」などを解説しました。後編ではいよいよ、具体的にどうやって改善すればよいのか？という実践編に入っていきます。 とはいえ、「表示速度を改善しろと言われても、どこから手をつければ…？」という方も多いはず。そのため本記事では、**無料で使えるGoogle公式ツール「PageSpeed Insights」**の基本的な使い方からスタートします。さらに、改善提案の見方や、初心者でも実践できる具体的な対処法まで、わかりやすくステップ形式で解説していきます。 「改善＝難しそう」と感じていた方も、読み終わる頃には“今すぐで…

ハローWeb高速化シリーズはご無沙汰となりました。今回は"何を以って高速化したといえばいいのか？"という話をします。 率直に、Page Speed Insightsに対してこんな思いがありました。 80点以上合格点とされているが、無理では？ 速くなっているはずなのにスコアに現れなくてつらい Core Web Vitalsの登場で「とにかくはやく"表示する"」よりも「はやくストレスなく"触れられる"」ことの重要性が増してきた Page Speed Insights、もしかしたらあまり見なくてもいいのでは？説を抱き、AutoReserveでのパフォーマンス改善を通してこの説は正しいかもしれないと実…

こんにちは。クルーズ株式会社CTOの鈴木です。 以前の投稿で「フロントエンドのエラー監視Sentyを導入した話」でSentry導入の話をしましたが、コアウェブバイタルの監視についてもSentryで最近行うようになったため事例共有をしたいと思います。

Core Web Vitalsの値、気にしてますか？ レスポンシブでCLS対策をする時の対応を書きます。 CLSとは？ Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。 developers-jp.googleblog.com 画像の読み込みや、コンテンツの遅延読み込みなどでサイトの要素がズレる量のことです。 基本的には画像サイズを指定してあげることでズレはなくなります。 Tip: Set width & height on …

休日の便利でお得な遊び予約サイト「アソビュー！」のSEOを担当している西本です。 本職はインハウスSEO担当ですが、元ITエンジニアの経験を活かし簡単な施策は自分で実装することもあります。分析→施策検討→実装→効果検証、のSEO施策の一連の流れを一人で進めることが出来るようになったので、そろそろ「フルスタックSEO担当者」と言える気がしてきました。 前回はSEOのモニタリング用ダッシュボードについて書きましたが、今回はCore Web Vitalsのモニタリングについてです。※前回の記事は下記参照 tech.asoview.co.jp 前提・背景 2021年5月にCore Web Vitals…