Jump to content


Photo

How to remove Eliminate render-blocking JavaScript and CSS in above-the-fold content


  • Please log in to reply
2 replies to this topic

#1 dogmal

dogmal
  • New Members
  • Pip
  • Newbie
  • 1 posts

Posted 14 March 2017 - 05:33 AM

Hi

 

I developed one site for my client named Dogmal in core php and WordPress. Everything is working fine till now. My client asked me to increase the website speed So, I created some code for speed optimization. After doing optimization website speed has increased but here is one error "Eliminate render-blocking JavaScript and CSS in above-the-fold content" which I want to remove. I tried many ways to remove it but don't get ride on it. Here is my site url : http://www.dogmal.com/ 

Any help appreciated.

 

Thanks in advance.

Attached Files



#2 Psycho

Psycho
  • Moderators
  • Advanced Member
  • 11,755 posts
  • LocationCanada

Posted 14 March 2017 - 04:39 PM

Take a look at this article about optimizing CSS: https://developers.g...elivery#example

 

Basically, you define the critical styles in the document (e.g. using script tags) and you dynamically load/apply the non-critical styles after the page has loaded.

 

For the JQuery API - I'm not sure. There is an onload() event handler for JQuery - but the JQuery needs to already be loaded, which kind of defeats the purpose. Try taking a look at the 3rd response on this post: http://stackoverflow...is-fully-loaded

 

Depending on how the site is built this could be easy or difficult. If some things are 'required' to be loaded when the page is first rendered, it may take time to figure out all those pieces and/or could require some re-engineering. Good luck.


Edited by Psycho, 14 March 2017 - 04:41 PM.

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#3 Drongo_III

Drongo_III
  • Members
  • PipPipPip
  • Advanced Member
  • 565 posts

Posted 18 March 2017 - 04:20 PM

I recently went through this.

 

 

In respect of speeding up load time you may wish to consider some of these too:

 

  1. Place your scripts at the bottom of your html above the closing body tag
  2. Consider using the 'async' attribute on scripts which aren't essential
  3. Consider aggregating your scripts into a single file for production (something like gulp could be automated to do this). This means fewer server calls.
  4. Create image sprites where appropriate and aggregate SVGs into an icon font (sites like icomoon are handy here). Again, fewer server calls.
  5. Consider loading assets from CDN because some browsers can only maintain a certain number of parallel resource calls against the same domain.  So distributing your resource calls across multiple domains/subdomains can speed up load times
  6. Run all images assets through something like https://tinypng.com/ (equivalents for jpeg etc) as this can strip huge amounts from image file sizes.
  7. Make sure you have the right cache controls as these can have a huge impact.

I know some of that is off point but might be helpful.

 

Drongo


Edited by Drongo_III, 18 March 2017 - 04:21 PM.

Learning something new simply uncovers how much there is left to learn...

One day when I know what I'm talking about all my noob posts will come back to haunt me. But I shall rejoice in the cleansing light of knowledge over ignorance :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users