Solutions to problems you find through Google PageSpeed

fast car

Strategy

You just ran the Google PageSpeed tool on your website, and you see a bunch of red text signifying a slew of problems. So where do you start? Start with the ones that add the most time to your page load. (After all, our goal is to speed up our site. Right?)

Largest Contentful Paint

While this is not a problem we need to handle on it’s own, this problem is caused by the list of other items shown to you. This item describes when a visitor will first see anything substantial on the screen, versus a white page or the background color. Just know that solving other problems in the list will effectively bring down the seconds it takes to display the page.

Eliminate Render Blocking Resources

This problem is caused by CSS and JS files needing to get processed before the browser can continue processing the HTML for your page. (That’s the part that the visitor sees.) CSS styles your page to look right, and JS can do a number of things from providing you with analytics, to creating sliders for your site.

To fix this issue, you can do several things.

  • Add async or defer to your JS tags. Async will allow you to move the work to a different thread, so that the browser can process it while it compiles the page to show to the visitor. Defer, on the other hand, will wait until after the page is finished rendering, and then run. Both have advantages and disadvantages.
  • Move your JS tags to just before </body> so it no longer blocks rendering.
  • Use the “media” attribute to limit which types of devices and views should even load the CSS. (Ex. Print, device width, etc.)

Minimize Main Thread Work

The main thread of an application is the thread that handles everything including displaying your site to the visitor. However, you can use child threads (boss/worker model, for example) to allow your site to have things like JS code get processed in parallel with the page. Some JS code may not like that, and will throw errors if you try to run it asynchronously.

You could do the following:

  • Make JS files load with the “async” attribute.
  • Reduce your JS content. (Ex. If you have a slider you don’t need on your site, try making it use a grid/masonry style item instead.)
  • Reduce the number of images on your page, and convert the ones you keep into webp format. (Webp is much smaller than some other formats, and the quality still looks great.)
cyclops

Conclusion

These are just a handful of the most common “large ticket items” you’ll want to solve. If you reduce the work the browser must do, and lower the download size, then your page will perform much faster. Also, try W3 Total Cache, add a CDN, and front load your site with CloudFlare. All of that will help speed up your site, too.

Want us to do it for you? We’re offering a free audit to discover how best to help you reach your website speed goals.

Rick Mac Gillis has worked as a web developer since 2003. He has worked on projects for multi-billion dollar corporations, as well as mom and pop businesses, achieved 12 pages of 5 star reviews on Upwork, and has built and sold a previous business. He now runs Red Scale Corporation, and is once again experiencing tremendous growth. Now he seeks to pass the same knowledge to you, that he has used to grow.
Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.