Notes from my 'Make Your Site Fast' Talk
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
- 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
asyncon 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)