[Support request] Time To Interactive improvement

[Patrick]

Hi folks,

Question is about the website https://www.proactivecompliance tool.nl (without the space, added the space so the url is not properly indexed by Google)

I already put a lot of effort into getting a wonderful pagespeed score of 99% desktop and 94% mobile. My primary ‘issue’ is that I can’t get the Time To Interactive below approx 5ms (with GTM tags) and below 3,5 ms (without GTM tags). Please read further for details. I tried to include some of the taken steps to also help others with my experiences.

I reached the already-perfect score by using the following settings:

Autoptimize + WP Super Cache with tips of the support team (thanks a lot) at https://docs.generatepress.com/article/configuring-autoptimize/ and other forum posts

I tried to use local fonts, but this did not improve the pagespeed, it made the PageSpeed numbers worse. I did this by following the local font guide in combination with the new Dynamic fonts functionality. So I sticked with Google Fonts and the Dynamic fonts feature.
https://docs.generatepress.com/article/adding-local-fonts/#:~:text=Starting%20in%20GeneratePress%203.1%2C%20you,on%20the%20Google%20Font%20option.

I added the fonts by adding the following code to my theme file and disabling the “Google Font” checkbox. The font still worked but it loaded slower.

/* Google Font */

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-800 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-900 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-500italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-800italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 800;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-900italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 900;
  src: local(''),
       url('../wp-content/uploads/fonts/raleway-v27-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../wp-content/uploads/fonts/raleway-v27-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I know I could do a bit more with ‘swap’ optimization etc. but I don’t think I will get better results than with the new Dynamic font functionality.

I ended up some further optimization by disabling a few of the font weights (800,800italic,900,900italic) which changes the front-end an almost unnoticeable bit.

I also tried using the ‘NitroPack’ plugin (and disabling WP Super Cache and Autoptimize), which delivered _very_ proper results and a Time to Interactive of 2,2 ms but is unfortunately a quite expensive plugin. This is even better than what I experienced with completely removing the GTM code (see below), which means there should be more to optimize than just GTM. It said there were no potential improvements in Javascript:

URL
Potential improvements:
…v27/1Ptug8zYS….woff2(fonts.gstatic.com)
0 ms
…v27/1Ptsg8zYS….woff2(fonts.gstatic.com)
0 ms

See also: https://imgur.com/a/DAD8unI

It seems that Nitropack loaded differents fonts than the Dynamic functionality is doing and maybe this is one of the reasons of the improvements. I don’t know.

I also tried to disable my cookie plugin, which didn’t improve the Time To Interactive.

I also moved JQuery to the absolute bottom of the html, so it is not render-blocking by adding this in functions.php:

// Remove JQuery from header so it'll be loaded in footer using a GeneratePress Hook
function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', false);
    }
}
add_action('init', 'my_init');

And by adding this in a footer hook so this jQuery code loads at the bottom:

<script src='../wp-includes/js/jquery/jquery.min.js' id='jquery-core-js' ver='3.6.0'></script>

This improved the PageSpeed in a good way, with a few percent, but did not change the Time to Interactive noticeably.

I already tried to use the Shortpixel CDN in combination with Autoptimize, but this did not make a difference since we were already using webp as the primary image format.

I tried to remove the GTM (by disabling my GTM wp_body and wp_head hooks) and this improved the Time to Interactive with approx 1.5-2 seconds. But then I am still sticked with a Time to Interactive still hanging at approx 3,3 seconds, and then I don’t have GTM, and I don’t want my SEO colleague to come after me. 😉 . In the meanwhile I’ve asked my SEO colleague to further investigate GTM optimization because there’s something to win there.

At my computer it takes about 1400ms to start even loading anything (in Chrome > Inspect > Network). Only after approx 1400ms
the first contents are loaded. I am using fiber internet and I live approx 20-30 km from the datacenter where the VPS resides.

I also did a lot of analyzing of network results but except for the 1400ms delay in (server?) response time I wasn’t able to figure out other causes of a relatively high Time To Interactive.

Any suggestions about further optimization to reach a better Time To Interactive at this site?

[David]

Hi there,

you can use the Chrome dev tools or a site like Web Page test to check out the site. I ran a test for the latter here – with a link to the CWV report:

https://www.webpagetest.org/vitals.php?test=220530_BiDcG1_AFC&run=1

Notice the really hight TBT ( Time Blocking Time ). If you scroll down you can see a breakdown of its causes.

Some thoughts:

Autoptimize is bundling some of your scripts. Might be better to use a plugin to load what is necessary and defer the rest.
Tawk chat bot – defer its loading.
And the rest looks to be GTM related. May want to look at local loading ?

You might want to consider deferring the loading of the Tawk chat bot, so its not blocking the main thread.
Ther

[Author]

Posts