0

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

Topic moved to: https://support.ontraport.com/hc/en-u...

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/opt_a...
https://optassets.ontraport.com/opt_a...
https://optassets.ontraport.com/opt_a...
https://fonts.googleapis.com/css?fami...
https://app.ontraport.com/js/ontrapor...
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!

edit retag flag offensive reopen merge delete

Closed for the following reason the question is answered, right answer was accepted by Frank
close date 2016-07-26 07:13:59.091658

3 answers

Sort by ยป oldest newest most voted
0

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 loadtimes. 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

edit flag offensive delete publish link more
0

I did check with our developers. Because of the nature of ONTRApages, you won't be able to time the CSS files being added to the page. The CSS files are necessary to render the page correctly. They format the text, images, spacing, etc. In cases where people do delay the stylesheets on their own web pages you see the un-formatted text and images displayed along the left side and then "morphing" into the actual page design as the CSS file is processed.

edit flag offensive delete publish link more
0

Thank you, Lorenzo.
Your answer is very satisfactory. I really appreciate your professionalism.
You are right, I always use google developer tools and ask for expert help if needed. I will follow your progress on page optimizations as I think your pages are pretty good. And thank you for the article which definitely will read it and learn more.
Keep in touch, guys. Thanks

edit flag offensive delete publish link more

Question Tools

1 follower

Stats

Asked: 2015-12-09 18:53:15 -0700

Seen: 211 times

Last updated: Jul 26 '16