255

June 8th, 2020 × #performance#images#video#service workers

Hasty Treat - Slow Connections Part 2

Wes Bos and Scott Tolinski continue their series on web performance, focusing on tips for making websites work well on slow Internet connections.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

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!

Share