Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

20 Easy Win Performance Tips

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites.</p> <h2 id="cloudinary-sponsor">Cloudinary - Sponsor</h2> <p><a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast" target="_blank" rel="noopener">Cloudinary</a> 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!</p> <p>Also check out Cloudinary's <a href= "http://www.imagecon.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=ImageCon_Syntax_podcast" target="_blank" rel="noopener">ImageCon</a> conference - use the code SYNTAX99 for a discount when checking out.</p> <h2 id="fluent-conf-sponsor">Fluent Conf - Sponsor</h2> <p>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.</p> <p><a href="https://conferences.oreilly.com/fluent/fl-ca" target= "_blank" rel="noopener">Fluent</a> 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.</p> <p><a href="https://conferences.oreilly.com/fluent/fl-ca" target= "_blank" rel="noopener">Fluent</a> is this June 11-14 in San Jose, CA. Save 20% today with code: <strong>SYNTAX</strong></p> <h2 id="show-notes">Show Notes</h2> <p>So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to <a href= "https://twitter.com/wesbos/status/976082854848450560" target= "_blank" rel="noopener">this tweet</a></p> <p>0:00</p> <ul> <li>We just cracked 1,000,000 downloads! Thank you!</li> </ul> <p>4:00</p> <ul> <li>Network Tips</li> <li>Reducing the amount of HTTP requests</li> <li>A little bit about HTTP2</li> <li>An interview about <a href= "https://www.youtube.com/watch?v=w--PU4HO9SM" target="_blank" rel= "noopener">http2</a></li> </ul> <p>8:00</p> <ul> <li>Use Caching and LocalStorage</li> <li>Turn on aggressive caching on your server - long expire times</li> <li>What is gzip? / Enabling gzip</li> </ul> <p>12:00</p> <ul> <li>Using a CDN</li> <li>Listen to our episode on <a href= "https://syntax.fm/show/033/large-files-cdns-image-compression-video-hosting-and-big-zips" target="_blank" rel="noopener">CDNs and #BigZips</a></li> </ul> <p>13:00</p> <ul> <li>When to load your JS</li> <li>Blocking Requests</li> </ul> <p>15:00</p> <ul> <li>Use Lazy Loading</li> </ul> <p>17:00</p> <ul> <li>Preloading content with Link rel="preload"</li> <li>rel="prefetch"</li> </ul> <p>19:00</p> <ul> <li>Picture, picturefill and srcset=""</li> <li>Article on <a href= "https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/" target="_blank" rel="noopener">srcsrc and Picture</a></li> <li>srcset vs picture/source elements</li> </ul> <p>25:00</p> <ul> <li>Image Compression</li> <li>One less jpg</li> <li>Serve less data</li> </ul> <p>26:00</p> <ul> <li>Inline SVG</li> <li>Talk about Font Awesome</li> </ul> <p>33:00</p> <ul> <li>CSS and JS Code</li> <li><a href="https://github.com/addyosmani/critical" target= "_blank" rel="noopener">Critical CSS</a></li> </ul> <p>37:00</p> <ul> <li>Remove unused code</li> <li><a href="https://github.com/purifycss/purifycss" target= "_blank" rel="noopener">Purify CSS</a></li> <li>no-unused-imports with ESlint</li> </ul> <p>38:00</p> <ul> <li>Code Splitting</li> </ul> <p>40:00</p> <ul> <li>Transpile less</li> <li>babel-preset-env</li> </ul> <p>41:00</p> <ul> <li>Tree shaking</li> <li><a href="https://www.youtube.com/watch?v=ajACU-lsnFc" target= "_blank" rel="noopener">Hoyyyy its a tree shaker</a></li> </ul> <p>42:00</p> <ul> <li>Async ans defer attributes on your script tags</li> <li><a href= "http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html" target="_blank" rel="noopener">Amazing site that visualizes async and defer</a></li> </ul> <p>45:00</p> <ul> <li>Icon Fonts</li> <li>Web Fonts</li> <li>Native Font Stack:</li> <li>Good: <code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;</code></li> </ul> <p>47:00</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display" target="_blank" rel="noopener">font-display</a></li> </ul> <p>49:00</p> <ul> <li>Troubleshooting Performance</li> <li>Simulate Slow Network Speed</li> <li><a href= "https://developers.google.com/speed/pagespeed/insights/" target= "_blank" rel="noopener">Google Page Speed</a></li> <li><a href="http://wesbos.com/wordpress-page-speed/" target= "_blank" rel="noopener">Wes' Page Speed Video</a></li> </ul> <h2 id="siiiiickkkkkkkkk-pixxxxx">SIIIIICKkkkkkkkk PIXXXXX</h2> <ul> <li>Scott: <a href="http://amzn.to/2FVcD9n" target="_blank" rel="noopener">WiFi Surge Protector</a></li> <li>Wes: <a href="http://amzn.to/2DKvtxV" target="_blank" rel= "noopener">KitSound Bluetooth Airline Converter</a></li> </ul> <h2 id="shameless-plugs">Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro" target="_blank" rel= "noopener">Scott is working on a Vue course!</a></li> <li>Wes is working on his Advanced React course!</li> </ul> <h2 id="tweet-us-your-tasty-treats-">Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/" target="_blank" rel="noopener">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" target= "_blank" rel="noopener">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" target="_blank" rel="noopener">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" target="_blank" rel= "noopener">Wes' Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" target= "_blank" rel="noopener">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" target="_blank" rel= "noopener">Scott's Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM" target="_blank" rel= "noopener">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

20 Easy Win Performance Tips

Poslechněte si podcast