Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - 5 Things That Make Your Site Slow

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 class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 3:00 - TTFB</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Slow DNS lookup</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Server on the other side of the world</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Slow server processing</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> Network speed back to the browser</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 6:21 - Requests</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Too many requests</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Too large</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> Waterfalling your requests</li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 9:44 - Assets are too large</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Images are the biggest bloat in a site</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Compress and optimize via build tool or ImageOptim</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Make smaller</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> Picture fill for mobile</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 14:48 - Lazy loading</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> lazy=“true”</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Intersection observer</li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Preload slider images two ahead</li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41"> 18:03 - Not using a CDN</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> What is a CDN?</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Cloudflare is free, others are very cheap - we used Cloudfront</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Netlify is free and comes with a CDN</li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Links_46" name="Links_46"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://wordpress.org/">WordPress</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://webpack.js.org/">Webpack</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://gulpjs.com/">Gulp</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://www.gatsbyjs.org/packages/gatsby-image/">gatsby-image</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://cloudinary.com/">Cloudinary</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.cloudflare.com/">Cloudflare</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://aws.amazon.com/cloudfront/">Cloudfront</a></li> <li class="has-line-data" data-line-start="54" data-line-end="56"> <a href="https://www.netlify.com/">Netlify</a></li> </ul> <h2 class="code-line" data-line-start="56" data-line-end="57"> <a id="Tweet_us_your_tasty_treats_56" name= "Tweet_us_your_tasty_treats_56"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 3:00 - TTFB
  Slow DNS lookup
 Server on the other side of the world
 Slow server processing
 Network speed back to the browser
  6:21 - Requests
  Too many requests
 Too large
 Waterfalling your requests
  9:44 - Assets are too large
  Images are the biggest bloat in a site
 Compress and optimize via build tool or ImageOptim
 Make smaller
 Picture fill for mobile
  14:48 - Lazy loading
  lazy=“true”
 Intersection observer
 Preload slider images two ahead
  18:03 - Not using a CDN
  What is a CDN?
 Cloudflare is free, others are very cheap - we used Cloudfront
 Netlify is free and comes with a CDN
  Links  WordPress

 Webpack

 Gulp

 gatsby-image

 Cloudinary

 Cloudflare

 Cloudfront

 Netlify

  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

Hasty Treat - 5 Things That Make Your Site Slow

Poslechněte si podcast