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

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

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

Hasty Treat - Slow Connections Part 2

Syntax - Tasty Web Development Treats