6

Hasty Treat - Slow Connections Part 2

 3 years ago
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.
neoserver,ios ssh client

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

Links

Tweet us your tasty treats!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK