Free WPO (Web Performance Optimization) For Renaissance Users (Contest has now ended)

Doing some more research, this comment is on point:

"GTM itself is just a delivery mechanism; it’s one JS file (I think an empty container is some 100KB unzipped, and 30KB to download if your browser supports compression) with a mechanism for asynchronous loading of tags. By itself it will contribute very little to the page load time.

Of course the stuff you deploy via GTM might slow down your site a lot - partly because it will download external libraries, and partly because DOM manipulations might force reflows/repaints in the browser. However this is not due to GTM, this is due to the tags you use, and would happen exactly the same if you integrated Zopim etc. via some other means.

So, will using a lot of (potentially bad [1]) JavaScript make your site slow? In all likelihood, yes. It this the fault of GTM? It is not, other than in the sense that GTM makes integrating the nasty stuff a little easier."

Source: Google Tag Manager and page load performance: does it reduces performance in PageSpeed Insights? - Stack Overflow

So really, it seems like it’s likely the code being rendered “in” GTM hurting your site, so it would be best to evaluate that code and remove any bad actors or unnecessary scripts, but again taking it a step further a time delay or even better on scroll delay of loading of GTM will probably give us the best result.

@matthutchings @Moriah are you able to implement a delay in the scripts loading either on scroll (preferred) or time delayed?

@Aayaam @MattPinneo we should look at this as a framework improvement as well if it works.

2 Likes

Great callout by Anthony on our internal chat:

Seems developing our own facades would be a great way to go (could probably use some of the recommended applications in the short term).

Thanks DD - we’ll get you on the list.

Currently the uploader does not support WebP but we’re exploring how to add that. In the meantime, the team can manually WebP those images for you.

Chances are though, you are going to run into a bigger issue (the same one as above) in that you are using a tonne of third party connections (I see a chat thingy, a flipsnack thingy, youtube embeds etc)

All of those are going to impact you. Not all can easily be WPO’d (might need to make some decisions of value vs speed)

@Moriah @matthutchings Let’s get this dev on the list!

Thanks a ton Moriah and team. Can confirm it does feel faster, so by no means a vanity metric.

Appreciate and respect your consideration for the tracking, they are however important to our business goals, so a necessary penalty for us.

Some great discussion from Morgan and rest of your crew on the workarounds, like the time delay.

We’re going to apply either the time delay or facade for you @TylerMarrin let’s get this thing over the line! @Moriah @matthutchings please make it so.

Tyler if there is any impact to your tracking, please let us know and we can revert. (there should not be though except perhaps eliminating false positives from bots, which actually gives you better metrics)

DanielGale.com needs this!

approved

1 Like

Agreed! Finding you a team. :slight_smile:

1 Like

Regarding 3rd party tags

GTM vs gtag.js

If you are already using Google Tag Manager (GTM) and are also using the gtag.js script you could get rid of gtag.js and use GTM for the loading of your ad tracking or remarketing. This probably happened because gtag.js came before GTM. Gtag.js was used to access many Google only APIs. Then GTM was created to expand that to any sort of site tag.

For Ads setup compare

From facebook pixel code, to FUB widgets, and google ad tracking, etc. GTM is a great way to consolidate all your tags under one banner. It allows simple to very fine grained controls. It also allows you to work entirely in a safe dev environment with a deploy/release method when you’re ready.

SPOF

Like Morgan mentioned the more 3rd party tags you load the more risk you’re taking with your performance regardless of using any script/tag loader like GTM. It’s recommended to audit and analyze all 3rd party tags used, check if there are any upgrades that would improve performance. Optimize what can be optimized. And get rid of items that provide little value or are not used. Every single separate domain that is required to build your page has a potential for being a single point of failure (SPOF).

Here’s the payload list of tags from one of the sites I am working on. I will be moving everything into GTM. This won’t reduce the network cost of the resources but it will load them more intelligently and allow us to decide to trigger them or not based on many types of variables or events.

  1. Google Tag Manager gtm.js [googletagmanager.com/gtag/js]
    tech docs: Install Google Tag Manager for web pages  |  Google Tag Manager for Web  |  Google Developers

  2. Facebook Pixel Code [facebook.com/tr]
    tech docs: Get Started - Meta Pixel - Documentation - Facebook for Developers

  3. Google Ads Conversion Tracking [googleadservices.com/pagead/conversion.js]
    tech docs: Introduction - Google Ads Help

  4. FollowUpBoss Pixel Website Tracking (aka widgetbe) [widgetbe.com/agent]
    tech docs: https://help.followupboss.com/hc/en-us/articles/360037775174

  5. Google global site tag (gtag.js) [googletagmanager.com/gtag/js]
    tech docs: About the Google tag  |  Google tag (gtag.js)  |  Google Developers

  6. Google Sign In Client [accounts.google.com/gsi/client]
    tech docs: Overview  |  Sign In With Google  |  Google Developers

Third Party Facades

There’s also a very simple trick that can be done in the case of items like youtube videos or chat scripts where you initially load an html or graphic CTA instead of loading the 3rd party code. Only when the CTA is clicked is when the 3rd party code will be loaded, on demand, and subsequent wanted action.

More info: Lazy load third-party resources with facades

Some stats on some embedded content that takes time to load

  • Youtube – 11 requests ≈ 580kb
  • Google maps – 52 requests ≈ 580kb
  • Vimeo – 8 requests ≈ 145kb
2 Likes

Hi @TylerMarrin, as Morgan requested I did some research and implemented a delay to your third-party scripts with great success! PageSpeed Insights scores fluctuate slightly each run,
but I’m seeing upwards of 94 for your mobile score now with third party scripts included!

To summarize what I did:

  • Moved the Google Tag Manager code from the footer-body CMS Snippet into the Global Tracking Script field to consolidate all third-party scripts.
  • Consolidated the three Google Tag Manager code blocks into one performant code block to reduce unnecessary JavaScript.
  • Adjusted your Global Tracking Script code to support a delay. It looks slightly different now but it produces the same result as before.

I’m happy to explain to you in detail any of these changes if needed. Also as Morgan said, please let me know if there is any impact to your tracking and we can revert to what you had previously.
Enjoy!

3 Likes

This is freaking EPIC Matt! Thank you!

@Aayaam let’s talk #renaissance global upgrades!

Thanks Matt! It makes sense, not that I would have any idea how to do that myself, but I get what you are explaining. Will keep eye on it but do not envision this causing any impact.

Hi @PuertoRealty, Segun and I are thrilled to start your WPO review! After running a PageSpeed Insights report, we believe the following are the best opportunities to increase your WPO score!

  • Opportunity: Image Optimization

  • Recommendations: Compress images, lazy load offscreen images, properly size images, and serve images in next-gen formats

  • Opportunity: Third-Party Scripts

  • Recommendations: Delay loading, and consider performance impact to determine if scripts are unnecessary and can be removed or only loaded on certain pages

We’ll be going ahead to address these optimizations., once we’ve got an update with an improved score we’ll let you know!

2 Likes

Hi @RRaybould. I would like to report back on the WPO improvements! Jesse and I went through the report and worked on some key areas to optimize your website’s performance, one thing to note is that we have some recommendations that are crucial for the score improvements and those will require your consideration.

Improvements we achieved with the allocated time:

1 - Converted images to webp formats to have a fast-loading effect
2 - Applied lazy-loading defer off-screen images and improve layout shifting
3 - Prevented rendering blocker resources for font loading
4 - Deferred the loading of some scripts that are not needed on the initial page load

Items to be considered: There are some scripts in being load from the Page Footer of your homepage and in your Global Tracking script that are slowing the site down. We would recommend you review these scripts and decide whether you still use them or not. If not we would recommend removing the ones you can as the removal of them will help your score. In addition to those scripts, the recaptcha on the site also have an impact on the performance and our recommendation would be to load this functionality only on pages that have forms.

Here is the report with the improvements (considering our recommendations regarding scripts and re-captcha)

To take the most out of these improvements and to have a drastic increase in performance, we suggest you to review the above scripts and eliminate the ones that aren’t valuable to your business, if any. Further improvements can be continued in your monthly retainer project if you wish.

Thanks, and we hope you enjoy the optimizations!

2 Likes

Hi @thinkhalifax.com, keeping a fast website is important for SEO! @xuanwang and I are excited to report back some significant WPO performance gains made on your site today!

The following changes outlined below have been made to help increase your site performance. Please note that score improvements represent mobile performance results.

3 Primary Areas of Focus

Delay Loading of Third Party Scripts:

Actions: Your third-party scripts are creating a significant slowdown in your website. However, it is not the best action to remove them as some of them are necessary such as google tag managers and google analytics trackers. In this case, the best solution is to delay the loading of third-party scripts. Now the scripts will download whilst the HTML is parsing, and only execute once the page has finished initial loading.

Lazy Loading Assets and Video:

Actions: Your Youtube cover video is an iframe that introduces some scripts from youtube, and video takes a big network load of around 8000kb. If you are looking for a way to optimize your web pages containing youtube videos you will definitely need to lazy load them. The solution that we have taken is to simply remove the unnecessary strain of the videos that aren’t needed in the initial page load would be to load them only when the user performs some actions. We made your video load only after the user scrolls on the page so the initial page load will not be affected by video downloads and scripts. We have also applied this technique to your images. Lazy loading them will only load them when visible to the viewport and can help add some great gains to performance.

Image optimization and Webp format

Actions: WebP is a superior lossless and lossy compression for images on the web that will certainly make your website faster. WebP is 26% smaller than regular PNGS and 34% smaller than JPEGS. Consider uploading Webp images and ensure you are resizing images to the size they are to be rendered. We typically want to avoid images larger than 500KiB (0.5MB) to ensure web performance is at its best. After converting your homepage assets to WebP and compressing the resolutions, we managed to decrease your network load and increase web performance.

We hope you enjoy our findings and the extra performance!

1 Like

I would greatly appreciate having my site looked at: www.mynchomes.com
Thanks in advance.

Hi @AndyM
Hope you are doing well!
Andy Lewis and I are excited to start your WPO review! We have found some top opportunities to improve the score on your site!

Top Opportunities:

  • Reduce Javascript, mainly to lazy-load Youtube Video
  • Image Optimization
  • Use WEBP to serve images in next-gen formats
  • Add meta viewport / description for SEO

We will get started on the WPO work on your site. Please feel free to let us know if you have any questions!

Awesome! Thanks!

Hello @ddflynn, thank you for choosing REW! This is Kane from the Design team and we are glad to help. John and I will be starting your WPO review. We’ve run PageSpeed Insights and found out the top opportunities on your site, please see below:

Opportunities: Third-Party Scripts
Recommendation: Consider performance impact and determine if any aren’t necessary or can be only loaded on certain pages

Opportunities: Image Optimization
Recommendation: Convert image to WebP format, ensure Lazy loading on hidden images, compressing & ensure properly size images

We will start the optimization with these in mind and we will let you know once we’ve got an update on those. Stay tuned!

1 Like