CODEWITHSUNDEEP
javascript
Nazmul Ahasan
Nazmul Ahasan

Reputation: 11

Remove Render Blocking Javascript

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

Upvotes: 0

Views: 3145

Answers (3)

Denny Rakhmad Widi Ashari
Denny Rakhmad Widi Ashari

Reputation: 16

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 :

  1. change <head> to &lt;head&gt;
  2. If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
  3. Change </head> to &lt;!--<head/>--&gt;
  4. add <!-- </body></html> --> 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>

Upvotes: 0

Sara Sofia
Sara Sofia

Reputation: 1

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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).

Upvotes: 1

Related Questions