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
Webページ・スピード改善 / Webpage speed improvement
Search
Mynavi System
September 25, 2019
Technology
0
120
Webページ・スピード改善 / Webpage speed improvement
Mynavi System
September 25, 2019
Tweet
Share
More Decks by Mynavi System
See All by Mynavi System
マイナビの全社データ基盤の モダナイズ/Developers-Summit-2024-Mynavi
mynavi_sys
0
420
マイナビニュースがチーム開発をするためにやってきたこと / What Mynavi News did to do team development
mynavi_sys
0
2.6k
マイナビ学生の窓口 半内製化の取り組みを振り返る / A retrospective investigation of our effort of semi-insourcing
mynavi_sys
0
1.7k
ライフメディアにおけるプライベートDMPの取り組み / mynavi-dmp-lifemedia
mynavi_sys
0
410
マイナビのシステム部門のご紹介 / Introduction of Mynavi Engineering Teams
mynavi_sys
0
560
CI環境としてのAWS CodeBuild / AWS CodeBuild as a CI software
mynavi_sys
0
1.6k
マイナビミドルシニアのプロダクトたち / Mynavi Middle Senior products
mynavi_sys
0
270
マイナビクラウドとその中の人たち / Mynavi Cloud and Insider
mynavi_sys
0
1.1k
若手エンジニアと行くマイナビ賃貸のクラウド化への道 / Mynavi Chintai Cloudization with Young Engineer
mynavi_sys
0
520
Other Decks in Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
990
AWS CDKの仕組み / how-aws-cdk-works
gotok365
8
300
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.5k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
AWS認定を取る中で感じたこと
siromi
1
210
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
290
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
130
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
140
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
300
LLM時代の検索
shibuiwilliam
2
430
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
140
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Site-Speed That Sticks
csswizardry
10
690
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Cult of Friendly URLs
andyhume
79
6.5k
Gamification - CAS2011
davidbonilla
81
5.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
We Have a Design System, Now What?
morganepeng
53
7.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Webページ・スピード改善 Mynavi Works Corporation 斉藤 将斗 mynavi シス担Meetup#3 2019.09.25
自己紹介 • 斉藤 将斗 • 株式会社マイナビワークス 若年キャリア業務推進部 • Webエンジニア(フロント、バックエンド) •
マイナビジョブ20’sを担当 2
マイナビジョブ20’s とは マイナビジョブ20’sは、 マイナビグループ唯一の20代・第二新卒専門の人材紹介サービスです。 企業様/求職者様の双方最適なマッチングを目指すことが、 マイナビジョブ20’sのミッションです。 3
4 計測方法 分析・対応
https://www.webpagetest.org/ 計測ツール - WebPagetest 5
WebPagetestを使う理由 ❖ 安定した計測指標 ➢ Load Time リソースのロード完了時間(サーバ側の処理からの最初の応答) ➢ Start Render
白くないコンテンツが表示されるまで ➢ Speed Index コンテンツがいかに速くレンダリングされたか 参考:https://ux.concurro.net/website/userbility/webpagetest/ ❖ リクエスト、送信データ量の割合が確認可能 6
ジョブ20’sのLPを改善 PC スマホ https://mynavi-job20s.jp/lp/161109/ https://mynavi-job20s.jp/sp/lp/161109/ 7
ジョブ20’sのLPのスピード分析・対応 • バックエンドの処理が遅い • 画像が重い(最適化されていない) • 広告タグがheader、body直後による遅延 ボトルネック 対応 •
拡張子の変更 index.php → index.html • 画像の圧縮 imageoptimを使用:https://imageoptim.softonic.jp/mac • body閉じの付近に広告タグを集約 ※GTMの推奨はbody直後だがbody内であれば問題ない 8
改善結果
パフォーマンス比較 改善前 改善後 10 ※Load Time,Start Render,Speed Index共に一秒ほどの削減
コンテンツ内訳比較 改善前 改善後 11
今後とまとめ
今後 • 継続的なパフォーマンス監視 ◦ Webpagetestと連携しGASまたはDataStudioと連携 • バックエンドの処理を更に早く ◦ .htaccessの高速化 参考:https://cruw.co.jp/blog/2018/08/page_speed_with_htaccess/
◦ ページで使用していないクラスファイルを読み込まない • サイト全体の画像の最適化 • 広告タグの位置 • 使用していないリソースを削除 • Nuxt.js でリニューアル 13
まとめ・その他情報 14 • 画像の最適化 ◦ 画像の圧縮 ◦ CDNに画像を置き使用 ◦ CSSスプライト
• リソースの整理 ◦ 広告で使用しているjavascriptの位置 ◦ 使用していないリソースの削除 ◦ CSSの最適化 • 継続的なパフォーマンス監視 ◦ Webpagetest ◦ PageSpeed Insights ◦ Light House ◦ パフォーマンスバジェット 参考:https://developers-jp.googleblog.com/2019/03/blog-post_15.html