Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
終わらないSEO対策と向き合うために ~ Core Web Vitals ・Webパフォーマン...
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
sugamaan
March 03, 2022
Programming
1.1k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
終わらないSEO対策と向き合うために ~ Core Web Vitals ・Webパフォーマンス改善 ~
Excite × iXIT TechCon2022でLT登壇をした内容です。
sugamaan
March 03, 2022
More Decks by sugamaan
See All by sugamaan
7ヶ月で6名の中途エンジニア採用に対して現場のエンジニアが行ったこと
sugamaan
3
570
【第2期】Go Academy LT資料
sugamaan
2
490
Other Decks in Programming
See All in Programming
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
contour_gara
0
550
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
520
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
160
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
170
さぁV100、メモリをお食べ・・・
nilpe
0
140
AIだと陥りがちなJakarta EE最新技術への移行時の落とし穴と解決策
tnagao7
0
110
Webフレームワークの ベンチマークについて
yusukebe
0
170
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
ternbusty
1
180
Oxlintのカスタムルールの現況
syumai
6
1.1k
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5.1k
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
200
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
j_lee
0
120
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
How STYLIGHT went responsive
nonsquared
100
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.9k
Odyssey Design
rkendrick25
PRO
2
700
The browser strikes back
jonoalderson
0
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
440
Optimizing for Happiness
mojombo
378
71k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.2k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.6k
Transcript
終わらないSEO対策と 向き合うために Core Web Vitals ・Webパフォーマンス改善 エキサイト株式会社 L&C事業部 L&Cシステム開発部 菅間
伶史 Excite × iXIT TechCon2022
@sugamaan 菅間 伶史 L&C事業部 システム開発部 REIJI SUGAMA 担当サービス 概要・業務・趣味 2021年3月入社 SEO・パフォーマンス改善
Yahoo認証・決済API移行 サウナ/ゴルフ/麻雀
昔はBiz側でSEOに関わっていました ディレクター(前職) → エンジニア(現職) 事業責任者としてメディア立ち上げを行う 担当(企画・開発・運用・営業) 領域特化のポータルサイト 約12万PV/月 自分とSEOの関わり
そもそも なぜSEO対策をするのか? 本題の前に
売上収益 UU数 (ユニークユーザー数) CVR (コンバージョンレート) コンバージョン あたり単価 × × =
SEO 広告 ・ ・ ・ = 理由は売上に影響するから。 インターネットメディア事業のKPI ここに影響する!
SEO対策といってもたくさんある 今回は、内部対策のサイト品質に関するお話です。 引用:Web幹事(https://web-kanji.com/posts/what-is-seo)
サイトの品質とは?
Core Web Vitals Googleが定義した優れたユーザー体験を提供するための指標 SEOの検索順位に影響を与える 引用:https://developers-jp.googleblog.com/2020/05/web-vitals.html 読み込み時間 操作性 読み込み時の安定性
改善事例をご紹介します 弊社ではどのように対策をしたのか?
youtube動画のfacade対応(LCP対策) 初回読み込み時に動画の代わりに画像を表示する。 クリック時に再生することにより約224倍の高速化*を実現!! before 動画 after 画像 ※ paulirish/lite-youtube-embed(https://github.com/paulirish/lite-youtube-embed)
画像の最適化(遅延読み込み・CLS対策) img要素のコーディングを有識者に相談しながら標準化 loading属性・decoding属性・高さ・幅指定 ※ 資料用によしなにコーディング規約を歪めています。 社内資料としてドキュメント化
お悩み相談室 92%削減! 恋ラボ 95%の削減! Google Search Consoleのカバレッジ(警告)の改善 robots.txt・インデックスの最適化を実行。 大幅な警告削減を達成。
などなど... 不要なjsの調査・削除 jsの非同期化 Google Tag Managerの調査 画像の圧縮 画像の非同期化対応 画像のCLS対策 動画のファサード処理
サイトマップ最適化 Google Optimizeアンチフリッカー対策 外部JavaScriptの時差読み込み TD修正 カバレッジ対応 canonical対策 404ページの対応 nofollowの設置 noindex・indexタグ対応 トップページの最適化 その他、行ってきた施策例
範囲が広く、地道な修正が たくさんあって大変! どの仕事も大変なのは同じですけどね...
改善の結果は?
3 月 4 月 5 月 6 月 7 月
8 月 75 50 25 0 PageSpeed Insightのスコア推移(3月→8月) 66点(100点中)まで数字が改善 ※ お悩み相談室のSPのスコアの推移 38点(3月) 66点(8月) + 28点
8 月 9 月 10 月 11 月 12 月
2 月 75 50 25 0 PageSpeed Insightのスコア推移(8月→2月) 改善前と同じくらいスコアが悪化... ※ お悩み相談室のSPのスコアの推移 66点(8月) 33点(2月) − 33点
数値低下の原因 運用の過程でプロダクトが進化 外部ツールを使った新しい施策 チャットボットの導入 BIツールの導入 など 一時的ではなく、継続的に向き合う必要がある。 変化への対策 何に注力すべきか?を都度見極め る。
仕組みで解決をする 悪化を検知する。 属人化しない。 別業務の比重が大きくなった SEOに対する工数が減った
前提としてSEO対策は終わらない SEO対策の肝は、改善し続ける体制・文化の構築に鍵があるのでは? ナレッジの共有 ナレッジの標準化 スコア推移の可視化 処理速度の可視化 デプロイフローへの追加 できること パフォーマンスに強い組織になるために 自分ができることは?
下期中にスコアの定期計測の仕組みをつくります。
ご清聴ありがとうございました。