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 7 years, 1 months ago ago by Olga Barlow

  • Avatar: ahmadtalal
    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
    Avatar: Rose Tyler
    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
    Avatar: ahmadtalal
    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2018 at 12:47

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

    Regards

    #190002 Copied
    Avatar: ahmadtalal
    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
    Avatar: ahmadtalal
    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
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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
    Avatar: ahmadtalal
    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
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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
    Avatar: ahmadtalal
    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
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 5, 2018 at 10:42

    Hello,

    Check now.

    Regards

    #190355 Copied
    Avatar: ahmadtalal
    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
    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 5, 2018 at 11:56

    and now at google page speed test its showing BACKEND ERROR

    #190369 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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
    Avatar: ahmadtalal
    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
    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 7, 2018 at 11:35

    ???????

    #190574 Copied
    Avatar: ahmadtalal
    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
    Avatar: ahmadtalal
    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
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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
    Avatar: ahmadtalal
    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
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 11, 2018 at 12:09

    Hello,

    Done.

    Regards

    #190824 Copied
  • Viewing 21 results - 1 through 21 (of 21 total)

You must be logged in to reply to this topic.Log in/Sign up

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Underwear Store – WordPress WooCommerce Theme
lazy-placeholder
Boxed Store – WooCommerce Theme
lazy-placeholder
Default RTL – WordPress WooCommerce Theme
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Minimal Electronics – WordPress WooCommerce Theme
lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
NFT Crypto Marketplace – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Fishing – WooCommerce Theme
lazy-placeholder
Perfume – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.