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 is 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 ImageCon conference - 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 covers 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 is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
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 this 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 http2
8:00
Use Caching and LocalStorage
Turn on aggressive caching on your server - long expire times
What is gzip? / Enabling gzip
12:00
Using a CDN
Listen to our episode on CDNs and #BigZips
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 srcsrc 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
CSS and JS Code
Critical CSS
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
Tree shaking
Hoyyyy its a tree shaker
42:00
Async ans defer attributes on your script tags
Amazing site that visualizes async and defer
45:00
Icon Fonts
Web Fonts
Native Font Stack:
Good: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
47:00
font-display
49:00
Troubleshooting Performance
Simulate Slow Network Speed
Google Page Speed
Wes' Page Speed Video
SIIIIICKkkkkkkkk PIXXXXX Scott: WiFi Surge Protector
Wes: KitSound Bluetooth Airline Converter
Shameless Plugs Scott is working on a Vue course!
Wes is working on his Advanced React course!
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