Notes from my 'Make Your Site Fast' Talk

Posted on
Contents

I had the pleasure of giving a talk at The Osaka Web Developers & Designers Meetup on Saturday.

Rather than post my slides here, I decided to turn it into a blog post all of the tools, resources and links mentioned.

⚑ Performance Matters

Good performance directly benefits your business

  • Yahoo increased traffic by 9% for every 400ms of improvement
  • Amazon increased revenue by 1% for every 100ms of improvement
  • Mozilla had 60 million more Firefox downloads per year, by making their pages 2.2 seconds faster
  • Google take page-speed into account when ranking

Just as good performance is a benefit, poor performance is a liability.

  • A one second delay in mobile load times can impact mobile conversions by up to 20%
  • The BBC found they lost an additional 10% of users for every additional second their site took to load.
  • DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.

So we’ve established that it’s important that your site needs to be fast. Next, let’s go through the different assets that make up a site and see where we can improve.

πŸ–ΌοΈ Images

Images typically take up 80% of a typical sites page-weight so it’s often the first thing to tackle.

Make sure images are displaying at the correct dimensions

If you’re displaying an image at 400 pixels wide then make sure the bitmap image is that same size, using an image which is larger is wasting bandwidth and processing power resizing the image to fit

Optimize Images

Use the Correct image format

  • Use SVG for logos and icons if possible. Make sure you minify SVG too.
  • Avoid PNG24 unless you need alpha transparency, JPEG will typically be 1/4th of the size

Use Srcset to display hi-res versions to hi-res displays

Further Reading

πŸ–οΈ CSS

  • Minify CSS
  • Avoid @imports

πŸ“œ JavaScript

  • Minify JS
  • Remove unneeded scripts
  • Is each script needed for rendering the page? If not, move it to the footer
  • Consider using a CDN
  • Combine scripts if your site is not on HTTP/2
  • Use async on scripts not needed to render the page

πŸ““ Fonts

  • Consider using the ‘Native Font Stack’ >
  • If you’re serving your own fonts - make sure the WOFF2 file format is available
  • Use Preconnect if loading Google Fonts <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>

πŸ“Ή Video

  • Use lower resolution video for background video effects (no need for HD)

πŸ—‚οΈ Caching

  • Set a long cache life for static assets (365 days recommended)

πŸ”§ Speed Test Tools

Further Reading

You might also like

Self hosting Google Fonts for improved performance

A Hassle-Free Way to Self-Host Google Fonts

Optimizing Static Site Performance on CloudFront

Tweaks for improving caching and adding gZip compression