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
460
マイナビニュースがチーム開発をするためにやってきたこと / What Mynavi News did to do team development
mynavi_sys
0
2.7k
マイナビ学生の窓口 半内製化の取り組みを振り返る / 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
580
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
590
Other Decks in Technology
See All in Technology
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.4k
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
340
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
160
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
160
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
120
AIに頼りすぎない新人育成術
cuebic9bic
3
330
Amazon Qで2Dゲームを作成してみた
siromi
0
170
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
210
Mackerel in さくらのクラウド
cubicdaiya
1
310
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
KATA
mclloyd
32
14k
Speed Design
sergeychernyshev
32
1.1k
Done Done
chrislema
185
16k
Designing Experiences People Love
moore
142
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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