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
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