Hasty Treat - Slow Connections Part 2
source link: https://syntax.fm/show/255/hasty-treat-slow-connections-part-2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Jun 8th, 2020
Hasty Treat - Slow Connections Part 2
👇 Download Show✏️ Edit Show NotesIn 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
Links
Tweet us your tasty treats!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK