Performance Matters!

Front End Best Practices for Speedy Sites

By: Kristy Yeaton

Vets First Choice - Front End Developer

What Should We Know?

1. Why Does Performance Matter?
2. Common Performance Issues
3. Best Practices That Fight Bad Performance
4. Other Resources

Why Does Performance Matter?

Desktop Users:

Mobile Users:

Case Studies

... and many more

It's Not Just About Conversions!

• Page Abandonment
• User Engagement/Experience
• Brand Reputation

Common Performance Issues

Page Weight

Images

The Biggest Page Weight Culprit

Why are images such a problem?

• They are the usually the largest assets we load
• Having bigger and higher res images is an extremely popular design trend
• Even though they are async it's a huge perceived performance issue

Other Page Weight Culprits

JavaScript

• Dynamic sites rely on more and more JavaScript
• Loading many libraries can quickly increase page weight
• Legacy sites can easily load scripts no longer in use

CSS

• CSS frameworks can add bloat
• Nesting of styles with CSS processors (SCSS/LESS) can increase stylesheet size
• Writing styles very specific for each page (not sharing simple components such as buttons) can cause larger stylesheets

Size isn't all that matters!

• Page Rendering Time (JS/CSS processing)
• Asset Download (Server Response Time)
• Connection Speed

Best Practices That Fight Bad Performance

Image Optimization

Images vs SVG

• Less Detailed images (icons, illustrations, etc) - SVG
• Photos - Image (jpg or png for transparent support)
• Not Sure? Test it!

Images

• Compression in PhotoShop
• Image min during your build process (Gulp/Webpack etc)
• Picture

SVGs

• Online Tools such as svgminify.com (best for inline SVGs)
• Minify during your build process

Lazy Loading

Sprites

Can be used with images or SVGs!

HTTP2

Many files? No problem!

HTTP2 is fully multiplexed, instead of ordered and blocking. It can therefore use one connection for parallelism

JavaScript

• Do I really need this library/script?
• Follow the best coding practices of your framework!
• Use async when possible
• Minify, Concat, Gzip

CSS

• Do I really need this library/framework?
• Avoid deeply nested styles
• Share styles where appropriate throughout the site
• Avoid overwriting styles where possible
• Mobile First!
• Minify, Concat, Gzip

Other Resources

• https://wpostats.com
• http://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/
• http://www.webperformancetoday.com/
• https://www.igvita.com/
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
• https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
• https://http2.github.io/faq/
• https://calendar.perfplanet.com/2014/images-are-king-an-image-optimization-checklist-for-everyone-in-your-organization/
• https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
• https://css-tricks.com/http2-real-world-performance-test-analysis/

Thank You!

Questions?