Optimizing Images and JavaScript for Enhanced Web Performance

In this episode of Syntax, Wes and Scott talk through all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, and more.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

• 00:11 Welcome
• Glove 80 keyboard
• Raycast
• 03:06 Sponsor: Sentry
• 05:15 What makes a website slow?
• Uses.tech
• 06:29 Server Generation Times
• 13:33 Large payloads
• Redis
• Gzip
• Brotli compression
• Cloudflare
• Cloudinary
• 18:13 Assets being too large
• 23:01 Caching assets
• 28:25 CDN
• 30:35 Caching 101
• 37:04 Render blocking requests
• 40:01 CSS
• 42:25 JavaScript
• 44:51 Latency
• 49:17 Flash of dark mode or unsigned out
• 55:00 Data uris
• Content-visibility
• vite-plugin-singlefile
• Pool in your URL
• 58:11 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: 3Blue1Brown
• Wes: Suavecito Firme Clay Pomade

Shameless Plugs

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

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