Hasty Treat - Slow Connections Part 2

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.

Kyle Prinsloo Freelancing - Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.

Show Notes

03:27 - Images

• Resize client-side when uploading
• Lazy load or progressive JPG
• Width + height so the content doesn’t shift with placeholders
• Compress your images - lossless and lossy
• Use SVG where possible

08:33 - Scripts + CSS assets

• Hasty Treat - 5 Things That Make Your Site Slow
• Hasty Treat - 5 More Things That Make Your Site Slow

08:51 - Video

• Variable-rate video is key

09:13 - Connections that go in-n-out a lot

• Save form state on page refresh
• Show UI when user goes offline
  • window.addEventListener('offline', updateOnlineStatus);
  • window.addEventListener('online', updateOnlineStatus);
• Retrying in _____

10:27 - Service workers!

• Serves up local cache initially

12:05 - Fonts

• Font-display CSS https://css-tricks.com/font-display-masses/
• Sometimes possible: tree shake your fonts - load only the characters you need
• font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

14:04 - CSS tricks

• Text over background image — make sure you also set a color so the text will show while the image is loading

14:37 - Testing slow connections

• Dev tools
• Mimic a speed, or 3G

Links

• ImageOptim
• Slack
• Discord
• Cloudflare
• Workbox by Google
• Chrome Dev Tools
• Firefox Dev Tools

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