dogmal Posted March 14, 2017 Share Posted March 14, 2017 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. Quote Link to comment https://forums.phpfreaks.com/topic/303454-how-to-remove-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/ Share on other sites More sharing options...
Psycho Posted March 14, 2017 Share Posted March 14, 2017 (edited) 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 March 14, 2017 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/303454-how-to-remove-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/#findComment-1544229 Share on other sites More sharing options...
Drongo_III Posted March 18, 2017 Share Posted March 18, 2017 (edited) I recently went through this. In respect of speeding up load time you may wish to consider some of these too: Place your scripts at the bottom of your html above the closing body tag Consider using the 'async' attribute on scripts which aren't essential Consider aggregating your scripts into a single file for production (something like gulp could be automated to do this). This means fewer server calls. Create image sprites where appropriate and aggregate SVGs into an icon font (sites like icomoon are handy here). Again, fewer server calls. 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 Run all images assets through something like https://tinypng.com/ (equivalents for jpeg etc) as this can strip huge amounts from image file sizes. 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 March 18, 2017 by Drongo_III Quote Link to comment https://forums.phpfreaks.com/topic/303454-how-to-remove-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/#findComment-1544348 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.