简体   繁体   中英

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 

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

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.

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM