Remove Render Blocking Javascript

Question

I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.

Your page has 1 blocking script resources and 3 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa

Nazmul, I am afraid that people will discourage this type of question because Google has already given you instructions concerning how to remove the render blocking resources. You can move the assets to the footer of the document (if that is permissible) and that should resolve this issue. Note that moving them to the footer is only one solution, there are others. — Chris Bier
– Chris Bier, Commented Jun 3, 2014 at 21:39
I actually would like to do what the recommended. Sorry guys! I'm not so well in programming and using Blogger to run my poor site! :( Will you please help me by providing me some specific solutions? — Nazmul Ahasan
– Nazmul Ahasan, Commented Jun 3, 2014 at 21:52

Diodeus - James MacFarlane · Accepted Answer · 2014-06-03 21:43:12Z

1

If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?

Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).

answered Jun 3, 2014 at 21:43

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sara Sofia · Accepted Answer · 2015-09-08 16:11:23Z

0

I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>

Otherwise you need to go into your server and make adjustments to your htcaccess file.

answered Sep 8, 2015 at 16:11

Sara Sofia

11 bronze badge

Comments

Denny Rakhmad Widi Ashari · Accepted Answer · 2017-04-21 03:23:50Z

Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it. Follow my step with :

change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add  before </head>
Change </head> to 
add  before </body></html>

It is about DOM get work, I will give you example my blank blogger template if you still headache.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    &lt;head&gt;
        <meta charset='utf-8'/>
        <style/>
        <b:skin><![CDATA[]]></b:skin>
    <!-- </head> -->
    &lt;!--<head/>--&gt;
    <body>
        <b:section class='header' id='header' showaddelement='yes'/>
        <a href="https://klikada.com"><h1 style="color:blue;font-family: monospace">klikada.com</h1></a>
        <b:section class='main' id='main' showaddelement='yes'/>
        <b:section class='footer' id='footer' showaddelement='yes'/>
    <!-- </body></html> -->  
    <style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>

Collectives™ on Stack Overflow

Remove Render Blocking Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related