How to avoid JQuery and Bootstrap render-block JavaScript and CSS

[Octopus]

Hi,

I made a small web app using ASP:NET, which has a layout file requiring JQuery and Bootstrap. PageSpeed Insights gives me a 66/100 (!!) for mobile and 87/100 for desktop. For the mobile version it suggests the following:

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

Your page has 2 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

• https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js
• https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js

Optimize CSS Delivery of the following:

• https://ajax.aspnetcdn.com/…ax/bootstrap/3.3.6/css/bootstrap.min.css

For the desktop version, it complains only about the above css.

Since these are relatively large files, I do not think that inlining as suggested by google s a good option? How can I improve page speed when using such large libraries?

Thanks!

[Michael Brown]

move the js to the bottom of the page and then append the css file to the head with js at the bottom also.

[Joshua Marantz]

RE "move the js file to the bottom of the page": I'm skeptical this will help, really, if you are using jquery to render the page. What we're trying to do here is not game the PSI score.  It's to make your page faster on first load. And if your web-site must load https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js before it can render, it doesn't really matter *how* you load it, it's going to have to wait for the file to be downloaded & parsed before the user can see anything.

PageSpeed will probably ding you for that irrespective of the mechanism you use to load the JS.

My 2c: you need to figure out what you want to optimize for: developer convenience or user experience.  Optimizing for both is hard.  jquery is cool and easy to use, but it is a framework and will slow down your initial render.  Check out http://vanilla-js.com/ for an opinionated take on this.

RE "append the css file to the head with js at the bottom also": see the snippets in https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery to help you do that effectively.  But beware that this may not help either, depending on how your CSS is structured.  If the CSS you are delay-loading is critical to the initial page view, you are not really going to help your users by doing this.  In fact, your web page may display quickly, but without correct styling, until the CSS eventually is loaded.  I'm not sure if that will improve your PSI score but it will likely be a bad user experience.

To do this well, you need to split the CSS into critical and non-critical sections.  Inline the critical sections into the html head, and delay-load the non-critical sections from an external file.  This is not easy, particularly with a framework-provided CSS file, but if your plan to provide the best possible UX it's the best way I know.

-Josh

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/fefcc00a-4916-4c32-8601-1242f9b871b4%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Octopus]

Hi Michael,

Thanks for answering. The js is already at the bottom. The css is linked in the head. What do you mean by append? Copy paste the code in a style tag?

[Octopus]

Hi Josh,

Thanks for answering, too. I was fearing that indeed this would be the solution, to split the bootstrap file, or perhaps better, make a custom one, which I expect to be smaller, too.

I am a bit worried of abandoning JQuery, because I need for google charts and signalr. Any thoughts?

Also, I want to favour user experience, or dev convenience, so I am ready to work on that. Do you have some links to docs on how to do custom styling + js without reinventing the wheel of responsive design?

[Octopus]

Erratum: I want to favour user experience, or dev convenience---> I want to favour user experience over dev convenience

[Joshua Marantz]

You certainly don't need jquery to run Google Charts.  I've used Google Charts myself directly and it's pretty easy.

Most importantly, you can render your web page without the chart without any external resources, and load a google-charts-dependent helper JS asynchronously.  Punch your chart into your site once charts is ready for action.  I have to admit, though, that in some recent code I wrote using Google Charts, I wound up doing a blocking load of the loader script: (https://www.gstatic.com/charts/loader.js) so that then I get an async callback.

 google.charts.load('current', {'packages': ['table']});
 google.charts.setOnLoadCallback(loadDatabase);
 It occurred to me even when I did this that the blocking-load of the loader script was optimizing for programmer convenience over UX which was the right thing for what I was working on at the time.  It'd be better to find a pattern where with zero blocking script loads we can kick off a chart rendering.

I don't know anything about signalr -- perhaps there is a similar capability to load it without blocking the web page, and run a callback once it's ready.

-Josh

--

You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/cfc5856d-79d5-4338-bf89-e4a4ad3964d2%40googlegroups.com.

[Octopus]

You are right for the Charts, my apologies, I was referring to a webpage I quickly wrote here I used google charts + an ajax call, which I did via jquery.

As for SignalR, a jquery-free version is on the way, but it is since some time now. https://github.com/SignalR/SignalR/issues/372.

My main concern now is to follow your advice on splitting the (bootstrap) css, so if you have a hint/links on how to do custom styling + js without reinventing the wheel of responsive design?

.

[Joshua Marantz]

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery outlines several mechanisms to compute the critical/non-critical CSS.

This includes what my team works on, mod_pagespeed, and its prioritize_critical_css filter, but OptimizeCSSDelivery outlines other mechanisms as well.

RE jquery -- I think there is nothing wrong with jquery, from a render-blocking perspective  (and hence the jquery-dependent version of SignalR) as long as you load it asynchronously and only use it after it is loaded.  Of course, the render-blocking metric that PSI does is not the only important way to gauge web site performance, and you might wind up delaying interactivity with an external load, even if the page is nominally rendered.

Check out the RAIL metrics (https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en), which tries to put numbers to that concern.

-Josh