Optimizing Web Performance with Images

In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

3:00 - TTFB

• Slow DNS lookup
• Server on the other side of the world
• Slow server processing
• Network speed back to the browser

6:21 - Requests

• Too many requests
• Too large
• Waterfalling your requests

9:44 - Assets are too large

• Images are the biggest bloat in a site
• Compress and optimize via build tool or ImageOptim
• Make smaller
• Picture fill for mobile

14:48 - Lazy loading

• lazy=“true”
• Intersection observer
• Preload slider images two ahead

18:03 - Not using a CDN

• What is a CDN?
• Cloudflare is free, others are very cheap - we used Cloudfront
• Netlify is free and comes with a CDN

• WordPress
• Webpack
• Gulp
• gatsby-image
• Cloudinary
• Cloudflare
• Cloudfront
• Netlify

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets