Mike & Qplum2 Talks About Software

Agenda

• Part 1: The Software Biz: Lessons I’ve Learned

• Part 2: Front-End Performance Primer

About Me

• 15 years a programmer

• Freelance, Agency work, Startup work

• Lots of coding, some product, some business

CompaniesEnterprise

Startup

CompaniesAgency

http://ATTCK.com

Part 1: The Software Biz

Lessons I’ve Learned

Use what works (for your company).Discard the rest.

Use what works.Discard the rest.

Use what works.Same deal for business.

Treat Everything as an Experiment.Do -> Measure -> Learn.

Treat Everything as an Experiment.Do -> Measure -> Learn.

• Product metrics (traffic, engagement, acquisition)

• Business (revenue, conversions, churn, etc)

• Development (release frequency, error rate)

• Marketing….etc.

Treat Everything as an Experiment.…but avoid information overload.

• Pick & choose optimization goals

• Prioritize. What’s the current company focus?

Pick Appropriate Measures

Pick Appropriate Measures*

Business

Product

Tech

Business

Tech

*Not all metrics matter to your company! (Right now)

Unicorns.

Unicorns.

Wikipedia Definition: a start-up whose valuation has exceeded $1 billion.

Unicorns.

They’re not real.

Unicorns.

Wikipedia Definition: a mythical animal typically represented as a horse with a single straight horn projecting from its forehead.

“Mythical” == “fictitious!”

Unicorns.

The Moral: only build tech that has a likelihood of helping the business.

(Here and now - not years ahead).

Keeping it Real

• Treat each feature as hypothesis

• Define reason to build - customer requests, user behavior, market data, etc

• Associate each feature with 1-2 metrics. Define “success” for each feature

• Weigh out time/cost for features vs likelihood of success. Prioritize most likely to succeed w/lowest investment.

• Build -> measure -> learn. Drop ineffective features.

In your product roadmap:

End of Part 1.

Part 2: Front-End Performance Primer

Performance Paradigms

• Holistic: Front-End speed + Back-End speed

• Balanced: specific problems + regular improvements

• Cognitive: Perceptual vs actual performance.

Approaches

• Fixing specific problems - obvious slowness, browser hanging, customer complaints

• General speed improvements - do it regularly (weekly or biweekly, prioritized)

Measure First.

If you can’t measure it, you can’t fix it.

(regarding performance issues.)

Types of Measurement

• Qualitative Measures - first. (detects obvious/specific problems)

• Quantitative Measures - ongoing. (detects broader effect - which devices, pages, locales, etc)

• Qualitative Measures:

• Quantitative Measures:

Measuring Tools

Platform Tools (EC2, Heroku, etc)

Browser Tools (Chrome Debugger,

FireBug, etc)

How to Measure

• Sometimes fixes are hypotheses.

• Pick appropriate thing to measure.

• Take numbers before & after a change.

• Determine how big the effect was.

How to Measure

Qualitative Metrics

• Content load time - time for html to show

• Page load time - time for images to finish

• JS runtime

Quantitative Metrics• Avg load time (sitewide)

• Avg load time (per page - fine tune slow pages)

• Front-end vs back-end breakdown

A Note on Load Time

• Perceptual Load Time: done when the user sees the page. DOMContentLoaded event (jQuery.ready)

• Actual Load Time: when everything is fully loaded. Images, async JS, etc.

Profiling Concepts

Apply Best Practices

Use PageSpeed Insights to find problem areas, and apply

site wide improvements.

Profiling ConceptsNetwork tab.

Diagnose file loading times (JS, Images, etc)

Profiling ConceptsTimeline

https://addyosmani.com/blog /performance-optimisation-with-timeline-profiles/

Diagnose runtime performance issues. Slow JS, animation, etc.

Profiling Concepts

console.profile() and console.time() especially

Use the console api!

Profiling Concepts

jankfree.org - more info on profiling, animation, scrolling performance

• http://ATTCK.com/

• Twitter: @attckco

Thanks For Listening.

• http://mikecavaliere.com/blog/

• Twitter: @mcavaliere