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
98
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
19
マイナビニュースがチーム開発をするためにやってきたこと / What Mynavi News did to do team development
mynavi_sys
0
2.2k
マイナビ学生の窓口 半内製化の取り組みを振り返る / A retrospective investigation of our effort of semi-insourcing
mynavi_sys
0
1.5k
ライフメディアにおけるプライベートDMPの取り組み / mynavi-dmp-lifemedia
mynavi_sys
0
380
マイナビのシステム部門のご紹介 / Introduction of Mynavi Engineering Teams
mynavi_sys
0
410
CI環境としてのAWS CodeBuild / AWS CodeBuild as a CI software
mynavi_sys
0
1.4k
マイナビミドルシニアのプロダクトたち / Mynavi Middle Senior products
mynavi_sys
0
190
マイナビクラウドとその中の人たち / Mynavi Cloud and Insider
mynavi_sys
0
810
若手エンジニアと行くマイナビ賃貸のクラウド化への道 / Mynavi Chintai Cloudization with Young Engineer
mynavi_sys
0
320
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
30k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
統計的学習理論読み Chapter 1
kmatsui
3
860
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
180
私のRSpecの書き方 / How I write RSpec
tmtms
4
830
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
大規模データとの戦い方
knih
1
470
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
BBQ
matthewcrist
78
8.7k
In The Pink: A Labor of Love
frogandcode
137
21k
Being A Developer After 40
akosma
56
580k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Documentation Writing (for coders)
carmenintech
59
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
YesSQL, Process and Tooling at Scale
rocio
160
13k
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