New to the community? Start here

[Hummingbird] Report shows performances can be better

Dear support team,

I've just ran a perf test on my website naturo-nancy.fr

The speed section shows that I should "Eliminate render-blocking JavaScript and CSS in above-the-fold", "Leverage browser caching" and "Reduce server response time".

How may I do all these things ?

FIY : I've enabled support access in the dashboard.

Thank you very much !

Greg

More Hummingbird discussions
Hummingbird
  • Predrag Dubajic

    Hi Greg,

    I'm afraid that support access is not working on your site for some strange reason, can you try revoking it and then granting it again?

    About the errors you are seeing, let me start from the easiest one to solve:
    Leverage browser caching
    You can go to Hummingbird > Caching > Browser Caching and enable browser caching to get rid of this report.

    Reduce server response time
    This is mostly directly related to your server, you might get some better results by enabling Page Caching from Hummingbird > Caching > Page Caching panel.
    This error means that your server is slow to respond to requests that is getting, so if you're not getting improvement from Page Caching you should discuss this further with your hosting provider.

    Eliminate render-blocking JavaScript and CSS in above-the-fold
    This is most tricky one to resolve and it requires tweaking your files in Hummingbird > Asset Optimization.
    When you activate Asset Optimization you can switch to advanced mode and from there tweak the available options for each file.
    Goal here is to have most of the options enabled but still keeping the functionality of your site.
    Unfortunately, there's no automated way of doing this since each installation is unique due to the plugins and theme being used, and you would need to go through the settings until you get the best results for your site

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Greg,

    I'm afraid that I still can't use the support access to check your site but those screenshots do help to give you some more info.

    2) Leverage browser caching

    You can see that all of those resources listed are coming from Google itself, so they are not hosted on your server and due to that there's not much you could do about them and you can only force browser caching on the files served from your server directly :slight_frown:

    4) Eliminate render-blocking JavaScript and CSS in above-the-fold
    It's actually minified hummingbird files :
    Should I defer some of them or enqueue them in the footer in the functions.php file ? Would that change how HB behave ?

    HB will create those files when it combines the existing ones, so depending on where they are called in the first place it will determine how many files will be created and where they will be loaded.
    You should try deferring them and moving some of the files to footer, this will also affect how HB creates the files and you might get better speed results, but it's not always possible to get this to clean 100 due to how the plugins and themes are working on WordPress.

    5) The Google test also tells me that there are too many redirects. Do you know what that means ?

    Can you tell me which test exactly are you referring to because I put your site in Google PageSpeed Insights and didn't see any redirect warnings?

    Best regards,
    Predrag

  • Greg

    Dear Predrag,

    Thank you for your answer.
    1) I've double checked and the support access is granted. I extended it but I doubt it would make a difference. The URL is : https://www.naturo-nancy.fr/

    2) OK, I'll leave it like that, then

    4) Is there an option in HB to tell which scripts and styles should be loaded in the footer and which should be defered ?

    5) It doesn't say so anymore... Let's forget about it, if I see it again I'll provide a screenshot.

    Regards,
    Greg

  • Predrag Dubajic

    Hi Greg,

    1) I've double checked and the support access is granted. I extended it but I doubt it would make a difference. The URL is : https://www.naturo-nancy.fr/

    Still didn't work :slight_frown:
    Could you provide me with your WP admin login details so we can check what's going on here?
    Note: Don't leave your login details in this ticket.
    Instead, you can send us your details using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question and the template below:

    Subject: "Attn: Predrag Dubajic"
    - Site login URL
    - WordPress admin username
    - WordPress admin password
    - FTP credentials (host/username/password)
    - cPanel credentials (host/username/password)
    - Folder path to site in question
    - Link back to this thread for reference
    - Any other relevant urls/info

    4) Is there an option in HB to tell which scripts and styles should be loaded in the footer and which should be defered ?

    Unfortunately no, this highly depends on theme and plugins used on the site, and pretty much each installation will have its own settings that fit the best.
    Usually it's a good idea to avoid changing anything for core jQuery file as this will most likely cause issues.

    5) It doesn't say so anymore... Let's forget about it, if I see it again I'll provide a screenshot.

    Sounds good, if it does happen again grab a screenshot and share it here :slight_smile:

    Best regards,
    Predrag

    • Greg

      Dear Predrag,

      Thank you for your help. Accessing the website won't be necessary.
      I would just like to know which scripts are enqueued in the header or in the footer.

      In order to list all my scripts, I use the following code :

      // Afficher tous les scripts
function display_script_handles() {
	echo display_wp_enqueued( 'script' );
}
function display_style_handles() {
	echo display_wp_enqueued( 'style' );
}
function display_wp_enqueued( $type = 'script' ){
	$output = '';
	if( !is_admin() ){
		$id = 0;
		if( $type == 'style' ){
			global $wp_styles;
			$t = $wp_styles;
		}
		else{
			global $wp_scripts;
			$t = $wp_scripts;
		}
		// if( is_gllorca() ){ # Only load when user is admin
			foreach( $t->queue as $handle ){
				$obj = $t->registered[$handle];
				$output .= '<p>' . $type . '&nbsp;: <span class="green"> '.$handle.'</span>&nbsp;- ' . $obj->src . '</p>';
				$id++;
			}
			$output .= '<p class="red bold">Nombre de ' . $type . 's : ' . $id .'</p>';
		// }
	}
	return $output;
}
add_action( 'wp_print_scripts', 'display_script_handles' );
add_action( 'wp_print_styles', 'display_style_handles' );

      Would you know how to tweak it to add the words "Header" or "Footer" where appropriate ?

      Regards,
      Greg

  • Konstantinos Xenos

    Hi Greg !

    If you look at the core functions for example wp_enqueue_script() you'll find this "if" ( /wp-includes/functions.wp-scripts.php Line 278 ).

    if ( $in_footer ) {
	$wp_scripts->add_data( $_handle[0], 'group', 1 );
}

    So the globals carry with them the "extra" key that is an array itself as well. This will contain the 'group' if they are assigned to the footer and specifically Group: 1. For example a TwentyFifteen script in the footer is like this:

    [21-Sep-2018 15:44:31 UTC] _WP_Dependency Object
(
    [handle] => twentyfifteen-skip-link-focus-fix
    [src] => http://wp.test/wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js
    [deps] => Array
        (
        )
    [ver] => 20141010
    [args] =>
    [extra] => Array
        (
            [group] => 1
        )

)

    In order to add the - Header / - Footer to your code you can just make a simple extra check since you are already accessing the whole object.

    // Afficher tous les scripts
function display_script_handles() {
	echo display_wp_enqueued( 'script' );
}
function display_style_handles() {
	echo display_wp_enqueued( 'style' );
}
function display_wp_enqueued( $type = 'script' ) {
	$output = '';
	if ( ! is_admin() ) {

		$id = 0;

		if ( 'style' == $type ) {
			global $wp_styles;
			$t = $wp_styles;
		} else {
			global $wp_scripts;
			$t = $wp_scripts;
		}

		// if( is_gllorca() ){ # Only load when user is admin
		foreach ( $t->queue as $handle ) {
			$obj = $t->registered[ $handle ];

			$output .= '<p>' . $type . ' : <span class="green"> ' . $handle . '</span> - ' . $obj->src;

			if ( ! empty( $obj->extra['group'] && 1 == $obj->extra['group'] ) ) {
				$output .= ' - Footer ';
			} else {
				$output .= ' - Header ';
			}

			$output .= '</p>';

			$id++;
		}

		$output .= '<p class="red bold">Nombre de ' . $type . 's : ' . $id .'</p>';

		// }
	}

	return $output;
}
add_action( 'wp_print_scripts', 'display_script_handles' );
add_action( 'wp_print_styles', 'display_style_handles' );

    I hope this helps a bit.

    Regards,
    Konstantinos.

    • Greg

      Dear Konstantinos,

      Thank you, this works like a charm.

      I have the following result :

      All of this is fine. Therefore, I guess there is nothing more I may do in order to speed up above the fold content.

      I've also used the following function :

      // Defer JS loading
function wsds_defer_scripts( $tag, $handle, $src ) {

	// echo '&nbsp;&nbsp;Handle : <strong>' . $handle . '</strong> - Source = : ' . $src . '<br>';

	// The handles of the enqueued scripts we want to defer
	$defer_scripts = scripts_to_defer();

    if ( in_array( $handle, $defer_scripts ) ) {
        return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );

/* DEREGISTRATION */
function scripts_to_defer(){
	return array(
		"jquery-migrate",
		"ub_cookie_notice",
		"gl-scripts",
		"admin-bar",
		"script-logo",
	);
}

      Do you know, if in the first bit of code, it is also possible to write wether a script has been defered or not, on top of showing where it has been enqueued ?

      Regards,
      Greg

  • Konstantinos Xenos

    Hey Greg ,

    Deferring happens within the code itself since you 'defer=defer' so you'll have to actually parse the HTML as far as I'm concerned to see what scripts are actually deferred. So in a nutshell 'no' it's not possible to know if they are before the code is generated. WordPress also doesn't have this option built-in so the global lists don't know if a script is deferred as well.

    ---

    I'll be truly honest though here as I want to help and I see that you're trying really hard to 'fix' some issues and I don't understand why are you going into these lengths via code when you could simply do all these via HB itself. I'll attach some screenshots from my site that has 100/100 or 97/100 ( due to Reduce server response time on which I can't do anything basically ) PageSpeed Insights just for the sake of explanation ( extraordinary yes, impossible no, anything close to 80/100 is more than enough imho and that might not be needed even some times ).

    Let me start by saying that there shouldn't be anything 'extra' needed from what Hummingbird already offers to do the job at hand, getting a good PageSpeed result is a really tricky thing some times ( depending on the website ) and you'll just have to understand what it is asked to do, that sometimes is kind of foolish also, let's not forget that all these metrics are based on code and they can't actually 'see' what the page does they just have some preset information and make a call to inform you on top of that. For example you can have a website loading within 200ms and Google will still say 15/100 because the Insights just see CSS in the wrong place. So what do we care here about really? What Google says or if the website IS actually fast? What I'm trying to say is to not rely on Insights always, a 'user test' is seriously the best answer most of the times, if you think that your site loads up fine and fast then that's how it is.

    As you'll see on the following screenshot I also have a plentiful of css / js files that needed attention. If you click on the far right icon next to Clear Cache ( I've marked it with a red square ) you can enable the Advanced Mode. This will open up some extra buttons to 'Combine ( if not on HTTP2 ), Move to Footer, Inline CSS and load after the page has loaded.

    As you'll see on my set up ( every set up is different so you can't simply 'copy' what another site is doing ) everything is pretty much loaded in the footer. Not even on async/defer mode and I don't have any 'above the fold' issues.

    The 'above the fold' is mostly a CSS priority and you can easily tackle that by adding the Critical CSS as an inline block and then move all other CSS files into the footer. If you go to Asset Optimization -> Tools you'll see an area to paste your critical css that can be generated, I personally prefer to use https://www.sitelocity.com/critical-path-css-generator to create my CSS for that purpose. When you generate your CSS and paste the code in the text area ( see screenshot ) you'll have to make a 'Re-Check Files' on the Assets tab, when that's done you'll find a new file called wphb-critical-css. You can simply 'inline' that and leave it on the head section and make all other CSS go to footer ( this is the 1st file of my list actually ).

    As far as JS go you can also move everything to footer as well to avoid the Render Blocking / Above the Fold issues but there's a catch with JS. All js files HAVE to be enqueued correctly by their plugins etc with proper order for this to work fully, so this is not entirely on Hummingbirds end as it just replicates and respects the existing loading order. So this has to be treated a bit carefully to see which files might be giving issues. In my case I can even load jquery / jquery migrate on footer without issues at all.

    I hope this helps and 'clears' some things up, as I think that you're going into un-needed lengths to find solutions that can be easily handled from within the Admin area.

    Regards,
    Konstantinos

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.