Podcasts Technology Syntax - Tasty Web Development Treats 20 Easy Win Performance Tips

20 Easy Win Performance Tips

Published: March 21, 2018, 2:24 p.m.

In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites.

Cloudinary - Sponsor

Cloudinary\xa0is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!

Also check out Cloudinary's\xa0ImageCon\xa0conference - use the code SYNTAX99 for a discount when checking out.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent\xa0covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent\xa0is this June 11-14 in San Jose, CA. Save 20% today with code:\xa0SYNTAX

Show Notes

So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to\xa0this tweet

0:00

  • We just cracked 1,000,000 downloads! Thank you!

4:00

  • Network Tips
  • Reducing the amount of HTTP requests
  • A little bit about HTTP2
  • An interview about\xa0http2

8:00

  • Use Caching and LocalStorage
  • Turn on aggressive caching on your server - long expire times
  • What is gzip? / Enabling gzip

12:00

13:00

  • When to load your JS
  • Blocking Requests

15:00

  • Use Lazy Loading

17:00

  • Preloading content with Link rel="preload"
  • rel="prefetch"

19:00

  • Picture, picturefill and srcset=""
  • Article on\xa0srcsrc and Picture
  • srcset vs picture/source elements

25:00

  • Image Compression
  • One less jpg
  • Serve less data

26:00

  • Inline SVG
  • Talk about Font Awesome

33:00

37:00

  • Remove unused code
  • Purify CSS
  • no-unused-imports with ESlint

38:00

  • Code Splitting

40:00

  • Transpile less
  • babel-preset-env

41:00

42:00

45:00

  • Icon Fonts
  • Web Fonts
  • Native Font Stack:
  • Good:\xa0font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

47:00

49:00

SIIIIICKkkkkkkkk PIXXXXX Shameless Plugs Tweet us your tasty treats!