Post

2 followers Follow
0
Avatar

How to eliminate render-blocking JavaScript and CSS in above-the-fold content?

Partners Team

Submitted by Victor

Hey guys,

I'm trying to see if Ontrapages will work for me, so I'm testing a few simple pages before take the premium package, but they are not running as expected.

I want to know how to optimize my site and one of the suggestions I received is to Eliminate render-blocking JavaScript and CSS in above-the-fold content.

I have 7 blocking CSS resources. This causes a delay in rendering my page:
https://optassets.ontraport.com/optassets/blocks/common/skeleton/css/normalize.css
https://optassets.ontraport.com/opt
assets/blocks/common/skeleton/css/skeleton.css
https://optassets.ontraport.com/optassets/blocks/common/skeleton/css/fonts.css
https://fonts.googleapis.com/css?fami...
https://app.ontraport.com/js/ontrapor...
control/textarea/wysihtml5-textalign.css
https://optassets.ontraport.com/opt_a...

Is there any way to optimize them by deferring or asynchronously loading blocking resources, or inline the critical portions of those resources directly in the HTML? Because they must be loaded BEFORE any other "above-the-fold" content can render.

I'd really appreciate your help.
Thank you guys!

Answered

Official comment

Avatar

Answered by ONTRAPORT Engineer Lorenzo:

Hi I'm one of the frontend engineers here at ONTRAPORT. I'm guessing your using Google's PageSpeed Insights. What PageSpeed is suggesting is that you inline the css required for the first half of the page so it loads with the page markup and defer loading to the css scripts. This will make your page load faster but the gains are marginal. Furthermore dividing css files such that you can inline the half required for the first half of the page is a real pain. You can imagine dividing a css frame work to suit each of your pages would be a nightmare.

ONTRAPAGES uses industry best practice which dictates that css scripts are included near the top of a file in the head tag, javascript is loaded toward the end of the file preferably right above the /body tag. Reason being that css files block page rendering but are necessary to make pages appear according to design. In other words if you don't download the css first your page will load slightly faster because the DOM will be ready sooner however you will get a "flash" of un-styled content. I'm sure you've seen this before.

We continue to work on page optimizations and load times. We hope to have ONTRAPAGES css files even more optimized soon. Here is a great resource on page optimization if you want to learn more. http://csswizardry.com/2013/01/front-...

Thanks,

Lorenzo

Frank Hagan
Comment actions Permalink

Please to leave a comment.

1 comment