Return to previous page

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This topic has 21 replies, 3 voices, and was last updated 6 years ago ago by Olga Barlow

ahmadtalal

Participant

March 31, 2018 at 14:51

Hi,
I am testing my website against google page speed test for several days now and I am constantly improving the website. I have used Autoptimize plugin to inline CSS and Js.
I have pretty much removed all the error showing at google page speed but now i have 4 errors at CSS suggestion which are all related to google fonts. I dont know how to improve the site and remove those error.
I m using Roboto fonts at my website.
the errors are following.
https://fonts.googleapis.com/css
https://fonts.googleapis.com/css
https://fonts.googleapis.com/css?family=Roboto
https://fonts.googleapis.com/css?family=Roboto

is there any way i can improve the site and remove those errors.
thanks

#189886 Copied

20 Answers

Rose Tyler

Support staff

April 2, 2018 at 09:29

Hello,

Please provide us with your website URL. What version of theme do you use?

Regards

#189965 Copied

ahmadtalal

Participant

April 2, 2018 at 09:33

here is the url to my website.
https://millycart.com

and i m using the latest version of the theme, its 3.7

one more thing, last night i have installed a child theme and now i m using child theme.
but i have a problem with that. when i enable JS optimization in Autoptimize then it breaks the SINGLE PRODUCT PAGE lightbox, and all the product images are then scattered around.

#189966 Copied

Rose Tyler

Support staff

April 2, 2018 at 12:47

Could you provide temporary wp-admin access in Private Content also?

Regards

#190002 Copied

ahmadtalal

Participant

April 2, 2018 at 12:59

Hi,
Thanks for replying.
I m not sure about the credential. I need to ask the client first.
In the mean time can you just tell me that instead of accessing google font api, cant i copy the fonts file to the server and link it in the html? coz i m using only one font type “Roboto”.
I have little bit of knowledge of Html, CSS and PHP. is it possible that i link the font in the footer not in the header?
thnx

#190006 Copied

ahmadtalal

Participant

April 2, 2018 at 14:19

Basically the client wants that the html should render first and after tht JS and CSS.
he wants to shift those two to footer but when i do that then i lose all style and everything. is there anyway where i can render html first then JS and CSS bcoz it will decrease the first byte time.
thnx

#190020 Copied
Olga Barlow

Support staff

April 3, 2018 at 14:54
Hello,

1) Autoptimize. Exclude head.js file http://prntscr.com/j0933y
2), 3) To remove font, add Roboto only and move styles and scripts to footer add the following code in child theme functions.php
```
function etheme_enqueue_styles() {
   global $etheme_responsive, $etheme_theme_data;
    $etheme_theme_data = wp_get_theme( 'legenda' );

    if ( !is_admin() ) {

        $script_depends = array();

        if(class_exists('WooCommerce')) {
            $script_depends = array('wc-add-to-cart-variation');
        }

        wp_enqueue_script('head', get_template_directory_uri().'/js/head.js'); // modernizr, owl carousel, Swiper, FullWidth helper
        if(etheme_get_option('product_img_hover') == 'tooltip'){
            wp_enqueue_script('tooltip', get_template_directory_uri().'/js/tooltip.js');
        }
        wp_enqueue_script('jquery');
        wp_enqueue_script('all_plugins', get_template_directory_uri().'/js/plugins.min.js',$script_depends,false,true);
        wp_enqueue_script('waypoints');

        wp_enqueue_script('etheme', get_template_directory_uri().'/js/etheme.js',$script_depends,false,true);

        wp_localize_script( 'etheme', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noresults' => __('No results were found!', 'legenda')));
        wp_localize_script( 'all_plugins', 'ethemeLocal', array('tClose' => __('Close (Esc)', 'legenda')));

    }
}

function add_footer_styles() {
    global $etheme_responsive, $etheme_theme_data;
    $etheme_theme_data = wp_get_theme( 'legenda' );

    $custom_css = etheme_get_option('custom_css');

    if ( !is_admin() ) {

        wp_enqueue_style("et-font-awesome",get_stylesheet_directory_uri().'/css/font-awesome.css', array( 'fonts' ) );
        wp_enqueue_style("style",get_stylesheet_directory_uri().'/style.css', array(), $etheme_theme_data->Version);

        wp_enqueue_style("font-roboto",et_http()."fonts.googleapis.com/css?family=Roboto:300,400,500,700");
        wp_enqueue_style('js_composer_front');

        if($etheme_responsive){
            wp_enqueue_style("responsive",get_template_directory_uri().'/css/responsive.css', array(), $etheme_theme_data->Version);
        }

        if($custom_css) {
            wp_enqueue_style("custom",get_template_directory_uri().'/custom.css', array(), $etheme_theme_data->Version);
        }

        $etheme_color_version = etheme_get_option('main_color_scheme');

        if($etheme_color_version=='dark') {
            wp_enqueue_style("dark",get_template_directory_uri().'/css/dark.css', array(), $etheme_theme_data->Version);
        }
    }
};
add_action( 'get_footer', 'add_footer_styles' );
```
Regards
#190136 Copied
ahmadtalal

Participant

April 3, 2018 at 16:06

Hi,
Thanks a lot for replying.
I have added that piece of code to the function.php and also exlude head.js from autoptimize.

Head.js exlusion:
https://prnt.sc/j0anxj

Then when i try to check the website then at the single product page the images was scattered all over the place again.

then i look into it and check with chrome developer tool in console the check the errors.
all those errors was generated from JQuery script

Console Errors:
https://prnt.sc/j0apuc

so then what i did was to exclude Jquery also from Autoptimize

Jquery Exclusion:
https://prnt.sc/j0aqx8

after that all the errors are gone but still I have the Google font Api errors.

google fonts errors:
https://prnt.sc/j0arno

but even with that i tried to check with google page speed tool and the score turned out to be almost the same.
for desktop it was 68/100.

and still its showing me the same suggestions at google page speed.

suggestions at google page speed:
https://prnt.sc/j0au6l

I m having problem with this autoptimize and jquery when i have installed the child theme. before the child theme when i tried it with the parent theme then it was fine. it didnt break anything. but since i have isntalled the child theme and when i enable autoptimize for js then it breaks the Jquery script.
Looking forward to be fixed soon.
Thanks a lot for replying and helping

#190152 Copied

Olga Barlow

Support staff

April 4, 2018 at 10:52

Hello,

Provide, please, temporary Dashboard and FTP access to your site to check. To find the reason of the problem we need to check the code that you have in child theme and plugins that you use because one of them also can cause the issue.

Regards

#190228 Copied

ahmadtalal

Participant

April 4, 2018 at 11:17

Hi,
I have attached the login and ftp credential.
please check it out what is causing the problem.

Please, contact administrator
for this information.

#190236 Copied

Olga Barlow

Support staff

April 5, 2018 at 10:42

Hello,

Check now.

Regards

#190355 Copied

ahmadtalal

Participant

April 5, 2018 at 11:48

Hi,
The head.js and jquery is still excluded from autoptimize plugin which means that they are still in the HEAD and also not optimized.
Bcoz of that my site google page speed test result went to 70 from 83.
If i switch back to parent theme and i include the jquery in autoptimize to optimize it then it doesnt break the single product page but it does break with the child theme.
is there any way to shift those JAVASCRIPTS to footer without breaking the site?
thnx

#190368 Copied

ahmadtalal

Participant

April 5, 2018 at 11:56

and now at google page speed test its showing BACKEND ERROR

#190369 Copied

Olga Barlow

Support staff

April 6, 2018 at 10:01

Hello,

Unfortunately, head.js can’t be moved to footer because of carousels. All we can do is offer the refund or XStore theme instead of Legenda. XStore supports scripts in the footer.

Can you provide us correct FTP access? We want to try another cache and minification plugin, maybe it will give better results.

Regards

#190481 Copied

ahmadtalal

Participant

April 6, 2018 at 20:09

Hi,
Thanks for the help.
I m sorry to say but i dont want refund. i really like the support here. Let me try the Xstore theme. as u have said tht it supports the JS in the footer then i think tht would give us better result.
so whats the process of trying the xstore theme

#190570 Copied

ahmadtalal

Participant

April 7, 2018 at 11:35

???????

#190574 Copied

ahmadtalal

Participant

April 8, 2018 at 08:11

Hi,
A while ago i have checked the Xstore theme out and i think its perfect for my website coz my website is a eCommerce store.
so how can i switch to Xstore from legenda and since it supports JS in the footer then that will also solve the problem…
thnx

#190582 Copied

ahmadtalal

Participant

April 9, 2018 at 06:32

I want to buy another Xstore Theme as well.
I have setup another domain last night and planning to buy Xstore theme for that but before that i want to check it out at my current website. if it works out for me then i will buy another license as well.
thnx

#190591 Copied

Olga Barlow

Support staff

April 10, 2018 at 09:39

Hello,

Sorry for the some delay in answering.
1) To get XStore license you need to go ThemeForest and buy it.
2) After that submit refund request for the Legenda theme https://themeforest.net/refund_requests/new
3) Once you did that reply back here and provide me XStore purchase code in private content area. We’ll check it and confirm Legenda refund request.

Regards

#190664 Copied

ahmadtalal

Participant

April 10, 2018 at 09:45

Hi,
I have bought the Xstore theme and i also requested the refund.
I will attach the purchase code in the private. please check it out
thnx

Please, contact administrator
for this information.

#190667 Copied
1 2

Viewing 20 results - 1 through 20 (of 21 total)