Need help eliminating render-blocking JavaScript in WordPress

Need help eliminating render-blocking JavaScript in WordPress

Discussion in 'Web Programming' started by nesito29, Aug 21, 2015.

  1. nesito29

    nesito29 Active Member

    Messages:
    98
    Likes Received:
    54
    Trophy Points:
    28
    Ratings:
    +84 / 0 / -0
    Hey there,

    First of all, thanks for taking the time to read my inquiry. I've being researching how to eliminate the render-blocking JavaScript from one of my sites, I've checked Google developers page speed insights suggestions and I honestly didn't completely understand it, I always outsource this but, this time I'd like to do it myself. It's something I've taken an interest into lately and want to learn more.

    I 'd really appreciate it if anyone could refer me to a comprehensive guide or explain to me how to do it.

    Thank you,
    Jonathan N
     
    Loading...
  2. elcidofaguy

    elcidofaguy Active Member

    Messages:
    197
    Likes Received:
    81
    Trophy Points:
    28
    Ratings:
    +147 / 0 / -0
    Hiya Jonathan -

    This should be pretty easy to solve.... In sum render blocking Javascript is when Javascript calls slows down your page loading as the code is executed synchronously from top to bottom with <head> elements loaded first and then to <body> ... </body> code... which can cause a bunch of issues...

    Therefore you have three options:

    1) Move your Javascript references to the end of your html code i.e. just before the </body> tag. That way the HTML page will load and last not least will be the Javascript file.... Do note if the Javascript code needs to be executed on document load then this may not work - so then you can try placing it before the reference point...

    2) Alternatively you could load the Javascript files locally on your server... Sometimes external references on another server maybe slow to respond and hence causing delays...

    3) Finally you can make the Javascript reference asynchronous i.e. use this code: <script async src="my.js">

    Hope that helps!
     
    • Like Like x 3
    • Useful Useful x 1
    • List
  3. nesito29

    nesito29 Active Member

    Messages:
    98
    Likes Received:
    54
    Trophy Points:
    28
    Ratings:
    +84 / 0 / -0
    Thank you! I'll make sure to try it out and eliminate that thing :)
     
  4. Hostlumina

    Hostlumina Active Member

    Messages:
    280
    Likes Received:
    97
    Trophy Points:
    28
    Ratings:
    +166 / 0 / -0
    @elcidofaguy - :Great:

    @nesito29 - Elcidofaguy's suggestion is right on the money. Hope it helps, share your results :)