Jump to content

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


Recommended Posts

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.

post-203867-0-30842900-1489469594_thumb.jpg

Take a look at this article about optimizing CSS: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#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.com/questions/19026345/load-jquery-after-the-page-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

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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.