Render blocking script -Prioritize visible content

[கதம்பம்]

Dear Coding hero’s,
Good Day,
I am a newbie for codings.This is My site http://www.kadhambam.in, on the top of my site i added google translate and custom search by adding the below code. I am getting 2 types of problems :-

1.Prioritize visible content
2.Eliminate render-blocking JavaScript and CSS in above-the-fold content
a) http://www.google.com/cse/api/branding.css
b) https://translate.googleapis.com/…ranslate_static/css/translateelement.css
c) https://fonts.googleapis.com/…s?family=Open+Sans:400,400italic,700,600

can any one modify the coding and solve the above problems?
Thanks in advance.

<div id=”container”>
<div id=”google_translate_element”></div>
<script type=”text/javascript” Async>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: ‘en’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’);
}
</script>

<script Async type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit” Async></script>
<div id=’div2′>
<p><style type=”text/css”>
@import url(//www.google.com/cse/api/branding.css);
</style>`
<div class=”cse-branding-bottom” style=”background-color:#FFFFFF;color:#000000″>
<div class=”cse-branding-form”>
<form action=”http://www.google.com” id=”cse-search-box” target=”_blank”>
<div>
   <input type=”hidden” name=”cx” value=”partner-XXXXXXXX” />
   <input type=”hidden” name=”ie” value=”UTF-8″ />
   <input type=”text” name=”q” size=”50″ />
   <input type=”submit” name=”sa” value=”Search” />
</div>
</form>
</div>
<div class=”cse-branding-logo”>
Google
</div>
<div class=”cse-branding-text”>
Custom Search
</div>
</div>
</p>
</div>
<Br>
</div>

<div class=”mh-header-mobile-nav clearfix”></div>
<header class=”mh-header” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div class=”mh-container mh-container-inner mh-row clearfix”>
<?php mh_magazine_lite_custom_header(); ?>
</div>
<div class=”mh-main-nav-wrap”>
<nav class=”mh-navigation mh-main-nav mh-container mh-container-inner clearfix” itemscope=”itemscope” itemtype=”http://schema.org/SiteNavigationElement”>
<?php wp_nav_menu(array(‘theme_location’ => ‘main_nav’)); ?>
</nav>
</div>
</header>

[Rick Steinwand]

Why don't you add the search and translate via javascript after the page loads?

[கதம்பம்]

Dear sir,

            Thanks for your reply. i am newbie for coding. i am ready to add using javascripts. but i dont know how to do that.can you plz help me in that coding? 

[Rick Steinwand]

You want to move your scripts to the bottom of the page. Make sure the page still works, then test your score. See if there's any improvement.

Then try to "lazy load" your search and translate scripts. https://jmperezperez.com/ondemand-javascript-lazy-loading-stubs/ 

There are many techniques to lazy load scripts. I use that link as an example, although I don't know if that's the best or worst script.

[கதம்பம்]

Dear,

                Thanks for your idea. i tried it.but it does not work for me.But i catch you idea and moved the google search and translate to below the menu's. It does not solve my actual problem.but it dramatically boos my website speed.Before its was 10 seconds.but now 4.5 seconds loading time.