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
410
マイナビニュースがチーム開発をするためにやってきたこと / 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
260
マイナビクラウドとその中の人たち / Mynavi Cloud and Insider
mynavi_sys
0
1k
若手エンジニアと行くマイナビ賃貸のクラウド化への道 / Mynavi Chintai Cloudization with Young Engineer
mynavi_sys
0
510
Other Decks in Technology
See All in Technology
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
430
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
rubygem開発で鍛える設計力
joker1007
2
200
How Community Opened Global Doors
hiroramos4
PRO
1
120
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
540
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for humans not robots
tammielis
253
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Site-Speed That Sticks
csswizardry
10
660
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
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