PRAGUEMATIC WEB PERFORMANCE DENYS MISHUNOV Senior Frontend Engineer, Create::Editor
A presentation at GitLab Virtual Contribute in April 2020 in by Denys Mishunov
PRAGUEMATIC WEB PERFORMANCE DENYS MISHUNOV Senior Frontend Engineer, Create::Editor
IT’S ABOUT FRONT-END
How long is forever? Sometimes, just one second
PRAGUEMATIC WEB PERFORMANCE
WEB PERFORMANCE 2020
“OFTEN POOR RESPONSE TIME ON WEBSITE”
“PERFORMANCE… OTHERWISE A GREAT TOOL”
“IT’S JUST SLOW”
E S N O P S E R R O ” “ O E P T P I E S N R B E F T E O F W R O O M “ N T A O H N E E C M R I E W T T … O I S ” O E L A ” G W R E O A T L S T S U J S ’ T I “ GitLab, UX research by Jeff Crow and Farnoosh Seifoddini
E S N O P S E R R O ” “ O E P T P I E S N R B E F T E O F W R O O M “ N T A O H N E E C M R I E W T T … O I S ” O E L A ” G W R E O A T L S 18.5% Dedicated the time to say how not impressed they are with performance T S U J S ’ T I “ GitLab, UX research by Jeff Crow and Farnoosh Seifoddini
E S N O P S E R R O ” “ O E P T P I E S N R B E F T E O F W R O O M “ N T A O H N E E C M R I E W T T … O I S ” O E L A ” G W R E O A T L S Q2 OKRs https://gitlab.com/groups/gitlab-com/-/epics/464 T S U J S ’ T I “
WEB PERFORMANCE 2020
PRAGMATIC prag • mat • ic adj. Dealing or concerned with facts or actual occurrences; practical
“IT’S OK, BUT SPEED MAY BE IMPROVED”
MONITOR • OPTIMISE
MEASURE • MONITOR • OPTIMISE
PRAGMATIC MEASURE • MONITOR • OPTIMISE
1.MEASURE
WHAT TO MEASURE? • Overall page size • Number of server requests • The size of the bundled JS resources • etc.
WHAT TO MEASURE? PAGE LOADING TIME
WHAT TO MEASURE? PAGE LOADING TIME
WHAT TO MEASURE? PAGE LOADING TIME • DOMContentLoaded Event • Onload Event • First Paint • First Contentful Paint • First Meaningful Paint • Largest Contentful Paint • SpeedIndex
52 Performance (Fast 3G connection, caching disabled) First Contentful Paint 2.9 s Speed Index 3.2 s Time to Interactive 10.1 s First Meaningful Paint 7.7 s First CPU Idle 10.0 s Max Potential First Input Delay 1.160 ms
Generic First Contentful Paint 2.9 s Speed Index 3.2 s Time to Interactive 10.1 s First Meaningful Paint 7.7 s First CPU Idle 10.0 s Max Potential First Input Delay 1.160 ms Could be fragile for monitoring There are too many
First Contentful Paint 2.9 s Speed Index 3.2 s Time to Interactive 10.1 s First Meaningful Paint 7.7 s First CPU Idle 10.0 s Max Potential First Input Delay 1.160 ms HOW SOON DOES USER SEE THE SNIPPET?
WHAT TO MEASURE? PAGE LOADING TIME • DOMContentLoaded Event • Onload Event • First Paint • First Contentful Paint • First Meaningful Paint • Largest Contentful Paint • SpeedIndex
WHAT TO MEASURE? PAGE LOADING TIME USER TIMING API
PERFORMANCE API https://developer.mozilla.org/en-US/docs/Web/API/Performance
PERFORMANCE API https://developer.mozilla.org/en-US/docs/Web/API/Performance Performance Timeline API
PERFORMANCE API https://developer.mozilla.org/en-US/docs/Web/API/Performance Performance Timeline API Navigation Timing
PERFORMANCE API https://developer.mozilla.org/en-US/docs/Web/API/Performance Performance Timeline API Navigation Timing
PERFORMANCE API https://developer.mozilla.org/en-US/docs/Web/API/Performance Performance Timeline API Navigation Timing
WHAT TO MEASURE? PAGE LOADING TIME USER TIMING API
SHOW ME HOW PRACTICAL EXAMPLE
performance.measure(MEASURE_NAME, START_MARK, END_MARK);
window.requestAnimationFrame(() => { performance.measure(MEASURE_NAME, START_MARK, END_MARK); })
IS VUE THE PROBLEM?
75% waiting to bootstrap the Vue application*
USER TIMING API
pe rf or ma nc e. m ar k( S TA RT _M AR K) ; USER TIMING API
pe pe rf rf or or ma ma nc nc e. m e. m ar ar k( E k( S ND TA _M RT AR _M K) ; K) ; AR USER TIMING API
AR _M ND k( E ar e. m nc ma or rf pe pe rf or ma nc e. m ar k( S TA RT _M AR K) ; K) ; USER TIMING API performance.measure(MEASURE_NAME, START_MARK, END_MARK);
pe rf or ma nc e. m ar k( S TA RT _M AR K) ; USER TIMING API performance.measure(MEASURE_NAME, START_MARK);
USER TIMING API performance.measure(MEASURE_NAME);
USER TIMING API CROSS-COMPONENT Marks can be placed and measured anywhere on the page NOT VUE-SPECIFIC Can be added to any JS
DEVTOOLS ARE NOT SCALABLE Common sense
MEASURE • MONITOR • OPTIMISE Page Loading Time User Timing API
MONITOR
MONITOR ANALYTICS PERFORMANCE
MONITOR ANALYTICS TOOLS Google Analytics Snowplow etc.
MONITOR PERFORMANCE TOOLS Webpagetest Pingdom sitespeed.io SpeedCurve etc.
MONITOR ANALYTICS PERFORMANCE SNOWPLOW SITESPEED.IO
MONITOR SNOWPLOW https://docs.gitlab.com/ee/telemetry/index.html • Clicking links or buttons. • Submitting forms. • Other typically interface-driven actions
MONITOR SNOWPLOW https://docs.gitlab.com/ee/telemetry/index.html • Event tracking: https://docs.gitlab.com/ee/telemetry/index.html • Snowplow tracking guide: https://docs.gitlab.com/ee/telemetry/snowplow.html#frontendtracking • Enable Snowplow tracking in Admin Area > Settings > Integrations • Add tracking to your code
MONITOR PERFORMANCE TOOLS
MONITOR SNOWPLOW (ex-Periscope)
MONITOR SNOWPLOW PROS: CONS: • Monitors exactly what you send to it • Monitors exactly what you send to it • Metrics won’t work with DNT setting • Requires analytics-specific code
MONITOR ANALYTICS PERFORMANCE SNOWPLOW SITESPEED.IO
MONITOR SITESPEED https://gitlab.com/gitlab-org/frontend/sitespeed-measurement-setup
MONITOR SITESPEED Grafana
MONITOR SITESPEED PROS: CONS: • Dedicated performance tool • No additional code required • Setting up Docker to run against localhost or local host (defined in /etc/hosts) is a nightmare
MONITOR ANALYTICS PERFORMANCE RETROSPECTIVE
MONITOR PROACTIVE Practical part
context ‘Frontend Performance’ do let(:file_name) { ‘popen.rb’ } let(:content) { project.repository.blob_at(‘master’, ‘files/ruby/popen.rb’).data } before do stub_feature_flags(snippets_vue: true) visit snippet_path(snippet) # wait_for_requests sleep 5 end it ‘starts rendering snippet within 0.5 seconds +-20% percent’ do expect(page.evaluate_script(‘window.performance.getEntriesByName(“vue-start”)[0].startTime/ 1000’)).to be_within(0.125).of(0.5) end it ‘renders full snippet within 2 seconds +-20% percent’ do expect(page.evaluate_script(‘window.performance.getEntriesByName(“content-full”)[0].duration/ 1000’)).to be_within(0.5).of(2.0) end end
MEASURE • MONITOR • OPTIMISE Page Loading Time Sitespeed User Timing API Snowplow
IS IT NEEDED?
IS IT NEEDED? WATCH CLOSELY & GET READY
OPTION #1 OPTION #2 1.6 SECONDS 2.0 SECONDS
OPTION #1 OPTION #2 1.6 SECONDS 2.0 SECONDS
OPTION #1 OPTION #2 400 milliseconds 1.6 SECONDS 2.0 SECONDS
WEBER-FECHNER LAW JUST NOTICEABLE DIFFERENCE (JND) EVENT
WEBER-FECHNER LAW JUST NOTICEABLE DIFFERENCE (JND) EVENT 20%
JUST NOTICEABLE DIFFERENCE
T O NOTICEABLE N JUST Y L I R L A U S F S G E DIFFERENCE N C E NI N EA M
IS IT NEEDED?
#thanks TIME SPENT EDUCATING ME DURING THE COFFEE-CHATS VALUABLE COMMENTS AND HELP #GitLabContribute RAMYA AUTHAPPAN · ALEX BUIJS · JEFF CROW JEROME NG · JEREMY JACKSON · GEORGI N. GEORGIEV PEDRO POMBEIRO · VIJAY HAWOLDAR · ASH MCKENZIE
