Serve resources from a consistent URL in gtmetrix for Hustle Popup

I get this in gtmetrix test.
Serve resources from a consistent URL
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 33.7KiB.
https://fonts.googleapis.com/css?family=Roboto+Condensed%3A300%2C300i%2C400%2C400i%2C700%2C700i%7CRoboto%3A300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i&ver=4.9.4
https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i%7CRoboto:300,300i,400,400i,500,500i,700,700i
My site is loading these fonts even though I'm not using them at all. So I contacted the DIVI support. They could see that Hustle is loading the fonts. So I deactivated hustle to see if it's the case and it is. When hustle is deactivated everything is fine, no extra font's being loaded. weirdly enough that's only happening on one of my subsite.

  • Adam Czajczyk

    Hello Stefan

    I hope you're well today and thank you for your question!

    I tested this on my test site and can confirm the issue. Hustle is using these fonts in its desgin/styles. The issue happens because when Hustle is active it actually adds calls to these fonts in two different places: it injects the line into the site source but also uses @import in its CSS file.

    That being said, I'm not sure if this is on purpose or if it's a "leftover" from some older version so I asked our developers for some clarification on this.

    Please keep an eye on this thread for further information.

    Kind regards,
    Adam

  • Lindeni Mahlalela

    Hello Stefan

    I hope you are doing great today. Thank you so much for reporting this issue and thanks for your patience.

    I have also tested this on my test site and I was able to replicate it, I confirm what my colleague Adam said in his response. The loaded CSS file in:

    wp-content/plugins/hustle/assets/css/front.css

    uses @import to import the font files from the url while the same fonts are also inserted in the page by using the wp_enqueue_style function in the file:

    wp-content/plugins/hustle/inc/hustle-module-front.php

    There are two solutions for this:

    1. The first and recommended option is to edit the 'front.css' file in the location mentioned above and remove the @import lines, there are three at the beginning of this file but I haven't seen the third one loaded anywhere else, these imports come before the start of:

    @keyframes ToggleShow{...

    Once these @imports are removed then it might be worth it adding the third one by using the wp_register_style and wp_enqueue_style in the 'hustle-module-front.php' in the location mentioned above so that you have these lines:

    wp_register_style( 'hstl-source-code-pro', 'https://fonts.googleapis.com/css?family=Source+Code+Pro', $this->_hustle->get_const_var(  "VERSION" ) );
    wp_enqueue_style( 'hstl-source-code-pro');

    Inside 'function register_styles()' at the bottom before the line:
    $this->_inject_styles();

    So the function should look like this at the bottom:

    function register_styles() {
    	//rest of the code here
    	wp_register_style( 'hstl-source-code-pro', 'https://fonts.googleapis.com/css?family=Source+Code+Pro', $this->_hustle->get_const_var(  "VERSION" ) );
    	wp_enqueue_style( 'hstl-source-code-pro');
    
    	$this->_inject_styles();
    }

    Or you can simply download, unzip and upload the files contained in the attached zips to replace the files:

    /wp-content/plugins/hustle/assets/css/front.css
    /wp-content/plugins/hustle/inc/hustle-module-front.php

    Please note that you will only upload the .php files contained in the attached .zip files, so you will have to unzip them first. Once you have done that you can save and upload the modified files back to the website.

    2. The second but least recommended option is to edit the file hustle/inc/hustle-module-front.php and comment out or remove the lines that look like this:

    wp_register_style( 'hstl-roboto', 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i', $this->_hustle->get_const_var(  "VERSION" ) );
    wp_register_style( 'hstl-opensans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i', $this->_hustle->get_const_var(  "VERSION" ) );
    
    wp_enqueue_style('hstl-roboto');
    wp_enqueue_style('hstl-opensans');

    Once you have done this save and upload the file back to your website. I say this is the least recommended fix because GTMetrix will still give a low score under "Avoid CSS @import" like so:

    If the @import are removed entirely as detailed in the first option then you should get a good score for service resources from a consistent URL and for avoiding CSS @imports. I have tested this on my site and it worked. Please apply this fix on your site then clear your cache if you have caching enabled then run another test in GTMetrix. Let us know if you need help applying this fix and we will be ready to help in any way possible.

    Please note that this is not an official fix and may not be included in the next update, so before updating please check the changelog to see if this is included or not.

    I hope this helps. Please let us know if you need any further assistance with regards to this and we will be happy to help in any way possible.

    Have a nice day.
    Lindeni