A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 255: Hasty Treat - Slow Connections Part 2

0:00

LOUDNESS

Jun 8th, 2020

Hasty Treat - Slow Connections Part 2

👇 Download Show✏️ Edit Show Notes

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/freelancing. 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

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

Tweet us your tasty treats!